@westpac/ui 0.8.0 → 0.9.0

package/.storybook/global.css

@@ -1,109 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  /* BOM fonts */
-  @font-face {
-    src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
-      url('/fonts/lineto-brown-pro-light.woff') format('woff');
-    font-family: 'Brown Pro';
-    font-weight: 300;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
-      url('/fonts/lineto-brown-pro-regular.woff') format('woff');
-    font-family: 'Brown Pro';
-    font-weight: 400;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
-      url('/fonts/lineto-brown-pro-bold.woff') format('woff');
-    font-family: 'Brown Pro';
-    font-weight: 700;
-    font-style: normal;
-  }
-
-  /* BSA fonts */
-  @font-face {
-    src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff');
-    font-family: 'Aller';
-    font-weight: 300;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff');
-    font-family: 'Aller';
-    font-weight: 700;
-    font-style: normal;
-  }
-
-  /* RAMS fonts */
-  @font-face {
-    src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),
-      url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
-    font-family: 'Source Sans Pro';
-    font-weight: normal;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'),
-      url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff');
-    font-family: 'Source Sans Pro';
-    font-weight: 600;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'),
-      url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff');
-    font-family: 'Source Sans Pro';
-    font-weight: 700;
-    font-style: normal;
-  }
-
-  /* STG fonts */
-  @font-face {
-    src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
-      url('/fonts/dragonbold-bold-webfont.woff') format('woff');
-    font-family: 'Dragon Bold';
-    font-weight: 400;
-    font-style: normal;
-  }
-
-  /* WBC fonts */
-  @font-face {
-    src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
-    font-family: 'Westpac';
-    font-weight: 400;
-    font-style: normal;
-  }
-
-  /* WBG fonts */
-  @font-face {
-    src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'),
-      url('/fonts/montserrat-v14-latin-300.woff') format('woff');
-    font-family: 'Montserrat';
-    font-weight: 300;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
-      url('/fonts/montserrat-v14-latin-regular.woff') format('woff');
-    font-family: 'Montserrat';
-    font-weight: 400;
-    font-style: normal;
-  }
-  @font-face {
-    src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'),
-      url('/fonts/montserrat-v14-latin-700.woff') format('woff');
-    font-family: 'Montserrat';
-    font-weight: 700;
-    font-style: normal;
-  }
-
-  body {
-    @apply typography-body-11;
-  }
-}

package/.storybook/main.ts

@@ -1,33 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-import { mergeConfig } from 'vite';
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-styling',
-    '@storybook/addon-actions',
-    '@storybook/addon-a11y',
-  ],
-  framework: {
-    name: '@storybook/react-vite',
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-  staticDirs: ['../assets/storybook'],
-  async viteFinal(config) {
-    return mergeConfig(config, {
-      optimizeDeps: {
-        exclude: ['@duetds/date-picker/dist/loader'],
-      },
-      define: {
-        'process.env': {},
-      },
-    });
-  },
-};
-export default config;

package/.storybook/manager.ts

@@ -1,6 +0,0 @@
-import { addons } from '@storybook/manager-api';
-import theme from './theme';
-
-addons.setConfig({
-  theme: theme,
-});

package/.storybook/preview.tsx

