diff --git a/gatsby-config.js b/gatsby-config.js index 3b72280c235..7b6b3e99192 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -12,7 +12,6 @@ module.exports = { flags: { PRESERVE_WEBPACK_CACHE: true, FAST_DEV: true, - FAST_REFRESH: true, }, plugins: [ { diff --git a/src/components/ColorGrid/ColorGrid.js b/src/components/ColorGrid/ColorGrid.js index 4ffd236b36c..0a412befdee 100644 --- a/src/components/ColorGrid/ColorGrid.js +++ b/src/components/ColorGrid/ColorGrid.js @@ -2,7 +2,7 @@ import React from 'react'; import { colors, black100, - green50, + green60, orange40, red60, white0, @@ -34,7 +34,7 @@ export default function ColorGrid({ colorFamily, ...rest }) { - + ); } diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js index 0cdf60d4fdf..66335cff77d 100644 --- a/src/data/guidelines/color-tokens.js +++ b/src/data/guidelines/color-tokens.js @@ -266,10 +266,7 @@ const colorTokens = { }, }, '$button-separator': { - role: [ - '3:1 aa element contrast', - 'Fluid button separator', - ], + role: ['3:1 aa element contrast', 'Fluid button separator'], value: { white: { name: 'Gray 20', @@ -290,9 +287,7 @@ const colorTokens = { }, }, '$decorative-01': { - role: [ - '“Light” variant elements', - ], + role: ['“Light” variant elements'], value: { white: { name: 'Gray 20', @@ -678,12 +673,12 @@ const colorTokens = { role: ['Success'], value: { white: { - name: 'Green 50', - hex: '#24a148', + name: 'Green 60', + hex: '#198038', }, g10: { - name: 'Green 50', - hex: '#24a148', + name: 'Green 60', + hex: '#198038', }, g90: { name: 'Green 40', diff --git a/src/data/index/dot-com/callout-media.yml b/src/data/index/dot-com/callout-media.yml index 213e1cd85d3..c2612f09c73 100644 --- a/src/data/index/dot-com/callout-media.yml +++ b/src/data/index/dot-com/callout-media.yml @@ -1,6 +1,6 @@ name: Callout - with media website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/callout-with-media + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/callout-with-media code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/CalloutWithMedia maintainer: IBM.com diff --git a/src/data/index/dot-com/callout.yml b/src/data/index/dot-com/callout.yml index 3a1be39b75d..5977688e9b1 100644 --- a/src/data/index/dot-com/callout.yml +++ b/src/data/index/dot-com/callout.yml @@ -1,6 +1,6 @@ name: Callout - quote website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/callout-quote + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/callout-quote code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/CalloutQuote maintainer: IBM.com diff --git a/src/data/index/dot-com/card-link.yml b/src/data/index/dot-com/card-link.yml index 3cac1cd97d6..6b2ebec2bb7 100644 --- a/src/data/index/dot-com/card-link.yml +++ b/src/data/index/dot-com/card-link.yml @@ -1,6 +1,6 @@ name: Card link website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/card-link + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/card-link code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/CardLink maintainer: IBM.com diff --git a/src/data/index/dot-com/card-section-image.yml b/src/data/index/dot-com/card-section-image.yml index de37caf24f7..acf20a6485c 100644 --- a/src/data/index/dot-com/card-section-image.yml +++ b/src/data/index/dot-com/card-section-image.yml @@ -1,6 +1,6 @@ name: Card section - images website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/card-section#card-section-images + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/card-section#card-section-images code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/CardSectionImages maintainer: IBM.com diff --git a/src/data/index/dot-com/card-section.yml b/src/data/index/dot-com/card-section.yml index 4c26f49cbb2..f615f473296 100644 --- a/src/data/index/dot-com/card-section.yml +++ b/src/data/index/dot-com/card-section.yml @@ -1,6 +1,6 @@ name: Card section - simple website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/card-section#card-section-simple + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/card-section#card-section-simple code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/CardSectionSimple maintainer: IBM.com diff --git a/src/data/index/dot-com/content-block-cards.yml b/src/data/index/dot-com/content-block-cards.yml index 12fc50f6733..3e098431729 100644 --- a/src/data/index/dot-com/content-block-cards.yml +++ b/src/data/index/dot-com/content-block-cards.yml @@ -1,6 +1,6 @@ name: Content block - with cards website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/content-block-with-cards + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/content-block-with-cards code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ContentBlockCards maintainer: IBM.com diff --git a/src/data/index/dot-com/content-block-media.yml b/src/data/index/dot-com/content-block-media.yml index 8de7e057c41..76f2d957f2c 100644 --- a/src/data/index/dot-com/content-block-media.yml +++ b/src/data/index/dot-com/content-block-media.yml @@ -1,6 +1,6 @@ name: Content block - with media website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/content-block-media + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/content-block-media code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ContentBlockMedia maintainer: IBM.com diff --git a/src/data/index/dot-com/content-block-segmented.yml b/src/data/index/dot-com/content-block-segmented.yml index f5aa86a0257..3f56f1816bd 100644 --- a/src/data/index/dot-com/content-block-segmented.yml +++ b/src/data/index/dot-com/content-block-segmented.yml @@ -1,6 +1,6 @@ name: Content block - segmented website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/content-block-segmented + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/content-block-segmented code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ContentBlockSegmented maintainer: IBM.com diff --git a/src/data/index/dot-com/content-block-simple.yml b/src/data/index/dot-com/content-block-simple.yml index 196845914c3..918ba71e420 100644 --- a/src/data/index/dot-com/content-block-simple.yml +++ b/src/data/index/dot-com/content-block-simple.yml @@ -1,6 +1,6 @@ name: Content block - simple website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/content-block-simple + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/content-block-simple code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ContentBlockSimple maintainer: IBM.com diff --git a/src/data/index/dot-com/content-group-cards.yml b/src/data/index/dot-com/content-group-cards.yml index d131e6b1ecf..ca57b20983b 100644 --- a/src/data/index/dot-com/content-group-cards.yml +++ b/src/data/index/dot-com/content-group-cards.yml @@ -1,6 +1,6 @@ name: Content group - with cards website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/content-group-with-cards + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/content-group-with-cards code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ContentGroupCards maintainer: IBM.com diff --git a/src/data/index/dot-com/content-group-horizontal.yml b/src/data/index/dot-com/content-group-horizontal.yml index fbf4f8f997d..f9d8d401b41 100644 --- a/src/data/index/dot-com/content-group-horizontal.yml +++ b/src/data/index/dot-com/content-group-horizontal.yml @@ -1,6 +1,6 @@ name: Content group - horizontal website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/content-group-horizontal + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/content-group-horizontal code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ContentGroupHorizontal maintainer: IBM.com diff --git a/src/data/index/dot-com/content-group-pictogram.yml b/src/data/index/dot-com/content-group-pictogram.yml index b382b7c9075..67b9ba8a176 100644 --- a/src/data/index/dot-com/content-group-pictogram.yml +++ b/src/data/index/dot-com/content-group-pictogram.yml @@ -1,6 +1,6 @@ name: Content group - with pictograms website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/content-group-pictograms + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/content-group-pictograms code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ContentGroupPictograms maintainer: IBM.com diff --git a/src/data/index/dot-com/content-group-simple.yml b/src/data/index/dot-com/content-group-simple.yml index 892279734b6..5ff9a8dc050 100644 --- a/src/data/index/dot-com/content-group-simple.yml +++ b/src/data/index/dot-com/content-group-simple.yml @@ -1,6 +1,6 @@ name: Content group - simple website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/content-group-simple + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/content-group-simple code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ContentGroupSimple maintainer: IBM.com diff --git a/src/data/index/dot-com/cta-section.yml b/src/data/index/dot-com/cta-section.yml index ee168e3d3be..380bd75cae7 100644 --- a/src/data/index/dot-com/cta-section.yml +++ b/src/data/index/dot-com/cta-section.yml @@ -1,6 +1,6 @@ name: Call-to-action section website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/cta-section + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/cta-section code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/CTASection maintainer: IBM.com diff --git a/src/data/index/dot-com/digital-card.yml b/src/data/index/dot-com/digital-card.yml index be9ec9ca93f..294ace1bad0 100644 --- a/src/data/index/dot-com/digital-card.yml +++ b/src/data/index/dot-com/digital-card.yml @@ -1,6 +1,6 @@ name: Card website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/card + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/card code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/Card maintainer: IBM.com diff --git a/src/data/index/dot-com/expressive-modal.yml b/src/data/index/dot-com/expressive-modal.yml index 46f29a809f6..d90904bcb61 100644 --- a/src/data/index/dot-com/expressive-modal.yml +++ b/src/data/index/dot-com/expressive-modal.yml @@ -1,6 +1,6 @@ name: Expressive modal website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/expressive-modal + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/expressive-modal code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ExpressiveModal maintainer: IBM.com diff --git a/src/data/index/dot-com/feature-card-block-large.yml b/src/data/index/dot-com/feature-card-block-large.yml index 3f9f68c7d5f..b5ccefd062a 100644 --- a/src/data/index/dot-com/feature-card-block-large.yml +++ b/src/data/index/dot-com/feature-card-block-large.yml @@ -1,6 +1,6 @@ name: Feature card block - large website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/feature-card-block#feature-card-block-large + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/feature-card-block#feature-card-block-large code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/FeatureCardBlockLarge maintainer: IBM.com diff --git a/src/data/index/dot-com/feature-card-block-medium.yml b/src/data/index/dot-com/feature-card-block-medium.yml index a68d1f50611..a09f95caa52 100644 --- a/src/data/index/dot-com/feature-card-block-medium.yml +++ b/src/data/index/dot-com/feature-card-block-medium.yml @@ -1,6 +1,6 @@ name: Feature card block - medium website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/feature-card-block#feature-card-block-medium + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/feature-card-block#feature-card-block-medium code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/FeatureCardBlockMedium maintainer: IBM.com diff --git a/src/data/index/dot-com/feature-card.yml b/src/data/index/dot-com/feature-card.yml index 051303d94fd..80c1fe6167d 100644 --- a/src/data/index/dot-com/feature-card.yml +++ b/src/data/index/dot-com/feature-card.yml @@ -1,6 +1,6 @@ name: Feature card website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/feature-card + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/feature-card code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/FeatureCard maintainer: IBM.com diff --git a/src/data/index/dot-com/footer.yml b/src/data/index/dot-com/footer.yml index f7ca3246080..d7ec3ffef5b 100644 --- a/src/data/index/dot-com/footer.yml +++ b/src/data/index/dot-com/footer.yml @@ -1,6 +1,6 @@ name: Footer website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/footer + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/footer code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/Footer maintainer: IBM.com diff --git a/src/data/index/dot-com/horizontal-rule.yml b/src/data/index/dot-com/horizontal-rule.yml index 335b798e579..aa8d795be73 100644 --- a/src/data/index/dot-com/horizontal-rule.yml +++ b/src/data/index/dot-com/horizontal-rule.yml @@ -1,6 +1,6 @@ name: Horizontal rule website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/horizontal-rule + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/horizontal-rule code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/HorizontalRule maintainer: IBM.com diff --git a/src/data/index/dot-com/image-with-caption.yml b/src/data/index/dot-com/image-with-caption.yml index 9dd7f419455..06fe1056f3e 100644 --- a/src/data/index/dot-com/image-with-caption.yml +++ b/src/data/index/dot-com/image-with-caption.yml @@ -1,6 +1,6 @@ name: Image with caption website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/image-with-caption + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/image-with-caption code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/ImageWithCaption maintainer: IBM.com diff --git a/src/data/index/dot-com/lead-space-block.yml b/src/data/index/dot-com/lead-space-block.yml index f36c62131f7..f280951b6a2 100644 --- a/src/data/index/dot-com/lead-space-block.yml +++ b/src/data/index/dot-com/lead-space-block.yml @@ -1,6 +1,6 @@ name: Lead space - block website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/lead-space-block + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/lead-space-block code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/LeadSpaceBlock maintainer: IBM.com diff --git a/src/data/index/dot-com/lead-space.yml b/src/data/index/dot-com/lead-space.yml index 00a65866ba9..90e1f12dd37 100644 --- a/src/data/index/dot-com/lead-space.yml +++ b/src/data/index/dot-com/lead-space.yml @@ -1,6 +1,6 @@ name: Lead space website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/leadspace + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/leadspace code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/LeadSpace maintainer: IBM.com diff --git a/src/data/index/dot-com/lightbox-media-viewer.yml b/src/data/index/dot-com/lightbox-media-viewer.yml index 90ac7223b77..952c1d53056 100644 --- a/src/data/index/dot-com/lightbox-media-viewer.yml +++ b/src/data/index/dot-com/lightbox-media-viewer.yml @@ -1,6 +1,6 @@ name: Lightbox media viewer website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/lightbox-media-viewer + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/lightbox-media-viewer code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/LightboxMediaViewer maintainer: IBM.com diff --git a/src/data/index/dot-com/link-list.yml b/src/data/index/dot-com/link-list.yml index 1eb8c08a16b..c77fabbb151 100644 --- a/src/data/index/dot-com/link-list.yml +++ b/src/data/index/dot-com/link-list.yml @@ -1,6 +1,6 @@ name: Link list website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/link-list + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/link-list code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/LinkList maintainer: IBM.com diff --git a/src/data/index/dot-com/link-with-icon.yml b/src/data/index/dot-com/link-with-icon.yml index a50a2dcc79f..74f0eb91d0c 100644 --- a/src/data/index/dot-com/link-with-icon.yml +++ b/src/data/index/dot-com/link-with-icon.yml @@ -1,6 +1,6 @@ name: Link with icon website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/link-with-icon + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/link-with-icon code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/LinkWithIcon maintainer: IBM.com diff --git a/src/data/index/dot-com/locale-modal.yml b/src/data/index/dot-com/locale-modal.yml index 5d9c7b09fe4..be9fbb4221e 100644 --- a/src/data/index/dot-com/locale-modal.yml +++ b/src/data/index/dot-com/locale-modal.yml @@ -1,6 +1,6 @@ name: Locale modal website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/localemodal + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/localemodal code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/LocaleModal maintainer: IBM.com diff --git a/src/data/index/dot-com/logo-grid.yml b/src/data/index/dot-com/logo-grid.yml index 55b80a4fa30..fcdd09df5d3 100644 --- a/src/data/index/dot-com/logo-grid.yml +++ b/src/data/index/dot-com/logo-grid.yml @@ -1,6 +1,6 @@ name: Logo grid website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/logo-grid + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/logo-grid code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/LogoGrid maintainer: IBM.com diff --git a/src/data/index/dot-com/masthead.yml b/src/data/index/dot-com/masthead.yml index da4c964c92d..57d9683fee8 100644 --- a/src/data/index/dot-com/masthead.yml +++ b/src/data/index/dot-com/masthead.yml @@ -1,6 +1,6 @@ name: Masthead website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/masthead + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/masthead code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/Masthead maintainer: IBM.com diff --git a/src/data/index/dot-com/table-of-contents.yml b/src/data/index/dot-com/table-of-contents.yml index 1ec06f0534d..b57bf3774f9 100644 --- a/src/data/index/dot-com/table-of-contents.yml +++ b/src/data/index/dot-com/table-of-contents.yml @@ -1,6 +1,6 @@ name: Table of contents website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/table-of-contents + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/table-of-contents code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components/TableOfContents maintainer: IBM.com diff --git a/src/data/index/dot-com/video-player.yml b/src/data/index/dot-com/video-player.yml index 98b47fef611..bebf8534ac3 100644 --- a/src/data/index/dot-com/video-player.yml +++ b/src/data/index/dot-com/video-player.yml @@ -1,6 +1,6 @@ name: Video player website_url: >- - https://www.ibm.com/standards/web/ibm-dotcom-library/components/video-player + https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/components/video-player code_url: >- https://github.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/react/src/components maintainer: IBM.com diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 7193c916124..4eb9998fa19 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -2,8 +2,10 @@ pages: - title: What is Carbon? path: /all-about-carbon/what-is-carbon/ - - title: How Carbon works - path: /all-about-carbon/how-carbon-works/ + - title: Who uses Carbon? + path: /all-about-carbon/who-uses-carbon/ + - title: The Carbon ecosystem + path: /all-about-carbon/the-carbon-ecosystem/ - title: The Carbon team path: /all-about-carbon/the-team/ - title: Partners diff --git a/src/pages/all-about-carbon/images/ecosystem/bee.svg b/src/pages/all-about-carbon/images/ecosystem/bee.svg new file mode 100644 index 00000000000..2d0757621fc --- /dev/null +++ b/src/pages/all-about-carbon/images/ecosystem/bee.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/all-about-carbon/images/ecosystem/blog.svg b/src/pages/all-about-carbon/images/ecosystem/blog.svg new file mode 100644 index 00000000000..8c6770a4eb9 --- /dev/null +++ b/src/pages/all-about-carbon/images/ecosystem/blog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/all-about-carbon/images/ecosystem/carbon.svg b/src/pages/all-about-carbon/images/ecosystem/carbon.svg new file mode 100644 index 00000000000..cb837d6d494 --- /dev/null +++ b/src/pages/all-about-carbon/images/ecosystem/carbon.svg @@ -0,0 +1 @@ +carbon \ No newline at end of file diff --git a/src/pages/all-about-carbon/images/ecosystem/chat-bot.svg b/src/pages/all-about-carbon/images/ecosystem/chat-bot.svg new file mode 100644 index 00000000000..cdbcbe95a7f --- /dev/null +++ b/src/pages/all-about-carbon/images/ecosystem/chat-bot.svg @@ -0,0 +1 @@ +chat-bot \ No newline at end of file diff --git a/src/pages/all-about-carbon/images/ecosystem/data--1.svg b/src/pages/all-about-carbon/images/ecosystem/data--1.svg new file mode 100644 index 00000000000..c95cf9a3466 --- /dev/null +++ b/src/pages/all-about-carbon/images/ecosystem/data--1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/all-about-carbon/images/ecosystem/ibm-cloud.svg b/src/pages/all-about-carbon/images/ecosystem/ibm-cloud.svg new file mode 100644 index 00000000000..8e49e26f310 --- /dev/null +++ b/src/pages/all-about-carbon/images/ecosystem/ibm-cloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/all-about-carbon/images/ecosystem/iot--platform.svg b/src/pages/all-about-carbon/images/ecosystem/iot--platform.svg new file mode 100644 index 00000000000..86f5098658a --- /dev/null +++ b/src/pages/all-about-carbon/images/ecosystem/iot--platform.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/all-about-carbon/images/ecosystem/watson.svg b/src/pages/all-about-carbon/images/ecosystem/watson.svg new file mode 100644 index 00000000000..f94ecccc849 --- /dev/null +++ b/src/pages/all-about-carbon/images/ecosystem/watson.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/all-about-carbon/the-carbon-ecosystem.mdx b/src/pages/all-about-carbon/the-carbon-ecosystem.mdx new file mode 100755 index 00000000000..2753e17f1f8 --- /dev/null +++ b/src/pages/all-about-carbon/the-carbon-ecosystem.mdx @@ -0,0 +1,236 @@ +--- +title: The Carbon ecosystem +description: + Within IBM, every team that is building a digital experience is consuming + Carbon assets and guidance but Carbon is more than one website. +--- + + + +Within IBM, every team that is building a digital experience is consuming Carbon +assets and guidance but Carbon is more than one website. + + + + + +Overview +Community assets +Product +IBM.com +Brand +Conversational UX + + + +## Overview + +At its core, Carbon has universal assets–elements, components, patterns, and +code–and guidance for how to design and build with them. These assets are +considered universal or fundamental in nature, which means they can be used as a +base for the widest variety of situations, and extended or adapted for the +specific business use cases. + +Beyond this core is a distributed ecosystem of sites that support and serve the +design and development communities within IBM and, where open source content is +available, the external community as well. + +The following sites within the Carbon community include guidance, assets, and +resources for all of IBM’s digital experiences from product to website. _Note +that some guidance is accessible to IBMers only._ + +## Community assets + +### Component index + +These components are developed and maintained by members of the IBM Carbon +community. They may change over time, and they may be incomplete or +experimental. For support, please contact the maintainers listed on each page. + +_Some of this content is accessible to IBMers only._ + + + + + +![Carbon icon](images/ecosystem/carbon.svg) + + + + + + +### Patterns + +Patterns are best practice solutions for how a user achieves a goal. These +community patterns are developed and maintained by members of the Carbon +community. For support, contact the maintainers listed on each page. + +_Some of this content is accessible to IBMers only._ + + + + + +![Carbon icon](images/ecosystem/carbon.svg) + + + + + + +## Product + +The guidance and resources here are for IBM product teams building software +applications and digital experiences with the Carbon Design System. This work is +built on the foundation of Carbon and provides solutions for specific domains +and use cases. + +_This content is accessible to IBMers only._ + + + + + +![IoT icon](images/ecosystem/watson.svg) + + + + + + + +![Data icon](images/ecosystem/ibm-cloud.svg) + + + + + + +![Cloud icon](images/ecosystem/ibm-cloud.svg) + + + + + + +![Pattern icon](images/ecosystem/watson.svg) + + + + + + +![Pattern icon](images/ecosystem/watson.svg) + + + + + +## IBM.com + +The guidance and resources here have been developed for IBM teams building +digital experiences for the IBM.com site. + + + + + +![Bee icon](images/ecosystem/bee.svg) + + + + + + +## Brand + +The journey to understand IBM brand guidance begins with the foundations in the +Brand Center, then extends to the expression of brand as documented in the IBM +Design Language (IDL) site. From there, go to the IBM Brand Systems for visual +systems and guidance tailored to our hero brands, category brands, and +offerings. + +_This content is accessible to IBMers only._ + + + + + +![Bee icon](images/ecosystem/bee.svg) + + + + + + + +![Bee icon](images/ecosystem/bee.svg) + + + + + + + +![Bee icon](images/ecosystem/bee.svg) + + + + + + +## Conversational UX + +The IBM Natural Conversation Framework is for anyone designing or building +conversational agents. It provides design principles, interaction patterns, and +working code for the basic mechanics of natural conversation. + +_This content is accessible to IBMers only._ + + + + + +![Chatbot icon](images/ecosystem/chat-bot.svg) + + + + + diff --git a/src/pages/all-about-carbon/the-team.mdx b/src/pages/all-about-carbon/the-team.mdx index 542ea9041ae..778008c3419 100644 --- a/src/pages/all-about-carbon/the-team.mdx +++ b/src/pages/all-about-carbon/the-team.mdx @@ -37,11 +37,6 @@ design and build with them. ![Andrea Cardona headshot](/images/team/cardona_andrea.png) - - - -![Jan Child headshot](/images/team/child_jan.png) - diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx index 4965612a602..e93210d25b0 100755 --- a/src/pages/all-about-carbon/what-is-carbon.mdx +++ b/src/pages/all-about-carbon/what-is-carbon.mdx @@ -15,31 +15,37 @@ community of contributors. -## Welcome - -As IBM's official design system, Carbon serves a wide range of designers and -developers building digital products and experiences. - -Carbon is funded and built by IBM. Although that means we build for the -company's business needs, it also means we have a brilliant team of engineers -and designers working full time to make Carbon better. It is maintained by a -core team of designers, developers, and writers based in the Austin, Texas IBM -Design Studio. - -The goals of the design system include improving UI consistency and quality, -making the design and development process more efficient and focused, -establishing a shared vocabulary between designer and developer, and providing -clear, discoverable guidance around design and development best practices. - -The design system is built [React](/developing/frameworks/react) first. We also -support core parts of the system in -[vanilla JS](/developing/frameworks/vanilla), -[Angular](/developing/frameworks/angular), [Vue](/developing/frameworks/vue), -and [Svelte](/developing/frameworks/svelte). If you’re using a different -framework, you can still build components by following our guidelines for -[other frameworks](/developing/frameworks/other-frameworks). + + +Overview +How Carbon works +Carbon compliance at IBM +Contact us + + + +## Overview + +A design system is a collection of pre-built, reusable assets—components, +patterns, guidance, and code—that allows its users to build consistent digital +experiences faster. By using the pre-built and universal assets of Carbon, the time teams spend +designing and building is minimized. Instead of building and re-building basic +elements, they can spend that time customizing their products to address +specific client use cases. + +### Carbon is open source + +Carbon is funded and built by IBM, which means we build for the company’s +business needs, but we’ve made it open source for anyone to use and contribute +back to. While being primarily open source, Carbon also serves various parts of the IBM +business that follow an inner source model. -## Guiding principles +## How Carbon works + +The Carbon team is committed to helping members of the community be successful +in adoption and their use of Carbon assets. + +### Our guiding principles **Carbon is open.** The design system is a distributed effort, guided by the principles of the @@ -59,3 +65,68 @@ desires, Carbon is laser-focused on real people. **Carbon builds consistency.** Based on the IBM Design Language, every element and component of Carbon was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences. + +### We maintain assets + +**Carbon maintains design kits containing Carbon components.** We offer and +maintain design kits in [Sketch](/designing/kits/sketch) and +[Adobe XD](/designing/kits/adobe-xd). We also have an +[Axure](/designing/kits/axure) kit, maintained by the community. + +**Carbon supports multiple code implementations.** These reflect the +production-level design libraries. The frameworks are listed below with their +primary maintainers: + +- [React](https://github.com/carbon-design-system/carbon): Carbon team +- [CSS/Vanilla](https://github.com/carbon-design-system/carbon): Carbon team +- [Angular](https://angular.carbondesignsystem.com/): Community maintained +- [Vue](https://github.com/carbon-design-system/carbon-components-vue): + Community maintained +- [Svelte](https://github.com/ibm/carbon-components-svelte): Community + maintained + +If you’re using a different framework, you can still build components by +following our guidelines for +[other frameworks](/developing/frameworks/other-frameworks). + +**Design patterns are harvested from products built with Carbon.** These become +part of the design system. Teams can use these well-defined patterns in their +work and contribute patterns back to the system. + +### We support adoption + +**We conduct training classes, run meetups, and offer certifications.** We offer +tutorials in Angular, React, and Vue. We run [meetups](/whats-happening/meetups) +and design reviews on a regular basis. We're also available to teach at +conferences, bootcamp labs, and wherever else we’re needed. + +**We engage the community.** We strive to be one of the world’s best design +systems and we’re +always [open to feedback](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md&title=). +We communicate with you about Carbon’s state and roadmap through GitHub support, +blog posts, and Twitter. + +**Contributed components and patterns include a list of maintainers.** The +Carbon team triages and supports maintenance requests that do not have a +maintainer. + +**We provide support for users of the design system.** The Carbon team engages +with users primarily through GitHub. A member of the Carbon team responds to all +issues and pull requests. + +## Carbon compliance at IBM + +Carbon compliance by the IBM community is critically important to the IBM brand. +Carbon is the digital expression of the IBM brand and the chassis upon which all +products and digital experiences are built. It is the foundation for every +digital experience people have throughout their relationship with IBM. + +Making delightful user experiences rooted in human-centered design, high-quality +design standards, and the IBM brand ensures we deliver consistency and +excellence to our users, and build a brand that people love across the entire +product line. + +## Contact us + +Have questions? Found a bug? Learn where to go and what to do by visiting +the [Contact us page](https://carbondesignsystem.com/help/contact-us). diff --git a/src/pages/all-about-carbon/who-uses-carbon.mdx b/src/pages/all-about-carbon/who-uses-carbon.mdx new file mode 100755 index 00000000000..f9bddb49961 --- /dev/null +++ b/src/pages/all-about-carbon/who-uses-carbon.mdx @@ -0,0 +1,285 @@ +--- +title: Who uses Carbon? +description: + Carbon is for all members of a cross-functional product team—designers, + developers, marketers and offering managers. Every point along a user's + journey needs to feel part of a holistic, branded experience—that's where + Carbon comes in. +--- + + + +Carbon is for each and every member of a cross-functional team—designers, +developers, marketers and offering managers. Every point along a user's journey +needs to feel part of a holistic, branded experience and that's where Carbon +comes in. + + + + + +Designers +Developers +Marketers +Product managers +Sales +Support + + + +## Designers + +Designers are passionate advocates for users, and Carbon helps them provide +value to our users with accessible, fully-tested assets and guidance that +designers can rely on to create cohesive experiences that are in line with other +business units. + +### How Carbon helps designers + +Carbon supports designers with the tools to build excellent experiences for our +users that are consistent, delightful, and thoughtful. Designers can quickly +create tailored solutions for our clients, drawing on Carbon's reusable kit of +parts. This saves valuable time that can be spent on innovating new solutions. + +In addition, Carbon enables product and .com designers across the organization +to explore and deliver the full potential of a design, leveraging the work of +other teams where possible, avoiding redesign and duplication of efforts, +keeping the focus on the distinct client use cases. + +Here are some ways designers can begin engaging with Carbon. + +#### Learn the system + +- Familiarize yourself with the Carbon + [foundational elements](/guidelines/2x-grid/overview), their usage + documentation, and the system's + [design principles](https://www.ibm.com/design/language/). + +- Familiarize yourself with usage and style guidance for all of Carbon's + [components](/components/overview/) and [patterns](/patterns/overview/). + +- Check out [design tutorials](/designing/tutorials/) to learn more about some + of the foundational pieces of the design system. + +#### Get the tools + +- Visit [Designing > Getting Started](/designing/get-started/) on the Carbon + website and install the design kits. + +- Visit the [Other Resources](/designing/design-resources/) page on the Carbon + website to find other useful tools and kit extensions like the Mobile Sketch + kit and the Master Data Visualization file. + +#### Connect with the team + +- Find [meetups](/whats-happening/meetups/) for leveling up your skills, + connecting with your peers, and getting reviews on work in progress. + +- If you're confused or if you've spotted an inconsistency, reach out on our IBM + Slack channels. At this time, the Slack channels are for IBMers only. + + - [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/) + - [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD) + +- Make a [GitHub issue](/contributing/bugs-and-requests/) when you find a bug or + want to request a feature. + +#### Keep up with the latest + +- Stay up to date with Carbon's + [roadmap and releases](/whats-happening/releases/). + +- Keep your eye on the [Work in progress](/whats-happening/work-in-progress/) + section for new resources that are currently being worked on. + +#### Contribute back to Carbon + +- [Contribute](/contributing/overview/) component and/or pattern enhancements, + or create new assets, stewarded by the Carbon team. + +- Author usage documentation for [patterns](/contributing/pattern/) and + [components](/contributing/component/). + +- Create tooling, especially as related to design kits in various frameworks. + +- Explore scalable system logic such as token additions or inline theming. + +- Connect with the Carbon team to share work in progress and assess its + suitability for universal guidance. + +## Developers + +Carbon provides developers with the tools they need to build more product in +less time, while saving them from the mind-numbing work of creating the same +base components over and over again. + +### How Carbon helps developers + +By leveraging Carbon's pre-built assets, developers free themselves (and their +backlogs) up to do the innovative work that inspires them and ultimately +elevates the user experience for our clients. + +Developers can create products that are cohesive with other business +units—high-quality, consistent, and robust front-end experiences that share the +IBM brand. + +Here are some ways developers can begin engaging with Carbon. + +#### Learn the system + +- Familiarize yourself with the + [Carbon foundational elements](/guidelines/2x-grid/overview/), the usage + documentation, and the system's + [design principles](https://www.ibm.com/design/language/). + +- Check out a tutorial in your framework of choice + ([React](/developing/react-tutorial/overview/), + [Angular](/developing/angular-tutorial/overview/) or + [Vue](/developing/vue-tutorial/overview/)) and get your Developer Essentials + badge. + +#### Get the tools + +- Visit [Developing > Getting Started](/developing/get-started/) on the Carbon + website and install your framework of choice. + +- Visit [Developer resources](/developing/dev-resources/) to find Carbon tools, + as well as our GitHub repos and Storybooks for your framework of choice. + +#### Connect with the team + +- Find [meetups](/whats-happening/meetups/) for leveling up your skills, + connecting with your peers, and getting reviews on work in progress. + +- If you're confused or if you've spotted an inconsistency, reach out on our IBM + Slack channels. At this time, the Slack channels are for IBMers only. + + - [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/) + - [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD) + - [#carbon-react](https://ibm-studios.slack.com/archives/C2K6RFJ1G) + - [#carbon-ng](https://ibm-studios.slack.com/archives/CBZC0LM2N) + - [#carbon-vue](https://ibm-studios.slack.com/archives/CAM5P6NR1) + - [#carbon-web-components](https://ibm-studios.slack.com/archives/CL83LMKSA) + - [#carbon-tutorial](https://ibm-studios.slack.com/archives/CJUGA7P6H) + +- Make a [GitHub issue](/contributing/bugs-and-requests/) when you find a bug or + want to request a feature. + +#### Keep up with the latest + +- Stay up to date with Carbon's + [roadmap and releases](/whats-happening/releases/). + +- Keep your eye on the [Work in progress](/whats-happening/work-in-progress/) + section for new resources that are currently being worked on. + +#### Contribute back to Carbon + +- [Contribute](/contributing/overview) component and pattern enhancements or + create new assets, stewarded by the Carbon team. + +- Author developer documentation for patterns and components. + +- Create any relevant tooling to help developers within your PAL community or + the wider community build more efficiently with Carbon. + +- As you learn and grow give back to the community in the support channels. + +## Marketers + +Carbon allows teams to build excellent experiences that differentiate IBM from +the competition. + +Products and experiences built with Carbon provide an interoperability of +experience and visuals across products. More complex multiproduct stories are +easier to tell when product experiences are in lock step. + +Here are some ways marketers can begin engaging with Carbon: + +- Visit [IBM Brand Center](https://www.ibm.com/brand) to learn more about + foundational brand compliance, as well as for the hero brand systems that + drive IBM's portfolio of products and experiences. + +- The majority of marketing experiences use Carbon web components. Visit + [Carbon for IBM.com](https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/) + to ensure that these experiences are adhering to Carbon guidance. + +- Familiarize yourself with + [IBM.com web standards](https://www.ibm.com/standards/web/) to assess the + legal compliance of your experience. + +- Make sure all digital experiences by third parties meet IBM-A accessibility + requirements: + + - [Marketing materials](https://www.ibm.com/able/toolkit/launch/readiness#marketing-materials) + - [Supplier and Partnership Accessibility Requirements and Process](http://ibm.biz/SupplierAccessibility) + - [Accessibility guidelines for suppliers](http://blob:https//www.ibm.com/c4c955b3-b746-c74c-86de-c852f7f1462a) + +## Product managers + +Carbon accelerates team productivity and time to market. It improves business +outcomes such as increased lifetime value, revenue, NPS, and decreased churn. +Teams using Carbon have also won awards in both the +[product](https://pages.github.ibm.com/cdai-design/awards) and the +[digital](https://medium.com/design-ibm/ibm-cloud-app-id-and-assist-me-win-indigo-design-awards-47600197f780) +realms. + +Here are some ways product managers can begin engaging with Carbon: + +- Stay current with Carbon's [releases and roadmap](/whats-happening/releases/) + to prioritize upgrading Carbon's new assets, upstream fixes, + designer/developer workflow improvements, and tooling enhancements. + +- Provide the Carbon team with adoption and migration feedback, as well as + measured product performance with regard to Carbon, providing a healthy + collaboration loop. Here are some + [migration worksheets and other resources](https://pages.github.ibm.com/cdai-design/dux/). + +## Sales + +Multiproduct stories are easier to tell and sell when product experiences work +together seamlessly. Suites of products built on the same foundation, that have +the same interactions are a dream to demo. + +Carbon also extends +[IBM iX's capabilities](https://blog.adobe.com/en/publish/2019/11/04/adobe-and-ibm-ix-extend-partnership-to-help-enterprises-design-powerful-and-consistent-customer-experiences.html#gs.101gaxd), +allowing iX customers to implement and customize Carbon, showcasing its +adaptability as a white-label design system. + +Here are some ways people in sales can begin engaging with Carbon: + +- Consultants who are selling digital solutions to clients should understand the + benefits of Carbon for rapid prototyping, demo'ing and building. + +- Our IBM consultants are the champions of third party Carbon use. Carbon looks + to them for the following: + + - Creating case studies that highlight the effective use and benefits of + Carbon. + - Providing information about gaps in third party capabilities, as well as + prioritized client requests. + +- Stay up to date with Carbon's + [roadmap and releases](/whats-happening/releases/). + +## Support + +Product experiences that are built on the same foundation and work together +seamlessly to reduce cognitive load for users, thereby reducing user errors and +questions, and significantly reducing the need for support. + +Consistent experiences also result in less need for extensive training and +onboarding resources; learning can be leveraged across multiple spaces. + +Here are some ways people in support roles can begin engaging with Carbon: + +- Stay up to date with Carbon's + [roadmap and releases](/whats-happening/releases/). + +- Make a [GitHub issue](/contributing/bugs-and-requests/) to report bugs or + address gaps. + +- Report issues in these primary support Slack channels: + - [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/) + - [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD) + - [#carbon-react](https://ibm-studios.slack.com/archives/C2K6RFJ1G) diff --git a/src/pages/components/modal/code.mdx b/src/pages/components/modal/code.mdx index e6d1a135afb..7004b3b8db3 100755 --- a/src/pages/components/modal/code.mdx +++ b/src/pages/components/modal/code.mdx @@ -60,6 +60,14 @@ documentation, see the Storybooks for each framework below. id: 'scrolling-content', label: 'With scrolling content', }, + { + id: 'with-one-button', + label: 'With one button', + }, + { + id: 'with-three-buttons', + label: 'With three buttons', + }, ]}> +`} + {` + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor.

+ +`} + {` + {}, + }, + { + buttonText: 'Rename', + onClick: () => {}, + } + ] + } + > +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor.

+ `} diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx index 4254a09191c..32cf2d00127 100755 --- a/src/pages/components/modal/usage.mdx +++ b/src/pages/components/modal/usage.mdx @@ -81,6 +81,14 @@ destructive or irreversible then use a transactional danger modal. id: 'scrolling-content', label: 'With scrolling content', }, + { + id: 'with-one-button', + label: 'With one button', + }, + { + id: 'with-three-buttons', + label: 'With three buttons', + }, ]}> +`} + {` + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor.

+ +`} + {` + {}, + }, + { + buttonText: 'Rename', + onClick: () => {}, + } + ] + } + > +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus fermentum risus, sit amet fringilla nunc pellentesque quis. Duis quis odio ultrices, cursus lacus ac, posuere felis. Donec dignissim libero in augue mattis, a molestie metus vestibulum. Aliquam placerat felis ultrices lorem condimentum, nec ullamcorper felis porttitor.

+ `} diff --git a/src/pages/designing/get-started.mdx b/src/pages/designing/get-started.mdx index f8868371516..6e6c7674815 100644 --- a/src/pages/designing/get-started.mdx +++ b/src/pages/designing/get-started.mdx @@ -121,3 +121,9 @@ your success. If there’s something in particular you’re interested in, we’d love to [hear from you](https://github.com/carbon-design-system/carbon-website/issues/new/choose). + +### Learn about the benefits + +Learn more about the +[benefits of using Carbon](/all-about-carbon/who-uses-carbon/) as a designer, +and how Carbon benefits all members of a product team. diff --git a/src/pages/developing/get-started.mdx b/src/pages/developing/get-started.mdx index b650640b324..638a19f3969 100644 --- a/src/pages/developing/get-started.mdx +++ b/src/pages/developing/get-started.mdx @@ -113,3 +113,9 @@ You can find out about Carbon's latest changes and future plans on the [Releases](/whats-happening/releases) page. If you have questions, here are all the ways to [contact us](/help/contact-us). + +### Learn about the benefits + +Learn more about the +[benefits of using Carbon](/all-about-carbon/who-uses-carbon/) as a developer, +and how Carbon benefits all members of a product team. diff --git a/src/pages/developing/vue-tutorial/step-1.mdx b/src/pages/developing/vue-tutorial/step-1.mdx index aecd512bfa2..8b5af5d0a5c 100644 --- a/src/pages/developing/vue-tutorial/step-1.mdx +++ b/src/pages/developing/vue-tutorial/step-1.mdx @@ -156,7 +156,7 @@ using the Vue CLI. These include: - `@vue/cli-plugin-babel`: To ensure we produce well supported code. - `@vue/cli-plugin-eslint`: To allow us to catch potential errors. - `@vue/cli-plugin-unit-jest`: To allow us to unit test our code. -- `node-sass`: To allow us to use the sass css precompiler. +- `sass-loader`: To allow us to use the sass css precompiler. NOTE: We could have installed these separately but using the CLI to set this up for us ensures a good base config for these dependencies. @@ -422,9 +422,7 @@ each individual icon we will use. ```javascript path=src/components/TutorialHeader/TutorialHeader.vue