@westpac/ui 0.4.0 → 0.6.0

package/src/components/switch/switch.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     slots: {
       base: 'mb-1 inline-flex items-center hover:cursor-pointer',
       switchDiv:
-        'relative box-content overflow-hidden border border-borderDark transition duration-[.3s] after:absolute after:left-0 after:top-0 after:block after:rounded-[50%] after:bg-white after:shadow-switch after:transition-all after:duration-[.3s]',
+        'border-borderDark after:shadow-switch relative box-content overflow-hidden border transition duration-[.3s] after:absolute after:left-0 after:top-0 after:block after:rounded-[50%] after:bg-white after:transition-all after:duration-[.3s]',
       label: 'pr-1',
     },
     variants: {
@@ -23,7 +23,7 @@ export const styles = tv(
           switchDiv: 'h-[2.875rem] w-14 rounded-[2.875rem] after:h-[2.875rem] after:w-[2.875rem]',
         },
       },
-      isFocusVisible: {
+      isFocused: {
         true: {
           switchDiv: 'focus-outline',
         },

package/src/components/switch/switch.types.ts

@@ -8,6 +8,10 @@ export type SwitchProps = {
    * Whether to display switch as block
    */
   block?: boolean;
+  /**
+   * Default checked
+   */
+  checked?: boolean;
   /**
    * Classname for overriding base style
    */
@@ -16,5 +20,5 @@ export type SwitchProps = {
    * Label for the switch
    */
   label: string;
-} & Omit<AriaCheckboxProps, 'children'> &
+} & Omit<AriaCheckboxProps, 'children' | 'isSelected'> &
   Pick<VariantProps<typeof styles>, 'size'>;

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

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { useTab } from 'react-aria';
+import { mergeProps, useFocusRing, useTab } from 'react-aria';
 
 import { styles } from './tab.styles.js';
 import { type TabProps } from './tab.types.js';
@@ -7,10 +7,11 @@ import { type TabProps } from './tab.types.js';
 export function Tab({ item: { key, rendered }, state, orientation, justify, color, look }: TabProps) {
   const ref = useRef(null);
   const { tabProps } = useTab({ key }, state, ref);
+  const { isFocusVisible, focusProps } = useFocusRing();
   return (
     <div
-      {...tabProps}
-      className={styles({ selected: key === state.selectedKey, orientation, justify, color, look })}
+      {...mergeProps(tabProps, focusProps)}
+      className={styles({ selected: key === state.selectedKey, orientation, justify, color, look, isFocusVisible })}
       ref={ref}
     >
       {rendered}

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

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white focus:focus-outline',
+    base: 'typography-body-9 text-text flex cursor-pointer px-3 py-2 transition-colors hover:bg-white',
     variants: {
       look: {
-        default: 'border border-border bg-white',
+        default: 'border-border border bg-white',
         material: '',
       },
       selected: {
@@ -23,6 +23,10 @@ export const styles = tv(
         primary: '',
         hero: '',
       },
+      isFocusVisible: {
+        true: 'focus-outline',
+        false: 'outline-none',
+      },
     },
     compoundVariants: [
       {
@@ -54,36 +58,36 @@ export const styles = tv(
         color: 'primary',
         look: 'default',
         selected: false,
-        className: 'border-primary-90 bg-primary text-white hover:bg-primary-70',
+        className: 'border-primary-90 bg-primary hover:bg-primary-70 text-white',
       },
       {
         color: 'hero',
         selected: false,
         look: 'default',
-        className: 'border-hero-90 bg-hero text-white hover:bg-hero-70',
+        className: 'border-hero-90 bg-hero hover:bg-hero-70 text-white',
       },
       // Material look design
       {
         look: 'material',
         orientation: 'horizontal',
-        className: 'border-b-4 border-r border-b-white border-r-border last:border-r-0',
+        className: 'border-r-border border-b-4 border-r border-b-white last:border-r-0',
       },
       {
         look: 'material',
         orientation: 'vertical',
-        className: 'border-b border-l-4 border-b-border border-l-white last:border-b-0',
+        className: 'border-b-border border-b border-l-4 border-l-white last:border-b-0',
       },
       {
         look: 'material',
         selected: true,
         orientation: 'horizontal',
-        className: 'border-bottom border-b-white text-text',
+        className: 'border-bottom text-text border-b-white',
       },
       {
         look: 'material',
         selected: true,
         orientation: 'vertical',
-        className: 'border-left border-l-transparent text-text',
+        className: 'border-left text-text border-l-transparent',
       },
       {
         color: 'primary',

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

@@ -1,14 +1,15 @@
 import React, { useRef } from 'react';
-import { useTabPanel } from 'react-aria';
+import { mergeProps, useFocusRing, useTabPanel } from 'react-aria';
 
 import { styles } from './tab-panel.styles.js';
 import { type TabPanelProps } from './tab-panel.types.js';
 
 export function TabPanel({ className, state, look, ...props }: TabPanelProps) {
   const ref = useRef(null);
+  const { isFocused, focusProps } = useFocusRing();
   const { tabPanelProps } = useTabPanel({ ...props }, state, ref);
   return (
-    <div {...tabPanelProps} ref={ref} className={styles({ className, look })}>
+    <div {...mergeProps(tabPanelProps, focusProps)} ref={ref} className={styles({ className, look, isFocused })}>
       {state.selectedItem?.props.children}
     </div>
   );

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

@@ -2,12 +2,15 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex-1 bg-white p-4 focus:focus-outline',
+    base: 'flex-1 bg-white p-4',
     variants: {
       look: {
-        default: 'border border-border',
+        default: 'border-border border',
         material: '',
       },
+      isFocused: {
+        true: 'outline-none',
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

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.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/utils/generateId.ts

@@ -0,0 +1,6 @@
+export const generateID = () => {
+  const url = URL.createObjectURL(new Blob());
+  const [id] = url.toString().split('/').reverse();
+  URL.revokeObjectURL(url);
+  return id.replace('blob:nodedata:', '');
+};

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { generateID } from './generateId.js';