fix: merege conflicts

andreancardona · Mar 17, 2023 · ff302ed · ff302ed
2 parents 600315c + 98b463e
commit ff302ed
Show file tree

Hide file tree

Showing 254 changed files with 919 additions and 871 deletions.
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "react-dom": "^17.0.2",
     "react-live": "^3.1.0",
     "use-media": "^1.4.0",
-    "webpack": "^5.59.0"
+    "webpack": "^5.76.0"
   },
   "devDependencies": {
     "@loadable/babel-plugin": "^5.12.0",
@@ -114,6 +114,7 @@
     ]
   },
   "resolutions": {
-    "webpack": "^5.59.0"
+    "webpack": "^5.59.0",
+    "@carbon/react": "1.23.0"
   }
 }
diff --git a/src/components/TypesetStyle/TypesetExample.js b/src/components/TypesetStyle/TypesetExample.js
@@ -5,7 +5,7 @@ import {
   baseFontSize,
   breakpoints as carbonBreakpoints,
 } from '@carbon/elements';
-import { CodeSnippet } from '@carbon/react';
+import { CodeSnippet, Layer } from '@carbon/react';
 
 const breakpoints = {
   sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
@@ -112,10 +112,10 @@ const TypesetExample = (props) => (
         warning: currentBreakpointSpecs.warning,
       };
 
-      const versionClassName = type.version ? `bx--type-${type.version}` : '';
+      const versionClassName = type.version ? `cds--type-${type.version}` : '';
 
       const versionClassNames = classnames(
-        `bx--type-${type.key}`,
+        `cds--type-${type.key}`,
         versionClassName
       );
 
@@ -132,39 +132,41 @@ const TypesetExample = (props) => (
             </div>
             <div
               className={`cds--typeset-example-specs cds--col-md-3 cds--padding`}>
-              <span className={`bx--type-body-short-01`}>
-                <span className={`bx--type-semibold`}>{type.name} </span>
-                <br />
-                Type: {displaySpecs.font}
-                <br />
-                Size: {displaySpecs.fontSize}
-                <br />
-                Line height: {displaySpecs.lineHeight}
-                <br />
-                Weight:{' '}
-                <span style={{ textTransform: 'capitalize' }}>
-                  {displaySpecs.fontWeight}
-                </span>
-                <br />
-                Letter spacing: {displaySpecs.letterSpacing}px
-                <br />
-                Type set: {displaySpecs.typeSet}
-                {displaySpecs.warning != null ? (
-                  <span>
-                    <br />
-                    <span className={`bx--type-semibold`}>warning: </span>
-                    {displaySpecs.warning}
-                    <br />
+              <Layer>
+                <span className={`cds--type-body-short-01`}>
+                  <span className={`cds--type-semibold`}>{type.name} </span>
+                  <br />
+                  Type: {displaySpecs.font}
+                  <br />
+                  Size: {displaySpecs.fontSize}
+                  <br />
+                  Line height: {displaySpecs.lineHeight}
+                  <br />
+                  Weight:{' '}
+                  <span style={{ textTransform: 'capitalize' }}>
+                    {displaySpecs.fontWeight}
                   </span>
-                ) : (
                   <br />
-                )}
-                <div className={`cds--typeset-example-code-style`}>
-                  <CodeSnippet type="inline" feedback="Copied!" light>
-                    ${type.name.split(' ')[0]}
-                  </CodeSnippet>
-                </div>
-              </span>
+                  Letter spacing: {displaySpecs.letterSpacing}px
+                  <br />
+                  Type set: {displaySpecs.typeSet}
+                  {displaySpecs.warning != null ? (
+                    <span>
+                      <br />
+                      <span className={`cds--type-semibold`}>warning: </span>
+                      {displaySpecs.warning}
+                      <br />
+                    </span>
+                  ) : (
+                    <br />
+                  )}
+                  <div className={`cds--typeset-example-code-style`}>
+                    <CodeSnippet type="inline" feedback="Copied!" light>
+                      ${type.name.split(' ')[0]}
+                    </CodeSnippet>
+                  </div>
+                </span>
+              </Layer>
             </div>
           </div>
         </div>

diff --git a/src/data/docgen/react-docgen.json b/src/data/docgen/react-docgen.json
@@ -904,6 +904,46 @@
       }
     }
   },
