@westpac/ui 0.1.0 → 0.2.0

package/dist/tailwind/__mocks__/{utils.contansts.d.ts → utils.constants.d.ts}

@@ -64,29 +64,29 @@ export declare const TEST_COLORS: {
 };
 export declare const EXPECTED_COLORS: {
     background: {
-        100: string;
-        200: string;
-        300: string;
-        400: string;
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
         50: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
         DEFAULT: string;
     };
     border: {
-        100: string;
-        200: string;
-        300: string;
-        400: string;
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
         50: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
         DEFAULT: string;
     };
 };

package/dist/tailwind/__mocks__/{utils.contansts.js → utils.constants.js}

@@ -64,29 +64,29 @@ export const TEST_COLORS = {
 };
 export const EXPECTED_COLORS = {
     background: {
-        100: '#FFAAAA',
-        200: '#FF7F7F',
-        300: '#FF5555',
-        400: '#FF2A2A',
-        50: '#FFD4D4',
-        500: '#FF0000',
-        600: '#D50000',
-        700: '#AA0000',
-        800: '#800000',
-        900: '#550000',
+        5: '#FFF2F2',
+        10: '#FFE6E6',
+        20: '#FCC',
+        30: '#FFB3B3',
+        40: '#F99',
+        50: '#FF8080',
+        60: '#F66',
+        70: '#FF4D4D',
+        80: '#F33',
+        90: '#FF1A1A',
         DEFAULT: '#F00'
     },
     border: {
-        100: '#AAFFAA',
-        200: '#7FFF7F',
-        300: '#55FF55',
-        400: '#2AFF2A',
-        50: '#D4FFD4',
-        500: '#00FF00',
-        600: '#00D500',
-        700: '#00AA00',
-        800: '#008000',
-        900: '#005500',
+        5: '#F2FFF2',
+        10: '#E6FFE6',
+        20: '#CFC',
+        30: '#B3FFB3',
+        40: '#9F9',
+        50: '#80FF80',
+        60: '#6F6',
+        70: '#4DFF4D',
+        80: '#3F3',
+        90: '#1AFF1A',
         DEFAULT: '#0F0'
     }
 };

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

