diff --git a/.yarn/cache/@telefonica-eslint-config-npm-2.1.1-4cc790ac85-8f5d1e7189.zip b/.yarn/cache/@telefonica-eslint-config-npm-2.2.0-d45d42ae4d-7e82d56454.zip similarity index 53% rename from .yarn/cache/@telefonica-eslint-config-npm-2.1.1-4cc790ac85-8f5d1e7189.zip rename to .yarn/cache/@telefonica-eslint-config-npm-2.2.0-d45d42ae4d-7e82d56454.zip index 747aa54677..5b7358ae95 100644 Binary files a/.yarn/cache/@telefonica-eslint-config-npm-2.1.1-4cc790ac85-8f5d1e7189.zip and b/.yarn/cache/@telefonica-eslint-config-npm-2.2.0-d45d42ae4d-7e82d56454.zip differ diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f52b78773..ff5a374381 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,28 @@ +# [15.20.0](https://github.com/Telefonica/mistica-web/compare/v15.19.0...v15.20.0) (2024-09-06) + + +### Features + +* **NavigationBreadcrumbs:** allow executing onNavigate when pressing a link ([#1233](https://github.com/Telefonica/mistica-web/issues/1233)) ([ec7ed8b](https://github.com/Telefonica/mistica-web/commit/ec7ed8b93d0b6892827263d35373896a8cf291b6)) + +# [15.19.0](https://github.com/Telefonica/mistica-web/compare/v15.18.0...v15.19.0) (2024-09-03) + + +### Bug Fixes + +* **Buttons:** avoid warnings related to change in order of react hooks ([#1229](https://github.com/Telefonica/mistica-web/issues/1229)) ([2dbc411](https://github.com/Telefonica/mistica-web/commit/2dbc411616f7276d832bb5007f41a37c9c93f69e)) +* **i18n:** revert text sizes improvement because it is breaking ([#1226](https://github.com/Telefonica/mistica-web/issues/1226)) ([79eb4a4](https://github.com/Telefonica/mistica-web/commit/79eb4a427ef9f8d5a91bf56c8434ca1417a77df3)) +* **Logo:** fix webpackChunkName magic comments ([#1214](https://github.com/Telefonica/mistica-web/issues/1214)) ([3d1f098](https://github.com/Telefonica/mistica-web/commit/3d1f098c6cbaf179b29de666ba824f1ae63dea9e)) +* **Vivinho char:** vivinho char in headings being read as a separated heading ([#1209](https://github.com/Telefonica/mistica-web/issues/1209)) ([f0f5fb0](https://github.com/Telefonica/mistica-web/commit/f0f5fb05b99fc594479a19c3037cc9dfc7446bab)) + + +### Features + +* **Buttons:** refactor code and fix spacing bug in loading buttonLink ([#1212](https://github.com/Telefonica/mistica-web/issues/1212)) ([640e429](https://github.com/Telefonica/mistica-web/commit/640e429c8ab4493c5da1f39bad5fccf90eacc373)) +* **i18n:** improve texts sizes ([#1204](https://github.com/Telefonica/mistica-web/issues/1204)) ([0345e7c](https://github.com/Telefonica/mistica-web/commit/0345e7cefd06b911377278b5928409cbed23f921)) +* **Logo:** Refactor logo to improve bundle size and loading times ([#1210](https://github.com/Telefonica/mistica-web/issues/1210)) ([15b77cb](https://github.com/Telefonica/mistica-web/commit/15b77cb8ab932f68fb124d66887b8d49169b0095)) +* **NavigationBar, FunnelNavigationBar, MainNavigationBar:** add alternative variant ([#1200](https://github.com/Telefonica/mistica-web/issues/1200)) ([eef87ec](https://github.com/Telefonica/mistica-web/commit/eef87ecdd32053f80f349aaf1598d8e61251b6eb)) + # [15.18.0](https://github.com/Telefonica/mistica-web/compare/v15.17.0...v15.18.0) (2024-08-20) diff --git a/package.json b/package.json index 0b46d28285..7d3ec4ca23 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@telefonica/mistica", - "version": "15.18.0", + "version": "15.20.0", "license": "MIT", "repository": { "type": "git", @@ -80,7 +80,7 @@ "@swc/core": "^1.3.95", "@swc/jest": "^0.2.29", "@telefonica/acceptance-testing": "5.0.0", - "@telefonica/eslint-config": "^2.1.1", + "@telefonica/eslint-config": "^2.2.0", "@telefonica/prettier-config": "^2.0.0", "@testing-library/dom": "^10.2.0", "@testing-library/jest-dom": "^6.4.6", diff --git a/playroom/components/index.tsx b/playroom/components/index.tsx index 9caf9ecf34..0fc6704ad8 100644 --- a/playroom/components/index.tsx +++ b/playroom/components/index.tsx @@ -123,11 +123,11 @@ const PreviewToolsControls = React.forwardRef, + Icon: IconAppleOn as (props: IconProps) => JSX.Element, 'aria-label': 'Change platform to android', }} uncheckedProps={{ - Icon: IconAppleOff as React.FC, + Icon: IconAppleOff as (props: IconProps) => JSX.Element, 'aria-label': 'Change platform to iOS', }} checked={os === 'ios'} @@ -136,11 +136,11 @@ const PreviewToolsControls = React.forwardRef, + Icon: IconSun as (props: IconProps) => JSX.Element, 'aria-label': 'Switch to light mode', }} uncheckedProps={{ - Icon: IconMoon as React.FC, + Icon: IconMoon as (props: IconProps) => JSX.Element, 'aria-label': 'Switch to dark mode', }} checked={colorScheme === alternativeColorScheme} @@ -155,7 +155,7 @@ const PreviewToolsControls = React.forwardRef} + Icon={IconCode as (props: IconProps) => JSX.Element} onPress={onEditStoryPress} /> @@ -178,11 +178,11 @@ const PreviewToolsControls = React.forwardRef, + Icon: IconAppleOn as (props: IconProps) => JSX.Element, 'aria-label': 'Change platform to android', }} uncheckedProps={{ - Icon: IconAppleOff as React.FC, + Icon: IconAppleOff as (props: IconProps) => JSX.Element, 'aria-label': 'Change platform to iOS', }} checked={os === 'ios'} @@ -191,11 +191,11 @@ const PreviewToolsControls = React.forwardRef, + Icon: IconSun as (props: IconProps) => JSX.Element, 'aria-label': 'Change color scheme', }} uncheckedProps={{ - Icon: IconMoon as React.FC, + Icon: IconMoon as (props: IconProps) => JSX.Element, 'aria-label': 'Change color scheme', }} checked={colorScheme === alternativeColorScheme} @@ -210,7 +210,7 @@ const PreviewToolsControls = React.forwardRef} + Icon={IconCode as (props: IconProps) => JSX.Element} onPress={onEditStoryPress} /> diff --git a/playroom/components/loader.tsx b/playroom/components/loader.tsx index 089954c6f8..91c85224c3 100644 --- a/playroom/components/loader.tsx +++ b/playroom/components/loader.tsx @@ -3,13 +3,18 @@ import * as React from 'react'; type Props = { load: string | (() => Promise); render: (data: any) => React.ReactElement; - renderLoading?: () => React.ReactElement; - renderError?: () => React.ReactElement; + renderLoading?: () => React.ReactElement | null; + renderError?: () => React.ReactElement | null; }; type LoaderState = 'loading' | 'error' | 'success'; -const Loader: React.FC = ({load, render, renderLoading = () => null, renderError = () => null}) => { +const Loader = ({ + load, + render, + renderLoading = () => null, + renderError = () => null, +}: Props): JSX.Element | null => { const [loaderData, setLoaderData] = React.useState(null); const [loaderStatus, setLoaderStatus] = React.useState('loading'); diff --git a/playroom/icons/icon-apple-off.tsx b/playroom/icons/icon-apple-off.tsx index d846b9bcd4..ca93c008c7 100644 --- a/playroom/icons/icon-apple-off.tsx +++ b/playroom/icons/icon-apple-off.tsx @@ -6,7 +6,7 @@ type Props = { color?: string; }; -const IconSun: React.FC = ({size = 24, color}) => { +const IconSun = ({size = 24, color}: Props): JSX.Element => { return ( diff --git a/playroom/icons/icon-apple-on.tsx b/playroom/icons/icon-apple-on.tsx index 75276b9d1e..604d7bd250 100644 --- a/playroom/icons/icon-apple-on.tsx +++ b/playroom/icons/icon-apple-on.tsx @@ -6,7 +6,7 @@ type Props = { color?: string; }; -const IconSun: React.FC = ({size = 24, color}) => { +const IconSun = ({size = 24, color}: Props): JSX.Element => { return ( diff --git a/playroom/icons/icon-code.tsx b/playroom/icons/icon-code.tsx index c1112d6914..cb7b736d02 100644 --- a/playroom/icons/icon-code.tsx +++ b/playroom/icons/icon-code.tsx @@ -6,7 +6,7 @@ type Props = { color?: string; }; -const IconCode: React.FC = ({size = 24, color}) => { +const IconCode = ({size = 24, color}: Props): JSX.Element => { return ( = ({size = 24, color}) => { +const IconMoon = ({size = 24, color}: Props): JSX.Element => { return ( = ({size = 24, color}) => { +const IconSun = ({size = 24, color}: Props): JSX.Element => { return ( ( title, to: `/${title}`, }))} + logo={LOGO} right={ {}} aria-label="shopping cart with 2 items"> diff --git a/src/__acceptance_tests__/__ssr_pages__/main-navigation-bar.tsx b/src/__acceptance_tests__/__ssr_pages__/main-navigation-bar.tsx index 41cc4ddd8b..0bbb17cb0c 100644 --- a/src/__acceptance_tests__/__ssr_pages__/main-navigation-bar.tsx +++ b/src/__acceptance_tests__/__ssr_pages__/main-navigation-bar.tsx @@ -14,6 +14,7 @@ const NavigationBarTest = (): JSX.Element => ( title, to: `/${title}`, }))} + logo={LOGO} right={ {}} aria-label="shopping cart with 2 items"> diff --git a/src/__private_stories__/carousel-on-different-container-sizes-story.tsx b/src/__private_stories__/carousel-on-different-container-sizes-story.tsx index b06ffa959e..1f2ad0135a 100644 --- a/src/__private_stories__/carousel-on-different-container-sizes-story.tsx +++ b/src/__private_stories__/carousel-on-different-container-sizes-story.tsx @@ -25,23 +25,23 @@ type Args = { itemsPerPageDesktopSmall: number; itemsPerPageDesktopMedium: number; itemsPerPageDesktopLarge: number; - withBullets: boolean; + bullets: boolean; }; const ExampleCarousel = ({ numItems, - withBullets, + bullets, cardsTitlePrefix, itemsPerPage, }: { numItems: number; - withBullets: boolean; + bullets: boolean; cardsTitlePrefix: number; itemsPerPage: {mobile: number; tablet: number; desktop: {small: number; medium: number; large: number}}; }) => ( ( = ({ itemsPerPageDesktopSmall, itemsPerPageDesktopMedium, itemsPerPageDesktopLarge, - withBullets, + bullets, }) => { const itemsPerPage = { mobile: itemsPerPageMobile, @@ -87,7 +87,7 @@ export const Default: StoryComponent = ({ left={ @@ -100,7 +100,7 @@ export const Default: StoryComponent = ({ right={ @@ -108,7 +108,7 @@ export const Default: StoryComponent = ({ > @@ -127,5 +127,5 @@ Default.args = { itemsPerPageDesktopSmall: 1, itemsPerPageDesktopMedium: 2, itemsPerPageDesktopLarge: 3, - withBullets: true, + bullets: true, }; diff --git a/src/__private_stories__/private-responsive-layout-scenarios-story.tsx b/src/__private_stories__/private-responsive-layout-scenarios-story.tsx index 542ffac290..6d517f6604 100644 --- a/src/__private_stories__/private-responsive-layout-scenarios-story.tsx +++ b/src/__private_stories__/private-responsive-layout-scenarios-story.tsx @@ -21,7 +21,7 @@ export default { parameters: {fullScreen: true}, }; -const WithTitle: React.FC<{title: string; children: React.ReactNode}> = ({title, children}) => ( +const WithTitle = ({title, children}: {title: string; children: React.ReactNode}) => ( {title} diff --git a/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx b/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx index 8b4b2564ad..e900dbf5f6 100644 --- a/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx +++ b/src/__private_stories__/success-feedback-screen-with-navbar-story.tsx @@ -23,11 +23,11 @@ export default { }; type Args = { - showLargeContent: boolean; - showInput: boolean; + largeContent: boolean; + input: boolean; }; -export const Default: StoryComponent = ({showLargeContent, showInput}) => { +export const Default: StoryComponent = ({largeContent, input}) => { const {isDesktopOrBigger} = useScreenSize(); const [index, setIndex] = React.useState(0); const {dimensions} = useTheme(); @@ -71,8 +71,8 @@ export const Default: StoryComponent = ({showLargeContent, showInput}) => primaryButton={ {}}>Action} extra={ <> - {showInput ? : undefined} - {showLargeContent ? : undefined} + {input ? : undefined} + {largeContent ? : undefined} } /> @@ -83,8 +83,8 @@ export const Default: StoryComponent = ({showLargeContent, showInput}) => }; Default.args = { - showLargeContent: false, - showInput: false, + largeContent: false, + input: false, }; Default.storyName = 'SuccessFeedbackScreen with Navigation Bar'; diff --git a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-android-1-snap.png index c54cdc969b..dbb8d4ee16 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-android-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-android-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-ios-1-snap.png index 6852de7de7..bf31954714 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-danger-spinner-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-android-1-snap.png index 923bcff398..33d4ff099c 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-android-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-android-1-snap.png differ diff --git a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-ios-1-snap.png index 4b41d242eb..3bab0e6593 100644 Binary files a/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/button-screenshot-test-tsx-buttons-link-button-spinner-mobile-ios-1-snap.png differ diff --git a/src/__screenshot_tests__/boxed-screenshot-test.tsx b/src/__screenshot_tests__/boxed-screenshot-test.tsx index 9055609376..d87c76336a 100644 --- a/src/__screenshot_tests__/boxed-screenshot-test.tsx +++ b/src/__screenshot_tests__/boxed-screenshot-test.tsx @@ -1,24 +1,21 @@ import {openStoryPage, screen} from '../test-utils'; test.each` - inverseOutside | inverseInside - ${false} | ${false} - ${false} | ${true} - ${true} | ${false} - ${true} | ${true} -`( - 'Boxed inverseOutside($inverseOutside) inverseInside($inverseInside)', - async ({inverseOutside, inverseInside}) => { - await openStoryPage({ - id: 'components-primitives-boxed--default', - device: 'MOBILE_IOS', - args: { - inverseInside, - inverseOutside, - }, - }); + overInverse | inverse + ${false} | ${false} + ${false} | ${true} + ${true} | ${false} + ${true} | ${true} +`('Boxed inverseOutside($overInverse) inverseInside($inverse)', async ({overInverse, inverse}) => { + await openStoryPage({ + id: 'components-primitives-boxed--default', + device: 'MOBILE_IOS', + args: { + overInverse, + inverse, + }, + }); - const image = await (await screen.findByTestId('boxed')).screenshot(); - expect(image).toMatchImageSnapshot(); - } -); + const image = await (await screen.findByTestId('boxed')).screenshot(); + expect(image).toMatchImageSnapshot(); +}); diff --git a/src/__screenshot_tests__/button-group-screenshot-test.tsx b/src/__screenshot_tests__/button-group-screenshot-test.tsx index 3f4722397d..4e03124b56 100644 --- a/src/__screenshot_tests__/button-group-screenshot-test.tsx +++ b/src/__screenshot_tests__/button-group-screenshot-test.tsx @@ -18,7 +18,7 @@ test.each(DEVICES)('ButtonGroup - Long text (%s)', async (device) => { const page = await openStoryPage({ id: 'components-buttons-buttongroup--default', device, - args: {buttonPrimaryText: 'A very long action text in this button', showButtonLink: false}, + args: {buttonPrimaryText: 'A very long action text in this button', buttonLink: false}, }); const image = await page.screenshot({fullPage: true}); diff --git a/src/__screenshot_tests__/button-screenshot-test.tsx b/src/__screenshot_tests__/button-screenshot-test.tsx index abb6c7560e..d423b5c251 100644 --- a/src/__screenshot_tests__/button-screenshot-test.tsx +++ b/src/__screenshot_tests__/button-screenshot-test.tsx @@ -98,31 +98,28 @@ const BUTTON_LINK_CHEVRON_OPTIONS = ['default', 'true', 'false']; const getLinkWithChevronCases = () => { const cases = []; for (const action of BUTTON_LINK_ACTIONS) { - for (const withChevron of BUTTON_LINK_CHEVRON_OPTIONS) { - cases.push([action, withChevron]); + for (const chevron of BUTTON_LINK_CHEVRON_OPTIONS) { + cases.push([action, chevron]); } } return cases; }; -test.each(getLinkWithChevronCases())( - 'Buttons - Link button - %s (chevron = %s)', - async (action, withChevron) => { - await openStoryPage({ - id: 'components-buttons--link-button', - device: 'MOBILE_IOS', - args: { - action, - withChevron, - }, - }); - - const story = await screen.findByTestId('content'); - - const image = await story.screenshot(); - expect(image).toMatchImageSnapshot(); - } -); +test.each(getLinkWithChevronCases())('Buttons - Link button - %s (chevron = %s)', async (action, chevron) => { + await openStoryPage({ + id: 'components-buttons--link-button', + device: 'MOBILE_IOS', + args: { + action, + chevron, + }, + }); + + const story = await screen.findByTestId('content'); + + const image = await story.screenshot(); + expect(image).toMatchImageSnapshot(); +}); test('Buttons - Link button - with chevron in Vivo', async () => { await openStoryPage({ @@ -130,7 +127,7 @@ test('Buttons - Link button - with chevron in Vivo', async () => { device: 'MOBILE_IOS', skin: 'Vivo-new', args: { - withChevron: true, + chevron: true, }, }); @@ -145,7 +142,7 @@ test('Buttons - Link button with chevron and big font size', async () => { id: 'components-buttons--link-button', device: 'MOBILE_IOS', args: { - withChevron: true, + chevron: true, }, }); @@ -163,7 +160,7 @@ test('Buttons - Link button with chevron and big font size in Vivo', async () => device: 'MOBILE_IOS', skin: 'Vivo-new', args: { - withChevron: true, + chevron: true, }, }); diff --git a/src/__screenshot_tests__/callout-screenshot-test.tsx b/src/__screenshot_tests__/callout-screenshot-test.tsx index 24fed78eff..7c6c2bc7c4 100644 --- a/src/__screenshot_tests__/callout-screenshot-test.tsx +++ b/src/__screenshot_tests__/callout-screenshot-test.tsx @@ -1,18 +1,18 @@ import {openStoryPage, screen} from '../test-utils'; test.each` - actions | title | inverse | isClosable | withIcon | case - ${'button and link'} | ${'Some title'} | ${false} | ${true} | ${true} | ${''} - ${'button and link'} | ${'Some title'} | ${true} | ${true} | ${true} | ${'over inverse'} - ${'button and link'} | ${'Some title'} | ${false} | ${false} | ${true} | ${'not closable'} - ${'link'} | ${'Some title'} | ${false} | ${true} | ${true} | ${'with button link'} - ${'none'} | ${'Some title'} | ${false} | ${true} | ${true} | ${'without actions'} - ${'none'} | ${''} | ${false} | ${false} | ${false} | ${'only description'} - ${'none'} | ${''} | ${false} | ${true} | ${false} | ${'only description and closable'} -`('Callout $case', async ({actions, title, inverse, isClosable, withIcon}) => { + actions | title | inverse | closable | asset | case + ${'button and link'} | ${'Some title'} | ${false} | ${true} | ${true} | ${''} + ${'button and link'} | ${'Some title'} | ${true} | ${true} | ${true} | ${'over inverse'} + ${'button and link'} | ${'Some title'} | ${false} | ${false} | ${true} | ${'not closable'} + ${'link'} | ${'Some title'} | ${false} | ${true} | ${true} | ${'with button link'} + ${'none'} | ${'Some title'} | ${false} | ${true} | ${true} | ${'without actions'} + ${'none'} | ${''} | ${false} | ${false} | ${false} | ${'only description'} + ${'none'} | ${''} | ${false} | ${true} | ${false} | ${'only description and closable'} +`('Callout $case', async ({actions, title, inverse, closable, asset}) => { await openStoryPage({ id: 'components-callout--default', - args: {actions, title, inverse, isClosable, withIcon}, + args: {actions, title, inverse, closable, asset}, }); const callout = await screen.findByRole('region'); diff --git a/src/__screenshot_tests__/carousel-screenshot-test.tsx b/src/__screenshot_tests__/carousel-screenshot-test.tsx index bc0e705583..d420799eeb 100644 --- a/src/__screenshot_tests__/carousel-screenshot-test.tsx +++ b/src/__screenshot_tests__/carousel-screenshot-test.tsx @@ -22,7 +22,7 @@ test('Carousel mobile without bullets', async () => { const page = await openStoryPage({ id: 'components-carousels-carousel--default', device: 'MOBILE_IOS', - args: {withBullets: false}, + args: {bullets: false}, }); expect(await page.screenshot()).toMatchImageSnapshot(); diff --git a/src/__screenshot_tests__/chip-screenshot-test.tsx b/src/__screenshot_tests__/chip-screenshot-test.tsx index 10b73d5e82..30c548c1fe 100644 --- a/src/__screenshot_tests__/chip-screenshot-test.tsx +++ b/src/__screenshot_tests__/chip-screenshot-test.tsx @@ -15,7 +15,7 @@ test.each(CHIP_OPTIONS)('Chip - %s', async (option) => { device: 'DESKTOP', args: { badge: option.includes('badge') ? '2' : 'undefined', - withIcon: option.includes('icon'), + icon: option.includes('icon'), closable: option.includes('closable'), }, }); @@ -39,7 +39,7 @@ test.each` const page = await openStoryPage({ id: `components-chip--${selection}-selection`, device: 'DESKTOP', - args: {inverse, withIcon: true, badge}, + args: {inverse, icon: true, badge}, }); const story = await screen.findByTestId(`chip-${selection}-selection`); diff --git a/src/__screenshot_tests__/cover-hero-screenshot-test.tsx b/src/__screenshot_tests__/cover-hero-screenshot-test.tsx index 504598c014..0754b17f98 100644 --- a/src/__screenshot_tests__/cover-hero-screenshot-test.tsx +++ b/src/__screenshot_tests__/cover-hero-screenshot-test.tsx @@ -40,21 +40,21 @@ const cases = [ 'desktop with extra and sideExtra', { device: 'DESKTOP', - args: {withExtra: true, withSideExtra: true}, + args: {extra: true, sideExtra: true}, }, ], [ 'mobile with extra and sideExtra', { device: 'MOBILE_IOS', - args: {withExtra: true, withSideExtra: true}, + args: {extra: true, sideExtra: true}, }, ], [ 'tablet with extra and sideExtra', { device: 'TABLET', - args: {withExtra: true, withSideExtra: true}, + args: {extra: true, sideExtra: true}, }, ], [ @@ -77,8 +77,8 @@ const cases = [ device: 'DESKTOP', args: { centered: true, - withExtra: true, - withSideExtra: true, + extra: true, + sideExtra: true, actions: 'button secondaryButton and link', }, }, @@ -89,8 +89,8 @@ const cases = [ device: 'MOBILE_IOS', args: { centered: true, - withExtra: true, - withSideExtra: true, + extra: true, + sideExtra: true, actions: 'button secondaryButton and link', }, }, @@ -140,7 +140,7 @@ const cases = [ args: { title: 'Long title '.repeat(10), description: 'This is a long description with a long text to see how this works'.repeat(10), - withSideExtra: true, + sideExtra: true, }, }, ], diff --git a/src/__screenshot_tests__/data-card-screenshot-test.tsx b/src/__screenshot_tests__/data-card-screenshot-test.tsx index 3bfac17aa2..b2bbd52cdf 100644 --- a/src/__screenshot_tests__/data-card-screenshot-test.tsx +++ b/src/__screenshot_tests__/data-card-screenshot-test.tsx @@ -47,7 +47,7 @@ test('DataCard with extra content', async () => { const page = await openStoryPage({ id: 'components-cards-datacard--default', device: 'MOBILE_IOS', - args: {withExtra: true}, + args: {extra: true}, }); const image = await page.screenshot({fullPage: true}); @@ -71,7 +71,7 @@ test('DataCard with top actions', async () => { const page = await openStoryPage({ id: 'components-cards-datacard--default', device: 'MOBILE_IOS', - args: {withTopAction: true}, + args: {topAction: true}, }); const image = await page.screenshot({fullPage: true}); @@ -84,7 +84,7 @@ test('DataCard without icon, with top actions and too long title', async () => { id: 'components-cards-datacard--default', device: 'MOBILE_IOS', args: { - withTopAction: true, + topAction: true, asset: 'none', title: 'Too long title too long title too long titltoo long title too long title', }, diff --git a/src/__screenshot_tests__/dialog-screenshot-test.tsx b/src/__screenshot_tests__/dialog-screenshot-test.tsx index 3ab5e8da45..8708159136 100644 --- a/src/__screenshot_tests__/dialog-screenshot-test.tsx +++ b/src/__screenshot_tests__/dialog-screenshot-test.tsx @@ -52,7 +52,7 @@ test('Dialog optional elements are not displayed if not provided', async () => { onAccept: false, onCancel: false, link: false, - icon: false, + asset: false, extra: false, }, }); diff --git a/src/__screenshot_tests__/display-data-card-screenshot-test.tsx b/src/__screenshot_tests__/display-data-card-screenshot-test.tsx index f38a4a3661..1e04552d69 100644 --- a/src/__screenshot_tests__/display-data-card-screenshot-test.tsx +++ b/src/__screenshot_tests__/display-data-card-screenshot-test.tsx @@ -17,7 +17,7 @@ test('DisplayDataCard', async () => { test('DisplayDataCard with top actions', async () => { await openStoryPage({ id: 'components-cards-displaydatacard--default', - args: {withTopAction: true, closable: true}, + args: {topAction: true, closable: true}, }); const displayDataCard = await screen.findByTestId('display-data-card'); @@ -30,7 +30,7 @@ test('DisplayDataCard with top actions', async () => { test('DisplayDataCard with top actions without asset', async () => { await openStoryPage({ id: 'components-cards-displaydatacard--default', - args: {withTopAction: true, closable: true, asset: 'none'}, + args: {topAction: true, closable: true, asset: 'none'}, }); const displayDataCard = await screen.findByTestId('display-data-card'); @@ -43,7 +43,7 @@ test('DisplayDataCard with top actions without asset', async () => { test('DisplayDataCard with top actions inverse', async () => { await openStoryPage({ id: 'components-cards-displaydatacard--default', - args: {withTopAction: true, closable: true, isInverse: true}, + args: {topAction: true, closable: true, isInverse: true}, }); const displayDataCard = await screen.findByTestId('display-data-card'); diff --git a/src/__screenshot_tests__/display-media-card-screenshot-test.tsx b/src/__screenshot_tests__/display-media-card-screenshot-test.tsx index 418cda1d2f..bd2f7668b6 100644 --- a/src/__screenshot_tests__/display-media-card-screenshot-test.tsx +++ b/src/__screenshot_tests__/display-media-card-screenshot-test.tsx @@ -15,7 +15,7 @@ test('DisplayMediaCard', async () => { test('DisplayMediaCard with top actions', async () => { await openStoryPage({ id: 'components-cards-displaymediacard--default', - args: {withTopAction: true, closable: true}, + args: {topAction: true, closable: true}, }); const displayMediaCard = await screen.findByTestId('display-media-card'); @@ -64,7 +64,7 @@ test('DisplayMediaCard with asset', async () => { test('DisplayMediaCard with extra content', async () => { await openStoryPage({ id: 'components-cards-displaymediacard--default', - args: {withExtra: true}, + args: {extra: true}, }); const displayMediaCard = await screen.findByTestId('display-media-card'); @@ -83,7 +83,7 @@ test.each` `('DisplayMediaCard with $background, empty source and inverse=$inverse', async ({background, inverse}) => { await openStoryPage({ id: 'components-cards-displaymediacard--default', - args: {background, isEmptySource: true, inverse}, + args: {background, emptySource: true, inverse}, }); const displayMediaCard = await screen.findByTestId('display-media-card'); diff --git a/src/__screenshot_tests__/feedback-screenshot-test.tsx b/src/__screenshot_tests__/feedback-screenshot-test.tsx index b0c426353b..3b5f17643d 100644 --- a/src/__screenshot_tests__/feedback-screenshot-test.tsx +++ b/src/__screenshot_tests__/feedback-screenshot-test.tsx @@ -81,7 +81,7 @@ test('Info feedback screen with custom icon', async () => { id: 'patterns-feedback-infofeedbackscreen--info', skin: MOVISTAR_SKIN, device: 'MOBILE_IOS', - args: {icon: 'custom'}, + args: {asset: 'custom'}, }); const image = await page.screenshot(); diff --git a/src/__screenshot_tests__/icon-button-screenshot-test.tsx b/src/__screenshot_tests__/icon-button-screenshot-test.tsx index bd9fe87a83..a6f1ec32f9 100644 --- a/src/__screenshot_tests__/icon-button-screenshot-test.tsx +++ b/src/__screenshot_tests__/icon-button-screenshot-test.tsx @@ -49,7 +49,7 @@ test.each(MOBILE_DEVICES)('IconButton - spinner in %s', async (device) => { await openStoryPage({ id: 'components-buttons--icon-button-story', device, - args: {backgroundType: 'solid', showSpinner: true}, + args: {backgroundType: 'solid', spinner: true}, }); const story = await screen.findByTestId('icon-button'); diff --git a/src/__screenshot_tests__/image-screenshot-test.tsx b/src/__screenshot_tests__/image-screenshot-test.tsx index 86a9befcbd..5bea8af6f3 100644 --- a/src/__screenshot_tests__/image-screenshot-test.tsx +++ b/src/__screenshot_tests__/image-screenshot-test.tsx @@ -49,7 +49,7 @@ test.each(ASPECT_RATIO.slice(0, 4))('Image - error fallback with aspect ratio %s args: { type: 'width and aspect ratio', aspectRatio: aspectRatio.replace(':', ' '), - isEmptySource: true, + emptySource: true, }, }); diff --git a/src/__screenshot_tests__/list-screenshot-test.tsx b/src/__screenshot_tests__/list-screenshot-test.tsx index f67f7ea475..031618cf6a 100644 --- a/src/__screenshot_tests__/list-screenshot-test.tsx +++ b/src/__screenshot_tests__/list-screenshot-test.tsx @@ -25,61 +25,55 @@ const getCases = () => { const cases = []; for (const device of devices) { for (const control of controls) { - const extraContent = false; - const withBadge = true; - cases.push([device, control, extraContent, withBadge]); + const extra = false; + const badge = true; + cases.push([device, control, extra, badge]); } - for (const extraContent of [true, false]) { - const withBadge = false; - cases.push([device, 'none', extraContent, withBadge]); + for (const extra of [true, false]) { + const badge = false; + cases.push([device, 'none', extra, badge]); } } return cases; }; -test.each(getCases())( - 'Row list - %s %s extra %s badge %s', - async (device, control, extraContent, withBadge) => { - await openStoryPage({ - id: 'components-lists--row-list-story', - device: device as Device, - args: { - control, - extraContent, - withBadge, - headline: 'Headline', - detail: 'Detail', - subtitle: 'Subtitle', - }, - }); - - const list = await screen.findByTestId('list'); - const image = await list.screenshot(); - expect(image).toMatchImageSnapshot(); - } -); - -test.each(getCases())( - 'Boxed row list - %s %s extra %s badge %s', - async (device, control, extraContent, withBadge) => { - await openStoryPage({ - id: 'components-lists--boxed-row-list-story', - device: device as Device, - args: { - control, - extraContent, - withBadge, - headline: 'Headline', - detail: 'Detail', - subtitle: 'Subtitle', - }, - }); - - const list = await screen.findByTestId('list'); - const image = await list.screenshot(); - expect(image).toMatchImageSnapshot(); - } -); +test.each(getCases())('Row list - %s %s extra %s badge %s', async (device, control, extra, badge) => { + await openStoryPage({ + id: 'components-lists--row-list-story', + device: device as Device, + args: { + control, + extra, + badge, + headline: 'Headline', + detail: 'Detail', + subtitle: 'Subtitle', + }, + }); + + const list = await screen.findByTestId('list'); + const image = await list.screenshot(); + expect(image).toMatchImageSnapshot(); +}); + +test.each(getCases())('Boxed row list - %s %s extra %s badge %s', async (device, control, extra, badge) => { + await openStoryPage({ + id: 'components-lists--boxed-row-list-story', + device: device as Device, + args: { + control, + extra, + badge, + headline: 'Headline', + detail: 'Detail', + subtitle: 'Subtitle', + }, + }); + + const list = await screen.findByTestId('list'); + const image = await list.screenshot(); + expect(image).toMatchImageSnapshot(); +}); test.each(controls)('Row list disabled - %s', async (control) => { await openStoryPage({ @@ -88,7 +82,7 @@ test.each(controls)('Row list disabled - %s', async (control) => { args: { control, headline: 'Headline', - withBadge: true, + badge: true, disabled: true, detail: 'Detail', subtitle: 'Subtitle', @@ -107,7 +101,7 @@ test.each(controls)('Boxed row list disabled - %s', async (control) => { args: { control, headline: 'Headline', - withBadge: true, + badge: true, disabled: true, detail: 'Detail', subtitle: 'Subtitle', @@ -221,7 +215,7 @@ test('BoxedRows inverse', async () => { id: 'components-lists--boxed-row-list-story', device: 'MOBILE_IOS', args: { - isInverse: true, + inverse: true, }, }); @@ -235,7 +229,7 @@ test('BoxedRows inverse over inverse', async () => { id: 'components-lists--boxed-row-list-story', device: 'MOBILE_IOS', args: { - isInverse: true, + inverse: true, overInverse: true, }, }); diff --git a/src/__screenshot_tests__/loading-screen-screenshot-test.tsx b/src/__screenshot_tests__/loading-screen-screenshot-test.tsx index ec3de0b3c2..14f59f0482 100644 --- a/src/__screenshot_tests__/loading-screen-screenshot-test.tsx +++ b/src/__screenshot_tests__/loading-screen-screenshot-test.tsx @@ -14,7 +14,7 @@ test.each(['MOBILE_IOS', 'DESKTOP'] as const)('LoadingScreen inverse in %s', asy const page = await openStoryPage({ id: 'patterns-loading--loading-screen-story', device, - args: {isInverse: true}, + args: {inverse: true}, }); const image = await page.screenshot(); diff --git a/src/__screenshot_tests__/media-card-screenshot-test.tsx b/src/__screenshot_tests__/media-card-screenshot-test.tsx index 8d6eb564ff..127c18127b 100644 --- a/src/__screenshot_tests__/media-card-screenshot-test.tsx +++ b/src/__screenshot_tests__/media-card-screenshot-test.tsx @@ -47,7 +47,7 @@ test('MediaCard with body ', async () => { id: 'components-cards-mediacard--default', device: 'MOBILE_IOS', args: { - withExtra: true, + extra: true, actions: 'button and link', }, }); @@ -62,7 +62,7 @@ test('MediaCard with body closeable', async () => { id: 'components-cards-mediacard--default', device: 'MOBILE_IOS', args: { - withExtra: true, + extra: true, actions: 'button and link', closable: true, }, @@ -78,9 +78,9 @@ test('MediaCard with top actions', async () => { id: 'components-cards-mediacard--default', device: 'MOBILE_IOS', args: { - withExtra: true, + extra: true, actions: 'button and link', - withTopAction: true, + topAction: true, }, }); diff --git a/src/__screenshot_tests__/naked-card-screenshot-test.tsx b/src/__screenshot_tests__/naked-card-screenshot-test.tsx index f9cd121e9b..188491b084 100644 --- a/src/__screenshot_tests__/naked-card-screenshot-test.tsx +++ b/src/__screenshot_tests__/naked-card-screenshot-test.tsx @@ -45,7 +45,7 @@ test('NakedCard with extra ', async () => { id: 'components-cards-nakedcard--default', device: 'MOBILE_IOS', args: { - withExtra: true, + extra: true, actions: 'button and link', }, }); @@ -93,7 +93,7 @@ test('NakedCard with top actions', async () => { device: 'MOBILE_IOS', args: { actions: 'button and link', - withTopAction: true, + topAction: true, }, }); @@ -149,7 +149,7 @@ test('SmallNakedCard with extra ', async () => { id: 'components-cards-nakedcard--small', device: 'MOBILE_IOS', args: { - withExtra: true, + extra: true, actions: 'button and link', }, }); diff --git a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx index 05103d50f6..a79bc5cd75 100644 --- a/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx +++ b/src/__screenshot_tests__/navigation-bar-screenshot-test.tsx @@ -52,7 +52,7 @@ test('MainNavigationBar mobile with burger menu extra', async () => { const page = await openStoryPage({ id: 'components-navigation-bars-mainnavigationbar--default', device: 'MOBILE_IOS', - args: {withBurgerMenuExtra: true}, + args: {burgerMenuExtra: true}, }); await page.click(await screen.findByRole('button', {name: 'Abrir menú de navegación'})); @@ -145,7 +145,7 @@ test.each` const page = await openStoryPage({ id: `components-navigation-bars-${type.toLowerCase()}--default`, device, - args: {withBorder: false}, + args: {border: false}, }); const image = await page.screenshot(); @@ -157,7 +157,7 @@ test.each(DEVICES)('MainNavigationBar without sections (%s)', async (device) => const page = await openStoryPage({ id: 'components-navigation-bars-mainnavigationbar--default', device, - args: {withSections: false}, + args: {sections: false}, }); const image = await page.screenshot(); diff --git a/src/__screenshot_tests__/poster-card-screenshot-test.tsx b/src/__screenshot_tests__/poster-card-screenshot-test.tsx index 093633ef36..6eaf28d5d1 100644 --- a/src/__screenshot_tests__/poster-card-screenshot-test.tsx +++ b/src/__screenshot_tests__/poster-card-screenshot-test.tsx @@ -60,7 +60,7 @@ test('PosterCard with top actions', async () => { await openStoryPage({ id: 'components-cards-postercard--default', device: 'MOBILE_IOS', - args: {withTopAction: true}, + args: {topAction: true}, }); const dataCard = await screen.findByTestId('poster-card'); @@ -75,7 +75,7 @@ test('PosterCard without icon, with top actions and too long title', async () => id: 'components-cards-postercard--default', device: 'MOBILE_IOS', args: { - withTopAction: true, + topAction: true, asset: 'none', title: 'Too long title too long title too long titltoo long title too long title', }, @@ -157,7 +157,7 @@ test('PosterCard with custom background color inverse', async () => { test('PosterCard with extra content', async () => { await openStoryPage({ id: 'components-cards-postercard--default', - args: {withExtra: true}, + args: {extra: true}, }); const posterCard = await screen.findByTestId('poster-card'); @@ -176,7 +176,7 @@ test.each` `('PosterCard with $background, empty source and inverse=$inverse', async ({background, inverse}) => { await openStoryPage({ id: 'components-cards-postercard--default', - args: {background, isEmptySource: true, inverse}, + args: {background, emptySource: true, inverse}, }); const posterCard = await screen.findByTestId('poster-card'); diff --git a/src/__screenshot_tests__/snackbar-screenshot-test.tsx b/src/__screenshot_tests__/snackbar-screenshot-test.tsx index 3a75e27b3c..950c7f8447 100644 --- a/src/__screenshot_tests__/snackbar-screenshot-test.tsx +++ b/src/__screenshot_tests__/snackbar-screenshot-test.tsx @@ -76,7 +76,7 @@ test('with dismiss button', async () => { id: 'components-snackbar--default', device: 'MOBILE_ANDROID', args: { - withDismiss: true, + dismiss: true, }, }); @@ -92,7 +92,7 @@ test('with dismiss button and long message', async () => { device: 'MOBILE_ANDROID', args: { message: 'The quick brown fox jumps over the lazy dog - Pack my box with five dozen liquor jugs', - withDismiss: true, + dismiss: true, }, }); @@ -108,7 +108,7 @@ test('with dismiss button and long action', async () => { device: 'MOBILE_ANDROID', args: { buttonText: 'This action is long enough', - withDismiss: true, + dismiss: true, }, }); @@ -125,7 +125,7 @@ test('with dismiss button and long action and message', async () => { args: { message: 'The quick brown fox jumps over the lazy dog - Pack my box with five dozen liquor jugs', buttonText: 'This action is long enough', - withDismiss: true, + dismiss: true, }, }); diff --git a/src/__screenshot_tests__/snap-card-screenshot-test.tsx b/src/__screenshot_tests__/snap-card-screenshot-test.tsx index 00b870760b..d98236d001 100644 --- a/src/__screenshot_tests__/snap-card-screenshot-test.tsx +++ b/src/__screenshot_tests__/snap-card-screenshot-test.tsx @@ -27,7 +27,7 @@ test('SnapCard', async () => { const snapCardInverse = await renderSnapCard({ device: 'MOBILE_IOS', - args: {isInverse: true, asset: 'icon in circle'}, + args: {inverse: true, asset: 'icon in circle'}, }); expect(await snapCardInverse.screenshot()).toMatchImageSnapshot({ customSnapshotIdentifier: 'snapcard-screenshot-test-inverse', @@ -35,7 +35,7 @@ test('SnapCard', async () => { const snapCardWithExtra = await renderSnapCard({ device: 'MOBILE_IOS', - args: {withExtra: true, asset: 'icon in circle'}, + args: {extra: true, asset: 'icon in circle'}, }); expect(await snapCardWithExtra.screenshot()).toMatchImageSnapshot({ customSnapshotIdentifier: 'snapcard-screenshot-test-with-extra', diff --git a/src/__screenshot_tests__/table-screenshot-test.tsx b/src/__screenshot_tests__/table-screenshot-test.tsx index d67e957644..cd19765c15 100644 --- a/src/__screenshot_tests__/table-screenshot-test.tsx +++ b/src/__screenshot_tests__/table-screenshot-test.tsx @@ -85,7 +85,7 @@ const cases = [ 'desktop with actions', { device: 'DESKTOP', - args: {numItems: 6, withActions: true}, + args: {numItems: 6, actions: true}, fullPageScreenshot: false, }, ], @@ -117,7 +117,7 @@ const cases = [ 'desktop collapse-rows with actions', { device: 'DESKTOP', - args: {numItems: 6, responsive: 'collapse-rows', withActions: true}, + args: {numItems: 6, responsive: 'collapse-rows', actions: true}, fullPageScreenshot: false, }, ], @@ -133,7 +133,7 @@ const cases = [ 'desktop boxed with actions', { device: 'DESKTOP', - args: {numItems: 6, boxed: true, withActions: true}, + args: {numItems: 6, boxed: true, actions: true}, fullPageScreenshot: false, }, ], @@ -141,7 +141,7 @@ const cases = [ 'desktop collapse-rows boxed with actions', { device: 'DESKTOP', - args: {numItems: 6, boxed: true, responsive: 'collapse-rows', withActions: true}, + args: {numItems: 6, boxed: true, responsive: 'collapse-rows', actions: true}, fullPageScreenshot: false, }, ], @@ -221,7 +221,7 @@ const cases = [ 'tablet with actions', { device: 'TABLET', - args: {numItems: 6, withActions: true}, + args: {numItems: 6, actions: true}, fullPageScreenshot: true, }, ], @@ -229,7 +229,7 @@ const cases = [ 'tablet collapse-rows with actions', { device: 'TABLET', - args: {numItems: 6, responsive: 'collapse-rows', withActions: true}, + args: {numItems: 6, responsive: 'collapse-rows', actions: true}, fullPageScreenshot: true, }, ], @@ -237,7 +237,7 @@ const cases = [ 'tablet collapse-rows with rowHeaderIndex = 0', { device: 'TABLET', - args: {numItems: 6, responsive: 'collapse-rows', withRowHeader: true, rowHeaderIndex: 0}, + args: {numItems: 6, responsive: 'collapse-rows', rowHeader: true, rowHeaderIndex: 0}, fullPageScreenshot: true, }, ], @@ -245,7 +245,7 @@ const cases = [ 'tablet collapse-rows with rowHeaderIndex = 2', { device: 'TABLET', - args: {numItems: 6, responsive: 'collapse-rows', withRowHeader: true, rowHeaderIndex: 2}, + args: {numItems: 6, responsive: 'collapse-rows', rowHeader: true, rowHeaderIndex: 2}, fullPageScreenshot: true, }, ], @@ -253,7 +253,7 @@ const cases = [ 'tablet boxed with actions', { device: 'TABLET', - args: {numItems: 6, boxed: true, withActions: true}, + args: {numItems: 6, boxed: true, actions: true}, fullPageScreenshot: true, }, ], @@ -261,7 +261,7 @@ const cases = [ 'tablet collapse-rows boxed with actions', { device: 'TABLET', - args: {numItems: 6, boxed: true, responsive: 'collapse-rows', withActions: true}, + args: {numItems: 6, boxed: true, responsive: 'collapse-rows', actions: true}, fullPageScreenshot: true, }, ], @@ -281,7 +281,7 @@ const cases = [ numItems: 6, boxed: true, responsive: 'collapse-rows', - withRowHeader: true, + rowHeader: true, rowHeaderIndex: 0, }, fullPageScreenshot: true, diff --git a/src/__screenshot_tests__/video-screenshot-test.tsx b/src/__screenshot_tests__/video-screenshot-test.tsx index e2ae793455..bf367063c3 100644 --- a/src/__screenshot_tests__/video-screenshot-test.tsx +++ b/src/__screenshot_tests__/video-screenshot-test.tsx @@ -38,7 +38,7 @@ test.each(ASPECT_RATIO)('Video - full width with aspect ratio %s', async (aspect test.each(ASPECT_RATIO.slice(0, 3))('Video - no poster with aspect ratio %s', async (aspectRatio) => { await openStoryPage({ id: 'components-primitives-video--default', - args: {type: 'width and aspect ratio', aspectRatio: aspectRatio.replace(':', ' '), withPoster: false}, + args: {type: 'width and aspect ratio', aspectRatio: aspectRatio.replace(':', ' '), poster: false}, }); const story = await screen.findByTestId('video'); @@ -52,8 +52,8 @@ test.each(ASPECT_RATIO.slice(0, 3))('Video - error fallback with aspect ratio %s args: { type: 'width and aspect ratio', aspectRatio: aspectRatio.replace(':', ' '), - withPoster: false, - isEmptySource: true, + poster: false, + emptySource: true, }, }); diff --git a/src/__stories__/boxed-story.tsx b/src/__stories__/boxed-story.tsx index b06dcc25fb..f76c94e208 100644 --- a/src/__stories__/boxed-story.tsx +++ b/src/__stories__/boxed-story.tsx @@ -7,15 +7,15 @@ export default { }; type Args = { - inverseInside: boolean; - inverseOutside: boolean; + inverse: boolean; + overInverse: boolean; }; -export const Default: StoryComponent = ({inverseInside, inverseOutside}) => { +export const Default: StoryComponent = ({inverse, overInverse}) => { return ( - + - + Text @@ -27,6 +27,6 @@ export const Default: StoryComponent = ({inverseInside, inverseOutside}) = Default.storyName = 'Boxed'; Default.args = { - inverseInside: false, - inverseOutside: false, + inverse: false, + overInverse: false, }; diff --git a/src/__stories__/button-group-story.tsx b/src/__stories__/button-group-story.tsx index ebe39dec95..1ec35ab9a6 100644 --- a/src/__stories__/button-group-story.tsx +++ b/src/__stories__/button-group-story.tsx @@ -11,9 +11,9 @@ const handleOnPress = () => window.alert('pressed!'); type Args = { small: boolean; - showButtonPrimary: boolean; - showButtonSecondary: boolean; - showButtonLink: boolean; + buttonPrimary: boolean; + buttonSecondary: boolean; + buttonLink: boolean; buttonPrimaryText: string; buttonSecondaryText: string; buttonLinkText: string; @@ -21,43 +21,43 @@ type Args = { export const Default: StoryComponent = ({ small, - showButtonPrimary, - showButtonSecondary, - showButtonLink, + buttonPrimary, + buttonSecondary, + buttonLink, buttonPrimaryText, buttonSecondaryText, buttonLinkText, }) => { - const primaryButton = showButtonPrimary ? ( + const primaryButton = buttonPrimary ? ( {buttonPrimaryText} ) : undefined; - const secondaryButton = showButtonSecondary ? ( + const secondaryButton = buttonSecondary ? ( {buttonSecondaryText} ) : undefined; - const buttonLink = showButtonLink ? ( + const linkButton = buttonLink ? ( {buttonLinkText} ) : undefined; - return ; + return ; }; Default.storyName = 'ButtonGroup'; Default.argTypes = { - buttonPrimaryText: {if: {arg: 'showButtonPrimary'}}, - buttonSecondaryText: {if: {arg: 'showButtonSecondary'}}, - buttonLinkText: {if: {arg: 'showButtonLink'}}, + buttonPrimaryText: {if: {arg: 'buttonPrimary'}}, + buttonSecondaryText: {if: {arg: 'buttonSecondary'}}, + buttonLinkText: {if: {arg: 'buttonLink'}}, }; Default.args = { small: false, - showButtonPrimary: true, - showButtonSecondary: true, - showButtonLink: true, + buttonPrimary: true, + buttonSecondary: true, + buttonLink: true, buttonPrimaryText: 'Action1', buttonSecondaryText: 'Action2', buttonLinkText: 'link', diff --git a/src/__stories__/button-layout-story.tsx b/src/__stories__/button-layout-story.tsx index aaafd5eb48..6733a2c2f2 100644 --- a/src/__stories__/button-layout-story.tsx +++ b/src/__stories__/button-layout-story.tsx @@ -12,7 +12,7 @@ type Props = { align?: 'center' | 'left' | 'right' | 'full-width'; }; -const Template: React.FC = ({align = 'full-width'}) => ( +const Template = ({align = 'full-width'}: Props) => ( One button diff --git a/src/__stories__/button-story.tsx b/src/__stories__/button-story.tsx index 13f1ab5fc4..d8b56afa73 100644 --- a/src/__stories__/button-story.tsx +++ b/src/__stories__/button-story.tsx @@ -76,7 +76,7 @@ type Props = { children: React.ReactNode; }; -const ButtonBackgroundContainer: React.FC = ({inverse, children}) => ( +const ButtonBackgroundContainer = ({inverse, children}: Props) => ( {children} @@ -127,20 +127,20 @@ export const DangerButton: StoryComponent = ({inverse, text, icon, action, ); }; -export const LinkButton: StoryComponent & {withChevron: string}> = ({ +export const LinkButton: StoryComponent & {chevron: string}> = ({ inverse, text, icon, action, newTab, - withChevron, + chevron, ...props }) => { return ( o)(defaultArgs), - withChevron: 'default', + chevron: 'default', }; LinkButtonDanger.args = { ...(({small, ...o}) => o)(defaultArgs), @@ -213,7 +213,7 @@ SecondaryButton.argTypes = defaultArgTypes; DangerButton.argTypes = defaultArgTypes; LinkButton.argTypes = { ...defaultArgTypes, - withChevron: { + chevron: { options: ['default', 'true', 'false'], control: {type: 'select'}, }, diff --git a/src/__stories__/callout-story.tsx b/src/__stories__/callout-story.tsx index 083f21e23d..ef71df4e82 100644 --- a/src/__stories__/callout-story.tsx +++ b/src/__stories__/callout-story.tsx @@ -16,19 +16,12 @@ type Args = { title: string; description: string; actions: string; - withIcon: boolean; - isClosable: boolean; + asset: boolean; + closable: boolean; inverse: boolean; }; -export const Default: StoryComponent = ({ - title, - description, - withIcon, - actions, - isClosable, - inverse, -}) => { +export const Default: StoryComponent = ({title, description, asset, actions, closable, inverse}) => { const button = actions.includes('button') ? ( {}}> Action @@ -49,8 +42,8 @@ export const Default: StoryComponent = ({ : undefined} - onClose={isClosable ? () => {} : undefined} + icon={asset ? : undefined} + onClose={closable ? () => {} : undefined} title={title} description={description} button={button} @@ -69,7 +62,7 @@ Default.args = { title: 'Some title', description: 'This is a description for the callout', actions: 'button and link', - withIcon: true, - isClosable: true, + asset: true, + closable: true, inverse: false, }; diff --git a/src/__stories__/carousel-story.tsx b/src/__stories__/carousel-story.tsx index 82e9117183..baa615311d 100644 --- a/src/__stories__/carousel-story.tsx +++ b/src/__stories__/carousel-story.tsx @@ -30,7 +30,7 @@ type Args = { itemsPerPageMobile: number; itemsPerPageTablet: number; itemsPerPageDesktop: number; - withBullets: boolean; + bullets: boolean; free: boolean; itemsToScroll: number; mobilePageOffset: (typeof mobilePageOffsetOptions)[number]; @@ -41,7 +41,7 @@ type Args = { export const Default: StoryComponent = ({ numItems, - withBullets, + bullets, itemsPerPageMobile, itemsPerPageTablet, itemsPerPageDesktop, @@ -66,7 +66,7 @@ export const Default: StoryComponent = ({ /> = ({ Default.storyName = 'Carousel'; Default.parameters = {fullScreen: true}; Default.args = { - withBullets: true, + bullets: true, numItems: 6, itemsPerPageDesktop: 3, itemsPerPageTablet: 2, diff --git a/src/__stories__/chip-story.tsx b/src/__stories__/chip-story.tsx index c7a6143d20..a67d148810 100644 --- a/src/__stories__/chip-story.tsx +++ b/src/__stories__/chip-story.tsx @@ -21,7 +21,7 @@ export default { type Args = { inverse: boolean; - withIcon: boolean; + icon: boolean; closable: boolean; badge: string; }; @@ -32,7 +32,7 @@ type Props = { dataAttributes: DataAttributes; }; -const ChipBackgroundContainer: React.FC = ({inverse, dataAttributes, children}) => ( +const ChipBackgroundContainer = ({inverse, dataAttributes, children}: Props) => (
= ({inverse, dataAttributes, chil ); -export const Default: StoryComponent = ({inverse, withIcon, closable, badge}) => { +export const Default: StoryComponent = ({inverse, icon, closable, badge}) => { const props = { - Icon: withIcon ? IconLightningFilled : undefined, + Icon: icon ? IconLightningFilled : undefined, badge: badge !== 'undefined' ? +badge : undefined, }; @@ -67,9 +67,9 @@ export const Default: StoryComponent = ({inverse, withIcon, closable, badg ); }; -export const SingleSelection: StoryComponent> = ({inverse, badge, withIcon}) => { +export const SingleSelection: StoryComponent> = ({inverse, badge, icon}) => { const props = { - Icon: withIcon ? IconLightningFilled : undefined, + Icon: icon ? IconLightningFilled : undefined, badge: badge !== 'undefined' ? +badge : undefined, }; @@ -107,9 +107,9 @@ export const SingleSelection: StoryComponent> = ({inverse ); }; -export const MultipleSelection: StoryComponent> = ({inverse, badge, withIcon}) => { +export const MultipleSelection: StoryComponent> = ({inverse, badge, icon}) => { const props = { - Icon: withIcon ? IconLightningFilled : undefined, + Icon: icon ? IconLightningFilled : undefined, badge: badge !== 'undefined' ? +badge : undefined, }; @@ -148,7 +148,7 @@ export const MultipleSelection: StoryComponent> = ({inver const defaultArgs = { inverse: false, badge: '0', - withIcon: false, + icon: false, closable: false, }; diff --git a/src/__stories__/cover-hero-story.tsx b/src/__stories__/cover-hero-story.tsx index 1d3e2b3271..5a70572d78 100644 --- a/src/__stories__/cover-hero-story.tsx +++ b/src/__stories__/cover-hero-story.tsx @@ -32,8 +32,8 @@ type Args = { pretitle: string; title: string; description: string; - withExtra: boolean; - withSideExtra: boolean; + extra: boolean; + sideExtra: boolean; actions: | 'none' | 'button' @@ -58,8 +58,8 @@ export const Default: StoryComponent = ({ pretitle, title, description, - withExtra, - withSideExtra, + extra, + sideExtra, actions, minHeight, aspectRatio, @@ -94,8 +94,8 @@ export const Default: StoryComponent = ({ pretitle={pretitle} title={title} description={description} - extra={withExtra ? : undefined} - sideExtra={withSideExtra ? : undefined} + extra={extra ? : undefined} + sideExtra={sideExtra ? : undefined} button={button} secondaryButton={secondaryButton} buttonLink={buttonLink} @@ -120,8 +120,8 @@ Default.args = { pretitle: 'Pretitle', title: 'Title', description: 'This is a long description with a long text to see how this works', - withExtra: false, - withSideExtra: false, + extra: false, + sideExtra: false, actions: 'button and link', minHeight: undefined, aspectRatio: 'auto', diff --git a/src/__stories__/data-card-story.tsx b/src/__stories__/data-card-story.tsx index 48e06f78c5..c72dde78fb 100644 --- a/src/__stories__/data-card-story.tsx +++ b/src/__stories__/data-card-story.tsx @@ -33,10 +33,10 @@ type DataCardArgs = { subtitle: string; description: string; ariaLabel: string; - withExtra: boolean; + extra: boolean; actions: 'button' | 'link' | 'button and link' | 'onPress' | 'href' | 'to' | 'none'; closable: boolean; - withTopAction: boolean; + topAction: boolean; aspectRatio: AspectRatio; }; @@ -51,10 +51,10 @@ export const Default: StoryComponent = ({ subtitle, description, ariaLabel, - withExtra, + extra, actions = 'button', closable, - withTopAction, + topAction, aspectRatio, }) => { let icon; @@ -98,13 +98,13 @@ export const Default: StoryComponent = ({ title={title} subtitle={subtitle} description={description} - extra={withExtra ? : undefined} + extra={extra ? : undefined} {...interactiveActions} aspectRatio={aspectRatioValue as AspectRatio} dataAttributes={{testid: 'data-card'}} aria-label={ariaLabel} actions={ - withTopAction + topAction ? [ { Icon: IconMobileDeviceRegular, @@ -141,11 +141,11 @@ Default.args = { title: 'Title', subtitle: 'Subtitle', description: 'This is a description for the card', - withExtra: false, + extra: false, actions: 'button', ariaLabel: '', closable: false, - withTopAction: false, + topAction: false, aspectRatio: 'auto', }; Default.argTypes = { diff --git a/src/__stories__/dialog-story.tsx b/src/__stories__/dialog-story.tsx index aef4bcfaae..6bd6e8df8c 100644 --- a/src/__stories__/dialog-story.tsx +++ b/src/__stories__/dialog-story.tsx @@ -76,7 +76,7 @@ type DialogArgs = { onAccept: boolean; onCancel: boolean; link: boolean; - icon: boolean; + asset: boolean; extra: boolean; }; @@ -84,7 +84,7 @@ export const Dialog: StoryComponent = ({ onAccept, onCancel, link, - icon, + asset, extra, title, subtitle, @@ -120,7 +120,7 @@ export const Dialog: StoryComponent = ({ ) : undefined, link: link ? Link : undefined, - icon: icon ? ( + icon: asset ? ( ) : undefined, onAccept: onAccept ? () => console.log('Accepted') : undefined, @@ -144,6 +144,6 @@ Dialog.args = { onAccept: true, onCancel: true, link: true, - icon: true, + asset: true, extra: true, }; diff --git a/src/__stories__/display-data-card-story.tsx b/src/__stories__/display-data-card-story.tsx index a56a424083..ac8a4b4bab 100644 --- a/src/__stories__/display-data-card-story.tsx +++ b/src/__stories__/display-data-card-story.tsx @@ -34,9 +34,9 @@ type DisplayDataCardArgs = { pretitle: string; title: string; description: string; - withExtra: boolean; + extra: boolean; closable: boolean; - withTopAction: boolean; + topAction: boolean; actions: | 'button' | 'link' @@ -59,10 +59,10 @@ export const Default: StoryComponent = ({ pretitle, title, description, - withExtra, + extra, actions = 'button', closable, - withTopAction, + topAction, isInverse, aspectRatio, }) => { @@ -112,7 +112,7 @@ export const Default: StoryComponent = ({ isInverse={isInverse} onClose={closable ? () => {} : undefined} actions={ - withTopAction + topAction ? [ { Icon: IconLightningRegular, @@ -140,7 +140,7 @@ export const Default: StoryComponent = ({ title={title} description={description} aspectRatio={aspectRatioValue as AspectRatio} - extra={withExtra ? : undefined} + extra={extra ? : undefined} {...interactiveActions} dataAttributes={{testid: 'display-data-card'}} aria-label="Display data card label" @@ -156,10 +156,10 @@ Default.args = { pretitle: 'Pretitle', title: 'Title', description: 'This is a description for the card', - withExtra: false, + extra: false, actions: 'button', closable: false, - withTopAction: false, + topAction: false, isInverse: false, aspectRatio: 'auto', }; diff --git a/src/__stories__/display-media-card-story.tsx b/src/__stories__/display-media-card-story.tsx index f480f26ae7..50a1c439fd 100644 --- a/src/__stories__/display-media-card-story.tsx +++ b/src/__stories__/display-media-card-story.tsx @@ -41,9 +41,9 @@ type DisplayMediaCardArgs = { pretitle: string; title: string; description: string; - withExtra: boolean; + extra: boolean; closable: boolean; - withTopAction: boolean; + topAction: boolean; actions: | 'button' | 'link' @@ -55,7 +55,7 @@ type DisplayMediaCardArgs = { | 'none'; width: string; aspectRatio: '1:1' | '16:9' | '7:10' | '9:10' | 'auto'; - isEmptySource: boolean; + emptySource: boolean; inverse: boolean; }; @@ -67,13 +67,13 @@ export const Default: StoryComponent = ({ pretitle, title, description, - withExtra, + extra, actions = 'button', closable, - withTopAction, + topAction, width, aspectRatio, - isEmptySource, + emptySource, inverse, }) => { let icon; @@ -113,7 +113,7 @@ export const Default: StoryComponent = ({ background === 'image' ? { onClose: closable ? () => {} : undefined, - actions: withTopAction + actions: topAction ? [ { Icon: IconLightningRegular, @@ -134,11 +134,11 @@ export const Default: StoryComponent = ({ }, ] : undefined, - backgroundImage: isEmptySource ? '' : BACKGROUND_IMAGE_SRC, + backgroundImage: emptySource ? '' : BACKGROUND_IMAGE_SRC, } : { - backgroundVideo: isEmptySource ? '' : BACKGROUND_VIDEO_SRC, - poster: isEmptySource ? '' : BACKGROUND_VIDEO_POSTER_SRC, + backgroundVideo: emptySource ? '' : BACKGROUND_VIDEO_SRC, + poster: emptySource ? '' : BACKGROUND_VIDEO_POSTER_SRC, }; return ( @@ -155,7 +155,7 @@ export const Default: StoryComponent = ({ aria-label="Display media card label" width={width} aspectRatio={aspectRatio} - extra={withExtra ? : undefined} + extra={extra ? : undefined} dataAttributes={{testid: 'display-media-card'}} /> @@ -172,13 +172,13 @@ Default.args = { pretitle: 'Pretitle', title: 'Title', description: 'This is a description for the card', - withExtra: false, + extra: false, actions: 'button', closable: false, - withTopAction: false, + topAction: false, width: 'auto', aspectRatio: 'auto', - isEmptySource: false, + emptySource: false, inverse: false, }; Default.argTypes = { diff --git a/src/__stories__/feedback-screen-story.tsx b/src/__stories__/feedback-screen-story.tsx index a21ad285ec..17548a436c 100644 --- a/src/__stories__/feedback-screen-story.tsx +++ b/src/__stories__/feedback-screen-story.tsx @@ -69,9 +69,9 @@ type FeedbackScreenArgs = { linkText: string; description: string; animateText: boolean; - showIcon: boolean; - withNavbar: boolean; - isInverse: boolean; + icon: boolean; + navbar: boolean; + inverse: boolean; imageUrl: string | null; imageFit: 'fit' | 'fill'; multipleParagraphs: boolean; @@ -85,25 +85,25 @@ export const FeedbackScreenStory: StoryComponent = ({ description, multipleParagraphs, animateText, - showIcon, - withNavbar, - isInverse, + icon, + navbar, + inverse, imageUrl, imageFit, }) => ( - + {(top) => ( <> - {withNavbar && } - + {navbar && } + : undefined} + icon={icon ? : undefined} imageUrl={imageUrl ?? undefined} imageFit={imageFit} primaryButton={ @@ -144,9 +144,9 @@ FeedbackScreenStory.args = { description: 'Description', multipleParagraphs: false, animateText: true, - showIcon: true, - withNavbar: true, - isInverse: false, + icon: true, + navbar: true, + inverse: false, imageUrl: '', imageFit: 'fit', }; diff --git a/src/__stories__/fixed-to-top-story.tsx b/src/__stories__/fixed-to-top-story.tsx index d13e78d996..3de5e4565c 100644 --- a/src/__stories__/fixed-to-top-story.tsx +++ b/src/__stories__/fixed-to-top-story.tsx @@ -7,7 +7,7 @@ export default { type Props = {background: string; height: number; top: number}; -const FixedDiv: React.FC = ({background, height, top}) => ( +const FixedDiv = ({background, height, top}: Props) => (
top: {top}, height: {height}
diff --git a/src/__stories__/form-error-handler-story.tsx b/src/__stories__/form-error-handler-story.tsx index ee85c665a2..bf3badbb44 100644 --- a/src/__stories__/form-error-handler-story.tsx +++ b/src/__stories__/form-error-handler-story.tsx @@ -7,7 +7,7 @@ export default { type CardProps = {show: boolean; children: React.ReactNode; onPress: any}; -const Card: React.FC = ({show, children, onPress}) => { +const Card = ({show, children, onPress}: CardProps) => { return ( <> @@ -18,7 +18,7 @@ const Card: React.FC = ({show, children, onPress}) => { ); }; -const Cards: React.FC = ({activeCard, setActiveCard}) => { +const Cards = ({activeCard, setActiveCard}: any) => { const {formErrors} = useForm(); return ( diff --git a/src/__stories__/funnel-navigation-bar-story.tsx b/src/__stories__/funnel-navigation-bar-story.tsx index 24129b7b4c..9d05da39a6 100644 --- a/src/__stories__/funnel-navigation-bar-story.tsx +++ b/src/__stories__/funnel-navigation-bar-story.tsx @@ -20,13 +20,13 @@ export default { }, }; -type Args = {variant: Variant; withBorder: boolean}; +type Args = {variant: Variant; border: boolean}; -export const Default: StoryComponent = ({variant, withBorder}) => { +export const Default: StoryComponent = ({variant, border}) => { const {isDesktopOrBigger} = useScreenSize(); return ( @@ -52,7 +52,7 @@ Default.storyName = 'FunnelNavigationBar'; Default.args = { variant: 'default', - withBorder: true, + border: true, }; Default.argTypes = { diff --git a/src/__stories__/header-story.tsx b/src/__stories__/header-story.tsx index 595df692e4..ea59801fb8 100644 --- a/src/__stories__/header-story.tsx +++ b/src/__stories__/header-story.tsx @@ -22,7 +22,7 @@ export default { }; type Args = { - withHeader: boolean; + header: boolean; headlineType: TagType; headline: string; pretitle: string; @@ -33,19 +33,19 @@ type Args = { description: string; small: boolean; inverse: boolean; - withExtraContent: boolean; + extra: boolean; sideBySideExtraOnDesktop: boolean; - withBreadcrumbs: boolean; + breadcrumbs: boolean; bleed: boolean; noPaddingY: boolean; }; export const Default: StoryComponent = ({ - withHeader, + header, inverse, bleed, sideBySideExtraOnDesktop, - withBreadcrumbs, + breadcrumbs, headlineType, headline, pretitle, @@ -55,7 +55,7 @@ export const Default: StoryComponent = ({ titleAs, description, small, - withExtraContent, + extra, noPaddingY, }) => { return ( @@ -67,7 +67,7 @@ export const Default: StoryComponent = ({ sideBySideExtraOnDesktop={sideBySideExtraOnDesktop} noPaddingY={noPaddingY} breadcrumbs={ - withBreadcrumbs ? ( + breadcrumbs ? ( = ({ ) : undefined } header={ - withHeader ? ( + header ? (
{headline}} @@ -87,7 +87,7 @@ export const Default: StoryComponent = ({ /> ) : undefined } - extra={withExtraContent ? : undefined} + extra={extra ? : undefined} /> = ({ Default.storyName = 'Header'; Default.args = { - withHeader: true, + header: true, headlineType: 'promo', headline: 'Priority', pretitle: 'Your last bill', @@ -115,9 +115,9 @@ Default.args = { small: false, truncatePretitle: false, inverse: true, - withBreadcrumbs: true, + breadcrumbs: true, noPaddingY: false, - withExtraContent: true, + extra: true, sideBySideExtraOnDesktop: true, bleed: false, }; @@ -126,23 +126,23 @@ Default.argTypes = { headlineType: { options: ['promo', 'active', 'inactive', 'success', 'warning', 'error'], control: {type: 'select'}, - if: {arg: 'withHeader'}, + if: {arg: 'header'}, }, - headline: {if: {arg: 'withHeader'}}, - pretitle: {if: {arg: 'withHeader'}}, + headline: {if: {arg: 'header'}}, + pretitle: {if: {arg: 'header'}}, pretitleAs: { - if: {arg: 'withHeader'}, + if: {arg: 'header'}, options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'], control: {type: 'select'}, }, - title: {if: {arg: 'withHeader'}}, + title: {if: {arg: 'header'}}, titleAs: { - if: {arg: 'withHeader'}, + if: {arg: 'header'}, options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'], control: {type: 'select'}, }, - description: {if: {arg: 'withHeader'}}, - small: {if: {arg: 'withHeader'}}, - sideBySideExtraOnDesktop: {if: {arg: 'withExtraContent'}}, - bleed: {if: {arg: 'withExtraContent'}}, + description: {if: {arg: 'header'}}, + small: {if: {arg: 'header'}}, + sideBySideExtraOnDesktop: {if: {arg: 'extra'}}, + bleed: {if: {arg: 'extra'}}, }; diff --git a/src/__stories__/helpers.tsx b/src/__stories__/helpers.tsx index 6d8c43a0cd..449a9803e8 100644 --- a/src/__stories__/helpers.tsx +++ b/src/__stories__/helpers.tsx @@ -7,7 +7,7 @@ type Props = { children: React.ReactNode; }; -export const StorySection: React.FC = ({title, children}) => { +export const StorySection = ({title, children}: Props): JSX.Element => { const isInverse = useIsInverseVariant(); return (
diff --git a/src/__stories__/hero-story.tsx b/src/__stories__/hero-story.tsx index ad8bd75f9b..05b72ecc14 100644 --- a/src/__stories__/hero-story.tsx +++ b/src/__stories__/hero-story.tsx @@ -21,7 +21,7 @@ type HeroArgs = { pretitle: string; title: string; description: string; - withExtra: boolean; + extra: boolean; actions: 'button' | 'link' | 'button and link'; background: 'default' | 'alternative' | 'brand' | 'brand-secondary' | 'none'; desktopMediaPosition: 'left' | 'right'; @@ -41,7 +41,7 @@ export const Default: StoryComponent = ({ actions, desktopMediaPosition, height, - withExtra, + extra, aspectRatio, noPaddingY, }) => { @@ -67,7 +67,7 @@ export const Default: StoryComponent = ({ pretitle={pretitle} title={title} description={description} - extra={withExtra ? : undefined} + extra={extra ? : undefined} button={button} buttonLink={buttonLink} dataAttributes={{testid: 'hero'}} @@ -87,7 +87,7 @@ Default.args = { pretitle: 'Pretitle', title: 'Title', description: 'This is a long description with a long text to see how this works', - withExtra: false, + extra: false, actions: 'button and link', background: 'default', desktopMediaPosition: 'right', diff --git a/src/__stories__/horizontal-scroll-story.tsx b/src/__stories__/horizontal-scroll-story.tsx index 509d25aa31..f178823462 100644 --- a/src/__stories__/horizontal-scroll-story.tsx +++ b/src/__stories__/horizontal-scroll-story.tsx @@ -8,16 +8,16 @@ export default { }; type Args = { - showScrollbar: boolean; + scrollbar: boolean; }; -export const Default: StoryComponent = ({showScrollbar}) => { +export const Default: StoryComponent = ({scrollbar}) => { return ( - + @@ -35,5 +35,5 @@ export const Default: StoryComponent = ({showScrollbar}) => { Default.storyName = 'HorizontalScroll'; Default.args = { - showScrollbar: true, + scrollbar: true, }; diff --git a/src/__stories__/icon-button-story.tsx b/src/__stories__/icon-button-story.tsx index fed106bcf5..26cbdc06b3 100644 --- a/src/__stories__/icon-button-story.tsx +++ b/src/__stories__/icon-button-story.tsx @@ -22,7 +22,7 @@ type IconButtonArgs = { themeVariant: Variant; small: boolean; disabled: boolean; - showSpinner: boolean; + spinner: boolean; bleedLeft: boolean; bleedRight: boolean; bleedY: boolean; @@ -34,7 +34,7 @@ export const IconButtonStory: StoryComponent = ({ themeVariant, small, disabled, - showSpinner, + spinner, bleedLeft, bleedRight, bleedY, @@ -47,7 +47,7 @@ export const IconButtonStory: StoryComponent = ({ Icon={IconCloseRegular} type={type} backgroundType={backgroundType} - showSpinner={showSpinner} + showSpinner={spinner} small={small} disabled={disabled} bleedLeft={bleedLeft} @@ -80,7 +80,7 @@ IconButtonStory.args = { themeVariant: 'default', small: false, disabled: false, - showSpinner: false, + spinner: false, bleedLeft: false, bleedRight: false, bleedY: false, @@ -94,7 +94,7 @@ type ToggleIconButtonArgs = { themeVariant: Variant; small: boolean; disabled: boolean; - showSpinner: boolean; + spinner: boolean; bleedLeft: boolean; bleedRight: boolean; bleedY: boolean; @@ -108,7 +108,7 @@ export const ToggleIconButtonStory: StoryComponent = ({ themeVariant, small, disabled, - showSpinner, + spinner, bleedLeft, bleedRight, bleedY, @@ -117,7 +117,7 @@ export const ToggleIconButtonStory: StoryComponent = ({ console.log(checked ? 'checked' : 'unchecked')} - showSpinner={showSpinner} + showSpinner={spinner} small={small} disabled={disabled} bleedLeft={bleedLeft} @@ -172,7 +172,7 @@ ToggleIconButtonStory.args = { themeVariant: 'default', small: false, disabled: false, - showSpinner: false, + spinner: false, bleedLeft: false, bleedRight: false, bleedY: false, diff --git a/src/__stories__/image-story.tsx b/src/__stories__/image-story.tsx index 9716dbe06a..9bfdecf82a 100644 --- a/src/__stories__/image-story.tsx +++ b/src/__stories__/image-story.tsx @@ -43,7 +43,7 @@ type Args = { height: number; aspectRatio: string; borderRadius: boolean; - isEmptySource: boolean; + emptySource: boolean; }; export const Default: StoryComponent = ({ @@ -52,7 +52,7 @@ export const Default: StoryComponent = ({ height, aspectRatio, borderRadius, - isEmptySource, + emptySource, }) => { const props = { width: type !== 'full width' ? width : undefined, @@ -67,7 +67,7 @@ export const Default: StoryComponent = ({ dataAttributes: {testid: 'image'}, }; - return ; + return ; }; Default.storyName = 'Image'; @@ -77,5 +77,5 @@ Default.args = { height: 240, aspectRatio: '1 1', borderRadius: true, - isEmptySource: false, + emptySource: false, }; diff --git a/src/__stories__/info-feedback-screen-story.tsx b/src/__stories__/info-feedback-screen-story.tsx index 886da5e456..48c91d9c5a 100644 --- a/src/__stories__/info-feedback-screen-story.tsx +++ b/src/__stories__/info-feedback-screen-story.tsx @@ -10,7 +10,7 @@ export default { fullScreen: true, }, argTypes: { - icon: { + asset: { options: ['default', 'custom'], control: {type: 'select'}, }, @@ -18,22 +18,22 @@ export default { }; type Args = { - icon: string; + asset: string; extra: boolean; }; -export const Info: StoryComponent = ({icon, extra}) => ( +export const Info: StoryComponent = ({asset, extra}) => ( {}}>Action1} - Icon={icon === 'custom' ? IconError : undefined} + Icon={asset === 'custom' ? IconError : undefined} extra={extra ? : undefined} /> ); Info.storyName = 'InfoFeedbackScreen'; Info.args = { - icon: 'default', + asset: 'default', extra: false, }; diff --git a/src/__stories__/list-story.tsx b/src/__stories__/list-story.tsx index 2d98138401..a3f180fe1e 100644 --- a/src/__stories__/list-story.tsx +++ b/src/__stories__/list-story.tsx @@ -64,17 +64,17 @@ type Args = { description: string; detail: string; control: string; - withBadge: boolean; + badge: boolean; oneLineTitle: boolean; oneLineSubtitle: boolean; oneLineDescription: boolean; - extraContent: boolean; + extra: boolean; disabled: boolean; danger: boolean; overInverse: boolean; }; -const Template: StoryComponent = ({ +const Template: StoryComponent = ({ boxed, headline, title, @@ -82,17 +82,17 @@ const Template: StoryComponent = description, detail, control, - withBadge, + badge, oneLineTitle, oneLineSubtitle, oneLineDescription, - extraContent, + extra, disabled, overInverse, - isInverse, + inverse, danger, }) => { - const extra = extraContent ? : undefined; + const extraContent = extra ? : undefined; const getControlProps = (index: number) => { let controlProps: any = {}; @@ -236,14 +236,14 @@ const Template: StoryComponent = subtitle={subtitle} description={description} detail={detail} - badge={withBadge} + badge={badge} titleLinesMax={oneLineTitle ? 1 : 2} subtitleLinesMax={oneLineSubtitle ? 1 : 2} descriptionLinesMax={oneLineDescription ? 1 : 2} - extra={extra} + extra={extraContent} disabled={disabled} danger={danger} - isInverse={isInverse} + isInverse={inverse} {...getControlProps(row++)} /> = subtitle={subtitle} description={description} detail={detail} - badge={withBadge ? 2 : undefined} + badge={badge ? 2 : undefined} titleLinesMax={oneLineTitle ? 1 : 2} subtitleLinesMax={oneLineSubtitle ? 1 : 2} descriptionLinesMax={oneLineDescription ? 1 : 2} - extra={extra} + extra={extraContent} disabled={disabled} danger={danger} - isInverse={isInverse} + isInverse={inverse} {...getControlProps(row++)} /> = subtitle={subtitle} description={description} detail={detail} - badge={withBadge ? 22 : undefined} + badge={badge ? 22 : undefined} titleLinesMax={oneLineTitle ? 1 : 2} subtitleLinesMax={oneLineSubtitle ? 1 : 2} descriptionLinesMax={oneLineDescription ? 1 : 2} - extra={extra} + extra={extraContent} disabled={disabled} danger={danger} - isInverse={isInverse} + isInverse={inverse} {...getControlProps(row++)} /> = subtitle={subtitle} description={description} detail={detail} - badge={withBadge ? 22 : undefined} + badge={badge ? 22 : undefined} titleLinesMax={oneLineTitle ? 1 : 2} subtitleLinesMax={oneLineSubtitle ? 1 : 2} descriptionLinesMax={oneLineDescription ? 1 : 2} - extra={extra} + extra={extraContent} disabled={disabled} danger={danger} - isInverse={isInverse} + isInverse={inverse} {...getControlProps(row++)} /> = subtitle={subtitle} description={description} detail={detail} - badge={withBadge ? 22 : undefined} + badge={badge ? 22 : undefined} titleLinesMax={oneLineTitle ? 1 : 2} subtitleLinesMax={oneLineSubtitle ? 1 : 2} descriptionLinesMax={oneLineDescription ? 1 : 2} - extra={extra} + extra={extraContent} disabled={disabled} danger={danger} - isInverse={isInverse} + isInverse={inverse} {...getControlProps(row++)} /> = subtitle={subtitle} description={description} detail={detail} - badge={withBadge ? 22 : undefined} + badge={badge ? 22 : undefined} titleLinesMax={oneLineTitle ? 1 : 2} subtitleLinesMax={oneLineSubtitle ? 1 : 2} descriptionLinesMax={oneLineDescription ? 1 : 2} - extra={extra} + extra={extraContent} disabled={disabled} danger={danger} - isInverse={isInverse} + isInverse={inverse} {...getControlProps(row++)} /> = subtitle={subtitle} description={description} detail={detail} - badge={withBadge ? 22 : undefined} + badge={badge ? 22 : undefined} titleLinesMax={oneLineTitle ? 1 : 2} subtitleLinesMax={oneLineSubtitle ? 1 : 2} descriptionLinesMax={oneLineDescription ? 1 : 2} - extra={extra} + extra={extraContent} disabled={disabled} danger={danger} - isInverse={isInverse} + isInverse={inverse} {...getControlProps(row++)} /> = subtitle={subtitle} description={description} detail={detail} - badge={withBadge ? 22 : undefined} + badge={badge ? 22 : undefined} titleLinesMax={oneLineTitle ? 1 : 2} subtitleLinesMax={oneLineSubtitle ? 1 : 2} descriptionLinesMax={oneLineDescription ? 1 : 2} - extra={extra} + extra={extraContent} disabled={disabled} danger={danger} - isInverse={isInverse} + isInverse={inverse} {...getControlProps(row++)} /> = subtitle={subtitle} description={description} detail={detail} - badge={withBadge ? 22 : undefined} + badge={badge ? 22 : undefined} titleLinesMax={oneLineTitle ? 1 : 2} subtitleLinesMax={oneLineSubtitle ? 1 : 2} descriptionLinesMax={oneLineDescription ? 1 : 2} - extra={extra} + extra={extraContent} disabled={disabled} danger={danger} - isInverse={isInverse} + isInverse={inverse} {...getControlProps(row++)} /> @@ -411,11 +411,11 @@ const defaultArgs = { description: 'Description', detail: '', control: 'chevron', - withBadge: false, + badge: false, oneLineTitle: false, oneLineSubtitle: false, oneLineDescription: false, - extraContent: false, + extra: false, disabled: false, danger: false, overInverse: false, @@ -425,9 +425,9 @@ export const RowListStory: StoryComponent = (args) =>