+  "ContainedList": {
+    "description": "",
+    "displayName": "ContainedList",
+    "props": {
+      "kind": {
+        "defaultValue": {
+          "value": "'on-page'",
+          "computed": false
+        },
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'on-page'", "computed": false },
+            { "value": "'disclosed'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "The kind of ContainedList you want to display."
+      },
+      "size": {
+        "defaultValue": { "value": "'lg'", "computed": false },
+        "type": {
+          "name": "enum",
+          "value": [
+            { "value": "'sm'", "computed": false },
+            { "value": "'md'", "computed": false },
+            { "value": "'lg'", "computed": false },
+            { "value": "'xl'", "computed": false }
+          ]
+        },
+        "required": false,
+        "description": "Specify the size of the ContainedList."
+      },
+      "isInset": {
+        "type": { "name": "bool" },
+        "required": false,
+        "description": "Specify whether the dividing lines in between list items should be inset."
+      }
+    }
+  },
   "ContentSwitcher": {
     "description": "",
     "displayName": "ContentSwitcher",

diff --git a/src/data/guidelines/color-tokens.js b/src/data/guidelines/color-tokens.js
@@ -881,8 +881,8 @@ const colorTokens = {
           hex: '#e0e0e0',
         },
         g10: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g90: {
           name: 'Gray 70',
@@ -898,8 +898,8 @@ const colorTokens = {
       role: ['Subtle borders paired with $layer-01'],
       value: {
         white: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g10: {
           name: 'Gray 20',
@@ -923,8 +923,8 @@ const colorTokens = {
           hex: '#e0e0e0',
         },
         g10: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g90: {
           name: 'Gray 60',
@@ -940,8 +940,8 @@ const colorTokens = {
       role: ['Subtle borders paired with $layer-03'],
       value: {
         white: {
-          name: 'Gray 20',
-          hex: '#e0e0e0',
+          name: 'Gray 30',
+          hex: '#c6c6c6',
         },
         g10: {
           name: 'Gray 20',
@@ -1095,6 +1095,69 @@ const colorTokens = {
         },
       },
     },
+    '$border-tile-01': {
+      role: ['Operable tile indicator paired with $layer-01'],
+      value: {
+        white: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g10: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g90: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+        g100: {
+          name: 'Gray 70',
+          hex: '#525252',
+        },
+      },
+    },
+    '$border-tile-02': {
+      role: ['Operable tile indicator paired with $layer-02'],
+      value: {
+        white: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g10: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g90: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+        g100: {
+          name: 'Gray 60',
+          hex: '#6f6f6f',
+        },
+      },
+    },
+    '$border-tile-03': {
+      role: ['Operable tile indicator paired with $layer-03'],
+      value: {
+        white: {
+          name: 'Gray 30',
+          hex: '#c6c6c6',
+        },
+        g10: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g90: {
+          name: 'Gray 40',
+          hex: '#a8a8a8',
+        },
+        g100: {
+          name: 'Gray 50',
+          hex: '#8d8d8d',
+        },
+      },
+    },
     '$border-inverse': {
       role: ['High contrast border', '4.5:1 AA non-text contrast'],
       value: {
@@ -1526,6 +1589,27 @@ const colorTokens = {
         },
       },
     },
+    '$icon-interactive': {
+      role: ['Icons that indicate operability'],
+      value: {
+        white: {
+          name: 'Blue 60',
+          hex: '#0f62fe',
+        },
+        g10: {
+          name: 'Blue 60',
+          hex: '#0f62fe',
+        },
+        g90: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+        g100: {
+          name: 'White',
+          hex: '#ffffff',
+        },
+      },
+    },
     '$icon-inverse': {
       role: ['Inverse icon color'],
       value: {

diff --git a/src/pages/components/UI-shell-header/usage.mdx b/src/pages/components/UI-shell-header/usage.mdx
@@ -77,7 +77,7 @@ independently, but the components were designed to work together.
       src="https://codesandbox.io/embed/header-with-actions-and-nav-m0lo2?fontsize=14&hidenavigation=1&view=preview"
       title="header-with-actions-and-nav"
       allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media"
-      sstyle={{
+      style={{
         width: '100%',
         height: '500px',
         border: '0',

diff --git a/src/pages/components/accordion/code.mdx b/src/pages/components/accordion/code.mdx
@@ -20,7 +20,7 @@ usage documentation, see the Storybooks for each framework below.
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="React"
-    href="https://react.carbondesignsystem.com/?path=/story/components-accordion--accordion"
+    href="https://react.carbondesignsystem.com/?path=/story/components-accordion--default"
     >
 
 <MdxIcon name="react" />

diff --git a/src/pages/components/checkbox/images/checkbox-style-1.png b/src/pages/components/checkbox/images/checkbox-style-1.png
diff --git a/src/pages/components/checkbox/images/checkbox-style-2.png b/src/pages/components/checkbox/images/checkbox-style-2.png
diff --git a/src/pages/components/checkbox/images/checkbox-usage-8.png b/src/pages/components/checkbox/images/checkbox-usage-8.png
diff --git a/src/pages/components/checkbox/style.mdx b/src/pages/components/checkbox/style.mdx
@@ -16,6 +16,7 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 |                    | background-color | transparent       |
 | Checkbox:checked   | background-color | `$icon-primary`   |
 |                    | checkmark        | `$icon-inverse`   |
+| Helper text        | text color       | `$text-secondary` |
 
 <Row>
 <Column colLg={8}>
@@ -27,15 +28,27 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive states
 
-| Element           | Property   | Color token      |
-| ----------------- | ---------- | ---------------- |
-| Checkbox:focus    | border     | `$focus`         |
-| Label:disabled    | text color | `$text-disabled` |
-| Checkbox:disabled | border     | `$icon-disabled` |
-|                   | background | `$icon-disabled` |
+| State     | Element         | Property   | Color token        |
+| --------- | --------------- | ---------- | ------------------ |
+| Focus     | Checkbox        | border     | `$focus`           |
+| Disabled  | Label           | text color | `$text-disabled`   |
+|           | Checkbox        | border     | `$icon-disabled`   |
+|           |                 | background | `$icon-disabled`   |
+| Read-only | Label           | text color | `$text-primary`    |
+|           | Checkbox        | border     | `$icon-disabled`   |
+|           |                 | inner fill | `$icon-primary`    |
+| Error     | Label           | text color | `$text-primary`    |
+|           | Checkbox        | border     | `$support-error`   |
+|           | Error message   | text color | `$text-error`      |
+|           | Error icon      | svg        | `$support-error`   |
+| Warning   | Label           | text color | `$text-primary`    |
+|           | Checkbox        | border     | `$icon-primary`    |
+|           | Warning message | text color | `$text-primary`    |
+|           | Warning icon    | svg        | `$support-warning` |
+|           |                 | inner fill | `$black`           |
 
 <Row>
-<Column colLg={8}>
+<Column colLg={12}>
 
 ![Checkbox interactive states](images/checkbox-style-2.png)
 
@@ -48,10 +61,13 @@ Checkbox labels and group labels should be sentence case, with only the first
 word in a phrase and any proper nouns capitalized. Checkbox labels and group
 labels should not exceed three words.
 
-| Element        | Font-size (px/rem) | Font-weight   | Type token         |
-| -------------- | ------------------ | ------------- | ------------------ |
-| Group label    | 12 / 0.75          | Regular / 400 | `$label-01`        |
-| Checkbox label | 14 / 0.875         | Regular / 400 | `$body-compact-01` |
+| Element         | Font-size (px/rem) | Font-weight   | Type token         |
+| --------------- | ------------------ | ------------- | ------------------ |
+| Group label     | 12 / 0.75          | Regular / 400 | `$label-01`        |
+| Checkbox label  | 14 / 0.875         | Regular / 400 | `$body-compact-01` |
+| Helper text     | 12 / 0.75          | Regular / 400 | `$helper-text-01`  |
+| Error message   | 12 / 0.75          | Regular / 400 | `$label-01`        |
+| Warning message | 12 / 0.75          | Regular / 400 | `$label-01`        |
 
 ## Structure