Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
  • Loading branch information
@Robbert
Robbert committed Dec 18, 2024
1 parent 5dbcb92 commit 100c92e
Showing 1 changed file with 80 additions and 29 deletions.
109 changes: 80 additions & 29 deletions packages/theme-toolkit/src/component-stories-utrecht.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,21 +90,9 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
'utrecht.button.padding-inline-start',
'utrecht.button.padding-inline-end',
'utrecht.button.text-transform',
'utrecht.button.text-transform',
],
},
},
{
storyId: 'react-utrecht-button--icon',
component: 'utrecht-button',
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Default Button: Icon',
state: true,
render: () => <Button className="utrecht-button--icon">Default</Button>,
detectTokens: {
anyOf: ['utrecht.button.icon.size'],
},
},
{
storyId: 'react-utrecht-button--active',
component: 'utrecht-button',
Expand Down Expand Up @@ -158,7 +146,7 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Default Button: Disabled',
state: true,
render: () => <Button className="utrecht-button--disabled">Default</Button>,
render: () => <Button disabled>Default</Button>,
detectTokens: {
anyOf: [
'utrecht.button.disabled.color',
Expand All @@ -173,7 +161,7 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Default Button: Pressed',
state: true,
render: () => <Button className="utrecht-button--pressed">Default</Button>,
render: () => <Button pressed>Default</Button>,
detectTokens: {
anyOf: [
'utrecht.button.pressed.color',
Expand Down Expand Up @@ -255,7 +243,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Primary Action Button: Active',
state: true,
render: () => <Button appearance="primary-action-button-active">Primary action</Button>,
render: () => (
<Button appearance="primary-action-button" className="utrecht-button--active">
Primary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.primary-action.active.color',
Expand All @@ -270,7 +262,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Primary Action Button: Disabled',
state: true,
render: () => <Button appearance="primary-action-button-disabled">Primary action</Button>,
render: () => (
<Button appearance="primary-action-button" disabled>
Primary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.primary-action.disabled.color',
Expand All @@ -285,7 +281,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Primary Action Button: Hover',
state: true,
render: () => <Button appearance="primary-action-button-hover">Primary action</Button>,
render: () => (
<Button appearance="primary-action-button" className="utrecht-button--hover">
Primary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.primary-action.hover.color',
Expand All @@ -301,7 +301,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Primary Action Button: Focus',
state: true,
render: () => <Button appearance="primary-action-button-focus">Primary action</Button>,
render: () => (
<Button appearance="primary-action-button" className="utrecht-button--focus utrecht-button--focus-visible">
Primary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.primary-action.focus.color',
Expand All @@ -316,7 +320,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Primary Action Button: Pressed',
state: true,
render: () => <Button appearance="primary-action-button-pressed">Primary action</Button>,
render: () => (
<Button appearance="primary-action-button" pressed>
Primary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.primary-action.pressed.color',
Expand Down Expand Up @@ -350,7 +358,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Secondary Action Button: Active',
state: true,
render: () => <Button appearance="secondary-action-button-active">Secondary action</Button>,
render: () => (
<Button appearance="secondary-action-button" className="utrecht-button--active">
Secondary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.secondary-action.active.color',
Expand All @@ -365,7 +377,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Secondary Action Button: Disabled',
state: true,
render: () => <Button appearance="secondary-action-button-disabled">Secondary action</Button>,
render: () => (
<Button appearance="secondary-action-button" disabled>
Secondary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.secondary-action.disabled.color',
Expand All @@ -380,7 +396,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Secondary Action Button: Hover',
state: true,
render: () => <Button appearance="secondary-action-button-hover">Secondary action</Button>,
render: () => (
<Button appearance="secondary-action-button" className="utrecht-button--hover">
Secondary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.secondary-action.hover.color',
Expand All @@ -395,7 +415,14 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Secondary Action Button: Focus',
state: true,
render: () => <Button appearance="secondary-action-button-focus">Secondary action</Button>,
render: () => (
<Button
appearance="secondary-action-button-focus"
className="utrecht-button--focus utrecht-button--focus-visible"
>
Secondary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.secondary-action.focus.color',
Expand All @@ -410,7 +437,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Secondary Action Button: Pressed',
state: true,
render: () => <Button appearance="secondary-action-button-pressed">Secondary action</Button>,
render: () => (
<Button appearance="secondary-action-button" pressed>
Secondary action
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.secondary-action.pressed.color',
Expand Down Expand Up @@ -468,7 +499,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Subtle Button: Active',
state: true,
render: () => <Button appearance="subtle-button-active">Subtle button</Button>,
render: () => (
<Button appearance="subtle-button" className="utrecht-button--active">
Subtle button
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.subtle.active.color',
Expand All @@ -483,7 +518,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Subtle Button: Disabled',
state: true,
render: () => <Button appearance="subtle-button-disabled">Subtle button</Button>,
render: () => (
<Button appearance="subtle-button" disabled>
Subtle button
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.subtle.disabled.color',
Expand All @@ -498,7 +537,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Subtle Button: Hover',
state: true,
render: () => <Button appearance="subtle-button-hover">Subtle button</Button>,
render: () => (
<Button appearance="subtle-button" className="utrecht-button--hover">
Subtle button
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.subtle.hover.color',
Expand All @@ -513,7 +556,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Subtle Button: Focus',
state: true,
render: () => <Button appearance="subtle-button-focus">Subtle button</Button>,
render: () => (
<Button appearance="subtle-button" className="utrecht-button--focus utrecht-button--focus-visible">
Subtle button
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.subtle.focus.color',
Expand All @@ -528,7 +575,11 @@ export const UTRECHT_COMPONENT_STORIES: ComponentStory[] = [
group: STORY_GROUPS['BUTTON_DEFAULT'],
name: 'Utrecht Subtle Button: Pressed',
state: true,
render: () => <Button appearance="subtle-button-pressed">Subtle button</Button>,
render: () => (
<Button appearance="subtle-button" pressed>
Subtle button
</Button>
),
detectTokens: {
anyOf: [
'utrecht.button.subtle.pressed.color',
Expand Down

0 comments on commit 100c92e

Please sign in to comment.