Develop

apps/protoform/CHANGELOG.md

@@ -1,5 +1,14 @@
 # protoform
 
+## 0.1.9
+
+### Patch Changes
+
+- Updated dependencies [2097183]
+- Updated dependencies [af5972c]
+- Updated dependencies [aeceb95]
+  - @westpac/[email protected]
+
 ## 0.1.8
 
 ### Patch Changes

apps/protoform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "protoform",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": true,
   "scripts": {
     "dev": "next dev",

apps/site/CHANGELOG.md

@@ -1,5 +1,14 @@
 # site
 
+## 0.1.11
+
+### Patch Changes
+
+- Updated dependencies [2097183]
+- Updated dependencies [af5972c]
+- Updated dependencies [aeceb95]
+  - @westpac/[email protected]
+
 ## 0.1.10
 
 ### Patch Changes

apps/site/next.config.js

@@ -10,6 +10,7 @@ module.exports = {
         pathname: '/westpac-gel/**',
       },
     ],
+    unoptimized: true,
   },
   async redirects() {
     return [

apps/site/package.json

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

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

@@ -15,7 +15,7 @@ import { logoMap, logoStyles } from '../utils';
 export function ActionBar() {
   return (
     <StickyHeader>
-      <GridContainer className="px-4">
+      <GridContainer fixed className="px-4 lg:max-w-gel-lg-container lg:px-10">
         <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">
             <GELLogo className="mb-2 block h-3 w-[45px] text-gel-text" />

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

@@ -12,7 +12,7 @@ import { Circle, Link, Text, Title } from './components/helpers.component';
 export function Footer({ gelEmail = '', guidelinesURL = '' }: { gelEmail?: string; guidelinesURL?: string }) {
   return (
     <div className="bg-gel-background">
-      <GridContainer>
+      <GridContainer className="lg:max-w-gel-lg-container lg:px-10">
         <Grid className="gap-y-7 pb-10 pt-9 xsl:gap-y-9 xsl:pb-11 xsl:pt-10 sm:pb-14 sm:pt-13 lg:pb-16 lg:pt-15">
           <div className="col-span-12 sm:col-span-8 md:col-span-7">
             <Title>Design System</Title>

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

@@ -7,7 +7,7 @@ import { GELHeroLogo } from './components/gel-hero-logo';
 export function Hero() {
   return (
     <div className="bg-gel-primary">
-      <GridContainer>
+      <GridContainer fixed className="lg:max-w-gel-lg-container lg:px-10">
         <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">
             <GELHeroLogo />

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

@@ -12,7 +12,10 @@ import { HomePageProps } from './home-page.types';
 export const HomePage = ({ articleRows }: HomePageProps) => {
   return (
     <>
-      <GridContainer className="mb-8 mt-5 flex flex-col gap-4 px-4 xsl:mt-6 sm:mt-8 md:mt-9 lg:mt-10">
+      <GridContainer
+        fixed
+        className="mb-8 mt-5 flex flex-col gap-4 px-4 xsl:mt-6 sm:mt-8 md:mt-9 lg:mt-10 lg:max-w-gel-lg-container lg:px-10"
+      >
         {articleRows.map(({ articles, layout }, index) => (
           <div key={index} className={articleWrapperStyles({ layout })}>
             {articles.map(({ slug, ...article }, index) => {

apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx

@@ -14,7 +14,7 @@ export function ArticlePage({ article }: ArticlePageProps) {
   return (
     <>
       <div className="bg-gradient-to-b from-white from-25% to-gel-background">
-        <GridContainer className=" pt-8 xsl:pt-10 sm:pt-11">
+        <GridContainer fixed className=" pt-8 xsl:pt-10 sm:pt-11 lg:max-w-gel-lg-container lg:px-10">
           <Grid className="gap-y-5 xsl:gap-y-6 sm:gap-y-8">
             <div className="col-span-12">
               <h1 className="typography-site-6 mb-2 font-black !leading-[1.1] tracking-[-1px] xsl:typography-site-3 xsl:mb-3">
@@ -39,7 +39,7 @@ export function ArticlePage({ article }: ArticlePageProps) {
           </Grid>
         </GridContainer>
       </div>
-      <GridContainer className="pb-8 xsl:pb-10 sm:pb-11">
+      <GridContainer fixed className="pb-8 xsl:pb-10 sm:pb-11 lg:max-w-gel-lg-container lg:px-10">
         <Grid className="gap-y-0 xsl:gap-y-0 sm:gap-y-0">
           <LeadingText text={article.description} />
           <DocumentRenderer

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

@@ -1,43 +1,44 @@
 'use client';
 
-import { Grid, GridItem, Modal, ModalBody } from '@westpac/ui';
-import { DesktopIcon, GelIcon, PhoneIcon, TabletIcon } from '@westpac/ui/icon';
-
-import { Container } from '@/app/design-system/components';
+import { Grid, GridContainer, GridItem, Modal, ModalBody } from '@westpac/ui';
+import { useWindowSize } from 'usehooks-ts';
 
 import { ResponsiveModalProps } from '.';
 
 export function ResponsiveModal({ children, ...props }: ResponsiveModalProps) {
+  const { width = 0 } = useWindowSize();
+
   return (
-    <Modal isDismissable className="bg-light" {...props}>
-      <ModalBody className="flex flex-1 flex-col">
-        <Container className="flex flex-1 flex-col pt-5">
-          <div className="flex justify-between">
-            <h2 className="typography-body-7 font-light sm:typography-body-6">Responsive Demo</h2>
-            <GelIcon color="primary" size="xlarge" />
-          </div>
+    <Modal isDismissable {...props}>
+      <ModalBody className="flex flex-1 flex-col px-0">
+        <GridContainer fixed className="flex flex-1 flex-col pt-5">
+          <h2 className="typography-body-7 font-black xsl:typography-body-6">
+            Viewport: <span className="font-light">{width}px</span>
+          </h2>
           <div className="relative mb-3 mt-4 flex justify-center">
-            <div className="absolute inset-x-0 top-2 flex h-4 w-full items-center justify-between before:h-full before:border-l before:border-l-text after:h-full after:border-l after:border-l-text">
-              <div className="flex-1 border-t border-t-text" />
+            <div className="absolute inset-x-0 top-2 flex h-4 w-full items-center justify-between before:h-full before:border-l before:border-l-border after:h-full after:border-l after:border-l-border">
+              <div className="flex-1 border-t border-t-border" />
             </div>
-            <div className="z-10 flex gap-2 rounded border border-text bg-white px-3 py-2">
-              <PhoneIcon className="opacity-100 xsl:opacity-50" />
-              <TabletIcon className="opacity-50 xsl:opacity-100 md:opacity-50" />
-              <TabletIcon className="rotate-90 opacity-50 md:opacity-100 lg:opacity-50" />
-              <DesktopIcon className="opacity-50 lg:opacity-100" />
+            <div className="z-10 flex h-8 w-12 items-center justify-center rounded-[5.625rem] border border-border bg-white font-black">
+              <span className="xsl:hidden">Xs</span>
+              <span className="hidden xsl:max-sm:block">Xsl</span>
+              <span className="hidden sm:max-md:block">Sm</span>
+              <span className="hidden md:max-lg:block">Md</span>
+              <span className="hidden lg:max-xl:block">Lg</span>
+              <span className="hidden xl:block">Xl</span>
             </div>
           </div>
           <div className="relative flex-1 overflow-auto">
             <div className="relative z-10">{children}</div>
             <div className="pointer-events-none absolute inset-0 touch-none">
               <Grid className="absolute inset-0">
                 {new Array(12).fill(null).map((_, index) => (
-                  <GridItem key={index} span={1} className="bg-text/5" />
+                  <GridItem key={index} span={1} className="bg-background" />
                 ))}
               </Grid>
             </div>
           </div>
-        </Container>
+        </GridContainer>
       </ModalBody>
     </Modal>
   );

apps/site/tailwind.config.ts

@@ -51,6 +51,7 @@ const config: Config = withGEL({
       },
       maxWidth: {
         'gel-container': '71.5rem',
+        'gel-lg-container': '82.5rem', //1200 (lg) + 60 (paddingHorizontal) + 60 (paddingHorizontal)
       },
     },
   },

packages/ui/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @westpac/ui
 
+## 0.23.0
+
+### Minor Changes
+
+- af5972c: update the grid container component
+
+### Patch Changes
+
+- 2097183: color change on footer component and example
+- aeceb95: updated styling on badge so it looks correct
+
 ## 0.22.0
 
 ### Minor Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

packages/ui/src/components/badge/badge.styles.ts

@@ -6,7 +6,7 @@ export const styles = tv(
     variants: {
       color: {
         danger: 'border-danger bg-danger text-white',
-        faint: 'border-border bg-border text-muted',
+        faint: 'border-border bg-border text-text',
         hero: 'border-hero bg-hero text-white',
         info: 'border-info bg-info text-white',
         neutral: 'border-neutral bg-neutral text-white',
@@ -25,7 +25,7 @@ export const styles = tv(
       },
       type: {
         pill: 'typography-body-10 h-4 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
-        default: 'h-3 rounded-sm px-1 text-[0.75rem] leading-none',
+        default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]',
       },
       soft: {
         true: 'bg-white',
@@ -40,7 +40,7 @@ export const styles = tv(
       {
         color: 'faint',
         soft: true,
-        className: 'text-muted',
+        className: 'text-text',
       },
       {
         color: 'hero',

packages/ui/src/components/footer/footer.stories.tsx

@@ -1,6 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
-import { PadlockIcon } from '../icon/index.js';
+import { SecurityIcon } from '../icon/index.js';
 import { Link } from '../index.js';
 
 import { Footer } from './footer.component.js';
@@ -35,9 +35,9 @@ export const DefaultStory: Story = {
     const brand = theme ? theme.toLowerCase() : 'wbc';
     return (
       <>
-        <Footer brand={brand === 'btfg' ? 'wbc' : brand} {...rest}>
+        <Footer brand={brand === 'btfg' ? 'wbc' : brand} hideLogo {...rest}>
           <div>
-            <PadlockIcon
+            <SecurityIcon
               size={{ initial: 'small', md: 'medium' }}
               className="float-left shrink-0 max-md:mr-1 md:mr-2"
               color="muted"

packages/ui/src/components/footer/footer.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative overflow-hidden border-t-[1px] border-t-primary',
+      base: 'relative overflow-hidden border-t-[1px] border-t-border',
       wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
       topRow: '',
       link: 'float-right block',

packages/ui/src/components/grid/components/grid-container/grid-container.component.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { styles } from './grid-container.styles.js';
 import { type GridContainerProps } from './grid-container.types.js';
 
-export function GridContainer({ className, tag: Tag = 'div', fixed, children, ...props }: GridContainerProps) {
+export function GridContainer({ className, tag: Tag = 'div', fixed = false, children, ...props }: GridContainerProps) {
   return (
     <Tag className={styles({ fixed, className })} {...props}>
       {children}

packages/ui/src/components/grid/components/grid-container/grid-container.styles.ts

@@ -2,10 +2,11 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'mx-auto box-border w-full max-w-container px-4 xsl:px-5 sm:px-6 md:px-8 lg:px-10',
+    base: 'mx-auto box-border w-full',
     variants: {
       fixed: {
-        true: 'sm:max-w-xsl md:max-w-md lg:max-w-lg',
+        true: 'max-w-container-xs px-4 xsl:max-w-container-xsl xsl:px-5 sm:max-w-container-sm sm:px-6 md:max-w-container-md md:px-7 lg:max-w-container-lg lg:px-10',
+        false: 'px-4 xsl:px-5 sm:px-6 md:px-8 lg:px-10',
       },
     },
   },

packages/ui/src/components/grid/grid.spec.tsx

@@ -27,7 +27,7 @@ describe('Grid', () => {
 
   it('renders the Container style correctly', () => {
     const style = containerStyles();
-    expect(style).toBe('mx-auto box-border w-full max-w-container px-4 xsl:px-5 sm:px-6 md:px-8 lg:px-10');
+    expect(style).toBe('mx-auto box-border w-full');
   });
 
   it('renders the Item component', () => {

packages/ui/src/components/grid/grid.stories.tsx

@@ -43,6 +43,20 @@ export const DefaultContainer = () => {
   );
 };
 
+export const FixedContainer = () => {
+  const items = Array(12).fill(null);
+
+  return (
+    <GridContainer fixed>
+      <Grid>
+        {items.map((_, i) => (
+          <Item key={i}>{i + 1}</Item>
+        ))}
+      </Grid>
+    </GridContainer>
+  );
+};
+
 export const ResponsiveItems = () => {
   return (
     <GridContainer>

packages/ui/src/tailwind/constants/breakpoints.ts

@@ -3,6 +3,6 @@ export const BREAKPOINTS = {
   sm: '768px',
   md: '992px',
   lg: '1200px',
-  xl: '1900px',
+  xl: '1584px',
 };
 export type Breakpoint = keyof typeof BREAKPOINTS;

packages/ui/src/tailwind/tailwind-plugin.ts

@@ -133,7 +133,11 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
             sm: BREAKPOINTS.sm,
             md: BREAKPOINTS.md,
             lg: BREAKPOINTS.lg,
-            container: '1320px', //1200 (lg) + 60 (paddingHorizontal) + 60 (paddingHorizontal)
+            'container-xs': '35.35rem',
+            'container-xsl': '47.25rem',
+            'container-sm': '60.75rem',
+            'container-md': '72.75rem',
+            'container-lg': '97.5rem',
           },
           transitionTimingFunction: {
             ease: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)', // based on css ease timing function used in GEL 3.0