= (args: AccordionProps) => (
16 |
17 |
18 | Present your card to a newsagent each time you collect the paper. The
19 | newsagent will scan your card and will be reimbursed for each transaction
20 | automatically.
21 |
22 |
23 | Simply give your preferred store / retailer the barcode printed on your
24 | subscription letter.
25 |
26 |
27 | );
28 |
29 | export const WithCTALabelsDefaultTheme = Template.bind({});
30 |
31 | // *****************************************************************************
32 |
33 | export const WithoutCTALabelsDefaultTheme = Template.bind({});
34 | WithoutCTALabelsDefaultTheme.args = {
35 | hideToggleLabel: true,
36 | };
37 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/accordion/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 |
3 | export const accordionThemeDefault = {
4 | accordion: {
5 | textPrimary: palette.neutral[7],
6 | borderPrimary: palette.neutral[60],
7 | },
8 | };
9 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgGuardianBestWebsiteLogo.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Story } from '@storybook/react';
2 | import type { SvgGuardianBestWebsiteLogoProps } from './SvgGuardianBestWebsiteLogo';
3 | import { SvgGuardianBestWebsiteLogo } from './SvgGuardianBestWebsiteLogo';
4 |
5 | export default {
6 | title: 'Packages/source-react-components/SvgGuardianBestWebsiteLogo',
7 | component: SvgGuardianBestWebsiteLogo,
8 | argTypes: {
9 | width: {
10 | control: { type: 'range', min: 10, max: 600 },
11 | },
12 | },
13 | };
14 |
15 | const Template: Story = (args: SvgGuardianBestWebsiteLogoProps) => (
16 |
17 | );
18 |
19 | export const Default = Template.bind({});
20 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgGuardianLiveLogo.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Story } from '@storybook/react';
2 | import type { SvgGuardianLiveLogoProps } from './SvgGuardianLiveLogo';
3 | import { SvgGuardianLiveLogo } from './SvgGuardianLiveLogo';
4 |
5 | export default {
6 | title: 'Packages/source-react-components/SvgGuardianLiveLogo',
7 | component: SvgGuardianLiveLogo,
8 | argTypes: {
9 | width: {
10 | control: { type: 'range', min: 10, max: 600 },
11 | },
12 | },
13 | };
14 |
15 | const Template: Story = (args: SvgGuardianLiveLogoProps) => (
16 |
17 | );
18 |
19 | export const Default = Template.bind({});
20 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgGuardianLogo.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Story } from '@storybook/react';
2 | import type { SvgGuardianLogoProps } from './SvgGuardianLogo';
3 | import { SvgGuardianLogo } from './SvgGuardianLogo';
4 |
5 | export default {
6 | title: 'Packages/source-react-components/SvgGuardianLogo',
7 | component: SvgGuardianLogo,
8 | argTypes: {
9 | width: {
10 | control: { type: 'range', min: 10, max: 600 },
11 | },
12 | },
13 | };
14 |
15 | const Template: Story = (args: SvgGuardianLogoProps) => (
16 |
17 | );
18 |
19 | export const Default = Template.bind({});
20 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgRoundelBrand.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Story } from '@storybook/react';
2 | import type { SvgRoundelBrandProps } from './SvgRoundelBrand';
3 | import { SvgRoundelBrand } from './SvgRoundelBrand';
4 |
5 | export default {
6 | title: 'Packages/source-react-components/SvgRoundelBrand',
7 | component: SvgRoundelBrand,
8 | argTypes: {
9 | width: {
10 | control: { type: 'range', min: 10, max: 600 },
11 | },
12 | },
13 | };
14 |
15 | const Template: Story = (args: SvgRoundelBrandProps) => (
16 |
17 | );
18 |
19 | export const Default = Template.bind({});
20 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgRoundelBrand.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import { brand } from '@guardian/source-foundations';
3 | import { SvgRoundel } from './SvgRoundel';
4 |
5 | export type SvgRoundelBrandProps = {
6 | /**
7 | * The width the SVG will display at (height is automatically adjusted
8 | * to maintain the correct aspect ratio).
9 | */
10 | width?: number;
11 | };
12 |
13 | /**
14 | * [Storybook](https://guardian.github.io/source/?path=/docs/packages-source-react-components-svgroundelbrand--playground) •
15 | * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/37168b) •
16 | * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/source-react-components/src/brand/SvgRoundelBrand.tsx) •
17 | * [NPM](https://www.npmjs.com/package/@guardian/source-react-components)
18 | */
19 | export const SvgRoundelBrand = (
20 | args: SvgRoundelBrandProps,
21 | ): EmotionJSX.Element => {
22 | return (
23 |
24 | );
25 | };
26 | SvgRoundelBrand.args = {
27 | width: 300,
28 | };
29 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgRoundelBrandInverse.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Story } from '@storybook/react';
2 | import type { SvgRoundelBrandInverseProps } from './SvgRoundelBrandInverse';
3 | import { SvgRoundelBrandInverse } from './SvgRoundelBrandInverse';
4 |
5 | export default {
6 | title: 'Packages/source-react-components/SvgRoundelBrandInverse',
7 | component: SvgRoundelBrandInverse,
8 | argTypes: {
9 | width: {
10 | control: { type: 'range', min: 10, max: 600 },
11 | },
12 | },
13 | };
14 |
15 | const Template: Story = (args: SvgRoundelBrandInverseProps) => (
16 |
17 | );
18 |
19 | export const Default = Template.bind({});
20 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgRoundelBrandInverse.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import { brand } from '@guardian/source-foundations';
3 | import { SvgRoundel } from './SvgRoundel';
4 |
5 | export type SvgRoundelBrandInverseProps = {
6 | /**
7 | * The width the SVG will display at (height is automatically adjusted
8 | * to maintain the correct aspect ratio).
9 | */
10 | width?: number;
11 | };
12 |
13 | /**
14 | * [Storybook](https://guardian.github.io/source/?path=/docs/packages-source-react-components-svgroundelbrandinverse--playground) •
15 | * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/37168b) •
16 | * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/source-react-components/src/brand/SvgRoundelBrandInverse.tsx) •
17 | * [NPM](https://www.npmjs.com/package/@guardian/source-react-components)
18 | */
19 | export const SvgRoundelBrandInverse = (
20 | args: SvgRoundelBrandInverseProps,
21 | ): EmotionJSX.Element => {
22 | return (
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgRoundelDefault.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Story } from '@storybook/react';
2 | import type { SvgRoundelDefaultProps } from './SvgRoundelDefault';
3 | import { SvgRoundelDefault } from './SvgRoundelDefault';
4 |
5 | export default {
6 | title: 'Packages/source-react-components/SvgRoundelDefault',
7 | component: SvgRoundelDefault,
8 | argTypes: {
9 | width: {
10 | control: { type: 'range', min: 10, max: 600 },
11 | },
12 | },
13 | };
14 |
15 | const Template: Story = (args: SvgRoundelDefaultProps) => (
16 |
17 | );
18 |
19 | export const Default = Template.bind({});
20 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgRoundelDefault.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import { neutral } from '@guardian/source-foundations';
3 | import { SvgRoundel } from './SvgRoundel';
4 |
5 | export type SvgRoundelDefaultProps = {
6 | /**
7 | * The width the SVG will display at (height is automatically adjusted
8 | * to maintain the correct aspect ratio).
9 | */
10 | width?: number;
11 | };
12 |
13 | /**
14 | * [Storybook](https://guardian.github.io/source/?path=/docs/packages-source-react-components-svgroundeldefault--playground) •
15 | * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/37168b) •
16 | * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/source-react-components/src/brand/SvgRoundelDefault.tsx) •
17 | * [NPM](https://www.npmjs.com/package/@guardian/source-react-components)
18 | */
19 | export const SvgRoundelDefault = (
20 | args: SvgRoundelDefaultProps,
21 | ): EmotionJSX.Element => {
22 | return (
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgRoundelInverse.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Story } from '@storybook/react';
2 | import type { SvgRoundelInverseProps } from './SvgRoundelInverse';
3 | import { SvgRoundelInverse } from './SvgRoundelInverse';
4 |
5 | export default {
6 | title: 'Packages/source-react-components/SvgRoundelInverse',
7 | component: SvgRoundelInverse,
8 | argTypes: {
9 | width: {
10 | control: { type: 'range', min: 10, max: 600 },
11 | },
12 | },
13 | };
14 |
15 | const Template: Story = (args: SvgRoundelInverseProps) => (
16 |
17 | );
18 |
19 | export const Default = Template.bind({});
20 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/SvgRoundelInverse.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import { neutral } from '@guardian/source-foundations';
3 | import { SvgRoundel } from './SvgRoundel';
4 |
5 | export type SvgRoundelInverseProps = {
6 | /**
7 | * The width the SVG will display at (height is automatically adjusted
8 | * to maintain the correct aspect ratio).
9 | */
10 | width?: number;
11 | };
12 |
13 | /**
14 | * [Storybook](https://guardian.github.io/source/?path=/docs/packages-source-react-components-svgroundelinverse--playground) •
15 | * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/37168b) •
16 | * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/source-react-components/src/brand/SvgRoundelInverse.tsx) •
17 | * [NPM](https://www.npmjs.com/package/@guardian/source-react-components)
18 | */
19 | export const SvgRoundelInverse = (
20 | args: SvgRoundelInverseProps,
21 | ): EmotionJSX.Element => {
22 | return (
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/114x114-roundel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/114x114-roundel.png
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/114x114.png
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/120x120.png
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/144x144.png
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/152x152-roundel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/152x152-roundel.png
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/152x152.png
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/32x32-dev.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/32x32-dev.ico
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/32x32.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/32x32.ico
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/57x57.png
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/brand/favicons/72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guardian/source/d84c25d67ed51545994f53986eb4487d35c1aab4/packages/@guardian/source-react-components/src/brand/favicons/72x72.png
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/checkbox/LabelText.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import type { ReactNode } from 'react';
3 | import type { Theme } from '../@types/Theme';
4 | import { labelText, labelTextWithSupportingText } from './styles';
5 |
6 | export const LabelText = ({
7 | hasSupportingText,
8 | children,
9 | }: {
10 | hasSupportingText?: boolean;
11 | children: ReactNode;
12 | }): EmotionJSX.Element => {
13 | return (
14 | [
16 | labelText(theme.checkbox),
17 | hasSupportingText ? labelTextWithSupportingText : '',
18 | ]}
19 | >
20 | {children}
21 |
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/checkbox/SupportingText.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import type { ReactNode } from 'react';
3 | import type { Theme } from '../@types/Theme';
4 | import { supportingText } from './styles';
5 |
6 | export const SupportingText = ({
7 | children,
8 | }: {
9 | children: ReactNode;
10 | }): EmotionJSX.Element => {
11 | return (
12 | supportingText(theme.checkbox)}>{children}
13 | );
14 | };
15 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/checkbox/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 | import { labelThemeBrand, labelThemeDefault } from '../label/theme';
3 | import {
4 | userFeedbackThemeBrand,
5 | userFeedbackThemeDefault,
6 | } from '../user-feedback/theme';
7 |
8 | export const checkboxThemeDefault = {
9 | checkbox: {
10 | border: palette.neutral[46],
11 | borderHover: palette.brand[500],
12 | borderChecked: palette.brand[500],
13 | borderError: palette.error[400],
14 | backgroundChecked: palette.brand[500],
15 | textLabel: palette.neutral[7],
16 | textLabelSupporting: palette.neutral[46],
17 | textIndeterminate: palette.neutral[46],
18 | },
19 | ...userFeedbackThemeDefault,
20 | ...labelThemeDefault,
21 | };
22 |
23 | export const checkboxThemeBrand = {
24 | checkbox: {
25 | border: palette.brand[800],
26 | borderHover: palette.neutral[100],
27 | borderChecked: palette.neutral[100],
28 | borderError: palette.error[500],
29 | backgroundChecked: palette.neutral[100],
30 | textLabel: palette.neutral[100],
31 | textLabelSupporting: palette.brand[800],
32 | textIndeterminate: palette.brand[800],
33 | },
34 | ...userFeedbackThemeBrand,
35 | ...labelThemeBrand,
36 | };
37 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/choice-card/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 | import { userFeedbackThemeDefault } from '../user-feedback/theme';
3 |
4 | export const choiceCardThemeDefault = {
5 | choiceCard: {
6 | textLabel: palette.neutral[46],
7 | textLabelSupporting: palette.neutral[46],
8 | textGroupLabel: palette.neutral[7],
9 | textGroupLabelSupporting: palette.neutral[46],
10 | border: palette.neutral[46],
11 | textChecked: palette.brand[400],
12 | backgroundChecked: '#E3F6FF',
13 | backgroundTick: palette.brand[500],
14 | borderChecked: palette.brand[500],
15 | textHover: palette.brand[400],
16 | borderHover: palette.brand[500],
17 | textError: palette.error[400],
18 | borderError: palette.error[400],
19 | },
20 | ...userFeedbackThemeDefault,
21 | };
22 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/footer/BackToTop.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Story } from '@storybook/react';
2 | import { BackToTop } from './BackToTop';
3 |
4 | export default {
5 | component: BackToTop,
6 | title: 'Packages/source-react-components/BackToTop',
7 | };
8 |
9 | const Template: Story = () => BackToTop;
10 |
11 | export const Default = Template.bind({});
12 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/footer/BackToTop.tsx:
--------------------------------------------------------------------------------
1 | import { SvgChevronUpSingle } from '../../vendor/icons/SvgChevronUpSingle';
2 | import type { Theme } from '../@types/Theme';
3 | import { backToTop, backToTopIcon } from './styles';
4 |
5 | export const BackToTop = (
6 | backToTop(theme.footer)}>
7 | Back to top
8 | backToTopIcon(theme.footer)}>
9 |
10 |
11 |
12 | );
13 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/footer/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 |
3 | export const footerThemeBrand = {
4 | footer: {
5 | border: palette.brand[600],
6 | background: palette.brand[400],
7 | text: palette.neutral[100],
8 | anchor: palette.neutral[100],
9 | anchorHover: palette.brandAlt[400],
10 | },
11 | };
12 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/inline/Inline.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import type { HTMLAttributes } from 'react';
3 | import type { Props } from '../@types/Props';
4 | import { inline, inlineSpace } from './styles';
5 | import type { InlineSpace } from './types';
6 |
7 | export interface InlineProps extends HTMLAttributes, Props {
8 | /**
9 | * [Units of space](https://www.theguardian.design/2a1e5182b/p/449bd5-space) between inline items (one unit is 4px).
10 | */
11 | space?: InlineSpace;
12 | }
13 |
14 | /**
15 | * [Storybook](https://guardian.github.io/source/?path=/docs/packages-source-react-components-inline) •
16 | * [Design System](https://theguardian.design/2a1e5182b/p/99f3c1-inline) •
17 | * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/source-react-components/src/inline/Inline.tsx) •
18 | * [NPM](https://www.npmjs.com/package/@guardian/source-react-components)
19 | *
20 | * `Inline` components will be laid out one next to the other.
21 | */
22 | export const Inline = ({
23 | cssOverrides,
24 | children,
25 | space,
26 | ...props
27 | }: InlineProps): EmotionJSX.Element => {
28 | return (
29 |
33 | {children}
34 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/inline/styles.ts:
--------------------------------------------------------------------------------
1 | import type { SerializedStyles } from '@emotion/react';
2 | import { css } from '@emotion/react';
3 | import { space } from '@guardian/source-foundations';
4 | import type { InlineSpace } from './types';
5 |
6 | export const inline = css`
7 | display: flex;
8 | flex-wrap: wrap;
9 | `;
10 |
11 | const inlineSpaceStyle = (number: InlineSpace): SerializedStyles => css`
12 | margin-left: -${space[number]}px;
13 | & > * {
14 | margin-left: ${space[number]}px;
15 | margin-bottom: ${space[number]}px;
16 | }
17 | `;
18 |
19 | export const inlineSpace: {
20 | 1: SerializedStyles;
21 | 2: SerializedStyles;
22 | 3: SerializedStyles;
23 | 4: SerializedStyles;
24 | 5: SerializedStyles;
25 | 6: SerializedStyles;
26 | 9: SerializedStyles;
27 | 12: SerializedStyles;
28 | 24: SerializedStyles;
29 | } = {
30 | 1: inlineSpaceStyle(1),
31 | 2: inlineSpaceStyle(2),
32 | 3: inlineSpaceStyle(3),
33 | 4: inlineSpaceStyle(4),
34 | 5: inlineSpaceStyle(5),
35 | 6: inlineSpaceStyle(6),
36 | 9: inlineSpaceStyle(9),
37 | 12: inlineSpaceStyle(12),
38 | 24: inlineSpaceStyle(24),
39 | };
40 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/inline/types.ts:
--------------------------------------------------------------------------------
1 | export type InlineSpace = 1 | 2 | 3 | 4 | 5 | 6 | 9 | 12 | 24;
2 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/label/SupportingText.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
3 | import { visuallyHidden as _visuallyHidden } from '@guardian/source-foundations';
4 | import type { ReactNode } from 'react';
5 | import type { Theme } from '../@types/Theme';
6 | import { supportingText } from './styles';
7 |
8 | const visuallyHidden = css`
9 | ${_visuallyHidden}
10 | `;
11 |
12 | export const SupportingText = ({
13 | hideLabel,
14 | children,
15 | }: {
16 | hideLabel?: boolean;
17 | children: ReactNode;
18 | }): EmotionJSX.Element => {
19 | return (
20 | [
22 | supportingText(theme.label),
23 | hideLabel ? visuallyHidden : '',
24 | ]}
25 | >
26 | {children}
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/label/Text.tsx:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
3 | import { visuallyHidden as _visuallyHidden } from '@guardian/source-foundations';
4 | import type { Theme } from '../@types/Theme';
5 | import { labelText, optionalText } from './styles';
6 | import type { LabelProps } from './types';
7 |
8 | const visuallyHidden = css`
9 | ${_visuallyHidden}
10 | `;
11 |
12 | export const Text = ({
13 | text,
14 | optional,
15 | hideLabel,
16 | }: LabelProps): EmotionJSX.Element => (
17 | [
19 | labelText(theme.label),
20 | hideLabel ? visuallyHidden : '',
21 | ]}
22 | >
23 | {text}{' '}
24 | {optional ? (
25 | optionalText(theme.label)}>Optional
26 | ) : (
27 | ''
28 | )}
29 |
30 | );
31 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/label/styles.ts:
--------------------------------------------------------------------------------
1 | import type { SerializedStyles } from '@emotion/react';
2 | import { css } from '@emotion/react';
3 | import { resets, textSans } from '@guardian/source-foundations';
4 | import { labelThemeDefault } from './theme';
5 |
6 | export const legend = css`
7 | ${resets.legend};
8 | `;
9 |
10 | export const labelText = (
11 | label = labelThemeDefault.label,
12 | ): SerializedStyles => css`
13 | ${textSans.medium({ fontWeight: 'bold' })};
14 | color: ${label.textLabel};
15 | `;
16 |
17 | export const optionalText = (
18 | label = labelThemeDefault.label,
19 | ): SerializedStyles => css`
20 | ${textSans.small()};
21 | color: ${label.textOptional};
22 | font-style: italic;
23 | `;
24 |
25 | export const supportingText = (
26 | label = labelThemeDefault.label,
27 | ): SerializedStyles => css`
28 | ${textSans.small()};
29 | color: ${label.textSupporting};
30 | margin: 2px 0 0;
31 | `;
32 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/label/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 |
3 | export const labelThemeDefault = {
4 | label: {
5 | textLabel: palette.neutral[7],
6 | textOptional: palette.neutral[46],
7 | textSupporting: palette.neutral[46],
8 | textError: palette.error[400],
9 | textSuccess: palette.success[400],
10 | },
11 | };
12 |
13 | export const labelThemeBrand = {
14 | label: {
15 | textLabel: palette.neutral[100],
16 | textOptional: palette.brand[800],
17 | textSupporting: palette.brand[800],
18 | textError: palette.error[500],
19 | textSuccess: palette.success[500],
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/label/types.ts:
--------------------------------------------------------------------------------
1 | import type { SerializedStyles } from '@emotion/react';
2 | import type { HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
3 | import type { Props } from '../@types/Props';
4 |
5 | export interface LabelProps
6 | extends LabelHTMLAttributes,
7 | Props {
8 | /**
9 | * The label text
10 | */
11 | text: string;
12 | /**
13 | * Additional text or component that appears below the label
14 | */
15 | supporting?: string;
16 | /**
17 | * Adds the word "Optional" after the label
18 | */
19 | optional?: boolean;
20 | /**
21 | * Visually hides the label
22 | */
23 | hideLabel?: boolean;
24 | cssOverrides?: SerializedStyles | SerializedStyles[];
25 | children?: ReactNode;
26 | }
27 |
28 | export interface LegendProps extends HTMLAttributes, Props {
29 | /**
30 | * The label text
31 | */
32 | text: string;
33 | /**
34 | * Additional text or component that appears below the label
35 | */
36 | supporting?: string | JSX.Element;
37 | /**
38 | * Adds the word "Optional" after the label
39 | */
40 | optional?: boolean;
41 | /**
42 | * Visually hides the label
43 | */
44 | hideLabel?: boolean;
45 | cssOverrides?: SerializedStyles | SerializedStyles[];
46 | }
47 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/link/shared.tsx:
--------------------------------------------------------------------------------
1 | import type { ReactElement, ReactNode } from 'react';
2 | import { cloneElement, Fragment } from 'react';
3 | import type { IconSide } from './types';
4 |
5 | export const linkContents = ({
6 | children,
7 | iconSvg,
8 | iconSide,
9 | }: {
10 | children: ReactNode;
11 | iconSvg?: ReactElement;
12 | iconSide: IconSide;
13 | }): ReactNode[] => {
14 | // a bit of underlined space; the icon sits on top
15 | const spacer = (
16 |
17 | );
18 | const linkContents = [children];
19 |
20 | if (iconSvg) {
21 | if (iconSide === 'left') {
22 | linkContents.unshift(spacer, cloneElement(iconSvg, { key: 'svg' }));
23 | } else {
24 | linkContents.push(spacer, cloneElement(iconSvg, { key: 'svg' }));
25 | }
26 | }
27 |
28 | return linkContents;
29 | };
30 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/link/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 |
3 | export type LinkTheme = {
4 | textPrimary: string;
5 | textPrimaryHover: string;
6 | textSecondary?: string;
7 | textSecondaryHover?: string;
8 | };
9 |
10 | export const linkThemeDefault: { link: LinkTheme } = {
11 | link: {
12 | textPrimary: palette.brand[500],
13 | textPrimaryHover: palette.brand[500],
14 | textSecondary: palette.neutral[7],
15 | textSecondaryHover: palette.neutral[7],
16 | },
17 | };
18 |
19 | export const linkThemeBrand: { link: LinkTheme } = {
20 | link: {
21 | textPrimary: palette.neutral[100],
22 | textPrimaryHover: palette.neutral[100],
23 | },
24 | };
25 |
26 | export const linkThemeBrandAlt: { link: LinkTheme } = {
27 | link: {
28 | textPrimary: palette.neutral[7],
29 | textPrimaryHover: palette.neutral[7],
30 | },
31 | };
32 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/link/types.ts:
--------------------------------------------------------------------------------
1 | import type { ReactElement, ReactNode } from 'react';
2 | import type { Props } from '../@types/Props';
3 |
4 | export type LinkPriority = 'primary' | 'secondary';
5 |
6 | export type IconSide = 'left' | 'right';
7 |
8 | export interface SharedLinkProps extends Props {
9 | /**
10 | * Informs users of how important a link is
11 | */
12 | priority?: LinkPriority;
13 | /**
14 | * Whether link is subdued (no underline)
15 | *
16 | * @deprecated Subdued styling has been removed and no longer gets applied
17 | */
18 | subdued?: boolean;
19 | /**
20 | * An icon that appears in the link, alongside text
21 | */
22 | icon?: ReactElement;
23 | /**
24 | * The side of the link on which the icon appears
25 | */
26 | iconSide?: IconSide;
27 | children?: ReactNode;
28 | }
29 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/radio/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 | import { labelThemeBrand, labelThemeDefault } from '../label/theme';
3 | import {
4 | userFeedbackThemeBrand,
5 | userFeedbackThemeDefault,
6 | } from '../user-feedback/theme';
7 |
8 | export const radioThemeDefault = {
9 | radio: {
10 | borderHover: palette.focus[400],
11 | border: palette.neutral[60],
12 | backgroundChecked: palette.focus[400],
13 | textLabel: palette.neutral[7],
14 | textLabelSupporting: palette.neutral[46],
15 | borderError: palette.error[400],
16 | },
17 | ...labelThemeDefault,
18 | ...userFeedbackThemeDefault,
19 | };
20 |
21 | export const radioThemeBrand = {
22 | radio: {
23 | borderHover: palette.neutral[100],
24 | border: palette.brand[800],
25 | backgroundChecked: palette.neutral[100],
26 | textLabel: palette.neutral[100],
27 | textLabelSupporting: palette.brand[800],
28 | borderError: palette.error[500],
29 | },
30 | ...labelThemeBrand,
31 | ...userFeedbackThemeBrand,
32 | };
33 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/select/Option.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import type { OptionHTMLAttributes } from 'react';
3 | import type { Props } from '../@types/Props';
4 |
5 | export interface OptionProps
6 | extends OptionHTMLAttributes,
7 | Props {
8 | children: string;
9 | }
10 |
11 | export const Option = ({
12 | cssOverrides,
13 | children,
14 | ...props
15 | }: OptionProps): EmotionJSX.Element => {
16 | return (
17 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/select/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 | import { userFeedbackThemeDefault } from '../user-feedback/theme';
3 |
4 | export const selectThemeDefault = {
5 | select: {
6 | textUserInput: palette.neutral[7],
7 | textLabel: palette.neutral[7],
8 | textLabelOptional: palette.neutral[46],
9 | textLabelSupporting: palette.neutral[46],
10 | textError: palette.neutral[7],
11 | textSuccess: palette.success[400],
12 | backgroundInput: palette.neutral[100],
13 | border: palette.neutral[46],
14 | borderActive: palette.focus[400],
15 | borderError: palette.error[400],
16 | borderSuccess: palette.success[400],
17 | },
18 | ...userFeedbackThemeDefault,
19 | };
20 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/stack/Stack.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import type { HTMLAttributes } from 'react';
3 | import type { Props } from '../@types/Props';
4 | import { stack, stackSpace } from './styles';
5 |
6 | export type StackSpace = 1 | 2 | 3 | 4 | 5 | 6 | 9 | 12 | 24;
7 |
8 | export interface StackProps extends HTMLAttributes, Props {
9 | /**
10 | * [Units of space](https://www.theguardian.design/2a1e5182b/p/449bd5-space) between inline items (one unit is 4px).
11 | */
12 | space?: StackSpace;
13 | }
14 |
15 | /**
16 | * [Storybook](https://guardian.github.io/source/?path=/docs/packages-source-react-components-stack) •
17 | * [Design System](https://theguardian.design/2a1e5182b/p/827581-stack) •
18 | * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/source-react-components/src/stack/Stack.tsx) •
19 | * [NPM](https://www.npmjs.com/package/@guardian/source-react-components)
20 | *
21 | * `Stack` components will be stacked one on top of the other.
22 | */
23 | export const Stack = ({
24 | cssOverrides,
25 | children,
26 | space,
27 | ...props
28 | }: StackProps): EmotionJSX.Element => {
29 | return (
30 |
31 | {children}
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/stack/styles.ts:
--------------------------------------------------------------------------------
1 | import type { SerializedStyles } from '@emotion/react';
2 | import { css } from '@emotion/react';
3 | import { space } from '@guardian/source-foundations';
4 | import type { StackSpace } from './Stack';
5 |
6 | export const stack = css`
7 | & > * {
8 | width: 100%;
9 | }
10 | `;
11 |
12 | const stackSpaceStyle = (number: StackSpace): SerializedStyles => css`
13 | & > * + * {
14 | margin-top: ${space[number]}px;
15 | }
16 | `;
17 |
18 | export const stackSpace: {
19 | 1: SerializedStyles;
20 | 2: SerializedStyles;
21 | 3: SerializedStyles;
22 | 4: SerializedStyles;
23 | 5: SerializedStyles;
24 | 6: SerializedStyles;
25 | 9: SerializedStyles;
26 | 12: SerializedStyles;
27 | 24: SerializedStyles;
28 | } = {
29 | 1: stackSpaceStyle(1),
30 | 2: stackSpaceStyle(2),
31 | 3: stackSpaceStyle(3),
32 | 4: stackSpaceStyle(4),
33 | 5: stackSpaceStyle(5),
34 | 6: stackSpaceStyle(6),
35 | 9: stackSpaceStyle(9),
36 | 12: stackSpaceStyle(12),
37 | 24: stackSpaceStyle(24),
38 | };
39 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/text-input/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 | import { userFeedbackThemeDefault } from '../user-feedback/theme';
3 |
4 | export const textInputThemeDefault = {
5 | textInput: {
6 | textUserInput: palette.neutral[7],
7 | textLabel: palette.neutral[7],
8 | textLabelOptional: palette.neutral[46],
9 | textLabelSupporting: palette.neutral[46],
10 | textError: palette.neutral[7],
11 | textSuccess: palette.success[400],
12 | backgroundInput: palette.neutral[100],
13 | border: palette.neutral[46],
14 | borderActive: palette.focus[400],
15 | borderError: palette.error[400],
16 | borderSuccess: palette.success[400],
17 | },
18 | ...userFeedbackThemeDefault,
19 | };
20 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/tiles/types.ts:
--------------------------------------------------------------------------------
1 | export type Columns = 2 | 3 | 4 | 5;
2 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/user-feedback/InlineError.tsx:
--------------------------------------------------------------------------------
1 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
2 | import { SvgAlertTriangle } from '../../vendor/icons/SvgAlertTriangle';
3 | import type { Theme } from '../@types/Theme';
4 | import { inlineError } from './styles';
5 | import type { UserFeedbackProps } from './types';
6 |
7 | /**
8 | * [Storybook](https://guardian.github.io/source/?path=/docs/packages-source-react-components-inlineerror--playground) •
9 | * [Design System](https://theguardian.design/2a1e5182b/p/108ed3-user-feedback/b/3803b4) •
10 | * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/source-react-components/src/user-feedback/InlineError.tsx) •
11 | * [NPM](https://www.npmjs.com/package/@guardian/source-react-components-feedback)
12 | *
13 | * Used to inform the user when a validation has failed or user error has occurred. These messages indicate what went wrong and how to fix it.
14 | *
15 | * The following themes are supported: `default`, `brand`
16 | */
17 | export const InlineError = ({
18 | children,
19 | cssOverrides,
20 | ...props
21 | }: UserFeedbackProps): EmotionJSX.Element => (
22 | [inlineError(theme.userFeedback), cssOverrides]}
24 | role="alert"
25 | {...props}
26 | >
27 |
28 | {children}
29 |
30 | );
31 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/user-feedback/InlineSuccess.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Story } from '@storybook/react';
2 | import { InlineSuccess } from './InlineSuccess';
3 | import { userFeedbackThemeBrand } from './theme';
4 | import type { UserFeedbackProps } from './types';
5 |
6 | export default {
7 | title: 'Packages/source-react-components/InlineSuccess',
8 | component: InlineSuccess,
9 | };
10 |
11 | const Template: Story = (args: UserFeedbackProps) => (
12 | Your voucher code is valid
13 | );
14 |
15 | export const InlineSuccessDefaultTheme = Template.bind({});
16 |
17 | // *****************************************************************************
18 |
19 | export const InlineSuccessBrandTheme = Template.bind({});
20 | InlineSuccessBrandTheme.parameters = {
21 | backgrounds: {
22 | default: 'brandBackground.primary',
23 | },
24 | theme: userFeedbackThemeBrand,
25 | };
26 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/user-feedback/styles.ts:
--------------------------------------------------------------------------------
1 | import type { SerializedStyles } from '@emotion/react';
2 | import { css } from '@emotion/react';
3 | import { remHeight, remWidth, textSans } from '@guardian/source-foundations';
4 | import { userFeedbackThemeDefault } from './theme';
5 |
6 | const inlineMessage = css`
7 | display: flex;
8 | align-items: flex-start;
9 | ${textSans.medium()};
10 |
11 | svg {
12 | fill: currentColor;
13 | /* we don't want the SVG to change size depending on available space */
14 | flex: none;
15 | width: ${remWidth.iconMedium}rem;
16 | height: ${remHeight.iconMedium}rem;
17 |
18 | /*
19 | a visual kick to vertically align the icon with the top row of text
20 | and horizontally pull it to the beginning of the row
21 | */
22 | transform: translate(-4px, -3px);
23 | }
24 | `;
25 |
26 | export const inlineError = (
27 | userFeedback = userFeedbackThemeDefault.userFeedback,
28 | ): SerializedStyles => css`
29 | ${inlineMessage};
30 | color: ${userFeedback.textError};
31 | `;
32 |
33 | export const inlineSuccess = (
34 | userFeedback = userFeedbackThemeDefault.userFeedback,
35 | ): SerializedStyles => css`
36 | ${inlineMessage};
37 | color: ${userFeedback.textSuccess};
38 | `;
39 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/user-feedback/theme.ts:
--------------------------------------------------------------------------------
1 | import { palette } from '@guardian/source-foundations';
2 |
3 | export const userFeedbackThemeDefault = {
4 | userFeedback: {
5 | textSuccess: palette.success[400],
6 | textError: palette.error[400],
7 | },
8 | };
9 |
10 | export const userFeedbackThemeBrand = {
11 | userFeedback: {
12 | textSuccess: palette.success[500],
13 | textError: palette.error[500],
14 | },
15 | };
16 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/src/user-feedback/types.ts:
--------------------------------------------------------------------------------
1 | import type { HTMLAttributes, ReactNode } from 'react';
2 | import type { Props } from '../@types/Props';
3 |
4 | export interface UserFeedbackProps
5 | extends Props,
6 | HTMLAttributes {
7 | children: ReactNode;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/README.md:
--------------------------------------------------------------------------------
1 | # Icons
2 |
3 | **The contents of this directory are created automatically. Any edits will be
4 | overwritten sooner or later.**
5 |
6 | The SVGs for these icons are automatically pulled in from the [source design file in
7 | Figma](https://www.figma.com/file/Ai7AELHC6KCz38qKZkvuHo/%E2%97%90-Icons?node-id=55%3A2)
8 | using the create-icons script via the Figma API:
9 |
10 | ```sh
11 | yarn workspace @guardian/source-react-components create-icons
12 | ```
13 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowContract.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowContract = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Collapse
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowDownStraight.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowDownStraight = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Arrow down
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowExpand.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowExpand = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Expand
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowLeftStraight.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowLeftStraight = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Arrow left
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowOutdent.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowOutdent = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Up left arrow
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowPopOut.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowPopOut = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Pop out
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowRightStraight.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowRightStraight = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Arrow right
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowUpAndDownSmall.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowUpAndDownSmall = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Up and down arrow
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowUpStraight.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowUpStraight = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Arrow up
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgArrowUpStraightSmall.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgArrowUpStraightSmall = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Arrow up
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgAsterisk.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgAsterisk = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Asterisk
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgAudioMute.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgAudioMute = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Sound off
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgBookMark.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgBookMark = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Bookmark
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgCamera.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgCamera = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Camera
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgCheckmark.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgCheckmark = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Checkmark
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgChevronDownDouble.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgChevronDownDouble = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Double chevron down
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgChevronDownSingle.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgChevronDownSingle = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Expand to show more
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgChevronDownSingleXsmall.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgChevronDownSingleXsmall = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Expand to show more
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgChevronLeftDouble.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgChevronLeftDouble = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Double chevron left
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgChevronLeftSingle.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgChevronLeftSingle = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Chevron left
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgChevronRightDouble.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgChevronRightDouble = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Double chevron right
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgChevronRightSingle.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgChevronRightSingle = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Chevron right
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgChevronUpDouble.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgChevronUpDouble = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Double chevron up
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgChevronUpSingle.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgChevronUpSingle = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Collapse to show less
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgClock.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgClock = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Clock
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgClockBaselineSmall.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgClockBaselineSmall = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Clock
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgCross.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgCross = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Close
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgCrosswords.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgCrosswords = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Crosswords
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgDocument.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgDocument = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Document
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgDownload.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgDownload = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Download
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgDragHandle.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgDragHandle = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Drag
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgEnvelope.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
20 | );
21 |
22 | export const SvgEnvelope = ({
23 | size,
24 | isAnnouncedByScreenReader = false,
25 | }: IconProps): EmotionJSX.Element => (
26 | <>
27 |
28 | {isAnnouncedByScreenReader ? (
29 |
34 | Email
35 |
36 | ) : (
37 | ''
38 | )}
39 |
40 | );
41 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgExternal.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgExternal = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | External link
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgFacebook.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgFacebook = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Facebook logo
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgFilter.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgFilter = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Filter
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgGift.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
19 | );
20 |
21 | export const SvgGift = ({
22 | size,
23 | isAnnouncedByScreenReader = false,
24 | }: IconProps): EmotionJSX.Element => (
25 | <>
26 |
27 | {isAnnouncedByScreenReader ? (
28 |
33 | Gift
34 |
35 | ) : (
36 | ''
37 | )}
38 |
39 | );
40 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgGps.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgGps = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Location
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgHouse.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgHouse = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Home
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgHousePlus.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgHousePlus = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Add to home
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgIndent.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgIndent = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Indent
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgMediaControlsBack.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgMediaControlsBack = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Rewind
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgMediaControlsForward.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgMediaControlsForward = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Fast forward
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgMediaControlsPause.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgMediaControlsPause = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Pause
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgMediaControlsPlay.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgMediaControlsPlay = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Play
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgMediaControlsStop.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgMediaControlsStop = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Stop
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgMenu.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgMenu = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Menu
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgMinus.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
19 | );
20 |
21 | export const SvgMinus = ({
22 | size,
23 | isAnnouncedByScreenReader = false,
24 | }: IconProps): EmotionJSX.Element => (
25 | <>
26 |
27 | {isAnnouncedByScreenReader ? (
28 |
33 | Minus sign
34 |
35 | ) : (
36 | ''
37 | )}
38 |
39 | );
40 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgPinned.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
19 | );
20 |
21 | export const SvgPinned = ({
22 | size,
23 | isAnnouncedByScreenReader = false,
24 | }: IconProps): EmotionJSX.Element => (
25 | <>
26 |
27 | {isAnnouncedByScreenReader ? (
28 |
33 | Pinned
34 |
35 | ) : (
36 | ''
37 | )}
38 |
39 | );
40 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgPlus.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgPlus = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Plus sign
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgQuote.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgQuote = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Quote
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgSpeechBubble.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgSpeechBubble = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Comments
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgSpeechBubblePlus.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgSpeechBubblePlus = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Add comment
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgStar.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgStar = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Star
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgTextLarge.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgTextLarge = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Large text
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgTextSmall.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgTextSmall = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Small text
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgTickRound.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgTickRound = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Ticked
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgUpload.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgUpload = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Upload
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/packages/@guardian/source-react-components/vendor/icons/SvgVideo.tsx:
--------------------------------------------------------------------------------
1 | // DO NOT EDIT
2 | // this file is auto-generated by packages/@guardian/source-react-components/scripts/create-icons/index.ts
3 | import { css } from '@emotion/react';
4 | import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
5 | import { iconSize, visuallyHidden } from '@guardian/source-foundations';
6 | import type { IconProps } from '../../src/@types/Icons';
7 |
8 | const Svg = ({ size }: IconProps): EmotionJSX.Element => (
9 |
23 | );
24 |
25 | export const SvgVideo = ({
26 | size,
27 | isAnnouncedByScreenReader = false,
28 | }: IconProps): EmotionJSX.Element => (
29 | <>
30 |
31 | {isAnnouncedByScreenReader ? (
32 |
37 | Video
38 |
39 | ) : (
40 | ''
41 | )}
42 |
43 | );
44 |
--------------------------------------------------------------------------------
/scripts/README.md:
--------------------------------------------------------------------------------
1 | # Scripts
2 |
3 | This directory provides a series of scripts that are useful to the maintainers of Source.
4 |
5 | ## Running
6 |
7 | Scripts that are intended to be run directly all contain aliases in at least one `package.json`.
8 |
9 | For example, the `build-src.ts` script can be run using `yarn build:src` from the root directory.
10 |
11 | Some of the scripts in nested directories may need to be run via the workspace command (`yarn workspace $WORSPACE $COMMAND`). These cases will be documented in the README within that directory.
12 |
13 | Some scripts are not intended to be run directly, and are instead consumed by other scripts within this directory. If you do have a need to run them directly, you can do so using `ts-node`. For example, `yarn ts-node ./scripts/paths`. As these scripts are designed to be consumed by others, this is unlikely to yield any interesting behaviour but may be useful for debugging if you are developing on one or more of these files.
14 |
--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | processors: ['stylelint-processor-styled-components'],
3 | extends: [
4 | 'stylelint-config-recommended',
5 | 'stylelint-config-styled-components',
6 | ],
7 | rules: {
8 | 'no-descending-specificity': null,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@guardian/tsconfig/tsconfig.json",
3 | "compilerOptions": {
4 | "baseUrl": ".",
5 | "declaration": true,
6 | "declarationMap": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "jsx": "react-jsx",
9 | "jsxImportSource": "@emotion/react",
10 | "noEmit": true,
11 | "paths": {
12 | "@guardian/source-foundations": [
13 | "packages/@guardian/source-foundations/src/index"
14 | ],
15 | "@guardian/source-react-components": [
16 | "packages/@guardian/source-react-components/src/index"
17 | ],
18 | "@guardian/source-react-components-development-kitchen": [
19 | "packages/@guardian/source-react-components-development-kitchen/src/index"
20 | ],
21 | "@guardian/eslint-plugin-source-foundations": [
22 | "packages/@guardian/eslint-plugin-source-foundations/src/index"
23 | ],
24 | "@guardian/eslint-plugin-source-react-components": [
25 | "packages/@guardian/eslint-plugin-source-react-components/src/index"
26 | ]
27 | },
28 | "sourceMap": true
29 | },
30 | "ts-node": {
31 | "compilerOptions": {
32 | "module": "CommonJS"
33 | }
34 | },
35 | "include": ["packages", "lib", "scripts"],
36 | "exclude": ["node_modules", "dist"]
37 | }
38 |
--------------------------------------------------------------------------------