@@ -1,91 +0,0 @@
-import type { Preview } from '@storybook/react';
-import './global.css';
-import * as React from 'react';
-
-const withThemeProvider = (Story, context) => {
-  const theme = context.globals?.theme || 'WBC';
-  return (
-    <div data-theme={theme.toLowerCase()} className="p-4">
-      <Story />
-    </div>
-  );
-};
-
-const systemViewports = {
-  xs: {
-    name: 'XS',
-    styles: {
-      width: '375px',
-      height: '801px',
-    },
-  },
-  xsl: {
-    name: 'XSL',
-    styles: {
-      width: '576px',
-      height: '801px',
-    },
-  },
-  sm: {
-    name: 'SM',
-    styles: {
-      width: '768px',
-      height: '801px',
-    },
-  },
-  md: {
-    name: 'MD',
-    styles: {
-      width: '992px',
-      height: '801px',
-    },
-  },
-  lg: {
-    name: 'LG',
-    styles: {
-      width: '1200px',
-      height: '801px',
-    },
-  },
-  xl: {
-    name: 'XL',
-    styles: {
-      width: '1900px',
-      height: '801px',
-    },
-  },
-};
-
-const preview: Preview = {
-  globalTypes: {
-    theme: {
-      description: 'Global theme for components',
-      defaultValue: 'WBC',
-      toolbar: {
-        // The label to show for this toolbar item
-        title: 'Theme',
-        icon: 'paintbrush',
-        // Array of plain string values or MenuItem shape (see below)
-        items: ['BOM', 'BSA', 'BTFG', 'RAMS', 'STG', 'WBC', 'WBG'],
-        // Change title based on selected value
-        dynamicTitle: true,
-      },
-    },
-  },
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-    layout: 'fullscreen',
-    viewport: {
-      viewports: systemViewports,
-    },
-  },
-  decorators: [withThemeProvider],
-};
-
-export default preview;

package/.storybook/theme.ts

@@ -1,9 +0,0 @@
-import { create } from '@storybook/theming/create';
-
-export default create({
-  base: 'light',
-  brandTitle: 'GEL Next',
-  brandImage: '/gel-icon.svg',
-  brandTarget: '_self',
-  colorSecondary: '#DA1710',
-});

package/dist/tailwind/types/theme.types.d.ts

@@ -1 +0,0 @@
-export type SPACING_KEY = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35;

package/dist/tailwind/types/theme.types.js

@@ -1 +0,0 @@
-export { };

package/scaffold/component/scaffold.component.hbs

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { styles } from './{{kebabCase name}}.styles.js';
-import { type {{name}}Props } from './{{kebabCase name}}.types.js';
-
-export function {{name}}({ className, tag: Tag = 'div', children, ...props }: {{name}}Props) {
-  return (
-    <Tag className={styles({ className })} {...props}>
-      {children}
-    </Tag>
-  );
-}

package/scaffold/component/scaffold.index.hbs

@@ -1,2 +0,0 @@
-export { {{name}} } from './{{kebabCase name}}.component.js';
-export { type {{name}}Props } from './{{kebabCase name}}.types.js';

package/scaffold/component/scaffold.spec.hbs

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { {{name}} } from './{{kebabCase name}}.component.js';
-import { styles } from './{{kebabCase name}}.styles.js';
-
-describe('{{name}}', () => {
-  it('renders the component', () => {
-    const { container } = render(<{{name}} />);
-    expect(container).toBeInTheDocument();
-  });
-  it('renders the style correctly', () => {
-    const style = styles();
-    // TODO: use some variants for test
-    expect(style).toBe('');
-  });
-});

package/scaffold/component/scaffold.stories.hbs

@@ -1,23 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { {{name}} } from './{{kebabCase name}}.component.js';
-
-const meta: Meta<typeof {{name}}> = {
-  title: 'Components/{{name}}',
-  component: {{name}},
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const DefaultStory: Story = {
-  args: {},
-};

package/scaffold/component/scaffold.styles.hbs

@@ -1,9 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    base: '',
-    variants: {},
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);

package/scaffold/component/scaffold.types.hbs

@@ -1,12 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './{{kebabCase name}}.styles.js';
-
-export type {{name}}Props = {
-  /**
-   * Tag to render
-   */
-  tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;

package/src/tailwind/types/theme.types.ts

@@ -1,37 +0,0 @@
-export type SPACING_KEY =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17
-  | 18
-  | 19
-  | 20
-  | 21
-  | 22
-  | 23
-  | 24
-  | 25
-  | 26
-  | 27
-  | 28
-  | 29
-  | 30
-  | 31
-  | 32
-  | 33
-  | 34
-  | 35;