docs(PPDSC-2252): Misc updates on the site (#317)

* docs(PPDSC-2252): Misc updates on the site changes.
newscorp-ghfb · Aug 3, 2022 · 677174f · 677174f
1 parent fbac629
commit 677174f
Show file tree

Hide file tree

Showing 59 changed files with 289 additions and 1,459 deletions.
diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
diff --git a/site/components/table/column-renderer.tsx b/site/components/table/column-renderer.tsx
@@ -40,6 +40,7 @@ const renderIcon = (value?: TableRowValue) => {
 const remapComponents: {[id: string]: string} = {
   'Icon Button': 'Button',
   Icon: 'Icons',
+  'Text Block (input)': 'Text Block',
 };
 
 const renderSingleOrMultiple = (
@@ -149,15 +150,26 @@ export const renderCols = (
 
             if (!route) return v;
 
-            return (
+            const getLink = (value: string) => (
               <Link
                 type="standalone"
                 overrides={{typographyPreset: 'utilityButton020'}}
                 href={route.id}
               >
-                {v}
+                {value}
               </Link>
             );
+
+            if (v.includes('(')) {
+              const strArr = v.split('(');
+              return (
+                <>
+                  {getLink(strArr[0])}
+                  {` (${strArr[1]}`}
+                </>
+              );
+            }
+            return getLink(v);
           }, cellValue as string | string[]);
         break;
       }

diff --git a/site/pages/components/accordion.tsx b/site/pages/components/accordion.tsx
@@ -553,7 +553,7 @@ const AccordionComponent = (layoutProps: LayoutProps) => (
       uiKit: true,
     }}
     related={{
-      related: ['Tabs', 'Link', 'Menu'],
+      related: ['Link', 'Menu', 'Scroll', 'Tabs', 'Tags', 'Title Bar'],
     }}
   />
 );

