@westpac/ui 0.1.0 → 0.2.0

package/src/components/button-group/components/button/button.stories.tsx

@@ -0,0 +1,32 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Button } from './button.component.js';
+
+const meta: Meta<typeof Button> = {
+  title: 'Example/ButtonGroup/Button',
+  component: Button,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Only a default usage example as most things are controlled by ButtonGroup
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: 'Option 1',
+    value: 'Option 1',
+  },
+};

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

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '',
+      button:
+        'rounded-none hover:cursor-pointer group-first/buttons:rounded-l group-last/buttons:rounded-r group-[:not(:first-child)]/buttons:border-l-0',
+    },
+    variants: {
+      isDisabled: {
+        true: {
+          button: 'pointer-events-none opacity-50',
+        },
+      },
+      isFocusVisible: {
+        true: {
+          button: 'relative focus-outline',
+        },
+      },
+      block: {
+        true: {
+          base: 'w-full',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,8 @@
+import { AriaRadioProps } from 'react-aria';
+
+export type ButtonProps = {
+  /**
+   * `string` for overriding base style
+   */
+  className?: string;
+} & AriaRadioProps;

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

@@ -0,0 +1,2 @@
+export { Button } from './button.component.js';
+export { type ButtonProps } from './button.types.js';

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

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './button-group.component.js';
+export { type ButtonGroupProps } from './button-group.types.js';

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

@@ -0,0 +1,83 @@
+import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useCheckboxGroup, useFocusRing } from 'react-aria';
+import { useCheckboxGroupState } from 'react-stately';
+
+import { Button } from '../button/index.js';
+import { ExpandMoreIcon } from '../icon/index.js';
+
+import { styles as checkboxStyles } from './checkbox-group.styles.js';
+import { type CheckboxGroupContextState, type CheckboxGroupProps } from './checkbox-group.types.js';
+import { Checkbox } from './components/checkbox/checkbox.component.js';
+
+export const CheckboxGroupContext = createContext<CheckboxGroupContextState>({
+  orientation: 'vertical',
+  size: 'medium',
+  value: [],
+  isDisabled: false,
+  isReadOnly: false,
+  isSelected: () => false,
+  setValue: () => null,
+  addValue: () => null,
+  removeValue: () => null,
+  toggleValue: () => null,
+  validationState: 'valid',
+});
+
+export function CheckboxGroup({
+  className,
+  children,
+  label,
+  orientation = 'vertical',
+  showAmount = 0,
+  size = 'medium',
+  ...props
+}: CheckboxGroupProps) {
+  const state = useCheckboxGroupState({ ...props, label });
+  const { groupProps, labelProps } = useCheckboxGroup({ ...props, label }, state);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const [hiddenOptions, setHiddenOptions] = useState<boolean>(showAmount > 0);
+  const firstNewCheckboxRef = useRef<HTMLDivElement>(null);
+  const revealAmount = children && children.length - showAmount;
+  const styles = checkboxStyles({ orientation, isFocusVisible });
+  const childrenToRender = useMemo(() => {
+    const newChildren = children.map((child, index) => {
+      return cloneElement(child as ReactElement, {
+        key: index,
+        ref: index === showAmount ? firstNewCheckboxRef : null,
+      });
+    });
+
+    return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren;
+  }, [children, hiddenOptions, showAmount]);
+
+  useEffect(() => {
+    if (showAmount > 0 && !hiddenOptions) {
+      firstNewCheckboxRef.current?.focus();
+    }
+  }, [hiddenOptions, showAmount]);
+
+  return (
+    <div className={styles.base({ className })} {...groupProps}>
+      <span {...labelProps}>{label}</span>
+      <div className={styles.itemWrapper()}>
+        <CheckboxGroupContext.Provider value={{ ...state, orientation, size }}>
+          {childrenToRender}
+        </CheckboxGroupContext.Provider>
+        {hiddenOptions && (
+          <Button
+            onClick={() => setHiddenOptions(false)}
+            className={styles.revealButton()}
+            look="link"
+            iconAfter={() => <ExpandMoreIcon size="small" color="link" />}
+            {...focusProps}
+          >
+            <p className={styles.buttonText()}>{`Show ${revealAmount} more ${
+              revealAmount === 1 ? 'item' : 'items'
+            }`}</p>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+CheckboxGroup.Checkbox = Checkbox;

package/src/components/checkbox-group/checkbox-group.stories.tsx

@@ -0,0 +1,124 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { CheckboxGroup } from './checkbox-group.component.js';
+
+const meta: Meta<typeof CheckboxGroup> = {
+  title: 'Example/CheckboxGroup',
+  component: CheckboxGroup,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="flex p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+  args: {
+    label: <h2>Test</h2>,
+  },
+  argTypes: {
+    orientation: {
+      description:
+        "Controls orientation of `Checkbox` components, can't be applied directly on `Checkbox` \n\n `'horizontal'` `'vertical'`",
+      type: { name: 'enum', value: ['horizontal', 'vertical'] },
+    },
+    isDisabled: {
+      description: 'Controls whether all checkbox items are disabled or not',
+      type: { name: 'boolean' },
+    },
+    label: {
+      description:
+        'Not part of original GEL component but added for compatability with React Aria and accessibility. Styling can be done by passing tag with className as value.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>,
+    ],
+  },
+};
+
+/**
+ * > CheckboxGroup with default value
+ */
+export const CheckboxGroupWithDefaultValue: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>,
+    ],
+    defaultValue: ['Option 1'],
+  },
+};
+
+/**
+ * > CheckboxGroup with checkboxes aligned horizontally
+ */
+export const CheckboxGroupHorizontal: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>,
+    ],
+    orientation: 'horizontal',
+  },
+};
+
+/**
+ * > CheckboxGroup that is disabled
+ */
+export const CheckboxGroupDisabled: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>,
+    ],
+    isDisabled: true,
+    defaultValue: ['Option 1'],
+  },
+};
+
+/**
+ * > CheckboxGroup with large checkboxes
+ */
+export const CheckboxGroupLarge: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>,
+    ],
+    size: 'large',
+  },
+};
+
+/**
+ * > CheckboxGroup that has hidden checkboxes that will be revealed on clicking on button
+ */
+export const CheckboxGroupWithHiddenItems: Story = {
+  args: {
+    children: [
+      <CheckboxGroup.Checkbox value="Option 1">Option 1</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 2">Option 2</CheckboxGroup.Checkbox>,
+      <CheckboxGroup.Checkbox value="Option 3">Option 3</CheckboxGroup.Checkbox>,
+    ],
+    showAmount: 1,
+  },
+};

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

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '',
+      itemWrapper: '',
+      revealButton: 'gap-1 px-0 text-text no-underline hover:underline',
+      buttonText: 'typography-body-10',
+    },
+    variants: {
+      orientation: { horizontal: { itemWrapper: 'flex flex-wrap' }, vertical: { itemWrapper: 'flex flex-col' } },
+      isFocusVisible: { true: { revealButton: 'focus-outline' } },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { AriaCheckboxGroupProps } from 'react-aria';
+import { CheckboxGroupState } from 'react-stately';
+
+export type CheckboxGroupProps = {
+  /**
+   * The `CheckboxItem` components to render
+   */
+  children: ReactNode[];
+  /**
+   * String to override base style
+   */
+  className?: string;
+  /**
+   * Orientation of checkbox items
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Amount of CheckboxItems to display, remainder will be hidden behind reveal button
+   */
+  showAmount?: number;
+  /**
+   * Controls size of `CheckboxItem` components, can't be applied directly to `CheckboxItem`
+   */
+  size?: 'medium' | 'large';
+} & Omit<AriaCheckboxGroupProps, 'errorMessage' | 'description'>;
+
+export type CheckboxGroupContextState = {
+  /**
+   * Controls orientation of `CheckboxItem` components, can't be applied directly on `CheckboxItem`
+   */
+  orientation: 'vertical' | 'horizontal';
+  /**
+   * Controls size of `CheckboxItem` components, can't be applied directly on `CheckboxItem`
+   */
+  size: 'medium' | 'large';
+} & CheckboxGroupState;

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

@@ -0,0 +1,47 @@
+import React, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+
+import { Icon } from '../../../icon/icon.component.js';
+import { IconProps } from '../../../icon/index.js';
+import { CheckboxGroupContext } from '../../checkbox-group.component.js';
+
+import { styles as checkboxItemStyles } from './checkbox.styles.js';
+import { type CheckboxProps } from './checkbox.types.js';
+
+// TODO: Discuss with designers if this icon should be included as part of Icons
+function CheckIcon({ copyrightYear = '2023', ...props }: IconProps) {
+  return (
+    <Icon copyrightYear={copyrightYear} {...props}>
+      <path
+        d="M16.285 6.0003L10.769 13.8053L6.936 11.0173L5 13.6463L11.526 18.5263L19 8.0053L16.285 6.0003Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}
+
+function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxProps, ref: any) {
+  const state = useContext(CheckboxGroupContext);
+  const { size, orientation } = state;
+  const localRef = useRef(null);
+  const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem({ ...props, value, children }, state, localRef);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocusVisible });
+
+  return (
+    <label className={styles.base({ className })} ref={ref}>
+      <VisuallyHidden>
+        <input {...inputProps} {...focusProps} ref={localRef} />
+      </VisuallyHidden>
+      <div className={styles.checkbox()}>
+        {isSelected && <CheckIcon className={styles.checkIcon()} color={isDisabled ? 'border' : 'hero'} />}
+      </div>
+      <div className={styles.textWrapper()}>
+        <span className={styles.labelText()}>{children}</span>
+        {hint && <span className={styles.hintText()}>{hint}</span>}
+      </div>
+    </label>
+  );
+}
+
+export const Checkbox = forwardRef(BaseCheckbox);

