@westpac/ui 0.3.0 → 0.5.0

package/src/components/table/components/cell/cell.styles.ts

@@ -3,14 +3,14 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 border-border border border-x-0 border-b-[1px] border-t-0 p-2 text-left align-bottom',
+      base: 'typography-body-10 border border-x-0 border-b-[1px] border-t-0 border-border p-2 text-left align-bottom',
     },
     variants: {
       bordered: {
-        true: { base: 'border-x-1' },
+        true: { base: 'border-x' },
       },
-      highlighted: { true: { base: 'border-b-primary border border-b-[3px]' } },
-      highlightStart: { true: { base: 'border-l-primary border border-b-[3px] border-l-[6px]' } },
+      highlighted: { true: { base: 'border border-b-[3px] border-b-primary' } },
+      highlightStart: { true: { base: 'border border-b-[3px] border-l-[6px] border-l-primary' } },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/table/components/footer/footer.styles.ts

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    slots: { base: 'text-muted typography-body-10 p-2 text-left font-light' },
+    slots: { base: 'typography-body-10 p-2 text-left font-light text-muted' },
     variants: {
       bordered: {
-        true: { base: 'border-border border' },
+        true: { base: 'border border-border' },
       },
     },
   },

package/src/components/table/components/header-cell/header-cell.styles.ts

@@ -3,11 +3,11 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'text-text typography-body-10 border-hero border border-x-0 border-b-[3px] border-t-0 p-2 text-left align-bottom',
+      base: 'typography-body-10 border border-x-0 border-b-[3px] border-t-0 border-hero p-2 text-left align-bottom text-text',
     },
     variants: {
       bordered: {
-        true: { base: 'border-x-1 border-t-1 border-x-border border-t-border' },
+        true: { base: 'border-x border-t border-x-border border-t-border' },
       },
     },
   },

package/src/components/table/components/row/row.styles.ts

