Skip to content

Commit dc1774e

Browse files
brenzybrenzy
committed
Fixup
1 parent f51c846 commit dc1774e

File tree

8 files changed

+102
-93
lines changed

8 files changed

+102
-93
lines changed

‎libs/radius-examples/.babelrc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"presets": [
3+
[
4+
"@nx/react/babel",
5+
{
6+
"runtime": "automatic",
7+
"useBuiltIns": "usage",
8+
"importSource": "@emotion/react"
9+
}
10+
]
11+
],
12+
"plugins": ["@emotion/babel-plugin"]
13+
}

‎libs/radius-examples/.eslintrc.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"extends": ["../../.eslintrc"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
7+
"rules": {}
8+
},
9+
{
10+
"files": ["*.ts", "*.tsx"],
11+
"rules": {}
12+
},
13+
{
14+
"files": ["*.js", "*.jsx"],
15+
"rules": {}
16+
}
17+
]
18+
}

‎libs/radius-examples/src/components/button/button.stories.tsx‎

Lines changed: 41 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -45,23 +45,17 @@ export const ButtonStates: Story = {
4545
<div>
4646
<RadiusButton {...args}>Normal</RadiusButton>
4747
</div>
48-
<div id="hover">
48+
<div id="hover" className="pseudo-hover-all">
4949
<RadiusButton {...args}>Hover</RadiusButton>
5050
</div>
51-
<div id="active">
51+
<div id="active" className="pseudo-active-all">
5252
<RadiusButton {...args}>Active</RadiusButton>
5353
</div>
54-
<div id="hover-active">
54+
<div id="hover-active" className="pseudo-hover-all pseudo-active-all">
5555
<RadiusButton {...args}>Hover Active</RadiusButton>
5656
</div>
5757
</div>
5858
),
59-
parameters: {
60-
pseudo: {
61-
hover: ['#hover', '#hover-active'],
62-
active: ['#active', '#hover-active'],
63-
},
64-
},
6559
};
6660

