From 9a1acefa8c3fe8dc70cf095ef8408964893494af Mon Sep 17 00:00:00 2001 From: HZ991 Date: Fri, 25 Oct 2024 11:53:03 +1100 Subject: [PATCH 1/7] fix for the following: site sidebar, site header, ui badge, ui storybook typography --- .../components/sidebar/sidebar.component.tsx | 14 +++++++------- .../components/badge/accessibilityDemo.mdoc | 11 ++++++----- .../badge/design/badge-styles/content.mdoc | 6 ++++-- .../design/where-is-this-available/content.mdoc | 6 +++--- packages/ui/src/components/badge/badge.stories.tsx | 14 ++++++++------ packages/ui/src/components/header/header.styles.ts | 2 +- .../src/stories/foundation/typography.stories.tsx | 2 +- 7 files changed, 30 insertions(+), 25 deletions(-) diff --git a/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx b/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx index 3f90020f6..d97cd269b 100644 --- a/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx +++ b/apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx @@ -28,18 +28,18 @@ export function Sidebar({ items, brand }: SidebarProps) { }); useEffect(() => { - if (!listRef.current) { + if (!outsideRef.current) { return; } const listener = () => { - const y = listRef.current?.scrollTop || 0; + const y = outsideRef.current?.scrollTop || 0; setScrolled(y > 0); }; - listRef.current.addEventListener('scroll', listener); + outsideRef.current.addEventListener('scroll', listener); return () => { - listRef.current?.removeEventListener('scroll', listener); + outsideRef.current?.removeEventListener('scroll', listener); }; - }, [listRef]); + }, []); useEffect(() => { if (open) { @@ -81,8 +81,8 @@ export function Sidebar({ items, brand }: SidebarProps) { })} >
- - Messages - + +
+ Product feature +
+ 12 @@ -65,12 +67,11 @@ Product feature - + NEW - diff --git a/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc b/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc index 3a2376810..36f9ad572 100644 --- a/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc +++ b/apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc @@ -105,8 +105,10 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u Label - - Messages + +
+ Messages +
12 diff --git a/apps/site/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc index 903536d1f..de3d593a9 100644 --- a/apps/site/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc @@ -1,6 +1,6 @@ {% shortCode name="where-is-this-available" /%} {% availabilityContent - availableGel="available" - availableMesh="in-progress" - availableLegacyWdp="older-version-available" /%} + availableGel="available" + availableMesh="in-progress" + availableLegacyWdp="older-version-available" /%} diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx index 3373ccb0c..51fbc49c6 100644 --- a/packages/ui/src/components/badge/badge.stories.tsx +++ b/packages/ui/src/components/badge/badge.stories.tsx @@ -131,12 +131,14 @@ export const Soft = () => ( export const Links = () => (
{COLORS.map(color => ( - - {color} - - 12 - - +
+ +
Product feature
+ + NEW + + +
))}
); diff --git a/packages/ui/src/components/header/header.styles.ts b/packages/ui/src/components/header/header.styles.ts index 478229839..ee5587a52 100644 --- a/packages/ui/src/components/header/header.styles.ts +++ b/packages/ui/src/components/header/header.styles.ts @@ -11,7 +11,7 @@ export const styles = tv( largeLogo: 'max-sm:hidden', leftContent: 'flex items-center', leftButton: - 'my-1 border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]', + 'my-1 border-r border-[#E8E8ED] p-0 rounded-none max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]', rightContent: 'ml-auto flex items-center', }, variants: { diff --git a/packages/ui/src/stories/foundation/typography.stories.tsx b/packages/ui/src/stories/foundation/typography.stories.tsx index db798396d..a4d7e8323 100644 --- a/packages/ui/src/stories/foundation/typography.stories.tsx +++ b/packages/ui/src/stories/foundation/typography.stories.tsx @@ -42,7 +42,7 @@ export const BrandFont = () => { { className: 'typography-brand-11', fontSize: fourteenPixel, lineHeight: twentyPixel }, ]; return ( - +
GEL brand typography tokens From 34fcc85c833d9ee0ab7f14618d40c0d4f3321872 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Mon, 28 Oct 2024 11:46:23 +1100 Subject: [PATCH 2/7] add: update to progress indicator component --- .../ui/src/components/badge/badge.stories.tsx | 4 +- .../progress-indicator.component.tsx | 67 +++++++++++++++++-- .../progress-indicator.scenarios.stories.tsx | 2 +- .../progress-indicator.stories.tsx | 44 +++++++++--- .../progress-indicator.styles.ts | 32 ++++++++- .../progress-indicator.types.ts | 23 ++++++- 6 files changed, 152 insertions(+), 20 deletions(-) diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx index 51fbc49c6..4420afed5 100644 --- a/packages/ui/src/components/badge/badge.stories.tsx +++ b/packages/ui/src/components/badge/badge.stories.tsx @@ -131,8 +131,8 @@ export const Soft = () => ( export const Links = () => (
{COLORS.map(color => ( -
- +
+
Product feature
NEW diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx index 35330fe4d..f391439a9 100644 --- a/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx +++ b/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx @@ -1,21 +1,74 @@ import React from 'react'; import { Icon } from '../icon/icon.component.js'; +import { Label } from '../label/label.component.js'; -import { styles } from './progress-indicator.styles.js'; +import { styles as ProgressIndicatorStyles } from './progress-indicator.styles.js'; import { ProgressIndicatorProps } from './progress-indicator.types.js'; export function ProgressIndicator({ - className, - children, - color = 'hero', + inverted = false, + label, size = 'medium', + embedIcon: EmbedIcon, + className, 'aria-label': ariaLabel = 'Loading', ...props }: ProgressIndicatorProps) { + const styles = ProgressIndicatorStyles({ + size, + inverted, + }); + + const sizeMap: Record = { + xlarge: { strokeWidth: 4 }, + large: { strokeWidth: 4 }, + medium: { strokeWidth: 15 }, + small: { strokeWidth: 20 }, + xsmall: { strokeWidth: 30 }, + }; + + const strokeHalfWidth = sizeMap[size.toString()].strokeWidth / 2; + const setPath = ( + + <> + + + + + ); + return ( - - {children} - +
+
+ + + + + + + + + + + + {setPath} + + {EmbedIcon && size === 'large' && } +
+ {label && size === 'large' && } +
); } diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx index 8ba9152ac..5d9e1c307 100644 --- a/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx +++ b/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx @@ -25,7 +25,7 @@ type Story = StoryObj; * >Default usage example */ export const Default: Story = { - args: { size: 'xlarge' }, + args: { size: 'large' }, }; /** diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx index d555cb6eb..650e701e8 100644 --- a/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx +++ b/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx @@ -1,5 +1,7 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react'; +import { FingerprintIcon, PadlockIcon, PadlockTickIcon } from '../icon/index.js'; + import { ProgressIndicator } from './progress-indicator.component.js'; const meta: Meta = { @@ -19,7 +21,7 @@ type Story = StoryObj; * > Default usage example */ export const Default: Story = { - args: { size: 'xlarge' }, + args: { size: 'large' }, }; /** @@ -28,11 +30,11 @@ export const Default: Story = { export const Sizes = () => { return ( - <> - {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => ( - +
+ {(['xsmall', 'small', 'medium', 'large'] as const).map(size => ( + ))} - +
); }; @@ -42,10 +44,36 @@ export const Sizes = () => { export const Inverted = () => { return ( -
- {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => ( - +
+ {(['xsmall', 'small', 'medium', 'large'] as const).map(size => ( + ))}
); }; + +/** + * > Large indicator with embedded icon example + */ + +export const Icon = () => { + return ( +
+ + + +
+ ); +}; + +/** + * > Large indicator with label example + */ +export const Label = () => { + return ( +
+ + +
+ ); +}; diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts b/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts index e509dee05..c33ba3da0 100644 --- a/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts +++ b/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts @@ -2,7 +2,37 @@ import { tv } from 'tailwind-variants'; export const styles = tv( { - base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0', + slots: { + icon: 'absolute inset-0 m-auto', + base: 'animate-[spin_0.7s_linear_infinite]', + container: 'flex flex-col items-center', + label: 'typography-body-9 mt-1.5', + }, + variants: { + size: { + xsmall: { base: 'h-2 w-2' }, + small: { base: 'h-3 w-3' }, + medium: { base: 'h-4 w-4' }, + large: { base: 'h-15 w-15' }, + xlarge: { base: 'h-15 w-15' }, + }, + inverted: { + true: '', + false: '', + }, + }, + compoundSlots: [ + { + slots: ['icon', 'base', 'container'], + inverted: true, + class: ['text-white'], + }, + { + slots: ['icon', 'base', 'container'], + inverted: false, + class: ['text-hero'], + }, + ], }, { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] }, ); diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.types.ts b/packages/ui/src/components/progress-indicator/progress-indicator.types.ts index 5455001ba..29950b5bb 100644 --- a/packages/ui/src/components/progress-indicator/progress-indicator.types.ts +++ b/packages/ui/src/components/progress-indicator/progress-indicator.types.ts @@ -1,3 +1,24 @@ +import { ReactNode } from 'react'; + import { IconProps } from '../icon/icon.types.js'; -export type ProgressIndicatorProps = IconProps; +export type ProgressIndicatorProps = IconProps & { + /** + * children prop + * @default false + */ + children?: ReactNode; + /** + * Icon embedded in progress indicator + */ + embedIcon?: (props: IconProps) => JSX.Element; + /** + * Progress indicator color + * @default false + */ + inverted?: boolean; + /** + * Label placed below progress indicator + */ + label?: string; +}; From 024462b425f3c87dd5ceae2c45cfaa0b02850a91 Mon Sep 17 00:00:00 2001 From: Jeremy Ortiz Date: Thu, 31 Oct 2024 22:15:48 +1100 Subject: [PATCH 3/7] fix: add unique id to progress indicator paths --- .../progress-indicator.component.tsx | 43 +++++++++---------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx index f391439a9..ab4ac2e55 100644 --- a/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx +++ b/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useId } from 'react'; import { Icon } from '../icon/icon.component.js'; import { Label } from '../label/label.component.js'; @@ -20,6 +20,8 @@ export function ProgressIndicator({ inverted, }); + const id = useId(); + const sizeMap: Record = { xlarge: { strokeWidth: 4 }, large: { strokeWidth: 4 }, @@ -29,20 +31,6 @@ export function ProgressIndicator({ }; const strokeHalfWidth = sizeMap[size.toString()].strokeWidth / 2; - const setPath = ( - - <> - - - - - ); return (
@@ -55,16 +43,27 @@ export function ProgressIndicator({ {...props} > - - - + + + - - - + + + - {setPath} + + <> + + + + {EmbedIcon && size === 'large' && }
From 23dad1b2dadb6744ce0b0edb465667d51fb9de53 Mon Sep 17 00:00:00 2001 From: Jeremy Ortiz Date: Thu, 31 Oct 2024 22:15:48 +1100 Subject: [PATCH 4/7] fix: add unique id to progress indicator paths --- .changeset/cyan-owls-rest.md | 5 +++ apps/protoform/src/components/cta/cta.tsx | 2 +- .../src/components/sidebar/sidebar.tsx | 2 +- .../components/header/header.component.tsx | 2 +- .../progress-indicator.component.tsx | 43 +++++++++---------- 5 files changed, 29 insertions(+), 25 deletions(-) create mode 100644 .changeset/cyan-owls-rest.md diff --git a/.changeset/cyan-owls-rest.md b/.changeset/cyan-owls-rest.md new file mode 100644 index 000000000..697344e07 --- /dev/null +++ b/.changeset/cyan-owls-rest.md @@ -0,0 +1,5 @@ +--- +'@westpac/ui': minor +--- + +Updated the appearance and svg of progress indicator component; updated visual bugs in header and badge; diff --git a/apps/protoform/src/components/cta/cta.tsx b/apps/protoform/src/components/cta/cta.tsx index 6f9b7b8c2..3dbb813fb 100644 --- a/apps/protoform/src/components/cta/cta.tsx +++ b/apps/protoform/src/components/cta/cta.tsx @@ -19,7 +19,7 @@ export function Cta({ tertiaryOnClick?: () => void; }) { return ( -
+
diff --git a/apps/protoform/src/components/sidebar/sidebar.tsx b/apps/protoform/src/components/sidebar/sidebar.tsx index c374edbc1..17b35b387 100644 --- a/apps/protoform/src/components/sidebar/sidebar.tsx +++ b/apps/protoform/src/components/sidebar/sidebar.tsx @@ -84,7 +84,7 @@ export function Sidebar({ children }: { children?: ReactNode }) { <>
diff --git a/packages/ui/src/components/header/header.component.tsx b/packages/ui/src/components/header/header.component.tsx index bd8c43fb4..ef3c4b8c0 100644 --- a/packages/ui/src/components/header/header.component.tsx +++ b/packages/ui/src/components/header/header.component.tsx @@ -103,7 +103,7 @@ export function Header({