feat: add card layout to a11y status component (#3885)

* chore: wip * feat: add missing components to overview page * chore: conflict * chore: yarn * chore: wip * feat: a11y status page content * feat: add screenreader data and tag style fixes * chore: cleanup * feat: add partially tested * feat: add all components from testing data * chore: yarn install state * chore: cleanup code * feat: add launch icon * chore: merge conflict * feat: add redirect * chore: fix install state * fix: update ui shell link * fix: link to use carbon link component * fix: add Equal Access Checker link * fix: add missing links to content * fix: add Taylor copy updates * fix: more copy updates * fix: copy updates * fix: copy updates * Update src/pages/components/overview/accessibility-status.mdx Co-authored-by: Taylor Jones <[email protected]> * Update src/pages/components/overview/accessibility-status.mdx * Update src/pages/components/overview/accessibility-status.mdx Co-authored-by: Taylor Jones <[email protected]> * Update src/pages/components/overview/accessibility-status.mdx Co-authored-by: Taylor Jones <[email protected]> * Update src/pages/components/overview/accessibility-status.mdx Co-authored-by: Taylor Jones <[email protected]> * Update src/pages/components/overview/accessibility-status.mdx Co-authored-by: Taylor Jones <[email protected]> * Update src/pages/components/overview/accessibility-status.mdx Co-authored-by: Taylor Jones <[email protected]> * Update src/pages/components/overview/accessibility-status.mdx Co-authored-by: Taylor Jones <[email protected]> * chore: format * fix: component data * fix: data * fix: update screenreader status for experimental components * fix: tag for experimental components * chore: remove style override for tag font * fix: update data * feat: add tooltips * fix: style specificity * chore: cleanup * feat: add filter for specific components * feat: add tooltips * chore: add missing title * chore: add code comments * chore: oops * feat: update descriptions, add tooltip, fix wrapping * feat: add to all a11y component pages * fix: update github url to handle names with multiple spaces * chore: remove console log * fix: paragraph spacings * feat: add card layout to a11y status component * chore: rename component and update theme * fix: add link component * feat: add cards to button and dropdown usage pages * fix: card spacing * fix: url location * chore: cleanup code * chore: cleanup * fix: anchor links * fix: url for aspect ratio * chore: refactor tag logic * fix: mobile paragraph spacing * fix: card borders * fix: anchor link * feat: add a11ystatus component to component usage pages * Update usage.mdx * fix: update title to subTitle in resource cards * Update src/components/A11yStatus/A11yStatus.js Co-authored-by: Taylor Jones <[email protected]> * chore: install-state --------- Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Feb 14, 2024 · 9b865a9 · 9b865a9
1 parent 3ace127
commit 9b865a9
Show file tree

Hide file tree

Showing 86 changed files with 1,596 additions and 1,202 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/src/components/A11yStatus/A11yStatus.js b/src/components/A11yStatus/A11yStatus.js
diff --git a/src/components/A11yStatus/A11yStatus.module.scss b/src/components/A11yStatus/A11yStatus.module.scss
@@ -0,0 +1,85 @@
+.help {
+  position: relative;
+  padding-left: $spacing-03;
+  top: $spacing-01;
+}
+
+.version,
+.moreLink {
+  --space: 1.5rem;
+}
+
+:global(.cds--definition-term),
+:global(.cds--tag) {
+  white-space: nowrap;
+}
+
+:global(.cds--tag .cds--popover) {
+  white-space: normal;
+}
+
+.heading-link {
+  &::before {
+    content: '';
+    display: block;
+    height: 96px;
+    margin-top: -96px;
+  }
+}
+
+// table view
+.table {
+  margin-top: $spacing-06;
+}
+
+// card view
+.dropdown {
+  :global(.cds--dropdown) {
+    border-bottom-color: $border-subtle-01;
+    border: none;
+  }
+}
+
+.variant > div,
+.variant + .card-group,
+.variant + .card-group ~ .card-group {
+  --space: 0;
+}
+
+.card-group :global(.cds--col-lg-4:nth-child(2n)) {
+  @include breakpoint('lg') {
+    margin-right: 33%;
+  }
+}
+
+.card-group {
+  div {
+    --space: 0;
+  }
+  @include breakpoint('md') {
+    border-left: 1px solid $border-subtle-01;
+  }
+
+  :global(.cds--resource-card) {
+    border: none;
+    border-top: 1px solid $border-subtle-01;
+
+    @include breakpoint('md') {
+      border-right: 1px solid $border-subtle-01;
+    }
+  }
+
+  @include breakpoint('md') {
+    :global(div:nth-last-child(-n + 2) .cds--resource-card) {
+      border-bottom: 1px solid $border-subtle-01;
+    }
+  }
+
+  :global(div:last-child .cds--resource-card) {
+    border-bottom: 1px solid $border-subtle-01;
+  }
+}
+
+.hidden {
+  @include visually-hidden;
+}
diff --git a/src/components/A11yStatus/a11y-status.module.scss b/src/components/A11yStatus/a11y-status.module.scss
diff --git a/src/pages/components/UI-shell-header/accessibility.mdx b/src/pages/components/UI-shell-header/accessibility.mdx
@@ -34,7 +34,7 @@ standard UI shell header component, Carbon already incorporates accessibility.
 
 </AnchorLinks>
 
-<A11yStatus components="UI shell" />
+<A11yStatus layout="table" components="UI shell" />
 
 ## What Carbon provides
 

diff --git a/src/pages/components/UI-shell-header/usage.mdx b/src/pages/components/UI-shell-header/usage.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import A11yStatus from 'components/A11yStatus';
+
 <PageDescription>
 
 This header is part of the Carbon UI shell. A shell is a collection of
@@ -26,8 +28,8 @@ guidance, go to
 
 <AnchorLinks>
 
-<AnchorLink>Overview</AnchorLink>
 <AnchorLink>Live demo</AnchorLink>
+<AnchorLink>Overview</AnchorLink>
 <AnchorLink>Formatting</AnchorLink>
 <AnchorLink>Content</AnchorLink>
 <AnchorLink>Behaviors</AnchorLink>
@@ -37,37 +39,6 @@ guidance, go to
 
 </AnchorLinks>
 
-## Overview
-
-The UI shell header is the foundation for navigating and orienting your user to
-the UI. The UI shell header can be used by itself or combined with the UI shell
-left and right panels for more complex UI navigation.
-
-The UI shell is made up of three components—the header, the
-[left panel](/components/UI-shell-left-panel/usage), and the
-[right panel](/components/UI-shell-right-panel/usage). All three can be used
-independently, but the components were designed to work together.
-
-| Shell UI component |                                                                                                                                         |
-| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
-| Header             | The highest level of navigation. The header can be used on its own for simple products or be used to trigger the left and right panels. |
-| Left panel         | An optional panel that is used for a product's navigation.                                                                              |
-| Right panel        | An optional panel that shows additional system-level actions or content associated with a system icon in the header.                    |
-
-### When to use
-
-- Identify the UI by name.
-- Globally persistent location for navigational links and utilities.
-
-### Types
-
-| Type                   | Purpose                                                                                                                                       |
-| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| Header base            | Has a persistent site title that can be used to identify a single page UI.                                                                    |
-| Header with navigation | Includes links and dropdowns for a simple navigation.                                                                                         |
-| Header with actions    | Actions or utilities appear in the header as icon buttons to give users quick access to common utilities.                                     |
-| Header with sidenav    | The header can be paired with the [UI shell left panel](/components/UI-shell-left-panel/usage) to offer a deeper level of navigation in a UI. |
-
 ## Live demo
 
 <StorybookDemo
@@ -104,6 +75,39 @@ independently, but the components were designed to work together.
   ]}
 />
 
