-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1994 from navikt/utvid-storybook
Flere card-stories 🧪
- Loading branch information
Showing
12 changed files
with
816 additions
and
1,724 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
src/components/_common/card/LargeCardV1/LargeCardV1.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { CardType } from 'types/card'; | ||
| import { ContentType } from 'types/content-props/_content-common'; | ||
| import { MediaType } from 'types/media'; | ||
| import { LargeCardV1 } from './LargeCardV1'; | ||
|
|
||
| const meta = { | ||
| component: LargeCardV1, | ||
| args: { | ||
| link: { url: '', text: 'LargeCardV1' }, | ||
| description: 'Description', | ||
| tagline: 'Tagline', | ||
| type: CardType.Product, | ||
| }, | ||
| } satisfies Meta<typeof LargeCardV1>; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Default: Story = {}; | ||
|
|
||
| export const Illustration: Story = { | ||
| args: { | ||
| illustration: { | ||
| type: ContentType.Pictograms, | ||
| data: { icons: [{ icon: { type: MediaType.Vector, mediaUrl: 'placeholder' } }] }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const ProductHover: Story = { | ||
| parameters: { | ||
| pseudo: { hover: true }, | ||
| }, | ||
| }; | ||
|
|
||
| export const SituationHover: Story = { | ||
| args: { type: CardType.Situation }, | ||
| parameters: { | ||
| pseudo: { hover: true }, | ||
| }, | ||
| }; | ||
|
|
||
| export const ThemedArticleHover: Story = { | ||
| args: { type: CardType.ThemedArticle }, | ||
| parameters: { | ||
| pseudo: { hover: true }, | ||
| }, | ||
| }; | ||
|
|
||
| export const GuideHover: Story = { | ||
| args: { type: CardType.Guide }, | ||
| parameters: { | ||
| pseudo: { hover: true }, | ||
| }, | ||
| }; |
32 changes: 32 additions & 0 deletions
32
src/components/_common/card/LargeCardV2/LargeCardV2.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { CardType } from 'types/card'; | ||
| import { ContentType } from 'types/content-props/_content-common'; | ||
| import { MediaType } from 'types/media'; | ||
| import { LargeCardV2 } from './LargeCardV2'; | ||
|
|
||
| const meta = { | ||
| component: LargeCardV2, | ||
| } satisfies Meta<typeof LargeCardV2>; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| link: { url: '', text: 'LargeCardV2' }, | ||
| type: CardType.Product, | ||
| description: 'Description', | ||
| tagline: 'Tagline', | ||
| }, | ||
| }; | ||
|
|
||
| export const Illustration: Story = { | ||
| args: { | ||
| ...Default.args, | ||
| illustration: { | ||
| type: ContentType.Pictograms, | ||
| data: { icons: [{ icon: { type: MediaType.Vector, mediaUrl: 'placeholder' } }] }, | ||
| }, | ||
| }, | ||
| }; |
22 changes: 22 additions & 0 deletions
22
src/components/_common/card/MicroCard/MicroCard.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { CardType } from 'types/card'; | ||
| import { MicroCard } from './MicroCard'; | ||
|
|
||
| const meta = { | ||
| component: MicroCard, | ||
| } satisfies Meta<typeof MicroCard>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| link: { url: '', text: 'MicroCard' }, | ||
| type: CardType.Product, | ||
| }, | ||
| }; | ||
|
|
||
| export const Hover: Story = { | ||
| parameters: { pseudo: { hover: true } }, | ||
| args: { ...Default.args }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import React from 'react'; | ||
| import { BodyShort } from '@navikt/ds-react'; | ||
| import { CardProps, CardTargetProps, getCardProps } from 'components/_common/card/card-utils'; | ||
| import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp'; | ||
| import { usePageContentProps } from 'store/pageContext'; | ||
|
|
||
| import { MicroCard } from './MicroCard'; | ||
| import style from './MicroCard.module.scss'; | ||
|
|
||
| type Props = { | ||
| header?: string; | ||
| card_list: CardTargetProps[]; | ||
| }; | ||
|
|
||
| export const MicroCards = ({ header, card_list }: Props) => { | ||
| const content = usePageContentProps(); | ||
|
|
||
| const cardProps = card_list.reduce<CardProps[]>((acc, card) => { | ||
| const props = getCardProps(card, content); | ||
| if (props) { | ||
| acc.push(props); | ||
| } | ||
|
|
||
| return acc; | ||
| }, []); | ||
|
|
||
| if (cardProps.length === 0) { | ||
| return <EditorHelp text={'Velg minst én lenke for å aktivere mikrokortene'} />; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {header && ( | ||
| <BodyShort size={'medium'} className={style.header}> | ||
| {header} | ||
| </BodyShort> | ||
| )} | ||
| <div className={style.wrapper}> | ||
| {cardProps.map((card, index) => ( | ||
| <MicroCard {...card} key={index} /> | ||
| ))} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/components/macros/product-card-micro/MacroProductCardMicro.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/components/parts/product-card-micro/ProductCardMicroPart.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters