@westpac/ui 0.3.0 → 0.5.0

package/src/components/flexi-cell/flexi-cell.styles.ts

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'relative flex gap-2 bg-white p-2 transition-colors focus:focus-outline md:p-3',
+      bodyWrapper: 'flex flex-1 flex-col',
+      badge: 'absolute right-0 top-0',
+    },
+    variants: {
+      withBorder: {
+        true: {
+          base: 'rounded border border-borderDark',
+        },
+        false: {},
+      },
+      isLink: {
+        true: {
+          base: 'hover:border-hero',
+        },
+        false: {},
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/flexi-cell/flexi-cell.types.ts

@@ -0,0 +1,74 @@
+import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './flexi-cell.styles.js';
+
+type BaseFlexiCellProps = {
+  /**
+   * Renders an element on the right
+   */
+  after?: ReactNode;
+  /**
+   * Renders an element on the top right corner
+   */
+  badge?: ReactNode;
+  /**
+   * zIndex for badge
+   */
+  badgeZIndex?: CSSProperties['zIndex'];
+  /**
+   * Renders an element on the left
+   */
+  before?: ReactNode;
+  /**
+   * Injects the FlexiCell.Body inside of the children
+   */
+  body?: boolean;
+  /**
+   * the middle content of FlexiCell
+   */
+  children?: ReactNode;
+  /**
+   * href in case it is an "a" tag
+   */
+  href?: string;
+  /**
+   * The native tag that flexicell will be rendered
+   */
+  tag?: keyof JSX.IntrinsicElements;
+  /**
+   * Adds an arrow on top right
+   */
+  withArrow?: boolean;
+  /**
+   * Adds a border radius and a border
+   */
+  withBorder?: boolean;
+  /**
+   * With hover style
+   */
+  withHoverEffect?: boolean;
+} & HTMLAttributes<HTMLOrSVGElement>;
+
+type FlexiCellAsLinkProps = {
+  /**
+   * The href for the link
+   */
+  href: string;
+  /**
+   * The native tag that the circle will be rendered as
+   */
+  tag: 'a';
+};
+
+type FlexiCellAsAllOtherTagsProps<Tag> = {
+  href?: never;
+  tag?: Tag;
+};
+
+export type FlexiCellProps<
+  Tag extends keyof Omit<JSX.IntrinsicElements, 'a'> = keyof Omit<JSX.IntrinsicElements, 'a'>,
+> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) &
+  BaseFlexiCellProps &
+  VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/flexi-cell/index.ts

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export { FlexiCell } from './flexi-cell.component.js';
+export { type FlexiCellProps } from './flexi-cell.types.js';

package/src/components/form/components/error-message/error-message.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { AlertIcon } from '../../../../components/icon/index.js';
+
+import { styles as errorMessageStyles } from './error-message.styles.js';
+import { type ErrorMessageProps } from './error-message.types.js';
+
+export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message, ...props }: ErrorMessageProps) {
+  const styles = errorMessageStyles({});
+  const FinalIcon = Icon ?? AlertIcon;
+
+  return Array.isArray(message) ? (
+    <ul className={styles.list({})} {...props}>
+      {message.map(msg => (
+        <li className={styles.base({ className })}>
+          <FinalIcon
+            copyrightYear="2023"
+            className={styles.icon({})}
+            size="xsmall"
+            look="outlined"
+            // color="inherit"
+          />
+          {msg}
+        </li>
+      ))}
+    </ul>
+  ) : (
+    <Tag className={styles.base({ className: `${className} mb-2` })} {...props}>
+      <FinalIcon
+        copyrightYear="2020"
+        className={styles.icon({})}
+        size="xsmall"
+        look="outlined"
+        // color="inherit"
+      />
+      {message}
+    </Tag>
+  );
+}

package/src/components/form/components/error-message/error-message.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    base: 'typography-body-10 flex items-center text-danger',
+    list: 'mb-2 flex flex-col gap-1',
+    icon: 'mr-[0.5rem] mt-[mr-0.25rem] align-top',
+  },
+});

package/src/components/form/components/error-message/error-message.types.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './error-message.styles.js';
+
+export type ErrorMessageProps = {
+  /**
+   * Icon
+   */
+  icon?: (...args: unknown[]) => JSX.Element;
+  /**
+   * Message or messages
+   */
+  message?: ReactNode | ReactNode[];
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/form/components/error-message/index.ts

@@ -0,0 +1,2 @@
+export { ErrorMessage } from './error-message.component.js';
+export { type ErrorMessageProps } from './error-message.types.js';

package/src/components/form/components/form-chit-chat/form-chit-chat.component.tsx

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

package/src/components/form/components/form-chit-chat/form-chit-chat.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'typography-body-8 m-0 text-center font-bold leading-[1.125rem] text-heading sm:mb-5',
+});

package/src/components/form/components/form-chit-chat/form-chit-chat.types.ts

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

