diff --git a/.changeset/eleven-moons-hear.md b/.changeset/eleven-moons-hear.md new file mode 100644 index 0000000000..4dfd24104a --- /dev/null +++ b/.changeset/eleven-moons-hear.md @@ -0,0 +1,5 @@ +--- +"@sumup-oss/eslint-plugin-circuit-ui": major +--- + +Added missing rules for the Anchor and BodyLarge migrations. diff --git a/.changeset/thirty-lions-yawn.md b/.changeset/thirty-lions-yawn.md new file mode 100644 index 0000000000..47c7d82c88 --- /dev/null +++ b/.changeset/thirty-lions-yawn.md @@ -0,0 +1,5 @@ +--- +'@sumup-oss/circuit-ui': minor +--- + +Migrated to the new typography APIs internally. diff --git a/.eslintrc.js b/.eslintrc.js index 8633d64339..fec365e33b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -18,6 +18,9 @@ module.exports = require('@sumup-oss/foundry/eslint')({ rules: { '@sumup-oss/circuit-ui/no-invalid-custom-properties': 'error', '@sumup-oss/circuit-ui/no-deprecated-custom-properties': 'error', + '@sumup-oss/circuit-ui/no-deprecated-props': 'error', + '@sumup-oss/circuit-ui/no-deprecated-components': 'error', + '@sumup-oss/circuit-ui/no-renamed-props': 'error', '@sumup-oss/circuit-ui/prefer-custom-properties': 'warn', 'react/no-unknown-property': ['error', { ignore: ['css'] }], }, diff --git a/.storybook/components/Intro.tsx b/.storybook/components/Intro.tsx index 6a0c356928..5bb1b71075 100644 --- a/.storybook/components/Intro.tsx +++ b/.storybook/components/Intro.tsx @@ -13,7 +13,7 @@ * limitations under the License. */ -import { BodyLarge } from '../../packages/circuit-ui/index.js'; +import { Body } from '../../packages/circuit-ui/index.js'; import type { BodyLargeProps } from '../../packages/circuit-ui/index.js'; @@ -26,8 +26,15 @@ export function Intro({ children: BodyLargeProps['children']; }) { return ( - + {children} - + ); } diff --git a/package-lock.json b/package-lock.json index 10f0381eae..1c4ebac3bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,9 +33,9 @@ "@storybook/source-loader": "^8.2.4", "@storybook/test": "^8.2.4", "@storybook/theming": "^8.2.4", - "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", + "@sumup-oss/eslint-plugin-circuit-ui": "^5.0.0-next.1", "@sumup-oss/foundry": "^8.2.0", - "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/stylelint-plugin-circuit-ui": "^3.0.0-next.1", "@types/node": "^22.7.4", "@vitest/coverage-v8": "^2.0.5", "audit-ci": "^7.1.0", diff --git a/package.json b/package.json index 0d6d8b71c5..d87fea3eaf 100644 --- a/package.json +++ b/package.json @@ -58,8 +58,8 @@ "@storybook/test": "^8.2.4", "@storybook/theming": "^8.2.4", "@sumup-oss/foundry": "^8.2.0", - "@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0", + "@sumup-oss/eslint-plugin-circuit-ui": "^5.0.0-next.1", + "@sumup-oss/stylelint-plugin-circuit-ui": "^3.0.0-next.1", "@types/node": "^22.7.4", "@vitest/coverage-v8": "^2.0.5", "audit-ci": "^7.1.0", diff --git a/packages/circuit-ui/components/Body/Body.spec.tsx b/packages/circuit-ui/components/Body/Body.spec.tsx index 6997981609..af5f680456 100644 --- a/packages/circuit-ui/components/Body/Body.spec.tsx +++ b/packages/circuit-ui/components/Body/Body.spec.tsx @@ -43,12 +43,14 @@ describe('Body', () => { }); it('should render the "highlight" variant as a "strong" element', () => { + // eslint-disable-next-line @sumup-oss/circuit-ui/no-deprecated-props, @sumup-oss/circuit-ui/no-renamed-props const { container } = render(Highlight); const actual = container.querySelector('strong'); expect(actual).toBeVisible(); }); it('should render the "quote" variant as a "blockquote" element', () => { + // eslint-disable-next-line @sumup-oss/circuit-ui/no-deprecated-props const { container } = render(Quote); const actual = container.querySelector('blockquote'); expect(actual).toBeVisible(); diff --git a/packages/circuit-ui/components/Body/Body.stories.tsx b/packages/circuit-ui/components/Body/Body.stories.tsx index b993f03868..78f597818b 100644 --- a/packages/circuit-ui/components/Body/Body.stories.tsx +++ b/packages/circuit-ui/components/Body/Body.stories.tsx @@ -93,6 +93,7 @@ const variants = ['highlight', 'quote', 'confirm', 'alert', 'subtle'] as const; export const Variants = (args: BodyProps) => variants.map((variant) => ( + // eslint-disable-next-line @sumup-oss/circuit-ui/no-deprecated-props This is a {variant} body diff --git a/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx b/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx index ec6dc6fb0a..2b5b32342d 100644 --- a/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx +++ b/packages/circuit-ui/components/BodyLarge/BodyLarge.tsx @@ -20,7 +20,7 @@ import { Body, type BodyProps } from '../Body/Body.js'; export type BodyLargeProps = Omit; /** - * @deprecated Use the Body component in size `l` instead. + * @deprecated Use the Body component with `size="l"` instead. */ export const BodyLarge = forwardRef( (props, ref) => { diff --git a/packages/circuit-ui/components/Calendar/Calendar.tsx b/packages/circuit-ui/components/Calendar/Calendar.tsx index 18c3a6facd..e9d56c4489 100644 --- a/packages/circuit-ui/components/Calendar/Calendar.tsx +++ b/packages/circuit-ui/components/Calendar/Calendar.tsx @@ -396,7 +396,7 @@ function Month({ > ( - + Card heading ); diff --git a/packages/circuit-ui/components/Carousel/components/Status/Status.tsx b/packages/circuit-ui/components/Carousel/components/Status/Status.tsx index 8642491973..d24a288ac8 100644 --- a/packages/circuit-ui/components/Carousel/components/Status/Status.tsx +++ b/packages/circuit-ui/components/Carousel/components/Status/Status.tsx @@ -36,11 +36,7 @@ export function Status({ ...props }: StatusProps) { return ( - + {step + 1} / {total} ); diff --git a/packages/circuit-ui/components/ListItem/ListItem.spec.tsx b/packages/circuit-ui/components/ListItem/ListItem.spec.tsx index 3d664ba9b3..1f61514426 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.spec.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.spec.tsx @@ -61,7 +61,7 @@ describe('ListItem', () => { it('should render a ListItem with a custom label', () => { renderListItem(render, { ...baseProps, - label: Label, + label: Label, }); expect(screen.getByText('Label')).toBeVisible(); }); @@ -77,7 +77,7 @@ describe('ListItem', () => { it('should render a ListItem with a custom details line', () => { renderListItem(render, { ...baseProps, - details: Details, + details: Details, }); expect(screen.getByText('Details')).toBeVisible(); }); @@ -94,7 +94,7 @@ describe('ListItem', () => { renderListItem(render, { ...baseProps, trailingLabel: ( - + Trailing label ), @@ -117,7 +117,7 @@ describe('ListItem', () => { ...baseProps, trailingLabel: 'Trailing label', trailingDetails: ( - + Trailing details ), diff --git a/packages/circuit-ui/components/ListItem/ListItem.stories.tsx b/packages/circuit-ui/components/ListItem/ListItem.stories.tsx index 4c31994afc..a600c5e95b 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.stories.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.stories.tsx @@ -66,13 +66,13 @@ const Details = ( aria-hidden="true" /> {item.status} - + · {item.timestamp} @@ -83,13 +83,13 @@ const lineThrough = { }; const TrailingLabel = ( - + {item.amount} ); const TrailingDetails = ( - + {item.fee} fee ); @@ -147,7 +147,7 @@ export const WithCustomLabel = (args: ListItemProps) => ( Custom multiline label: {args.label}} + label={Custom multiline label: {args.label}} /> ); diff --git a/packages/circuit-ui/components/ListItem/ListItem.tsx b/packages/circuit-ui/components/ListItem/ListItem.tsx index 893ce5dc25..d41b869f51 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.tsx @@ -172,7 +172,7 @@ export const ListItem = forwardRef<
{isString(label) ? ( - + {label} ) : ( @@ -181,7 +181,7 @@ export const ListItem = forwardRef< {details && (
{isString(details) ? ( - + {details} ) : ( @@ -199,7 +199,7 @@ export const ListItem = forwardRef< >
{isString(trailingLabel) ? ( - + {trailingLabel} ) : ( @@ -211,7 +211,7 @@ export const ListItem = forwardRef< {trailingDetails && (
{isString(trailingDetails) ? ( - + {trailingDetails} ) : ( diff --git a/packages/circuit-ui/components/ListItemGroup/ListItemGroup.spec.tsx b/packages/circuit-ui/components/ListItemGroup/ListItemGroup.spec.tsx index cdbdab9587..3d6331f302 100644 --- a/packages/circuit-ui/components/ListItemGroup/ListItemGroup.spec.tsx +++ b/packages/circuit-ui/components/ListItemGroup/ListItemGroup.spec.tsx @@ -47,7 +47,7 @@ describe('ListItemGroup', () => { renderListItemGroup(render, { ...baseProps, label: ( - + Group label ), @@ -66,7 +66,7 @@ describe('ListItemGroup', () => { it('should render a ListItemGroup with a custom details line', () => { renderListItemGroup(render, { ...baseProps, - details: Group details, + details: Group details, }); expect(screen.getByText('Group details')).toBeVisible(); }); diff --git a/packages/circuit-ui/components/ListItemGroup/ListItemGroup.stories.tsx b/packages/circuit-ui/components/ListItemGroup/ListItemGroup.stories.tsx index 9db829a8f3..d9fafa10c7 100644 --- a/packages/circuit-ui/components/ListItemGroup/ListItemGroup.stories.tsx +++ b/packages/circuit-ui/components/ListItemGroup/ListItemGroup.stories.tsx @@ -84,13 +84,13 @@ const Details = ({ item }: { item: Item }) => ( /> )} {item.status} - + · {item.timestamp}
@@ -98,8 +98,9 @@ const Details = ({ item }: { item: Item }) => ( const TrailingLabel = ({ item }: { item: Item }) => ( ( )} > {isString(label) ? ( - + {label} ) : ( @@ -119,7 +119,7 @@ export const ListItemGroup = forwardRef(
{details && (
- {isString(details) ? {details} : details} + {isString(details) ? {details} : details}
)}
diff --git a/packages/circuit-ui/components/Modal/Modal.stories.tsx b/packages/circuit-ui/components/Modal/Modal.stories.tsx index 0ec1d35099..f82d9a6892 100644 --- a/packages/circuit-ui/components/Modal/Modal.stories.tsx +++ b/packages/circuit-ui/components/Modal/Modal.stories.tsx @@ -53,7 +53,7 @@ export default { const defaultModalChildren = () => ( - + Hello World! I am a modal. @@ -146,7 +146,7 @@ export const PreventClose = (modal: ModalProps) => { PreventClose.args = { children: ({ onClose }: { onClose: ModalProps['onClose'] }) => ( - + Complete the action @@ -207,7 +207,7 @@ CustomStyles.args = { borderTopRightRadius: 'var(--cui-border-radius-mega)', }} /> - + Custom styles diff --git a/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.tsx b/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.tsx index 9401109ac2..36387603b2 100644 --- a/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.tsx +++ b/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.tsx @@ -89,7 +89,7 @@ export const NotificationFullscreen = forwardRef< return (
- + {headlineLabel} {body && {body}} diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx index 15d8ad6cae..d1029c3fa3 100644 --- a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx +++ b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx @@ -163,10 +163,7 @@ export const NotificationInline = forwardRef< {iconLabel}
{headline && ( - + {isString(headline) ? headline : headline.label} )} @@ -175,7 +172,7 @@ export const NotificationInline = forwardRef< )}
diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx index 9dfc2ced05..3f91ce1cdf 100644 --- a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx +++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx @@ -151,7 +151,7 @@ export const NotificationModal: ModalComponent = ({ )} - + {headline} {body && {body}} diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx index 70eff92576..17613d0688 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx @@ -123,7 +123,7 @@ export function NotificationToast({ {iconLabel}
{headline && ( - + {headline} )} diff --git a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx index 9efa23c2ee..040b1e8167 100644 --- a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx @@ -83,7 +83,7 @@ export function DesktopNavigation({ aria-label={secondaryNavigationLabel} > - + {activePrimaryLink?.label} diff --git a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx index 442446e891..3b98f9b32b 100644 --- a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx @@ -58,11 +58,7 @@ function SecondaryLink({ aria-current={isActive ? 'page' : undefined} > - + {label} diff --git a/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx b/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx index b12f8b2752..bb23beabd2 100644 --- a/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx +++ b/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx @@ -56,7 +56,7 @@ export const Header = ({ {backButtonLabel} )} - + {headline} {closeButtonLabel && ( diff --git a/packages/circuit-ui/components/Step/examples/MultiStepForm.tsx b/packages/circuit-ui/components/Step/examples/MultiStepForm.tsx index 5e5d069205..02fd3149a9 100644 --- a/packages/circuit-ui/components/Step/examples/MultiStepForm.tsx +++ b/packages/circuit-ui/components/Step/examples/MultiStepForm.tsx @@ -93,7 +93,7 @@ export function MultiStepForm() { return (
- + Step {stepNumber} of {totalSteps} { } /** - * @deprecated Use the Headline component in size `s` instead. + * @deprecated Use the Headline component with `size="s"` instead. */ export const SubHeadline = forwardRef( (props, ref) => { diff --git a/packages/circuit-ui/components/Toggletip/Toggletip.tsx b/packages/circuit-ui/components/Toggletip/Toggletip.tsx index bf3925943c..bb2ba05b0c 100644 --- a/packages/circuit-ui/components/Toggletip/Toggletip.tsx +++ b/packages/circuit-ui/components/Toggletip/Toggletip.tsx @@ -262,14 +262,14 @@ export const Toggletip = forwardRef( {headline && ( {headline} )} - + {body} {action && ( diff --git a/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx b/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx index 96a372c3df..c8a51356a9 100644 --- a/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx +++ b/packages/circuit-ui/components/TopNavigation/TopNavigation.stories.tsx @@ -46,7 +46,7 @@ export default { function CustomComponent() { return ( - + {user.name} {user.id && ( - + {user.id} diff --git a/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.ts b/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.ts index d49163e463..d305e0ee63 100644 --- a/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.ts +++ b/packages/eslint-plugin-circuit-ui/no-deprecated-components/index.ts @@ -33,12 +33,16 @@ const components = [ }, { name: 'SubHeadline', - alternative: 'Use the Headline component in size `s` instead.', + alternative: 'Use the Headline component with `size="s"` instead.', }, { name: 'Title', alternative: 'Use the new Display component instead.', }, + { + name: 'BodyLarge', + alternative: 'Use the Body component with `size="l"` instead.', + }, ]; export const noDeprecatedComponents = createRule({ diff --git a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts index 01960f82c4..b427c2d9fe 100644 --- a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts +++ b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts @@ -36,14 +36,12 @@ const createRule = ESLintUtils.RuleCreator( type PropNameConfig = { type: 'name'; - component: string; hook?: string; props: Record; }; type PropValuesConfig = { type: 'values'; - component: string; hook?: string; prop: string; values: Record; @@ -51,10 +49,10 @@ type PropValuesConfig = { type CustomConfig = { type: 'custom'; - component: string; hook?: string; transform: ( node: TSESTree.JSXElement, + component: string, context: TSESLint.RuleContext< 'propName' | 'propValue' | 'bodyVariant', never[] @@ -64,17 +62,17 @@ type CustomConfig = { type Config = PropNameConfig | PropValuesConfig | CustomConfig; -const configs: Config[] = [ +const configs: (Config & { components: string[] })[] = [ { type: 'name', - component: 'Toggle', + components: ['Toggle'], props: { explanation: 'description', }, }, { type: 'values', - component: 'Badge', + components: ['Badge', 'NotificationInline', 'NotificationToast'], prop: 'variant', values: { confirm: 'success', @@ -84,46 +82,7 @@ const configs: Config[] = [ }, { type: 'values', - component: 'NotificationInline', - prop: 'variant', - values: { - confirm: 'success', - notify: 'warning', - alert: 'danger', - }, - }, - { - type: 'values', - component: 'NotificationToast', - hook: 'setToast', - prop: 'variant', - values: { - confirm: 'success', - notify: 'warning', - alert: 'danger', - }, - }, - { - type: 'values', - component: 'Button', - prop: 'size', - values: { - kilo: 's', - giga: 'm', - }, - }, - { - type: 'values', - component: 'CloseButton', - prop: 'size', - values: { - kilo: 's', - giga: 'm', - }, - }, - { - type: 'values', - component: 'IconButton', + components: ['Button', 'CloseButton', 'IconButton'], prop: 'size', values: { kilo: 's', @@ -132,7 +91,7 @@ const configs: Config[] = [ }, { type: 'values', - component: 'Hamburger', + components: ['Hamburger'], prop: 'size', values: { kilo: 's', @@ -141,7 +100,7 @@ const configs: Config[] = [ }, { type: 'values', - component: 'Avatar', + components: ['Avatar'], prop: 'size', values: { giga: 's', @@ -150,7 +109,7 @@ const configs: Config[] = [ }, { type: 'values', - component: 'ProgressBar', + components: ['ProgressBar'], prop: 'size', values: { byte: 's', @@ -160,7 +119,7 @@ const configs: Config[] = [ }, { type: 'values', - component: 'Selector', + components: ['Selector'], prop: 'size', values: { kilo: 's', @@ -169,7 +128,7 @@ const configs: Config[] = [ }, { type: 'values', - component: 'Spinner', + components: ['Spinner'], prop: 'size', values: { byte: 's', @@ -179,10 +138,9 @@ const configs: Config[] = [ }, { type: 'custom', - component: 'IconButton', + components: ['IconButton'], // children → icon - transform: (node, context) => { - const component = 'IconButton'; + transform: (node, component, context) => { const current = 'children'; const replacement = 'icon'; @@ -242,10 +200,9 @@ const configs: Config[] = [ }, { type: 'custom', - component: 'IconButton', + components: ['IconButton'], // label → children - transform: (node, context) => { - const component = 'IconButton'; + transform: (node, component, context) => { const current = 'label'; const replacement = 'children'; @@ -297,29 +254,7 @@ const configs: Config[] = [ }, { type: 'values', - component: 'Title', - prop: 'size', - values: { - one: 'l', - two: 'm', - three: 'm', - four: 's', - }, - }, - { - type: 'values', - component: 'Display', - prop: 'size', - values: { - one: 'l', - two: 'm', - three: 'm', - four: 's', - }, - }, - { - type: 'values', - component: 'Headline', + components: ['Title', 'Display', 'Headline'], prop: 'size', values: { one: 'l', @@ -330,16 +265,7 @@ const configs: Config[] = [ }, { type: 'values', - component: 'Body', - prop: 'size', - values: { - one: 'm', - two: 's', - }, - }, - { - type: 'values', - component: 'List', + components: ['Anchor', 'Body', 'List'], prop: 'size', values: { one: 'm', @@ -348,11 +274,9 @@ const configs: Config[] = [ }, { type: 'custom', - component: 'Body', + components: ['Anchor', 'Body'], // variant → weight or color - transform: (node, context) => { - const component = 'IconButton'; - + transform: (node, component, context) => { node.openingElement.attributes.forEach((attribute) => { if ( attribute.type !== 'JSXAttribute' || @@ -427,9 +351,10 @@ export const noRenamedProps = createRule({ create(context) { function replaceComponentPropName( node: TSESTree.JSXElement, + component: string, config: PropNameConfig, ) { - const { component, props } = config; + const { props } = config; node.openingElement.attributes.forEach((attribute) => { if ( @@ -462,9 +387,10 @@ export const noRenamedProps = createRule({ function replaceComponentPropValues( node: TSESTree.JSXElement, + component: string, config: PropValuesConfig, ) { - const { component, prop, values } = config; + const { prop, values } = config; node.openingElement.attributes.forEach((attribute) => { if (attribute.type !== 'JSXAttribute' || attribute.name.name !== prop) { @@ -546,8 +472,11 @@ export const noRenamedProps = createRule({ const components = configs.reduce( (acc, config) => { - acc[config.component] = acc[config.component] || []; - acc[config.component].push(config); + const { components, ...rest } = config; + config.components.forEach((component) => { + acc[component] = acc[component] || []; + acc[component].push(rest); + }); return acc; }, {} as Record, @@ -562,13 +491,13 @@ export const noRenamedProps = createRule({ configs.forEach((config) => { switch (config.type) { case 'name': - replaceComponentPropName(node, config); + replaceComponentPropName(node, component, config); break; case 'values': - replaceComponentPropValues(node, config); + replaceComponentPropValues(node, component, config); break; case 'custom': - config.transform(node, context); + config.transform(node, component, context); break; } }); diff --git a/templates/astro/src/pages/index.astro b/templates/astro/src/pages/index.astro index 4326b46f3d..fd41e79bfa 100644 --- a/templates/astro/src/pages/index.astro +++ b/templates/astro/src/pages/index.astro @@ -1,5 +1,5 @@ --- -import { Display, BodyLarge } from '@sumup-oss/circuit-ui'; +import { Display, Body } from '@sumup-oss/circuit-ui'; import Root from '../layouts/Root.astro'; import DocCard from '../components/DocCard.astro'; @@ -11,9 +11,9 @@ const title = 'Welcome to Circuit UI + Astro'; {title} - + Get started by editing src/pages/index.astro - +
- + Get started by editing app/page.tsx - +
- + Get started by editing app/routes/_index/route.tsx - +