From 64bde1bb7488f5e5f173f15f10c82cc6a17a5406 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Thu, 14 Jul 2022 17:34:26 +0530 Subject: [PATCH 01/13] docs(PPDSC-2268): accordion doc site page initial ui --- site/pages/components/accordion.tsx | 330 ++++++++++++++++++ site/routes.ts | 8 + .../accessibility-section.tsx | 2 +- 3 files changed, 339 insertions(+), 1 deletion(-) create mode 100644 site/pages/components/accordion.tsx diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx new file mode 100644 index 0000000000..e712140a41 --- /dev/null +++ b/site/pages/components/accordion.tsx @@ -0,0 +1,330 @@ +import React from 'react'; +import {UnorderedList} from 'newskit'; +import {IconFilledCircle} from '../../components/icons'; +import {getIllustrationComponent} from '../../components/illustrations/illustration-loader'; +import {UsageKind} from '../../components/usage-card'; +import {MetaStatus} from '../../components/meta/types'; +import {LayoutProps} from '../../components/layout'; +import {ComponentPageTemplate} from '../../templates/component-page-template'; + +const unorderedListOverrides = { + spaceStack: 'space040', + content: { + typographyPreset: 'editorialParagraph020', + }, +}; + +const AccordionComponent = (layoutProps: LayoutProps) => ( + by default but can be altered to fit the information architecture of the page.', + media: getIllustrationComponent('components/image-illustration'), + }, + { + title: 'Icon', + description: + 'The indicator icon is a chevron by default but can be changed to another icon.', + media: getIllustrationComponent('components/image-illustration'), + }, + ], + }} + states={{ + introduction: 'The Accordion has the following states:', + cards: [ + { + title: 'Base', + description: + 'The Accordion has a base state. This is the base style of the Accordion before it has been interacted with by a user.', + media: getIllustrationComponent('components/image-illustration'), + }, + { + title: 'Focus', + description: + 'The Accordion has a visual focus state when in focus. The focus state outlines the heading container.', + media: getIllustrationComponent('components/image-illustration'), + }, + { + title: 'Hover', + description: + 'The Accordion has a hover state. The style of the header and the cursor changes to visually communicate that the Accordion is an interactive element.', + media: getIllustrationComponent('components/image-illustration'), + }, + { + title: 'Disabled', + description: + 'The Accordion has a disabled state. The Accordion in a disabled state is not available to the user in that scenario. When the user’s cursor hovers over an Accordion in a disabled state, the cursor shows as not allowed.', + media: getIllustrationComponent('components/image-illustration'), + }, + ], + }} + behaviors={{ + introduction: + 'The following guidance describes how an Accordion behaves.', + cards: [ + { + title: 'Collapsed/expanded', + description: ( + <> + The Accordion has two states: +
+
+ + <>collapsed with the panel closed + <>expanded with the panel open + +
+ The default state is collapsed. The chevron icon points down when + the Accordion panel is collapsed and points up when the Accordion + panel is expanded. + + ), + media: getIllustrationComponent('components/image-illustration'), + }, + { + title: 'First expanded on load', + description: 'The first Accordion in a group is expanded on load.', + media: getIllustrationComponent('components/image-illustration'), + }, + { + title: 'Expand all', + description: + 'The Accordion displays all panels in a group expanded on load.', + media: getIllustrationComponent('components/image-illustration'), + }, + { + title: 'Expand single', + description: + 'Only one single panel can be expanded. When an Accordion panel is expanded, the open panel is collapsed. ', + media: getIllustrationComponent('components/image-illustration'), + }, + ], + }} + usage={{ + introduction: + 'The following guidance describes how and when to appropriately use the Accordion component.', + cards: [ + { + description: 'Use an Accordion to provide supporting information.', + kind: UsageKind.DO, + media: getIllustrationComponent('components/image-illustration'), + }, + { + description: 'Conceal important information in an Accordion.', + kind: UsageKind.DONT, + media: getIllustrationComponent('components/image-illustration'), + }, + { + description: + 'Write short, meaningful headings that allow users to understand what is inside the panel. Group together related topics.', + kind: UsageKind.DO, + media: getIllustrationComponent('components/image-illustration'), + }, + { + description: 'Nest accordions within themselves.', + kind: UsageKind.DONT, + media: getIllustrationComponent('components/image-illustration'), + }, + ], + }} + accessibility={{ + introduction: ( + <> + The Accordion has the following accessibility considerations: +
+
+ + <> + Accordions must be discoverable and readable with a mouse, other + pointer devices, keyboard, screen reader, zoom tools, and any + other assistive technology. + + <> + Exercise care in choosing how Accordions are used and the content + they contain. Hiding content in Accordions can make it more + difficult for a user to scan the page and increases their + cognitive load. + + + + ), + focusOrder: { + title: 'Focus order', + tableRows: [ + { + order: 1, + element: 'Header', + role: 'Focuses to the header.', + }, + { + order: 2, + element: 'Panel', + role: + 'If the panel is expanded, focuses to first interactive element in the panel, then each subsequent element.', + }, + ], + }, + interaction: { + title: 'Keyboard Interactions', + tableRows: [ + { + command: ['Space or Rtn'], + description: + 'Expand or collapse a section. If the implementation allows only one panel to be expanded at a time, and there is a panel expanded, the expanded panel will collapse.', + }, + { + command: ['Tab'], + description: 'Moves focus to the next focusable element', + }, + { + command: ['Shift & Tab'], + description: 'Moves focus to the previous focusable element', + }, + ], + }, + aria: { + title: 'WAI-ARIA', + tableRows: [ + { + element: 'button', + attribute: [ + 'aria-expanded="true"', + 'aria-controls=”ID”', + 'role="region"', + ], + value: '', + description: ( + <> + Set to true when the Accordion panel is expanded, otherwise set + to false. +
+
+ Points to the ID of the panel which the header controls. +
+
+ Creates a landmark for the current expanded accordion. + + ), + }, + { + element: 'panel', + attribute: 'aria-labelledby="IDREF"', + value: '', + description: ( + <> + Defines the accessible name for the region element. +
+
+ References the accordion header button that expands and + collapses the region. +
+
+ region elements are required to have an accessible name to be + identified as a landmark. + + ), + }, + ], + }, + }} + seo={{ + title: 'SEO Considerations', + introduction: ( + <> + Ensure all text, icons, and images are visible in the Accordion so + that information can be crawled and indexed. +
+
+ The Accordion component and its content are rendered to the DOM, but + only visible to the user when the panel is open. + + ), + }} + compliance={{ + states: true, + variations: true, + themes: true, + behaviours: true, + usage: true, + accessibility: true, + seo: true, + performance: false, + design: true, + props: true, + uiKit: true, + }} + related={{ + related: ['Tabs', 'Link', 'Menu'], + }} + /> +); + +export default AccordionComponent; diff --git a/site/routes.ts b/site/routes.ts index 9a6e91c498..9baff1ada0 100644 --- a/site/routes.ts +++ b/site/routes.ts @@ -587,6 +587,14 @@ export default [ 'Components that enable users to move between pages or content.', id: '/components/navigation', subNav: [ + { + title: 'Accordion', + page: true, + id: '/components/accordion', + description: + 'Accordions show and hide related content. Use them to break up long pages into segmented, prioritised sections.', + illustration: 'components/image-illustration', + }, { title: 'Link', page: true, diff --git a/site/templates/template-sections/accessibility-section.tsx b/site/templates/template-sections/accessibility-section.tsx index 325ded9f26..9b8314da43 100644 --- a/site/templates/template-sections/accessibility-section.tsx +++ b/site/templates/template-sections/accessibility-section.tsx @@ -21,7 +21,7 @@ export interface AccessibilityTablesProps { aria?: A11ySubSection<{ element: string; attribute: string | string[]; - value: string | string[]; + value?: string | string[]; description: string | JSX.Element; userSupplied?: true; }>; From 20fdd5179f06825a9b4c35b2b4cf97f393c9ef27 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Fri, 15 Jul 2022 11:43:08 +0530 Subject: [PATCH 02/13] docs(PPDSC-2268): accordion doc site ui section changes --- site/components/component-api/types.ts | 2 +- site/pages/components/accordion.tsx | 198 +++++++++++++++++++++++++ 2 files changed, 199 insertions(+), 1 deletion(-) diff --git a/site/components/component-api/types.ts b/site/components/component-api/types.ts index a5385b4ce6..f72834760a 100644 --- a/site/components/component-api/types.ts +++ b/site/components/component-api/types.ts @@ -20,7 +20,7 @@ export interface SingleComponentAPIProps { interface CommonProps extends TableRow { type: string | string[]; - description: string | JSX.Element; + description?: string | JSX.Element; default?: string | string[]; required?: boolean; } diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx index e712140a41..913bee7026 100644 --- a/site/pages/components/accordion.tsx +++ b/site/pages/components/accordion.tsx @@ -308,6 +308,204 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( ), }} + componentAPI={{ + components: [ + { + title: 'Accordion', + propsSummary: + 'The Accordion has a range of props that can be used to define an appropriate experience for different use cases.', + overridesSummary: + 'The Accordion has a range of predefined elements and attributes that can be overridden to define its appearance.', + propsRows: [ + { + name: 'children', + type: "Exclude", + description: `Displays supplied content in the open Accordion panel.`, + required: undefined, + }, + { + name: 'expanded', + type: 'boolean', + default: 'false', + description: `Determines if the panel is expanded or collapsed. If true, the panel is open.`, + required: undefined, + }, + { + name: 'disabled', + type: 'boolean', + default: 'false', + description: `If true, renders the Accordion in a disabled state.`, + required: undefined, + }, + { + name: 'header', + type: "Exclude", + description: `Displays the content of the header.`, + required: undefined, + }, + { + name: 'headerAs', + type: "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';", + default: 'h3', + description: `Change the underlying HTML element on the header.`, + required: undefined, + }, + + { + name: 'label', + type: 'string', + description: `Additional label on the accordion.`, + required: undefined, + }, + { + name: 'ariaControls', + type: 'string', + description: `HTML aria-controls attribute.`, + required: undefined, + }, + { + name: 'id', + type: 'string', + description: `HTML id attribute.`, + required: undefined, + }, + { + name: 'expanded', + type: 'boolean', + default: 'false', + description: `Determines if the accordion is expanded or collapsed.`, + required: undefined, + }, + { + name: 'onChange', + type: '(expanded: boolean) => void', + description: `Emit event when accordion changes its state, expanded/collapsed.`, + required: undefined, + }, + ], + overridesRows: [ + { + attribute: 'accordion.header.transitionPreset', + type: 'MQ', + default: 'backgroundColorChange', + description: + 'If provided, overrides the transitionPreset of the Accordion header.', + }, + { + attribute: 'accordion.header.minWidth', + type: 'MQ', + description: + 'If provided, this overrides the minWidth property of the Accordion panel.', + }, + { + attribute: 'accordion.header.minHeight', + type: 'MQ', + description: + 'If provided, this overrides the minHeight property of the Accordion panel.', + }, + + { + attribute: 'accordion.header.stylePreset', + type: 'MQ', + default: 'accordionHeader', + description: + 'If provided, overrides the stylePreset of the Accordion header.', + }, + { + attribute: 'accordion.header.typographyPreset', + type: 'MQ', + default: 'utilityButton030', + description: + 'If provided, overrides the typographyPreset of the Accordion header.', + }, + { + attribute: 'accordion.header.spaceInline', + type: 'MQ', + default: 'space020', + description: + 'If provided, overrides the inline space of the Accordion header.', + }, + { + attribute: 'accordion.header.indicatorIcon', + type: 'Override', + description: 'If provided, overrides icon.', + }, + { + attribute: 'accordion.header.indicatorIcon.stylePreset', + type: 'MQ', + default: 'iconDefault', + description: + 'If provided, overrides the stylePreset of the indicator icon.', + }, + { + attribute: 'accordion.header.indicatorIcon.size', + type: 'MQ', + default: 'iconSize020', + description: + 'If provided, overrides the size of the indicator icon.', + }, + { + attribute: 'accordion.header.label.typographyPreset', + type: 'MQ', + default: 'utilityButton030', + description: + 'If provided, overrides the typographyPreset of the indicator label.', + }, + + { + attribute: 'accordion.panel.stylePreset', + type: 'MQ', + default: 'accordionPanel', + description: + 'If provided, overrides the stylePreset of the Accordion panel.', + }, + { + attribute: 'accordion.panel.paddingBlock', + type: 'MQ', + default: 'spaceInset030', + }, + { + attribute: 'accordion.panel.paddingInline', + type: 'MQ', + default: 'spaceInset030', + }, + ], + }, + { + title: 'Accordion Group', + summary: + 'The Accordion Group has a range of props that can be used to define an appropriate experience for different use cases. Use this component to group Accordions together.', + propsRows: [ + { + name: 'children', + type: "Exclude", + required: true, + }, + { + name: 'defaultExpanded', + type: "number | number[] | 'all'", + description: `Defines the index of the initially expanded Accordion items (uncontrolled).`, + }, + { + name: 'expanded', + type: "number | number[] | 'all'", + description: `Defines the index of the expanded Accordion items, when changing this value AccordionGroup state is updated (controlled).`, + }, + { + name: 'expandSingle', + type: 'boolean', + default: 'false', + description: `Determines whether one or multiple items can be expanded at the same time. When true only one single accordion can be expanded.`, + }, + { + name: 'onChange', + type: '(expanded: number[]) => void', + description: `Callback fired when expanded Accordions change.`, + }, + ], + }, + ], + }} compliance={{ states: true, variations: true, From e69a92e1436bdc1f0579ad460fd5960961df6409 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Fri, 15 Jul 2022 12:36:55 +0530 Subject: [PATCH 03/13] docs(PPDSC-2268): unorder section ui fixes --- site/pages/components/accordion.tsx | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx index 913bee7026..6dfed64944 100644 --- a/site/pages/components/accordion.tsx +++ b/site/pages/components/accordion.tsx @@ -10,7 +10,7 @@ import {ComponentPageTemplate} from '../../templates/component-page-template'; const unorderedListOverrides = { spaceStack: 'space040', content: { - typographyPreset: 'editorialParagraph020', + typographyPreset: 'editorialParagraph030', }, }; @@ -199,6 +199,7 @@ const AccordionComponent = (layoutProps: LayoutProps) => (

@@ -299,12 +300,19 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( title: 'SEO Considerations', introduction: ( <> - Ensure all text, icons, and images are visible in the Accordion so - that information can be crawled and indexed. -
-
- The Accordion component and its content are rendered to the DOM, but - only visible to the user when the panel is open. + + <> + Ensure all text, icons, and images are visible in the Accordion so + that information can be crawled and indexed. + + <> + The Accordion component and its content are rendered to the DOM, + but only visible to the user when the panel is open. + + ), }} From f207a96880eb3b9221df058706ea3aedb563c874 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Fri, 15 Jul 2022 16:12:45 +0530 Subject: [PATCH 04/13] docs(PPDSC-2268): unorder ui fixes --- site/pages/components/accordion.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx index 6dfed64944..3dd1d305a9 100644 --- a/site/pages/components/accordion.tsx +++ b/site/pages/components/accordion.tsx @@ -301,6 +301,7 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( introduction: ( <> From 893b5d1b4b573eed22c3d73a4be1038fb78d14f7 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Mon, 18 Jul 2022 10:27:07 +0530 Subject: [PATCH 05/13] docs(PPDSC-2268): accessibility section fixes --- site/pages/components/accordion.tsx | 30 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx index 3dd1d305a9..85c9fd0631 100644 --- a/site/pages/components/accordion.tsx +++ b/site/pages/components/accordion.tsx @@ -43,7 +43,6 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( anatomy={{ introduction: 'The Accordion contains three required elements and no optional elements.', - rows: [ { name: 'Header', @@ -246,7 +245,7 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( description: 'Moves focus to the next focusable element', }, { - command: ['Shift & Tab'], + command: ['Shift', 'Tab'], description: 'Moves focus to the previous focusable element', }, ], @@ -256,29 +255,30 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( tableRows: [ { element: 'button', - attribute: [ - 'aria-expanded="true"', - 'aria-controls=”ID”', - 'role="region"', - ], - value: '', + attribute: ['aria-expanded="true"'], + value: 'boolean', description: ( <> Set to true when the Accordion panel is expanded, otherwise set to false. -
-
- Points to the ID of the panel which the header controls. -
-
- Creates a landmark for the current expanded accordion. ), }, + { + element: 'button', + attribute: 'aria-controls=”ID”', + description: + 'Points to the ID of the panel which the header controls.', + }, + { + element: 'button', + attribute: 'role="region"', + description: + 'Creates a landmark for the current expanded accordion.', + }, { element: 'panel', attribute: 'aria-labelledby="IDREF"', - value: '', description: ( <> Defines the accessible name for the region element. From 0a9975779f9340c8dd13d1b696c268cb825f696f Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Mon, 18 Jul 2022 11:01:38 +0530 Subject: [PATCH 06/13] docs(PPDSC-2268): unit test fix for build fail --- .../__snapshots__/sidebar.test.tsx.snap | 233 +++++++++++++----- 1 file changed, 165 insertions(+), 68 deletions(-) diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap index ee67010735..99ab41418a 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap @@ -691,7 +691,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` display: block; } -.emotion-597 { +.emotion-602 { width: 100%; position: relative; left: calc(-50vw + 50%); @@ -699,7 +699,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` margin-bottom: 8px; } -.emotion-598 { +.emotion-603 { border-style: solid; border-color: #E4E4E4; border-width: 1px; @@ -710,55 +710,55 @@ exports[`Sidebar renders correctly when closed 1`] = ` } @media screen { - .emotion-599 { + .emotion-604 { display: none; } } @media screen and (min-width: 480px) { - .emotion-599 { + .emotion-604 { display: none; } } @media screen and (min-width: 768px) { - .emotion-599 { + .emotion-604 { display: none; } } @media screen and (min-width: 1024px) { - .emotion-599 { + .emotion-604 { display: block; } } @media screen and (min-width: 1440px) { - .emotion-599 { + .emotion-604 { display: block; } } -.emotion-601 { +.emotion-606 { margin-bottom: 32px; } -.emotion-602 { +.emotion-607 { margin-inline: 32px; margin-block: 24px; } -.emotion-603 { +.emotion-608 { -webkit-text-decoration: none; text-decoration: none; } -.emotion-604 { +.emotion-609 { display: grid; grid-template-columns: 1fr 24px; } -.emotion-605 { +.emotion-610 { margin: 0; color: #2E2E2E; font-family: "Poppins",sans-serif; @@ -768,11 +768,11 @@ exports[`Sidebar renders correctly when closed 1`] = ` letter-spacing: 0; } -.emotion-605 svg { +.emotion-610 svg { fill: #2E2E2E; } -.emotion-606 { +.emotion-611 { display: inline-block; vertical-align: middle; overflow: hidden; @@ -782,7 +782,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-606 { + .emotion-611 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -790,19 +790,19 @@ exports[`Sidebar renders correctly when closed 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-606 { + .emotion-611 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-606.emotion-606 { +.emotion-611.emotion-611 { width: 24px; height: 24px; } -.emotion-608 { +.emotion-613 { margin-block: 24px; } @@ -2856,6 +2856,31 @@ exports[`Sidebar renders correctly when closed 1`] = `
@@ -3922,7 +3947,7 @@ exports[`Sidebar renders correctly when closed 1`] = `

Github

@@ -4550,7 +4575,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` display: block; } -.emotion-597 { +.emotion-602 { width: 100%; position: relative; left: calc(-50vw + 50%); @@ -4558,7 +4583,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` margin-bottom: 8px; } -.emotion-598 { +.emotion-603 { border-style: solid; border-color: #E4E4E4; border-width: 1px; @@ -4568,7 +4593,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` width: 100%; } -.emotion-601 { +.emotion-606 { margin-bottom: 32px; } @@ -6535,6 +6560,30 @@ exports[`Sidebar renders correctly when closed 1`] = `
@@ -7576,7 +7625,7 @@ exports[`Sidebar renders correctly when closed 1`] = ` />
@@ -8274,7 +8323,7 @@ exports[`Sidebar renders correctly when open 1`] = ` display: block; } -.emotion-597 { +.emotion-602 { width: 100%; position: relative; left: calc(-50vw + 50%); @@ -8282,7 +8331,7 @@ exports[`Sidebar renders correctly when open 1`] = ` margin-bottom: 8px; } -.emotion-598 { +.emotion-603 { border-style: solid; border-color: #E4E4E4; border-width: 1px; @@ -8293,55 +8342,55 @@ exports[`Sidebar renders correctly when open 1`] = ` } @media screen { - .emotion-599 { + .emotion-604 { display: none; } } @media screen and (min-width: 480px) { - .emotion-599 { + .emotion-604 { display: none; } } @media screen and (min-width: 768px) { - .emotion-599 { + .emotion-604 { display: none; } } @media screen and (min-width: 1024px) { - .emotion-599 { + .emotion-604 { display: block; } } @media screen and (min-width: 1440px) { - .emotion-599 { + .emotion-604 { display: block; } } -.emotion-601 { +.emotion-606 { margin-bottom: 32px; } -.emotion-602 { +.emotion-607 { margin-inline: 32px; margin-block: 24px; } -.emotion-603 { +.emotion-608 { -webkit-text-decoration: none; text-decoration: none; } -.emotion-604 { +.emotion-609 { display: grid; grid-template-columns: 1fr 24px; } -.emotion-605 { +.emotion-610 { margin: 0; color: #2E2E2E; font-family: "Poppins",sans-serif; @@ -8351,11 +8400,11 @@ exports[`Sidebar renders correctly when open 1`] = ` letter-spacing: 0; } -.emotion-605 svg { +.emotion-610 svg { fill: #2E2E2E; } -.emotion-606 { +.emotion-611 { display: inline-block; vertical-align: middle; overflow: hidden; @@ -8365,7 +8414,7 @@ exports[`Sidebar renders correctly when open 1`] = ` } @media screen and (prefers-reduced-motion: no-preference) { - .emotion-606 { + .emotion-611 { transition-property: fill; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); @@ -8373,19 +8422,19 @@ exports[`Sidebar renders correctly when open 1`] = ` } @media screen and (prefers-reduced-motion: reduce) { - .emotion-606 { + .emotion-611 { transition-property: fill; transition-duration: 0ms; transition-timing-function: cubic-bezier(0, 0, .5, 1); } } -.emotion-606.emotion-606 { +.emotion-611.emotion-611 { width: 24px; height: 24px; } -.emotion-608 { +.emotion-613 { margin-block: 24px; } @@ -10370,6 +10419,30 @@ exports[`Sidebar renders correctly when open 1`] = `
@@ -11398,7 +11471,7 @@ exports[`Sidebar renders correctly when open 1`] = `

Github

@@ -12025,7 +12098,7 @@ exports[`Sidebar renders correctly when open 1`] = ` display: block; } -.emotion-597 { +.emotion-602 { width: 100%; position: relative; left: calc(-50vw + 50%); @@ -12033,7 +12106,7 @@ exports[`Sidebar renders correctly when open 1`] = ` margin-bottom: 8px; } -.emotion-598 { +.emotion-603 { border-style: solid; border-color: #E4E4E4; border-width: 1px; @@ -12043,7 +12116,7 @@ exports[`Sidebar renders correctly when open 1`] = ` width: 100%; } -.emotion-601 { +.emotion-606 { margin-bottom: 32px; } @@ -14013,6 +14086,30 @@ exports[`Sidebar renders correctly when open 1`] = `
@@ -15054,7 +15151,7 @@ exports[`Sidebar renders correctly when open 1`] = ` />
From f8f808b6212ea23c911b6528f07f8a99b3b621a0 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Tue, 19 Jul 2022 09:38:44 +0530 Subject: [PATCH 07/13] docs(PPDSC-2268): illustrations update --- .../components/accordion/anatomy.tsx | 154 +++++++++ .../behaviours/allexpandedonload.tsx | 263 +++++++++++++++ .../accordion/behaviours/collapseexpand.tsx | 183 +++++++++++ .../behaviours/firstexpandedonload.tsx | 228 +++++++++++++ .../accordion/behaviours/singleexpanded.tsx | 228 +++++++++++++ .../components/accordion/hero.tsx | 56 ++++ .../components/accordion/options/heading.tsx | 145 +++++++++ .../components/accordion/options/icon.tsx | 96 ++++++ .../accordion/options/singlegroup.tsx | 267 +++++++++++++++ .../components/accordion/states/base.tsx | 101 ++++++ .../components/accordion/states/disabled.tsx | 101 ++++++ .../components/accordion/states/focus.tsx | 67 ++++ .../components/accordion/states/hover.tsx | 150 +++++++++ .../components/accordion/usage/do01.tsx | 169 ++++++++++ .../components/accordion/usage/do02.tsx | 305 ++++++++++++++++++ .../components/accordion/usage/dont01.tsx | 145 +++++++++ .../components/accordion/usage/dont02.tsx | 266 +++++++++++++++ site/pages/components/accordion.tsx | 48 ++- site/routes.ts | 2 +- 19 files changed, 2956 insertions(+), 18 deletions(-) create mode 100644 site/components/illustrations/components/accordion/anatomy.tsx create mode 100644 site/components/illustrations/components/accordion/behaviours/allexpandedonload.tsx create mode 100644 site/components/illustrations/components/accordion/behaviours/collapseexpand.tsx create mode 100644 site/components/illustrations/components/accordion/behaviours/firstexpandedonload.tsx create mode 100644 site/components/illustrations/components/accordion/behaviours/singleexpanded.tsx create mode 100644 site/components/illustrations/components/accordion/hero.tsx create mode 100644 site/components/illustrations/components/accordion/options/heading.tsx create mode 100644 site/components/illustrations/components/accordion/options/icon.tsx create mode 100644 site/components/illustrations/components/accordion/options/singlegroup.tsx create mode 100644 site/components/illustrations/components/accordion/states/base.tsx create mode 100644 site/components/illustrations/components/accordion/states/disabled.tsx create mode 100644 site/components/illustrations/components/accordion/states/focus.tsx create mode 100644 site/components/illustrations/components/accordion/states/hover.tsx create mode 100644 site/components/illustrations/components/accordion/usage/do01.tsx create mode 100644 site/components/illustrations/components/accordion/usage/do02.tsx create mode 100644 site/components/illustrations/components/accordion/usage/dont01.tsx create mode 100644 site/components/illustrations/components/accordion/usage/dont02.tsx diff --git a/site/components/illustrations/components/accordion/anatomy.tsx b/site/components/illustrations/components/accordion/anatomy.tsx new file mode 100644 index 0000000000..a1415b3830 --- /dev/null +++ b/site/components/illustrations/components/accordion/anatomy.tsx @@ -0,0 +1,154 @@ +import React from 'react'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; +import {Rect} from '../../rect'; +import {Circle} from '../../circle'; + +export const Anatomy: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default Anatomy; diff --git a/site/components/illustrations/components/accordion/behaviours/allexpandedonload.tsx b/site/components/illustrations/components/accordion/behaviours/allexpandedonload.tsx new file mode 100644 index 0000000000..575fe4b2c5 --- /dev/null +++ b/site/components/illustrations/components/accordion/behaviours/allexpandedonload.tsx @@ -0,0 +1,263 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const AllExpandedOnLoad: React.FC = () => { + const clip0 = getSSRId(); + const filter0 = getSSRId(); + const filter1 = getSSRId(); + const filter2 = getSSRId(); + const filter3 = getSSRId(); + const filter4 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default AllExpandedOnLoad; diff --git a/site/components/illustrations/components/accordion/behaviours/collapseexpand.tsx b/site/components/illustrations/components/accordion/behaviours/collapseexpand.tsx new file mode 100644 index 0000000000..7856cea144 --- /dev/null +++ b/site/components/illustrations/components/accordion/behaviours/collapseexpand.tsx @@ -0,0 +1,183 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const CollapseExpand: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + const filter2 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default CollapseExpand; diff --git a/site/components/illustrations/components/accordion/behaviours/firstexpandedonload.tsx b/site/components/illustrations/components/accordion/behaviours/firstexpandedonload.tsx new file mode 100644 index 0000000000..4a2eabe505 --- /dev/null +++ b/site/components/illustrations/components/accordion/behaviours/firstexpandedonload.tsx @@ -0,0 +1,228 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const FirstExpandedOnLoad: React.FC = () => { + const clip0 = getSSRId(); + const filter0 = getSSRId(); + const filter1 = getSSRId(); + const filter2 = getSSRId(); + const filter3 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default FirstExpandedOnLoad; diff --git a/site/components/illustrations/components/accordion/behaviours/singleexpanded.tsx b/site/components/illustrations/components/accordion/behaviours/singleexpanded.tsx new file mode 100644 index 0000000000..4e4a802c7f --- /dev/null +++ b/site/components/illustrations/components/accordion/behaviours/singleexpanded.tsx @@ -0,0 +1,228 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const SingleExpanded: React.FC = () => { + const clip0 = getSSRId(); + const filter0 = getSSRId(); + const filter1 = getSSRId(); + const filter2 = getSSRId(); + const filter3 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default SingleExpanded; diff --git a/site/components/illustrations/components/accordion/hero.tsx b/site/components/illustrations/components/accordion/hero.tsx new file mode 100644 index 0000000000..31e7e52435 --- /dev/null +++ b/site/components/illustrations/components/accordion/hero.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; + +export const Hero: React.FC = () => ( + + + + + + + + + + + + +); + +export default Hero; diff --git a/site/components/illustrations/components/accordion/options/heading.tsx b/site/components/illustrations/components/accordion/options/heading.tsx new file mode 100644 index 0000000000..81cbfbe916 --- /dev/null +++ b/site/components/illustrations/components/accordion/options/heading.tsx @@ -0,0 +1,145 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const Heading: React.FC = () => { + const filter0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Heading; diff --git a/site/components/illustrations/components/accordion/options/icon.tsx b/site/components/illustrations/components/accordion/options/icon.tsx new file mode 100644 index 0000000000..1dd81c43e6 --- /dev/null +++ b/site/components/illustrations/components/accordion/options/icon.tsx @@ -0,0 +1,96 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const Icon: React.FC = () => { + const clip0 = getSSRId(); + const clip1 = getSSRId(); + const filter0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Icon; diff --git a/site/components/illustrations/components/accordion/options/singlegroup.tsx b/site/components/illustrations/components/accordion/options/singlegroup.tsx new file mode 100644 index 0000000000..b9e1cf37ff --- /dev/null +++ b/site/components/illustrations/components/accordion/options/singlegroup.tsx @@ -0,0 +1,267 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const SingleGroup: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + const filter2 = getSSRId(); + const filter3 = getSSRId(); + const filter4 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default SingleGroup; diff --git a/site/components/illustrations/components/accordion/states/base.tsx b/site/components/illustrations/components/accordion/states/base.tsx new file mode 100644 index 0000000000..5b11040774 --- /dev/null +++ b/site/components/illustrations/components/accordion/states/base.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const Base: React.FC = () => { + const filter0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Base; diff --git a/site/components/illustrations/components/accordion/states/disabled.tsx b/site/components/illustrations/components/accordion/states/disabled.tsx new file mode 100644 index 0000000000..06cee01dcc --- /dev/null +++ b/site/components/illustrations/components/accordion/states/disabled.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const Disabled: React.FC = () => { + const filter0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Disabled; diff --git a/site/components/illustrations/components/accordion/states/focus.tsx b/site/components/illustrations/components/accordion/states/focus.tsx new file mode 100644 index 0000000000..ece063bdce --- /dev/null +++ b/site/components/illustrations/components/accordion/states/focus.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const Focus: React.FC = () => ( + + + + + + + + + + + + + +); + +export default Focus; diff --git a/site/components/illustrations/components/accordion/states/hover.tsx b/site/components/illustrations/components/accordion/states/hover.tsx new file mode 100644 index 0000000000..3fda342557 --- /dev/null +++ b/site/components/illustrations/components/accordion/states/hover.tsx @@ -0,0 +1,150 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const Hover: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Hover; diff --git a/site/components/illustrations/components/accordion/usage/do01.tsx b/site/components/illustrations/components/accordion/usage/do01.tsx new file mode 100644 index 0000000000..5069bdd07c --- /dev/null +++ b/site/components/illustrations/components/accordion/usage/do01.tsx @@ -0,0 +1,169 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const Do01: React.FC = () => { + const filter0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Do01; diff --git a/site/components/illustrations/components/accordion/usage/do02.tsx b/site/components/illustrations/components/accordion/usage/do02.tsx new file mode 100644 index 0000000000..fb5d1f35bc --- /dev/null +++ b/site/components/illustrations/components/accordion/usage/do02.tsx @@ -0,0 +1,305 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const Do02: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + const filter2 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Do02; diff --git a/site/components/illustrations/components/accordion/usage/dont01.tsx b/site/components/illustrations/components/accordion/usage/dont01.tsx new file mode 100644 index 0000000000..e87f64caf2 --- /dev/null +++ b/site/components/illustrations/components/accordion/usage/dont01.tsx @@ -0,0 +1,145 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; +import {Rect} from '../../../rect'; + +export const Dont01: React.FC = () => { + const filter0 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Dont01; diff --git a/site/components/illustrations/components/accordion/usage/dont02.tsx b/site/components/illustrations/components/accordion/usage/dont02.tsx new file mode 100644 index 0000000000..d3bb0603bc --- /dev/null +++ b/site/components/illustrations/components/accordion/usage/dont02.tsx @@ -0,0 +1,266 @@ +import React from 'react'; +import {getSSRId} from 'newskit'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; + +export const Dont02: React.FC = () => { + const filter0 = getSSRId(); + const filter1 = getSSRId(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Dont02; diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx index 85c9fd0631..a401a8e79b 100644 --- a/site/pages/components/accordion.tsx +++ b/site/pages/components/accordion.tsx @@ -26,7 +26,7 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( type: 'Navigation', name: 'Accordion', hero: { - illustration: 'components/image-illustration', + illustration: 'components/accordion/hero', }, introduction: 'Accordions show and hide related content. Use them to break up long pages into segmented, prioritised sections.', @@ -64,7 +64,7 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( optional: undefined, }, ], - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent('components/accordion/anatomy'), }} options={{ introduction: @@ -74,19 +74,23 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( title: 'Single accordion or accordion group', description: 'The Accordion can be used as a single instance, or in a group of accordions stacked vertically.', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent( + 'components/accordion/options/singlegroup', + ), }, { title: 'Heading level', description: 'The Accordion title is wrapped in a heading tag. The tag is

by default but can be altered to fit the information architecture of the page.', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent( + 'components/accordion/options/heading', + ), }, { title: 'Icon', description: 'The indicator icon is a chevron by default but can be changed to another icon.', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent('components/accordion/options/icon'), }, ], }} @@ -97,25 +101,27 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( title: 'Base', description: 'The Accordion has a base state. This is the base style of the Accordion before it has been interacted with by a user.', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent('components/accordion/states/base'), }, { title: 'Focus', description: 'The Accordion has a visual focus state when in focus. The focus state outlines the heading container.', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent('components/accordion/states/focus'), }, { title: 'Hover', description: 'The Accordion has a hover state. The style of the header and the cursor changes to visually communicate that the Accordion is an interactive element.', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent('components/accordion/states/hover'), }, { title: 'Disabled', description: 'The Accordion has a disabled state. The Accordion in a disabled state is not available to the user in that scenario. When the user’s cursor hovers over an Accordion in a disabled state, the cursor shows as not allowed.', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent( + 'components/accordion/states/disabled', + ), }, ], }} @@ -143,24 +149,32 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( panel is expanded. ), - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent( + 'components/accordion/behaviours/collapseexpand', + ), }, { title: 'First expanded on load', description: 'The first Accordion in a group is expanded on load.', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent( + 'components/accordion/behaviours/firstexpandedonload', + ), }, { title: 'Expand all', description: 'The Accordion displays all panels in a group expanded on load.', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent( + 'components/accordion/behaviours/allexpandedonload', + ), }, { title: 'Expand single', description: 'Only one single panel can be expanded. When an Accordion panel is expanded, the open panel is collapsed. ', - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent( + 'components/accordion/behaviours/singleexpanded', + ), }, ], }} @@ -171,23 +185,23 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( { description: 'Use an Accordion to provide supporting information.', kind: UsageKind.DO, - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent('components/accordion/usage/do01'), }, { description: 'Conceal important information in an Accordion.', kind: UsageKind.DONT, - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent('components/accordion/usage/dont01'), }, { description: 'Write short, meaningful headings that allow users to understand what is inside the panel. Group together related topics.', kind: UsageKind.DO, - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent('components/accordion/usage/do02'), }, { description: 'Nest accordions within themselves.', kind: UsageKind.DONT, - media: getIllustrationComponent('components/image-illustration'), + media: getIllustrationComponent('components/accordion/usage/dont02'), }, ], }} diff --git a/site/routes.ts b/site/routes.ts index c348c830f4..0fef3d8058 100644 --- a/site/routes.ts +++ b/site/routes.ts @@ -593,7 +593,7 @@ export default [ id: '/components/accordion', description: 'Accordions show and hide related content. Use them to break up long pages into segmented, prioritised sections.', - illustration: 'components/image-illustration', + illustration: 'components/accordion/hero', }, { title: 'Link', From c748e3d7aa2838c8f8df06ba8ea5d17507e2d5e5 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Tue, 19 Jul 2022 10:32:47 +0530 Subject: [PATCH 08/13] docs(PPDSC-2268): ui fix --- site/pages/components/accordion.tsx | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx index a401a8e79b..9f8bf2bdf2 100644 --- a/site/pages/components/accordion.tsx +++ b/site/pages/components/accordion.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {UnorderedList} from 'newskit'; +import {Block, UnorderedList} from 'newskit'; import {IconFilledCircle} from '../../components/icons'; import {getIllustrationComponent} from '../../components/illustrations/illustration-loader'; import {UsageKind} from '../../components/usage-card'; @@ -136,14 +136,20 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( The Accordion has two states:

- - <>collapsed with the panel closed - <>expanded with the panel open - -
+ + + <>collapsed with the panel closed + <>expanded with the panel open + + The default state is collapsed. The chevron icon points down when the Accordion panel is collapsed and points up when the Accordion panel is expanded. From 4140628a4cd1eba1e8d00a45323f7e501432b174 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Tue, 19 Jul 2022 11:06:02 +0530 Subject: [PATCH 09/13] docs(PPDSC-2268): ui changes --- site/pages/components/accordion.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx index 9f8bf2bdf2..73c3714ac8 100644 --- a/site/pages/components/accordion.tsx +++ b/site/pages/components/accordion.tsx @@ -31,7 +31,7 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( introduction: 'Accordions show and hide related content. Use them to break up long pages into segmented, prioritised sections.', }} - componentDefaultsKey="Menu" + componentDefaultsKey="Accordion" meta={{ status: MetaStatus.Beta, introduced: 'v5.6.0', From aa575c11dd603a2e46189cb90cdccf9cefd9d486 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Tue, 19 Jul 2022 12:43:47 +0530 Subject: [PATCH 10/13] docs(PPDSC-2268): ui fixes --- site/components/component-api/types.ts | 2 +- site/pages/components/accordion.tsx | 6 ++++++ site/templates/template-sections/accessibility-section.tsx | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/site/components/component-api/types.ts b/site/components/component-api/types.ts index f72834760a..a5385b4ce6 100644 --- a/site/components/component-api/types.ts +++ b/site/components/component-api/types.ts @@ -20,7 +20,7 @@ export interface SingleComponentAPIProps { interface CommonProps extends TableRow { type: string | string[]; - description?: string | JSX.Element; + description: string | JSX.Element; default?: string | string[]; required?: boolean; } diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx index 73c3714ac8..fef3c06872 100644 --- a/site/pages/components/accordion.tsx +++ b/site/pages/components/accordion.tsx @@ -287,18 +287,21 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( { element: 'button', attribute: 'aria-controls=”ID”', + value: '', description: 'Points to the ID of the panel which the header controls.', }, { element: 'button', attribute: 'role="region"', + value: '', description: 'Creates a landmark for the current expanded accordion.', }, { element: 'panel', attribute: 'aria-labelledby="IDREF"', + value: '', description: ( <> Defines the accessible name for the region element. @@ -492,11 +495,13 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( attribute: 'accordion.panel.paddingBlock', type: 'MQ', default: 'spaceInset030', + description: '', }, { attribute: 'accordion.panel.paddingInline', type: 'MQ', default: 'spaceInset030', + description: '', }, ], }, @@ -509,6 +514,7 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( name: 'children', type: "Exclude", required: true, + description: '', }, { name: 'defaultExpanded', diff --git a/site/templates/template-sections/accessibility-section.tsx b/site/templates/template-sections/accessibility-section.tsx index 9b8314da43..325ded9f26 100644 --- a/site/templates/template-sections/accessibility-section.tsx +++ b/site/templates/template-sections/accessibility-section.tsx @@ -21,7 +21,7 @@ export interface AccessibilityTablesProps { aria?: A11ySubSection<{ element: string; attribute: string | string[]; - value?: string | string[]; + value: string | string[]; description: string | JSX.Element; userSupplied?: true; }>; From 65cab9c8c08b482e5411f9547701edf94598b229 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Tue, 19 Jul 2022 15:07:19 +0530 Subject: [PATCH 11/13] docs(PPDSC-2268): seo section bottom has extra space fix --- site/components/section-introduction/section-introduction.tsx | 3 ++- site/components/section-introduction/types.ts | 1 + site/templates/template-sections/common-section.tsx | 3 +++ site/templates/template-sections/seo-section.tsx | 1 + 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/site/components/section-introduction/section-introduction.tsx b/site/components/section-introduction/section-introduction.tsx index a2748ee534..e8d2916ca6 100644 --- a/site/components/section-introduction/section-introduction.tsx +++ b/site/components/section-introduction/section-introduction.tsx @@ -9,6 +9,7 @@ export const SectionIntroduction: React.FC = ({ image, children, subHeadingSpaceStack = {xs: 'space060', md: 'space060', lg: 'space070'}, + lastItem, }) => ( <> @@ -65,7 +66,7 @@ export const SectionIntroduction: React.FC = ({ )} {children && ( - + ; + lastItem?: boolean; } diff --git a/site/templates/template-sections/common-section.tsx b/site/templates/template-sections/common-section.tsx index 55c6770d42..f4a9e0a050 100644 --- a/site/templates/template-sections/common-section.tsx +++ b/site/templates/template-sections/common-section.tsx @@ -13,6 +13,7 @@ export type CommonSectionProps = { id: string; toc?: string; hideSeparator?: boolean; + lastItem?: boolean; media?: ImageProps | JSX.Element | React.ComponentType; }; @@ -24,6 +25,7 @@ export const CommonSection: React.FC = ({ toc, media, hideSeparator, + lastItem, }) => ( <> @@ -35,6 +37,7 @@ export const CommonSection: React.FC = ({ lg: 'space100', }} title={title} + lastItem={lastItem} > {introduction} diff --git a/site/templates/template-sections/seo-section.tsx b/site/templates/template-sections/seo-section.tsx index 2bd5e19b49..2b2369edc9 100644 --- a/site/templates/template-sections/seo-section.tsx +++ b/site/templates/template-sections/seo-section.tsx @@ -15,5 +15,6 @@ export const SEOSection: React.FC = ({ id="seo" toc="SEO" introduction={introduction} + lastItem /> ); From 5d5479bceaf94a6d90d6b4a75b803bd38df2fd00 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Tue, 19 Jul 2022 15:16:38 +0530 Subject: [PATCH 12/13] docs(PPDSC-2268): seo section unit test fix --- .../__snapshots__/seo-section.test.tsx.snap | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap b/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap index c104bb6251..3463201028 100644 --- a/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap +++ b/site/templates/template-sections/__tests__/__snapshots__/seo-section.test.tsx.snap @@ -103,18 +103,6 @@ exports[`SEOSection renders section as expected 1`] = ` fill: #0A0A0A; } -@media screen and (max-width: 1023px) { - .emotion-6 { - margin-bottom: 48px; - } -} - -@media screen and (min-width: 1024px) { - .emotion-6 { - margin-bottom: 80px; - } -} - .emotion-7 { margin: 0; color: #2E2E2E; From 0b50e69ce8e6b3d0417f4e220b7487a35bc9cee1 Mon Sep 17 00:00:00 2001 From: Srinivasan-Ramasamy Date: Thu, 21 Jul 2022 14:07:02 +0530 Subject: [PATCH 13/13] docs(PPDSC-2268): code review fixes --- site/pages/components/accordion.tsx | 32 ++++++++++++++--------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx index fef3c06872..643a4e82c0 100644 --- a/site/pages/components/accordion.tsx +++ b/site/pages/components/accordion.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Block, UnorderedList} from 'newskit'; +import {UnorderedList} from 'newskit'; import {IconFilledCircle} from '../../components/icons'; import {getIllustrationComponent} from '../../components/illustrations/illustration-loader'; import {UsageKind} from '../../components/usage-card'; @@ -134,22 +134,20 @@ const AccordionComponent = (layoutProps: LayoutProps) => ( description: ( <> The Accordion has two states: -
-
- - - <>collapsed with the panel closed - <>expanded with the panel open - - + + <>collapsed with the panel closed + <>expanded with the panel open + The default state is collapsed. The chevron icon points down when the Accordion panel is collapsed and points up when the Accordion panel is expanded.