Merge pull request #421 from WestpacGEL/develop

Develop to main

apps/site/keystatic.config.ts

@@ -163,17 +163,26 @@ export default config({
           links: true,
           label: 'Accessibility Demo',
         }),
-        relatedInformation: fields.array(
-          fields.relationship({
-            label: 'Related components',
-            description: 'A list of related components',
-            collection: 'designSystem',
+        relatedComponents: fields.array(
+          fields.object({
+            title: fields.text({
+              label: 'Related Components',
+            }),
+            slug: fields.url({
+              label: 'Slug',
+            }),
           }),
           {
             label: 'Related Components',
-            itemLabel: props => props.value || '',
+            itemLabel: props => props.fields.title.value || '',
           },
         ),
+        relatedArticles: fields.document({
+          formatting: true,
+          dividers: true,
+          links: true,
+          label: 'Related Articles',
+        }),
         code: fields.document({
           formatting: true,
           dividers: true,

apps/site/src/app/articles/[article]/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
+    // eslint-disable-next-line no-console
     console.error(error);
   }, [error]);
 

apps/site/src/app/design-system/[...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 => (

apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx

@@ -8,6 +8,7 @@ import { Colors } from '@/components/component-blocks/colors/colors.component';
 import { Icons } from '@/components/component-blocks/icons/icons.component';
 import { Logos } from '@/components/component-blocks/logos/logos.component';
 import { Pictograms } from '@/components/component-blocks/pictograms/pictograms.component';
+import { Symbols } from '@/components/component-blocks/symbols/symbols.component';
 import { Section } from '@/components/content-blocks/section';
 import { Code, Heading } from '@/components/document-renderer';
 import { RelatedInfo } from '@/components/related-info';
@@ -17,7 +18,7 @@ import { DOCUMENT_RENDERERS } from '../document-renderer';
 
 import { type DesignContentProps } from '.';
 
-export function DesignContent({ designSections, description, relatedComponents }: DesignContentProps) {
+export function DesignContent({ designSections, description, relatedComponents, relatedArticles }: DesignContentProps) {
   const sectionNames = useMemo(() => {
     return designSections?.filter(({ noTitle }) => !noTitle).map(({ title }) => ({ title })) || [];
   }, [designSections]);
@@ -44,14 +45,17 @@ export function DesignContent({ designSections, description, relatedComponents }
                   icons: () => <Icons />,
                   logos: () => <Logos />,
                   pictograms: () => <Pictograms />,
+                  symbols: () => <Symbols />,
                   colors: props => <Colors palette={props.palette} />,
                 }}
               />
             </Container>
           </Section>
         );
       })}
-      {!!relatedComponents?.length && <RelatedInfo relatedComponents={relatedComponents} />}
+      {(!!relatedComponents?.length || !!relatedArticles?.length) && (
+        <RelatedInfo relatedComponents={relatedComponents} relatedArticles={relatedArticles} />
+      )}
     </>
   );
 }

apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.types.tsx

@@ -7,5 +7,6 @@ export type DesignSectionProps = { content: DocumentElement[]; noTitle?: boolean
 export type DesignContentProps = {
   description?: string;
   designSections?: DesignSectionProps[];
+  relatedArticles?: RelatedInfoProps['relatedArticles'];
   relatedComponents?: RelatedInfoProps['relatedComponents'];
 };

apps/site/src/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,

apps/site/src/app/design-system/[...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>
   );

apps/site/src/app/design-system/[...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',
+    },
   },
 });

apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.component.tsx

@@ -13,6 +13,7 @@ const TabPanelByKey = ({ tabKey, content }: { content: ContentTabsProps; tabKey:
         description={content.description}
         designSections={content.designSections}
         relatedComponents={content.relatedComponents}
+        relatedArticles={content.relatedArticles}
       />
     );
   }

apps/site/src/app/design-system/[...component]/components/content-tabs/content-tabs.types.ts

@@ -1,6 +1,7 @@
 import { DocumentElement } from '@keystatic/core';
 import { ComponentProps } from '@westpac/ui';
 
+import { RelatedInfoLinks } from '@/components/related-info/related-info.types';
 import { WestpacUIInfo } from '@/types/westpac-ui-info.types';
 
 import { AccessibilitySectionProps } from './components/accessibility-content/accessibility-content.types';