@@ -4,8 +4,8 @@ export const styles = tv(
   {
     slots: { base: 'hover:bg-background' },
     variants: {
-      striped: { true: { base: 'even:bg-background hover:bg-default' } },
-      highlightedRow: { true: { base: 'border-primary border border-b-[3px] border-l-[6px] border-r-0' } },
+      striped: { true: { base: 'hover:bg-default even:bg-background' } },
+      highlightedRow: { true: { base: 'border border-b-[3px] border-l-[6px] border-r-0 border-primary' } },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/table/table.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof Table> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

package/src/components/tabs/components/tab/tab.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white focus:focus-outline',
     variants: {
       look: {
-        default: 'border border-border',
+        default: 'border border-border bg-white',
         material: '',
       },
       selected: {

package/src/components/tabs/components/tab-panel/tab-panel.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex-1 p-4 focus:focus-outline',
+    base: 'flex-1 bg-white p-4 focus:focus-outline',
     variants: {
       look: {
         default: 'border border-border',

package/src/components/tabs/tabs.stories.tsx

@@ -1,8 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Key, useState } from 'react';
 
-import { Button } from '../index.js';
-
 import { Tabs } from './tabs.component.js';
 
 const meta: Meta<typeof Tabs> = {
@@ -17,7 +15,7 @@ const meta: Meta<typeof Tabs> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

package/src/components/tabs/tabs.styles.ts

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'flex',
-      tabList: 'relative z-10 flex bg-white',
+      tabList: 'relative z-10 flex',
     },
     variants: {
       orientation: {

package/src/components/textarea/textarea.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof Textarea> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

package/src/components/textarea/textarea.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
+    base: 'form-control w-full read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
     variants: {
       size: {
         small: 'form-control-small min-h-[3.375rem]',

package/src/components/visually-hidden/visually-hidden.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof VisuallyHidden> = {
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

package/src/hook/index.ts

@@ -0,0 +1 @@
+export * from '../components/pagination/pagination.hooks.js';

package/src/tailwind/tailwind-plugin.ts

@@ -5,6 +5,7 @@ import { BREAKPOINTS } from './constants/breakpoints.js';
 import { COLORS, DEFAULT_BODY_TYPOGRAPHY, FONT_TYPES, SPACING } from './constants/index.js';
 import { THEMES } from './themes/index.js';
 import { theme as WBCTheme } from './themes/wbc.js';
+import { generateDatePicker } from './utils/generate-date-picker-component.js';
 import { createFontSizes, generateFontComponents, generateFormControlComponents } from './utils/index.js';
 
 /**
@@ -25,6 +26,7 @@ export const WestpacUIKitBasePlugin = plugin(
     });
     addComponents(generateFontComponents(theme('typographySizes'), theme));
     addComponents(generateFormControlComponents(theme('formControl')));
+    addComponents(generateDatePicker());
   },
   {
     theme: {
@@ -50,9 +52,20 @@ export const WestpacUIKitBasePlugin = plugin(
             '0%': { opacity: '0' },
             '100%': { opacity: '1' },
           },
+          fadeInDown: {
+            '0%': {
+              opacity: '0',
+              transform: 'translateY(-10vh)',
+            },
+            '100%': {
+              opacity: '1',
+              transform: 'translateY(0)',
+            },
+          },
         },
         animation: {
           fadeIn: 'fadeIn 0.2s ease',
+          fadeInDown: 'fadeInDown 0.4s ease',
         },
         boxShadow: {
           switch: '0.1875rem 0 0.375rem 0 rgba(0,0,0,0.53)',
@@ -112,10 +125,10 @@ export const WestpacUIKitBasePlugin = plugin(
         disabled: 'cursor-not-allowed border-dashed bg-background text-muted',
         sizes: {
           // Some of the values are not following the spacing so we needed to use static values as following
-          small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm',
-          medium: 'typography-body-9 px-2 py-[0.3125rem]',
+          small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm leading-[1.3rem]',
+          medium: 'typography-body-9 px-2 py-[0.3125rem] leading-6',
           large: 'px-[0.9375rem] py-[0.5rem] text-base',
-          xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg',
+          xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg leading-[1.685rem]',
         },
       },
       focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus',

package/src/tailwind/tailwind-transformer.ts

@@ -6,6 +6,12 @@ import { WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin } from '@westpac/ui/ta
 export const withGEL = (config: Config) =>
   withTV({
     ...config,
+    safelist: [
+      // Workaround for date-picker which is a web component and tailwind can't pickup the inner components
+      'date-picker',
+      ...(typeof config.safelist === 'string' ? [config.safelist] : []),
+      ...(Array.isArray(config.safelist) ? config.safelist : []),
+    ],
     plugins: [
       WestpacUIKitBasePlugin,
       WestpacUIKitThemesPlugin,

package/src/tailwind/utils/generate-date-picker-component.ts

@@ -0,0 +1,109 @@
+export const generateDatePicker = () => {
+  return {
+    '.date-picker': {
+      '.duet-date__input': {
+        '@apply text-lg focus:!border-borderDark focus:!shadow-none focus:focus-outline border border-borderDark border-solid rounded':
+          {},
+      },
+      '.duet-date__toggle': {
+        '@apply shadow-none border-solid border-l !border-l-borderDark !bg-light touch-manipulation whitespace-nowrap transition hover:bg-white active:bg-white rounded-r':
+          {},
+        '@apply focus:shadow-none focus:focus-outline': {},
+      },
+      '.duet-date__select select:focus + .duet-date__select-label': {
+        '@apply !focus-outline rounded': {},
+      },
+      '.duet-date__toggle-icon': {
+        '@apply w-[18px] h-[18px] bg-cover flex-auto': {},
+        'background-image': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23686362' fill-rule='evenodd' d='M20,2 L22,2 C23.1045695,2 24,2.8954305 24,4 L24,22 C24,23.1045695 23.1045695,24 22,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,4 C-1.3527075e-16,2.8954305 0.8954305,2 2,2 L4,2 L4,0 L6,0 L6,2 L18,2 L18,0 L20,0 L20,2 Z M2,8 L2,22 L22,22 L22,8 L2,8 Z M14,14 L20,14 L20,20 L14,20 L14,14 Z'%3E%3C/path%3E%3C/svg%3E")`,
+        svg: {
+          '@apply hidden': {},
+        },
+      },
+
+      /* SIZE VARIANTS */
+      '&.date-picker-sm': {
+        '.duet-date__input': {
+          '@apply py-[0.25rem] pl-[0.5625rem] text-sm': {},
+        },
+        '.duet-date__toggle': {
+          '@apply px-2 w-auto': {},
+        },
+      },
+      '&.date-picker-md': {
+        '.duet-date__input': {
+          '@apply py-1 pl-2 text-base': {},
+        },
+        '.duet-date__toggle': {
+          '@apply px-2 w-auto': {},
+        },
+      },
+      '&.date-picker-lg': {
+        '.duet-date__input': {
+          '@apply py-[0.5rem] pl-[0.9375.rem] text-base': {},
+        },
+        '.duet-date__toggle': {
+          '@apply px-2 w-auto': {},
+        },
+        '.duet-date__toggle-icon': {
+          '@apply w-[24px] h-[24px]': {},
+        },
+      },
+      '&.date-picker-xl': {
+        '.duet-date__input': {
+          '@apply py-[0.5625rem] pl-[1.125rem]': {},
+        },
+        '.duet-date__toggle': {
+          '@apply px-3 w-auto': {},
+        },
+        '.duet-date__toggle-icon': {
+          '@apply w-[24px] h-[24px]': {},
+        },
+      },
+
+      /* Calendar selects */
+      '.duet-date__dialog-content': {
+        '@apply bg-white': {},
+      },
+      '.duet-date__dialog': {
+        '@apply z-10': {},
+      },
+      '.duet-date__select-label': {
+        '@apply mt-0 font-semibold': {},
+        svg: {
+          '@apply text-primary': {},
+        },
+      },
+      '.duet-date__table-header': {
+        '@apply font-bold': {},
+      },
+      '.duet-date__prev, .duet-date__next': {
+        '@apply bg-background focus:focus-outline !outline-offset-0 text-primary': {},
+      },
+      '.duet-date-dialog-select select:focus + .duet-date-dialog-select-label': {
+        '@apply focus-outline !shadow-none': {},
+        'outline-offset': '0 !important',
+      },
+
+      /* Calendar days */
+      '.duet-date__day': {
+        '@apply hover:!bg-primary/5 focus:!bg-white/0 focus:!text-text': {},
+        '@apply active:shadow active:focus-outline focus:focus-outline focus:!shadow-none !outline-offset-0': {},
+        '&.is-today': {
+          '@apply !shadow-primary !text-text !bg-primary/5': {},
+        },
+        '&.is-disabled': {
+          '@apply line-through': {},
+        },
+
+        "&[aria-pressed='true']": {
+          '@apply border border-opacity-0 !bg-primary !text-white focus:!text-white': {},
+        },
+      },
+      '.duet-date__close:focus': {
+        '@apply bg-light focus-outline': {},
+        'outline-offset': '0 !important',
+      },
+    },
+  };
+};

package/src/utils/generateId.ts

@@ -0,0 +1,6 @@
+export const generateID = () => {
+  const url = URL.createObjectURL(new Blob());
+  const [id] = url.toString().split('/').reverse();
+  URL.revokeObjectURL(url);
+  return id.replace('blob:nodedata:', '');
+};

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { generateID } from './generateId.js';