@westpac/ui 0.5.0 → 0.7.0

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

@@ -4,19 +4,24 @@ import { Key, useState } from 'react';
 import { Tabs } from './tabs.component.js';
 
 const meta: Meta<typeof Tabs> = {
-  title: 'Example/Tabs',
+  title: 'Components/Tabs',
   component: Tabs,
   tags: ['autodocs'],
   decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
+    (Story: StoryFn) => {
+      /**
+       * NOTE:
+       * Needed to change displayName here so subcomponent shows correct name in code view
+       * Could not change it on the component as Item from react-stately is used in three components
+       * and one displayName would overwrite the others
+       */
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      Tabs.Panel.displayName = 'Tabs.Panel';
+
+      return <Story />;
+    },
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
@@ -25,7 +30,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     look: 'default',
     color: undefined,
@@ -48,7 +53,7 @@ export const DefaultStory: Story = {
 /**
  * > Default usage example
  */
-export const JustifyStory: Story = {
+export const Justify: Story = {
   args: {
     justify: true,
     children: [
@@ -68,7 +73,7 @@ export const JustifyStory: Story = {
 /**
  * > Default usage example
  */
-export const ColorStory: Story = {
+export const Color: Story = {
   args: {
     justify: true,
     color: 'hero',
@@ -89,7 +94,7 @@ export const ColorStory: Story = {
 /**
  * > Vertical story usage example
  */
-export const VerticalStory: Story = {
+export const Vertical: Story = {
   args: {
     orientation: 'vertical',
     children: [
@@ -105,73 +110,3 @@ export const VerticalStory: Story = {
     ],
   },
 };
-
-/**
- * > Vertical story usage example
- */
-export const MaterialLookStory: Story = {
-  args: {
-    look: 'material',
-    color: 'primary',
-    children: [
-      <Tabs.Panel key="FoR" title="Founding of Rome">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </Tabs.Panel>,
-      <Tabs.Panel key="MaR" title="Monarchy and Republic">
-        Senatus Populusque Romanus.
-      </Tabs.Panel>,
-      <Tabs.Panel key="Emp" title="Empire">
-        Alea jacta est.
-      </Tabs.Panel>,
-    ],
-  },
-};
-
-/**
- * > Vertical story usage example
- */
-export const VerticalMaterialLookStory: Story = {
-  args: {
-    look: 'material',
-    color: 'primary',
-    orientation: 'vertical',
-    children: [
-      <Tabs.Panel key="FoR" title="Founding of Rome">
-        Arma virumque cano, Troiae qui primus ab oris
-      </Tabs.Panel>,
-      <Tabs.Panel key="MaR" title="Monarchy and Republic">
-        Senatus Populusque Romanus.
-      </Tabs.Panel>,
-      <Tabs.Panel key="Emp" title="Empire">
-        Alea jacta est.
-      </Tabs.Panel>,
-    ],
-  },
-};
-
-/**
- * > Vertical story usage example
- */
-export const ControlledMaterialLookStory: Story = {
-  render: () => {
-    const [selectedKey, setSelectedKey] = useState<Key>('FoR');
-    return (
-      <Tabs
-        selectedKey={selectedKey}
-        onSelectionChange={key => {
-          setSelectedKey(key);
-        }}
-      >
-        <Tabs.Panel key="FoR" title="Founding of Rome">
-          Arma virumque cano, Troiae qui primus ab oris.
-        </Tabs.Panel>
-        <Tabs.Panel key="MaR" title="Monarchy and Republic">
-          Senatus Populusque Romanus.
-        </Tabs.Panel>
-        <Tabs.Panel key="Emp" title="Empire">
-          Alea jacta est.
-        </Tabs.Panel>
-      </Tabs>
-    );
-  },
-};

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

@@ -1,4 +1,5 @@
 import React, { ForwardedRef, forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 
 import { styles } from './textarea.styles.js';
 import { type TextareaProps } from './textarea.types.js';
@@ -7,7 +8,14 @@ function BaseTextarea(
   { className, size = 'medium', invalid = false, ...props }: TextareaProps,
   ref: ForwardedRef<HTMLTextAreaElement>,
 ) {
-  return <textarea ref={ref} className={styles({ className, size, invalid })} {...props} />;
+  const { isFocused, focusProps } = useFocusRing();
+  return (
+    <textarea
+      ref={ref}
+      className={styles({ className, size, invalid, isFocused })}
+      {...mergeProps(props, focusProps)}
+    />
+  );
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(BaseTextarea);

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

@@ -1,21 +1,14 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
+import { Field } from '../field/index.js';
+
 import { Textarea } from './textarea.component.js';
 
 const meta: Meta<typeof Textarea> = {
-  title: 'Example/Textarea',
+  title: 'Components/Textarea',
   component: Textarea,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="flex justify-center p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -24,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     placeholder: 'placeholder',
     size: 'medium',
@@ -34,7 +27,7 @@ export const DefaultStory: Story = {
 /**
  * > Invalid usage example
  */
-export const InvalidStory: Story = {
+export const Invalid: Story = {
   args: {
     invalid: true,
   },
@@ -43,7 +36,7 @@ export const InvalidStory: Story = {
 /**
  * > Disabled usage example
  */
-export const DisabledStory: Story = {
+export const Disabled: Story = {
   args: {
     disabled: true,
   },
@@ -52,8 +45,26 @@ export const DisabledStory: Story = {
 /**
  * > ReadOnly usage example
  */
-export const ReadOnlyStory: Story = {
+export const ReadOnly: Story = {
   args: {
     readOnly: true,
   },
 };
+
+/**
+ * > Form field example
+ */
+export const FormField: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Field
+        label="Are you an existing customer?"
+        hintMessage="Hint: choose from one of the following options"
+        errorMessage="This is an inline error message"
+      >
+        <Textarea />
+      </Field>
+    );
+  },
+};

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control w-full read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
+    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled w-full',
     variants: {
       size: {
         small: 'form-control-small min-h-[3.375rem]',
@@ -14,6 +14,9 @@ export const styles = tv(
         true: 'border-danger',
         false: 'border-borderDark',
       },
+      isFocused: {
+        true: 'focus-outline',
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

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

@@ -3,13 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { VisuallyHidden } from './visually-hidden.component.js';
 
 const meta: Meta<typeof VisuallyHidden> = {
-  title: 'Example/VisuallyHidden',
+  title: 'Components/VisuallyHidden',
   component: VisuallyHidden,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
@@ -21,7 +18,7 @@ type Story = StoryObj<typeof meta>;
  * Note: The examples below the following headings are visibility hidden.
  * Best you inspect what is being rendered using your browser’s DevTools.
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: 'Only screen reader can read this',
   },

package/src/components/well/well.stories.tsx

@@ -3,19 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Well } from './well.component.js';
 
 const meta: Meta<typeof Well> = {
-  title: 'Example/Well',
+  title: 'Components/Well',
   component: Well,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ padding: '3rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -24,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultUsage: Story = {
+export const Default: Story = {
   args: {
     children: "Look, I'm in a well",
   },
@@ -33,7 +24,7 @@ export const DefaultUsage: Story = {
 /**
  * > Nested usage example
  */
-export const NestedUsage: Story = {
+export const Nested: Story = {
   args: {
     children: (
       <>
@@ -47,7 +38,7 @@ export const NestedUsage: Story = {
 /**
  * > Tag as <article>
  */
-export const CustomTagUsage: Story = {
+export const CustomTag: Story = {
   args: {
     tag: 'article',
     children: "Look, I'm in a well",
@@ -57,7 +48,7 @@ export const CustomTagUsage: Story = {
 /**
  * > Nested tag as <article>
  */
-export const CustomTagNestedUsage: Story = {
+export const CustomTagNested: Story = {
   args: {
     tag: 'article',
     children: (
@@ -72,7 +63,7 @@ export const CustomTagNestedUsage: Story = {
 /**
  * > Tag as <aside> with child <san>, passed as a component
  */
-export const ComplexCustomTagNestedUsage: Story = {
+export const ComplexCustomTagNested: Story = {
   args: {
     tag: 'aside',
     children: <span>Look, I'm in a well</span>,

package/src/css/global.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  @apply typography-body-10;
+}

package/src/stories/foundation/breakpoints.stories.tsx

@@ -0,0 +1,55 @@
+import { type Meta, StoryFn } from '@storybook/react';
+
+import { Table } from '../../components/index.js';
+
+const meta: Meta = {
+  title: 'Foundation/Breakpoints',
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+};
+
+export default meta;
+
+/**
+ * Breakpoints are a set of predefined viewport widths that can be used to change the layout of a webpage to ensure it accommodates different devices.
+ * For styling GEL is using Tailwind and refer https://tailwindcss.com/docs/responsive-design for detailed documentation.
+ */
+export const Breakpoints = () => (
+  <Table>
+    <Table.Caption>GEL breakpoint tokens</Table.Caption>
+    <Table.Header>
+      <Table.HeaderRow>
+        <Table.HeaderCell>Token</Table.HeaderCell>
+        <Table.HeaderCell>Value</Table.HeaderCell>
+        <Table.HeaderCell>Tailwind prefix</Table.HeaderCell>
+      </Table.HeaderRow>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>xsl</Table.Cell>
+        <Table.Cell>0px and up</Table.Cell>
+        <Table.Cell>xsl:</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>sm</Table.Cell>
+        <Table.Cell>768px and up</Table.Cell>
+        <Table.Cell>sm:</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>md</Table.Cell>
+        <Table.Cell>992 and up</Table.Cell>
+        <Table.Cell>md:</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>lg</Table.Cell>
+        <Table.Cell>1200 and up</Table.Cell>
+        <Table.Cell>lg:</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>xl</Table.Cell>
+        <Table.Cell>1900 and up</Table.Cell>
+        <Table.Cell>xl:</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+);