Skip to content

Commit c5e66bd

Browse files
joshuaellisjoshuaellis
committed
docs: fix TS issues in stories
1 parent aff1232 commit c5e66bd

17 files changed

+67
-54
lines changed

‎.changeset/famous-trainers-pretend.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
"@strapi/design-system": major
2+
'@strapi/design-system': major
33
---
44

55
chore!: default color for Typography is currentColor

‎.changeset/tidy-eggs-sleep.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
"@strapi/design-system": major
3-
"@strapi/icons": major
2+
'@strapi/design-system': major
3+
'@strapi/icons': major
44
---
55

66
chore: update to use styled-components@6

‎docs/.storybook/preview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const Theme = ({ children, ...props }: BoxProps) => {
5757

5858
return (
5959
<DesignSystemProvider locale="en" theme={isDark ? darkTheme : lightTheme}>
60-
<Main as="main" background="neutral0" padding="4rem" paddingBottom="8rem" height="100%">
60+
<Main tag="main" background="neutral0" padding="4rem" paddingBottom="8rem" height="100%">
6161
<Box maxWidth="84rem" margin="auto" height="100%" {...props}>
6262
{children}
6363
</Box>

‎docs/components/ColorCards.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,14 @@ const ColorCards = () => {
2727
const { compare } = useCollator(locale);
2828

2929
return (
30-
<Flex as="article" alignItems="stretch" direction="column">
30+
<Flex tag="article" alignItems="stretch" direction="column">
3131
{COLOR_CARD_NAMES.map((colorName) => {
3232
const colorKeys = Object.keys(allColors).filter((colorKey) => colorKey.startsWith(colorName.toLowerCase()));
3333

3434
return (
35-
<Box key={colorName} as="section">
35+
<Box key={colorName} tag="section">
3636
<H2>{`${colorName} colors`}</H2>
37-
<Grid as="ol" gap={6} gridCols={3}>
37+
<Grid tag="ol" gap={6} gridCols={3}>
3838
{colorKeys
3939
.toSorted((a, b) => compare(a, b))
4040
.map((key) => (
@@ -73,9 +73,9 @@ const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
7373
const colorRGB = `${colorRef.toRgb().r}, ${colorRef.toRgb().g}, ${colorRef.toRgb().b}`;
7474

7575
return (
76-
<Box as="article" background="neutral100" borderRadius="8px">
76+
<Box tag="article" background="neutral100" borderRadius="8px">
7777
<Flex
78-
as="dl"
78+
tag="dl"
7979
alignItems="end"
8080
direction="row"
8181
background={colorKey}
@@ -91,7 +91,7 @@ const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
9191
<ContrastInfo backgroundColor={colorHex} isLighter isSmall />
9292
</Flex>
9393
<Grid
94-
as="dl"
94+
tag="dl"
9595
aria-label={`Table properties for ${colorName} ${colorShade}`}
9696
gap={2}
9797
gridCols={2}
@@ -117,10 +117,10 @@ const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
117117
},
118118
].map((props) => (
119119
<Box key={props.label}>
120-
<Typography as="dt" variant="sigma">
120+
<Typography tag="dt" variant="sigma">
121121
{props.label}
122122
</Typography>
123-
<Typography as="dd" variant="pi">
123+
<Typography tag="dd" variant="pi">
124124
{props.content}
125125
</Typography>
126126
</Box>
@@ -142,15 +142,15 @@ const ContrastInfo = ({ backgroundColor = '', isLighter = false, isSmall = false
142142
return (
143143
<Flex alignItems="stretch" direction="column" flex={1} textAlign="center">
144144
<Box
145-
as="dt"
145+
tag="dt"
146146
aria-label={`${isSmall ? 'Small' : 'Large'} font and ${isLighter ? 'lighter' : 'darker'} text.`}
147147
paddingBottom={2}
148148
style={{ color: textColor, fontSize: isSmall ? '12px' : '16px' }}
149149
>
150150
A
151151
</Box>
152152
<Box
153-
as="dd"
153+
tag="dd"
154154
background="neutral1000"
155155
borderRadius="4px"
156156
color="neutral0"

‎docs/components/DeprecationNotice.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface DeprecationNoticeProps {
99

1010
const DeprecationNotice = ({ children, href }: DeprecationNoticeProps) => (
1111
<Flex padding={5} background="danger500" justifyContent="center" marginTop={4} marginBottom={4} hasRadius>
12-
<Typography fontSize={4} fontWeight="bold" as="p">
12+
<Typography fontSize={4} fontWeight="bold" tag="p">
1313
⛔️
1414
<strong>
1515
{' This component has been deprecated. Please use '}

‎docs/components/Typography.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@ import { Typography, TypographyProps } from '@strapi/design-system';
22
import styled, { css } from 'styled-components';
33

44
const H1 = (props: TypographyProps) => (
5-
<Typography as="h1" variant="alpha" textColor="neutral800" marginBottom="0.5em" {...props} />
5+
<Typography tag="h1" variant="alpha" textColor="neutral800" marginBottom="0.5em" {...props} />
66
);
77

88
const H2 = (props: TypographyProps) => (
9-
<Typography as="h2" variant="beta" textColor="neutral800" marginBottom="1em" marginTop="2em" {...props} />
9+
<Typography tag="h2" variant="beta" textColor="neutral800" marginBottom="1em" marginTop="2em" {...props} />
1010
);
1111

1212
const H3 = (props: TypographyProps) => (
13-
<Typography as="h3" variant="delta" textColor="neutral800" marginBottom="1em" marginTop="1.4em" {...props} />
13+
<Typography tag="h3" variant="delta" textColor="neutral800" marginBottom="1em" marginTop="1.4em" {...props} />
1414
);
1515

1616
const H4 = (props: TypographyProps) => (
1717
<Typography
18-
as="h4"
18+
tag="h4"
1919
variant="epsilon"
2020
textColor="neutral800"
2121
marginBottom="1em"
@@ -25,7 +25,7 @@ const H4 = (props: TypographyProps) => (
2525
/>
2626
);
2727

28-
const P = (props: TypographyProps) => <Paragraph as="p" variant="epsilon" textColor="neutral700" {...props} />;
28+
const P = (props: TypographyProps) => <Paragraph tag="p" variant="epsilon" textColor="neutral700" {...props} />;
2929

3030
const codeStyles = css`
3131
color: ${({ theme }) => theme.colors.neutral700};
@@ -44,7 +44,7 @@ const Paragraph = styled(Typography)`
4444
}
4545
`;
4646

47-
const Li = (props: TypographyProps) => <ListItem as="li" variant="epsilon" textColor="neutral700" {...props} />;
47+
const Li = (props: TypographyProps) => <ListItem tag="li" variant="epsilon" textColor="neutral700" {...props} />;
4848

4949
const ListItem = styled(Typography)`
5050
& code {

‎docs/stories/Breadcrumbs.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ the `as` prop in order to replace the default HTML anchor `<a />`. You'll now be
5454
import { Breadcrumbs, CrumbLink } from '@strapi/design-system';
5555
import { NavLink } from 'react-router-dom';
5656

57-
<Breadcrumbs label="Folder navigatation" as="nav">
57+
<Breadcrumbs label="Folder navigatation" tag="nav">
5858
<CrumbLink as={NavLink} to="/">
5959
Media Library
6060
</CrumbLink>
@@ -69,7 +69,7 @@ For NextJS, you'll need to wrap the `CrumbLink` with the `NextLink` component
6969
import { Breadcrumbs, CrumbLink } from '@strapi/design-system';
7070
import NextLink from 'next/link';
7171

72-
<Breadcrumbs label="Folder navigatation" as="nav">
72+
<Breadcrumbs label="Folder navigatation" tag="nav">
7373
<NextLink href="/home" passHref>
7474
<CrumbLink>Media Library</CrumbLink>
7575
</NextLink>

‎docs/stories/Breadcrumbs.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Breadcrumbs>;
1414
export const Base = {
1515
render: () => (
1616
<Flex direction="column" alignItems="stretch" gap={3}>
17-
<Breadcrumbs label="Folder navigatation" as="nav">
17+
<Breadcrumbs label="Folder navigatation">
1818
<CrumbLink href="/">Media Library</CrumbLink>
1919
<Crumb isCurrent>Cats</Crumb>
2020
</Breadcrumbs>
@@ -27,7 +27,7 @@ export const Base = {
2727
export const WithMenu = {
2828
render: () => (
2929
<Flex gap={3}>
30-
<Breadcrumbs label="Folder navigatation" as="nav">
30+
<Breadcrumbs label="Folder navigatation">
3131
<CrumbLink href="/">Media Library</CrumbLink>
3232
<CrumbSimpleMenu aria-label="See more ascendants folders" label="...">
3333
<MenuItem href="/">Home</MenuItem>

‎docs/stories/FocusTrap.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const TrappedComponent = ({ onClose, skipAutoFocus }) => {
3131
<Box background="neutral0" padding={4} hasRadius style={{ width: '600px' }}>
3232
<Flex direction="column" alignItems="center" gap={4}>
3333
<Flex justifyContent="space-between">
34-
<Typography variant="beta" as="h2">
34+
<Typography variant="beta" tag="h2">
3535
Hey folks!
3636
</Typography>
3737
<button
@@ -72,7 +72,7 @@ export const ExampleComponent = ({ skipAutoFocus = false }) => {
7272
<Flex direction="column" alignItems="center" gap={2}>
7373
{visible && <TrappedComponent onClose={() => setVisible(false)} skipAutoFocus={skipAutoFocus} />}
7474
<Box background="neutral0" padding={4} hasRadius style={{ width: '600px' }}>
75-
<Typography variant="beta" as="h2">
75+
<Typography variant="beta" tag="h2">
7676
Outside the trap!
7777
</Typography>
7878

‎docs/stories/HeaderLayout.stories.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const Base = {
4040
}
4141
title="Restaurants"
4242
subtitle="36 entries found"
43-
as="h2"
43+
tag="h2"
4444
/>
4545
</Box>
4646
),
@@ -60,7 +60,7 @@ export const BaseWithoutNavAction = {
6060
}
6161
title="Other CT"
6262
subtitle="36 entries found"
63-
as="h2"
63+
tag="h2"
6464
/>
6565
</Box>
6666
),
@@ -79,7 +79,7 @@ export const BaseWithCustomSubtitle = {
7979
<Crumb>Cats</Crumb>
8080
</Breadcrumbs>
8181
}
82-
as="h2"
82+
tag="h2"
8383
/>
8484
</Box>
8585
),
@@ -105,7 +105,7 @@ export const Sticky = {
105105
}
106106
title="Restaurants"
107107
subtitle="36 entries found"
108-
as="h2"
108+
tag="h2"
109109
/>
110110
</Box>
111111
),
@@ -142,7 +142,7 @@ export const CombinedWScroll = {
142142
}
143143
title="Restaurants"
144144
subtitle="36 entries found"
145-
as="h2"
145+
tag="h2"
146146
/>
147147
{isVisible && (
148148
<ModalLayout onClose={() => setIsVisible(false)} labelledBy="subtitle">

‎docs/stories/Layout.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const Base = {
8989
<Box background="neutral100">
9090
<Layout
9191
sideNav={
92-
<SubNav ariaLabel="Builder sub nav">
92+
<SubNav aria-label="Builder sub nav">
9393
<SubNavHeader searchable value="" label="Builder" searchLabel="Search..." />
9494
<SubNavSections>
9595
<SubNavSection label="Collection Type" collapsable badgeLabel={links.length.toString()}>
@@ -122,7 +122,7 @@ export const Base = {
122122
}
123123
title="Other CT"
124124
subtitle="36 entries found"
125-
as="h2"
125+
tag="h2"
126126
/>
127127
<ActionLayout
128128
startActions={

‎docs/stories/ModalLayout.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const Base = {
3939
{isVisible && (
4040
<ModalLayout onClose={() => setIsVisible((prev) => !prev)} labelledBy="title">
4141
<ModalHeader>
42-
<Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
42+
<Typography fontWeight="bold" textColor="neutral800" tag="h2" id="title">
4343
Title
4444
</Typography>
4545
</ModalHeader>

‎docs/stories/Popover.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const Centered = {
3636
{Array(15)
3737
.fill(null)
3838
.map((_, index) => (
39-
<Box color="neutral800" key={index} padding={3} as="li">
39+
<Box color="neutral800" key={index} padding={3} tag="li">
4040
Element{index}
4141
</Box>
4242
))}
@@ -70,7 +70,7 @@ export const FullWidth = {
7070
{Array(15)
7171
.fill(null)
7272
.map((_, index) => (
73-
<Box color="neutral800" key={index} padding={3} as="li">
73+
<Box color="neutral800" key={index} padding={3} tag="li">
7474
Element{index}
7575
</Box>
7676
))}
@@ -112,7 +112,7 @@ export const OnReachEnd = {
112112
tabIndex={-1}
113113
>
114114
{items.map((_, index) => (
115-
<Box color="neutral800" key={index} padding={3} as="li" id={`item-${index}`}>
115+
<Box color="neutral800" key={index} padding={3} tag="li" id={`item-${index}`}>
116116
Element{index}
117117
</Box>
118118
))}
@@ -158,7 +158,7 @@ export const OverflowRight = {
158158
{Array(15)
159159
.fill(null)
160160
.map((_, index) => (
161-
<Box color="neutral800" key={index} padding={3} as="li">
161+
<Box color="neutral800" key={index} padding={3} tag="li">
162162
Element{index}
163163
</Box>
164164
))}

‎docs/stories/SubNav.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export const Base = {
6262
}}
6363
background="neutral200"
6464
>
65-
<SubNav ariaLabel="Builder sub nav">
65+
<SubNav aria-label="Builder sub nav">
6666
<SubNavHeader
6767
searchable
6868
value={search}
@@ -104,7 +104,7 @@ export const Base = {
104104
}}
105105
background="neutral200"
106106
>
107-
<SubNav ariaLabel="Settings sub nav">
107+
<SubNav aria-label="Settings sub nav">
108108
<SubNavHeader label="Settings" />
109109
<SubNavSections>
110110
<SubNavLink href="/blabla" withBullet className="active">
@@ -146,7 +146,7 @@ export const Base = {
146146
}}
147147
background="neutral200"
148148
>
149-
<SubNav ariaLabel="Mixed sub nav">
149+
<SubNav aria-label="Mixed sub nav">
150150
<SubNavHeader label="Mixed" />
151151
<SubNavSections>
152152
<SubNavLink href="/blabla" withBullet icon={<GridNine />}>

‎packages/strapi-design-system/src/Breadcrumbs/Breadcrumbs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const Breadcrumbs = ({ label, children, ...props }: BreadcrumbsProps) =>
2424
const childrenArray = React.Children.toArray(children);
2525

2626
return (
27-
<Box aria-label={label} {...props}>
27+
<Box aria-label={label} tag="nav" {...props}>
2828
<AlignedList tag="ol">
2929
{React.Children.map(childrenArray, (child, index) => {
3030
const shouldDisplayDivider = childrenArray.length > 1 && index + 1 < childrenArray.length;

0 commit comments

Comments
 (0)