@westpac/ui 0.6.0 → 0.7.0

package/src/components/form/form.stories.tsx

@@ -5,13 +5,10 @@ import { Input } from '../index.js';
 import { Form } from './form.component.js';
 
 const meta: Meta<typeof Form> = {
-  title: 'Example/Form',
+  title: 'Components/Form',
   component: Form,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
@@ -20,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default size and spacing
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
   render: () => {
     return (
@@ -102,7 +99,7 @@ export const DefaultStory: Story = {
 /**
  * > Multiple errors
  */
-export const MultipleErrorsStory: Story = {
+export const MultipleErrors: Story = {
   args: {},
   render: () => {
     return (
@@ -119,7 +116,7 @@ export const MultipleErrorsStory: Story = {
 /**
  * > All sizes Story
  */
-export const AllSizesStory: Story = {
+export const AllSizes: Story = {
   args: {},
   render: () => {
     return (
@@ -141,7 +138,7 @@ export const AllSizesStory: Story = {
 /**
  * > All spacings Story
  */
-export const AllSpacingsStory: Story = {
+export const AllSpacings: Story = {
   args: {},
   render: () => {
     return (

package/src/components/form-hint/form-hint.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './form-hint.styles.js';
+import { type FormHintProps } from './form-hint.types.js';
+
+export function FormHint({ className, tag: Tag = 'div', children, spacing, ...props }: FormHintProps) {
+  return (
+    <Tag className={styles({ className, spacing: spacing || 'medium' })} {...props}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/{form/components/form-hint → form-hint}/form-hint.types.ts

@@ -4,6 +4,10 @@ import { type VariantProps } from 'tailwind-variants';
 import { styles } from './form-hint.styles.js';
 
 export type FormHintProps = {
+  /**
+   * spacing
+   */
+  spacing?: 'medium' | 'large';
   /**
    * Tag to render
    */

package/src/components/form-hint/index.ts

@@ -0,0 +1,2 @@
+export { FormHint } from './form-hint.component.js';
+export { type FormHintProps } from './form-hint.types.js';

package/src/components/form-label/form-label.component.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { VisuallyHidden } from '../index.js';
+
+import { styles } from './form-label.styles.js';
+import { type FormLabelProps } from './form-label.types.js';
+
+export function FormLabel({
+  className,
+  tag: Tag = 'label',
+  spacing,
+  srOnly,
+  children,
+  subLabel = false,
+  ...props
+}: FormLabelProps) {
+  const finalSpacing = spacing || 'medium';
+
+  return srOnly ? (
+    <VisuallyHidden>{children}</VisuallyHidden>
+  ) : (
+    <Tag className={styles({ className, spacing: finalSpacing, subLabel })} {...props}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/form-label/index.ts

@@ -0,0 +1,2 @@
+export { FormLabel } from './form-label.component.js';
+export { type FormLabelProps } from './form-label.types.js';

package/src/components/grid/grid.stories.tsx

@@ -4,24 +4,15 @@ import { Container, Item } from './components/index.js';
 import { Grid } from './grid.component.js';
 
 const meta: Meta<typeof Grid> = {
-  title: 'Example/Grid',
+  title: 'Foundation/Grid',
   component: Grid,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="mt-10">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 
-export const GridStory = () => {
+export const Default = () => {
   const items = Array(12).fill(null);
 
   return (
@@ -35,7 +26,7 @@ export const GridStory = () => {
   );
 };
 
-export const ContainerStory = () => {
+export const DefaultContainer = () => {
   const items = Array(12).fill(null);
 
   return (
@@ -51,7 +42,7 @@ export const ContainerStory = () => {
   );
 };
 
-export const ItemStory = () => {
+export const ResponsiveItems = () => {
   return (
     <Container>
       <Grid>
@@ -61,8 +52,53 @@ export const ItemStory = () => {
         <Item span={{ initial: 6, lg: 10 }} className="border border-border bg-light p-2 text-center">
           span - (xs:6, lg:10)
         </Item>
+      </Grid>
+    </Container>
+  );
+};
+
+export const Positioning = () => {
+  return (
+    <Container>
+      <Grid>
+        <Item span={4} className="border border-border bg-light p-2 text-center">
+          Top Left
+        </Item>
+        <Item start={9} span={4} className="border border-border bg-light p-2 text-center">
+          Top Right
+        </Item>
         <Item start={5} span={4} className="border border-border bg-light p-2 text-center">
-          start:5 span:4
+          Middle
+        </Item>
+        <Item start={1} span={4} className="border border-border bg-light p-2 text-center">
+          Bottom Left
+        </Item>
+        <Item start={9} span={4} className="border border-border bg-light p-2 text-center">
+          Bottom Right
+        </Item>
+      </Grid>
+    </Container>
+  );
+};
+
+export const HolyGrailLayout = () => {
+  return (
+    <Container>
+      <Grid>
+        <Item span={12} className="h-12 border border-border bg-light p-2 text-center">
+          Header
+        </Item>
+        <Item span={3} className="h-10 border border-border bg-light p-2 text-center">
+          Menu
+        </Item>
+        <Item span={6} className="h-10 border border-border bg-light p-2 text-center">
+          Content
+        </Item>
+        <Item span={3} className="h-10 border border-border bg-light p-2 text-center">
+          Ads
+        </Item>
+        <Item span={12} className="h-12 border border-border bg-light p-2 text-center">
+          Footer
         </Item>
       </Grid>
     </Container>

package/src/components/icon/icon.stories.tsx

@@ -56,19 +56,10 @@ const AllIconsExample = (props: AllIcons.IconProps) => {
 };
 
 const meta: Meta<typeof Icon> = {
-  title: 'Example/Icon',
+  title: 'Foundation/Icons',
   component: AllIconsExample,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ padding: '3rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
   argTypes: {
     children: {
       description: 'Children',
@@ -119,14 +110,14 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
 };
 
 /**
  * > With primary color example
  */
-export const WithPrimaryColorStory: Story = {
+export const Primary: Story = {
   args: {
     color: 'primary',
   },
@@ -135,7 +126,7 @@ export const WithPrimaryColorStory: Story = {
 /**
  * > With large size example
  */
-export const WithDifferentSizeStory: Story = {
+export const Size: Story = {
   args: {
     size: 'xlarge',
   },
@@ -144,7 +135,7 @@ export const WithDifferentSizeStory: Story = {
 /**
  * > With outlined look example
  */
-export const WithOutlinedLookStory: Story = {
+export const Outlined: Story = {
   args: {
     look: 'outlined',
   },

package/src/components/index.ts

@@ -35,3 +35,7 @@ export * from './progress-rope/index.js';
 export * from './selector/index.js';
 export * from './compacta/index.js';
 export * from './repeater/index.js';
+export * from './error-message/index.js';
+export * from './form-label/index.js';
+export * from './form-hint/index.js';
+export * from './field/index.js';

package/src/components/input/input.stories.tsx

@@ -3,28 +3,28 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Input } from './input.component.js';
 
 const meta: Meta<typeof Input> = {
-  title: 'Example/Input',
+  title: 'Components/Input',
   component: Input,
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => (
-      <div className="flex justify-center p-3">
+      <div className="flex">
         <Story />
       </div>
     ),
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
+const FIXED_WIDTHS = [2, 3, 4, 5, 10, 20, 30];
+
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     placeholder: 'placeholder',
     size: 'medium',
@@ -34,7 +34,7 @@ export const DefaultStory: Story = {
 /**
  * > Invalid usage example
  */
-export const InvalidStory: Story = {
+export const Invalid: Story = {
   args: {
     invalid: true,
   },
@@ -43,16 +43,27 @@ export const InvalidStory: Story = {
 /**
  * > Disabled usage example
  */
-export const DisabledStory: Story = {
+export const Disabled: Story = {
   args: {
     disabled: true,
   },
 };
 
+/**
+ * >Sizes
+ */
+export const Sizes = () => (
+  <div className="flex flex-col gap-2">
+    {SIZES.map(size => (
+      <Input size={size} placeholder={size} />
+    ))}
+  </div>
+);
+
 /**
  * > ReadOnly usage example
  */
-export const ReadOnlyStory: Story = {
+export const ReadOnly: Story = {
   args: {
     readOnly: true,
   },

package/src/components/input-field/input-field.component.tsx

@@ -1,6 +1,6 @@
 import React, { Children, ReactNode, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
 
-import { Form } from '../form/form.component.js';
+import { ErrorMessage, FormHint, FormLabel } from '../index.js';
 
 import { InputAddOn } from './components/add-ons/add-ons.component.js';
 import { SupportingText } from './components/index.js';
@@ -86,12 +86,12 @@ export function InputField({
   return (
     <Tag className={styles({ before: !!before, after: !!after, afterInset, beforeInset })} {...props}>
       {label && (
-        <Form.Label srOnly={hideLabel} tag={isFieldset ? 'legend' : 'label'} {...(!isFieldset && { htmlFor: id })}>
+        <FormLabel srOnly={hideLabel} tag={isFieldset ? 'legend' : 'label'} {...(!isFieldset && { htmlFor: id })}>
           {label}
-        </Form.Label>
+        </FormLabel>
       )}
-      {hint && <Form.Hint id={`${id}-hint`}>{hint}</Form.Hint>}
-      {errorMessage && <Form.ErrorMessage id={`${id}-error`} message={errorMessage} />}
+      {hint && <FormHint id={`${id}-hint`}>{hint}</FormHint>}
+      {errorMessage && <ErrorMessage id={`${id}-error`} message={errorMessage} />}
       <div className="relative flex">
         {before && (
           <InputAddOn position="before" size={size} inset={beforeInset} icon={beforeIcon} id={id}>

package/src/components/input-field/input-field.scenarios.stories.tsx

@@ -7,13 +7,10 @@ import { Button, Input, Select, Textarea } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField/Scenarios',
+  title: 'Components/InputField/Scenarios',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -22,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Number of dependents
  */
-export const NumberStepperStory: Story = {
+export const NumberStepper: Story = {
   args: {},
   render: () => {
     const [numberOfDependents, setNumberOfDependents] = useState(0);
@@ -44,7 +41,7 @@ export const NumberStepperStory: Story = {
 /**
  * > Masked characters in field
  */
-export const MaskedCharactersStory: Story = {
+export const MaskedCharacters: Story = {
   args: {},
   render: () => {
     const [typeInput, setTypeInput] = useState<'password' | 'text'>('password');
@@ -74,7 +71,7 @@ export const MaskedCharactersStory: Story = {
 /**
  * > Search with left icon and clear button
  */
-export const SearchWithLeftIconAndClearButtonStory: Story = {
+export const SearchWithLeftIconAndClearButton: Story = {
   args: {},
   render: () => {
     const [inputValue, setInputValue] = useState<string>('');
@@ -100,7 +97,7 @@ export const SearchWithLeftIconAndClearButtonStory: Story = {
 /**
  * > Inline field validation flow
  */
-export const InlineFieldValidationFlowStory: Story = {
+export const InlineFieldValidationFlow: Story = {
   args: {},
   render: () => {
     const [inputValue, setInputValue] = useState<string>('');
@@ -132,7 +129,7 @@ export const InlineFieldValidationFlowStory: Story = {
 /**
  * > Search Currency and frequency
  */
-export const CurrencyAndFrequencyStory: Story = {
+export const CurrencyAndFrequency: Story = {
   args: {},
   render: () => {
     const [inputValue, setInputValue] = useState<string>('');
@@ -159,7 +156,7 @@ export const CurrencyAndFrequencyStory: Story = {
  * > Search Textarea with character count
  */
 const MAX_LENGTH = 250;
-export const TextareaWithCharacterCountStory: Story = {
+export const TextareaWithCharacterCount: Story = {
   args: {},
   render: () => {
     const [inputValue, setInputValue] = useState<string>('');

package/src/components/input-field/input-field.sizes.stories.tsx

@@ -6,13 +6,10 @@ import { Button, Input, Select } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField/Sizes',
+  title: 'Components/InputField/Sizes',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -21,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Input field with different sizes
  */
-export const InputFieldWithDifferentSizesStory: Story = {
+export const InputFieldWithDifferentSizes: Story = {
   args: {},
   render: () => {
     return (

package/src/components/input-field/input-field.state.stories.tsx

@@ -6,13 +6,10 @@ import { Button, Input, Select } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField/State',
+  title: 'Components/InputField/State',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -21,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Invalid with error message/s
  */
-export const InvalidWithErrorMessagesStory: Story = {
+export const InvalidWithErrorMessages: Story = {
   args: {},
   render: () => {
     return (
@@ -91,7 +88,7 @@ export const InvalidWithErrorMessagesStory: Story = {
 /**
  * > Input field with disabled state
  */
-export const InputFieldWithDisabledStateStory: Story = {
+export const InputFieldWithDisabledState: Story = {
   args: {},
   render: () => {
     return (
@@ -122,7 +119,7 @@ export const InputFieldWithDisabledStateStory: Story = {
 /**
  * > Input field with read-only state
  */
-export const InputFieldWithReadOnlyStateStory: Story = {
+export const InputFieldWithReadOnlyState: Story = {
   args: {},
   render: () => {
     return (

package/src/components/input-field/input-field.stories.tsx

@@ -5,13 +5,10 @@ import { Button, Input } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField',
+  title: 'Components/InputField',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -20,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
   render: () => {
     return (
@@ -31,10 +28,24 @@ export const DefaultStory: Story = {
   },
 };
 
+/**
+ * > Another usage example
+ */
+export const AnotherDefault: Story = {
+  args: {},
+  render: () => {
+    return (
+      <InputField label="Label" hint="I am a hint" supportingText="I am supporting text">
+        <Input />
+      </InputField>
+    );
+  },
+};
+
 /**
  * > SrOnlyLabel usage example
  */
-export const SrOnlyLabelStory: Story = {
+export const SrOnlyLabel: Story = {
   args: {},
   render: () => {
     return (
@@ -54,7 +65,7 @@ export const SrOnlyLabelStory: Story = {
 /**
  * > Combination usage example
  */
-export const CombinationStory: Story = {
+export const Combination: Story = {
   args: {},
   render: () => {
     return (
@@ -74,7 +85,7 @@ export const CombinationStory: Story = {
 /**
  * > Fieldset as tag
  */
-export const WithFieldsetStory: Story = {
+export const WithFieldset: Story = {
   args: {},
   render: () => {
     return (

package/src/components/input-field/input-field.type.stories.tsx

@@ -6,13 +6,10 @@ import { Button, Input, Select, Textarea } from '../index.js';
 import { InputField } from './input-field.component.js';
 
 const meta: Meta<typeof InputField> = {
-  title: 'Example/InputField/Types',
+  title: 'Components/InputField/Types',
   component: InputField,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -35,7 +32,7 @@ export const TextBeforeStory: Story = {
 /**
  * > Text Beforoe story example
  */
-export const TextAfterStory: Story = {
+export const TextAfter: Story = {
   args: {},
   render: () => {
     return (
@@ -49,7 +46,7 @@ export const TextAfterStory: Story = {
 /**
  * > Text After and Beforoe story example
  */
-export const TextAfterAndBeforeStory: Story = {
+export const TextAfterAndBefore: Story = {
   args: {},
   render: () => {
     return (
@@ -69,7 +66,7 @@ export const TextAfterAndBeforeStory: Story = {
 /**
  * > Textarea
  */
-export const IconAddOnStory: Story = {
+export const IconAddOn: Story = {
   args: {},
   render: () => {
     return (
@@ -107,7 +104,7 @@ export const IconAddOnStory: Story = {
 /**
  * > Icons in buttons
  */
-export const IconInButtonsOnStory: Story = {
+export const IconInButtonsOn: Story = {
   args: {},
   render: () => {
     return (
@@ -145,7 +142,7 @@ export const IconInButtonsOnStory: Story = {
 /**
  * > Button add ons
  */
-export const ButtonAddOnStory: Story = {
+export const ButtonAddOn: Story = {
   args: {},
   render: () => {
     return (
@@ -199,7 +196,7 @@ export const ButtonAddOnStory: Story = {
 /**
  * > Select add ons
  */
-export const SelectAddOnStory: Story = {
+export const SelectAddOn: Story = {
   args: {},
   render: () => {
     return (
@@ -227,7 +224,7 @@ export const SelectAddOnStory: Story = {
 /**
  * > Textarea
  */
-export const TextAreaStory: Story = {
+export const TextArea: Story = {
   args: {},
   render: () => {
     return (

package/src/components/link/link.component.tsx

@@ -39,7 +39,7 @@ export function BaseLink(
       className={styles.base({ className })}
     >
       {IconBefore && <IconBefore size={iconSize} color="link" className={styles.iconBefore()} />}
-      <span className={styles.text()}>{children}</span>
+      <span>{children}</span>
       {IconAfter && <IconAfter size={iconSize} color="link" className={styles.iconAfter()} />}
     </a>
   );