@@ -60,7 +60,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    hero: {
+    primary: {
         DEFAULT: string;
         50: string;
         100: string;
@@ -73,7 +73,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    primary: {
+    hero: {
         DEFAULT: string;
         50: string;
         100: string;
@@ -86,7 +86,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    light: {
+    background: {
         DEFAULT: string;
         50: string;
         100: string;
@@ -99,7 +99,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    background: {
+    borderDark: {
         DEFAULT: string;
         50: string;
         100: string;
@@ -112,7 +112,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    borderDark: {
+    focus: {
         DEFAULT: string;
         50: string;
         100: string;
@@ -125,7 +125,7 @@ export declare const COLORS: {
         800: string;
         900: string;
     };
-    focus: {
+    light: {
         DEFAULT: string;
         50: string;
         100: string;

package/dist/tailwind/constants/colors.js

@@ -1,4 +1,4 @@
-import { generateColorShades } from '../utils/generate-color-shades.js';
+import { generateColorTints } from '../utils/generate-color-tints.js';
 export const BASE_COLORS = {
     success: '#008000',
     info: '#0074C4',
@@ -7,7 +7,7 @@ export const BASE_COLORS = {
     system: '#FF0'
 };
 export const COLORS = {
-    ...generateColorShades(BASE_COLORS),
+    ...generateColorTints(BASE_COLORS),
     white: '#FFF',
     black: '#000'
 };

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

@@ -5,6 +5,7 @@ export declare const SPACING: {
     0: string;
     1: string;
     2: string;
+    22: string;
     3: string;
     4: string;
     5: string;
@@ -23,8 +24,8 @@ export declare const SPACING: {
     18: string;
     19: string;
     20: string;
+    30: string;
     21: string;
-    22: string;
     23: string;
     24: string;
     25: string;
@@ -32,7 +33,6 @@ export declare const SPACING: {
     27: string;
     28: string;
     29: string;
-    30: string;
     31: string;
     32: string;
     33: string;

package/dist/tailwind/tailwind-plugin.js

@@ -4,14 +4,23 @@ 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 { createFontSizes, generateFontComponents } from './utils/index.js';
-export const WestpacUIKitBasePlugin = plugin(({ addComponents , addBase , theme  })=>{
+import { createFontSizes, generateFontComponents, generateFormControlComponents } from './utils/index.js';
+export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , addBase , theme  })=>{
     addBase({
         html: {
             color: theme('colors.text.DEFAULT')
         }
     });
+    addUtilities({
+        '.focus-outline': {
+            [`@apply ${theme('focusOutline')}`]: {}
+        },
+        '.select-caret': {
+            backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' style='color: rgb(89,87,103);'><path fill='currentColor' d='M0 0l7 8 7-8z'/></svg>\")"
+        }
+    });
     addComponents(generateFontComponents(theme('typographySizes'), theme));
+    addComponents(generateFormControlComponents(theme('formControl')));
 }, {
     theme: {
         screens: BREAKPOINTS,
@@ -27,6 +36,9 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addBase , theme
                 tight: '1.2',
                 normal: '1.4'
             },
+            borderWidth: {
+                5: '0.3125rem'
+            },
             fontSize: createFontSizes(FONT_TYPES),
             keyframes: {
                 fadeIn: {
@@ -83,7 +95,18 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addBase , theme
                 fontSize: '0.875rem',
                 lineHeight: 'normal'
             }
-        }
+        },
+        formControl: {
+            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]',
+                large: 'px-[0.9375rem] py-[0.5rem] text-base',
+                xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg'
+            }
+        },
+        focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus'
     }
 });
 export const WestpacUIKitThemesPlugin = createThemes({

package/dist/tailwind/themes/bom.js

@@ -1,7 +1,7 @@
-import { generateColorShades } from '../utils/generate-color-shades.js';
+import { generateColorTints } from '../utils/generate-color-tints.js';
 export const theme = {
     code: 'BOM',
-    colors: generateColorShades({
+    colors: generateColorTints({
         background: '#F7F7F7',
         border: '#D4D4D8',
         borderDark: '#939299',

package/dist/tailwind/themes/bsa.js

@@ -1,7 +1,7 @@
-import { generateColorShades } from '../utils/generate-color-shades.js';
+import { generateColorTints } from '../utils/generate-color-tints.js';
 export const theme = {
     code: 'BSA',
-    colors: generateColorShades({
+    colors: generateColorTints({
         background: '#F3F4F4',
         border: '#D3D4D5',
         borderDark: '#909396',

package/dist/tailwind/themes/btfg.js

@@ -1,7 +1,7 @@
-import { generateColorShades } from '../utils/generate-color-shades.js';
+import { generateColorTints } from '../utils/generate-color-tints.js';
 export const theme = {
     code: 'BTFG',
-    colors: generateColorShades({
+    colors: generateColorTints({
         background: '#F9F9F9',
         border: '#E0E0E0',
         borderDark: '#949494',

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

@@ -59,7 +59,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            hero: {
+            primary: {
                 DEFAULT: string;
                 50: string;
                 100: string;
@@ -72,7 +72,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            primary: {
+            hero: {
                 DEFAULT: string;
                 50: string;
                 100: string;
@@ -85,7 +85,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            light: {
+            white: {
                 DEFAULT: string;
                 50: string;
                 100: string;
@@ -98,7 +98,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            white: {
+            black: {
                 DEFAULT: string;
                 50: string;
                 100: string;
@@ -111,7 +111,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            black: {
+            background: {
                 DEFAULT: string;
                 50: string;
                 100: string;
@@ -124,7 +124,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            background: {
+            borderDark: {
                 DEFAULT: string;
                 50: string;
                 100: string;
@@ -137,7 +137,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            borderDark: {
+            focus: {
                 DEFAULT: string;
                 50: string;
                 100: string;
@@ -150,7 +150,7 @@ export declare const THEMES: {
                 800: string;
                 900: string;
             };
-            focus: {
+            light: {
                 DEFAULT: string;
                 50: string;
                 100: string;

package/dist/tailwind/themes/rams.js

@@ -1,7 +1,7 @@
-import { generateColorShades } from '../utils/generate-color-shades.js';
+import { generateColorTints } from '../utils/generate-color-tints.js';
 export const theme = {
     code: 'RAMS',
-    colors: generateColorShades({
+    colors: generateColorTints({
         background: '#F3F4F4',
         border: '#D3D4D5',
         borderDark: '#909396',

package/dist/tailwind/themes/stg.js

@@ -1,7 +1,7 @@
-import { generateColorShades } from '../utils/generate-color-shades.js';
+import { generateColorTints } from '../utils/generate-color-tints.js';
 export const theme = {
     code: 'STG',
-    colors: generateColorShades({
+    colors: generateColorTints({
         background: '#F5F5F4',
         border: '#D6D5D0',
         borderDark: '#949386',

package/dist/tailwind/themes/wbc.js

@@ -1,7 +1,7 @@
-import { generateColorShades } from '../utils/generate-color-shades.js';
+import { generateColorTints } from '../utils/generate-color-tints.js';
 export const theme = {
     code: 'WBC',
-    colors: generateColorShades({
+    colors: generateColorTints({
         background: '#F3F4F6',
         border: '#DEDEE1',
         borderDark: '#9390A2',

package/dist/tailwind/themes/wbg.js

@@ -1,7 +1,7 @@
-import { generateColorShades } from '../utils/generate-color-shades.js';
+import { generateColorTints } from '../utils/generate-color-tints.js';
 export const theme = {
     code: 'WBG',
-    colors: generateColorShades({
+    colors: generateColorTints({
         background: '#F3F5F6',
         border: '#D3D3D3',
         borderDark: '#91979A',

package/dist/tailwind/utils/{generate-color-shades.d.ts → generate-color-tints.d.ts}

@@ -1,4 +1,4 @@
 import { BrandConfig } from '../index.js';
 type ColorConfig = BrandConfig['colors'];
-export declare const generateColorShades: (color: Record<string, string>) => ColorConfig;
+export declare const generateColorTints: (color: Record<string, string>) => ColorConfig;
 export {};

package/dist/tailwind/utils/generate-color-tints.js

@@ -0,0 +1,33 @@
+import Color from 'colorjs.io';
+export const generateColorTints = (color)=>{
+    return Object.entries(color).reduce((acc, [colorKey, colorValue])=>{
+        const color = new Color(colorValue);
+        const tints = [
+            5,
+            10,
+            20,
+            30,
+            40,
+            50,
+            60,
+            70,
+            80,
+            90
+        ].reduce((acc2, curr)=>{
+            return {
+                ...acc2,
+                [curr]: color.mix('white', (100 - curr) / 100, {
+                    space: 'srgb'
+                }).toString({
+                    format: 'hex'
+                }).toUpperCase()
+            };
+        }, {
+            DEFAULT: colorValue
+        });
+        return {
+            ...acc,
+            [colorKey]: tints
+        };
+    }, {});
+};

package/dist/tailwind/utils/generate-form-control.d.ts

@@ -0,0 +1,16 @@
+export declare const generateFormControlComponents: (formControlProps: {
+    base: string;
+    disabled: string;
+    sizes: Record<string, string>;
+}) => {
+    '.form-control-disabled': {
+        [x: string]: {};
+    };
+    '.no-inner-spin-button::-webkit-outer-spin-button, .no-inner-spin-button::-webkit-inner-spin-button': {
+        margin: string;
+        appearance: string;
+    };
+    '.form-control': {
+        [x: string]: {};
+    };
+};

package/dist/tailwind/utils/generate-form-control.js

@@ -0,0 +1,23 @@
+export const generateFormControlComponents = (formControlProps)=>{
+    const sizes = Object.entries(formControlProps.sizes).reduce((acc, [size, value])=>{
+        return {
+            ...acc,
+            [`.form-control-${size}`]: {
+                [`@apply ${value}`]: {}
+            }
+        };
+    }, {});
+    return {
+        '.form-control': {
+            [`@apply ${formControlProps.base}`]: {}
+        },
+        ...sizes,
+        '.form-control-disabled': {
+            [`@apply ${formControlProps.disabled}`]: {}
+        },
+        '.no-inner-spin-button::-webkit-outer-spin-button, .no-inner-spin-button::-webkit-inner-spin-button': {
+            margin: '0',
+            appearance: 'none'
+        }
+    };
+};

package/dist/tailwind/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { createSpacing } from './create-spacing.js';
-export { generateColorShades } from './generate-color-shades.js';
+export { generateColorTints } from './generate-color-tints.js';
 export { createFontSizes } from './create-font-sizes.js';
 export { generateFontComponents } from './generate-font-components.js';
+export { generateFormControlComponents } from './generate-form-control.js';

package/dist/tailwind/utils/index.js

@@ -1,4 +1,5 @@
 export { createSpacing } from './create-spacing.js';
-export { generateColorShades } from './generate-color-shades.js';
+export { generateColorTints } from './generate-color-tints.js';
 export { createFontSizes } from './create-font-sizes.js';
 export { generateFontComponents } from './generate-font-components.js';
+export { generateFormControlComponents } from './generate-form-control.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -32,6 +32,7 @@
     "!**/*.{test,spec}.{ts,tsx,js,jsx}"
   ],
   "devDependencies": {
+    "@react-types/accordion": "3.0.0-alpha.14",
     "@storybook/addon-essentials": "^7.0.21",
     "@storybook/addon-interactions": "^7.0.21",
     "@storybook/addon-links": "^7.0.21",
@@ -45,18 +46,23 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "~14.4.3",
+    "@types/prettier": "~2.7.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.2.1",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react-swc": "^3.3.0",
     "@vitest/coverage-c8": "^0.31.0",
     "chokidar": "^3.5.3",
+    "colorjs.io": "~0.4.5",
+    "cross-env": "~7.0.3",
     "eslint": "^7.32.0",
     "eslint-plugin-storybook": "~0.6.12",
+    "glob": "~10.3.3",
     "jsdom": "^22.0.0",
     "plop": "~3.1.2",
     "postcss": "~8.4.24",
     "postcss-cli": "~10.1.0",
+    "prettier": "^2.8.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -65,28 +71,33 @@
     "tailwind-variants": "~0.1.13",
     "tailwindcss": "~3.3.2",
     "tailwindcss-themer": "~3.1.0",
+    "ts-node": "~10.9.1",
     "typescript": "^5.1.6",
-    "values.js": "~2.1.1",
     "vite": "^4.3.4",
     "vitest": "^0.30.1"
   },
   "dependencies": {
+    "@react-aria/accordion": "3.0.0-alpha.19",
+    "@react-aria/utils": "~3.18.0",
+    "@react-spectrum/utils": "~3.10.0",
+    "@react-types/tabs": "~3.3.0",
     "clsx": "^1.2.1",
     "framer-motion": "~10.12.16",
     "react-aria": "~3.25.0",
     "react-stately": "~3.23.0",
-    "@westpac/eslint-config": "~0.0.0",
+    "@westpac/eslint-config": "~0.1.0",
     "@westpac/test-config": "~0.0.0",
     "@westpac/ts-config": "~0.0.0"
   },
   "scripts": {
     "dev": "pnpm build:watch",
     "clean": "shx rm -rf dist",
-    "build:css:min": "shx mkdir -p dist/css && NPM_ENV=production postcss src/css/global.css  > dist/css/westpac-ui.min.css",
-    "build:css": "shx mkdir -p dist/css && NPM_ENV=development postcss src/css/global.css  > dist/css/westpac-ui.css",
+    "build:css:min": "shx mkdir -p dist/css && cross-env NPM_ENV=production postcss src/css/global.css  > dist/css/westpac-ui.min.css",
+    "build:css": "shx mkdir -p dist/css && cross-env NPM_ENV=development postcss src/css/global.css  > dist/css/westpac-ui.css",
     "build:css:all": "pnpm build:css && pnpm build:css:min",
     "build:types": "tsc --project tsconfig.build.json",
     "build:esm": "swc ./src -d dist --no-swcrc --config-file .swcrc",
+    "build:icons": "ts-node --esm ./utils/build-icons/index.ts",
     "build:watch": "pnpm clean && pnpm build:types && pnpm build:esm -w && pnpm build:css:all",
     "build": "pnpm clean && pnpm build:types && pnpm build:esm && pnpm build:css:all",
     "check-types": "tsc --noemit --emitDeclarationOnly false",

package/src/components/accordion/accordion.component.tsx

@@ -0,0 +1,58 @@
+import { useAccordion } from '@react-aria/accordion';
+import { filterDOMProps } from '@react-aria/utils';
+import { useDOMRef } from '@react-spectrum/utils';
+import React, { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import { Item, useTreeState } from 'react-stately';
+
+import { styles } from './accordion.styles.js';
+import { type AccordionProps } from './accordion.types.js';
+import { AccordionItem } from './components/index.js';
+
+function Accordion<T extends object>(
+  { className, color, rounded = true, look = 'default', ...props }: AccordionProps<T>,
+  ref: any,
+) {
+  // react-aria doesn't allow for now to use component children when there is multiple levels
+  // in our case we don't need that functionality and we have to render html tags or components
+  // therefore as a workaround we are setting hasChildItems false for all of them
+  // https://github.com/adobe/react-spectrum/issues/3882
+  const finalProps: any = {
+    ...props,
+    children: Children.map(props.children, child => {
+      // equal to (if (child == null || typeof child == 'string'))
+      if (!isValidElement(child)) return child;
+      return cloneElement(child, {
+        ...child.props,
+        // Adding hasChildItems false by default
+        hasChildItems: false,
+      });
+    }),
+  };
+  const state = useTreeState<T>(finalProps);
+  const domRef = useDOMRef<HTMLDivElement>(ref);
+  const { accordionProps } = useAccordion(finalProps, state, domRef);
+
+  return (
+    <div
+      {...filterDOMProps(finalProps)}
+      {...accordionProps}
+      ref={domRef}
+      className={styles({ className, rounded, look })}
+    >
+      <div className="mt-[-1px]">
+        {[...state.collection].map(item => (
+          <AccordionItem<T> key={item.key} item={item} state={state} color={color} look={look} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const _Accordion = forwardRef(Accordion) as unknown as { Item: typeof Item; displayName: string } & (<T>(
+  props: AccordionProps<T> & { ref?: any },
+) => ReturnType<typeof Accordion>);
+
+_Accordion.displayName = 'Accordion';
+_Accordion.Item = Item;
+
+export { _Accordion as Accordion };