Develop

.changeset/thirty-bobcats-marry.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+added iconSize prop option for alert component

apps/site/keystatic.config.ts

@@ -138,6 +138,7 @@ export default config({
               },
             }),
             noTitle: fields.checkbox({ label: 'No title' }),
+            noDemo: fields.checkbox({ label: 'No demo button on examples' }),
             content: fields.document({
               formatting: {
                 inlineMarks: {

apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts

@@ -3,12 +3,12 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'xsl:-mx-5 xsl:px-5 relative -mx-4 flex flex-col px-4',
-      label: 'text-text block cursor-default text-left text-sm font-medium',
+      base: 'relative -mx-4 flex flex-col px-4 xsl:-mx-5 xsl:px-5',
+      label: 'block cursor-default text-left text-sm font-medium text-text',
       button:
-        'focus:focus-outline relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden pt-1.5 outline-none',
+        'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden pt-1.5 outline-none focus:focus-outline',
       popover: 'w-full',
-      iconWrapper: 'text-primary pointer-events-none mb-[-0.4rem] flex flex-shrink-0 touch-none items-center',
+      iconWrapper: 'pointer-events-none mb-[-0.4rem] flex flex-shrink-0 touch-none items-center text-primary',
       textWrapper: 'flex flex-shrink items-center overflow-hidden pr-2',
     },
     variants: {

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

@@ -29,7 +29,7 @@ export function DesignContent({
   return (
     <>
       {description && <Intro description={description} sectionNames={sectionNames} />}
-      {designSections?.map(({ title, content, noTitle }) => {
+      {designSections?.map(({ title, content, noTitle, noDemo }) => {
         const id = title.toLowerCase().split(' ').join('-');
         return (
           <Section key={id}>
@@ -41,7 +41,9 @@ export function DesignContent({
                   ...DOCUMENT_RENDERERS,
                   block: {
                     ...DOCUMENT_RENDERERS.block,
-                    code: props => <Code className="mb-5 mt-4" enableLiveCode={false} showResponsiveDemo {...props} />,
+                    code: props => (
+                      <Code className="mb-5 mt-4" enableLiveCode={false} showResponsiveDemo={!noDemo} {...props} />
+                    ),
                   },
                 }}
                 componentBlocks={{

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

@@ -3,7 +3,7 @@ import { DocumentElement } from '@keystatic/core';
 import { RelatedInfoProps } from '@/components/related-info/related-info.types';
 import { ShortCode } from '@/types/short-code.types';
 
-export type DesignSectionProps = { content: DocumentElement[]; noTitle?: boolean; title: string };
+export type DesignSectionProps = { content: DocumentElement[]; noDemo?: boolean; noTitle?: boolean; title: string };
 
 export type DesignContentProps = {
   description?: string;

apps/site/src/app/design-system/[brand]/[...component]/components/header/header.styles.ts

@@ -3,11 +3,11 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'bg-hero md:-top-27 sticky top-0 z-50 flex w-full items-center gap-2 px-2 py-3.5 antialiased transition-colors sm:px-4 md:h-[14.25rem] md:items-end',
-      gridButton: 'focus-visible:focus-outline flex h-6 items-stretch gap-0.5 p-1',
+      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-27 md:h-[14.25rem] md:items-end',
+      gridButton: 'flex h-6 items-stretch gap-0.5 p-1 focus-visible:focus-outline',
       gridButtonWrapper: 'fixed right-2 top-2 hidden items-center text-white sm:flex',
       hamburgerButton:
-        'focus-visible:focus-outline fixed left-0 top-0 block -translate-y-0.5 px-2 py-3.5 focus-visible:!outline-offset-[-2px] sm:left-2 lg:hidden',
+        'fixed left-0 top-0 block -translate-y-0.5 px-2 py-3.5 focus-visible:!outline-offset-[-2px] focus-visible:focus-outline sm:left-2 lg:hidden',
       title: 'typography-brand-7 pl-6 font-normal leading-none text-white focus:outline-none sm:pl-6 lg:pl-0',
     },
     variants: {
@@ -18,7 +18,7 @@ export const styles = tv(
         },
         false: {
           base: '',
-          title: 'md:typography-brand-2 md:pb-4.5 md:px-2 md:pt-5 md:leading-none lg:ml-2',
+          title: 'md:typography-brand-2 md:px-2 md:pb-4.5 md:pt-5 md:leading-none lg:ml-2',
         },
       },
       brand: {

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

@@ -98,6 +98,7 @@ export default async function ComponentPage({
                 title: section.title.name,
                 content: content,
                 noTitle: section.noTitle,
+                noDemo: section.noDemo,
               });
               return {
                 ...section,

apps/site/src/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts

@@ -4,17 +4,17 @@ export const styles = tv(
   {
     slots: {
       base: 'relative flex w-full flex-col',
-      label: 'text-text block cursor-default text-left text-sm font-medium',
+      label: 'block cursor-default text-left text-sm font-medium text-text',
       button:
         'relative flex h-11 cursor-pointer flex-row items-stretch overflow-hidden pl-3 pr-4 shadow-sm outline-none',
       popover: '-ml-2 w-[18.75rem]',
-      iconWrapper: 'border-l-border text-primary flex items-center border-l pl-4',
+      iconWrapper: 'flex items-center border-l border-l-border pl-4 text-primary',
       textWrapper: 'flex flex-1 items-center pr-2',
     },
     variants: {
       isFocusVisible: {
         true: {
-          button: 'focus-outline !outline-offset-[-2px]',
+          button: '!outline-offset-[-2px] focus-outline',
         },
         false: {},
       },

apps/site/src/components/component-blocks/components/availability-content/availability-content.component.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+
+import { styles as AvailabilityContentStyles } from './availability-content.styles';
+import { TableOfAvailability } from './components/table-of-availability';
+
+import { AvailabilityContentProps } from '.';
+
+export function AvailabilityContent({
+  availableGel,
+  availableMesh,
+  availableLegacyWdp,
+  alternativeGel,
+  alternativeMesh,
+  alternativeLegacyWdp,
+}: AvailabilityContentProps) {
+  const styles = AvailabilityContentStyles({});
+  return (
+    <div className={styles.contentContainer({})}>
+      <div className={styles.tableContainer({})}>
+        <TableOfAvailability
+          availableGel={availableGel}
+          availableMesh={availableMesh}
+          availableLegacyWdp={availableLegacyWdp}
+          alternativeGel={alternativeGel}
+          alternativeMesh={alternativeMesh}
+          alternativeLegacyWdp={alternativeLegacyWdp}
+        ></TableOfAvailability>
+      </div>
+    </div>
+  );
+}

apps/site/src/components/component-blocks/components/availability-content/availability-content.preview.tsx

@@ -0,0 +1,43 @@
+import { NotEditable, component, fields } from '@keystatic/core';
+
+const availabilityOptions = [
+  { label: 'Available', value: 'available' },
+  { label: 'Not Available', value: 'unavailable' },
+  { label: 'In Progress', value: 'in-progress' },
+];
+
+export const availabilityContent = component({
+  preview: () => (
+    <NotEditable>
+      <div>Platform Availability</div>
+    </NotEditable>
+  ),
+  label: 'Content Availability',
+  schema: {
+    availableGel: fields.select({
+      label: 'GEL Availability',
+      options: availabilityOptions,
+      defaultValue: 'available',
+    }),
+    availableMesh: fields.select({
+      label: 'Mesh Availability',
+      options: availabilityOptions,
+      defaultValue: 'available',
+    }),
+    availableLegacyWdp: fields.select({
+      label: 'Legacy WDP Availability',
+      options: availabilityOptions,
+      defaultValue: 'available',
+    }),
+    alternativeMesh: fields.text({
+      label: 'Mesh Alternative Name',
+      multiline: false,
+      defaultValue: undefined,
+    }),
+    alternativeLegacyWdp: fields.text({
+      label: 'Legacy WDP Alternative Name',
+      multiline: false,
+      defaultValue: undefined,
+    }),
+  },
+});

apps/site/src/components/component-blocks/components/availability-content/availability-content.styles.ts

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    contentContainer: 'mb-5 mt-4 max-w-5xl bg-white p-6 pb-0',
+    tableContainer: 'relative -mx-6 -mt-6 border-muted-50 px-6 pb-6 pt-9',
+  },
+});

apps/site/src/components/component-blocks/components/availability-content/availability-content.types.ts

@@ -0,0 +1,12 @@
+import { DocumentElement } from '@keystatic/core';
+
+export type AvailabilitySectionProps = { content: DocumentElement[]; title: string };
+
+export type AvailabilityContentProps = {
+  alternativeGel?: string;
+  alternativeLegacyWdp?: string;
+  alternativeMesh?: string;
+  availableGel: string;
+  availableLegacyWdp: string;
+  availableMesh: string;
+};

apps/site/src/components/component-blocks/components/availability-content/components/index.ts

@@ -0,0 +1,2 @@
+export * from './table-of-availability/table-of-availability.component';
+export * from './table-of-availability/table-of-availability.types';

apps/site/src/components/component-blocks/components/availability-content/components/table-of-availability/index.ts

@@ -0,0 +1,2 @@
+export * from './table-of-availability.component';
+export * from './table-of-availability.types';

apps/site/src/components/component-blocks/components/availability-content/components/table-of-availability/table-of-availability.component.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderRow, TableRow } from '@westpac/ui';
+import { CalendarIcon, TickCircleIcon, WarningIcon } from '@westpac/ui/icon';
+import React from 'react';
+
+import { styles as TableOfAvailabilityStyles } from './table-of-availability.styles';
+
+interface TableOfAvailabilityProps {
+  alternativeGel?: string;
+  alternativeLegacyWdp?: string;
+  alternativeMesh?: string;
+  availableGel: string;
+  availableLegacyWdp: string;
+  availableMesh: string;
+}
+
+const availabilityMap: Record<
+  string,
+  { color: 'success' | 'warning' | 'info'; icon: React.ElementType; text: string }
+> = {
+  available: { text: 'Available', icon: TickCircleIcon, color: 'success' },
+  unavailable: { text: 'Older version available', icon: WarningIcon, color: 'warning' },
+  'in-progress': { text: 'Older version available - Upgrade in backlog', icon: CalendarIcon, color: 'info' },
+};
+
+export function TableOfAvailability({
+  availableGel,
+  availableMesh,
+  availableLegacyWdp,
+  alternativeGel,
+  alternativeMesh,
+  alternativeLegacyWdp,
+}: TableOfAvailabilityProps) {
+  const platforms = [
+    { name: 'GEL Design System', status: availableGel, alternative: alternativeGel },
+    { name: 'Mesh UI', status: availableMesh, alternative: alternativeMesh },
+    { name: 'Legacy WDP', status: availableLegacyWdp, alternative: alternativeLegacyWdp },
+  ];
+
+  const styles = TableOfAvailabilityStyles({});
+
+  const hasAlternativeNames = platforms.some(platform => platform.alternative);
+  const cellWidth = hasAlternativeNames ? '33%' : '50%';
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableHeaderRow>
+          <TableHeaderCell>Platform</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+          {hasAlternativeNames && <TableHeaderCell>Other name</TableHeaderCell>}
+        </TableHeaderRow>
+      </TableHeader>
+      <TableBody>
+        {platforms.map(platform => {
+          const { text, icon: Icon, color } = availabilityMap[platform.status];
+          return (
+            <TableRow key={platform.name}>
+              <TableCell width={cellWidth}>
+                <strong>{platform.name}</strong>
+              </TableCell>
+              <TableCell width={cellWidth}>
+                <div className={styles.text({ color })}>
+                  <Icon size="small" look="outlined" className="mr-2" color={color} />
+                  {text}
+                </div>
+              </TableCell>
+              {hasAlternativeNames && <TableCell width={cellWidth}>{platform.alternative || ''}</TableCell>}
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}

apps/site/src/components/component-blocks/components/availability-content/components/table-of-availability/table-of-availability.styles.ts

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    text: 'typography-body-10',
+  },
+  variants: {
+    color: {
+      success: {
+        text: 'text-success',
+      },
+      warning: {
+        text: 'text-warning',
+      },
+      info: {
+        text: 'text-info',
+      },
+    },
+  },
+});

apps/site/src/components/component-blocks/components/availability-content/components/table-of-availability/table-of-availability.types.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+export type TableOfAvailabilityProps = {
+  availableGel: string;
+  availableLegacyWdp: string;
+  availableMesh: string;
+};

apps/site/src/components/component-blocks/components/availability-content/index.ts

@@ -0,0 +1,2 @@
+export * from './availability-content.component';
+export * from './availability-content.types';

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

@@ -3,6 +3,8 @@ import { Image } from '@/components/document-renderer';
 import { Colors } from './colors/colors.component';
 import { colors } from './colors/colors.preview';
 import { accessibilityDemo } from './components/accessibility-demo/accessibility-demo.preview';
+import { AvailabilityContent } from './components/availability-content/availability-content.component';
+import { availabilityContent } from './components/availability-content/availability-content.preview';
 import { designSystemBodyImage } from './components/design-system-body-image';
 import { LinkList } from './components/link-list';
 import { linkList } from './components/link-list/link-list.preview';
@@ -29,6 +31,7 @@ export const foundationBlocks = {
   linkList,
   shortCode,
   accessibilityDemo,
+  availabilityContent,
 };
 
 export const foundationBlocksComponents = {
@@ -44,4 +47,5 @@ export const foundationBlocksComponents = {
       <Image {...props} />
     </div>
   ),
+  availabilityContent: (props: any) => <AvailabilityContent {...props} />,
 };

apps/site/src/content/design-system/accessibility/colour-vision-impairment/index.yaml

@@ -8,10 +8,12 @@ design:
       name: What is a colour vision impairment?
       slug: what-is-a-colour-vision-impairment
     noTitle: false
+    noDemo: false
   - title:
       name: Colour contrast testing
       slug: colour-contrast-testing
     noTitle: false
+    noDemo: false
 accessibility: []
 relatedComponents: []
 code: []

apps/site/src/content/design-system/accessibility/design-system-accessibility/index.yaml

@@ -12,26 +12,32 @@ design:
       name: Principles of accessibility
       slug: principles-of-accessibility
     noTitle: false
+    noDemo: false
   - title:
       name: Inclusive product design
       slug: inclusive-product-design
     noTitle: false
+    noDemo: false
   - title:
       name: Inclusive content writing
       slug: inclusive-content-writing
     noTitle: false
+    noDemo: false
   - title:
       name: Accessible interfaces
       slug: accessible-interfaces
     noTitle: false
+    noDemo: false
   - title:
       name: Accessibility testing
       slug: accessibility-testing
     noTitle: false
+    noDemo: false
   - title:
       name: Deprecated components
       slug: deprecated-components
     noTitle: false
+    noDemo: false
 accessibility: []
 relatedComponents: []
 code: []