{friendlyName}
{containerIsVisible && (
diff --git a/src/components/SVGLibraries/shared/SvgLibrary.module.scss b/src/components/SVGLibraries/shared/SvgLibrary.module.scss
index c3799c0ef98..909ad0d59d8 100644
--- a/src/components/SVGLibraries/shared/SvgLibrary.module.scss
+++ b/src/components/SVGLibraries/shared/SvgLibrary.module.scss
@@ -299,7 +299,6 @@ $svg-card-border: 1px solid $ui-03;
.no-result p {
margin: 0;
margin-top: $spacing-06;
- margin-left: $spacing-05;
max-width: 400px;
}
diff --git a/src/components/StorybookDemo/StorybookDemo.module.scss b/src/components/StorybookDemo/StorybookDemo.module.scss
index 3db1c2cb08e..8c33bbe3c26 100644
--- a/src/components/StorybookDemo/StorybookDemo.module.scss
+++ b/src/components/StorybookDemo/StorybookDemo.module.scss
@@ -29,11 +29,11 @@
}
}
-.demo-row {
+div .demo-row {
margin-top: 0;
}
-.demo {
+div .demo {
height: rem(320px);
padding: $spacing-03;
background: $layer-01;
diff --git a/src/components/TypesetStyle/typeSets.js b/src/components/TypesetStyle/typeSets.js
index 02290f05e4d..b7d6bf50b63 100644
--- a/src/components/TypesetStyle/typeSets.js
+++ b/src/components/TypesetStyle/typeSets.js
@@ -38,14 +38,12 @@ export default {
name: 'helper-text-02',
},
{
- description:
- 'This is for legal copy appearing in product pages.',
+ description: 'This is for legal copy appearing in product pages.',
key: 'legal-01',
name: 'legal-01',
},
{
- description:
- 'This is for legal copy appearing in web pages.',
+ description: 'This is for legal copy appearing in web pages.',
key: 'legal-02',
name: 'legal-02',
},
diff --git a/src/data/components.json b/src/data/components.json
index 78f11a99359..fa77794755d 100644
--- a/src/data/components.json
+++ b/src/data/components.json
@@ -6,6 +6,12 @@
"screenreader": "manual"
}
},
+ {
+ "component": "AI label",
+ "testing": {
+ "screenreader": "manual"
+ }
+ },
{
"component": "Aspect ratio",
"overview": false,
@@ -400,13 +406,6 @@
"screenreader": "manual"
}
},
- {
- "component": "Slug",
- "overview": false,
- "testing": {
- "screenreader": false
- }
- },
{
"component": "Structured list",
"testing": {
diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js
index 5afd47b7450..19cccabb1d8 100644
--- a/src/data/guidelines/color-tokens.js
+++ b/src/data/guidelines/color-tokens.js
@@ -4040,6 +4040,218 @@ const colorTokens = {
},
},
},
+ notification: {
+ '$notification-background-error': {
+ role: ['Error low contrast notification background'],
+ value: {
+ white: {
+ name: 'Red 10',
+ hex: '#fff1f1',
+ },
+ g10: {
+ name: 'Red 10',
+ hex: '#fff1f1',
+ },
+ g90: {
+ name: 'Gray 80',
+ hex: '#8d8d8d',
+ },
+ g100: {
+ name: 'Gray 90',
+ hex: '#262626',
+ },
+ },
+ },
+ '$notification-background-success': {
+ role: ['Success low contrast notification background'],
+ value: {
+ white: {
+ name: 'Green 10',
+ hex: '#defbe6',
+ },
+ g10: {
+ name: 'Green 10',
+ hex: '#defbe6',
+ },
+ g90: {
+ name: 'Gray 80',
+ hex: '#8d8d8d',
+ },
+ g100: {
+ name: 'Gray 90',
+ hex: '#262626',
+ },
+ },
+ },
+ '$notification-background-info': {
+ role: ['Informational low contrast notification background'],
+ value: {
+ white: {
+ name: 'Blue 10',
+ hex: '#edf5ff',
+ },
+ g10: {
+ name: 'Blue 10',
+ hex: '#edf5ff',
+ },
+ g90: {
+ name: 'Gray 80',
+ hex: '#8d8d8d',
+ },
+ g100: {
+ name: 'Gray 90',
+ hex: '#262626',
+ },
+ },
+ },
+ '$notification-background-warning': {
+ role: ['Warning low contrast notification background'],
+ value: {
+ white: {
+ name: 'Yellow 30, White',
+ hex: '#f1c21b, #ffffff',
+ },
+ g10: {
+ name: 'Yellow 30, White',
+ hex: '#f1c21b, #ffffff',
+ },
+ g90: {
+ name: 'Gray 80',
+ hex: '#8d8d8d',
+ },
+ g100: {
+ name: 'Gray 90',
+ hex: '#262626',
+ },
+ },
+ },
+ '$notification-action-hover': {
+ role: ['Hover for notification ghost button'],
+ value: {
+ white: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g10: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g90: {
+ name: 'Gray 80 hover',
+ hex: '#474747',
+ },
+ g100: {
+ name: 'Gray 90 hover',
+ hex: '#333333',
+ },
+ },
+ },
+ '$notification-action-tertiary-inverse': {
+ role: ['Tertiary button color for notification'],
+ value: {
+ white: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g10: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g90: {
+ name: 'Blue 60',
+ hex: '#0f62fe',
+ },
+ g100: {
+ name: 'Blue 60',
+ hex: '#0f62fe',
+ },
+ },
+ },
+ '$notification-action-tertiary-inverse-active': {
+ role: ['Active color for tertiary button in notification'],
+ value: {
+ white: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g10: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g90: {
+ name: 'Gray 100',
+ hex: '#161616',
+ },
+ g100: {
+ name: 'Gray 100',
+ hex: '#161616',
+ },
+ },
+ },
+ '$notification-action-tertiary-inverse-hover': {
+ role: ['Hover color for tertiary button in notification'],
+ value: {
+ white: {
+ name: 'Gray 30',
+ hex: '#c6c6c6',
+ },
+ g10: {
+ name: 'Gray 30',
+ hex: '#c6c6c6',
+ },
+ g90: {
+ name: 'Blue 80',
+ hex: '#002d9c',
+ },
+ g100: {
+ name: 'Blue 80',
+ hex: '#002d9c',
+ },
+ },
+ },
+ '$notification-action-tertiary-inverse-text': {
+ role: ['Text color for tertiary button in notification'],
+ value: {
+ white: {
+ name: 'Gray 100',
+ hex: '#161616',
+ },
+ g10: {
+ name: 'Gray 100',
+ hex: '#161616',
+ },
+ g90: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g100: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ },
+ },
+ '$notification-action-tertiary-inverse-text-on-color-disabled': {
+ role: ['Disabled color for tertiary button in notification'],
+ value: {
+ white: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g10: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g90: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ g100: {
+ name: 'White',
+ hex: '#ffffff',
+ },
+ },
+ },
+ },
};
export default colorTokens;
diff --git a/src/data/guidelines/glossary.js b/src/data/guidelines/glossary.js
index 25f041e9c5f..045d93144b9 100644
--- a/src/data/guidelines/glossary.js
+++ b/src/data/guidelines/glossary.js
@@ -3,20 +3,17 @@ module.exports = {
A: {
'Action labels': {
Add: {
- desc:
- 'Takes an existing object and uses it in a new context (for example, adds an item to the cart, adds a user to a group, or adds a document to a folder).',
+ desc: 'Takes an existing object and uses it in a new context (for example, adds an item to the cart, adds a user to a group, or adds a document to a folder).',
subtext:
'Where appropriate, combine add with the object (for example, Add user or Add role). Compare [Create](#create), [Insert](#insert), [New](#new), and [Upload](#upload). See also the [Add pattern](/patterns/common-actions#add).',
},
Apply: {
- desc:
- 'Saves changes without closing the dialog. These properties often affect subsequent system behavior.',
+ desc: 'Saves changes without closing the dialog. These properties often affect subsequent system behavior.',
subtext:
'Use instead of Save changes. Compare [Save](#save) and [Save as](#save-as).',
},
Approve: {
- desc:
- 'Indicates the user agrees. In a business process, typically initiates the next step.',
+ desc: 'Indicates the user agrees. In a business process, typically initiates the next step.',
subtext: 'Compare [Reject](#reject).',
},
},
@@ -24,14 +21,12 @@ module.exports = {
B: {
'Action labels': {
Back: {
- desc:
- 'Returns the user to the previous step in a sequence of steps, such as in a wizard.',
+ desc: 'Returns the user to the previous step in a sequence of steps, such as in a wizard.',
subtext:
'Use instead of Previous. Compare [Next](#next) and [Finish](#finish).',
},
Browse: {
- desc:
- 'Assists the user in selecting a file (for example, on a button or link next to an entry field). Typically opens a secondary window where the user can locate and select the desired directory and file.',
+ desc: 'Assists the user in selecting a file (for example, on a button or link next to an entry field). Typically opens a secondary window where the user can locate and select the desired directory and file.',
subtext: null,
},
},
@@ -44,26 +39,22 @@ module.exports = {
'Warn the user of any possible negative consequences of stopping an action from progressing, such as data corruption. Compare [Reset](#reset). See also the [Cancel pattern](/patterns/common-actions#cancel).',
},
Clear: {
- desc:
- 'This action clears all the fields or selections. Also deletes the contents of a document, such as a log. Typically the default selection or value is re-established for controls that always have a selection or value, such as [radio buttons](/components/radio-button/usage).',
+ desc: 'This action clears all the fields or selections. Also deletes the contents of a document, such as a log. Typically the default selection or value is re-established for controls that always have a selection or value, such as [radio buttons](/components/radio-button/usage).',
subtext:
'Where appropriate, combine clear with the object (for example, Clear fields or Clear all). Compare [Delete](#delete) and [Remove](#remove). See also the [Clear pattern](/patterns/common-actions#clear).',
},
Close: {
- desc:
- 'Closes the current page or window (for example, closing a secondary window containing online help).',
+ desc: 'Closes the current page or window (for example, closing a secondary window containing online help).',
subtext:
'Do not use Close alongside OK or Cancel actions. Compare [Cancel](#cancel) and [Done](#done). See also the [Close pattern](/patterns/common-actions#close).',
},
Copy: {
- desc:
- 'Creates new instances of the selected objects in a specific destination.',
+ desc: 'Creates new instances of the selected objects in a specific destination.',
subtext:
'Combine Copy with the object being copied (for example, Copy folder) or the destination (for example, Copy to clipboard) if there are multiple possibilities. Compare [New](#new). See also the [Copy pattern](/patterns/common-actions#copy).',
},
Create: {
- desc:
- 'Makes a new object from scratch (for example, creates a calendar event or creates a new document).',
+ desc: 'Makes a new object from scratch (for example, creates a calendar event or creates a new document).',
subtext:
'In scenarios where the user needs to supply some details or settings as part of the create process, use new to initiate the action and create to apply the user-supplied details or settings to the new object. Compare [Add](#add), [Copy](#copy), [Insert](#insert), and [New](#new).',
},
@@ -76,20 +67,17 @@ module.exports = {
D: {
'Action labels': {
Delete: {
- desc:
- 'Destroys an existing object so that it no longer exists (for example, deletes a file from a directory or deletes a value from a table cell).',
+ desc: 'Destroys an existing object so that it no longer exists (for example, deletes a file from a directory or deletes a value from a table cell).',
subtext:
'Where appropriate, combine Delete with the object (for example, Delete column or Delete row). Compare [Clear](#clear) and [Remove](#remove). See also the [Delete pattern](/patterns/common-actions#delete)',
},
Docs: {
- desc:
- 'Opens a separate window containing the landing page for the product documentation.',
+ desc: 'Opens a separate window containing the landing page for the product documentation.',
subtext:
'Use as link text only for the specific link that points to the product documentation from the console menu bar. Compare [Learn more](#learn-more).',
},
Done: {
- desc:
- 'Indicates that the user has finished working in an environment (for example, editing templates) and wants to return to where he or she came from.',
+ desc: 'Indicates that the user has finished working in an environment (for example, editing templates) and wants to return to where he or she came from.',
subtext: 'Compare [Close](#close) and [Finish](#finish).',
},
Download: {
@@ -110,13 +98,11 @@ module.exports = {
subtext: 'See also the [Edit pattern](/patterns/common-actions#edit).',
},
'Empty trash': {
- desc:
- 'Permanently deletes all files or objects that have been placed into a trash container.',
+ desc: 'Permanently deletes all files or objects that have been placed into a trash container.',
subtext: 'Compare [Move to trash](#move-to%20trash).',
},
Export: {
- desc:
- 'Saves data in a different format external to the system. Typically opens a secondary window for the user to specify the file type and destination (for example, storing table data as a set of comma-separated values).',
+ desc: 'Saves data in a different format external to the system. Typically opens a secondary window for the user to specify the file type and destination (for example, storing table data as a set of comma-separated values).',
subtext: 'Compare [Import](#import).',
},
},
@@ -128,8 +114,7 @@ module.exports = {
subtext: 'Compare [Find](#find) and [Search](#search).',
},
Find: {
- desc:
- 'Moves the cursor to the next element matching the specified criteria (for example, view the next occurrence of a specific word within an email message).',
+ desc: 'Moves the cursor to the next element matching the specified criteria (for example, view the next occurrence of a specific word within an email message).',
subtext: 'Compare [Filter](#filter) and [Search](#search).',
},
Finish: {
@@ -141,8 +126,7 @@ module.exports = {
G: {
'Action labels': {
'Get help': {
- desc:
- 'Opens a search field from which the user can search for help information.',
+ desc: 'Opens a search field from which the user can search for help information.',
subtext:
'Use only as link text on the console menu bar. Compare [Docs](#docs) and [Learn more](#learn-more).',
},
@@ -151,8 +135,7 @@ module.exports = {
H: {
'Action labels': {
Hide: {
- desc:
- 'Removes an element that was previously shown (for example, enables the user to hide details or descriptions).',
+ desc: 'Removes an element that was previously shown (for example, enables the user to hide details or descriptions).',
subtext: 'Compare [Show](#show).',
},
},
@@ -160,8 +143,7 @@ module.exports = {
I: {
'Action labels': {
Import: {
- desc:
- 'Transforms data or objects from an external source. Typically opens a secondary window for the user to locate the external source.',
+ desc: 'Transforms data or objects from an external source. Typically opens a secondary window for the user to locate the external source.',
subtext:
'Context: Creating a new table based on comma-separated values contained in a separate file. Compare [Export](#export).',
},
@@ -179,14 +161,12 @@ module.exports = {
subtext: 'Do not use Launch; use [Start](#start).',
},
'Learn more': {
- desc:
- 'Opens additional, highly contextual information. Insert at the end of inline text or hover text where more information follows but does not fit in the current context.',
+ desc: 'Opens additional, highly contextual information. Insert at the end of inline text or hover text where more information follows but does not fit in the current context.',
subtext:
"If space permits, combine Learn more with meaningful text that describes the content you're pointing to. For example, if your user needs some best practices to manage apps in multiple regions, you could use Learn more about regions.",
},
'Log in': {
- desc:
- 'Enters a site or application. This choice typically opens a form for entry of credentials. Also used on the submission button after users enter their credentials.',
+ desc: 'Enters a site or application. This choice typically opens a form for entry of credentials. Also used on the submission button after users enter their credentials.',
subtext:
'Use instead of Sign in. This is to make it visually distinct from Sign up. These options are often side by side and the different words allow for quick recognition. Compare [Log out](#log-out). See also the [Login pattern](/patterns/login-pattern).',
},
@@ -200,13 +180,11 @@ module.exports = {
M: {
'Action labels': {
Move: {
- desc:
- 'Transfers an object from one container (for example, folder, activity, or page) to another.',
+ desc: 'Transfers an object from one container (for example, folder, activity, or page) to another.',
subtext: null,
},
'Move to trash': {
- desc:
- 'A soft delete. Moves a file or object to an area from where it can later be permanently deleted or recovered.',
+ desc: 'A soft delete. Moves a file or object to an area from where it can later be permanently deleted or recovered.',
subtext:
'Use instead of [Delete](#delete) if it is possible for the user to recover the objects. Compare [Empty trash](#empty-trash).',
},
@@ -215,14 +193,12 @@ module.exports = {
N: {
'Action labels': {
New: {
- desc:
- 'Starts the creation of a new object. New either creates the object immediately or opens a dialog or set of fields where the user can enter properties.',
+ desc: 'Starts the creation of a new object. New either creates the object immediately or opens a dialog or set of fields where the user can enter properties.',
subtext:
'Combine new with the object to create (for example, New user or New column). Compare [Add](#add), [Copy](#copy), [Create](#create), [Insert](#insert), and [Save as](#save-as).',
},
Next: {
- desc:
- 'Advances the user to the next step in a sequence of steps, such as in a wizard.',
+ desc: 'Advances the user to the next step in a sequence of steps, such as in a wizard.',
subtext:
'Compare [Back](#back) and [Finish](#finish). See also the [Next pattern](/patterns/common-actions#next).',
},
@@ -244,19 +220,16 @@ module.exports = {
subtext: null,
},
Post: {
- desc:
- 'Adds a new comment to an online community or adds status to a log or record.',
+ desc: 'Adds a new comment to an online community or adds status to a log or record.',
subtext:
'If you are editing an existing comment, use [Save](#save) instead.',
},
Preview: {
- desc:
- 'Shows how an object or content will appear with formatting applied before the content is published or distributed. Alternatively, provides an incomplete display of an existing object without leaving the current context.',
+ desc: 'Shows how an object or content will appear with formatting applied before the content is published or distributed. Alternatively, provides an incomplete display of an existing object without leaving the current context.',
subtext: null,
},
Print: {
- desc:
- 'Sends a copy of the currently selected object or the object in view to the printer.',
+ desc: 'Sends a copy of the currently selected object or the object in view to the printer.',
subtext: null,
},
},
@@ -269,19 +242,16 @@ module.exports = {
'Likely used only as a [tooltip](/components/tooltip/usage) on an icon button. Compare [Undo](#undo).',
},
Refresh: {
- desc:
- 'Reloads the view of an object when the displayed view has become unsynchronized with the source.',
+ desc: 'Reloads the view of an object when the displayed view has become unsynchronized with the source.',
subtext:
'Likely used only as a tooltip on an icon button. See also the [Refresh pattern](/patterns/common-actions#refresh).',
},
Reject: {
- desc:
- 'Indicates the user does not approve. In a business process, typically blocks the process from proceeding to the next step.',
+ desc: 'Indicates the user does not approve. In a business process, typically blocks the process from proceeding to the next step.',
subtext: 'Compare [Approve](#approve).',
},
Remove: {
- desc:
- 'Removes an object from the current context but the object is not destroyed as a result of the action (for example, removes a user from a group or removes an item from the cart).',
+ desc: 'Removes an object from the current context but the object is not destroyed as a result of the action (for example, removes a user from a group or removes an item from the cart).',
subtext:
'Where appropriate, combine Remove with the object that will be removed (for example, Remove user or Remove role). Compare [Clear](#clear) and [Delete](#delete). See also the [Remove pattern](/patterns/common-actions#remove).',
},
@@ -290,19 +260,16 @@ module.exports = {
subtext: null,
},
Reset: {
- desc:
- 'Reverts values back to their last saved state. The last saved state includes the values stored the last time the user clicked Apply. Does not close the dialog or window.',
+ desc: 'Reverts values back to their last saved state. The last saved state includes the values stored the last time the user clicked Apply. Does not close the dialog or window.',
subtext:
'Compare [Cancel](#cancel), [Restore](#restore), [Restore defaults](#restore-defaults), and [Undo](#undo). See also the [Reset pattern](/patterns/common-actions#reset).',
},
Restore: {
- desc:
- 'Brings a file back after deletion, corruption, or similar event.',
+ desc: 'Brings a file back after deletion, corruption, or similar event.',
subtext: 'Compare [Reset](#reset).',
},
'Restore all': {
- desc:
- 'Completes a restore operation on all files or objects in a given system or container.',
+ desc: 'Completes a restore operation on all files or objects in a given system or container.',
subtext: 'Compare [Restore](#restore).',
},
'Restore defaults': {
@@ -318,18 +285,15 @@ module.exports = {
S: {
'Action labels': {
Save: {
- desc:
- 'Saves pending modifications made to a file or document. Does not close the window or panel.',
+ desc: 'Saves pending modifications made to a file or document. Does not close the window or panel.',
subtext: 'Compare [Apply](#apply).',
},
'Save as': {
- desc:
- 'Creates a new object based on the state of the object currently being viewed. The user names the new object and typically identifies its location.',
+ desc: 'Creates a new object based on the state of the object currently being viewed. The user names the new object and typically identifies its location.',
subtext: null,
},
Search: {
- desc:
- 'Returns all objects (for example, files, names, or documents) within a defined set (for example, in a folder, directory, database, or the internet) that match some specified criteria.',
+ desc: 'Returns all objects (for example, files, names, or documents) within a defined set (for example, in a folder, directory, database, or the internet) that match some specified criteria.',
subtext: 'Compare [Filter](#filter) and [Find](#find).',
},
Select: {
@@ -337,18 +301,15 @@ module.exports = {
subtext: null,
},
'Select all': {
- desc:
- 'Adds all objects in the view to the selection set or checks all checkboxes.',
+ desc: 'Adds all objects in the view to the selection set or checks all checkboxes.',
subtext: 'Compare [Clear](#clear).',
},
Send: {
- desc:
- 'Transfers an email or other information to the recipient or destination.',
+ desc: 'Transfers an email or other information to the recipient or destination.',
subtext: null,
},
Show: {
- desc:
- 'Reveals an object that was previously hidden (for example, shows descriptions or shows further details).',
+ desc: 'Reveals an object that was previously hidden (for example, shows descriptions or shows further details).',
subtext: 'Compare [Hide](#hide).',
},
'Sign up': {
@@ -361,8 +322,7 @@ module.exports = {
"Likely used only as a tooltip on an icon button. Can be used without 'ascending' or 'descending' only if the order can be provided to a screen reader in the code for accessibility.",
},
Start: {
- desc:
- 'Deploy an app or service to its development or production environment so that it can be used.',
+ desc: 'Deploy an app or service to its development or production environment so that it can be used.',
subtext: 'Use instead of Launch.',
},
'Submit an idea': {
@@ -383,14 +343,12 @@ module.exports = {
U: {
'Action labels': {
Undo: {
- desc:
- 'Reverts to the state before the most recent changes made by the user. Repeated use successively reverts to prior states in reverse chronological order. Applies to changes in data and not to changes made to the view.',
+ desc: 'Reverts to the state before the most recent changes made by the user. Repeated use successively reverts to prior states in reverse chronological order. Applies to changes in data and not to changes made to the view.',
subtext:
'Not all actions, such as [Save](#save), can be undone. Compare [Redo](#redo), [Reset](#reset), and [Restore](#restore).',
},
Update: {
- desc:
- 'Label for a button in a dialog or form for editing an object. The settings in the dialog are applied to the object when it is updated.',
+ desc: 'Label for a button in a dialog or form for editing an object. The settings in the dialog are applied to the object when it is updated.',
subtext: 'Compare [Edit](#edit).',
},
Upload: {
diff --git a/src/data/status-indicators/palettes.js b/src/data/status-indicators/palettes.js
index 2a0a8b48892..97a5038156c 100644
--- a/src/data/status-indicators/palettes.js
+++ b/src/data/status-indicators/palettes.js
@@ -19,7 +19,7 @@ export const statusLight = [
hex: 'ba4e00',
light: true,
},
-
+
{
name: 'Yellow 30',
hex: 'f1c21b',
diff --git a/src/gatsby-theme-carbon/components/Footer/index.js b/src/gatsby-theme-carbon/components/Footer/index.js
index 40bab246785..7f6fba1f051 100644
--- a/src/gatsby-theme-carbon/components/Footer/index.js
+++ b/src/gatsby-theme-carbon/components/Footer/index.js
@@ -1,10 +1,9 @@
import React from 'react';
import Footer from 'gatsby-theme-carbon/src/components/Footer';
-import packageJson from '../../../../package.json';
+import packageJson from 'gatsby-theme-carbon/package.json';
const currentYear = new Date().getFullYear();
const versions = {
- styles: packageJson.dependencies['@carbon/styles'],
react: packageJson.dependencies['@carbon/react'],
};
@@ -21,8 +20,6 @@ const Content = ({ buildTime }) => (
- Styles version {versions.styles}
-
React Components version {versions.react}
Last updated {buildTime}
diff --git a/src/gatsby-theme-carbon/components/Layout.js b/src/gatsby-theme-carbon/components/Layout.js
index 955dc1a8591..bb41bd801f5 100644
--- a/src/gatsby-theme-carbon/components/Layout.js
+++ b/src/gatsby-theme-carbon/components/Layout.js
@@ -4,7 +4,7 @@ import React, { useLayoutEffect } from 'react';
import LeftNav from 'gatsby-theme-carbon/src/components/LeftNav';
import Meta from 'gatsby-theme-carbon/src/components/Meta';
import Header from 'gatsby-theme-carbon/src/components/Header';
-import Switcher from 'gatsby-theme-carbon/src/components/Switcher';
+import { Switcher } from 'gatsby-theme-carbon/src/components/Switcher';
import Footer from 'gatsby-theme-carbon/src/components/Footer';
import Container from 'gatsby-theme-carbon/src/components/Container';
// import Banner from '../../components/Banner';
diff --git a/src/gatsby-theme-carbon/components/MDXProvider/defaultComponents.js b/src/gatsby-theme-carbon/components/MDXProvider/defaultComponents.js
index c285adf226b..4595bf3f52f 100644
--- a/src/gatsby-theme-carbon/components/MDXProvider/defaultComponents.js
+++ b/src/gatsby-theme-carbon/components/MDXProvider/defaultComponents.js
@@ -2,15 +2,11 @@ import defaultComponents from 'gatsby-theme-carbon/src/components/MDXProvider/de
import MdxIcon from '../../../components/MdxIcon';
import ColorPalette from '../../../components/ColorPalette';
-import Profile from '../../../components/Profile';
-import ListSection from '../../../components/ListSection';
import StorybookDemo from '../../../components/StorybookDemo';
export default {
...defaultComponents,
MdxIcon,
ColorPalette,
- Profile,
- ListSection,
StorybookDemo,
};
diff --git a/src/images/blue-stripes-mobile.jpg b/src/images/blue-stripes-mobile.jpg
new file mode 100644
index 00000000000..6c127269a7a
Binary files /dev/null and b/src/images/blue-stripes-mobile.jpg differ
diff --git a/src/images/blue-stripes-tablet.jpg b/src/images/blue-stripes-tablet.jpg
new file mode 100644
index 00000000000..6c127269a7a
Binary files /dev/null and b/src/images/blue-stripes-tablet.jpg differ
diff --git a/src/images/blue-stripes.jpg b/src/images/blue-stripes.jpg
new file mode 100644
index 00000000000..bd6d613609c
Binary files /dev/null and b/src/images/blue-stripes.jpg differ
diff --git a/src/images/large-image.jpg b/src/images/large-image.jpg
new file mode 100644
index 00000000000..1985ec709f1
Binary files /dev/null and b/src/images/large-image.jpg differ
diff --git a/src/pages/all-about-carbon/releases.mdx b/src/pages/all-about-carbon/releases.mdx
index 275c54d46ec..85a904c46fd 100755
--- a/src/pages/all-about-carbon/releases.mdx
+++ b/src/pages/all-about-carbon/releases.mdx
@@ -18,16 +18,14 @@ planned for Carbon’s future.
+ href="https://github.com/carbon-design-system/carbon/releases">
+ href="https://github.com/orgs/carbon-design-system/projects/51/views/1">
@@ -66,7 +64,8 @@ experience standards. For more details about this release, see our
## Release history
-
+{/* prettier-ignore-start */}
+
| Carbon Design System | IBM Design Language | @carbon/elements | carbon-components | carbon-components-react | @carbon/react |
| -------------------- | ------------------- | --------------- | ----------------- | ------------ | ------------ |
| [Carbon v11](https://www.carbondesignsystem.com)
— 31 Mar 2022
— Improves token and prop naming
— Adds light/dark mode support
— Uses CSS grid | [IDL v2](https://www.ibm.com/design/language) | [v11.x](https://www.npmjs.com/package/@carbon/elements/v/latest) | v11.x | [v8.x](https://www.npmjs.com/package/carbon-components-react/v/latest) | [v1.x](https://www.npmjs.com/package/@carbon/react/v/latest) |
@@ -75,4 +74,5 @@ experience standards. For more details about this release, see our
| [Carbon v8](https://v8.carbondesignsystem.com)
— 26 Oct 2017 | IDL v1 | — | [v8.23.1](https://www.npmjs.com/package/carbon-components/v/8.23.1) | [v5.x](https://www.npmjs.com/package/carbon-components-react/v/5.x) | — |
| [Carbon v7](https://v7.carbondesignsystem.com)
— 30 Mar 2017 | IDL v1 | — | [v7.26.10](https://www.npmjs.com/package/carbon-components/v/7.26.10) | [v4.2.2](https://www.npmjs.com/package/carbon-components-react/v/4.2.2) | — |
| [Carbon v6](https://v6.carbondesignsystem.com) | IDL v1 | — | [v6.20.1](https://www.npmjs.com/package/carbon-components/v/6.20.1) | [v3.14.0](https://www.npmjs.com/package/carbon-components-react/v/3.14.0) | — |
-
+
+{/* prettier-ignore-end */}
diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx
index 00d9ef87cca..25df077fc95 100755
--- a/src/pages/all-about-carbon/what-is-carbon.mdx
+++ b/src/pages/all-about-carbon/what-is-carbon.mdx
@@ -95,7 +95,7 @@ primary maintainers:
- [Elements](https://github.com/carbon-design-system/carbon): Carbon team
- [React](https://github.com/carbon-design-system/carbon/tree/main/packages/react):
Carbon team
-- [Web Components](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components):
+- [Web Components](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components):
Carbon team
- [Angular](https://angular.carbondesignsystem.com/): Community maintained
- [Vue](https://github.com/carbon-design-system/carbon-components-vue):
diff --git a/src/pages/community/patterns/chatbot/content.mdx b/src/pages/community/patterns/chatbot/content.mdx
index 4aaa49f2e04..dde3004070e 100644
--- a/src/pages/community/patterns/chatbot/content.mdx
+++ b/src/pages/community/patterns/chatbot/content.mdx
@@ -88,8 +88,7 @@ Ensure the success of your bot by following these principles:
+ href="https://www.ibm.com/design/ai/conversation/planning">
diff --git a/src/pages/community/patterns/chatbot/overview.mdx b/src/pages/community/patterns/chatbot/overview.mdx
index 9e9e7c3d6b1..17bcf67665c 100644
--- a/src/pages/community/patterns/chatbot/overview.mdx
+++ b/src/pages/community/patterns/chatbot/overview.mdx
@@ -36,7 +36,7 @@ related to their question or task.
-
+
Shown in Gray 10 Theme
@@ -133,8 +133,7 @@ guidance related to your use case.
title="Chatbot Design Kit"
aspectRatio="2:1"
actionIcon="launch"
- href="https://www.sketch.com/s/d6986eb8-bf0d-4695-abe8-9e79909d4518"
- >
+ href="https://www.sketch.com/s/d6986eb8-bf0d-4695-abe8-9e79909d4518">
diff --git a/src/pages/community/patterns/chatbot/usage.mdx b/src/pages/community/patterns/chatbot/usage.mdx
index 19cd0df68e2..add911140ad 100644
--- a/src/pages/community/patterns/chatbot/usage.mdx
+++ b/src/pages/community/patterns/chatbot/usage.mdx
@@ -30,7 +30,7 @@ import {
The following diagram outlines the primary components within the chatbot
pattern.
-
+
diff --git a/src/pages/community/patterns/generate-an-api-key/index.mdx b/src/pages/community/patterns/generate-an-api-key/index.mdx
index a4df07f478f..d745df29520 100644
--- a/src/pages/community/patterns/generate-an-api-key/index.mdx
+++ b/src/pages/community/patterns/generate-an-api-key/index.mdx
@@ -30,7 +30,7 @@ The reusable code component can be found in
Show the API key in context (optional)
API key management page (optional)
Edit an API key (optional)
-{' '}
+
diff --git a/src/pages/components/UI-shell-header/accessibility.mdx b/src/pages/components/UI-shell-header/accessibility.mdx
index 0007808b336..844afc9fd23 100644
--- a/src/pages/components/UI-shell-header/accessibility.mdx
+++ b/src/pages/components/UI-shell-header/accessibility.mdx
@@ -34,8 +34,6 @@ standard UI shell header component, Carbon already incorporates accessibility.
-
-
## What Carbon provides
The Carbon header bakes in keyboard interaction, including a
@@ -148,3 +146,5 @@ custom component.
the region.
- Carbon includes the "Skip to main content" link as the first item on the page
with a `tabindex="0"`, but hides it through CSS until it receives focus.
+
+
diff --git a/src/pages/components/UI-shell-left-panel/accessibility.mdx b/src/pages/components/UI-shell-left-panel/accessibility.mdx
index b36ecfd6d15..9b72e5ab70f 100644
--- a/src/pages/components/UI-shell-left-panel/accessibility.mdx
+++ b/src/pages/components/UI-shell-left-panel/accessibility.mdx
@@ -34,8 +34,6 @@ component.
-
-
## What Carbon provides
Carbon bakes keyboard operation into its components, improving the experience of
@@ -111,3 +109,5 @@ custom component.
additional information to assistive technologies.
- Each 'sub-menu' is implemented as a `
@@ -306,19 +307,23 @@ accessibility violations, you'd see
because both the `Breadcrumb` and `Tabs` components use `