Develop

README.md

@@ -43,17 +43,21 @@ const config = withGEL({
 export default config;
 ```
 
-For applications using `brand fonts`, import the custom fonts as follows in your main `CSS` file.
-
-```css
-/* WBC fonts */
-@font-face {
-  src: url('/path-to-the-font/Westpac-Bold-v2.007.woff2') format('woff2'), url('/path-to-the-font/Westpac-Bold-v2.007.woff')
-      format('woff');
-  font-family: 'Westpac';
-  font-weight: 400;
-  font-style: normal;
-}
+For applications using `brand fonts` add the following options config to the `withGEL` helper.
+
+```ts
+const config = withGEL({
+  relative: true,
+  mode: 'jit',
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/@westpac/ui/src/**/*.{js,ts,jsx,tsx,mdx}'],
+  safelist: [],
+  options: {
+    brandFonts: {
+      src: '/fonts', // path to font files
+      brands: ['wbc', 'stg'], // takes a single brand string e.g. 'wbc' or an array of brands. If no brands are specified will import all brands by default
+    },
+  },
+});
 ```
 
 ### Usage

apps/site/CHANGELOG.md

@@ -1,5 +1,12 @@
 # site
 
+## 0.0.22
+
+### Patch Changes
+
+- Updated dependencies [7a54cf7]
+  - @westpac/[email protected]
+
 ## 0.0.21
 
 ### Patch Changes

apps/site/keystatic.config.ts

@@ -1,6 +1,6 @@
 import { GitHubConfig, LocalConfig, collection, config, fields, singleton } from '@keystatic/core';
 
-import { ComponentBlocks } from '@/components/component-blocks/component-blocks';
+import { ArticleComponentBlocks } from '@/components/component-blocks/article-component-blocks';
 
 const storage: LocalConfig['storage'] | GitHubConfig['storage'] =
   process.env.NODE_ENV === 'development'
@@ -104,12 +104,13 @@ export default config({
         design: fields.array(
           fields.object({
             title: fields.text({ label: 'Name' }),
+            noTitle: fields.checkbox({ label: 'No title' }),
             content: fields.document({
               formatting: true,
               dividers: true,
               links: true,
               images: true,
-              layouts: [[1, 1]],
+              layouts: [[6, 6]],
               label: 'Design',
             }),
           }),
@@ -202,11 +203,9 @@ export default config({
           directory: 'public/images/articles',
           publicPath: '/images/articles',
         }),
-        smallDescription: fields.image({
+        smallDescription: fields.text({
           label: 'Small description',
-          description: 'Small description that goes along with the thumbnail',
-          directory: 'public/images/articles',
-          publicPath: '/images/articles',
+          multiline: true,
         }),
         image: fields.image({
           label: 'Main Image',
@@ -230,7 +229,8 @@ export default config({
           dividers: true,
           links: true,
           label: 'Design',
-          componentBlocks: ComponentBlocks,
+          componentBlocks: ArticleComponentBlocks,
+          layouts: [[6, 6]],
           images: {
             directory: 'public/images/articles/content',
             publicPath: '/images/articles/content',

apps/site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "site",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "private": true,
   "scripts": {
     "build": "next build",

apps/site/src/app/(home)/components/action-bar/action-bar.component.tsx

@@ -18,12 +18,10 @@ export function ActionBar() {
       <Container className="px-4">
         <div className="hidden h-[6.375rem] items-end bg-white pb-2 sm:flex">
           <div className="mr-4 flex h-full flex-col justify-end border-r-[1px] border-gel-border">
-            <span className="mb-2 inline-block">
-              <GELLogo className="inline-block h-3 w-[45px] text-gel-text" />
-            </span>
+            <GELLogo className="mb-2 block h-3 w-[45px] text-gel-text" />
             <p className="mb-1 flex items-end">
               Design System
-              <ArrowRightIcon className="ml-2 mr-[1rem]" />
+              <ArrowRightIcon className="ml-0 mr-2 md:ml-2 md:mr-[1rem]" />
             </p>
           </div>
           <ul role="list" className="flex gap-2">

apps/site/src/app/(home)/components/article-tile/article-tile.style.ts

@@ -7,7 +7,7 @@ export const styles = tv({
       'relative aspect-[1092/563] w-full overflow-hidden transition-[border-radius] duration-200 ease-[cubic-bezier(0.13,0.00,0.11,1.00)] group-hover:rounded-[12.5rem] group-hover:transition-[border-radius] group-hover:duration-300 group-hover:ease-[cubic-bezier(0.13,0.00,0.11,1.00)]',
     contentWrapper: 'flex grow flex-col border-gel-border pl-1 pt-4 xsl:border-r xsl:pt-7',
     title: 'typography-site-9 mb-2 font-black uppercase leading-[1.12]',
-    description: 'typography-site-9 mb-2 mr-4',
+    description: 'typography-site-9 mb-2 mr-4 leading-[1.5]',
     icon: 'ml-auto mt-auto block text-gel-icon xsl:mr-1',
   },
   variants: {

apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx

@@ -5,7 +5,7 @@ import { Item, ItemProps, useSelectState } from 'react-stately';
 
 import { GELLogo } from '@/components/logos';
 
-import { styles as sidebarSelectStyles } from './brand-select.styles';
+import { styles as brandSelectStyles } from './brand-select.styles';
 import { type BrandSelectProps } from './brand-select.types';
 import { ListBox } from './components/list-box';
 import { Popover } from './components/popover';
@@ -16,14 +16,16 @@ export function BrandSelect(props: BrandSelectProps) {
 
   // Get props for child elements from useSelect
   const ref = useRef(null);
+  const popoverRef = useRef(null);
+  const portalContainreRef = useRef<HTMLDivElement>(null);
 
   const { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, ref);
   // Get props for the button based on the trigger props from useSelect
 
   const { buttonProps } = useButton(triggerProps, ref);
 
   const { focusProps, isFocusVisible } = useFocusRing();
-  const styles = sidebarSelectStyles({ isFocusVisible, isOpen: state.isOpen });
+  const styles = brandSelectStyles({ isFocusVisible, isOpen: state.isOpen });
 
   return (
     <div className={styles.base()}>
@@ -33,20 +35,29 @@ export function BrandSelect(props: BrandSelectProps) {
 
       <button {...mergeProps(buttonProps, focusProps)} ref={ref} className={styles.button()}>
         <div className={styles.textWrapper()}>
-          <div className="flex w-full items-center gap-2 overflow-hidden text-ellipsis py-2" {...valueProps}>
+          <div className="flex w-full items-end gap-[0.625rem] overflow-hidden text-ellipsis py-2" {...valueProps}>
             <GELLogo className="w-[2.8125rem] shrink-0" />
-            <span className="mb-[-0.3rem] shrink truncate">Design System</span>
+            <span className="mb-[-0.2rem] shrink truncate leading-4">Design System</span>
           </div>
         </div>
         <div aria-hidden="true" className={styles.iconWrapper()}>
           {state.isOpen ? <ExpandLessIcon className="text-gel-link" /> : <ExpandMoreIcon className="text-gel-link" />}
         </div>
       </button>
-      {state.isOpen && (
-        <Popover state={state} triggerRef={ref} placement="bottom start" className={styles.popover()}>
-          <ListBox {...menuProps} state={state} />
-        </Popover>
-      )}
+      <div ref={portalContainreRef} />
+      <Popover
+        portalContainer={portalContainreRef.current || undefined}
+        isNonModal
+        containerPadding={0}
+        popoverRef={popoverRef}
+        shouldFlip={false}
+        state={state}
+        triggerRef={ref}
+        placement="bottom start"
+        className={styles.popover()}
+      >
+        {state.isOpen && <ListBox {...menuProps} state={state} />}
+      </Popover>
     </div>
   );
 }

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

@@ -3,20 +3,20 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative flex w-full flex-col',
+      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:
-        'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden outline-none focus:focus-outline',
+        'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden pt-1.5 outline-none focus:focus-outline',
       // TODO: this is a workaround to align, but need to find a better way.
-      popover: 'ml-[-0.75rem] w-full',
+      popover: 'w-full',
       // icon: 'text-primary transition-transform',
-      iconWrapper: 'flex flex-shrink-0 items-center text-primary',
+      iconWrapper: 'mb-[-0.4rem] flex flex-shrink-0 items-center text-primary',
       textWrapper: 'flex flex-shrink items-center overflow-hidden pr-2',
     },
     variants: {
       isFocusVisible: {
         true: {
-          base: '',
+          base: 'focus-outline',
         },
         false: {},
       },

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

@@ -0,0 +1,3 @@
+import { domAnimation } from 'framer-motion';
+
+export default domAnimation;

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex h-10 cursor-pointer items-center justify-between border-t border-t-border bg-white px-3 py-[0.625rem] transition-colors first:border-t-0 hover:bg-light focus:bg-light',
+    base: 'flex h-10 cursor-pointer items-center justify-between border-t border-t-border bg-white px-1 py-[0.625rem] transition-colors first:border-t-0 hover:bg-light focus:bg-light',
     variants: {
       isFocused: {
         true: 'bg-light',

apps/site/src/app/(home)/components/brand-select/components/list-box/list-box.component.tsx

@@ -12,7 +12,11 @@ export function ListBox(props: ListBoxProps) {
   const { listBoxProps } = useListBox(props, state, listBoxRef);
 
   return (
-    <ul {...listBoxProps} ref={listBoxRef} className="max-h-[25rem] w-full overflow-auto outline-none">
+    <ul
+      {...listBoxProps}
+      ref={listBoxRef}
+      className="max-h-[25rem] w-full overflow-auto px-4 pb-4 pt-2 outline-none xsl:px-5 xsl:pb-5"
+    >
       {[...state.collection].map(item =>
         item.type === 'section' ? (
           <ListBoxSection key={item.key} section={item} state={state} />

apps/site/src/app/(home)/components/brand-select/components/popover/popover.component.tsx

@@ -1,12 +1,15 @@
 import { clsx } from 'clsx';
+import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import { useRef } from 'react';
 import { DismissButton, Overlay, usePopover } from 'react-aria';
 
 import { PopoverProps } from './popover.types';
 
+const loadAnimations = () => import('./popover.utils').then(res => res.default);
+
 export function Popover(props: PopoverProps) {
   const ref = useRef<HTMLDivElement>(null);
-  const { popoverRef = ref, state, children, className, isNonModal } = props;
+  const { popoverRef = ref, state, children, className, isNonModal, portalContainer } = props;
   const { popoverProps, underlayProps } = usePopover(
     {
       ...props,
@@ -16,16 +19,39 @@ export function Popover(props: PopoverProps) {
   );
 
   return (
-    <Overlay>
+    <Overlay portalContainer={portalContainer}>
       {!isNonModal && <div {...underlayProps} className="fixed inset-0" />}
 
       <div
         {...popoverProps}
         ref={popoverRef}
-        className={clsx('z-10 border border-border bg-white shadow-lg', className)}
+        className={clsx('z-10 overflow-hidden bg-white shadow-[rgba(0,0,0,0.24)_0_8px_8px]', className)}
       >
         {!isNonModal && <DismissButton onDismiss={state.close} />}
-        {children}
+        <LazyMotion features={loadAnimations}>
+          <AnimatePresence initial mode="wait">
+            {state.isOpen && (
+              <m.div
+                className="overflow-hidden"
+                initial={{
+                  height: 0,
+                  opacity: 0,
+                }}
+                animate={{
+                  height: 'auto',
+                  opacity: 1,
+                }}
+                exit={{
+                  height: 0,
+                  opacity: 0,
+                }}
+                transition={{ duration: 0.3, ease: 'easeInOut' }}
+              >
+                {children}
+              </m.div>
+            )}
+          </AnimatePresence>
+        </LazyMotion>
         <DismissButton onDismiss={state.close} />
       </div>
     </Overlay>

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

@@ -6,5 +6,6 @@ export type PopoverProps = Omit<AriaPopoverProps, 'popoverRef'> & {
   children: React.ReactNode;
   className?: string;
   popoverRef?: React.RefObject<HTMLDivElement>;
+  portalContainer?: Element;
   state: OverlayTriggerState;
 } & HTMLAttributes<Element>;

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

@@ -0,0 +1,3 @@
+import { domAnimation } from 'framer-motion';
+
+export default domAnimation;

apps/site/src/app/(home)/components/circle-logo/circle-logo.component.tsx

@@ -4,7 +4,7 @@ export function CircleLogo({ className, children }: { children: React.ReactNode;
   return (
     <span
       className={clsx(
-        'flex h-12 w-12 items-center justify-center rounded-full bg-white outline outline-1 outline-gel-border hover:outline-4 hover:outline-gel-border/60',
+        'flex h-12 w-12 items-center justify-center rounded-full bg-white outline outline-1 outline-gel-border transition-all hover:outline-4 hover:outline-gel-icon/40',
         className,
       )}
     >

apps/site/src/app/(home)/components/footer/components/helpers.component.tsx

@@ -3,7 +3,7 @@ import NextLink, { LinkProps } from 'next/link';
 import { CircleLogo } from '../../circle-logo/circle-logo.component';
 
 export function Title({ children }: { children: React.ReactNode }) {
-  return <h3 className="typography-body-9 mb-5 uppercase sm:mb-7 md:mb-9">{children}</h3>;
+  return <h3 className="typography-site-9 font-bold mb-5 uppercase sm:mb-7 md:mb-9">{children}</h3>;
 }
 
 export function Link(props: React.PropsWithChildren<LinkProps>) {

apps/site/src/app/(home)/components/footer/footer.component.tsx

@@ -32,7 +32,7 @@ export function Footer({ gelEmail = '', guidelinesURL = '' }: { gelEmail?: strin
             </Grid>
           </div>
           <div className="col-span-12 sm:col-span-4 md:col-start-9">
-            <Title>Tools and resources</Title>
+            <Title>Tools &amp; resources</Title>
             <Grid tag="ul" className="gap-y-1 xsl:gap-y-2 sm:gap-y-4 lg:gap-y-2">
               <li className="col-span-12 xsl:col-span-6 sm:col-span-12">
                 <Link href="/articles/figma-libraries">

apps/site/src/app/(home)/components/hero/hero.component.tsx

@@ -8,14 +8,12 @@ export function Hero() {
   return (
     <div className="bg-gel-primary">
       <Container>
-        <Grid className="gap-y-0 xsl:gap-y-0">
+        <Grid className="gap-y-5 pt-5 xsl:gap-y-6 xsl:pt-7 sm:gap-y-7 sm:pt-9 md:gap-y-10 md:pt-10 lg:pt-11">
           <div className="col-span-11 row-end-[span_1] xsl:col-span-9">
-            <div className="mb-4 mt-5 xsl:mb-5 xsl:mt-7 sm:mb-6 sm:mt-9 md:mb-9 md:mt-10 lg:mt-11">
-              <GELHeroLogo />
-            </div>
+            <GELHeroLogo />
           </div>
           <div className="col-span-10 col-start-2 row-start-2 row-end-[span_1] mb-7 xsl:col-span-9 xsl:col-start-3 xsl:mb-9 sm:mb-14 md:mb-15 lg:mb-16">
-            <p className="font-gel-serif text-[1.125rem] text-white antialiased sm:text-[1.5rem]">
+            <p className="font-gel-serif text-[1.125rem] leading-[1.33] text-white antialiased sm:text-[1.5rem] sm:leading-[1.38]">
               The Global Experience Language is our single source of truth, providing everything you need to deliver our
               brand promises and create consistent, coherent customer experiences across our entire digital landscape
               faster, and with less effort.

apps/site/src/app/(home)/components/home-page/home-page.component.tsx

@@ -2,21 +2,26 @@
 
 import { Container } from '@westpac/ui';
 
+import { StickyFooter } from '@/components/sticky-footer';
+
 import { ArticleTile } from '../article-tile/article-tile.component';
 
 import { articleWrapperStyles } from './home-page.styles';
 import { HomePageProps } from './home-page.types';
 
 export const HomePage = ({ articleRows }: HomePageProps) => {
   return (
-    <Container className="mb-8 mt-5 flex flex-col gap-4 px-4 xsl:mt-6 sm:mt-8 md:mt-9 lg:mt-10">
-      {articleRows.map(({ articles, layout }, index) => (
-        <div key={index} className={articleWrapperStyles({ layout })}>
-          {articles.map(({ slug, ...article }, index) => {
-            return <ArticleTile layout={layout} index={index} key={slug} slug={slug} article={article} />;
-          })}
-        </div>
-      ))}
-    </Container>
+    <>
+      <Container className="mb-8 mt-5 flex flex-col gap-4 px-4 xsl:mt-6 sm:mt-8 md:mt-9 lg:mt-10">
+        {articleRows.map(({ articles, layout }, index) => (
+          <div key={index} className={articleWrapperStyles({ layout })}>
+            {articles.map(({ slug, ...article }, index) => {
+              return <ArticleTile layout={layout} index={index} key={slug} slug={slug} article={article} />;
+            })}
+          </div>
+        ))}
+      </Container>
+      <StickyFooter />
+    </>
   );
 };