Merge pull request #422 from WestpacGEL/fix/design-system-layout-fixes

Fix/design system layout fixes
WestpacGEL · Nov 30, 2023 · 37b24aa · 37b24aa
2 parents e544b28 + 4df9c39
commit 37b24aa
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 21 deletions.
diff --git a/...[...component]/components/content-tabs/components/code-content/code-content.component.tsx b/...[...component]/components/content-tabs/components/code-content/code-content.component.tsx
@@ -89,9 +89,11 @@ export function CodeContent({ content = [], westpacUIInfo, componentProps, subCo
         </Container>
       </section>
       {componentProps && (
-        <section className="bg-white py-7 sm:pb-10 sm:pt-15">
+        <section className="border-t border-t-border bg-white py-7 sm:pb-10 sm:pt-15">
           <Container>
-            <Heading level={2}>Props</Heading>
+            <Heading level={2} className="!mb-4 sm:!mb-7">
+              Props
+            </Heading>
             <div className="flex flex-col gap-6">
               <ComponentPropsTable componentProps={componentProps} />
               {subComponentProps?.map(subComponentProps => (

diff --git a/...app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx b/...app/design-system/[...component]/components/content-tabs/components/document-renderer.tsx
@@ -8,7 +8,7 @@ export const DOCUMENT_RENDERERS: Required<DocumentRendererProps>['renderers'] =
   block: {
     divider: Divider,
     paragraph: props => <Paragraph {...props} className="w-full sm:w-9/12" />,
-    code: props => <Code className="my-4" {...props} showCode />,
+    code: props => <Code className="mb-5 mt-1 sm:mb-8 sm:mt-2" {...props} showCode />,
     heading: Heading,
     list: props => <List {...props} className="sm:w-9/12" />,
     layout: Layout,

diff --git a/...m/[...component]/components/content-tabs/components/tabs/components/tab/tab.component.tsx b/...m/[...component]/components/content-tabs/components/tabs/components/tab/tab.component.tsx
@@ -1,16 +1,17 @@
 import { useRef } from 'react';
-import { AriaTabProps, useTab } from 'react-aria';
+import { AriaTabProps, mergeProps, useFocusRing, useTab } from 'react-aria';
 import { Node, TabListState } from 'react-stately';
 
 import { styles } from './tab.styles';
 
 export function Tab({ item, state }: { item: Node<AriaTabProps>; state: TabListState<AriaTabProps> }) {
   const { key, rendered } = item;
   const ref = useRef(null);
+  const { focusProps, isFocusVisible } = useFocusRing();
   const { tabProps } = useTab({ key }, state, ref);
   const selected = key === state.selectedKey;
   return (
-    <div {...tabProps} ref={ref} className={styles({ selected })}>
+    <div {...mergeProps(tabProps, focusProps)} ref={ref} className={styles({ selected, isFocusVisible })}>
       {rendered}
     </div>
   );

diff --git a/...ystem/[...component]/components/content-tabs/components/tabs/components/tab/tab.styles.ts b/...ystem/[...component]/components/content-tabs/components/tabs/components/tab/tab.styles.ts
@@ -1,10 +1,13 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'relative flex h-9 flex-1 cursor-pointer items-center justify-center border-r border-r-border font-semibold text-muted after:absolute after:inset-x-0 after:bottom-0 after:h-0 after:border-b-[3px] after:border-[transparent] last:border-r-0 sm:h-11 sm:grow-0 sm:px-10 sm:last:border-r',
+  base: 'relative flex h-9 flex-1 cursor-pointer items-center justify-center border-r border-r-border font-semibold text-muted after:absolute after:inset-x-0 after:bottom-0 after:h-0 after:border-b-[3px] after:border-[transparent] last:border-r-0 focus-visible:outline-none sm:h-11 sm:grow-0 sm:px-10 sm:last:border-r',
   variants: {
     selected: {
       true: 'text-text after:border-primary',
     },
+    isFocusVisible: {
+      true: '!outline-offset-0 focus-outline focus:focus-outline focus-visible:focus-outline',
+    },
   },
 });
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 transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
+      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',
       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',
@@ -17,7 +17,7 @@ export const styles = tv(
         },
         false: {
           base: '',
-          title: 'md:typography-brand-2 md:px-2 md:pb-[1.75rem] md:pt-5 md:leading-none lg:ml-2',
+          title: 'md:typography-brand-2 md:px-2 md:pb-[1.6875rem] md:pt-5 md:leading-none lg:ml-2',
         },
       },
       brand: {

diff --git a/apps/site/src/app/design-system/components/hero/hero.component.tsx b/apps/site/src/app/design-system/components/hero/hero.component.tsx
@@ -19,37 +19,41 @@ export function Hero() {
       <BackgroundImage brand={brand} type="hero" />
       <Header brand={brand} />
       <Container className="relative z-10">
-        <Grid className="mb-4 xsl:mb-10">
+        <Grid className="mb-4 !gap-y-0 xsl:mb-10">
           <Item span={{ initial: 10, xsl: 12, sm: 10 }} start={{ initial: 2, xsl: 1, sm: 2 }} className="mb-4 xsl:mb-6">
             <h2 className={heading()}>
               Deliver quality user interfaces that scale – <em>fast!</em>
             </h2>
           </Item>
           <Item span={10} start={2}>
-            <p className="typography-body-8">Simplify your projects with reusable components and patterns</p>
+            <p className="typography-body-8 mb-2">Simplify your projects with reusable components and patterns</p>
           </Item>
         </Grid>
-        <Grid tag="ul" className="typography-body-8 gap-x-0 gap-y-4 xsl:gap-x-5">
+        <Grid tag="ul" className="typography-body-8 mb-[1rem] gap-x-0 gap-y-4 xsl:gap-x-5 sm:!gap-5">
           <Item tag="li" span={{ initial: 12, xsl: 4 }} className=" flex flex-col items-center ">
-            <div className="mb-3 xsl:mb-4">
+            <div className="mb-3">
               <StopwatchPictogram mode="light" className="hidden sm:inline-block" />
               <StopwatchPictogram mode="duo" className="inline-block sm:hidden" />
             </div>
-            <div>Go to market faster leveraging tools to get you up and running instantly</div>
+            <div className="max-w-[18.125rem]">
+              Go to market faster leveraging tools to get you up and running instantly
+            </div>
           </Item>
           <Item tag="li" span={{ initial: 12, xsl: 4 }} className=" flex flex-col items-center ">
-            <div className="mb-3 xsl:mb-4">
+            <div className="mb-3">
               <TruckPictogram mode="light" className="hidden sm:inline-block" />
               <TruckPictogram mode="duo" className="inline-block sm:hidden" />
             </div>
-            <div>Design, build and ship consistent brand experiences</div>
+            <div className="max-w-[18.125rem]">Design, build and ship consistent brand experiences</div>
           </Item>
           <Item tag="li" span={{ initial: 12, xsl: 4 }} className=" flex flex-col items-center ">
-            <div className="mb-3 xsl:mb-4">
+            <div className="mb-3">
               <AccessibilityPictogram mode="light" className="hidden sm:inline-block" />
-              <TruckPictogram mode="duo" className="inline-block sm:hidden" />
+              <AccessibilityPictogram mode="duo" className="inline-block sm:hidden" />
+            </div>
+            <div className="max-w-[18.125rem]">
+              Create more accessible solutions that are inclusive of all customers
             </div>
-            <div>Create more accessible solutions that are inclusive of all customers</div>
           </Item>
         </Grid>
       </Container>

diff --git a/apps/site/src/app/design-system/components/hero/hero.styles.ts b/apps/site/src/app/design-system/components/hero/hero.styles.ts
@@ -4,7 +4,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
   slots: {
     base: 'relative overflow-hidden bg-background pb-7 text-center antialiased sm:pb-11 sm:text-white',
-    heading: 'typography-brand-4 mt-15 sm:typography-brand-1 sm:mt-7',
+    heading: 'typography-brand-4 mt-15 !leading-none sm:typography-brand-1 sm:mt-7',
   },
   variants: {
     brand: {

diff --git a/apps/site/src/components/document-renderer/heading/heading.style.ts b/apps/site/src/components/document-renderer/heading/heading.style.ts
@@ -10,8 +10,8 @@ export const styles = tv({
     },
     level: {
       1: 'typography-body-5 mb-3',
-      2: 'typography-body-7 mb-7 sm:typography-body-6',
-      3: 'typography-body-8 mb-2',
+      2: 'typography-body-7 mb-2 sm:typography-body-6 sm:mb-3',
+      3: 'typography-body-8 my-2 first:mt-0',
       4: 'typography-body-9 mb-2',
       5: 'typography-body-10 mb-2',
       6: 'typography-body-10 mb-2',