+<A11yStatus layout="cards" components="UI shell" />
+
+## Overview
+
+The UI shell header is the foundation for navigating and orienting your user to
+the UI. The UI shell header can be used by itself or combined with the UI shell
+left and right panels for more complex UI navigation.
+
+The UI shell is made up of three components—the header, the
+[left panel](/components/UI-shell-left-panel/usage), and the
+[right panel](/components/UI-shell-right-panel/usage). All three can be used
+independently, but the components were designed to work together.
+
+| Shell UI component |                                                                                                                                         |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+| Header             | The highest level of navigation. The header can be used on its own for simple products or be used to trigger the left and right panels. |
+| Left panel         | An optional panel that is used for a product's navigation.                                                                              |
+| Right panel        | An optional panel that shows additional system-level actions or content associated with a system icon in the header.                    |
+
+### When to use
+
+- Identify the UI by name.
+- Globally persistent location for navigational links and utilities.
+
+### Types
+
+| Type                   | Purpose                                                                                                                                       |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| Header base            | Has a persistent site title that can be used to identify a single page UI.                                                                    |
+| Header with navigation | Includes links and dropdowns for a simple navigation.                                                                                         |
+| Header with actions    | Actions or utilities appear in the header as icon buttons to give users quick access to common utilities.                                     |
+| Header with sidenav    | The header can be paired with the [UI shell left panel](/components/UI-shell-left-panel/usage) to offer a deeper level of navigation in a UI. |
+
 ## Formatting
 
 ### Anatomy

diff --git a/src/pages/components/UI-shell-left-panel/accessibility.mdx b/src/pages/components/UI-shell-left-panel/accessibility.mdx
@@ -34,7 +34,7 @@ component.
 
 </AnchorLinks>
 