package/src/components/form/components/form-chit-chat/index.ts

@@ -0,0 +1,2 @@
+export { FormChitChat } from './form-chit-chat.component.js';
+export { type FormChitChatProps } from './form-chit-chat.types.js';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { useFormContext } from '../../form.component.js';
+
+import { styles } from './form-group.styles.js';
+import { type FormGroupProps } from './form-group.types.js';
+
+export function FormGroup({ className, tag: Tag = 'div', children, ...props }: FormGroupProps) {
+  const { inline, spacing } = useFormContext();
+
+  return (
+    <Tag className={styles({ className, inline, spacing })} {...props}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/form/components/form-group/form-group.styles.ts

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: '',
+    variants: {
+      inline: {
+        true: 'sm:inline-block sm:align-middle',
+        false: '',
+      },
+      spacing: {
+        medium: 'mb-3',
+        large: 'mb-4',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/form/components/form-group/form-group.types.ts

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

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

@@ -0,0 +1,2 @@
+export { FormGroup } from './form-group.component.js';
+export { type FormGroupProps } from './form-group.types.js';

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

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

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

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'typography-body-10 mb-2 text-muted',
+    variants: {
+      spacing: {
+        medium: '-mt-1 mb-2',
+        large: '-mt-2 mb-3',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

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

package/src/components/form/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/components/form-label/form-label.component.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { VisuallyHidden } from '../../../index.js';
+import { useFormContext } from '../../form.component.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 context = useFormContext();
+
+  const finalSpacing = spacing || context?.spacing || 'medium';
+
+  return srOnly ? (
+    <VisuallyHidden>{children}</VisuallyHidden>
+  ) : (
+    <Tag className={styles({ className, spacing: finalSpacing, subLabel })} {...props}>
+      {children}
+    </Tag>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'typography-body-9 block font-medium',
+    variants: {
+      spacing: {
+        medium: '',
+        large: '',
+      },
+      subLabel: {
+        true: 'typography-body-10',
+        false: 'typography-body-9',
+      },
+    },
+    compoundVariants: [
+      {
+        subLabel: true,
+        spacing: 'medium',
+        className: 'mb-1',
+      },
+      {
+        subLabel: true,
+        spacing: 'large',
+        className: 'mb-1',
+      },
+      {
+        subLabel: false,
+        spacing: 'medium',
+        className: 'mb-2',
+      },
+      {
+        subLabel: false,
+        spacing: 'large',
+        className: 'mb-3',
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,30 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './form-label.styles.js';
+
+export type FormLabelProps = {
+  /**
+   * Children
+   */
+  children?: ReactNode;
+
+  /**
+   * Label `for` attribute.
+   *
+   */
+  htmlFor?: string;
+  /**
+   * Enable ‘screen reader only’ mode
+   */
+  srOnly?: boolean;
+  /**
+   * Sub-label mode (smaller label text size)
+   */
+  subLabel?: boolean;
+  /**
+   * Component tag
+   */
+  tag?: 'label' | 'legend';
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/form/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/form/components/form-section/form-section.component.tsx

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

package/src/components/form/components/form-section/form-section.styles.ts

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'relative border-t border-t-border first:border-t-0 [&:not(:first-of-type)]:pt-5 md:[&:not(:first-of-type)]:pt-6 [&:not(:last-child)]:pb-1',
+    variants: {
+      noPadding: {
+        true: '',
+        false: 'px-0 sm:px-9 md:px-[2.875rem] lg:px-[3.125rem]',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/form/components/form-section/form-section.types.ts

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

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

@@ -0,0 +1,2 @@
+export { FormSection } from './form-section.component.js';
+export { type FormSectionProps } from './form-section.types.js';

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

@@ -0,0 +1,6 @@
+export * from './error-message/index.js';
+export * from './form-label/index.js';
+export * from './form-hint/index.js';
+export * from './form-chit-chat/index.js';
+export * from './form-group/index.js';
+export * from './form-section/index.js';

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

@@ -0,0 +1,26 @@
+import React, { createContext, useContext } from 'react';
+
+import { ErrorMessage, FormChitChat, FormGroup, FormHint, FormLabel, FormSection } from './components/index.js';
+import { FormContextValue, type FormProps } from './form.types.js';
+
+// ==============================
+// Context and consumer hook
+// ==============================
+const FormContext = createContext<FormContextValue | null>(null);
+
+export const useFormContext = () => useContext(FormContext) || {};
+
+export function Form({ children, size = 'medium', spacing = 'medium', inline = false, ...props }: FormProps) {
+  return (
+    <FormContext.Provider value={{ inline, size, spacing }}>
+      <form {...props}>{children}</form>
+    </FormContext.Provider>
+  );
+}
+
+Form.Label = FormLabel;
+Form.ErrorMessage = ErrorMessage;
+Form.Hint = FormHint;
+Form.Section = FormSection;
+Form.ChitChat = FormChitChat;
+Form.Group = FormGroup;