Merge pull request #480 from WestpacGEL/471-design-system-docs-collap…

…sed-heading-needs-drop-shadow fixes #471
WestpacGEL · Dec 7, 2023 · e40cd4e · e40cd4e · vercel · Dec 7, 2023
2 parents faf27ac + a39d147
commit e40cd4e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/apps/site/src/app/design-system/[...component]/components/header/header.styles.ts b/apps/site/src/app/design-system/[...component]/components/header/header.styles.ts
@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'sticky top-0 z-50 flex w-full items-center gap-2 bg-hero px-2 py-3.5 antialiased transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
+      base: 'sticky top-0 z-10 flex w-full items-center gap-2 bg-hero px-2 py-3.5 antialiased transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
       gridButton: 'flex h-6 items-stretch gap-[0.125rem] p-1',
       gridButtonWrapper: 'fixed right-2 top-2 hidden items-center text-white sm:flex',
       hamburgerButton: 'fixed left-0 top-0 block h-4 w-4 translate-y-[-0.125rem] px-2 py-3.5 sm:left-2 lg:hidden',
@@ -12,7 +12,7 @@ export const styles = tv(
     variants: {
       fixed: {
         true: {
-          base: 'items-center',
+          base: 'items-center shadow-[0_2px_5px_rgba(0,0,0,0.3)]',
           title: '',
         },
         false: {

diff --git a/apps/site/src/content/design-system/components/compacta/design/default/content.mdoc b/apps/site/src/content/design-system/components/compacta/design/default/content.mdoc
@@ -13,35 +13,41 @@ Below is an example of how a Compacta may be used with fields and inputs. Any fo
       {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => (
         <Form>
           <Form.Group>
-            <Form.Label htmlFor={`primary-${id}`}>Primary</Form.Label>
-            <Form.Hint>Primary title text</Form.Hint>
+            <Form.Label htmlFor={`primary-default-${id}`}>Primary</Form.Label>
+            <Form.Hint id={`primary-default-hint-${id}`}>Primary title text</Form.Hint>
             <Input
-              name={`primary-${id}`}
-              value={inputs[`primary-${id}` as keyof typeof inputs] || ''}
+              id={`primary-default-${id}`}
+              aria-describedby={`primary-default-hint-${id}`}
+              name={`primary-default-${id}`}
+              value={inputs[`primary-default-${id}` as keyof typeof inputs] || ''}
               onChange={e => {
                 handleChange(e);
                 setPrimaryTitle(e.target.value);
               }}
             />
           </Form.Group>
           <Form.Group>
-            <Form.Label htmlFor={`secondary-${id}`}>Secondary</Form.Label>
-            <Form.Hint>Secondary title text</Form.Hint>
+            <Form.Label htmlFor={`secondary-default-${id}`}>Secondary</Form.Label>
+            <Form.Hint id={`secondary-default-hint-${id}`}>Secondary title text</Form.Hint>
             <Input
-              name={`secondary-${id}`}
-              value={inputs[`secondary-${id}` as keyof typeof inputs] || ''}
+              id={`secondary-default-${id}`}
+              aria-describedby={`secondary-default-hint-${id}`}
+              name={`secondary-default-${id}`}
+              value={inputs[`secondary-default-${id}` as keyof typeof inputs] || ''}
               onChange={e => {
                 handleChange(e);
                 setSecondaryTitle(e.target.value);
               }}
             />
           </Form.Group>
           <Form.Group>
-            <Form.Label htmlFor={`tertiary-${id}`}>Tertiary</Form.Label>
-            <Form.Hint>Tertiary title text</Form.Hint>
+            <Form.Label htmlFor={`tertiary-default-${id}`}>Tertiary</Form.Label>
+            <Form.Hint id={`tertiary-default-hint-${id}`}>Tertiary title text</Form.Hint>
             <Input
-              name={`tertiary-${id}`}
-              value={inputs[`tertiary-${id}` as keyof typeof inputs] || ''}
+              id={`tertiary-default-${id}`}
+              aria-describedby={`tertiary-default-hint-${id}`}
+              name={`tertiary-default-${id}`}
+              value={inputs[`tertiary-default-${id}` as keyof typeof inputs] || ''}
               onChange={e => {
                 handleChange(e);
                 setTertiaryTitle(e.target.value);