scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix/SW-1563 accessibility

Browse Source 
* fix(SW-1563): Added new IconButton component to the design system and removed Icon variant inside the Button component
* fix(SW-1563): Added buttons around clickable images and changed to design system components
* fix(SW-1563): Renamed variants to match Figma
* fix(SW-1563): Renamed AriaButton to ButtonRAC

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-05-02 06:27:30 +00:00
parent efcbde1647
commit 8b32abbefc
32 changed files with 909 additions and 547 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/design-system/lib/components/RateCard/Campaign/index.tsx
View File

@@ -1,7 +1,7 @@
import { Typography } from '../../Typography'
import { Rate, RateTermDetails } from '../types'
import { Button } from '../../Button'
import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import Modal from '../Modal'
import styles from '../rate-card.module.css'
@@ -67,13 +67,13 @@ export default function CampaignRateCard({
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" size="Small">
<IconButton theme="Black" style="Muted">
<MaterialIcon
icon="info"
size={20}
color="Icon/Default"
/>
</Button>
</IconButton>
}
>
{rateTermDetails.map((termGroup) => (

6
packages/design-system/lib/components/RateCard/Code/index.tsx
View File

@@ -1,6 +1,6 @@
import { Rate, RateTermDetails } from '../types'
import { Button } from '../../Button'
import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'
import Modal from '../Modal'
@@ -63,13 +63,13 @@ export default function CodeRateCard({
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" size="Small">
<IconButton theme="Black" style="Muted">
<MaterialIcon
icon="info"
size={20}
color="Icon/Default"
/>
</Button>
</IconButton>
}
>
{rateTermDetails.map((termGroup) => (

6
packages/design-system/lib/components/RateCard/NoRateAvailable/index.tsx
View File

@@ -1,4 +1,4 @@
import { Button } from '../../Button'
import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'
import styles from '../rate-card.module.css'
@@ -34,9 +34,9 @@ export default function NoRateAvailableCard({
<header>
<Typography variant="Tag/sm">
<h3 className={`${styles.title} ${styles.textDisabled}`}>
<Button variant="Icon" size="Small">
<IconButton theme="Black" style="Muted">
<MaterialIcon icon="info" size={20} color="Icon/Default" />
</Button>
</IconButton>
{`${rateTitle} / ${paymentTerm}`}
</h3>
</Typography>

6
packages/design-system/lib/components/RateCard/Points/index.tsx
View File

@@ -2,7 +2,7 @@ import { Typography } from '../../Typography'
import { RatePointsOption, RateTermDetails } from '../types'
import { RadioGroup } from 'react-aria-components'
import { Button } from '../../Button'
import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Radio } from '../../Radio'
import Modal from '../Modal'
@@ -49,9 +49,9 @@ export default function PointsRateCard({
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" size="Small">
<IconButton theme="Black" style="Muted">
<MaterialIcon icon="info" size={20} color="Icon/Default" />
</Button>
</IconButton>
}
>
{rateTermDetails.map((termGroup) => (

6
packages/design-system/lib/components/RateCard/Regular/index.tsx
View File

@@ -1,6 +1,6 @@
import { Rate, RateTermDetails } from '../types'
import { Button } from '../../Button'
import { IconButton } from '../../IconButton'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'
import Modal from '../Modal'
@@ -56,13 +56,13 @@ export default function RegularRateCard({
title={rateTitle}
subtitle={paymentTerm}
trigger={
<Button variant="Icon" size="Small">
<IconButton theme="Black" style="Muted">
<MaterialIcon
icon="info"
size={20}
color="Icon/Default"
/>
</Button>
</IconButton>
}
>
{rateTermDetails.map((termGroup) => (