package/src/components/checkbox-group/components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,49 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Checkbox } from './checkbox.component.js';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Example/CheckboxGroup/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="flex justify-center p-3">
+        <Story />{' '}
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+  argTypes: {
+    isDisabled: {
+      description: 'Controls whether individual checkbox items are disabled or not',
+      type: { name: 'boolean' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Base Checkbox Item, unchecked as that is handled by Checkbox
+ */
+export const DefaultStory: Story = {
+  args: { children: 'Option 1', value: 'Option 1' },
+};
+
+/**
+ * > Checkbox Item with hint example
+ */
+export const CheckboxItemWithHint: Story = {
+  args: { children: 'Option 1', value: 'Option 1', hint: 'Test hint' },
+};
+
+/**
+ * > Disabled Checkbox Item example
+ */
+export const CheckboxItemDisabled: Story = {
+  args: { children: 'Option 1', value: 'Option 1', isDisabled: true },
+};

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

@@ -0,0 +1,49 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'flex',
+      checkIcon: 'overflow-visible',
+      textWrapper: 'flex flex-col justify-center',
+      labelText: 'typography-body-10 py-[2px] pl-1',
+      hintText: 'typography-body-10 text-muted pl-1',
+      checkbox: 'flex h-4 w-4 items-center justify-center rounded border border-hero',
+    },
+    variants: {
+      isDisabled: {
+        true: {
+          labelText: 'text-muted',
+          checkbox: 'bg-border-20 border-border',
+        },
+        false: {
+          base: 'hover:cursor-pointer',
+        },
+      },
+      isFocusVisible: {
+        true: { checkbox: 'rounded focus-outline' },
+      },
+      orientation: {
+        horizontal: {
+          base: 'mr-3',
+        },
+        vertical: {
+          base: '',
+        },
+      },
+      size: {
+        large: {
+          checkIcon: 'h-5 w-5',
+          base: 'mb-2',
+          checkbox: 'h-5 w-5',
+        },
+        medium: {
+          checkIcon: 'h-4 w-4',
+          base: 'mb-1',
+          checkbox: 'h-4 w-4',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { AriaCheckboxGroupItemProps } from 'react-aria';
+
+export type CheckboxProps = {
+  /**
+   * `string` for overriding base style
+   */
+  className?: string;
+  /**
+   * Renders hint under option, most likely a `string` but could be something else
+   */
+  hint?: ReactNode;
+} & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './checkbox.component.js';
+export { type CheckboxProps } from './checkbox.types.js';

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

@@ -0,0 +1,2 @@
+export { CheckboxGroup } from './checkbox-group.component.js';
+export { type CheckboxGroupProps } from './checkbox-group.types.js';

package/src/components/icon/components/accessibility-icon.tsx

@@ -5,15 +5,18 @@ import { type IconProps } from '../icon.types.js';
 
 export function AccessibilityIcon({
   'aria-label': ariaLabel = 'Accessibility',
-  copyrightYear = '2020',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
+        d="M12 5C13.375 5 14.5 3.875 14.5 2.5C14.5 1.125 13.375 0 12 0C10.625 0 9.5 1.125 9.5 2.5C9.5 3.875 10.625 5 12 5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12 6.02203C15.4589 6.02203 19.1989 5.65536 22.3889 4.7998L23 7.24425C20.8297 7.82767 18.3475 8.22171 16 8.43702V24H13V16H11V24H8V8.43702C5.65253 8.22171 3.17031 7.82767 1 7.24425L1.61111 4.7998C4.80111 5.65536 8.54111 6.02203 12 6.02203Z"
         fill="currentColor"
-        fillRule="evenodd"
-        d="M12,0 C13.375,0 14.5,1.125 14.5,2.5 C14.5,3.875 13.375,5 12,5 C10.625,5 9.5,3.875 9.5,2.5 C9.5,1.125 10.625,0 12,0 Z M22,8 L16,8 L16,24 L13,24 L13,16 L11,16 L11,24 L8,24 L8,8 L2,8 L2,6 L22,6 L22,8 Z"
       />
     </Icon>
   );

package/src/components/icon/components/account-icon.tsx

@@ -1,16 +1,47 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function AccountIcon({ 'aria-label': ariaLabel = 'Account', copyrightYear = '2020', ...props }: IconProps) {
+export function AccountIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Account',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M24,9.85324138 C22.5,11.5084138 17.373,13.2413793 12,13.2413793 C6.62625,13.2413793 1.5,11.5084138 0,9.85324138 L0,13.1635862 C0,14.8187586 5.25,17.3793103 12,17.3793103 C18.75,17.3793103 24,14.8187586 24,13.1635862 L24,9.85324138 Z M24,16.473931 C22.5,18.1291034 17.373,19.862069 12,19.862069 C6.62625,19.862069 1.5,18.1291034 0,16.473931 L0,19.7842759 C0,21.4394483 5.25,24 12,24 C18.75,24 24,21.4394483 24,19.7842759 L24,16.473931 Z M12,0 C18.62775,0 24,2.48275862 24,4.13793103 L24,6.62068966 C24,8.27586207 18.62775,10.7586207 12,10.7586207 C5.37225,10.7586207 0,8.27586207 0,6.62068966 L0,4.13793103 C0,2.48275862 5.37225,0 12,0 L12,0 Z"
-      />
+      {look === 'filled' ? (
+        <Fragment>
+          <path
+            d="M20.5 7C20.5 8.933 16.6944 10.5 12 10.5C7.30558 10.5 3.5 8.933 3.5 7C3.5 5.067 7.30558 3.5 12 3.5C16.6944 3.5 20.5 5.067 20.5 7Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24 18.5V5.5C24 2.46243 18.6274 0 12 0C5.37258 0 0 2.46243 0 5.5V18.5C0 21.5376 5.37258 24 12 24C18.6274 24 24 21.5376 24 18.5ZM12 12.5C14.5427 12.5 16.938 12.0794 18.7719 11.3242C19.6842 10.9486 20.5541 10.4507 21.2271 9.79542C21.9065 9.13403 22.5 8.18867 22.5 7C22.5 5.81133 21.9065 4.86598 21.2271 4.20458C20.5541 3.54935 19.6842 3.0514 18.7719 2.67577C16.938 1.92063 14.5427 1.5 12 1.5C9.45731 1.5 7.06201 1.92063 5.22809 2.67577C4.31585 3.0514 3.44592 3.54935 2.77286 4.20458C2.09348 4.86598 1.5 5.81133 1.5 7C1.5 8.18867 2.09348 9.13403 2.77286 9.79542C3.44592 10.4507 4.31585 10.9486 5.22809 11.3242C7.06201 12.0794 9.45731 12.5 12 12.5ZM2.77285 14.5454C2.19165 13.9796 1.67333 13.206 1.53564 12.25H3.58607C4.17528 13.9461 7.71784 15.25 12 15.25C16.2821 15.25 19.8247 13.9461 20.4139 12.25H22.4643C22.3267 13.206 21.8083 13.9796 21.2271 14.5454C20.5541 15.2007 19.6841 15.6986 18.7719 16.0742C16.938 16.8294 14.5427 17.25 12 17.25C9.4573 17.25 7.062 16.8294 5.22808 16.0742C4.31583 15.6986 3.44591 15.2007 2.77285 14.5454ZM1.53564 17C1.67333 17.956 2.19165 18.7296 2.77285 19.2954C3.44591 19.9507 4.31583 20.4486 5.22808 20.8242C7.062 21.5794 9.4573 22 12 22C14.5427 22 16.938 21.5794 18.7719 20.8242C19.6841 20.4486 20.5541 19.9507 21.2271 19.2954C21.8083 18.7296 22.3267 17.956 22.4643 17H20.4139C19.8247 18.6961 16.2821 20 12 20C7.71784 20 4.17528 18.6961 3.58607 17H1.53564Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M18.7719 11.3242C16.938 12.0794 14.5427 12.5 12 12.5C9.45731 12.5 7.06201 12.0794 5.22809 11.3242C4.31585 10.9486 3.44592 10.4507 2.77286 9.79542C2.09348 9.13403 1.5 8.18867 1.5 7C1.5 5.81133 2.09348 4.86598 2.77286 4.20458C3.44592 3.54935 4.31585 3.0514 5.22809 2.67577C7.06201 1.92063 9.45731 1.5 12 1.5C14.5427 1.5 16.938 1.92063 18.7719 2.67577C19.6842 3.0514 20.5541 3.54935 21.2271 4.20458C21.9065 4.86598 22.5 5.81133 22.5 7C22.5 8.18867 21.9065 9.13403 21.2271 9.79542C20.5541 10.4507 19.6842 10.9486 18.7719 11.3242ZM12 10.5C16.6944 10.5 20.5 8.933 20.5 7C20.5 5.067 16.6944 3.5 12 3.5C7.30558 3.5 3.5 5.067 3.5 7C3.5 8.933 7.30558 10.5 12 10.5Z"
+            fill="currentColor"
+          />
+          <path
+            d="M1.53564 12.25C1.67333 13.206 2.19165 13.9796 2.77285 14.5454C3.44591 15.2007 4.31583 15.6986 5.22808 16.0742C7.062 16.8294 9.4573 17.25 12 17.25C14.5427 17.25 16.938 16.8294 18.7719 16.0742C19.6841 15.6986 20.5541 15.2007 21.2271 14.5454C21.8083 13.9796 22.3267 13.206 22.4643 12.25H20.4139C19.8247 13.9461 16.2821 15.25 12 15.25C7.71784 15.25 4.17528 13.9461 3.58607 12.25H1.53564Z"
+            fill="currentColor"
+          />
+          <path
+            d="M2.77285 19.2954C2.19165 18.7296 1.67333 17.956 1.53564 17H3.58607C4.17528 18.6961 7.71784 20 12 20C16.2821 20 19.8247 18.6961 20.4139 17H22.4643C22.3267 17.956 21.8083 18.7296 21.2271 19.2954C20.5541 19.9507 19.6841 20.4486 18.7719 20.8242C16.938 21.5794 14.5427 22 12 22C9.4573 22 7.062 21.5794 5.22808 20.8242C4.31583 20.4486 3.44591 19.9507 2.77285 19.2954Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/add-circle-icon.tsx

@@ -1,16 +1,34 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function AddCircleIcon({ 'aria-label': ariaLabel = 'Add', copyrightYear = '2020', ...props }: IconProps) {
+export function AddCircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Add Circle',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M24,12 C24,18.627 18.62775,24 12,24 C5.37225,24 0,18.627 0,12 C0,5.373 5.37225,0 12,0 C18.62775,0 24,5.373 24,12 Z M12,2 C6.47714286,2 2,6.47714286 2,12 C2,17.5228571 6.47714286,22 12,22 C17.5228571,22 22,17.5228571 22,12 C22,6.47714286 17.5228571,2 12,2 Z M11,11 L11,6 L13,6 L13,11 L18,11 L18,13 L13,13 L13,18 L11,18 L11,13 L6,13 L6,11 L11,11 Z"
-      />
+      {look === 'filled' ? (
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12 24C18.6278 24 24 18.627 24 12C24 5.373 18.6278 0 12 0C5.37225 0 0 5.373 0 12C0 18.627 5.37225 24 12 24ZM6 11H11V6H13V11H18V13H13V18H11V13H6V11Z"
+          fill="currentColor"
+        />
+      ) : (
+        <Fragment>
+          <path d="M6 11H11V6H13V11H18V13H13V18H11V13H6V11Z" fill="currentColor" />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M24 12C24 18.627 18.6278 24 12 24C5.37225 24 0 18.627 0 12C0 5.373 5.37225 0 12 0C18.6278 0 24 5.373 24 12ZM12 2C6.47714 2 2 6.47714 2 12C2 17.5229 6.47714 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47714 17.5229 2 12 2Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
     </Icon>
   );
 }

package/src/components/icon/components/add-icon.tsx

@@ -3,14 +3,10 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function AddIcon({ 'aria-label': ariaLabel = 'Add', copyrightYear = '2020', ...props }: IconProps) {
+export function AddIcon({ 'aria-label': ariaLabel = 'Add', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      <polygon
-        fill="currentColor"
-        fillRule="evenodd"
-        points="11 11 4 11 4 13 11 13 11 20 13 20 13 13 20 13 20 11 13 11 13 4 11 4"
-      />
+      <path d="M11 11H4V13H11V20H13V13H20V11H13V4H11V11Z" fill="currentColor" />
     </Icon>
   );
 }