-<A11yStatus components="UI shell" />
+<A11yStatus layout="table" components="UI shell" />
 
 ## What Carbon provides
 

diff --git a/src/pages/components/UI-shell-left-panel/usage.mdx b/src/pages/components/UI-shell-left-panel/usage.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import A11yStatus from 'components/A11yStatus';
+
 <PageDescription>
 
 This left panel is part of the Carbon UI shell. A shell is a collection of
@@ -26,12 +28,51 @@ guidance, go to
 
 <AnchorLinks>
 
+<AnchorLink>Live demo</AnchorLink>
 <AnchorLink>General guidance</AnchorLink>
 <AnchorLink>Anatomy</AnchorLink>
 <AnchorLink>Behavior</AnchorLink>
 
 </AnchorLinks>
 
+## Live demo
+
+<StorybookDemo
+  themeSelector
+  tall
+  wide
+  url="https://react.carbondesignsystem.com"
+  variants={[
+    {
+      label: 'Header w/ SideNav',
+      variant: 'components-ui-shell-header--header-w-side-nav',
+    },
+    {
+      label: 'Header w/ Actions and Right Panel',
+      variant: 'components-ui-shell-header--header-w-actions-and-right-panel',
+    },
+    {
+      label: 'Header w/ Actions and Switcher',
+      variant: 'components-ui-shell-header--header-w-actions-and-switcher',
+    },
+    {
+      label: 'Header w/ Navigation',
+      variant: 'components-ui-shell-header--header-w-navigation',
+    },
+    {
+      label: 'Header w/ Navigation and Actions',
+      variant: 'components-ui-shell-header--header-w-navigation-and-actions',
+    },
+    {
+      label: 'Header w/ Navigation, Actions and SideNav',
+      variant:
+        'components-ui-shell-header--header-w-navigation-actions-and-side-nav',
+    },
+  ]}
+/>
+
+<A11yStatus layout="cards" components="UI shell" />
+
 ## Resources
 
 <Row className="resource-card-group">

diff --git a/src/pages/components/UI-shell-right-panel/accessibility.mdx b/src/pages/components/UI-shell-right-panel/accessibility.mdx
@@ -35,7 +35,7 @@ component.
 
 </AnchorLinks>
 
-<A11yStatus components="UI shell" />
+<A11yStatus layout="table" components="UI shell" />
 
 ## What Carbon provides
 

diff --git a/src/pages/components/UI-shell-right-panel/usage.mdx b/src/pages/components/UI-shell-right-panel/usage.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 ---
 
+import A11yStatus from 'components/A11yStatus';
+
 <PageDescription>
 
 The right panel is part of the Carbon UI shell. A shell is a collection of
@@ -26,12 +28,51 @@ guidance, go to
 
 <AnchorLinks>
 
+<AnchorLink>Live demo</AnchorLink>
 <AnchorLink>General guidance</AnchorLink>
 <AnchorLink>Anatomy</AnchorLink>
 <AnchorLink>Behavior</AnchorLink>
 
 </AnchorLinks>
 
+## Live demo
+
+<StorybookDemo
+  themeSelector
+  tall
+  wide
+  url="https://react.carbondesignsystem.com"
+  variants={[
+    {
+      label: 'Header w/ SideNav',
+      variant: 'components-ui-shell-header--header-w-side-nav',
+    },
+    {
+      label: 'Header w/ Actions and Right Panel',
+      variant: 'components-ui-shell-header--header-w-actions-and-right-panel',
+    },
+    {
+      label: 'Header w/ Actions and Switcher',
+      variant: 'components-ui-shell-header--header-w-actions-and-switcher',
+    },
+    {
+      label: 'Header w/ Navigation',
+      variant: 'components-ui-shell-header--header-w-navigation',
+    },
+    {
+      label: 'Header w/ Navigation and Actions',
+      variant: 'components-ui-shell-header--header-w-navigation-and-actions',
+    },
+    {
+      label: 'Header w/ Navigation, Actions and SideNav',
+      variant:
+        'components-ui-shell-header--header-w-navigation-actions-and-side-nav',
+    },
+  ]}
+/>
+
+<A11yStatus layout="cards" components="UI shell" />
+
 ## Resources
 
 <Row className="resource-card-group">

diff --git a/src/pages/components/accordion/accessibility.mdx b/src/pages/components/accordion/accessibility.mdx
@@ -22,7 +22,7 @@ standard accordion component, Carbon already incorporates accessibility.
   <AnchorLink>Development considerations</AnchorLink>
 </AnchorLinks>
 
-<A11yStatus components="Accordion" />
+<A11yStatus layout="table" components="Accordion" />
 
 ## What Carbon provides