@westpac/ui 0.7.0 → 0.8.0

package/src/components/symbol/symbol.types.ts

@@ -1,7 +1,4 @@
 import { type SVGAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './symbol.styles.js';
 
 export type Align = 'left' | 'center' | 'right';
 
@@ -30,4 +27,4 @@ export type SymbolProps = Omit<SVGAttributes<SVGElement>, 'offset'> & {
    * SVG viewBox width
    */
   viewBoxWidth?: number;
-} & VariantProps<typeof styles>;
+};

package/src/components/table/table.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { createContext } from 'react';
 
 import { Body, Caption, Cell, Footer, Header, HeaderCell, HeaderRow, Row } from './components/index.js';

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

@@ -5,7 +5,13 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './tab.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type TabProps<T = any> = {
+  /**
+   * Color of tab
+   */
+  color?: Variants['color'];
   /**
    * isDisabled flag
    */
@@ -14,6 +20,14 @@ export type TabProps<T = any> = {
    * Item
    */
   item: Node<T>;
+  /**
+   * Whether tab is justified
+   */
+  justify?: Variants['justify'];
+  /**
+   * Look of tab
+   */
+  look?: Variants['look'];
   /**
    * Orientation, vertical or horizontal for tab
    */
@@ -26,5 +40,4 @@ export type TabProps<T = any> = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/src/components/tabs/components/tab-panel/tab-panel.component.tsx

@@ -14,3 +14,4 @@ export function TabPanel({ className, state, look, ...props }: TabPanelProps) {
     </div>
   );
 }
+TabPanel.displayName = 'Tabs.Panel';

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

@@ -5,11 +5,16 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './tab-panel.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type TabPanelProps<T = any> = {
+  /**
+   * Look of tab panel
+   */
+  look?: Variants['look'];
   /**
    * Tab list state
    */
   state: TabListState<T>;
 } & AriaTabPanelProps &
-  VariantProps<typeof styles> &
   HTMLAttributes<Element>;

package/src/components/tabs/tabs.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef } from 'react';
 import { useTabList } from 'react-aria';
 import { Item, useTabListState } from 'react-stately';

package/src/components/tabs/tabs.types.ts

@@ -5,27 +5,40 @@ import { type VariantProps } from 'tailwind-variants';
 import { TabProps } from './components/index.js';
 import { styles } from './tabs.styles.js';
 
-export type TabsProps<T = any> = SpectrumTabsProps<T> &
-  VariantProps<typeof styles> & {
-    /**
-     * Children
-     */
-    children: ReactElement | ReactElement[];
-    /**
-     * Colors
-     */
-    color?: TabProps['color'];
-    /**
-     * Stretch the tab to fill the whole content
-     */
-    justify?: boolean;
-    /**
-     * set the offset for the sticky tab
-     */
-    stickyOffset?: {
-      bottom?: string;
-      left?: string;
-      right?: string;
-      top?: string;
-    };
-  } & HTMLAttributes<HTMLDivElement>;
+type Variants = VariantProps<typeof styles>;
+
+export type TabsProps<T = any> = SpectrumTabsProps<T> & {
+  /**
+   * Children
+   */
+  children: ReactElement | ReactElement[];
+  /**
+   * Colors
+   */
+  color?: TabProps['color'];
+  /**
+   * Stretch the tab to fill the whole content
+   */
+  justify?: boolean;
+  /**
+   * Look of tabs
+   */
+  look?: Variants['look'];
+  /**
+   * Orientation of tabs
+   */
+  orientation?: Variants['orientation'];
+  /**
+   * Sticky
+   */
+  sticky?: Variants['sticky'];
+  /**
+   * set the offset for the sticky tab
+   */
+  stickyOffset?: {
+    bottom?: string;
+    left?: string;
+    right?: string;
+    top?: string;
+  };
+} & HTMLAttributes<HTMLDivElement>;

