Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI and Protoform changes #904

Merged
merged 7 commits into from
Oct 8, 2024
Merged

UI and Protoform changes #904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4e5f8e2
fix: ui style update
HZ991 Oct 1, 2024
a0d505a
fix: for ui components and protoform
HZ991 Oct 2, 2024
f03a4e2
fix: alert style update
HZ991 Oct 3, 2024
23cf245
fix: lint fixes
HZ991 Oct 3, 2024
b70b74b
changeset
HZ991 Oct 4, 2024
6f96072
changeset
HZ991 Oct 4, 2024
62098e4
Build error fix
HZ991 Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/beige-peaches-explain.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@westpac/ui': minor
---

fixed button groups hover glitch; updated footer story shield margin; updated space below alert title; updated search icon size in automcomplete
2 changes: 1 addition & 1 deletion apps/protoform/src/app/credit-cards/address/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default function Address() {
<Autocomplete
noOptionsMessage="No options found"
label="Search for you home address"
hintMessage="Not a PO Box <>"
hintMessage="Not a PO Box"
defaultInputValue={data.address}
invalid={!!addressError}
name="address"
Expand Down
2 changes: 1 addition & 1 deletion apps/protoform/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function RootLayout({
return (
<html lang="en" data-theme="wbc">
<body>
<main className="m-auto max-w-[1922px] border border-border">
<main className="m-auto max-w-[1922px] border border-white">
<CustomHeader />
<SidebarContextProvider>
<Sidebar />
Expand Down
1 change: 1 addition & 0 deletions apps/protoform/src/components/content-wrapper/content-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export function ContentWrapper({ children }: { children: ReactNode }) {
<GridContainer>
<Grid>
<GridItem span={{ initial: 12, sm: 8, md: 8, lg: 6 }} start={{ initial: 1, sm: 3, md: 3, lg: 4 }}>
<div className="md:h-10"></div>
{children}
</GridItem>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion apps/protoform/src/components/cta/cta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function Cta({
tertiaryOnClick?: () => void;
}) {
return (
<div className="flex gap-2 pb-[120px] pt-6 max-md:flex-col max-md:pb-10">
<div className="flex gap-2 py-5 max-md:flex-col">
<Button size="large" look="primary" className="md:px-2.5" onClick={primaryOnClick} type={primaryType}>
{children}
</Button>
Expand Down
2 changes: 1 addition & 1 deletion apps/protoform/src/components/custom-footer/custom-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function CustomFooter() {
<Footer
brand="wbc"
className={clsx('relative bottom-0 z-[58] w-full border-t-border bg-white pb-0', {
'md:w-[calc(100%-300px)]': open,
'md:w-[calc(100%-301px)]': open,
})}
hideLogo
>
Expand Down
2 changes: 1 addition & 1 deletion apps/protoform/src/components/custom-header/custom-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function CustomHeader() {
leftIcon={isMobile ? 'arrow' : undefined}
leftOnClick={() => router.back()}
logoLink="/"
className="z-[100] m-auto max-w-[1922px] md:sticky md:top-0"
className="z-[100] m-auto max-w-[1922px] md:fixed md:top-0 w-full"
>
<Button look="faint" size={{ initial: 'small', sm: 'medium' }} soft>
Sign Out
Expand Down
3 changes: 2 additions & 1 deletion apps/protoform/src/components/sidebar/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
<>
<div
className={clsx(
'sticky top-0 z-10 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
'items-center sticky top-0 z-10 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
{ 'after:opacity-100': scrolled },
)}
>
Expand All @@ -100,6 +100,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
</Button>
)}
</div>

<>
<>
<div
Expand Down
18 changes: 9 additions & 9 deletions packages/ui/src/components/alert/alert.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,37 +63,37 @@ export const TextMode: Story = {
render: () => (
<>
<h2 className="typography-body-8 mb-2 font-bold">Default</h2>
<h3 className="font-bold pb-2">Info</h3>
<h3 className="pb-2 font-bold">Info</h3>
<Alert look="info" mode="text">
<strong>Heads up!</strong> This alert needs your attention, but it’s not super important. <a href="#">Link</a>
</Alert>
<h3 className="font-bold pb-2">Success</h3>
<h3 className="pb-2 font-bold">Success</h3>
<Alert look="success" mode="text">
<strong>Well done!</strong> You successfully read this important alert message. <a href="#">Link</a>
</Alert>
<h3 className="font-bold pb-2">Warning</h3>
<h3 className="pb-2 font-bold">Warning</h3>
<Alert look="warning" mode="text">
<strong>Warning!</strong> Better check yourself, you’re not looking too good. <a href="#">Link</a>
</Alert>
<h3 className="font-bold pb-2">Danger</h3>
<h3 className="pb-2 font-bold">Danger</h3>
<Alert look="danger" mode="text">
<strong>Oh snap!</strong> Change a few things up and try submitting again. <a href="#">Link</a>
</Alert>
<h3 className="font-bold pb-2">System</h3>
<h3 className="pb-2 font-bold">System</h3>
<Alert look="system" mode="text">
<strong>System Error 8942:</strong> The server is no responding. Please try again later. Sorry for the
inconvenience. <a href="#">Link</a>
</Alert>
<h2 className="typography-body-8 mb-2 font-bold pt-4">Custom Icon Sizes</h2>
<h3 className="font-bold pb-2">Medium</h3>
<h2 className="typography-body-8 mb-2 pt-4 font-bold">Custom Icon Sizes</h2>
<h3 className="pb-2 font-bold">Medium</h3>
<Alert look="info" iconSize="medium" mode="text">
<strong>Medium</strong> This alert has a medium icon. <a href="#">Link</a>
</Alert>
<h3 className="font-bold pb-2">Small</h3>
<h3 className="pb-2 font-bold">Small</h3>
<Alert look="info" iconSize="small" mode="text">
<strong>Small</strong> This alert has a small icon. <a href="#">Link</a>
</Alert>
<h3 className="font-bold pb-2">Extra Small</h3>
<h3 className="pb-2 font-bold">Extra Small</h3>
<Alert look="info" iconSize="xsmall" mode="text">
<strong>Extra Small</strong> This alert has an extra small icon. <a href="#">Link</a>
</Alert>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/alert/alert.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const styles = tv(
base: 'typography-body-10 relative mb-4 xsl:flex',
icon: 'float-left flex-none',
body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
heading: 'typography-body-9 mb-2 font-bold',
heading: 'typography-body-9 mb-1 font-bold',
close: 'absolute right-0.5 top-0.5 p-1 hover:opacity-80',
},
variants: {
Expand Down
14 changes: 2 additions & 12 deletions packages/ui/src/components/autocomplete/autocomplete.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,16 +101,6 @@ export function Autocomplete<T extends object>({
searchProps.value.length,
]);

const iconSize = useMemo(() => {
switch (size) {
case 'small':
case 'medium':
return 'small';
default:
return 'medium';
}
}, [size]);

return (
<div className={styles.base({ className })}>
{props.label && <Label {...labelProps}>{props.label}</Label>}
Expand All @@ -120,9 +110,9 @@ export function Autocomplete<T extends object>({
<div ref={outerRef} className={styles.outerWrapper()}>
<div className={styles.iconWrapper()}>
{loadingState ? (
<ProgressIndicator size={iconSize} color="muted" />
<ProgressIndicator size="small" color="muted" />
) : (
<SearchIcon aria-hidden size={iconSize} color="muted" />
<SearchIcon aria-hidden size="small" color="muted" />
)}
</div>
<input
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/badge/badge.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('Badge', () => {
const style = styles({ color: 'primary', type: 'pill' });
// TODO: use some variants for test
expect(style).toBe(
'whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 h-4 rounded-xl px-[0.4375rem] font-medium leading-none flex items-center',
'whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 flex h-4 items-center rounded-xl px-[0.4375rem] font-medium leading-none',
);
});
});
8 changes: 4 additions & 4 deletions packages/ui/src/components/badge/badge.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export const Buttons = () => (
<div className="flex gap-2">
{SIZES.map(size => (
<Button key={size} color="primary" size={size}>
<div className="w-max flex items-center">
<div className="flex w-max items-center">
Label
<Badge type="default" color="faint" className="ml-1">
NEW
Expand All @@ -161,7 +161,7 @@ export const Buttons = () => (
<div className="flex gap-2">
{SIZES.map(size => (
<Button key={size} color="primary" size={size}>
<div className="w-max flex items-center">
<div className="flex w-max items-center">
<Badge type="default" color="faint" className="mr-1">
NEW
</Badge>{' '}
Expand All @@ -174,7 +174,7 @@ export const Buttons = () => (
<div className="flex gap-2">
{SIZES.map(size => (
<Button key={size} look="primary" size={size}>
<div className="w-max flex items-center">
<div className="flex w-max items-center">
Label
<Badge color="danger-inverted" type="pill" className="ml-1">
88
Expand All @@ -186,7 +186,7 @@ export const Buttons = () => (
<div className="flex gap-2">
{SIZES.map(size => (
<Button key={size} look="primary" size={size}>
<div className="w-max flex items-center">
<div className="flex w-max items-center">
<Badge color="danger-inverted" type="pill" className="mr-1">
88
</Badge>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/badge/badge.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const styles = tv(
'warning-inverted': 'border-none bg-white text-warning',
},
type: {
pill: 'typography-body-10 h-4 rounded-xl px-[0.4375rem] font-medium leading-none flex items-center',
pill: 'typography-body-10 flex h-4 items-center rounded-xl px-[0.4375rem] font-medium leading-none',
default: 'h-[1.25rem] rounded-sm px-1 text-[0.75rem] leading-[1.125rem]',
},
soft: {
Expand Down
3 changes: 2 additions & 1 deletion .../components/button-group/components/button-group-button/button-group-button.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ export function ButtonGroupButton({ className, label, ...props }: ButtonGroupBut
const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, ref);
const { isFocusVisible, focusProps } = useFocusRing();
const styles = buttonStyles({ block, isDisabled, isFocusVisible });
const key = isSelected ? 'selected' : 'not-selected';

return (
<label className={styles.base({ className })}>
<label className={styles.base({ className })} key={key}>
<VisuallyHidden>
<input {...inputProps} {...focusProps} ref={ref} />
</VisuallyHidden>
Expand Down
3 changes: 3 additions & 0 deletions .../src/components/button-group/components/button-group-button/button-group-button.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ export const styles = tv(
true: {
button: 'pointer-events-auto',
},
false: {
button: 'pointer-events-none',
},
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/button/button.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('Button', () => {
it('renders the style correctly', () => {
const style = styles({ look: 'primary', size: 'medium' });
expect(style.base()).toBe(
'items-center justify-center rounded transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none typography-body-9 px-2 active-theme-rams:before:h-0.5 h-6 relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop inline-flex w-auto outline-none',
'items-center justify-center rounded transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none typography-body-9 h-6 px-2 active-theme-rams:before:h-0.5 relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop inline-flex w-auto outline-none',
);
});

Expand Down
1 change: 0 additions & 1 deletion packages/ui/src/components/button/button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { type Meta, StoryFn, type StoryObj } from '@storybook/react';

import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
import { ProgressIndicator } from '../progress-indicator/progress-indicator.component.js';

import { Button } from './button.component.js';

Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/components/button/button.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,16 @@ export const styles = tv(
variants: {
size: {
small: {
base: 'typography-body-10 px-1.5 active-theme-rams:before:h-[0.0625rem] h-5',
base: 'typography-body-10 h-5 px-1.5 active-theme-rams:before:h-[0.0625rem]',
},
medium: {
base: 'typography-body-9 px-2 active-theme-rams:before:h-0.5 h-6',
base: 'typography-body-9 h-6 px-2 active-theme-rams:before:h-0.5',
},
large: {
base: 'typography-body-9 px-2.5 active-theme-rams:before:h-0.5 h-7',
base: 'typography-body-9 h-7 px-2.5 active-theme-rams:before:h-0.5',
},
xlarge: {
base: 'typography-body-8 px-3 active-theme-rams:before:h-1 h-8',
base: 'typography-body-8 h-8 px-3 active-theme-rams:before:h-1',
},
},
look: {
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/error-message/error-message.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@ export const styles = tv({
base: 'typography-body-11 flex items-start text-danger',
list: 'mb-2 flex flex-col gap-1',
// below should be em rather than rem based on old GEL
icon: 'mr-[0.5em] align-top mt-[0.15rem]',
icon: 'mr-[0.5em] mt-[0.15rem] align-top',
},
});
2 changes: 1 addition & 1 deletion packages/ui/src/components/filter/components/filter-buttons/filter-buttons.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
export const styles = tv({
slots: {
base: 'relative flex justify-start',
buttonList: 'flex w-full touch-pan-x gap-1 overflow-y-visible overflow-x-auto whitespace-nowrap',
buttonList: 'flex w-full touch-pan-x gap-1 overflow-x-auto overflow-y-visible whitespace-nowrap',
scrollButton: 'absolute rounded-none contrast-more:bg-black',
},
variants: {
Expand Down
1 change: 0 additions & 1 deletion packages/ui/src/components/flexi-cell/flexi-cell.patterns.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { Badge, ErrorMessage } from '../index.js';
import { FlexiCellAdornment } from './components/flexi-cell-adornment/flexi-cell-adornment.component.js';
import { FlexiCellButton } from './components/flexi-cell-button/flexi-cell-button.component.js';
import { FlexiCellCircle } from './components/flexi-cell-circle/flexi-cell-circle.component.js';
import { FlexiCellFooter } from './components/flexi-cell-footer/flexi-cell-footer.component.js';
import { FlexiCellHint } from './components/flexi-cell-hint/flexi-cell-hint.component.js';
import { FlexiCellLabel } from './components/flexi-cell-label/flexi-cell-label.component.js';
import { FlexiCell } from './flexi-cell.component.js';
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
size={{ initial: 'default', md: 'large' }}
>
<div>
<div className="flex justify-start mb-2 md:mb-3">
<div className="mb-2 flex justify-start md:mb-3">
<GiftIcon look="outlined" color="hero" />
</div>
<div className="flex flex-col">
Expand Down Expand Up @@ -136,7 +136,7 @@
{new Array(3).fill(null).map((_, index) => (
<FlexiCell body={false} key={index} tag="a" href="#" withBorder size={{ initial: 'default', md: 'large' }}>
<div className="flex gap-2">
<img

Check warning on line 139 in packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx

View workflow job for this annotation

GitHub Actions / Test 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
src={imgString}
alt="background"
className="-my-2 -ml-2 block w-[10rem] object-cover md:-my-3 md:-ml-3"
Expand Down Expand Up @@ -175,7 +175,7 @@
{new Array(3).fill(null).map((_, index) => (
<FlexiCell body={false} key={index} tag="a" href="#" withBorder size={{ initial: 'default', md: 'large' }}>
<div className="flex gap-2">
<img src={imgString} alt="background" className="block w-[8rem] object-cover" />

Check warning on line 178 in packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx

View workflow job for this annotation

GitHub Actions / Test 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
<FlexiCellBody>
<FlexiCellLabel tag="h3">Title</FlexiCellLabel>
<FlexiCellHint>Description</FlexiCellHint>
Expand Down Expand Up @@ -221,7 +221,7 @@
>
<div className="flex flex-col gap-2">
<div className="-mx-2 -mt-2 md:-mx-3 md:-mt-3">
<img src={imgString} alt="background" className="block h-[8.75rem] w-full object-cover" />

Check warning on line 224 in packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx

View workflow job for this annotation

GitHub Actions / Test 

Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
</div>
<FlexiCellBody>
<FlexiCellLabel tag="h3">Title</FlexiCellLabel>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/footer/footer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@ export const DefaultStory: Story = {
<Footer brand={brand === 'btfg' ? 'wbc' : brand} hideLogo {...rest}>
<div className="relative">
<div className="float-left flex-none">
<SecurityIcon size="small" className="float-left shrink-0 mr-1 mt-0.5" color="muted" />
<SecurityIcon size="small" className="float-left mr-1 shrink-0" color="muted" />
</div>
<div className="flex">
<p className="text-muted relative flex-1">
<p className="relative flex-1 text-muted">
Our site and your transactions are secure. You can read our{' '}
<Link href="#" type="inline">
security information
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
import { useCallback, useState } from 'react';

import { Button } from '../button/button.component.js';
import { ClearIcon, DropDownIcon, SearchIcon } from '../icon/index.js';
import { ClearIcon, DropDownIcon } from '../icon/index.js';
import { Input } from '../input/input.component.js';
import { InputGroup } from '../input-group/input-group.component.js';

Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/progress-indicator/progress-indicator.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ 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 border-t-transparent',
base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0',
},
{ responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
);
Loading