diff --git a/.changeset/perfect-vans-obey.md b/.changeset/perfect-vans-obey.md new file mode 100644 index 000000000..0ccd7d511 --- /dev/null +++ b/.changeset/perfect-vans-obey.md @@ -0,0 +1,5 @@ +--- +'@guardian/source-development-kitchen': major +--- + +Remove `QuoteIcon` component and `HeadlineSize` type diff --git a/libs/@guardian/source-development-kitchen/src/react-components/index.test.ts b/libs/@guardian/source-development-kitchen/src/react-components/index.test.ts index 77f890690..b2f4a2a89 100644 --- a/libs/@guardian/source-development-kitchen/src/react-components/index.test.ts +++ b/libs/@guardian/source-development-kitchen/src/react-components/index.test.ts @@ -13,8 +13,6 @@ export type { LogoProps, NumericInput, NumericInputProps, - HeadlineSize, - QuoteIconProps, StarRatingProps, ToggleSwitchProps, ToggleSwitchAppsProps, @@ -35,7 +33,6 @@ it('Should have exactly these exports', () => { 'Lines', 'Logo', 'NumericInput', - 'QuoteIcon', 'SquigglyLines', 'StarRating', 'StraightLines', diff --git a/libs/@guardian/source-development-kitchen/src/react-components/index.ts b/libs/@guardian/source-development-kitchen/src/react-components/index.ts index daf828664..0b72c5315 100644 --- a/libs/@guardian/source-development-kitchen/src/react-components/index.ts +++ b/libs/@guardian/source-development-kitchen/src/react-components/index.ts @@ -27,9 +27,6 @@ export type { LineCount, LinesProps } from './lines/Lines'; export { Logo } from './logo/Logo'; export type { LogoProps } from './logo/Logo'; -export { QuoteIcon } from './quote-icon/QuoteIcon'; -export type { HeadlineSize, QuoteIconProps } from './quote-icon/QuoteIcon'; - export { StarRating } from './star-rating/StarRating'; export type { StarRatingProps } from './star-rating/StarRating'; diff --git a/libs/@guardian/source-development-kitchen/src/react-components/logo/README.md b/libs/@guardian/source-development-kitchen/src/react-components/logo/README.md index 306e99c3c..1635ea764 100644 --- a/libs/@guardian/source-development-kitchen/src/react-components/logo/README.md +++ b/libs/@guardian/source-development-kitchen/src/react-components/logo/README.md @@ -1,4 +1,4 @@ -# QuoteIcon +# Logo The Guardian logo appears in the header on most editorial pages diff --git a/libs/@guardian/source-development-kitchen/src/react-components/quote-icon/QuoteIcon.stories.tsx b/libs/@guardian/source-development-kitchen/src/react-components/quote-icon/QuoteIcon.stories.tsx deleted file mode 100644 index 8092a3793..000000000 --- a/libs/@guardian/source-development-kitchen/src/react-components/quote-icon/QuoteIcon.stories.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { - ArticleDesign, - ArticleDisplay, - ArticlePillar, - ArticleSpecial, -} from '@guardian/libs'; -import type { Meta, StoryFn } from '@storybook/react'; -import type { QuoteIconProps } from './QuoteIcon'; -import { QuoteIcon } from './QuoteIcon'; - -const defaultFormat = { - display: ArticleDisplay.Standard, - design: ArticleDesign.Standard, -}; - -const meta: Meta = { - title: 'React Components/QuoteIcon', - component: QuoteIcon, - argTypes: { - format: { - options: [ - 'news', - 'sport', - 'culture', - 'lifestyle', - 'opinion', - 'special_report', - 'labs', - ], - mapping: { - news: { ...defaultFormat, theme: ArticlePillar.News }, - sport: { ...defaultFormat, theme: ArticlePillar.Sport }, - culture: { ...defaultFormat, theme: ArticlePillar.Culture }, - lifestyle: { ...defaultFormat, theme: ArticlePillar.Lifestyle }, - opinion: { ...defaultFormat, theme: ArticlePillar.Opinion }, - special_report: { - ...defaultFormat, - theme: ArticleSpecial.SpecialReport, - }, - labs: { ...defaultFormat, theme: ArticleSpecial.Labs }, - }, - control: { type: 'radio' }, - }, - }, -}; - -export default meta; - -const Template: StoryFn = (args: QuoteIconProps) => ( -
- - I look like a buffoon. I feel incredible. And then I vomit -
-); - -// ***************************************************************************** - -export const News: StoryFn = Template.bind({}); -News.args = { - size: 'medium', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.News - format: 'news', -}; - -// ***************************************************************************** - -export const Sport: StoryFn = Template.bind({}); -Sport.args = { - size: 'medium', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.Sport - format: 'sport', -}; - -// ***************************************************************************** - -export const Culture: StoryFn = Template.bind({}); -Culture.args = { - size: 'medium', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.Culture - format: 'culture', -}; - -// ***************************************************************************** - -export const Lifestyle: StoryFn = Template.bind({}); -Lifestyle.args = { - size: 'medium', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.Lifestyle - format: 'lifestyle', -}; - -// ***************************************************************************** - -export const Opinion: StoryFn = Template.bind({}); -Opinion.args = { - size: 'medium', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.Opinion - format: 'opinion', -}; - -// ***************************************************************************** - -export const SpecialReport: StoryFn = Template.bind({}); -SpecialReport.args = { - size: 'medium', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.SpecialReport - format: 'special_report', -}; - -// ***************************************************************************** - -export const Labs: StoryFn = Template.bind({}); -Labs.args = { - size: 'medium', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.Labs - format: 'labs', -}; - -// ***************************************************************************** - -export const XSmall: StoryFn = Template.bind({}); -XSmall.args = { - size: 'xsmall', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.News - format: 'news', -}; - -// ***************************************************************************** - -export const Small: StoryFn = Template.bind({}); -Small.args = { - size: 'small', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.News - format: 'news', -}; - -// ***************************************************************************** - -export const Medium: StoryFn = Template.bind({}); -Medium.args = { - size: 'medium', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.News - format: 'news', -}; - -// ***************************************************************************** - -export const Large: StoryFn = Template.bind({}); -Large.args = { - size: 'large', - // @ts-expect-error - Storybook maps 'news' to ArticlePillar.News - format: 'news', -}; diff --git a/libs/@guardian/source-development-kitchen/src/react-components/quote-icon/QuoteIcon.tsx b/libs/@guardian/source-development-kitchen/src/react-components/quote-icon/QuoteIcon.tsx deleted file mode 100644 index 56e669bc9..000000000 --- a/libs/@guardian/source-development-kitchen/src/react-components/quote-icon/QuoteIcon.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import { css } from '@emotion/react'; -import type { ArticleFormat } from '@guardian/libs'; -import { ArticlePillar, ArticleSpecial } from '@guardian/libs'; -import { - culture, - labs, - lifestyle, - news, - opinion, - palette, - specialReport, - sport, -} from '@guardian/source/foundations'; -import { SvgQuote } from '@guardian/source/react-components'; - -const quoteColor = (format: ArticleFormat) => { - switch (format.theme) { - case ArticlePillar.News: { - return css` - svg { - fill: ${news[400]}; - } - `; - } - case ArticlePillar.Opinion: { - return css` - svg { - fill: ${opinion[400]}; - } - `; - } - case ArticlePillar.Culture: { - return css` - svg { - fill: ${culture[400]}; - } - `; - } - case ArticlePillar.Sport: { - return css` - svg { - fill: ${sport[400]}; - } - `; - } - case ArticlePillar.Lifestyle: { - return css` - svg { - fill: ${lifestyle[400]}; - } - `; - } - case ArticleSpecial.SpecialReport: { - return css` - svg { - fill: ${specialReport[400]}; - } - `; - } - case ArticleSpecial.SpecialReportAlt: { - return css` - svg { - fill: ${palette.specialReportAlt[200]}; - } - `; - } - case ArticleSpecial.Labs: { - return css` - svg { - fill: ${labs[400]}; - } - `; - } - } -}; - -export type HeadlineSize = 'xsmall' | 'small' | 'medium' | 'large'; - -const sizeStyles = (size: HeadlineSize) => { - switch (size) { - case 'xsmall': - return css` - svg { - height: 22px; - margin-left: -4px; - margin-bottom: -6px; - margin-top: -2px; - } - `; - case 'small': - return css` - svg { - height: 26px; - margin-left: -4px; - margin-bottom: -7px; - margin-top: -3px; - } - `; - case 'medium': - return css` - svg { - height: 28px; - margin-left: -4px; - margin-bottom: -8px; - margin-top: -4px; - } - `; - case 'large': - return css` - svg { - height: 38px; - margin-left: -4px; - margin-bottom: -10px; - margin-top: -6px; - } - `; - } -}; - -export type QuoteIconProps = { - /** - * What we use to decide the editorial colour for the quotes - */ - format: ArticleFormat; - /** - * The size of the quote. - */ - size: HeadlineSize; -}; - -/** - * [Storybook](https://guardian.github.io/storybooks/?path=/story/source-development-kitchen_react-components-quoteicon--news) • - * [Design System](https://theguardian.design) • - * [GitHub](https://github.com/guardian/csnx/tree/main/libs/@guardian/source-development-kitchen/src/quote-icon/QuoteIcon.tsx) • - * [NPM](https://www.npmjs.com/package/@guardian/source-development-kitchen) - * - * The Guardian quote icon is used in kickers, headlines, drop caps and pull quotes to denote quoted text. - * - */ -export const QuoteIcon = ({ format, size }: QuoteIconProps) => ( - - - -); diff --git a/libs/@guardian/source-development-kitchen/src/react-components/quote-icon/README.md b/libs/@guardian/source-development-kitchen/src/react-components/quote-icon/README.md deleted file mode 100644 index c219b3c2b..000000000 --- a/libs/@guardian/source-development-kitchen/src/react-components/quote-icon/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# QuoteIcon - -The Guardian quote icon is used in kickers, headlines, drop caps and pull quotes to denote quoted text. - -## Install - -```sh -$ pnpm add @guardian/source-development-kitchen -``` - -or - -```sh -$ npm i @guardian/source-development-kitchen -``` - -## Use - -### API - -See [storybook](https://guardian.github.io/storybooks/?path=/story/source-development-kitchen_react-components-quoteicon--news) - -### How to use - -For context and visual guides relating to usage see the [Source Design System website](https://theguardian.design).