package/src/components/textarea/textarea.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ForwardedRef, forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 

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 w-full',
+    base: 'form-control w-full read-only:form-control-disabled disabled:form-control-disabled',
     variants: {
       size: {
         small: 'form-control-small min-h-[3.375rem]',

package/src/components/textarea/textarea.types.ts

@@ -3,4 +3,15 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './textarea.styles.js';
 
-export type TextareaProps = VariantProps<typeof styles> & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
+type Variants = VariantProps<typeof styles>;
+
+export type TextareaProps = {
+  /**
+   * Whether text area is invalid
+   */
+  invalid?: Variants['invalid'];
+  /**
+   * Size of text area
+   */
+  size?: Variants['size'];
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;

package/src/components/visually-hidden/visually-hidden.types.ts

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

package/src/components/well/well.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'rounded border border-border p-2 sm:p-4',
+    base: 'rounded-[0.1875rem] border border-border p-2 sm:p-4',
     variants: {
       color: {
         light: 'bg-light',

package/src/components/well/well.types.tsx

@@ -3,14 +3,19 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './well.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type WellProps = {
   /**
    * Well's content
    */
   children: ReactNode;
+  /**
+   * Color of well
+   */
+  color?: Variants['color'];
   /**
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & HTMLAttributes<Element> &
-  VariantProps<typeof styles>;
+} & HTMLAttributes<Element>;

package/src/css/global.css

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply typography-body-10;
+@layer base {
+  body {
+    @apply typography-body-11;
+  }
 }

package/src/index.ts

@@ -1 +1,2 @@
 export * from './components/index.js';
+export * from './types/index.js';

package/src/tailwind/__mocks__/utils.constants.ts

@@ -40,6 +40,7 @@ export const EXPECTED_SPACING = {
 export const EXPECTED_FONT_SIZES_VARS = {
   'body-1': '3.75rem',
   'body-10': '0.875rem',
+  'body-11': '0.875rem',
   'body-2': '3.375rem',
   'body-3': '3rem',
   'body-4': '2.625rem',
@@ -50,6 +51,7 @@ export const EXPECTED_FONT_SIZES_VARS = {
   'body-9': '1rem',
   'brand-1': '3.75rem',
   'brand-10': '0.875rem',
+  'brand-11': '0.875rem',
   'brand-2': '3.375rem',
   'brand-3': '3rem',
   'brand-4': '2.625rem',

package/src/tailwind/constants/typography.ts

@@ -53,4 +53,8 @@ export const FONT_SIZES = {
     fontSize: '0.875rem',
     lineHeight: 'normal',
   },
+  11: {
+    fontSize: '0.875rem',
+    lineHeight: 'loose',
+  },
 };

package/src/tailwind/tailwind-plugin.ts

@@ -48,6 +48,8 @@ export const WestpacUIKitBasePlugin = plugin(
         lineHeight: {
           tight: '1.2',
           normal: '1.4',
+          // See https://stackoverflow.com/questions/19982651/why-does-bootstrap-set-the-line-height-property-to-1-428571429 for below line height reasoning
+          loose: '1.428571429',
         },
         borderWidth: {
           5: '0.3125rem',
@@ -125,6 +127,10 @@ export const WestpacUIKitBasePlugin = plugin(
           fontSize: '0.875rem',
           lineHeight: 'normal',
         },
+        11: {
+          fontSize: '0.875rem',
+          lineHeight: 'loose',
+        },
       },
       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',

package/src/types/component-props.types.ts

@@ -0,0 +1,3 @@
+import { ComponentDoc } from 'react-docgen-typescript';
+
+export type ComponentProps = ComponentDoc;

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './component-props.types.js';

package/utils/build-icons/index.ts

@@ -1,7 +1,9 @@
-import path from 'path';
 import fs from 'fs';
+import path from 'path';
+
 import { glob } from 'glob';
 import prettier from 'prettier';
+
 import { iconTemplate } from './icon-template.js';
 
 const prettierConfig = prettier.resolveConfig.sync(path.join(process.cwd(), '../../.prettierrc'));
@@ -28,7 +30,7 @@ const formatIconName = (icon: string) => {
  * @param {boolean} addFragment - extra condition to add fragment, used to filer cases where filled and outlined use the same svg
  * @returns {string} - formatted svg path for use as react child
  */
-const formatSVG = (svg: Buffer, pathCount: number, addFragment: Boolean) => {
+const formatSVG = (svg: Buffer, pathCount: number, addFragment: boolean) => {
   const iconPaths = svg
     .toString()
     .replace(/<\/?svg[^>]*>/g, '')
@@ -99,6 +101,7 @@ const main = async () => {
   }
 
   iconNames.sort();
+  iconNames.push(`\nexport { Icon } from './icon.component.js';`);
   iconNames.push(`\nexport { type IconProps } from './icon.types.js';\n`);
   await fs.promises.writeFile(path.join(process.cwd(), 'src/components/icon/index.ts'), iconNames.join('\n'));
 

package/dist/components/accordion/accordion.stories.js

@@ -1,131 +0,0 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
-import { useState } from 'react';
-import { Button } from '../index.js';
-import { Accordion } from './accordion.component.js';
-const meta = {
-    title: 'Components/Accordion',
-    component: Accordion,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>{
-            Accordion.Item.displayName = 'Accordion.Item';
-            return React.createElement(Story, null);
-        }
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        rounded: true,
-        color: undefined,
-        children: [
-            {
-                key: 'files',
-                title: 'My files'
-            },
-            {
-                key: 'shared',
-                title: 'Shared with us'
-            },
-            {
-                key: 'last',
-                title: 'Last item'
-            }
-        ].map(({ key , title  })=>React.createElement(Accordion.Item, {
-                key: key,
-                title: title
-            }, React.createElement("h3", null, title), React.createElement("p", null, "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam!"), React.createElement(Button, null, "Test")))
-    }
-};
-export const PrimaryColor = {
-    args: {
-        color: 'primary',
-        rounded: false
-    },
-    render: ({ ...props })=>React.createElement(Accordion, _extends({}, props), [
-            {
-                key: 'colors',
-                title: 'Your colors'
-            },
-            {
-                key: 'shared',
-                title: 'Shared color'
-            },
-            {
-                key: 'last',
-                title: 'Last item'
-            }
-        ].map(({ key , title  })=>React.createElement(Accordion.Item, {
-                key: key,
-                title: title
-            }, React.createElement("p", null, title), React.createElement(Button, null, "Test"))))
-};
-export const HeroColor = {
-    args: {
-        color: 'hero',
-        rounded: false
-    },
-    render: ({ ...props })=>React.createElement(Accordion, _extends({}, props), [
-            {
-                key: 'files',
-                title: 'My files'
-            },
-            {
-                key: 'shared',
-                title: 'my shared with you'
-            },
-            {
-                key: 'last',
-                title: 'Last item'
-            }
-        ].map(({ key , title  })=>React.createElement(Accordion.Item, {
-                key: key,
-                title: title
-            }, React.createElement("p", null, title), React.createElement(Button, null, "Test"))))
-};
-export const ControlledColor = {
-    args: {
-        color: 'hero',
-        rounded: false
-    },
-    render: ({ ...props })=>{
-        const [expandedKeys, setExpandedKeys] = useState();
-        return React.createElement(Accordion, _extends({}, props, {
-            expandedKeys: expandedKeys,
-            onExpandedChange: (keys)=>{
-                setExpandedKeys(keys);
-            }
-        }), [
-            {
-                key: 'files',
-                title: 'Your files'
-            },
-            {
-                key: 'shared',
-                title: 'Shared with you'
-            },
-            {
-                key: 'last',
-                title: 'Last item'
-            }
-        ].map(({ key , title  })=>React.createElement(Accordion.Item, {
-                key: key,
-                title: title
-            }, React.createElement("p", null, title), React.createElement(Button, null, "Test"))));
-    }
-};

package/dist/components/alert/alert.stories.js

@@ -1,144 +0,0 @@
-import { TelephoneIcon } from '../icon/index.js';
-import { Alert } from './alert.component.js';
-const meta = {
-    title: 'Components/Alert',
-    component: Alert,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement(Story, null)
-    ]
-};
-export default meta;
-export const Default = {
-    args: {
-        children: 'This is a default alert'
-    }
-};
-export const Looks = {
-    render: ()=>React.createElement(React.Fragment, null, React.createElement("h3", {
-            className: "typography-body-8 font-bold"
-        }, "Info"), React.createElement(Alert, {
-            look: "info"
-        }, React.createElement("strong", null, "Heads up!"), " This alert needs your attention, but it’s not super important. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 font-bold"
-        }, "Success"), React.createElement(Alert, {
-            look: "success"
-        }, React.createElement("strong", null, "Well done!"), " You successfully read this important alert message. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 font-bold"
-        }, "Warning"), React.createElement(Alert, {
-            look: "warning"
-        }, React.createElement("strong", null, "Warning!"), " Better check yourself, you’re not looking too good. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 font-bold"
-        }, "Danger"), React.createElement(Alert, {
-            look: "danger"
-        }, React.createElement("strong", null, "Oh snap!"), " Change a few things up and try submitting again. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 font-bold"
-        }, "System"), React.createElement(Alert, {
-            look: "system"
-        }, React.createElement("strong", null, "System Error 8942:"), " The server is no responding. Please try again later. Sorry for the inconvenience. ", React.createElement("a", {
-            href: "#"
-        }, "Link"))),
-    args: {}
-};
-export const TextMode = {
-    render: ()=>React.createElement(React.Fragment, null, React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "Info"), React.createElement(Alert, {
-            look: "info",
-            mode: "text"
-        }, React.createElement("strong", null, "Heads up!"), " This alert needs your attention, but it’s not super important. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "Success"), React.createElement(Alert, {
-            look: "success",
-            mode: "text"
-        }, React.createElement("strong", null, "Well done!"), " You successfully read this important alert message. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "Warning"), React.createElement(Alert, {
-            look: "warning",
-            mode: "text"
-        }, React.createElement("strong", null, "Warning!"), " Better check yourself, you’re not looking too good. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "Danger"), React.createElement(Alert, {
-            look: "danger",
-            mode: "text"
-        }, React.createElement("strong", null, "Oh snap!"), " Change a few things up and try submitting again. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "System"), React.createElement(Alert, {
-            look: "system",
-            mode: "text"
-        }, React.createElement("strong", null, "System Error 8942:"), " The server is no responding. Please try again later. Sorry for the inconvenience. ", React.createElement("a", {
-            href: "#"
-        }, "Link"))),
-    args: {}
-};
-export const Heading = {
-    args: {
-        heading: 'I am an alert heading',
-        children: 'This is a default alert'
-    }
-};
-export const Dismissible = {
-    args: {
-        dismissible: true,
-        children: 'I am an alert. This alert needs your attention, but it’s not super important. Hey neato, I can be closed.',
-        onClose: ()=>console.log('closed')
-    }
-};
-export const CustomIcon = {
-    render: ()=>React.createElement(React.Fragment, null, React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "Info"), React.createElement(Alert, {
-            look: "info",
-            icon: TelephoneIcon
-        }, React.createElement("strong", null, "Heads up!"), " This alert needs your attention, but it’s not super important. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "Note: the following should not render a custom icon"), React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "Success"), React.createElement(Alert, {
-            look: "success",
-            icon: TelephoneIcon
-        }, React.createElement("strong", null, "Well done!"), " You successfully read this important alert message. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "Warning"), React.createElement(Alert, {
-            look: "warning",
-            icon: TelephoneIcon
-        }, React.createElement("strong", null, "Warning!"), " Better check yourself, you’re not looking too good. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "Danger"), React.createElement(Alert, {
-            look: "danger",
-            icon: TelephoneIcon
-        }, React.createElement("strong", null, "Oh snap!"), " Change a few things up and try submitting again. ", React.createElement("a", {
-            href: "#"
-        }, "Link")), React.createElement("h3", {
-            className: "typography-body-8 mb-2 font-bold"
-        }, "System"), React.createElement(Alert, {
-            look: "system",
-            icon: TelephoneIcon
-        }, React.createElement("strong", null, "System Error 8942:"), " The server is no responding. Please try again later. Sorry for the inconvenience. ", React.createElement("a", {
-            href: "#"
-        }, "Link")))
-};