-
Notifications
You must be signed in to change notification settings - Fork 5
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 #11442 from wellcomecollection/featured-card-refactor
Featured card refactor
- Loading branch information
Showing
13 changed files
with
539 additions
and
360 deletions.
There are no files selected for viewing
83 changes: 59 additions & 24 deletions
83
cardigan/stories/components/Cards/FeaturedCard/FeaturedCard.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 |
|---|---|---|
| @@ -1,49 +1,84 @@ | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { ReadmeDecorator } from '@weco/cardigan/config/decorators'; | ||
| import { | ||
| contentAPIArticle, | ||
| exhibitionBasic, | ||
| } from '@weco/cardigan/stories/data/content'; | ||
| import { image } from '@weco/cardigan/stories/data/images'; | ||
| import { font } from '@weco/common/utils/classnames'; | ||
| import FeaturedCard from '@weco/content/components/FeaturedCard/FeaturedCard'; | ||
| import FeaturedCard from '@weco/content/components/FeaturedCard'; | ||
| import Readme from '@weco/content/components/FeaturedCard/README.mdx'; | ||
|
|
||
| const meta: Meta<typeof FeaturedCard> = { | ||
| title: 'Components/Cards/FeaturedCard', | ||
| component: FeaturedCard, | ||
| args: { | ||
| type: 'card', | ||
| image: image(), | ||
| labels: [{ text: 'Article' }], | ||
| labels: [{ text: 'Page' }], | ||
| link: { url: '#', text: 'Remote diagnosis from wee to the web' }, | ||
| background: 'neutral.700', | ||
| textColor: 'white', | ||
| isReversed: false, | ||
| }, | ||
| argTypes: { | ||
| type: { | ||
| options: ['card', 'exhibition', 'article'], | ||
| control: { type: 'radio' }, | ||
| }, | ||
| background: { | ||
| options: ['neutral.700', 'warmNeutral.300'], | ||
| control: { type: 'select' }, | ||
| }, | ||
| textColor: { | ||
| options: ['white', 'black'], | ||
| control: { type: 'select' }, | ||
| }, | ||
| labels: { | ||
| table: { | ||
| disable: true, | ||
| }, | ||
| }, | ||
| link: { | ||
| table: { | ||
| disable: true, | ||
| }, | ||
| }, | ||
| image: { | ||
| table: { | ||
| disable: true, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof FeaturedCard>; | ||
| export const Basic: Story = { | ||
| name: 'FeaturedCard', | ||
| render: args => ( | ||
| <ReadmeDecorator | ||
| WrappedComponent={FeaturedCard} | ||
| args={{ | ||
| id: 'id', | ||
| image: image(), | ||
| labels: [{ text: 'Article' }], | ||
| link: { url: '#', text: 'Remote diagnosis from wee to the web' }, | ||
| background: args.background, | ||
| textColor: args.textColor, | ||
| isReversed: args.isReversed, | ||
| }} | ||
| Readme={Readme} | ||
| > | ||
| <h2 className={font('wb', 2)}>Remote diagnosis from wee to the Web</h2> | ||
| <p className={font('intr', 5)}> | ||
| Medical practice might have moved on from when patients posted flasks of | ||
| their urine for doctors to taste, but telehealth today keeps up the | ||
| tradition of remote diagnosis – to our possible detriment. | ||
| </p> | ||
| </ReadmeDecorator> | ||
| ), | ||
| render: args => { | ||
| return ( | ||
| <ReadmeDecorator | ||
| WrappedComponent={FeaturedCard} | ||
| args={{ | ||
| ...args, | ||
| type: args.type || 'card', | ||
| image: image(), | ||
| link: { url: '#', text: 'Remote diagnosis from wee to the web' }, | ||
| ...(args.type === 'article' && { article: contentAPIArticle }), | ||
| ...(args.type === 'exhibition' && { exhibition: exhibitionBasic }), | ||
| }} | ||
| Readme={Readme} | ||
| > | ||
| <h2 className={font('wb', 2)}>Remote diagnosis from wee to the Web</h2> | ||
| <p className={font('intr', 5)}> | ||
| Medical practice might have moved on from when patients posted flasks | ||
| of their urine for doctors to taste, but telehealth today keeps up the | ||
| tradition of remote diagnosis – to our possible detriment. | ||
| </p> | ||
| </ReadmeDecorator> | ||
| ); | ||
| }, | ||
| }; |
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
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
68 changes: 68 additions & 0 deletions
68
content/webapp/components/FeaturedCard/FeaturedCard.helpers.ts
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,68 @@ | ||
| import { ImageType } from '@weco/common/model/image'; | ||
| import { Label } from '@weco/common/model/labels'; | ||
| import linkResolver from '@weco/common/services/prismic/link-resolver'; | ||
| import { ArticleBasic } from '@weco/content/types/articles'; | ||
| import { BookBasic } from '@weco/content/types/books'; | ||
| import { Card } from '@weco/content/types/card'; | ||
| import { EventSeries } from '@weco/content/types/event-series'; | ||
| import { EventBasic } from '@weco/content/types/events'; | ||
| import { ExhibitionBasic } from '@weco/content/types/exhibitions'; | ||
| import { Guide } from '@weco/content/types/guides'; | ||
| import { Link } from '@weco/content/types/link'; | ||
| import { Page } from '@weco/content/types/pages'; | ||
| import { Season } from '@weco/content/types/seasons'; | ||
| import { SeriesBasic } from '@weco/content/types/series'; | ||
|
|
||
| export type PartialFeaturedCard = { | ||
| image?: ImageType; | ||
| labels: Label[]; | ||
| link: Link; | ||
| }; | ||
|
|
||
| export function convertCardToFeaturedCardProps( | ||
| item: Card | ||
| ): PartialFeaturedCard { | ||
| return { | ||
| // We intentionally omit the alt text on promos, so screen reader | ||
| // users don't have to listen to the alt text before hearing the | ||
| // title of the item in the list. | ||
| // | ||
| // See https://github.com/wellcomecollection/wellcomecollection.org/issues/6007 | ||
| image: item.image && { | ||
| ...item.image, | ||
| alt: '', | ||
| }, | ||
| labels: item.format ? [{ text: item.format.title }] : [], | ||
| link: { url: item.link || '', text: item.title || '' }, | ||
| }; | ||
| } | ||
|
|
||
| export function convertItemToFeaturedCardProps( | ||
| item: | ||
| | ArticleBasic | ||
| | ExhibitionBasic | ||
| | Season | ||
| | Page | ||
| | EventSeries | ||
| | BookBasic | ||
| | SeriesBasic | ||
| | EventBasic | ||
| | Guide | ||
| ): PartialFeaturedCard { | ||
| return { | ||
| image: item.promo?.image && { | ||
| ...item.promo.image, | ||
| // We intentionally omit the alt text on promos, so screen reader | ||
| // users don't have to listen to the alt text before hearing the | ||
| // title of the item in the list. | ||
| // | ||
| // See https://github.com/wellcomecollection/wellcomecollection.org/issues/6007 | ||
| alt: '', | ||
| }, | ||
| labels: item.labels, | ||
| link: { | ||
| url: linkResolver(item), | ||
| text: item.title, | ||
| }, | ||
| }; | ||
| } |
Oops, something went wrong.