@@ -13,7 +14,8 @@ export type ContentTabsProps = {
   componentProps?: ComponentProps;
   description?: string;
   designSections?: DesignSectionProps[];
-  relatedComponents?: string[];
+  relatedArticles?: DocumentElement[];
+  relatedComponents?: RelatedInfoLinks[];
   subComponentProps: ComponentProps[];
   westpacUIInfo: WestpacUIInfo;
 };

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: {

apps/site/src/app/design-system/[...component]/page.tsx

@@ -3,6 +3,7 @@ import json from '@westpac/ui/component-type.json';
 import { Metadata } from 'next';
 
 import { reader } from '@/app/reader';
+import { RelatedInfoLinks } from '@/components/related-info/related-info.types';
 
 import { ContentTabs } from './components';
 import { AccessibilitySectionProps } from './components/content-tabs/components/accessibility-content/accessibility-content.types';
@@ -48,12 +49,12 @@ export default async function ComponentPage({ params }: { params: { component: s
     reader.collections.designSystem.readOrThrow(component.join('/')),
     reader.singletons.westpacUIInfo.readOrThrow(),
   ]);
-  const componentName = component[1]
-    .split('-')
+  const componentName = component?.[1]
+    ?.split('-')
     .map(name => `${name[0].toUpperCase()}${name.slice(1)}`)
     .join('');
 
-  const [designSections, accessibilitySections, accessibilityDemo, code] = await Promise.all([
+  const [designSections, accessibilitySections, accessibilityDemo, code, relatedArticles] = await Promise.all([
     Promise.all(
       content.design.map(section => {
         return new Promise<DesignSectionProps>((resolve, reject) => {
@@ -99,10 +100,12 @@ export default async function ComponentPage({ params }: { params: { component: s
     ),
     content?.accessibilityDemo(),
     content?.code(),
+    content?.relatedArticles(),
   ]);
 
   const codeIsEmpty = code[0].children.length <= 1 && !code[0].children[0].text;
   const accessibilityIsEmpty = accessibilityDemo[0].children.length <= 1 && !accessibilityDemo[0].children[0].text;
+  const relatedArticlesIsEmpty = relatedArticles[0].children.length <= 1 && !relatedArticles[0].children[0].text;
 
   const componentProps: ComponentProps | undefined = (json as any)[componentName];
   const subComponentProps = Object.entries(json).reduce((acc, [key, value]: [string, any]) => {
@@ -121,7 +124,8 @@ export default async function ComponentPage({ params }: { params: { component: s
         code: codeIsEmpty ? undefined : code,
         description: content.description,
         designSections,
-        relatedComponents: content.relatedInformation.filter(value => !!value) as string[],
+        relatedArticles: relatedArticlesIsEmpty ? undefined : relatedArticles,
+        relatedComponents: content.relatedComponents.filter(value => !!value) as RelatedInfoLinks[],
         componentProps,
         subComponentProps,
       }}

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>

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: {

apps/site/src/app/design-system/error.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
+    // eslint-disable-next-line no-console
     console.error(error);
   }, [error]);
 

apps/site/src/components/code/code.inject-components.ts

@@ -45,6 +45,12 @@ export {
 } from '@westpac/ui';
 
 export {
+  NewWindowIcon,
+  DropDownIcon,
+  PrintIcon,
+  PlayIcon,
+  PauseIcon,
+  AddCircleIcon,
   AddIcon,
   TickCircleIcon,
   ArrowRightIcon,
@@ -80,6 +86,9 @@ export {
   GiftIcon,
   WarningIcon,
   SuccessIcon,
+  ArrowLeftIcon,
+  GenericFileIcon,
+  GithubIcon,
 } from '@westpac/ui/icon';
 
 export { GiftPictogram } from '@westpac/ui/pictogram';

apps/site/src/components/code/components/live-code/live-code.component.tsx

@@ -3,6 +3,7 @@ import copy from 'clipboard-copy';
 import { themes } from 'prism-react-renderer';
 import { KeyboardEvent, useCallback, useContext, useId, useRef, useState } from 'react';
 import { LiveContext, LiveEditor, LivePreview } from 'react-live';
+import { VariantProps } from 'tailwind-variants';
 
 import { styles as liveCodeStyles } from './live-code.styles';
 import { LiveCodeProps } from './live-code.types';
@@ -15,7 +16,10 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }:
   const [localCopy, setLocalCopy] = useState<string>(live.code);
   const [isCodeVisible, toggleIsCodeVisible] = useState(showCode);
 
-  const styles = liveCodeStyles({ isCodeVisible });
+  const styles = liveCodeStyles({
+    isCodeVisible,
+    language: live.language as VariantProps<typeof liveCodeStyles>['language'],
+  });
 
   const copyLiveCode = useCallback(() => {
     copy(localCopy);
@@ -56,7 +60,7 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }:
         {enableLiveCode && (
           <div className={styles.buttonWrapper({})}>
             <button
-              className="typography-body-10 flex items-center gap-1 border-l border-l-border p-3 transition-opacity hover:opacity-100"
+              className="typography-body-10 border-l-border flex items-center gap-1 border-l p-3 transition-opacity hover:opacity-100"
               ref={liveCodeToggleButton}
               onClick={() => toggleIsCodeVisible(state => !state)}
               aria-controls={codeId}

apps/site/src/components/code/components/live-code/live-code.styles.ts

@@ -2,16 +2,22 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'max-w-5xl overflow-hidden bg-white p-6 pb-0',
-    displayWrapper: 'relative -mx-6 -mt-6 border-muted-50 p-6',
-    error: 'flex gap-2 rounded-md bg-danger-10 p-2 text-danger-90',
+    base: 'max-w-5xl bg-white p-6 pb-0',
+    displayWrapper: 'border-muted-50 relative -mx-6 -mt-6 p-6',
+    error: 'bg-danger-10 text-danger-90 flex gap-2 rounded-md p-2',
     buttonWrapper: '-mx-6 -mb-6 flex items-center justify-end ',
-    codeWrapper: 'relative -mx-6 border-t border-muted-50',
+    codeWrapper: 'border-muted-50 relative -mx-6 border-t',
     arrowIcon: 'transition-transform',
     copyCodeButton:
       'typography-body-10 absolute right-0 top-0 p-1 pr-2 text-white opacity-50 transition-opacity hover:opacity-100',
   },
   variants: {
+    language: {
+      html: {
+        base: 'bg-transparent',
+        displayWrapper: 'p-0',
+      },
+    },
     isCodeVisible: {
       true: {
         codeWrapper: 'block',

apps/site/src/components/component-blocks/foundation-blocks.tsx

@@ -2,10 +2,12 @@ import { colors } from './colors/colors.preview';
 import { icons } from './icons/icons.preview';
 import { logos } from './logos/logos.preview';
 import { pictograms } from './pictograms/pictograms.preview';
+import { symbols } from './symbols/symbols.preview';
 
 export const foundationBlocks = {
   colors,
   icons,
   logos,
   pictograms,
+  symbols,
 };