6761
type ButtonVariations = {
@@ -78,16 +72,17 @@ const renderButtonVariationCell = (
7872
type: ButtonVariations['types'][number],
7973
state: ButtonVariations['states'][number]
8074
) => {
81-
const className = state.toLowerCase();
8275
if (state !== 'Disabled') {
76+
const lowerState = state.toLowerCase();
77+
const className = `${lowerState} pseudo-${lowerState}-all`;
8378
return (
84-
<td className={className}>
79+
<td key={`${type}-${state}`} className={className}>
8580
<RadiusButton variant={type}>Action</RadiusButton>
8681
</td>
8782
);
8883
} else {
8984
return (
90-
<td>
85+
<td key={`${type}-${state}`}>
9186
<RadiusButton variant={type} disabled>
9287
Action
9388
</RadiusButton>
@@ -110,49 +105,46 @@ const ButtonVariantsTemplateAutomated = (options: ButtonVariations) => {
110105
// renders a table with rows for each type and size and columns for each state
111106
return () => (
112107
<table className={tableStyle}>
113-
<tr>
114-
<th></th>
115-
{states.map((state) => (
116-
<th>
117-
<span
118-
style={{
119-
fontFamily: 'Riforma LL',
120-
fontSize: '20px',
121-
fontWeight: 'bold',
122-
}}
123-
>
124-
{state}
125-
</span>
126-
</th>
127-
))}
128-
</tr>
129-
{types.map((type) => (
108+
<thead>
130109
<tr>
131-
<td>
132-
<span
133-
style={{
134-
fontFamily: 'Riforma LL',
135-
fontSize: '20px',
136-
fontWeight: 'bold',
137-
}}
138-
>
139-
{type}
140-
</span>
141-
</td>
142-
{states.map((state) => renderButtonVariationCell(type, state))}
110+
<th key="index-0"></th>
111+
{states.map((state, index) => (
112+
<th key={`index-${index + 1}`}>
113+
<span
114+
style={{
115+
fontFamily: 'Riforma LL',
116+
fontSize: '20px',
117+
fontWeight: 'bold',
118+
}}
119+
>
120+
{state}
121+
</span>
122+
</th>
123+
))}
143124
</tr>
144-
))}
125+
</thead>
126+
<tbody>
127+
{types.map((type, index) => (
128+
<tr key={type}>
129+
<td key={index}>
130+
<span
131+
style={{
132+
fontFamily: 'Riforma LL',
133+
fontSize: '20px',
134+
fontWeight: 'bold',
135+
}}
136+
>
137+
{type}
138+
</span>
139+
</td>
140+
{states.map((state) => renderButtonVariationCell(type, state))}
141+
</tr>
142+
))}
143+
</tbody>
145144
</table>
146145
);
147146
};
148147

149148
export const ButtonVariants = ButtonVariantsTemplateAutomated(
150149
buttonVariations
151150
).bind({});
152-
153-
ButtonVariants.parameters = {
154-
pseudo: {
155-
hover: ['.hover', '.hover-active'],
156-
active: ['.active', '.hover-active'],
157-
},
158-
};

‎libs/radius-examples/src/components/inline-link/inline-link.stories.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,15 @@ type Story = StoryObj<typeof RadiusInlineLink>;
4848

4949
export const Default: Story = {};
5050

51-
const Cell = ({ children, id }: { children: React.ReactNode; id?: string }) => (
51+
const Cell = ({
52+
children,
53+
className,
54+
}: {
55+
children: React.ReactNode;
56+
className?: string;
57+
}) => (
5258
<div
53-
id={id}
59+
className={className}
5460
style={{
5561
display: 'flex',
5662
flexDirection: 'column',
@@ -91,10 +97,11 @@ export const Variants: Story = {
9197
<Cell>
9298
<RadiusInlineLink {...args} typography={value} />
9399
</Cell>
94-
<Cell id="hover">
100+
101+
<Cell className="pseudo-hover-all">
95102
<RadiusInlineLink {...args} typography={value} />
96103
</Cell>
97-
<Cell id="active">
104+
<Cell className="pseudo-active-all">
98105
<RadiusInlineLink {...args} typography={value} />
99106
</Cell>
100107
<Cell>
@@ -104,10 +111,4 @@ export const Variants: Story = {
104111
))}
105112
</div>
106113
),
107-
parameters: {
108-
pseudo: {
109-
hover: ['#hover'],
110-
active: ['#active'],
111-
},
112-
},
113114
};

‎libs/radius-examples/src/components/link-button/link-button.stories.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,10 @@ export const LinkButtonStates: Story = {
5050
<div>
5151
<RadiusLinkButton {...args}>Normal</RadiusLinkButton>
5252
</div>
53-
<div id="hover">
53+
<div className="pseudo-hover-all">
5454
<RadiusLinkButton {...args}>Hover</RadiusLinkButton>
5555
</div>
56-
<div id="active">
56+
<div className="pseudo-active-all">
5757
<RadiusLinkButton {...args}>Active</RadiusLinkButton>
5858
</div>
5959
<div>
@@ -63,10 +63,4 @@ export const LinkButtonStates: Story = {
6363
</div>
6464
</div>
6565
),
66-
parameters: {
67-
pseudo: {
68-
hover: ['#hover', '#hover-active'],
69-
active: ['#active', '#hover-active'],
70-
},
71-
},
7266
};

‎libs/radius-examples/src/components/link-icon/link-icon.stories.tsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,15 @@ type Story = StoryObj<typeof RadiusLinkIcon>;
4848

4949
export const Default: Story = {};
5050

51-
const Cell = ({ children, id }: { children: React.ReactNode; id?: string }) => (
51+
const Cell = ({
52+
children,
53+
className,
54+
}: {
55+
children: React.ReactNode;
56+
className?: string;
57+
}) => (
5258
<div
53-
id={id}
59+
className={className}
5460
style={{
5561
display: 'flex',
5662
flexDirection: 'column',
@@ -88,31 +94,20 @@ export const Variants: Story = {
8894
{Object.entries(sizes).map(([key, value]) => (
8995
<>
9096
<Cell>{key}</Cell>
91-
9297
<Cell>
93-
{/* @ts-expect-error - core tokens not allowed in `size` prop */}
9498
<RadiusLinkIcon {...args} size={value} />
9599
</Cell>
96-
<Cell id="hover">
97-
{/* @ts-expect-error - core tokens not allowed in `size` prop */}
100+
<Cell className="pseudo-hover-all">
98101
<RadiusLinkIcon {...args} size={value} />
99102
</Cell>
100-
<Cell id="active">
101-
{/* @ts-expect-error - core tokens not allowed in `size` prop */}
103+
<Cell className="pseudo-active-all">
102104
<RadiusLinkIcon {...args} size={value} />
103105
</Cell>
104106
<Cell>
105-
{/* @ts-expect-error - core tokens not allowed in `size` prop */}
106107
<RadiusLinkIcon {...args} size={value} disabled />
107108
</Cell>
108109
</>
109110
))}
110111
</div>
111112
),
112-
parameters: {
113-
pseudo: {
114-
hover: ['#hover'],
115-
active: ['#active'],
116-
},
117-
},
118113
};

‎libs/radius-examples/tsconfig.lib.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
"extends": "./tsconfig.json",
33
"compilerOptions": {
44
"outDir": "../../dist/out-tsc",
5-
"types": ["node"]
5+
"types": [
6+
"node",
7+
8+
"@nx/react/typings/cssmodule.d.ts",
9+
"@nx/react/typings/image.d.ts"
10+
]
611
},
7-
"files": [
8-
"../../node_modules/@nx/react/typings/cssmodule.d.ts",
9-
"../../node_modules/@nx/react/typings/image.d.ts"
10-
],
1112
"exclude": [
1213
"jest.config.ts",
1314
"src/**/*.spec.ts",
@@ -17,8 +18,7 @@
1718
"src/**/*.spec.js",
1819
"src/**/*.test.js",
1920
"src/**/*.spec.jsx",
20-
"src/**/*.test.jsx",
21-
"src/**/*.stories.tsx"
21+
"src/**/*.test.jsx"
2222
],
2323
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
2424
}

‎package-lock.json‎

Lines changed: 0 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)