Merge branch 'develop' into feature/add-icons

WestpacGEL · Nov 28, 2024 · f45c7fb · f45c7fb
2 parents 08512ae + 7697768
commit f45c7fb
Show file tree

Hide file tree

Showing 14 changed files with 191 additions and 194 deletions.
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -22,7 +22,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5"
   }
 }
diff --git a/apps/site/package.json b/apps/site/package.json
@@ -45,7 +45,7 @@
     "eslint-config-turbo": "^0.0.7",
     "postcss": "~8.4.31",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.3.2",
+    "tailwindcss": "~3.4.15",
     "typescript": "^5.5.4"
   },
   "overrides": {

diff --git a/...ontent-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/...ontent-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx
@@ -10,7 +10,7 @@ import { type TableOfContentsProps } from './table-of-contents.types';
 export function TableOfContents({ contents = [] }: TableOfContentsProps) {
   return (
     <nav>
-      <h2 className="typography-body-9 border-border border-b pb-2 font-medium">Page content</h2>
+      <h2 className="typography-body-9 border-b border-border pb-2 font-medium">Page content</h2>
       <List icon={ArrowDownRightIcon} type="icon" look="primary" className="mt-3 [&_li]:my-1.5">
         {contents.map(({ title }) => {
           const id = title
@@ -33,7 +33,7 @@ function NavLink({ href, children }: { children?: React.ReactNode; href: string
   const pathname = usePathname();
 
   return (
-    <Link className="focus-visible:focus-outline ml-1 block hover:underline" href={`${pathname}${href}`} replace scroll>
+    <Link className="ml-1 block hover:underline focus-visible:focus-outline" href={`${pathname}${href}`} replace scroll>
       {children}
     </Link>
   );

diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         {children}
         {isEnabled && (
-          <div className="right-15 absolute top-3 z-[999]">
+          <div className="absolute right-15 top-3 z-[999]">
             <form method="post" action="/preview/end">
               <button className="text-white">End preview</button>
             </form>

diff --git a/apps/site/src/components/component-blocks/fonts/fonts.component.tsx b/apps/site/src/components/component-blocks/fonts/fonts.component.tsx
@@ -1,8 +1,26 @@
 'use client';
 
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+} from '@westpac/ui';
+import clsx from 'clsx';
+
 import { useBrand } from '@/app/design-system/hooks/use-brand';
 import { ComponentTitle } from '@/components/document-renderer/component-title';
 
+import { styles as FontsStyles } from './fonts.styles';
+
+interface FontProps {
+  view: 'default' | 'table';
+}
+
 const FONT_LIGHT = 'font-light';
 const FONT_REGULAR = 'font-regular';
 const FONT_BOLD = 'font-bold';
@@ -74,24 +92,56 @@ const FONTS_PER_BRAND = {
   ],
 } as const;
 
-export const Fonts = () => {
+export const Fonts = ({ view = 'default' }: FontProps) => {
   const brand = useBrand();
   const fonts = FONTS_PER_BRAND[brand?.key || 'wbc'];
 
-  return (
-    <div className="flex flex-col gap-2 bg-white p-6">
-      {fonts.map(({ fontWeight, className }) => (
-        <div key={fontWeight} className={className}>
-          <ComponentTitle className={className}>
-            {brand?.fontName} {fontWeight}
-          </ComponentTitle>
-          <p className="typography-brand-4 break-words">abcdefghijklmnopqrstuvwxyz</p>
-          <p className="typography-brand-4 break-words">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
-          <p className="typography-brand-4 break-words">1234567890</p>
-          <p className="typography-brand-4 break-words">!@#$¢%&*©®™£</p>
-          <p className="typography-brand-4 break-words">ﬁ ﬂ ﬀ</p>
-        </div>
-      ))}
-    </div>
-  );
+  const styles = FontsStyles({});
+
+  if (view === 'default') {
+    return (
+      <div className={styles.default({})}>
+        {fonts.map(({ fontWeight, className }) => (
+          <div key={fontWeight} className={className}>
+            <ComponentTitle className={className}>
+              {brand?.fontName} {fontWeight}
+            </ComponentTitle>
+            <p className="typography-brand-4 break-words">abcdefghijklmnopqrstuvwxyz</p>
+            <p className="typography-brand-4 break-words">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
+            <p className="typography-brand-4 break-words">1234567890</p>
+            <p className="typography-brand-4 break-words">!@#$¢%&*©®™£</p>
+            <p className="typography-brand-4 break-words">ﬁ ﬂ ﬀ</p>
+          </div>
+        ))}
+      </div>
+    );
+  } else {
+    return (
+      <div className={styles.table({})}>
+        <Table>
+          <TableCaption>GEL brand font weight tokens</TableCaption>
+          <TableHeader>
+            <TableHeaderRow>
+              <TableHeaderCell>Token</TableHeaderCell>
+              <TableHeaderCell>Font weight</TableHeaderCell>
+              <TableHeaderCell>Tailwind class</TableHeaderCell>
+            </TableHeaderRow>
+          </TableHeader>
+          <TableBody>
+            {fonts.map(i => (
+              <TableRow key={i.className}>
+                <TableCell>
+                  <span className={clsx('typography-brand-7', i.className)}>{i.className.replace('font-', '')}</span>
+                </TableCell>
+                <TableCell>
+                  {i.fontWeight} {brand?.fontName}
+                </TableCell>
+                <TableCell>{i.className}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    );
+  }
 };
diff --git a/apps/site/src/components/component-blocks/fonts/fonts.preview.tsx b/apps/site/src/components/component-blocks/fonts/fonts.preview.tsx
@@ -1,4 +1,4 @@
-import { NotEditable, component } from '@keystatic/core';
+import { NotEditable, component, fields } from '@keystatic/core';
 
 export const fonts = component({
   preview: () => (
@@ -7,5 +7,14 @@ export const fonts = component({
     </NotEditable>
   ),
   label: 'Fonts',
-  schema: {},
+  schema: {
+    view: fields.select({
+      label: 'Display Type',
+      options: [
+        { label: 'Default', value: 'default' },
+        { label: 'Table', value: 'table' },
+      ],
+      defaultValue: 'default',
+    }),
+  },
 });
diff --git a/apps/site/src/components/component-blocks/fonts/fonts.styles.ts b/apps/site/src/components/component-blocks/fonts/fonts.styles.ts
@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    default: 'flex flex-col gap-2 bg-white p-6',
+    table: 'mb-5 mt-4 max-w-5xl bg-white p-6',
+  },
+});
diff --git a/apps/site/src/components/component-blocks/foundation-blocks.tsx b/apps/site/src/components/component-blocks/foundation-blocks.tsx
@@ -35,7 +35,7 @@ export const foundationBlocks = {
 };
 
 export const foundationBlocksComponents = {
-  fonts: () => <Fonts />,
+  fonts: (props: any) => <Fonts {...props} />,
   icons: () => <Icons />,
   logos: () => <Logos />,
   pictograms: () => <Pictograms />,

diff --git a/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc b/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc
@@ -4,4 +4,4 @@ Check the [Masterbrand Guidelines](https://westpacgroup.sharepoint.com/:f:/s/O36
 
 ***Note:*** *Never use a web font without confirmation that you have the correct licence agreement in place.*
 
-{% fonts /%}
+{% fonts view="default" /%}
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -276,7 +276,7 @@
     "shx": "^0.3.4",
     "storybook": "^7.6.4",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.3.2",
+    "tailwindcss": "~3.4.15",
     "tailwindcss-themer": "~3.1.0",
     "ts-node": "~10.9.1",
     "typescript": "^5.5.4",
@@ -305,7 +305,7 @@
     "colorjs.io": "~0.4.5",
     "react": ">=18.2.0",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.3.2",
+    "tailwindcss": "~3.4.15",
     "tailwindcss-themer": "~3.1.0"
   }
 }
diff --git a/packages/ui/src/components/symbol/index.ts b/packages/ui/src/components/symbol/index.ts
@@ -52,7 +52,7 @@ export { WBGMultibrandLargeLogo } from './components/logos/wbg-multibrand-large-
 export { WBGMultibrandSmallLogo } from './components/logos/wbg-multibrand-small-logo.js';
 export { XSymbol } from './components/symbols/x-symbol.js';
 export { XMarkSymbol } from './components/symbols/x-mark-symbol.js';
-export { XMarkInverseSymbol } from './components/symbols/x-mark-inverse-symbol.js'
+export { XMarkInverseSymbol } from './components/symbols/x-mark-inverse-symbol.js';
 export { YammerSymbol } from './components/symbols/yammer-symbol.js';
 export { YouTubeSymbol } from './components/symbols/youtube-symbol.js';
 

diff --git a/packages/ui/src/components/symbol/symbol.stories.tsx b/packages/ui/src/components/symbol/symbol.stories.tsx
@@ -97,12 +97,12 @@ export const AllLogos = () => {
         {Object.entries(multibrandLargeLogos).map(([key, Logo]) => (
           <>
             <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-              <Logo className="border-border box-content border border-dashed" />
+              <Logo className="box-content border border-dashed border-border" />
               <p className="mt-2">{`<${key} />`}</p>
             </div>
             {align.map(align => (
               <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-                <Logo align={align} className="border-border box-content border border-dashed" />
+                <Logo align={align} className="box-content border border-dashed border-border" />
                 <p className="mt-2">{`<${key} align=${align} />`}</p>
               </div>
             ))}
@@ -114,12 +114,12 @@ export const AllLogos = () => {
         {Object.entries(multibrandSmallLogos).map(([key, Logo]) => (
           <>
             <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-              <Logo className="border-border box-content border border-dashed" />
+              <Logo className="box-content border border-dashed border-border" />
               <p className="mt-2">{`<${key} />`}</p>
             </div>
             {align.map(align => (
               <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
-                <Logo align={align} className="border-border box-content border border-dashed" />
+                <Logo align={align} className="box-content border border-dashed border-border" />
                 <p className="mt-2">{`<${key} align=${align} />`}</p>
               </div>
             ))}

diff --git a/packages/ui/src/stories/foundation/colours.stories.tsx b/packages/ui/src/stories/foundation/colours.stories.tsx
@@ -317,7 +317,7 @@ export const BrandColors: Story = {
               {/* NOTE: Below disable tailwind classname warning for string interpolation */}
               {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
               <div className={`bg-${color}${tintString} h-[80px]`} />
-              <div className="divide-border border-border divide-y border p-2">
+              <div className="divide-y divide-border border border-border p-2">
                 <div className="pb-2 font-bold">{color}</div>
                 <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}${tintString}`}</div>
                 {/* Below comments to get rid of type nightmare when trying to get hex value */}
@@ -361,7 +361,7 @@ export const ReservedColors = () => {
             {/* NOTE: Below disable tailwind classname warning for string interpolation */}
             {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
             <div className={`bg-${color}${tintString} h-[80px]`} />
-            <div className="divide-border border-border divide-y border p-2">
+            <div className="divide-y divide-border border border-border p-2">
               <div className="pb-2 font-bold">{color}</div>
               <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}${tintString}`}</div>
               {/* Below comments to get rid of type nightmare when trying to get hex value */}
@@ -383,15 +383,15 @@ export const ReservedWithNoTints = () => (
   <div className="flex">
     <div className="w-[33%] min-w-[200px] max-w-[300px] p-2">
       <div className={`h-[80px] bg-black`} />
-      <div className="divide-border border-border divide-y border p-2">
+      <div className="divide-y divide-border border border-border p-2">
         <div className="pb-2 font-bold">black</div>
         <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-black`}</div>
         <div className="typography-body-10 pt-2 font-light">#000</div>
       </div>
     </div>
     <div className="w-[33%] min-w-[200px] max-w-[300px] p-2">
-      <div className={`border-border h-[80px] border bg-white`} />
-      <div className="divide-border border-border divide-y border p-2">
+      <div className={`h-[80px] border border-border bg-white`} />
+      <div className="divide-y divide-border border border-border p-2">
         <div className="pb-2 font-bold">white</div>
         <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-white`}</div>
         <div className="typography-body-10 pt-2 font-light">#FFF</div>
@@ -432,7 +432,7 @@ export const DataVisualisationColors: Story = {
                 {/* NOTE: Below disable tailwind classname warning for string interpolation */}
                 {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
                 <div className={`bg-${color} h-[80px]`} />
-                <div className="divide-border border-border divide-y border p-2">
+                <div className="divide-y divide-border border border-border p-2">
                   <div className="pb-2 font-bold">{color}</div>
                   <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}`}</div>
                   {/* Below comments to get rid of type nightmare when trying to get hex value */}
@@ -449,7 +449,7 @@ export const DataVisualisationColors: Story = {
                 {/* NOTE: Below disable tailwind classname warning for string interpolation */}
                 {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
                 <div className={`bg-${color} h-[80px]`} />
-                <div className="divide-border border-border divide-y border p-2">
+                <div className="divide-y divide-border border border-border p-2">
                   <div className="pb-2 font-bold">{color}</div>
                   <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}`}</div>
                   {/* Below comments to get rid of type nightmare when trying to get hex value */}
@@ -466,7 +466,7 @@ export const DataVisualisationColors: Story = {
                 {/* NOTE: Below disable tailwind classname warning for string interpolation */}
                 {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
                 <div className={`bg-${color}/30 h-[80px]`} />
-                <div className="divide-border border-border divide-y border p-2">
+                <div className="divide-y divide-border border border-border p-2">
                   <div className="pb-2 font-bold">{`${color}/30`}</div>
                   <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}/30`}</div>
                   {/* Below comments to get rid of type nightmare when trying to get hex value */}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@ Check the [Masterbrand Guidelines](https://westpacgroup.sharepoint.com/:f:/s/O36

		*Note:* Never use a web font without confirmation that you have the correct licence agreement in place.

		{% fonts /%}
		{% fonts view="default" /%}