diff --git a/docs/pattern-template.mdx b/docs/pattern-template.mdx
new file mode 100644
index 00000000000..486a3fb26a7
--- /dev/null
+++ b/docs/pattern-template.mdx
@@ -0,0 +1,55 @@
+---
+title: Pattern title
+---
+
+
+
+Include a short description of your pattern. This header should be longer than one line and no longer than four.
+
+
+
+
+ Overview
+ Behavior guidance
+ Assets
+ References
+ Metadata
+
+
+### Overview
+
+**Define the use of your pattern with a problem statement.** Explain a user's needs and how the pattern meets those needs. Communicate anything a designer needs to know about the pattern.
+
+**Show a high-level image of the pattern in use.** The pattern should be presented in context and include a caption.
+
+### Behavior guidance
+
+**Include guidance on interactions and states.** Most patterns depend on interactions with components. Include guidance on motion, behavior, and states of the components.
+
+**Use visuals wherever possible.** Show a user's flow through your pattern with images of your product at each step of the way.
+
+### Assets
+
+**Include any resources and references.** Attach and document any page templates, design specifications, and design software assets.
+
+**Document how a user would navigate your pattern.** Provide documentation to make onboarding and use easier.
+
+**Create a functional prototype.** The best way to prove your pattern solves a problem is to let designers test it. A link to the actual implementation is best, and a demo is also valuable.
+
+### References
+
+**Explain any accessibility testing you conducted.** No individual component or pattern can be accessible, but they can be used in an accessible way to create an accessible experience. Include any research and proof you may have in your pattern documentation.
+
+**Include any citations.** Research, books, and articles you found helpful offer legitimacy to your pattern and help designers understand your decisions.
+
+**Offer any development notes you may have.** Many patterns don't require specific developer attention to implement. If you have any developer guidance, include it here.
+
+### Metadata
+
+**Include a list of components used in the pattern.** Link to where where each component is documented.
+
+**Link to any related patterns.** This may not be the right pattern for a designer's problem, but other closely related patterns might be helpful.
+
+**Link to the maintainer's GitHub profile.** GitHub is the best way to ask questions and provide feedback about the pattern.
+
+**Communicate what happens next.** If there are any outstanding issues or gaps, include those here. Ask for help if you need it, and be transparent about the completeness of the pattern.
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index beb1acba065..0d845c1e6d8 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -1,10 +1,18 @@
/* eslint-disable import/prefer-default-export */
import React from 'react';
-export const onRenderBody = ({ setPostBodyComponents }) =>
+export const onRenderBody = ({ setPostBodyComponents, setHeadComponents }) => {
+ setHeadComponents([
+ ,
+ ]);
setPostBodyComponents([
,
]);
+};
diff --git a/package.json b/package.json
index 508ef30da76..8e6a6e8ddef 100644
--- a/package.json
+++ b/package.json
@@ -14,16 +14,17 @@
"timestamp": "./build-timestamp.sh"
},
"dependencies": {
- "@carbon/charts": "^0.15.8",
- "@carbon/charts-react": "^0.15.7",
- "@carbon/elements": "^10.5.1",
- "@carbon/icons": "^10.5.0",
- "@carbon/icons-react": "^10.5.0",
+ "@carbon/charts": "^0.16.2",
+ "@carbon/charts-react": "^0.16.2",
+ "@carbon/elements": "^10.6.0",
+ "@carbon/icons": "^10.6.0",
+ "@carbon/icons-react": "^10.6.0",
"babel-eslint": "^10.0.3",
- "carbon-components": "^10.5.1",
- "carbon-components-react": "^7.5.1",
+ "carbon-components": "^10.6.0",
+ "carbon-components-react": "^7.6.0",
"change-case": "^3.1.0",
"classnames": "^2.2.6",
+ "d3": "^5.12.0",
"docsearch.js": "^2.6.3",
"gatsby": "^2.13.73",
"gatsby-plugin-compile-es6-packages": "^2.1.0",
diff --git a/src/components/Charts/StackedBar.js b/src/components/Charts/StackedBar.js
deleted file mode 100644
index ecf436e0e29..00000000000
--- a/src/components/Charts/StackedBar.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { Component } from 'react';
-import { defaultColors } from '@carbon/charts';
-import { BarChart } from '@carbon/charts-react';
-import { Button } from 'carbon-components-react';
-import '@carbon/charts/style.css';
-
-const stackedBarOptions = {
- accessibility: false,
- scales: {
- x: {
- title: '2018 Annual Sales Figures',
- },
- y: {
- formatter: axisValue => `${axisValue / 1000}k`,
- yMaxAdjuster: yMaxValue => yMaxValue * 1.1,
- stacked: true,
- },
- },
- legendClickable: true,
- containerResizable: true,
-};
-
-class StackedBar extends Component {
- state = {
- data: {
- labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'],
- datasets: [
- {
- label: 'Dataset 1',
- backgroundColors: [defaultColors[0]],
- data: [65000, 29123, 35213, 51213, 16932],
- },
- {
- label: 'Dataset 2',
- backgroundColors: [defaultColors[1]],
- data: [32432, 21312, 56456, 21312, 34234],
- },
- {
- label: 'Dataset 3',
- backgroundColors: [defaultColors[2]],
- data: [12312, 23232, 34232, 12312, 34234],
- },
- ],
- },
- };
-
- updateData = () => {
- const data = this.state.data;
- data.datasets[0].data[0] = Math.random() * 65000;
- data.datasets[0].data[3] = Math.random() * 51213;
-
- this.setState({
- ...this.state,
- data,
- });
- };
-
- render() {
- return (
- <>
-
-
-
- >
- );
- }
-}
-
-export default StackedBar;
diff --git a/src/components/GlossaryComponent/GlossaryList/GlossaryList.js b/src/components/GlossaryComponent/GlossaryList/GlossaryList.js
index d46de195ec2..70e407259fe 100644
--- a/src/components/GlossaryComponent/GlossaryList/GlossaryList.js
+++ b/src/components/GlossaryComponent/GlossaryList/GlossaryList.js
@@ -21,7 +21,7 @@ class Glossary extends Component {
{glossaryEntry}
{glossaryEntry}
- {Object.keys(entry).map(list => {
+ {Object.keys(entry).map((list, i) => {
const listItems = Object.keys(entry[list]).map(word => {
counter += 1;
const currentWord = entry[list][word];
@@ -50,8 +50,7 @@ class Glossary extends Component {
);
});
return (
-
-
{list}
+
{listItems}
);
diff --git a/src/components/GlossaryComponent/GlossaryList/glossary-list.scss b/src/components/GlossaryComponent/GlossaryList/glossary-list.scss
index 71ca0036cb9..dd04f6baf7b 100644
--- a/src/components/GlossaryComponent/GlossaryList/glossary-list.scss
+++ b/src/components/GlossaryComponent/GlossaryList/glossary-list.scss
@@ -2,6 +2,10 @@
padding-top: rem(36px);
}
+.glossary-entry__main-heading {
+ margin-bottom: $spacing-06;
+}
+
.glossary-entry__main-heading span {
text-transform: lowercase;
}
diff --git a/src/components/TypesetStyle/TypesetStyle.js b/src/components/TypesetStyle/TypesetStyle.js
index 597c3eabeb2..c48dec5e2f5 100644
--- a/src/components/TypesetStyle/TypesetStyle.js
+++ b/src/components/TypesetStyle/TypesetStyle.js
@@ -871,11 +871,12 @@ class TypesetStyle extends React.Component {
addScrollListener() {
document.addEventListener('scroll', () => {
if (this.refs.stickyBar) {
- if (this.refs.stickyBar.getBoundingClientRect().top <= 104) {
+ console.log(this.refs.stickyBar.getBoundingClientRect().top);
+ if (this.refs.stickyBar.getBoundingClientRect().top <= 112) {
this.setState({
sticky: true,
});
- } else if (this.refs.stickyBar.getBoundingClientRect().top > 104) {
+ } else if (this.refs.stickyBar.getBoundingClientRect().top > 112) {
this.setState({
sticky: false,
});
diff --git a/src/components/TypesetStyle/typeset-example.scss b/src/components/TypesetStyle/typeset-example.scss
index 60ca9d2baff..df4368c2078 100644
--- a/src/components/TypesetStyle/typeset-example.scss
+++ b/src/components/TypesetStyle/typeset-example.scss
@@ -4,6 +4,13 @@
.bx--typeset-example {
margin-top: $spacing-05;
+ margin-left: -$spacing-03;
+ margin-right: -$spacing-03;
+
+ @include carbon--breakpoint('md') {
+ margin-left: 0;
+ margin-right: 0;
+ }
}
.bx--typeset-example-row {
@@ -17,11 +24,12 @@
}
.bx--typeset-example-description {
- padding: $spacing-05 15% $spacing-05 $spacing-05;
+ padding: $spacing-05;
overflow: hidden;
@include carbon--breakpoint('md') {
width: 62.5%;
+ padding-right: 15%;
}
@include carbon--breakpoint('lg') {
@@ -30,10 +38,10 @@
}
.bx--typeset-example-specs {
- padding: $spacing-05;
- width: 33.3%;
+ padding: $spacing-05 $spacing-06;
@include carbon--breakpoint('md') {
+ width: 33.3%;
border-left: 1px solid $carbon--gray-20;
}
}
diff --git a/src/components/TypesetStyle/typeset-style.scss b/src/components/TypesetStyle/typeset-style.scss
index 92834a96013..e633e29c3a9 100644
--- a/src/components/TypesetStyle/typeset-style.scss
+++ b/src/components/TypesetStyle/typeset-style.scss
@@ -141,6 +141,7 @@ $prefix: 'bx';
align-items: center;
height: 3rem;
border-top: 1px solid $carbon--gray-20;
+ border-bottom: 1px solid $carbon--gray-20;
padding-left: $spacing-05;
padding-right: $spacing-05;
display: grid;
@@ -149,6 +150,7 @@ $prefix: 'bx';
@include carbon--breakpoint('md') {
border-top: none;
+ border-bottom: none;
border-left: 1px solid $carbon--gray-20;
width: 37.5%;
}
@@ -369,6 +371,13 @@ $prefix: 'bx';
transition-property: top;
transition-duration: $transition--expansion;
transition-timing-function: $carbon--standard-easing;
+ margin-left: -$spacing-03;
+ margin-right: -$spacing-03;
+
+ @include carbon--breakpoint('md') {
+ margin-left: 0;
+ margin-right: 0;
+ }
}
div[class*='PageHeader-module--page-header--shifted']
@@ -407,55 +416,3 @@ div[class*='PageHeader-module--page-header--shifted']
top: 8.5rem;
}
}
-
-// ------------------------------------------------------
-// Typeset Example
-// ------------------------------------------------------
-.#{$prefix}--typeset-example-container {
- margin-top: $spacing-05;
-}
-
-.#{$prefix}--typeset-example {
- margin-top: $spacing-05;
-}
-
-.#{$prefix}--typeset-example-row {
- background-color: $carbon--white-0;
- min-height: rem(216px);
-}
-
-.#{$prefix}--typeset-example-group-title {
- background-color: $carbon--gray-20;
- height: 4rem;
-}
-
-.#{$prefix}--typeset-example-description {
- padding: $spacing-05 15% $spacing-05 $spacing-05;
- overflow: hidden;
-
- @include carbon--breakpoint('md') {
- width: 62.5%;
- }
-
- @include carbon--breakpoint('lg') {
- width: 66.7%;
- }
-}
-
-.#{$prefix}--typeset-example-specs {
- padding: $spacing-05;
- width: 33.3%;
-
- @include carbon--breakpoint('md') {
- border-left: 1px solid $carbon--gray-20;
- }
-}
-
-.#{$prefix}--typeset-example-specs-text {
- margin-bottom: $spacing-03;
-}
-
-.#{$prefix}--typeset-example-code-style {
- display: block;
- margin-top: $spacing-03;
-}
diff --git a/src/data/charts/demo-chart-data.js b/src/data/charts/demo-chart-data.js
new file mode 100644
index 00000000000..ffb36b28f6d
--- /dev/null
+++ b/src/data/charts/demo-chart-data.js
@@ -0,0 +1,256 @@
+import { DonutCenter } from '@carbon/charts';
+
+export const colors = [
+ '#00a68f',
+ '#3b1a40',
+ '#473793',
+ '#3c6df0',
+ '#56D2BB',
+ // 12 items needed
+];
+
+export const groupedBarData = {
+ labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'],
+ datasets: [
+ {
+ label: 'Dataset 1',
+ backgroundColors: [colors[0]],
+ data: [65000, -29123, -35213, 51213, 16932],
+ },
+ {
+ label: 'Dataset 2',
+ backgroundColors: [colors[1]],
+ data: [32432, -21312, -56456, -21312, 34234],
+ },
+ {
+ label: 'Dataset 3',
+ backgroundColors: [colors[2]],
+ data: [-12312, 23232, 34232, -12312, -34234],
+ },
+ {
+ label: 'Dataset 4',
+ backgroundColors: [colors[3]],
+ data: [-32423, 21313, 64353, 24134, 32423],
+ },
+ ],
+};
+
+export const groupedBarOptions = {
+ scales: {
+ x: {
+ title: '2018 Annual Sales Figures',
+ },
+ y: {
+ formatter: axisValue => `${axisValue / 1000}k`,
+ yMaxAdjuster: yMaxValue => yMaxValue * 1.1,
+ },
+ y2: {
+ ticks: {
+ max: 1,
+ min: 0,
+ },
+ formatter: axisValue => `${axisValue * 100}%`,
+ },
+ },
+ legendClickable: true,
+ containerResizable: true,
+};
+
+// Simple bar
+export const simpleBarData = {
+ labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'],
+ datasets: [
+ {
+ label: 'Dataset 1',
+ backgroundColors: colors,
+ data: [65000, 29123, 35213, 51213, 16932],
+ },
+ ],
+};
+
+export const simpleBarOptions = {
+ accessibility: false,
+ scales: {
+ x: {
+ title: '2018 Annual Sales Figures',
+ },
+ y: {
+ formatter: axisValue => `${axisValue / 1000}k`,
+ yMaxAdjuster: yMaxValue => yMaxValue * 1.1,
+ stacked: false,
+ },
+ },
+ legendClickable: true,
+ containerResizable: true,
+};
+
+// Stacked bar
+export const stackedBarData = {
+ labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'],
+ datasets: [
+ {
+ label: 'Dataset 1',
+ backgroundColors: [colors[0]],
+ data: [65000, 29123, 35213, 51213, 16932],
+ },
+ {
+ label: 'Dataset 2',
+ backgroundColors: [colors[1]],
+ data: [32432, 21312, 56456, 21312, 34234],
+ },
+ {
+ label: 'Dataset 3',
+ backgroundColors: [colors[2]],
+ data: [12312, 23232, 34232, 12312, 34234],
+ },
+ {
+ label: 'Dataset 4',
+ backgroundColors: [colors[3]],
+ data: [32423, 21313, 64353, 24134, 32423],
+ },
+ ],
+};
+
+export const stackedBarOptions = {
+ accessibility: false,
+ scales: {
+ x: {
+ title: '2018 Annual Sales Figures',
+ },
+ y: {
+ formatter: axisValue => `${axisValue / 1000}k`,
+ yMaxAdjuster: yMaxValue => yMaxValue * 1.1,
+ stacked: true,
+ },
+ },
+ legendClickable: true,
+ containerResizable: true,
+};
+
+export const curvedLineData = {
+ labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'],
+ datasets: [
+ {
+ label: 'Dataset 1',
+ backgroundColors: [colors[0]],
+ data: [65000, 79000, 49213, 51213, 16932],
+ },
+ {
+ label: 'Dataset 2',
+ backgroundColors: [colors[1]],
+ data: [80000, 21312, 56456, 21312, 0],
+ },
+ {
+ label: 'Dataset 3',
+ backgroundColors: [colors[2]],
+ data: [12312, 34232, 39232, 12312, 34234],
+ },
+ ],
+};
+
+export const curvedLineOptions = {
+ accessibility: false,
+ scales: {
+ x: {
+ title: '2018 Annual Sales Figures',
+ },
+ y: {
+ formatter: axisValue => `${axisValue / 1000}k`,
+ },
+ y2: {
+ ticks: {
+ max: 1,
+ min: 0,
+ },
+ },
+ },
+ curve: 'curveNatural',
+ legendClickable: true,
+ containerResizable: true,
+};
+
+export const lineData = {
+ labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'],
+ datasets: [
+ {
+ label: 'Dataset 1',
+ backgroundColors: [colors[0]],
+ data: [0, 0, 0, 0, 0],
+ },
+ {
+ label: 'Dataset 2',
+ backgroundColors: [colors[1]],
+ data: [0, 10000, 20000, 30000, 40000],
+ },
+ {
+ label: 'Dataset 3',
+ backgroundColors: [colors[2]],
+ data: [0, 20000, 40000, 60000, 80000],
+ },
+ ],
+};
+
+export const lineOptions = {
+ accessibility: false,
+ scales: {
+ x: {
+ title: '2018 Annual Sales Figures',
+ },
+ y: {
+ formatter: axisValue => `${axisValue / 1000}k`,
+ },
+ },
+ legendClickable: true,
+ containerResizable: true,
+};
+
+export const demoPieOptions = {
+ accessibility: false,
+ legendClickable: true,
+ containerResizable: true,
+ colors,
+};
+
+export const demoPieData = {
+ labels: [
+ '2V2N-9KYPM version 1',
+ 'L22I-P66EP-L22I-P66EP-L22I-P66EP',
+ 'JQAI-2M4L1',
+ 'J9DZ-F37AP',
+ 'YEL48-Q6XK-YEL48',
+ 'P66EP-L22I-L22I',
+ 'Q6XK-YEL48',
+ 'XKB5-L6EP',
+ 'YEL48-Q6XK',
+ 'L22I-P66EP-L22I',
+ ],
+ datasets: [
+ {
+ label: 'Dataset 1',
+ backgroundColors: colors,
+ data: [
+ 100000,
+ 200000,
+ 600000,
+ 100000,
+ 400000,
+ 450000,
+ 300000,
+ 70000,
+ 20000,
+ 120000,
+ ],
+ },
+ ],
+};
+
+export const demoDonutOptions = {
+ accessibility: false,
+ legendClickable: true,
+ containerResizable: true,
+ colors,
+ center: new DonutCenter({
+ number: 25423,
+ label: 'Browsers',
+ }),
+};
diff --git a/src/data/guidelines/glossary.js b/src/data/guidelines/glossary.js
index 0dfede494cb..7444fcad9a5 100644
--- a/src/data/guidelines/glossary.js
+++ b/src/data/guidelines/glossary.js
@@ -2,19 +2,19 @@
module.exports = {
A: {
'Action labels': {
- Add: {
+ add: {
desc:
'Adds an existing object to a list, container, or system (for example, adding a document to a folder).',
subtext:
'Combine Add with the object (for example, Add user, Add space, Add role, or Add privileges). Contrast with [Insert](#insert) and [New](#new). See the [Add action](/patterns/common-actions#add).',
},
- Apply: {
+ apply: {
desc:
'Saves changes without closing the dialog. These properties often affect subsequent system behavior.',
subtext:
'Use instead of Save Changes. Contrast with [Save](#save) and [Save As](#save-as).',
},
- Approve: {
+ approve: {
desc:
'Indicates the user agrees. In a business process, typically initiates the next step.',
subtext: 'See [Reject](#reject).',
@@ -23,13 +23,13 @@ module.exports = {
},
B: {
'Action labels': {
- Back: {
+ back: {
desc:
'Returns the user to the previous step in a sequence of steps, such as in a wizard.',
subtext:
'Use instead of Previous. See [Next](#next) and [Finish](#finish).',
},
- Browse: {
+ browse: {
desc:
'Assists the user in entering a file name or file path (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.',
},
@@ -37,36 +37,36 @@ module.exports = {
},
C: {
'Action labels': {
- Cancel: {
+ cancel: {
desc: 'Stops the current action and closes the dialog.',
subtext:
'Warn the user of any possible negative consequences of stopping an action from progressing, such as data corruption. See [Reset](#reset) and the [Cancel action](/patterns/common-actions#cancel).',
},
- Clear: {
+ 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.',
subtext:
'Where appropriate, combine Clear with the object (for example, Clear contents, Clear fields, Clear all). Contrast with [Delete](#delete) and [Remove](#remove). See the [Clear action](/patterns/common-actions#clear).',
},
- Close: {
+ close: {
desc:
'Closes the current page or window (for example, closing a secondary window containing online help).',
subtext:
'Do not use Close together with OK or Cancel actions. Contrast with [Done](#done). See [Cancel](#cancel) and the [Close action](/patterns/common-actions#close).',
},
- Copy: {
+ copy: {
desc:
'Creates new instances of the selected objects to 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. Use instead of Create like. Contrast with [New](#new). See the [Copy action](/patterns/common-actions#copy).',
},
- Create: {
+ create: {
desc:
'Label for a button in a dialog or form that creates a new object. The settings in the dialog are applied to the object when it is created.',
subtext:
'Use [New](#new) to initiate the action of creating a new object. Use Create to confirm the action after any naming or configuration. Contrast with [Add](#add), [Copy](#copy), and [Insert](#insert).',
},
- Customize: {
+ customize: {
desc: 'Allow a user to make desired changes.',
subtext: null,
},
@@ -74,27 +74,27 @@ module.exports = {
},
D: {
'Action labels': {
- Delete: {
+ delete: {
desc: 'Destroys an existing object.',
subtext:
'Combine Delete with the object to delete (for example, Delete column or Delete table). Contrast with [Clear](#clear) and [Remove](#remove). See the [Delete action](/patterns/common-actions#delete)',
},
- Docs: {
+ docs: {
desc:
'Opens a separate window containing the landing page for the Bluemix product documentation.',
subtext:
'Use as link text only for the specific link that points to the Bluemix product documentation from the console menu bar. See [Learn More](#learn-more).',
},
- Done: {
+ 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.',
subtext: 'See [Finish](#finish). Contrast with [Close](#close).',
},
- Download: {
+ download: {
desc: 'Transfers a file from a remote system to a local system.',
subtext: 'See [Upload](#upload).',
},
- Drop: {
+ drop: {
desc: 'Use only for dropping a database table.',
subtext:
'In other cases, use [Delete](#delete), [Clear](#clear), or [Remove](#remove).',
@@ -103,16 +103,16 @@ module.exports = {
},
E: {
'Action labels': {
- Edit: {
+ edit: {
desc: 'Allows data or values to be changed.',
subtext: 'See the [Edit action](/patterns/common-actions#edit).',
},
- 'Empty trash': {
+ 'empty trash': {
desc:
'Permanently deletes all files or objects that have been placed into a trash container.',
subtext: 'See [Move to trash](#move-to-trash).',
},
- Export: {
+ 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).',
subtext: 'See [Import](#import).',
@@ -121,16 +121,16 @@ module.exports = {
},
F: {
'Action labels': {
- Filter: {
+ filter: {
desc: 'Shortens a list to objects that match the filter criteria.',
subtext: 'Contrast with [Find](#find) and [Search](#search).',
},
- Find: {
+ 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).',
subtext: 'Contrast with (Filter)(#filter) and [Search](#search).',
},
- Finish: {
+ finish: {
desc: 'Indicates completion of a series of steps, such as in a wizard.',
subtext: 'See [Done](#done).',
},
@@ -138,7 +138,7 @@ module.exports = {
},
G: {
'Action labels': {
- 'Get help': {
+ 'get help': {
desc:
'Opens a search field from which the user can search for help information.',
subtext:
@@ -148,7 +148,7 @@ module.exports = {
},
H: {
'Action labels': {
- Hide: {
+ hide: {
desc: 'Removes an element that was previously shown.',
subtext: 'Context: Hide descriptions. See [Show](#show).',
},
@@ -156,13 +156,13 @@ module.exports = {
},
I: {
'Action labels': {
- Import: {
+ import: {
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. See [Export](#export).',
},
- Insert: {
+ insert: {
desc: 'Adds an element at a particular position in an ordered view.',
subtext:
'Context: Adding a picture to the body of a document or inserting a record into a table. Contrast with [Add](#new) and [New](#new).',
@@ -171,22 +171,22 @@ module.exports = {
},
L: {
'Action labels': {
- Launch: {
+ launch: {
desc: 'Do not use.',
subtext: 'Use [Start](#start).',
},
- 'Learn more': {
+ '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.',
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': {
+ '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.',
subtext: 'Use instead of Sign in. See [Log out](#log-out).',
},
- 'Log out': {
+ 'log out': {
desc: 'Exits an application or site.',
subtext: 'Use instead of Sign out. See [Log in](#log-in).',
},
@@ -194,11 +194,11 @@ module.exports = {
},
M: {
'Action labels': {
- Move: {
+ move: {
desc:
'Transfers an object from one container (for example, folder, activity, or page) to another.',
},
- 'Move to trash': {
+ '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.',
subtext:
@@ -208,13 +208,13 @@ module.exports = {
},
N: {
'Action labels': {
- New: {
+ 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.',
subtext:
'Combine New with the object to create (for example, New user or New column). See [Create](#create). Contrast with [Add](#add), [Copy](#copy), and [Insert](#insert).',
},
- Next: {
+ next: {
desc:
'Advances the user to the next step in a sequence of steps, such as in a wizard.',
subtext:
@@ -225,28 +225,28 @@ module.exports = {
O: {
'Action labels': {
OK: {
- desc: 'Completes the current task.',
+ desc: 'Confirms an action or completes the current task.',
subtext:
- 'The best practice is to use a label corresponding to the requested action, such as [Save](#save) or [Create](#create). Use OK only when such a label is not available.',
+ 'Best practice is to use a label corresponding to the specific action (e.g. [Save](#save), [Delete](#delete), etc.). Use OK only when such a label is not available. Write as shown: two letters, both uppercase.',
},
},
},
P: {
'Action labels': {
- Play: {
+ play: {
desc: 'Starts audio, video, or an animation.',
},
- Post: {
+ post: {
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: {
+ 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.',
},
- Print: {
+ print: {
desc:
'Sends a copy of the currently selected object or the object in view to the printer.',
},
@@ -254,52 +254,52 @@ module.exports = {
},
R: {
'Action labels': {
- Redo: {
+ redo: {
desc: 'Redoes an undo action.',
subtext:
'Likely used only as a Tooltip on an icon button. See [Undo](#undo).',
},
- Refresh: {
+ refresh: {
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 the [Refresh action](/patterns/common-actions#refresh).',
},
- Reject: {
+ reject: {
desc:
'Indicates the user does not approve. In a business process, typically blocks the process from proceeding to the next step.',
subtext: 'See [Approve](#approve).',
},
- Reply: {
+ reply: {
desc: 'Indicates or completes a response to an email or a comment.',
},
- Remove: {
+ remove: {
desc:
'Removes an object from a list or container but the object is not destroyed as a result of the action. Often requires one or more objects to be selected.',
subtext:
'Where appropriate, combine Remove with the object that will be removed (for example, Remove user, Remove role, Remove privileges). Contrast with [Delete](#delete) and [Clear](#clear). See the [Remove action](/patterns/common-actions#remove).',
},
- Reset: {
+ 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.',
subtext:
'See [Restore defaults](#restore-defaults), [Undo](#undo), [Cancel](#cancel), and the [Reset action](/patterns/common-actions#reset). Contrast with [Restore](#restore).',
},
- Restore: {
+ restore: {
desc:
'Brings a file back after deletion, corruption, or similar event.',
subtext: 'Contrast with [Reset](#reset).',
},
- 'Restore all': {
+ 'restore all': {
desc:
'Completes a restore operation on all files or objects in a given system or container.',
subtext: 'Contrast with [Restore](#restore).',
},
- 'Restore defaults': {
+ 'restore defaults': {
desc: 'Sets form values to the default settings.',
subtext: 'See [Reset](#reset) and [Undo](#undo).',
},
- Run: {
+ run: {
desc: 'Sets form values to the default settings.',
subtext: 'Use instead of Execute.',
},
@@ -307,50 +307,50 @@ module.exports = {
},
S: {
'Action labels': {
- Save: {
+ save: {
desc:
'Saves pending modifications made to a file or document. Does not close the window or panel.',
subtext: 'Contrast with [Apply](#apply).',
},
- 'Save as': {
+ '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.',
},
- Search: {
+ 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.',
subtext: 'Contrast with [Find](#find) and [Filter](#filter).',
},
- Select: {
+ select: {
desc: 'Selects data from a table.',
},
- 'Select all': {
+ 'select all': {
desc:
'Adds all objects in the view to the selection set or checks all Checkboxes.',
subtext: 'Contrast with [Clear](#clear).',
},
- Send: {
+ send: {
desc: 'Transfers an email or other information to the recipient.',
},
- Show: {
+ show: {
desc: 'Reveals an object that was previously hidden.',
subtext: 'Context: Show descriptions. See [Hide](#hide).',
},
- 'Sign up': {
+ 'sign up': {
desc: 'Creates a user account or registers a user in a system.',
subtext: 'Use instead of Register.',
},
- Start: {
+ start: {
desc:
'Deploy an app or service to its development or production environment so that it can be used.',
subtext: 'Use instead of [Launch](#launch).',
},
- Sort: {
+ sort: {
desc: 'Sorts a list or table column.',
subtext:
"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.",
},
- 'Submit an idea': {
+ 'submit an idea': {
desc: 'Opens a separate window containing the IBM Cloud Ideas portal.',
subtext:
'Use only as link text on Support widget from the console menu bar.',
@@ -359,7 +359,7 @@ module.exports = {
},
T: {
'Action labels': {
- Top: {
+ top: {
desc: 'Returns to the top of the page.',
subtext: 'Use instead of Back to top.',
},
@@ -367,18 +367,18 @@ module.exports = {
},
U: {
'Action labels': {
- Undo: {
+ 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.',
subtext:
'Not all actions, such as [Save](#save), can be undone. See [Redo](#redo), [Reset](#reset), and [Restore](#restore) defaults.',
},
- Update: {
+ 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.',
subtext: 'See [Edit](#edit).',
},
- Upload: {
+ upload: {
desc: 'Transfers a file from a local system to a remote system.',
subtext: 'See [Download](#download).',
},
@@ -386,7 +386,7 @@ module.exports = {
},
V: {
'Action labels': {
- 'View details': {
+ 'view details': {
desc: 'Presents additional information or properties for the object.',
},
},
diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml
index efa00109763..418064c619b 100644
--- a/src/data/nav-items.yaml
+++ b/src/data/nav-items.yaml
@@ -126,12 +126,20 @@
path: /experimental/overview
- title: Chatbots
path: /experimental/chatbot/overview
- - title: Exporting pattern
- path: /experimental/exporting-pattern
+ - title: Create flows
+ path: /experimental/create-flows
+ - title: Delete pattern
+ path: /experimental/delete-pattern
+ - title: Export pattern
+ path: /experimental/export-pattern
+ - title: Generate an API key
+ path: /experimental/generate-an-api-key
+ - title: Import pattern
+ path: /experimental/import-pattern
- title: Navigation pattern
path: /experimental/navigation-pattern
- - title: Deleting pattern
- path: /experimental/deleting-pattern
+ - title: Remove pattern
+ path: /experimental/remove-pattern
- title: Data visualization
pages:
- title: Overview
@@ -167,7 +175,7 @@
path: /contributions/add-ons
- title: Updates
pages:
- - title: What's new
+ - title: What’s new
path: /updates/whats-new
- title: Roadmap
path: /updates/roadmap
diff --git a/src/pages/components/link/style.mdx b/src/pages/components/link/style.mdx
index f72eaa31a81..5f588486868 100755
--- a/src/pages/components/link/style.mdx
+++ b/src/pages/components/link/style.mdx
@@ -5,9 +5,9 @@ tabs: ['Code', 'Usage', 'Style']
## Color
-| Class | Property | Color token |
-| ----------- | -------- | ----------------- |
-| `.bx--link` | color | `$interactive-01` |
+| Class | Property | Color token |
+| ----------- | -------- | ----------- |
+| `.bx--link` | color | `$link-01` |
### Interactive states
@@ -16,7 +16,7 @@ tabs: ['Code', 'Usage', 'Style']
| `:hover` | text color | `$hover-primary-text` |
| `:active` | text color | `$text-01` |
| `:focus` | border | `$focus` |
-| `:visited` | text color | `$visited` |
+| `:visited` | text color | `$visited-link` |
| `:disabled` | text color | `$disabled-02` |
diff --git a/src/pages/contributions/documentation.mdx b/src/pages/contributions/documentation.mdx
index 643877445e4..dacb949e7e5 100644
--- a/src/pages/contributions/documentation.mdx
+++ b/src/pages/contributions/documentation.mdx
@@ -32,7 +32,7 @@ Before you get started, take a moment to review our content guidelines. Followin
### Use Markdown
-The website is written in Markdown, which makes it easy for anyone to contribute content in a systematic way. If you don't already have a Markdown editor installed, there are plenty of free editors available online.
+The website is written in [Markdown](https://gatsby-theme-carbon.now.sh/components/markdown/), which makes it easy for anyone to contribute content in a systematic way. If you don't already have a Markdown editor installed, there are plenty of free editors available online.
Check out Carbon's handy markdown [styling cheatsheet](https://github.com/carbon-design-system/carbon-website/wiki/Markdown-cheatsheet) for how to style content.
diff --git a/src/pages/contributions/pattern.mdx b/src/pages/contributions/pattern.mdx
index 903ffe9709a..dd63116841f 100644
--- a/src/pages/contributions/pattern.mdx
+++ b/src/pages/contributions/pattern.mdx
@@ -2,7 +2,11 @@
title: Patterns
---
-### If you've designed a pattern that is not currently in Carbon, contributing it back allows others in the community to refine and use your pattern in their projects.
+
+
+If you've designed a pattern that is not currently in Carbon, contributing it back allows others in the community to refine and use your pattern in their projects.
+
+
## First steps to contributing
@@ -50,8 +54,8 @@ Explain how your pattern will address user needs and solve a problem. Carbon ser
#### 6. Document the pattern
-- Document pattern guidelines and usage to be used on the site, being sure to include the context and the rationale for any choices.
-- The site [documentation](./documentation) should include your contextual images and step-by-step instructions that allow designers to effectively implement your pattern.
+- Use the pattern [Markdown template](https://github.com/carbon-design-system/carbon-website/blob/master/docs/pattern-template.mdx) to document pattern guidelines and usage.
+- The site [documentation](./documentation) should include your contextual images and step-by-step instructions that allow designers to effectively implement your pattern. Be sure to include the context and the rationale for any choices.
#### 7. Prepare for experimental release
diff --git a/src/pages/data-visualization/charts/basic-charts.mdx b/src/pages/data-visualization/charts/basic-charts.mdx
index 8884cfe1cdf..b696c1338de 100755
--- a/src/pages/data-visualization/charts/basic-charts.mdx
+++ b/src/pages/data-visualization/charts/basic-charts.mdx
@@ -3,34 +3,149 @@ title: Charts
tabs: ['Basic charts', 'Advanced charts']
---
+import '@carbon/charts/style.css';
+
+import {
+ BarChart,
+ PieChart,
+ DonutChart,
+ LineChart,
+} from '@carbon/charts-react';
+
+import {
+ groupedBarData,
+ groupedBarOptions,
+ simpleBarData,
+ simpleBarOptions,
+ stackedBarData,
+ stackedBarOptions,
+ curvedLineData,
+ curvedLineOptions,
+ lineData,
+ lineOptions,
+ demoPieData,
+ demoPieOptions,
+ demoDonutOptions,
+} from '../../../data/charts/demo-chart-data';
+
## Bar charts
### Default
-Lorem ipsum
+
+
+### Grouped bar chart
+
+
### Stacked bar chart
+
+
## Line Charts
### Default
+
+
### Step line chart
+#### Middle
+
+
+
+#### Before
+
+
+
+#### After (regular)
+
+
+
### Curved line chart
-## Area chart
+#### Natural curve
-### Default
+
-## Pie / Donut chart
+#### Bundle curve
-### Default
+
-## Scatter plot
+#### Monotone Y Curve
-### Default
+
-```
+#### Monotone X Curve
+
+
+
+## Pie / Donut chart
+
+### Default
-```
+
+
+### Donut
+
+
diff --git a/src/pages/experimental/create-flows/images/1.png b/src/pages/experimental/create-flows/images/1.png
new file mode 100644
index 00000000000..24b3ceba29e
Binary files /dev/null and b/src/pages/experimental/create-flows/images/1.png differ
diff --git a/src/pages/experimental/create-flows/images/10.png b/src/pages/experimental/create-flows/images/10.png
new file mode 100644
index 00000000000..fecb0afe653
Binary files /dev/null and b/src/pages/experimental/create-flows/images/10.png differ
diff --git a/src/pages/experimental/create-flows/images/11.png b/src/pages/experimental/create-flows/images/11.png
new file mode 100644
index 00000000000..30ef5d0c314
Binary files /dev/null and b/src/pages/experimental/create-flows/images/11.png differ
diff --git a/src/pages/experimental/create-flows/images/12.png b/src/pages/experimental/create-flows/images/12.png
new file mode 100644
index 00000000000..3192b44a1a7
Binary files /dev/null and b/src/pages/experimental/create-flows/images/12.png differ
diff --git a/src/pages/experimental/create-flows/images/13.png b/src/pages/experimental/create-flows/images/13.png
new file mode 100644
index 00000000000..186162b53a1
Binary files /dev/null and b/src/pages/experimental/create-flows/images/13.png differ
diff --git a/src/pages/experimental/create-flows/images/14.png b/src/pages/experimental/create-flows/images/14.png
new file mode 100644
index 00000000000..ca470366ed6
Binary files /dev/null and b/src/pages/experimental/create-flows/images/14.png differ
diff --git a/src/pages/experimental/create-flows/images/15.png b/src/pages/experimental/create-flows/images/15.png
new file mode 100644
index 00000000000..626894f994e
Binary files /dev/null and b/src/pages/experimental/create-flows/images/15.png differ
diff --git a/src/pages/experimental/create-flows/images/16.png b/src/pages/experimental/create-flows/images/16.png
new file mode 100644
index 00000000000..d26dcb857af
Binary files /dev/null and b/src/pages/experimental/create-flows/images/16.png differ
diff --git a/src/pages/experimental/create-flows/images/2.png b/src/pages/experimental/create-flows/images/2.png
new file mode 100644
index 00000000000..0c422b6144f
Binary files /dev/null and b/src/pages/experimental/create-flows/images/2.png differ
diff --git a/src/pages/experimental/create-flows/images/3.png b/src/pages/experimental/create-flows/images/3.png
new file mode 100644
index 00000000000..989d2e5a17e
Binary files /dev/null and b/src/pages/experimental/create-flows/images/3.png differ
diff --git a/src/pages/experimental/create-flows/images/4.png b/src/pages/experimental/create-flows/images/4.png
new file mode 100644
index 00000000000..843b4dd7654
Binary files /dev/null and b/src/pages/experimental/create-flows/images/4.png differ
diff --git a/src/pages/experimental/create-flows/images/5.png b/src/pages/experimental/create-flows/images/5.png
new file mode 100644
index 00000000000..83a2128d3a3
Binary files /dev/null and b/src/pages/experimental/create-flows/images/5.png differ
diff --git a/src/pages/experimental/create-flows/images/6.png b/src/pages/experimental/create-flows/images/6.png
new file mode 100644
index 00000000000..3eb9311b672
Binary files /dev/null and b/src/pages/experimental/create-flows/images/6.png differ
diff --git a/src/pages/experimental/create-flows/images/7.7.png b/src/pages/experimental/create-flows/images/7.7.png
new file mode 100644
index 00000000000..f94a0c885a0
Binary files /dev/null and b/src/pages/experimental/create-flows/images/7.7.png differ
diff --git a/src/pages/experimental/create-flows/images/7.8.png b/src/pages/experimental/create-flows/images/7.8.png
new file mode 100644
index 00000000000..55c93361b04
Binary files /dev/null and b/src/pages/experimental/create-flows/images/7.8.png differ
diff --git a/src/pages/experimental/create-flows/images/7.9.png b/src/pages/experimental/create-flows/images/7.9.png
new file mode 100644
index 00000000000..6acc0d59282
Binary files /dev/null and b/src/pages/experimental/create-flows/images/7.9.png differ
diff --git a/src/pages/experimental/create-flows/images/7.png b/src/pages/experimental/create-flows/images/7.png
new file mode 100644
index 00000000000..5dfe1dbc2c2
Binary files /dev/null and b/src/pages/experimental/create-flows/images/7.png differ
diff --git a/src/pages/experimental/create-flows/images/8.png b/src/pages/experimental/create-flows/images/8.png
new file mode 100644
index 00000000000..5ac794febab
Binary files /dev/null and b/src/pages/experimental/create-flows/images/8.png differ
diff --git a/src/pages/experimental/create-flows/images/9.png b/src/pages/experimental/create-flows/images/9.png
new file mode 100644
index 00000000000..8d26404d890
Binary files /dev/null and b/src/pages/experimental/create-flows/images/9.png differ
diff --git a/src/pages/experimental/create-flows/index.mdx b/src/pages/experimental/create-flows/index.mdx
new file mode 100644
index 00000000000..4033e915974
--- /dev/null
+++ b/src/pages/experimental/create-flows/index.mdx
@@ -0,0 +1,257 @@
+---
+title: Create flows
+---
+
+
+
+To create is to generate a new resource. Creating is distinct from adding, but the two are often confused. To add a resource is to include a resource that already exists.
+
+
+
+#### Status:
+
+[Experimental](/experimental/overview/)
+
+#### Maintainer:
+
+[Vikki Paterson](https://github.com/vikkipaterson)
+
+
+
+ Standard creation
+ Multistep creation
+ Confirmation
+
+
+
+
+
+
Example of a creation pattern
+
+## Standard creation
+
+Use the standard creation pattern when no stepped guidance is needed and the input fields are directly related to each other. This pattern applies to side panel, multistep, and full-page creation flows. You should also provide advanced options for the user.
+
+### Modal
+
+If there are only one or two decisions to be made during a creation, use a small, standard modal overlaying the content where the creation was initiated. Avoid scrolling inside a small modal.
+
+
+
+
+
+
+
Example of a standard creation modal
+
+
+
+
+### Side panel
+
+If you have limited screen real estate, consider using a side panel. Side panels keep the user aware of the context in which they are working. You may choose to use either slide in or slide over panels.
+
+
+
+
+
+
+
Example of a side panel creation flow
+
+
+
+
+### Full page
+
+If your creation flow consists of multiple fields and/or supporting imagery, consider the full-page option. Full-page creation flows allow you to take advantage of maximum screen real estate.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example of a full-page creation flow
+
+
+
+
+## Multistep creation
+
+If the creation task is complex, consider breaking the process up into multiple steps. Display related or dependent options together.
+
+Multistep creation follows the same principles as standard creation but the creation takes place through several steps. This flow can take place in a side panel or can use the full display.
+
+### Side panel multistep
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Full page multistep with image
+
+
+
+
Multistep creation flow with image
+
+
+
+
Multistep creation flow with image
+
+
+
+
Multistep creation flow with image
+
+### Confirmation
+
+When any create action is a success, a notification banner can be presented to visually confirm this.
+
+
+
+
Example of a successful creation confirmation
+
+## Anatomy
+
+### Button position
+
+When viewed on mobile, the buttons are positioned at the bottom of the screen.
+
+
+
+
+
+
+
Example of full-page option on mobile
+
+
+
+
+On a larger screen, buttons should always remain visible to the user.
+
+If a display is likely to extend beyond the visible display, buttons should remain visible and should stick upon scrolling. If only a few buttons are present, they can be placed on the left below the last field.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+#### Including an image
+
+When including a supporting image, place it on the right-hand side of the window.
+
+
+
+
+
+
+
Example of supporting image placement
+
+
+
+
+### Advanced option
+
+Have a minimal set of options visible by default and give a user the option to expose more advanced options. If the user switches to advanced mode, remember this next time they perform the same task.
+
+The advanced option allows advanced users to access all options without overwhelming typical users. It can be applied to the side panel and the full-page dialog.
+
+
+
+
+
+
+
Example of advanced option
+
+
+
+
+### Confirmation
+
+When any creation is successful, a notification banner should be presented to visually confirm the action.
+
+
+
+
+
+
+
Example of a successful creation confirmation
+
+
+
diff --git a/src/pages/experimental/deleting-pattern/images/1.png b/src/pages/experimental/delete-pattern/images/1.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/1.png
rename to src/pages/experimental/delete-pattern/images/1.png
diff --git a/src/pages/experimental/deleting-pattern/images/1_1.png b/src/pages/experimental/delete-pattern/images/1_1.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/1_1.png
rename to src/pages/experimental/delete-pattern/images/1_1.png
diff --git a/src/pages/experimental/deleting-pattern/images/1_2.png b/src/pages/experimental/delete-pattern/images/1_2.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/1_2.png
rename to src/pages/experimental/delete-pattern/images/1_2.png
diff --git a/src/pages/experimental/deleting-pattern/images/2.png b/src/pages/experimental/delete-pattern/images/2.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/2.png
rename to src/pages/experimental/delete-pattern/images/2.png
diff --git a/src/pages/experimental/deleting-pattern/images/3.png b/src/pages/experimental/delete-pattern/images/3.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/3.png
rename to src/pages/experimental/delete-pattern/images/3.png
diff --git a/src/pages/experimental/deleting-pattern/images/5_0.png b/src/pages/experimental/delete-pattern/images/5_0.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/5_0.png
rename to src/pages/experimental/delete-pattern/images/5_0.png
diff --git a/src/pages/experimental/deleting-pattern/images/5_1.png b/src/pages/experimental/delete-pattern/images/5_1.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/5_1.png
rename to src/pages/experimental/delete-pattern/images/5_1.png
diff --git a/src/pages/experimental/deleting-pattern/images/5_2.png b/src/pages/experimental/delete-pattern/images/5_2.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/5_2.png
rename to src/pages/experimental/delete-pattern/images/5_2.png
diff --git a/src/pages/experimental/deleting-pattern/images/6.png b/src/pages/experimental/delete-pattern/images/6.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/6.png
rename to src/pages/experimental/delete-pattern/images/6.png
diff --git a/src/pages/experimental/deleting-pattern/images/7_updated.png b/src/pages/experimental/delete-pattern/images/7_updated.png
similarity index 100%
rename from src/pages/experimental/deleting-pattern/images/7_updated.png
rename to src/pages/experimental/delete-pattern/images/7_updated.png
diff --git a/src/pages/experimental/deleting-pattern/index.mdx b/src/pages/experimental/delete-pattern/index.mdx
similarity index 97%
rename from src/pages/experimental/deleting-pattern/index.mdx
rename to src/pages/experimental/delete-pattern/index.mdx
index 0aa38b029e0..de2319ae853 100644
--- a/src/pages/experimental/deleting-pattern/index.mdx
+++ b/src/pages/experimental/delete-pattern/index.mdx
@@ -1,5 +1,5 @@
---
-title: Deleting pattern
+title: Delete pattern
---
### Deleting is a destructive action. To protect user resources, your product should support ‘undo’ where possible. If ‘undo’ support is impossible, request user confirmation before deleting a resource or asset.
@@ -10,7 +10,7 @@ Experimental
#### Maintainers:
-[Vikki Paterson](https://github.ibm.com/VICTORIA)
+[Vikki Paterson](https://github.com/vikkipaterson)
diff --git a/src/pages/experimental/exporting-pattern/images/1.png b/src/pages/experimental/export-pattern/images/1.png
similarity index 100%
rename from src/pages/experimental/exporting-pattern/images/1.png
rename to src/pages/experimental/export-pattern/images/1.png
diff --git a/src/pages/experimental/exporting-pattern/images/2.png b/src/pages/experimental/export-pattern/images/2.png
similarity index 100%
rename from src/pages/experimental/exporting-pattern/images/2.png
rename to src/pages/experimental/export-pattern/images/2.png
diff --git a/src/pages/experimental/exporting-pattern/images/3.5.png b/src/pages/experimental/export-pattern/images/3.5.png
similarity index 100%
rename from src/pages/experimental/exporting-pattern/images/3.5.png
rename to src/pages/experimental/export-pattern/images/3.5.png
diff --git a/src/pages/experimental/exporting-pattern/images/3.png b/src/pages/experimental/export-pattern/images/3.png
similarity index 100%
rename from src/pages/experimental/exporting-pattern/images/3.png
rename to src/pages/experimental/export-pattern/images/3.png
diff --git a/src/pages/experimental/exporting-pattern/images/4.png b/src/pages/experimental/export-pattern/images/4.png
similarity index 100%
rename from src/pages/experimental/exporting-pattern/images/4.png
rename to src/pages/experimental/export-pattern/images/4.png
diff --git a/src/pages/experimental/exporting-pattern/images/contextual.png b/src/pages/experimental/export-pattern/images/contextual.png
similarity index 100%
rename from src/pages/experimental/exporting-pattern/images/contextual.png
rename to src/pages/experimental/export-pattern/images/contextual.png
diff --git a/src/pages/experimental/exporting-pattern/index.mdx b/src/pages/experimental/export-pattern/index.mdx
similarity index 95%
rename from src/pages/experimental/exporting-pattern/index.mdx
rename to src/pages/experimental/export-pattern/index.mdx
index 9e2e486f7e0..05f887840ff 100644
--- a/src/pages/experimental/exporting-pattern/index.mdx
+++ b/src/pages/experimental/export-pattern/index.mdx
@@ -1,5 +1,5 @@
---
-title: Exporting pattern
+title: Export pattern
---
### Exporting a resource saves data in a different format, external to the system.
@@ -10,7 +10,7 @@ Experimental
#### Maintainers:
-[Vikki Paterson](https://github.ibm.com/VICTORIA)
+[Vikki Paterson](https://github.com/vikkipaterson)
diff --git a/src/pages/experimental/generate-an-api-key/images/1.png b/src/pages/experimental/generate-an-api-key/images/1.png
new file mode 100644
index 00000000000..eee9156c5fe
Binary files /dev/null and b/src/pages/experimental/generate-an-api-key/images/1.png differ
diff --git a/src/pages/experimental/generate-an-api-key/images/2.png b/src/pages/experimental/generate-an-api-key/images/2.png
new file mode 100644
index 00000000000..b4ef2d5a115
Binary files /dev/null and b/src/pages/experimental/generate-an-api-key/images/2.png differ
diff --git a/src/pages/experimental/generate-an-api-key/images/3.png b/src/pages/experimental/generate-an-api-key/images/3.png
new file mode 100644
index 00000000000..f763479bde0
Binary files /dev/null and b/src/pages/experimental/generate-an-api-key/images/3.png differ
diff --git a/src/pages/experimental/generate-an-api-key/images/4.png b/src/pages/experimental/generate-an-api-key/images/4.png
new file mode 100644
index 00000000000..ec518d23e08
Binary files /dev/null and b/src/pages/experimental/generate-an-api-key/images/4.png differ
diff --git a/src/pages/experimental/generate-an-api-key/images/5.png b/src/pages/experimental/generate-an-api-key/images/5.png
new file mode 100644
index 00000000000..850f844cf2a
Binary files /dev/null and b/src/pages/experimental/generate-an-api-key/images/5.png differ
diff --git a/src/pages/experimental/generate-an-api-key/images/6.png b/src/pages/experimental/generate-an-api-key/images/6.png
new file mode 100644
index 00000000000..0aaf170ee9f
Binary files /dev/null and b/src/pages/experimental/generate-an-api-key/images/6.png differ
diff --git a/src/pages/experimental/generate-an-api-key/images/7.png b/src/pages/experimental/generate-an-api-key/images/7.png
new file mode 100644
index 00000000000..b61c6504ef0
Binary files /dev/null and b/src/pages/experimental/generate-an-api-key/images/7.png differ
diff --git a/src/pages/experimental/generate-an-api-key/images/8.png b/src/pages/experimental/generate-an-api-key/images/8.png
new file mode 100644
index 00000000000..08f851360aa
Binary files /dev/null and b/src/pages/experimental/generate-an-api-key/images/8.png differ
diff --git a/src/pages/experimental/generate-an-api-key/index.mdx b/src/pages/experimental/generate-an-api-key/index.mdx
new file mode 100644
index 00000000000..bca1eff45ef
--- /dev/null
+++ b/src/pages/experimental/generate-an-api-key/index.mdx
@@ -0,0 +1,104 @@
+---
+title: Generate an API key
+---
+
+
+
+When designing for the generation of API keys, ensure users know what the key is created for, the security implications, and the end destination of the key.
+
+
+
+#### Status:
+
+[Experimental](/experimental/overview)
+
+#### Maintainer:
+
+[Vikki Paterson](https://github.com/vikkipaterson)
+
+
+
+## General access keys
+
+### Instant generation
+
+Users click a primary **Generate** button. Consider displaying a **Generating...** state if the API key takes time to generate.
+
+
+
+
+
+
+
+
+
+Once the API key is generated it displays in a modal. Include a **Copy** button.
+
+
+
+
+
+
+
+
+
+#### Optionally:
+
+- Display two parts to the API key where required
+- Provide information text about the API key
+- Allow users to toggle the visibility of the key
+- Provide a secondary link to download the key
+
+
+
+
+
+
+
Example of a hidden API key
+
+
+
+
+
+
+
+
+
+
Example of a revealed API key
+
+
+
+
+### Name the API key
+
+You can ask a user to provide a descriptive name before the key is generated. This is particularly useful in instances where a user may have keys for several applications stored in the same location.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Example of an API key destination selector
+
+
+
+
+## Restricted access keys
+
+A user may want to limit the access an application or service is granted. Restricted access allows a user to assign specific access control and permissions before the API key is generated.
+
+
+
+
+
+
+
+
diff --git a/src/pages/experimental/import-pattern/images/0.5.png b/src/pages/experimental/import-pattern/images/0.5.png
new file mode 100644
index 00000000000..479425c8beb
Binary files /dev/null and b/src/pages/experimental/import-pattern/images/0.5.png differ
diff --git a/src/pages/experimental/import-pattern/images/1.png b/src/pages/experimental/import-pattern/images/1.png
new file mode 100644
index 00000000000..05071b83f35
Binary files /dev/null and b/src/pages/experimental/import-pattern/images/1.png differ
diff --git a/src/pages/experimental/import-pattern/images/2.png b/src/pages/experimental/import-pattern/images/2.png
new file mode 100644
index 00000000000..b0ca56d8baf
Binary files /dev/null and b/src/pages/experimental/import-pattern/images/2.png differ
diff --git a/src/pages/experimental/import-pattern/images/3.png b/src/pages/experimental/import-pattern/images/3.png
new file mode 100644
index 00000000000..acb84b55e7e
Binary files /dev/null and b/src/pages/experimental/import-pattern/images/3.png differ
diff --git a/src/pages/experimental/import-pattern/images/4.png b/src/pages/experimental/import-pattern/images/4.png
new file mode 100644
index 00000000000..ddb217f8f09
Binary files /dev/null and b/src/pages/experimental/import-pattern/images/4.png differ
diff --git a/src/pages/experimental/import-pattern/images/5.png b/src/pages/experimental/import-pattern/images/5.png
new file mode 100644
index 00000000000..b048f1854a6
Binary files /dev/null and b/src/pages/experimental/import-pattern/images/5.png differ
diff --git a/src/pages/experimental/import-pattern/index.mdx b/src/pages/experimental/import-pattern/index.mdx
new file mode 100644
index 00000000000..354fb673709
--- /dev/null
+++ b/src/pages/experimental/import-pattern/index.mdx
@@ -0,0 +1,69 @@
+---
+title: Import pattern
+---
+
+
+
+The import action transfers data or objects from an external source into a system.
+
+
+
+#### Status:
+
+[Experimental](experimental/about)
+
+#### Maintainers:
+
+[Vikki Paterson](https://github.com/vikkipaterson)
+
+
+
+
Example of an import modal in context
+
+## Choose a file
+
+Wherever possible there should be a drag and drop zone. Use a file drop component and offer the option to browse locally to select a file. Note that file selection should be restricted to allowed file types.
+
+
+
+
+
+
+
Example of an import modal
+
+
+
+
+
+
+
+
+
+
Example of drag and drop file import
+
+
+
+
+
+
+
+
+
+
Example of loaded files in the import modal
+
+
+
+
+## Import from a URL
+
+If your product supports importing from a URL, use this method.
+
+
+
+
+
+
+
Example of importing with a URL
+
+
+
diff --git a/src/pages/experimental/overview/index.mdx b/src/pages/experimental/overview/index.mdx
index 5dadf57976f..a299e7146d6 100755
--- a/src/pages/experimental/overview/index.mdx
+++ b/src/pages/experimental/overview/index.mdx
@@ -8,24 +8,20 @@ Carbon is always getting better. This happens through feature and usability upgr
-
-
-Experimental resources coming soon
-How experimental works
-
-
-
## Experimental resources coming soon
We are actively seeking to include these components, patterns, and tools in the Carbon site.
-| Resource | Type | Status |
-| ---------------------------------------------------------------------------- | ------- | ------------ |
-| [Axure kit](https://github.com/carbon-design-system/carbon/issues/3071) | Tool | In progress |
-| [Creating](https://github.com/carbon-design-system/carbon-website/pull/121) | Pattern | Under review |
-| [Importing](https://github.com/carbon-design-system/carbon-website/pull/199) | Pattern | Under review |
-| [Removing](https://github.com/carbon-design-system/carbon-website/pull/202) | Pattern | Under review |
-| [Uploading](https://github.com/carbon-design-system/carbon-website/pull/200) | Pattern | Under review |
+| Resource | Type | Status |
+| ----------------------------------------------------------------------- | -------- | ----------- |
+| Add | Pattern | In progress |
+| [Axure kit](https://github.com/carbon-design-system/carbon/issues/3071) | Tool | In progress |
+| Cards | Pattern | In progress |
+| Create | Pattern | In progress |
+| Delete | Pattern | In progress |
+| Error states | Pattern | In progress |
+| Remove | Pattern | In progress |
+| Settings page | Template | In progress |
## How experimental works
diff --git a/src/pages/experimental/remove-pattern/images/first-view.png b/src/pages/experimental/remove-pattern/images/first-view.png
new file mode 100644
index 00000000000..253e391a822
Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/first-view.png differ
diff --git a/src/pages/experimental/remove-pattern/images/modal-in-context.png b/src/pages/experimental/remove-pattern/images/modal-in-context.png
new file mode 100644
index 00000000000..7c6bccdcdfc
Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/modal-in-context.png differ
diff --git a/src/pages/experimental/remove-pattern/images/second-view.png b/src/pages/experimental/remove-pattern/images/second-view.png
new file mode 100644
index 00000000000..8b6a85c64dc
Binary files /dev/null and b/src/pages/experimental/remove-pattern/images/second-view.png differ
diff --git a/src/pages/experimental/remove-pattern/index.mdx b/src/pages/experimental/remove-pattern/index.mdx
new file mode 100644
index 00000000000..95ee6055936
--- /dev/null
+++ b/src/pages/experimental/remove-pattern/index.mdx
@@ -0,0 +1,53 @@
+---
+title: Remove pattern
+---
+
+
+
+Removal is a non-destructive action. A user can remove an asset from a list or item without destroying it.
+
+
+
+#### Status:
+
+[Experimental](/experimental/overview)
+
+#### Maintainers:
+
+[Vikki Paterson](https://github.com/vikkipaterson)
+
+
+
+
Example of a remove pattern using a modal
+
+## Low impact
+
+User confirmation is not required for low-impact removals because the asset is not destroyed.
+
+## High impact
+
+Require user confirmation for high impact removals. Communicate the consequences of the removal, and let the user know if the removal is permanent.
+
+Optionally, when the remove button is selected, change it to ‘Removing...’.
+
+
+
+
+
+
+
Example of a high-impact remove modal
+
+
+
+
+
+
+
+
+
+
+ Example of a high-impact remove modal following user confirmation
+