npm - @westpac/ui - Versions diffs - 0.3.0 → 0.5.0 - Mend

@westpac/ui 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (909) hide show

package/dist/hook/index.d.ts ADDED Viewed

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

package/dist/hook/index.js ADDED Viewed

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

package/dist/tailwind/constants/colors.d.ts CHANGED Viewed

@@ -9,10 +9,10 @@ export declare const COLORS: {
     white: string;
     black: string;
     link: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -22,10 +22,10 @@ export declare const COLORS: {
         900: string;
     };
     text: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -35,10 +35,10 @@ export declare const COLORS: {
         900: string;
     };
     border: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -48,10 +48,10 @@ export declare const COLORS: {
         900: string;
     };
     heading: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -60,11 +60,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    primary: {
+    background: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -73,11 +73,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    hero: {
+    borderDark: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -86,11 +86,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    background: {
+    focus: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -99,11 +99,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    borderDark: {
+    hero: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -112,11 +112,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    focus: {
+    light: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -125,11 +125,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    light: {
+    muted: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -138,11 +138,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    muted: {
+    neutral: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -151,11 +151,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    neutral: {
+    pop: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;
@@ -164,11 +164,11 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    pop: {
+    primary: {
+        100: string;
         200: string;
         50: string;
         DEFAULT: string;
-        100: string;
         300: string;
         400: string;
         500: string;

package/dist/tailwind/constants/spacing.d.ts CHANGED Viewed

@@ -24,6 +24,7 @@ export declare const SPACING: {
     18: string;
     19: string;
     20: string;
+    31: string;
     26: string;
     32: string;
     28: string;
@@ -36,6 +37,5 @@ export declare const SPACING: {
     24: string;
     27: string;
     29: string;
-    31: string;
     33: string;
 };

package/dist/tailwind/tailwind-plugin.js CHANGED Viewed

@@ -4,6 +4,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';
 export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , addBase , theme  })=>{
     addBase({
@@ -21,6 +22,7 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
     });
     addComponents(generateFontComponents(theme('typographySizes'), theme));
     addComponents(generateFormControlComponents(theme('formControl')));
+    addComponents(generateDatePicker());
 }, {
     theme: {
         screens: BREAKPOINTS,
@@ -48,10 +50,21 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
                     '100%': {
                         opacity: '1'
                     }
+                },
+                fadeInDown: {
+                    '0%': {
+                        opacity: '0',
+                        transform: 'translateY(-10vh)'
+                    },
+                    '100%': {
+                        opacity: '1',
+                        transform: 'translateY(0)'
+                    }
                 }
             },
             animation: {
-                fadeIn: 'fadeIn 0.2s ease'
+                fadeIn: 'fadeIn 0.2s ease',
+                fadeInDown: 'fadeInDown 0.4s ease'
             },
             boxShadow: {
                 switch: '0.1875rem 0 0.375rem 0 rgba(0,0,0,0.53)'
@@ -110,10 +123,10 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
             base: 'no-inner-spin-button box-border w-fit appearance-none overflow-visible rounded border bg-white align-middle text-text transition placeholder:font-light placeholder:text-text-50 placeholder:opacity-100 focus:focus-outline disabled:form-control-disabled',
             disabled: 'cursor-not-allowed border-dashed bg-background text-muted',
             sizes: {
-                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/dist/tailwind/tailwind-transformer.d.ts CHANGED Viewed

@@ -1,5 +1,9 @@
 import { type Config } from 'tailwindcss';
 export declare const withGEL: (config: Config) => {
+    safelist: (string | {
+        pattern: RegExp;
+        variants?: string[] | undefined;
+    } | undefined)[];
     plugins: (import("tailwindcss/types/config.js").PluginCreator | {
         handler: import("tailwindcss/types/config.js").PluginCreator;
         config?: Partial<Config> | undefined;
@@ -8,10 +12,6 @@ export declare const withGEL: (config: Config) => {
     important?: Partial<import("tailwindcss/types/config.js").ImportantConfig> | undefined;
     prefix?: string | undefined;
     separator?: string | undefined;
-    safelist?: (string | {
-        pattern: RegExp;
-        variants?: string[] | undefined;
-    } | undefined)[] | undefined;
     blocklist?: (string | undefined)[] | undefined;
     presets?: (Config | undefined)[] | undefined;
     future?: Partial<import("tailwindcss/types/config.js").FutureConfig> | undefined;

package/dist/tailwind/tailwind-transformer.js CHANGED Viewed

@@ -2,6 +2,13 @@ import { withTV } from 'tailwind-variants/transformer';
 import { WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin } from '@westpac/ui/tailwind';
 export const withGEL = (config)=>withTV({
         ...config,
+        safelist: [
+            'date-picker',
+            ...typeof config.safelist === 'string' ? [
+                config.safelist
+            ] : [],
+            ...Array.isArray(config.safelist) ? config.safelist : []
+        ],
         plugins: [
             WestpacUIKitBasePlugin,
             WestpacUIKitThemesPlugin,

package/dist/tailwind/themes/index.d.ts CHANGED Viewed

@@ -8,10 +8,10 @@ export declare const THEMES: {
         };
         colors: {
             link: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -21,10 +21,10 @@ export declare const THEMES: {
                 900: string;
             };
             text: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -34,10 +34,10 @@ export declare const THEMES: {
                 900: string;
             };
             border: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -47,10 +47,10 @@ export declare const THEMES: {
                 900: string;
             };
             heading: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -59,11 +59,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            primary: {
+            white: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -72,11 +72,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            hero: {
+            black: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -85,11 +85,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            white: {
+            background: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -98,11 +98,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            black: {
+            borderDark: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -111,11 +111,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            background: {
+            focus: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -124,11 +124,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            borderDark: {
+            hero: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -137,11 +137,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            focus: {
+            light: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -150,11 +150,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            light: {
+            muted: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -163,11 +163,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            muted: {
+            neutral: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -176,11 +176,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            neutral: {
+            pop: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;
@@ -189,11 +189,11 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            pop: {
+            primary: {
+                100: string;
                 200: string;
                 50: string;
                 DEFAULT: string;
-                100: string;
                 300: string;
                 400: string;
                 500: string;

package/dist/tailwind/utils/generate-date-picker-component.d.ts ADDED Viewed

@@ -0,0 +1,98 @@
+export declare const generateDatePicker: () => {
+    '.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': string;
+            svg: {
+                '@apply hidden': {};
+            };
+        };
+        '&.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]': {};
+            };
+        };
+        '.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': string;
+        };
+        '.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': string;
+        };
+    };
+};

package/dist/tailwind/utils/generate-date-picker-component.js ADDED Viewed

@@ -0,0 +1,100 @@
+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': {}
+                }
+            },
+            '&.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]': {}
+                }
+            },
+            '.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'
+            },
+            '.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/dist/utils/generateId.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const generateID: () => string;

package/dist/utils/generateId.js ADDED Viewed

@@ -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/dist/utils/index.d.ts ADDED Viewed

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

package/dist/utils/index.js ADDED Viewed

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