diff --git a/site/pages/components/banner.tsx b/site/pages/components/banner.tsx
@@ -626,8 +626,13 @@ const BannerComponent = (layoutProps: LayoutProps) => (
       uiKit: true,
     }}
     related={{
-      introduction: 'Componenets related to Banner',
-      related: ['Drawer', 'Toast', 'Modal'],
+      related: [
+        'Flag',
+        'Progress Indicator',
+        'Toast',
+        'Inline Message',
+        'Tooltip',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/block.tsx b/site/pages/components/block.tsx
@@ -274,8 +274,19 @@ const BlockComponent = (layoutProps: LayoutProps) => (
       uiKit: true,
     }}
     related={{
-      introduction: 'Componenets related to Block',
-      related: ['Grid', 'Stack', 'Text Block'],
+      related: [
+        'Card',
+        'Divider',
+        'Drawer',
+        'Fieldset',
+        'Grid',
+        'Grid Layout',
+        'Modal',
+        'Popover',
+        'Stack',
+        'Structured List',
+        'Visibility',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/button.tsx b/site/pages/components/button.tsx
@@ -622,8 +622,14 @@ const ButtonComponent = (layoutProps: LayoutProps) => (
       themes: true,
     }}
     related={{
-      introduction: '',
-      related: ['Tag', 'Link', 'Share Bar'],
+      related: [
+        'Checkbox',
+        'Form',
+        'Radio Button',
+        'Select',
+        'Slider',
+        'Text Field',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/checkbox.tsx b/site/pages/components/checkbox.tsx
@@ -894,8 +894,14 @@ const CheckboxComponent = (layoutProps: LayoutProps) => (
       themes: true,
     }}
     related={{
-      introduction: '',
-      related: ['Form', 'Radio Button'],
+      related: [
+        'Button',
+        'Form',
+        'Radio Button',
+        'Select',
+        'Slider',
+        'Text Field',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/divider.tsx b/site/pages/components/divider.tsx
@@ -184,13 +184,19 @@ const DividerComponent = (layoutProps: LayoutProps) => (
       themes: true,
     }}
     related={{
-      introduction: '',
-      related: ['Block', 'Stack'],
-    }}
-    featureCard={{
-      title: 'Need Help?',
-      description: 'Cant find what you are looking for?',
-      href: '/about/contact-us/',
+      related: [
+        'Block',
+        'Card',
+        'Drawer',
+        'Fieldset',
+        'Grid',
+        'Grid Layout',
+        'Modal',
+        'Popover',
+        'Stack',
+        'Structured List',
+        'Visibility',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/drawer.tsx b/site/pages/components/drawer.tsx
@@ -634,10 +634,6 @@ const DrawerComponent = (layoutProps: LayoutProps) => (
         },
       ],
     }}
-    related={{
-      introduction: '',
-      related: ['Modal', 'Menu'],
-    }}
     compliance={{
       states: true,
       variations: true,
@@ -651,6 +647,21 @@ const DrawerComponent = (layoutProps: LayoutProps) => (
       props: true,
       uiKit: true,
     }}
+    related={{
+      related: [
+        'Block',
+        'Card',
+        'Divider',
+        'Fieldset',
+        'Grid',
+        'Grid Layout',
+        'Modal',
+        'Popover',
+        'Stack',
+        'Structured List',
+        'Visibility',
+      ],
+    }}
   />
 );
 

diff --git a/site/pages/components/fieldset.tsx b/site/pages/components/fieldset.tsx
@@ -283,8 +283,19 @@ const FieldsetComponent = (layoutProps: LayoutProps) => (
       themes: true,
     }}
     related={{
-      introduction: '',
-      related: ['Form', 'Checkbox', 'Radio Button'],
+      related: [
+        'Block',
+        'Card',
+        'Divider',
+        'Drawer',
+        'Grid',
+        'Grid Layout',
+        'Modal',
+        'Popover',
+        'Stack',
+        'Structured List',
+        'Visibility',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/inline-message.tsx b/site/pages/components/inline-message.tsx
@@ -384,8 +384,7 @@ const InlineMessageComponent = (layoutProps: LayoutProps) => (
       uiKit: true,
     }}
     related={{
-      introduction: 'Components related to inline message',
-      related: ['Toast', 'Modal', 'Drawer'],
+      related: ['Banner', 'Flag', 'Progress Indicator', 'Toast', 'Tooltip'],
     }}
   />
 );

diff --git a/site/pages/components/menu.tsx b/site/pages/components/menu.tsx
@@ -817,8 +817,7 @@ const MenuComponent = (layoutProps: LayoutProps) => (
       uiKit: true,
     }}
     related={{
-      introduction: 'Componenets related to Menu',
-      related: ['Tabs', 'Link', 'Divider'],
+      related: ['Accordion', 'Link', 'Scroll', 'Tabs', 'Tags', 'Title Bar'],
     }}
   />
 );

diff --git a/site/pages/components/modal.tsx b/site/pages/components/modal.tsx
@@ -667,8 +667,19 @@ const ModalComponent = (layoutProps: LayoutProps) => (
       uiKit: true,
     }}
     related={{
-      introduction: '',
-      related: ['Drawer', 'Menu'],
+      related: [
+        'Block',
+        'Card',
+        'Divider',
+        'Drawer',
+        'Fieldset',
+        'Grid',
+        'Grid Layout',
+        'Popover',
+        'Stack',
+        'Structured List',
+        'Visibility',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/popover.tsx b/site/pages/components/popover.tsx
@@ -829,7 +829,19 @@ const PopoverComponent = (layoutProps: LayoutProps) => (
       uiKit: true,
     }}
     related={{
-      related: ['Tooltip', 'Modal'],
+      related: [
+        'Block',
+        'Card',
+        'Divider',
+        'Drawer',
+        'Fieldset',
+        'Grid',
+        'Grid Layout',
+        'Modal',
+        'Stack',
+        'Structured List',
+        'Visibility',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/radio-button.tsx b/site/pages/components/radio-button.tsx
@@ -880,8 +880,7 @@ const RadioButtonComponent = (layoutProps: LayoutProps) => (
       themes: true,
     }}
     related={{
-      introduction: '',
-      related: ['Form', 'Checkbox'],
+      related: ['Button', 'Checkbox', 'Form', 'Select', 'Slider', 'Text Field'],
     }}
   />
 );

diff --git a/site/pages/components/select.tsx b/site/pages/components/select.tsx
@@ -310,7 +310,7 @@ const SelectComponent = (layoutProps: LayoutProps) => (
       rows: [
         {
           name: 'Input Container',
-          description: 'Interactable input area',
+          description: 'Interactive input area',
           component: ['HTML Input', 'Block'],
           optional: undefined,
         },
@@ -323,9 +323,19 @@ const SelectComponent = (layoutProps: LayoutProps) => (
         },
         {
           name: 'Input & Placeholder Text',
-          description:
-            'Input text - a value the user has entered into a input. Placeholder text - a short hint that describes the expected value of an input',
-          component: 'Text block',
+          description: (
+            <>
+              Input text - a value the user has entered into an input.
+              <br />
+              <br />
+              Placeholder text - a short hint that describes the expected value
+              of an input
+            </>
+          ),
+          component: [
+            'Text Block (input)',
+            'HTML attribute (placeholder text)',
+          ],
           optional: undefined,
         },
         {
@@ -885,8 +895,14 @@ const SelectComponent = (layoutProps: LayoutProps) => (
       themes: true,
     }}
     related={{
-      introduction: '',
-      related: ['Form'],
+      related: [
+        'Button',
+        'Checkbox',
+        'Form',
+        'Radio Button',
+        'Slider',
+        'Text Field',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/share-bar.tsx b/site/pages/components/share-bar.tsx
@@ -317,8 +317,15 @@ const ShareBarComponent = (layoutProps: LayoutProps) => (
       themes: true,
     }}
     related={{
-      introduction: '',
-      related: ['Button', 'Icon Button'],
+      related: [
+        'Button',
+        'Checkbox',
+        'Form',
+        'Radio Button',
+        'Select',
+        'Slider',
+        'Text Field',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/structured-list.tsx b/site/pages/components/structured-list.tsx
@@ -553,8 +553,19 @@ const StructuredListComponent = (layoutProps: LayoutProps) => (
       themes: true,
     }}
     related={{
-      introduction: '',
-      related: ['Grid', 'Block'],
+      related: [
+        'Block',
+        'Card',
+        'Divider',
+        'Drawer',
+        'Fieldset',
+        'Grid',
+        'Grid Layout',
+        'Modal',
+        'Popover',
+        'Stack',
+        'Visibility',
+      ],
     }}
   />
 );

diff --git a/site/pages/components/tabs.tsx b/site/pages/components/tabs.tsx
@@ -999,10 +999,6 @@ const TabsComponent = (layoutProps: LayoutProps) => (
         },
       ],
     }}
-    related={{
-      introduction: '',
-      related: ['Scroll'],
-    }}
     accessibility={{
       introduction: (
         <>
@@ -1028,8 +1024,6 @@ const TabsComponent = (layoutProps: LayoutProps) => (
           },
         ],
       },
-      infoNoticeFocus: 'Scroll controls are not focussable.',
-
       interaction: {
         title: 'Keyboard Interactions',
         tableRows: [
@@ -1073,7 +1067,6 @@ const TabsComponent = (layoutProps: LayoutProps) => (
           },
         ],
       },
-
       aria: {
         title: 'WAI-ARIA',
         tableRows: [
@@ -1134,6 +1127,9 @@ const TabsComponent = (layoutProps: LayoutProps) => (
       title: 'SEO Considerations',
       introduction: 'Ensure icons have Alt Text applied.',
     }}
+    related={{
+      related: ['Accordion', 'Link', 'Scroll', 'Menu', 'Tags', 'Title Bar'],
+    }}
   />
 );