diff --git a/.env.production b/.env.production index d87d48531ab..9ac75645a90 100644 --- a/.env.production +++ b/.env.production @@ -1 +1 @@ -BACKEND_URI=https://carbondesignsystem.vercel.app/api/survey +BACKEND_URI=https://carbondesignsystem.vercel.app/api/survey \ No newline at end of file diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 449e1574f9a..ababb11c82d 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,32 +1,19 @@ # Default to system one design and one dev -* @carbon-design-system/developers-system @carbon-design-system/design - -*.conf @vpicone -# Vikki Paterson is code owner for Experimental IDE patterns -src/pages/community/patterns/create-flows/* @vikkipaterson -src/pages/community/patterns/delete-pattern/* @vikkipaterson -src/pages/community/patterns/export-pattern/* @vikkipaterson -src/pages/community/patterns/generate-an-api-key/* @vikkipaterson -src/pages/community/patterns/import-pattern/* @vikkipaterson -src/pages/community/patterns/remove-pattern/* @vikkipaterson - -# Vincent Snagg is code owner for Experimental Watson Health patterns -src/pages/community/patterns/chatbot/* @vincentsnagg +* @carbon-design-system/developers-system @carbon-design-system/design -# Adriana Morales is code owner for Experimental Cloud PAL patterns -src/pages/community/patterns/order-summary-template/* @adrianamorales -src/pages/community/patterns/cards/* @adrianamorales -src/pages/community/patterns/dashboard-widgets/* @adrianamorales +# Diana Tran is the owner for Sustainability Software Patterns -# Chris Reckling is the code owner for Experimental IoT patterns -src/pages/community/patterns/login-pattern/* @lukefirth +src/pages/community/patterns/login-pattern/* @dianatran18 @lukefirth # Eliad Moosavi and Natasha Decoste are the code owners for Data Visualization + src/pages/data-visualization/* @theiliad @natashadecoste -# Cal Smith for Angular tutorial +# Zvonimir Fras for Angular tutorial + /src/pages/tutorial/angular/* @zvonimirfras # Lee Chase for Vue tutorial -/src/pages/tutorial/vue/* @lee-chase + +/src/pages/tutorial/vue/* @lee-chase \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/component-accessibility-deliverables.yaml b/.github/ISSUE_TEMPLATE/component-accessibility-deliverables.yaml new file mode 100644 index 00000000000..7849bf9f340 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/component-accessibility-deliverables.yaml @@ -0,0 +1,92 @@ +name: Component accessibility deliverables +description: Submit the accessibility portion of your component +title: '[Component name] component – accessibility ' +labels: 'accessibility' +body: + - type: markdown + attributes: + value: | + Complete the following deliverables for Carbon to review the accessibility portion of the [component contribution process](https://carbondesignsystem.com/contributing/component/). To see examples, view the component accessibility guidelines on [Github](https://github.com/carbon-design-system/carbon/wiki/Component-Accessibility-Guidelines) or on [figma](https://www.figma.com/file/PmSOwLS3ldpSQtUf4xlaLD/component-accessibility-guidelines?type=design&node-id=434-4103&mode=design&t=qQ2DqDAiNaOLPlBC-0). + + 1. Define component + 2. Document keyboard interactions + 3. Provide visual states + 4. Repeat steps 2 – 3 for each variant, if any + 5. Repeat step 3 for each child/subcomponent, if any + + - type: markdown + attributes: + value: '## 1. Define component' + + - type: checkboxes + id: type + attributes: + label: Component type + description: + variants are only when the interaction differs from default component, + not when there are only visual differences + options: + - label: Variant of existing component + - label: New component with no variants + - label: New component with variants + required: false + + - type: checkboxes + id: subcomponent + attributes: + label: Can it be opened/expanded to reveal a child/subcomponent? + description: + if the child/subcomponent is non-interactive, visual states may not be + needed + options: + - label: Yes, it can + - label: No, it cannot + required: false + + - type: markdown + attributes: + value: '## 2. Document keyboard interactions' + + - type: checkboxes + id: keyboard + attributes: + label: Select all that apply + description: + options: + - label: '"Tab" moves between interactive components' + - label: Arrow keys move between component and subcomponent + - label: '"Enter" activates' + - label: '"Space" selects' + - label: '"Esc" closes' + required: false + + - type: textarea + id: visual-examples + attributes: + label: Create keyboard interaction visual examples + description: + 'Provide screenshots or a figma link. In the early stages of + contribution, only low fidelity visuals are required, but high fidelity + visuals should be created by the time the component is ready to be + published. Duplicate the [figma + file](https://www.figma.com/file/PmSOwLS3ldpSQtUf4xlaLD/lo-fi-keyboard-interaction-visual?type=design&node-id=434-4103&t=kO1MZkuNTKMIAj0h-0) + to see examples and use the provided assets.' + validations: + required: true + + - type: markdown + attributes: + value: '## 3. Provide visual states' + - type: textarea + id: visual-states + attributes: + label: + Focused and non-focused states for default, selected, error (if any) and + error + selected (if any) + description: + 'Provide screenshots or a figma link. This is in addition to what Carbon + may require. Duplicate the [figma + file](https://www.figma.com/file/PmSOwLS3ldpSQtUf4xlaLD/lo-fi-keyboard-interaction-visual?type=design&node-id=434-4103&t=kO1MZkuNTKMIAj0h-0) + to see examples and use the provided template.' + validations: + required: true diff --git a/.github/workflows/platform-content-sync.yml b/.github/workflows/platform-content-sync.yml deleted file mode 100644 index efce1cdb40d..00000000000 --- a/.github/workflows/platform-content-sync.yml +++ /dev/null @@ -1,29 +0,0 @@ -name: Sync content with platform - -on: - push: - branches: - - 'main' - paths: - - '**.mdx' - -jobs: - create_issue: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - with: - repository: carbon-design-system/carbon-platform - ref: main - - name: Generate token - uses: tibdex/github-app-token@v1 - id: generate_token - with: - app_id: ${{ secrets.APP_ID }} - private_key: ${{ secrets.APP_PRIVATE_KEY }} - - name: Create issue on platform repo - run: | - gh issue create --title "[Content sync]: carbon-website" --label "role: dev πŸ€–" --label "service: web-app 🌎" --body 'A pull request on carbon-website was just merged. It contains .mdx content changes that may need to be synced to platform: - - ${{ github.event.compare }}' - env: - GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }} diff --git a/.github/workflows/update-carbon-gatsby-deps.yml b/.github/workflows/update-carbon-gatsby-deps.yml new file mode 100644 index 00000000000..2f3c86a9204 --- /dev/null +++ b/.github/workflows/update-carbon-gatsby-deps.yml @@ -0,0 +1,53 @@ +name: Update Carbon and gatsby-theme-carbon deps + +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + +on: + workflow_dispatch: + +jobs: + carbon-website: + runs-on: ubuntu-latest + timeout-minutes: 15 + steps: + - uses: actions/checkout@v3 + with: + repository: carbon-design-system/carbon-website + ref: main + - name: Use Node.js 18.x + uses: actions/setup-node@v3 + with: + node-version: '18.x' + registry-url: 'https://registry.npmjs.org' + - name: Update dependencies + run: | + yarn upgrade \ + @carbon/react@next \ + @carbon/elements@next \ + @carbon/pictograms@next \ + @carbon/pictograms-react@next \ + @carbon/icons@next \ + @carbon/icons-react@next \ + gatsby-theme-carbon@latest \ + - name: Generate token + uses: tibdex/github-app-token@v1 + id: generate_token + with: + app_id: ${{ secrets.APP_ID }} + private_key: ${{ secrets.APP_PRIVATE_KEY }} + - name: Create Pull Request + uses: peter-evans/create-pull-request@v5 + with: + branch: 'release/update-carbon-deps' + commit-message: 'chore(release): update carbon and gatsby-theme-carbon deps' + delete-branch: true + title: 'chore(release): update carbon and gatsby-theme-carbon deps' + token: ${{ steps.generate_token.outputs.token }} + body: | + Automated pull request to update Carbon and gatsby-theme-carbon on the website + **Checklist** + - [ ] Verify package version bumps are accurate + - [ ] Verify CI passes as expected + - [ ] Verify no regressions on the website in the deploy preview diff --git a/conf.d/rewrite.conf b/conf.d/rewrite.conf index c17a5631163..431ca8c864b 100644 --- a/conf.d/rewrite.conf +++ b/conf.d/rewrite.conf @@ -25,6 +25,7 @@ rewrite /get-started/design/(.*) /designing/get-started/kits/\$1 permanent; # Contributions rewrites rewrite /how-to-contribute/(.*) /contributing/\$1 permanent; +rewrite /contributing/overview /contributing/get-started permanent; # What's happening rewrite /updates/whats-new /whats-happening/releases permanent; @@ -51,4 +52,7 @@ rewrite /whats-happening/v11-release /migrating/guide/\$1 permanent; #Icon and pictogram contribution rewrite /guidelines/icons/contribute/ /contributing/contribute-icons/ permanent; -rewrite /guidelines/pictograms/contribute/ /contributing/contribute-pictograms/ permanent; \ No newline at end of file +rewrite /guidelines/pictograms/contribute/ /contributing/contribute-pictograms/ permanent; + +#Grid +rewrite /guidelines/2x-grid/implementation/ /guidelines/2x-grid/usage/ permanent; \ No newline at end of file diff --git a/package.json b/package.json index 1d4ee1e2c57..e572bd54047 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "nohoist": [] }, "scripts": { - "dev": "gatsby develop -H 0.0.0.0", + "dev": "NODE_OPTIONS='--max-old-space-size=8192' gatsby develop -H 0.0.0.0", "dev:clean": "gatsby clean && yarn dev", "clean": "gatsby clean", "build": "node --max-old-space-size=8192 ./node_modules/.bin/gatsby build", @@ -40,11 +40,12 @@ "dependencies": { "@babel/core": "^7.15.8", "@carbon/charts-react": "0.55.0", - "@carbon/elements": "^11.27.0-rc.0", - "@carbon/icons-react": "^11.24.0-rc.0", - "@carbon/pictograms": "^12.21.0-rc.0", - "@carbon/pictograms-react": "^11.47.0-rc.0", - "@carbon/react": "^1.35.0-rc.0", + "@carbon/elements": "^11.32.2", + "@carbon/icons": "^11.29.2", + "@carbon/icons-react": "^11.29.2", + "@carbon/pictograms": "^12.25.2", + "@carbon/pictograms-react": "^11.51.2", + "@carbon/react": "^1.41.2", "@loadable/component": "^5.15.2", "@slack/web-api": "^5.11.0", "babel-preset-env": "^1.7.0", @@ -57,7 +58,7 @@ "gatsby": "^4.25.7", "gatsby-image": "^3.7.1", "gatsby-plugin-image": "^2.9.0", - "gatsby-theme-carbon": "^3.1.4", + "gatsby-theme-carbon": "^3.1.27", "lodash-es": "^4.17.15", "markdown-it": "^12.3.2", "nanoid": "^2.1.11", @@ -115,7 +116,6 @@ ] }, "resolutions": { - "webpack": "^5.59.0", - "@carbon/react": "1.35.0-rc.0" + "webpack": "^5.59.0" } } diff --git a/src/components/ColorPalette/ColorPalette.module.scss b/src/components/ColorPalette/ColorPalette.module.scss index f4ff8b4c95b..c4c99342203 100644 --- a/src/components/ColorPalette/ColorPalette.module.scss +++ b/src/components/ColorPalette/ColorPalette.module.scss @@ -80,7 +80,9 @@ } .palette-switcher - :global(.cds--content-switcher-btn:not(.cds--content-switcher--selected):hover) { + :global( + .cds--content-switcher-btn:not(.cds--content-switcher--selected):hover + ) { background-color: $hover-ui; } diff --git a/src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js b/src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js index 928ef45136c..9085239788c 100644 --- a/src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js +++ b/src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js @@ -27,7 +27,10 @@ const IconCategory = ({ category, pictograms, columnCount }) => { pictogram.name === 'ibm--z' || pictogram.name === 'ibm--z--partition' || pictogram.name === 'ibm--z-and-linuxone-multi-frame' || - pictogram.name === 'ibm--z-and-linuxone-single-frame' + pictogram.name === 'ibm--z-and-linuxone-single-frame' || + pictogram.name === 'watsonx--ai' || + pictogram.name === 'watsonx--data' || + pictogram.name === 'watsonx--governance' ) { return false; } diff --git a/src/components/StorybookDemo/StorybookDemo.js b/src/components/StorybookDemo/StorybookDemo.js new file mode 100644 index 00000000000..9f7b5ee1372 --- /dev/null +++ b/src/components/StorybookDemo/StorybookDemo.js @@ -0,0 +1,174 @@ +/* + * Copyright IBM Corp. 2022, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import { unstable__FluidDropdown as FluidDropdown, Link } from '@carbon/react'; +import { Caption, Row, Column } from 'gatsby-theme-carbon'; +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import { useState } from 'react'; + +import * as styles from './StorybookDemo.module.scss'; + +const themeItems = [ + { + id: 'white', + label: 'White', + src: 'white', + }, + { + id: 'g10', + label: 'Gray 10', + src: 'g10', + }, + { + id: 'g90', + label: 'Gray 90', + src: 'g90', + }, + { + id: 'g100', + label: 'Gray 100', + src: 'g100', + }, +]; + +/** + * The `` component displays an iframe embed for the storybook story + * for a component. It has the option to show different variants and themes. It also has a + * `wide` prop to span the full width, and `tall` for larger components. If you would like + * to use the theme selector, please use the Carbon React Storybook url, + * https://react.carbondesignsystem.com/?path=/story/components-button--default&globals=theme:g10 + * as an example. The `themeSelctor` appends `&globals=theme:g10` to the url. + */ +const StorybookDemo = ({ tall, themeSelector, wide, url, variants }) => { + const columnWidth = wide ? 12 : 8; + + const demoClassNames = cx(styles.demo, { + [styles.tall]: tall, + [styles.wide]: wide, + }); + + const [theme, setTheme] = useState(themeItems[0].src); + const onThemeChange = (item) => { + setTheme(item.selectedItem.src); + }; + + const multipleVariants = variants?.length > 1; + + const variantsDefined = + typeof variants !== 'undefined' && variants.length > 0; + + const initialSetVariant = variantsDefined && variants[0].variant; + + const [variant, setVariant] = useState(initialSetVariant); + + const onVariantChange = (item) => { + setVariant(item.selectedItem.variant); + }; + + const iframeUrl = + url + '/iframe.html?id=' + variant + '&globals=theme:' + theme; + + // Only add border when theme and variant selectors are being displayed + const border = cx({ + [styles.themeSelector]: multipleVariants, + }); + + return ( + <> + + {themeSelector && ( + + + + )} + {variantsDefined && multipleVariants && ( + + + + )} + + + +