Merge branch 'main' into ob/error-success-active-state

guardian · Nov 17, 2021 · eb1929f · eb1929f
2 parents 1ac6aef + 8aa7235
commit eb1929f
Show file tree

Hide file tree

Showing 164 changed files with 509 additions and 368 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -1,9 +1,6 @@
 name: Chromatic
 on:
-  workflow_run:
-    workflows: ['Dependabot PR Check']
-    types:
-      - completed
+  workflow_dispatch:
   push:
     branches-ignore:
       - 'gh-pages'

diff --git a/.github/workflows/dependabot-pr.yml b/.github/workflows/dependabot-pr.yml
diff --git a/packages/@guardian/source-foundations/package.json b/packages/@guardian/source-foundations/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@guardian/source-foundations",
-  "version": "4.0.0-rc.1",
+  "version": "4.0.0-rc.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/guardian/source.git"
@@ -17,6 +17,9 @@
     "build": "rollup -c",
     "clean": "rm -rf dist"
   },
+  "dependencies": {
+    "mini-svg-data-uri": "^1.3.3"
+  },
   "devDependencies": {
     "@guardian/eslint-config": "^0.7.0",
     "@guardian/eslint-config-typescript": "^0.7.0",

diff --git a/packages/@guardian/source-foundations/src/index.ts b/packages/@guardian/source-foundations/src/index.ts
@@ -65,9 +65,9 @@ export {
 	remHeadlineSizes,
 	remBodySizes,
 	remTextSansSizes,
-	fonts,
-	fontWeights,
-	lineHeights,
+	fontMapping as fonts,
+	fontWeightMapping as fontWeights,
+	lineHeightMapping as lineHeights,
 } from './typography';
 export {
 	body as bodyObjectStyles,
@@ -100,3 +100,4 @@ export { appearance } from './utils/supports-queries';
 export { FocusStyleManager } from './utils/focus-style-manager';
 export { pxToRem, rootPixelFontSize } from './utils/px-to-rem';
 export { resets } from './utils/resets';
+export { svgBackgroundImage } from './utils/svg-background-image';
diff --git a/packages/@guardian/source-foundations/src/typography/index.ts b/packages/@guardian/source-foundations/src/typography/index.ts
@@ -158,9 +158,9 @@ export {
 	remHeadlineSizes,
 	remBodySizes,
 	remTextSansSizes,
-	fontMapping as fonts,
-	fontWeightMapping as fontWeights,
-	lineHeightMapping as lineHeights,
+	fontMapping,
+	fontWeightMapping,
+	lineHeightMapping,
 };
 
 export type {

diff --git a/packages/@guardian/source-foundations/src/typography/typography.test.ts b/packages/@guardian/source-foundations/src/typography/typography.test.ts
@@ -1,9 +1,9 @@
 import {
-	fonts,
-	fontWeights,
+	fontMapping as fonts,
+	fontWeightMapping as fontWeights,
 	headline,
 	headlineSizes,
-	lineHeights,
+	lineHeightMapping as lineHeights,
 	remHeadlineSizes,
 } from '.';
 

diff --git a/...uardian/src-helpers/svgBackgroundImage.ts → ...dations/src/utils/svg-background-image.ts b/...uardian/src-helpers/svgBackgroundImage.ts → ...dations/src/utils/svg-background-image.ts
diff --git a/...urce-react-components-development-kitchen/src/components/summary/ErrorSummary.stories.tsx b/...urce-react-components-development-kitchen/src/components/summary/ErrorSummary.stories.tsx
@@ -35,6 +35,18 @@ asChromaticStory(ErrorOnly);
 
 // *****************************************************************************
 
+export const ErrorOnlyAsReactNode = Template.bind({});
+ErrorOnlyAsReactNode.args = {
+	message: (
+		<>
+			This is the error message as a <s>ReactNode</s>
+		</>
+	),
+};
+asChromaticStory(ErrorOnlyAsReactNode);
+
+// *****************************************************************************
+
 export const WithContext = Template.bind({});
 WithContext.args = {
 	message: 'Here is an error',

diff --git a/...ource-react-components-development-kitchen/src/components/summary/InfoSummary.stories.tsx b/...ource-react-components-development-kitchen/src/components/summary/InfoSummary.stories.tsx
@@ -34,6 +34,18 @@ asChromaticStory(InfoOnly);
 
 // *****************************************************************************
 
+export const InfoOnlyAsReactNode = Template.bind({});
+InfoOnlyAsReactNode.args = {
+	message: (
+		<>
+			This is the info message as a <s>ReactNode</s>
+		</>
+	),
+};
+asChromaticStory(InfoOnlyAsReactNode);
+
+// *****************************************************************************
+
 export const WithContext = Template.bind({});
 WithContext.args = {
 	message: 'It was insightful',

diff --git a/...ce-react-components-development-kitchen/src/components/summary/SuccessSummary.stories.tsx b/...ce-react-components-development-kitchen/src/components/summary/SuccessSummary.stories.tsx
@@ -32,6 +32,16 @@ SuccessOnly.args = {
 };
 asChromaticStory(SuccessOnly);
 
+export const SuccessOnlyAsReactNode = Template.bind({});
+SuccessOnlyAsReactNode.args = {
+	message: (
+		<>
+			This is the success message as a <s>ReactNode</s>
+		</>
+	),
+};
+asChromaticStory(SuccessOnlyAsReactNode);
+
 // *****************************************************************************
 
 export const WithContext = Template.bind({});

diff --git a/...es/@guardian/source-react-components-development-kitchen/src/components/summary/index.tsx b/...es/@guardian/source-react-components-development-kitchen/src/components/summary/index.tsx
@@ -5,7 +5,7 @@ export interface SummaryProps extends Props {
 	 * The main message of the component
 	 * e.g. the main error message, success message etc.
 	 */
-	message: string;
+	message: React.ReactNode;
 	/**
 	 * Optional context information about the message
 	 */

diff --git a/packages/@guardian/src-accordion/Accordion.tsx b/packages/@guardian/src-accordion/Accordion.tsx
@@ -15,7 +15,7 @@ export interface AccordionProps extends Props {
 }
 
 /**
- * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-accordion-accordion--demo) •
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-accordion-accordion--playground) •
  * [Design System](https://theguardian.design/2a1e5182b/p/38c5aa-accordion/b/92b71e) •
  * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/src-accordion) •
  * [NPM](https://www.npmjs.com/package/@guardian/src-accordion)

diff --git a/packages/@guardian/src-brand/SvgGuardianLiveLogo.tsx b/packages/@guardian/src-brand/SvgGuardianLiveLogo.tsx
@@ -14,7 +14,7 @@ export type SvgGuardianLiveLogoProps = {
 };
 
 /**
- * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-brand-svgguardianlivelogo--story) •
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-brand-svgguardianlivelogo--playground) •
  * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/05bdd0) •
  * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/src-brand) •
  * [NPM](https://www.npmjs.com/package/@guardian/src-brand)

diff --git a/packages/@guardian/src-brand/SvgGuardianLogo.tsx b/packages/@guardian/src-brand/SvgGuardianLogo.tsx
@@ -14,7 +14,7 @@ export type SvgGuardianLogoProps = {
 };
 
 /**
- * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-brand-svgguardianlogo--story) •
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-brand-svgguardianlogo--playground) •
  * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/184eb9) •
  * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/src-brand) •
  * [NPM](https://www.npmjs.com/package/@guardian/src-brand)

diff --git a/packages/@guardian/src-brand/SvgRoundelBrand.tsx b/packages/@guardian/src-brand/SvgRoundelBrand.tsx
@@ -9,6 +9,12 @@ export type SvgRoundelBrandProps = {
 	width?: number;
 };
 
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-brand-svgroundelbrand--playground) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/37168b) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/src-brand) •
+ * [NPM](https://www.npmjs.com/package/@guardian/src-brand)
+ */
 export const SvgRoundelBrand = (args: SvgRoundelBrandProps) => {
 	return (
 		<SvgRoundel textColor="white" backgroundColor={brand[400]} {...args} />

diff --git a/packages/@guardian/src-brand/SvgRoundelBrandInverse.tsx b/packages/@guardian/src-brand/SvgRoundelBrandInverse.tsx
@@ -9,6 +9,12 @@ export type SvgRoundelBrandInverseProps = {
 	width?: number;
 };
 
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-brand-svgroundelbrandinverse--playground) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/37168b) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/src-brand) •
+ * [NPM](https://www.npmjs.com/package/@guardian/src-brand)
+ */
 export const SvgRoundelBrandInverse = (args: SvgRoundelBrandInverseProps) => {
 	return (
 		<SvgRoundel textColor={brand[400]} backgroundColor="white" {...args} />

diff --git a/packages/@guardian/src-brand/SvgRoundelDefault.tsx b/packages/@guardian/src-brand/SvgRoundelDefault.tsx
@@ -9,6 +9,12 @@ export type SvgRoundelDefaultProps = {
 	width?: number;
 };
 
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-brand-svgroundeldefault--playground) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/37168b) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/src-brand) •
+ * [NPM](https://www.npmjs.com/package/@guardian/src-brand)
+ */
 export const SvgRoundelDefault = (args: SvgRoundelDefaultProps) => {
 	return (
 		<SvgRoundel textColor="white" backgroundColor={neutral[7]} {...args} />

diff --git a/packages/@guardian/src-brand/SvgRoundelInverse.tsx b/packages/@guardian/src-brand/SvgRoundelInverse.tsx
@@ -9,6 +9,12 @@ export type SvgRoundelInverseProps = {
 	width?: number;
 };
 
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-brand-svgroundelinverse--playground) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/8909e0-assets/t/37168b) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/@guardian/src-brand) •
+ * [NPM](https://www.npmjs.com/package/@guardian/src-brand)
+ */
 export const SvgRoundelInverse = (args: SvgRoundelInverseProps) => {
 	return (
 		<SvgRoundel textColor={neutral[7]} backgroundColor="white" {...args} />

diff --git a/packages/@guardian/src-button/Button.tsx b/packages/@guardian/src-button/Button.tsx
@@ -10,7 +10,7 @@ export interface ButtonProps
 /**
  * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-button-button--playground) •
  * [Design System](https://theguardian.design/2a1e5182b/p/435225-button) •
- * [GitHub](https://github.com/guardian/source/tree/main/src/core/components/button) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/%40guardian/src-button) •
  * [NPM](https://www.npmjs.com/package/@guardian/src-button)
  *
  * Buttons enable users to make choices or perform actions.

diff --git a/packages/@guardian/src-button/LinkButton.tsx b/packages/@guardian/src-button/LinkButton.tsx
@@ -8,9 +8,9 @@ export interface LinkButtonProps
 		AnchorHTMLAttributes<HTMLAnchorElement> {}
 
 /**
- * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-button-button--playground) •
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-button-linkbutton--playground) •
  * [Design System](https://theguardian.design/2a1e5182b/p/435225-button) •
- * [GitHub](https://github.com/guardian/source/tree/main/src/core/components/button) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/%40guardian/src-button) •
  * [NPM](https://www.npmjs.com/package/@guardian/src-button)
  *
  * Buttons enable users to make choices or perform actions.

diff --git a/packages/@guardian/src-checkbox/Checkbox.tsx b/packages/@guardian/src-checkbox/Checkbox.tsx
@@ -53,7 +53,7 @@ export interface CheckboxProps
 /**
  * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-checkbox-checkbox--playground) •
  * [Design System](https://theguardian.design/2a1e5182b/p/466fad-checkbox/b/33fc2f) •
- * [GitHub](https://github.com/guardian/source/tree/main/src/core/components/checkbox) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/%40guardian/src-checkbox) •
  * [NPM](https://www.npmjs.com/package/@guardian/src-checkbox)
  *
  * Checkboxes allow users to select multiple options from a list of individual

diff --git a/packages/@guardian/src-checkbox/CheckboxGroup.tsx b/packages/@guardian/src-checkbox/CheckboxGroup.tsx
@@ -34,6 +34,17 @@ export interface CheckboxGroupProps extends Props {
 	children: JSX.Element | JSX.Element[];
 }
 
+/**
+ * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-checkbox-checkboxgroup--playground) •
+ * [Design System](https://theguardian.design/2a1e5182b/p/466fad-checkbox/b/33fc2f) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/%40guardian/src-checkbox) •
+ * [NPM](https://www.npmjs.com/package/@guardian/src-checkbox)
+ *
+ * Checkboxes allow users to select multiple options from a list of individual
+ * items or to indicate agreement of terms and  services.
+ *
+ * The following themes are supported: `default`, `brand`
+ */
 export const CheckboxGroup = ({
 	id,
 	name,

diff --git a/packages/@guardian/src-choice-card/ChoiceCard.tsx b/packages/@guardian/src-choice-card/ChoiceCard.tsx
@@ -48,7 +48,7 @@ export interface ChoiceCardProps
 /**
  * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-choice-card-choicecardgroup) •
  * [Design System](https://theguardian.design/2a1e5182b/p/65ffe9-choice-card) •
- * [GitHub](https://github.com/guardian/source/tree/main/src/core/components/choice-card) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/%40guardian/src-choice-card) •
  * [NPM](https://www.npmjs.com/package/@guardian/src-choice-card)
  *
  * Choice cards are a tactile, single or multi-select mechanism used to group related options.

diff --git a/packages/@guardian/src-choice-card/ChoiceCardGroup.tsx b/packages/@guardian/src-choice-card/ChoiceCardGroup.tsx
@@ -50,7 +50,7 @@ export interface ChoiceCardGroupProps
 /**
  * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-choice-card-choicecardgroup) •
  * [Design System](https://theguardian.design/2a1e5182b/p/65ffe9-choice-card) •
- * [GitHub](https://github.com/guardian/source/tree/main/src/core/components/choice-card) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/%40guardian/src-choice-card) •
  * [NPM](https://www.npmjs.com/package/@guardian/src-choice-card)
  *
  * The following themes are supported: `choiceCardDefault`.

diff --git a/packages/@guardian/src-footer/Footer.tsx b/packages/@guardian/src-footer/Footer.tsx
@@ -20,8 +20,7 @@ export interface FooterProps extends HTMLAttributes<HTMLElement>, Props {
 
 /**
  * [Storybook](https://guardian.github.io/source/?path=/docs/source-src-footer-footer--playground) •
- * [Design System](https://theguardian.design/2a1e5182b/p/12ce79--footer/b/09ee0e) •
- * [GitHub](https://github.com/guardian/source/tree/main/src/core/components/footer) •
+ * [GitHub](https://github.com/guardian/source/tree/main/packages/%40guardian/src-footer) •
  * [NPM](https://www.npmjs.com/package/@guardian/src-footer)
  *
  * 🛠 This component is [in development](https://www.theguardian.design/2a1e5182b/p/99cfad-component-status/t/06d689).

diff --git a/packages/@guardian/src-helpers/index.ts b/packages/@guardian/src-helpers/index.ts
@@ -1,3 +1,3 @@
 export { storybookBackgrounds } from './storybook-bg';
 export type { ThemeName, Props } from './types';
-export { svgBackgroundImage } from './svgBackgroundImage';
+export { svgBackgroundImage } from './svg-background-image';
diff --git a/packages/@guardian/src-helpers/svg-background-image.ts b/packages/@guardian/src-helpers/svg-background-image.ts
@@ -0,0 +1 @@
+../source-foundations/src/utils/svg-background-image.ts
diff --git a/packages/@guardian/src-icons/svgs/alert-phone.svg b/packages/@guardian/src-icons/svgs/alert-phone.svg
diff --git a/packages/@guardian/src-icons/svgs/alert-round.svg b/packages/@guardian/src-icons/svgs/alert-round.svg
diff --git a/packages/@guardian/src-icons/svgs/alert-triangle.svg b/packages/@guardian/src-icons/svgs/alert-triangle.svg
diff --git a/packages/@guardian/src-icons/svgs/apple-brand.svg b/packages/@guardian/src-icons/svgs/apple-brand.svg
diff --git a/packages/@guardian/src-icons/svgs/arrow-contract.svg b/packages/@guardian/src-icons/svgs/arrow-contract.svg
diff --git a/packages/@guardian/src-icons/svgs/arrow-down-straight.svg b/packages/@guardian/src-icons/svgs/arrow-down-straight.svg
diff --git a/packages/@guardian/src-icons/svgs/arrow-expand.svg b/packages/@guardian/src-icons/svgs/arrow-expand.svg