From 17a1ce027db7eff3d906900624c6a04917fbdd05 Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Mon, 3 Mar 2025 12:39:35 +0000 Subject: [PATCH 1/2] Add new icons, update and remove existing --- .../__generated__/icons/SvgAddToBasket.tsx | 48 +++++++++++ .../__generated__/icons/SvgAllRecipes.tsx | 51 ++++++++++++ .../icons/SvgBookmarkRoundFilled.tsx | 42 ++++++++++ .../icons/SvgBookmarkRoundOutlined.tsx | 44 ++++++++++ .../__generated__/icons/SvgChef.tsx | 44 ++++++++++ .../icons/SvgChevronDownSingleSmall.tsx | 2 +- .../icons/SvgChevronLeftDouble.tsx | 2 +- .../icons/SvgChevronLeftSingle.tsx | 2 +- .../icons/SvgChevronLeftSingleSmall.tsx | 42 ++++++++++ .../icons/SvgChevronRightDouble.tsx | 2 +- .../icons/SvgChevronRightSingle.tsx | 2 +- .../icons/SvgChevronRightSingleSmall.tsx | 42 ++++++++++ .../icons/SvgChevronUpAndDownSmall.tsx | 8 +- .../icons/SvgChevronUpSingleSmall.tsx | 2 +- .../{SvgClock.tsx => SvgClockFilled.tsx} | 2 +- ...AlertTriangle.tsx => SvgClockOutlined.tsx} | 6 +- .../icons/SvgCrossRoundOutlined.tsx | 8 +- .../__generated__/icons/SvgCuisines.tsx | 48 +++++++++++ .../__generated__/icons/SvgDiets.tsx | 44 ++++++++++ .../icons/SvgDirectDebitWide.tsx | 44 ---------- .../__generated__/icons/SvgDiscover.tsx | 44 ++++++++++ .../__generated__/icons/SvgEdit.tsx | 2 +- .../__generated__/icons/SvgFolder.tsx | 44 ++++++++++ .../__generated__/icons/SvgFolderFilled.tsx | 44 ++++++++++ .../icons/SvgHeadphonesFilled.tsx | 42 ++++++++++ .../icons/SvgHeadphonesOutlined.tsx | 42 ++++++++++ .../icons/SvgHeadphonesRoundFilled.tsx | 42 ++++++++++ .../icons/SvgHeadphonesRoundOutlined.tsx | 44 ++++++++++ .../__generated__/icons/SvgList.tsx | 44 ++++++++++ .../__generated__/icons/SvgMealTypes.tsx | 50 +++++++++++ .../icons/SvgMediaControlsPlay.tsx | 24 ++++-- ...Newsletter.tsx => SvgNewsletterFilled.tsx} | 2 +- .../icons/SvgNewsletterOutlined.tsx | 44 ++++++++++ .../icons/SvgNewspaperArchive.tsx | 44 ++++++++++ .../__generated__/icons/SvgPadlockLocked.tsx | 44 ++++++++++ .../icons/SvgPadlockUnlocked.tsx | 44 ++++++++++ .../icons/SvgShareRoundFilled.tsx | 42 ++++++++++ .../icons/SvgShareRoundOutline.tsx | 44 ++++++++++ .../__generated__/icons/SvgShoppingBasket.tsx | 44 ++++++++++ .../__generated__/icons/SvgShoppingList.tsx | 44 ++++++++++ .../__generated__/icons/SvgSort.tsx | 44 ++++++++++ .../icons/SvgTextSizeRoundFilled.tsx | 44 ++++++++++ .../icons/SvgTextSizeRoundOutline.tsx | 44 ++++++++++ .../SvgTransparentArrowLeftStraightRound.tsx | 42 ++++++++++ .../react-components/deprecated-exports.ts | 5 -- .../src/react-components/icons/Icons.mdx | 11 --- .../react-components/icons/Icons.stories.tsx | 82 +++++++++++++++---- .../src/react-components/icons/labels.ts | 36 +++++++- .../source/src/react-components/index.test.ts | 39 +++++++-- .../source/src/react-components/index.ts | 36 +++++++- 50 files changed, 1526 insertions(+), 116 deletions(-) create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgAddToBasket.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgAllRecipes.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgBookmarkRoundFilled.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgBookmarkRoundOutlined.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgChef.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftSingleSmall.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightSingleSmall.tsx rename libs/@guardian/source/src/react-components/__generated__/icons/{SvgClock.tsx => SvgClockFilled.tsx} (96%) rename libs/@guardian/source/src/react-components/__generated__/icons/{SvgAlertTriangle.tsx => SvgClockOutlined.tsx} (73%) create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgCuisines.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgDiets.tsx delete mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgDirectDebitWide.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgDiscover.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgFolder.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgFolderFilled.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesFilled.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesOutlined.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesRoundFilled.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesRoundOutlined.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgList.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgMealTypes.tsx rename libs/@guardian/source/src/react-components/__generated__/icons/{SvgNewsletter.tsx => SvgNewsletterFilled.tsx} (96%) create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletterOutlined.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgNewspaperArchive.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgPadlockLocked.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgPadlockUnlocked.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgShareRoundFilled.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgShareRoundOutline.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgShoppingBasket.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgShoppingList.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgSort.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgTextSizeRoundFilled.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgTextSizeRoundOutline.tsx create mode 100644 libs/@guardian/source/src/react-components/__generated__/icons/SvgTransparentArrowLeftStraightRound.tsx diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgAddToBasket.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgAddToBasket.tsx new file mode 100644 index 000000000..f523cb2f6 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgAddToBasket.tsx @@ -0,0 +1,48 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + + +); + +export const SvgAddToBasket = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Add to basket + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgAllRecipes.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgAllRecipes.tsx new file mode 100644 index 000000000..5bb0c4b85 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgAllRecipes.tsx @@ -0,0 +1,51 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + + + + + +); + +export const SvgAllRecipes = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + All recipes + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgBookmarkRoundFilled.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgBookmarkRoundFilled.tsx new file mode 100644 index 000000000..5ee4bd718 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgBookmarkRoundFilled.tsx @@ -0,0 +1,42 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgBookmarkRoundFilled = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Bookmarked + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgBookmarkRoundOutlined.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgBookmarkRoundOutlined.tsx new file mode 100644 index 000000000..152366217 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgBookmarkRoundOutlined.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgBookmarkRoundOutlined = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Bookmark + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChef.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChef.tsx new file mode 100644 index 000000000..9d9837adf --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChef.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgChef = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Chef + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronDownSingleSmall.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronDownSingleSmall.tsx index 929d1c797..bbc752e7e 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronDownSingleSmall.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronDownSingleSmall.tsx @@ -14,7 +14,7 @@ const Svg = ({ size, theme }: IconProps) => ( aria-hidden={true} > diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftDouble.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftDouble.tsx index f150a7926..6335d0e96 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftDouble.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftDouble.tsx @@ -16,7 +16,7 @@ const Svg = ({ size, theme }: IconProps) => ( diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftSingle.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftSingle.tsx index 435e2b270..82e8368ab 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftSingle.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftSingle.tsx @@ -16,7 +16,7 @@ const Svg = ({ size, theme }: IconProps) => ( diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftSingleSmall.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftSingleSmall.tsx new file mode 100644 index 000000000..cf7f577d5 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronLeftSingleSmall.tsx @@ -0,0 +1,42 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgChevronLeftSingleSmall = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Chevron left + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightDouble.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightDouble.tsx index 476aeb8b1..a70f1adcb 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightDouble.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightDouble.tsx @@ -16,7 +16,7 @@ const Svg = ({ size, theme }: IconProps) => ( diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightSingle.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightSingle.tsx index 76cdcf973..d89d8e254 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightSingle.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightSingle.tsx @@ -16,7 +16,7 @@ const Svg = ({ size, theme }: IconProps) => ( diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightSingleSmall.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightSingleSmall.tsx new file mode 100644 index 000000000..3ffdcf72b --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronRightSingleSmall.tsx @@ -0,0 +1,42 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgChevronRightSingleSmall = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Chevron right + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronUpAndDownSmall.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronUpAndDownSmall.tsx index 0ab2c778e..7088dc890 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronUpAndDownSmall.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronUpAndDownSmall.tsx @@ -14,11 +14,9 @@ const Svg = ({ size, theme }: IconProps) => ( aria-hidden={true} > - diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronUpSingleSmall.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronUpSingleSmall.tsx index 936258c21..57e21440a 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronUpSingleSmall.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgChevronUpSingleSmall.tsx @@ -14,7 +14,7 @@ const Svg = ({ size, theme }: IconProps) => ( aria-hidden={true} > diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgClock.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgClockFilled.tsx similarity index 96% rename from libs/@guardian/source/src/react-components/__generated__/icons/SvgClock.tsx rename to libs/@guardian/source/src/react-components/__generated__/icons/SvgClockFilled.tsx index 19a2b88ff..e07b15925 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgClock.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgClockFilled.tsx @@ -22,7 +22,7 @@ const Svg = ({ size, theme }: IconProps) => ( ); -export const SvgClock = ({ +export const SvgClockFilled = ({ size, theme, isAnnouncedByScreenReader = false, diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgAlertTriangle.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgClockOutlined.tsx similarity index 73% rename from libs/@guardian/source/src/react-components/__generated__/icons/SvgAlertTriangle.tsx rename to libs/@guardian/source/src/react-components/__generated__/icons/SvgClockOutlined.tsx index 7844e251f..3e601efd4 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgAlertTriangle.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgClockOutlined.tsx @@ -16,13 +16,13 @@ const Svg = ({ size, theme }: IconProps) => ( ); -export const SvgAlertTriangle = ({ +export const SvgClockOutlined = ({ size, theme, isAnnouncedByScreenReader = false, @@ -35,7 +35,7 @@ export const SvgAlertTriangle = ({ ${visuallyHidden} `} > - Warning + Clock ) : ( '' diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgCrossRoundOutlined.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgCrossRoundOutlined.tsx index 9cc78d8ff..235d586d4 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgCrossRoundOutlined.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgCrossRoundOutlined.tsx @@ -16,13 +16,7 @@ const Svg = ({ size, theme }: IconProps) => ( - diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgCuisines.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgCuisines.tsx new file mode 100644 index 000000000..c6936fc13 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgCuisines.tsx @@ -0,0 +1,48 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + + +); + +export const SvgCuisines = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Cuisines + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgDiets.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgDiets.tsx new file mode 100644 index 000000000..4f0ecc1b1 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgDiets.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgDiets = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Diets + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgDirectDebitWide.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgDirectDebitWide.tsx deleted file mode 100644 index 863c3910a..000000000 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgDirectDebitWide.tsx +++ /dev/null @@ -1,44 +0,0 @@ -// DO NOT EDIT -// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts -import { css } from '@emotion/react'; -import type { IconProps } from '../..'; -import { iconSize, visuallyHidden } from '../../../foundations'; - -const Svg = ({ size, theme }: IconProps) => ( - - - -); - -export const SvgDirectDebitWide = ({ - size, - theme, - isAnnouncedByScreenReader = false, -}: IconProps) => ( - <> - - {isAnnouncedByScreenReader ? ( - - Direct Debit logo - - ) : ( - '' - )} - -); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgDiscover.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgDiscover.tsx new file mode 100644 index 000000000..7087ed1a2 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgDiscover.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgDiscover = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Discover + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgEdit.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgEdit.tsx index 9c04b313e..d687c99e5 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgEdit.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgEdit.tsx @@ -16,7 +16,7 @@ const Svg = ({ size, theme }: IconProps) => ( diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgFolder.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgFolder.tsx new file mode 100644 index 000000000..1ddb6e48b --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgFolder.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgFolder = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Folder + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgFolderFilled.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgFolderFilled.tsx new file mode 100644 index 000000000..a10b44232 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgFolderFilled.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgFolderFilled = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Folder + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesFilled.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesFilled.tsx new file mode 100644 index 000000000..15ec6c19a --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesFilled.tsx @@ -0,0 +1,42 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgHeadphonesFilled = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Listening + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesOutlined.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesOutlined.tsx new file mode 100644 index 000000000..275d44077 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesOutlined.tsx @@ -0,0 +1,42 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgHeadphonesOutlined = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Listen + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesRoundFilled.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesRoundFilled.tsx new file mode 100644 index 000000000..d3e1dd922 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesRoundFilled.tsx @@ -0,0 +1,42 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgHeadphonesRoundFilled = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Listening + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesRoundOutlined.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesRoundOutlined.tsx new file mode 100644 index 000000000..ed5b78cb9 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgHeadphonesRoundOutlined.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgHeadphonesRoundOutlined = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Listen + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgList.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgList.tsx new file mode 100644 index 000000000..edfa67597 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgList.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgList = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + list + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgMealTypes.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgMealTypes.tsx new file mode 100644 index 000000000..bc31d698e --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgMealTypes.tsx @@ -0,0 +1,50 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + + +); + +export const SvgMealTypes = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Meal types + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgMediaControlsPlay.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgMediaControlsPlay.tsx index 6b1450aff..63b2c3d99 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgMediaControlsPlay.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgMediaControlsPlay.tsx @@ -13,12 +13,24 @@ const Svg = ({ size, theme }: IconProps) => ( focusable={false} aria-hidden={true} > - + + + + + + + + ); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletter.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletterFilled.tsx similarity index 96% rename from libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletter.tsx rename to libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletterFilled.tsx index 3b67d4ab3..98a310955 100644 --- a/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletter.tsx +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletterFilled.tsx @@ -22,7 +22,7 @@ const Svg = ({ size, theme }: IconProps) => ( ); -export const SvgNewsletter = ({ +export const SvgNewsletterFilled = ({ size, theme, isAnnouncedByScreenReader = false, diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletterOutlined.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletterOutlined.tsx new file mode 100644 index 000000000..0d8f22354 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewsletterOutlined.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgNewsletterOutlined = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Newsletter + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewspaperArchive.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewspaperArchive.tsx new file mode 100644 index 000000000..942b3413e --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgNewspaperArchive.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgNewspaperArchive = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Newspaper archive + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgPadlockLocked.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgPadlockLocked.tsx new file mode 100644 index 000000000..d135c6c6b --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgPadlockLocked.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgPadlockLocked = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Padlock locked + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgPadlockUnlocked.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgPadlockUnlocked.tsx new file mode 100644 index 000000000..c92583817 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgPadlockUnlocked.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgPadlockUnlocked = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Padlock unlocked + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgShareRoundFilled.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgShareRoundFilled.tsx new file mode 100644 index 000000000..865383b23 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgShareRoundFilled.tsx @@ -0,0 +1,42 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgShareRoundFilled = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Share + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgShareRoundOutline.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgShareRoundOutline.tsx new file mode 100644 index 000000000..fbfd6d92c --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgShareRoundOutline.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgShareRoundOutline = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Share + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgShoppingBasket.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgShoppingBasket.tsx new file mode 100644 index 000000000..e230404e7 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgShoppingBasket.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgShoppingBasket = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Shopping basket + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgShoppingList.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgShoppingList.tsx new file mode 100644 index 000000000..1a019cb80 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgShoppingList.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgShoppingList = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Shopping list + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgSort.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgSort.tsx new file mode 100644 index 000000000..d4f896149 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgSort.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgSort = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Sort + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgTextSizeRoundFilled.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgTextSizeRoundFilled.tsx new file mode 100644 index 000000000..bf9267f79 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgTextSizeRoundFilled.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgTextSizeRoundFilled = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Text size active + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgTextSizeRoundOutline.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgTextSizeRoundOutline.tsx new file mode 100644 index 000000000..ee4c6c009 --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgTextSizeRoundOutline.tsx @@ -0,0 +1,44 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgTextSizeRoundOutline = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Text size + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/__generated__/icons/SvgTransparentArrowLeftStraightRound.tsx b/libs/@guardian/source/src/react-components/__generated__/icons/SvgTransparentArrowLeftStraightRound.tsx new file mode 100644 index 000000000..626777e4f --- /dev/null +++ b/libs/@guardian/source/src/react-components/__generated__/icons/SvgTransparentArrowLeftStraightRound.tsx @@ -0,0 +1,42 @@ +// DO NOT EDIT +// this file is auto-generated by libs/@guardian/source/scripts/create-icons/index.ts +import { css } from '@emotion/react'; +import type { IconProps } from '../..'; +import { iconSize, visuallyHidden } from '../../../foundations'; + +const Svg = ({ size, theme }: IconProps) => ( + + + +); + +export const SvgTransparentArrowLeftStraightRound = ({ + size, + theme, + isAnnouncedByScreenReader = false, +}: IconProps) => ( + <> + + {isAnnouncedByScreenReader ? ( + + Go back + + ) : ( + '' + )} + +); diff --git a/libs/@guardian/source/src/react-components/deprecated-exports.ts b/libs/@guardian/source/src/react-components/deprecated-exports.ts index d68c00c51..e4e776e0b 100644 --- a/libs/@guardian/source/src/react-components/deprecated-exports.ts +++ b/libs/@guardian/source/src/react-components/deprecated-exports.ts @@ -13,11 +13,6 @@ import type { Props as InternalPropsType } from './@types/Props'; */ export type Props = InternalPropsType; -export { - /** @deprecated Use `SvgAlertRound` instead. */ - SvgAlertTriangle, -} from './__generated__/icons/SvgAlertTriangle'; - export { /** @deprecated Use `SvgFilterOutlinedWeb` instead. */ SvgFilter, diff --git a/libs/@guardian/source/src/react-components/icons/Icons.mdx b/libs/@guardian/source/src/react-components/icons/Icons.mdx index 1c733a67c..a4ccc80bd 100644 --- a/libs/@guardian/source/src/react-components/icons/Icons.mdx +++ b/libs/@guardian/source/src/react-components/icons/Icons.mdx @@ -2,7 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/blocks'; import IconStories, { XsmallIconsDefaultTheme, PaymentIconsDefaultTheme, - WidePaymentIconsDefaultTheme, } from './Icons.stories'; import { IconGallery, IconItem } from './IconGallery'; @@ -29,13 +28,3 @@ import { IconGallery, IconItem } from './IconGallery'; ))} - -## Wide payment - - - {WidePaymentIconsDefaultTheme.args.icons.map((Icon) => ( - - - - ))} - diff --git a/libs/@guardian/source/src/react-components/icons/Icons.stories.tsx b/libs/@guardian/source/src/react-components/icons/Icons.stories.tsx index 86c5657f0..ac5afb17f 100644 --- a/libs/@guardian/source/src/react-components/icons/Icons.stories.tsx +++ b/libs/@guardian/source/src/react-components/icons/Icons.stories.tsx @@ -1,12 +1,13 @@ import type { Meta, StoryObj } from '@storybook/react'; import { palette } from '../../foundations'; import type { IconProps, IconSize } from '../@types/Icons'; +import { SvgAddToBasket } from '../__generated__/icons/SvgAddToBasket'; import { SvgAlarmClockFilled } from '../__generated__/icons/SvgAlarmClockFilled'; import { SvgAlarmClockOutlined } from '../__generated__/icons/SvgAlarmClockOutlined'; import { SvgAlarmClockSounded } from '../__generated__/icons/SvgAlarmClockSounded'; import { SvgAlertPhone } from '../__generated__/icons/SvgAlertPhone'; import { SvgAlertRound } from '../__generated__/icons/SvgAlertRound'; -import { SvgAlertTriangle } from '../__generated__/icons/SvgAlertTriangle'; +import { SvgAllRecipes } from '../__generated__/icons/SvgAllRecipes'; import { SvgAppleBrand } from '../__generated__/icons/SvgAppleBrand'; import { SvgArrowContract } from '../__generated__/icons/SvgArrowContract'; import { SvgArrowDownStraight } from '../__generated__/icons/SvgArrowDownStraight'; @@ -26,26 +27,32 @@ import { SvgBin } from '../__generated__/icons/SvgBin'; import { SvgBookmarkCross } from '../__generated__/icons/SvgBookmarkCross'; import { SvgBookmarkFilled } from '../__generated__/icons/SvgBookmarkFilled'; import { SvgBookmarkOutlined } from '../__generated__/icons/SvgBookmarkOutlined'; +import { SvgBookmarkRoundFilled } from '../__generated__/icons/SvgBookmarkRoundFilled'; +import { SvgBookmarkRoundOutlined } from '../__generated__/icons/SvgBookmarkRoundOutlined'; import { SvgBookOutlined } from '../__generated__/icons/SvgBookOutlined'; import { SvgCalendar } from '../__generated__/icons/SvgCalendar'; import { SvgCamera } from '../__generated__/icons/SvgCamera'; import { SvgCameraRoundOutlined } from '../__generated__/icons/SvgCameraRoundOutlined'; import { SvgCameraSmall } from '../__generated__/icons/SvgCameraSmall'; import { SvgCheckmark } from '../__generated__/icons/SvgCheckmark'; +import { SvgChef } from '../__generated__/icons/SvgChef'; import { SvgChevronDownDouble } from '../__generated__/icons/SvgChevronDownDouble'; import { SvgChevronDownSingle } from '../__generated__/icons/SvgChevronDownSingle'; import { SvgChevronDownSingleSmall } from '../__generated__/icons/SvgChevronDownSingleSmall'; import { SvgChevronDownSingleXsmall } from '../__generated__/icons/SvgChevronDownSingleXsmall'; import { SvgChevronLeftDouble } from '../__generated__/icons/SvgChevronLeftDouble'; import { SvgChevronLeftSingle } from '../__generated__/icons/SvgChevronLeftSingle'; +import { SvgChevronLeftSingleSmall } from '../__generated__/icons/SvgChevronLeftSingleSmall'; import { SvgChevronRightDouble } from '../__generated__/icons/SvgChevronRightDouble'; import { SvgChevronRightSingle } from '../__generated__/icons/SvgChevronRightSingle'; +import { SvgChevronRightSingleSmall } from '../__generated__/icons/SvgChevronRightSingleSmall'; import { SvgChevronUpAndDownSmall } from '../__generated__/icons/SvgChevronUpAndDownSmall'; import { SvgChevronUpDouble } from '../__generated__/icons/SvgChevronUpDouble'; import { SvgChevronUpSingle } from '../__generated__/icons/SvgChevronUpSingle'; import { SvgChevronUpSingleSmall } from '../__generated__/icons/SvgChevronUpSingleSmall'; -import { SvgClock } from '../__generated__/icons/SvgClock'; import { SvgClockBaselineSmall } from '../__generated__/icons/SvgClockBaselineSmall'; +import { SvgClockFilled } from '../__generated__/icons/SvgClockFilled'; +import { SvgClockOutlined } from '../__generated__/icons/SvgClockOutlined'; import { SvgCreditCard } from '../__generated__/icons/SvgCreditCard'; import { SvgCross } from '../__generated__/icons/SvgCross'; import { SvgCrossedOutCloud } from '../__generated__/icons/SvgCrossedOutCloud'; @@ -53,8 +60,10 @@ import { SvgCrossRoundFilled } from '../__generated__/icons/SvgCrossRoundFilled' import { SvgCrossRoundOutlined } from '../__generated__/icons/SvgCrossRoundOutlined'; import { SvgCrossSmall } from '../__generated__/icons/SvgCrossSmall'; import { SvgCrosswords } from '../__generated__/icons/SvgCrosswords'; +import { SvgCuisines } from '../__generated__/icons/SvgCuisines'; +import { SvgDiets } from '../__generated__/icons/SvgDiets'; import { SvgDirectDebit } from '../__generated__/icons/SvgDirectDebit'; -import { SvgDirectDebitWide } from '../__generated__/icons/SvgDirectDebitWide'; +import { SvgDiscover } from '../__generated__/icons/SvgDiscover'; import { SvgDocument } from '../__generated__/icons/SvgDocument'; import { SvgDownload } from '../__generated__/icons/SvgDownload'; import { SvgDragHandle } from '../__generated__/icons/SvgDragHandle'; @@ -74,11 +83,17 @@ import { SvgFilterAndroidAppSmall } from '../__generated__/icons/SvgFilterAndroi import { SvgFilterIosApp } from '../__generated__/icons/SvgFilterIosApp'; import { SvgFilterIosAppSmall } from '../__generated__/icons/SvgFilterIosAppSmall'; import { SvgFilterOutlinedWeb } from '../__generated__/icons/SvgFilterOutlinedWeb'; +import { SvgFolder } from '../__generated__/icons/SvgFolder'; +import { SvgFolderFilled } from '../__generated__/icons/SvgFolderFilled'; import { SvgGift } from '../__generated__/icons/SvgGift'; import { SvgGlobe } from '../__generated__/icons/SvgGlobe'; import { SvgGoogleBrand } from '../__generated__/icons/SvgGoogleBrand'; import { SvgGps } from '../__generated__/icons/SvgGps'; import { SvgHandPointed } from '../__generated__/icons/SvgHandPointed'; +import { SvgHeadphonesFilled } from '../__generated__/icons/SvgHeadphonesFilled'; +import { SvgHeadphonesOutlined } from '../__generated__/icons/SvgHeadphonesOutlined'; +import { SvgHeadphonesRoundFilled } from '../__generated__/icons/SvgHeadphonesRoundFilled'; +import { SvgHeadphonesRoundOutlined } from '../__generated__/icons/SvgHeadphonesRoundOutlined'; import { SvgHomeHouseFilled } from '../__generated__/icons/SvgHomeHouseFilled'; import { SvgHomeHouseOutlined } from '../__generated__/icons/SvgHomeHouseOutlined'; import { SvgHomeSquareFilled } from '../__generated__/icons/SvgHomeSquareFilled'; @@ -93,11 +108,13 @@ import { SvgIngredient2 } from '../__generated__/icons/SvgIngredient2'; import { SvgIngredient3 } from '../__generated__/icons/SvgIngredient3'; import { SvgKnifeAndFork } from '../__generated__/icons/SvgKnifeAndFork'; import { SvgLinkedIn } from '../__generated__/icons/SvgLinkedIn'; +import { SvgList } from '../__generated__/icons/SvgList'; import { SvgLocationMarker } from '../__generated__/icons/SvgLocationMarker'; import { SvgMagnifyingGlass } from '../__generated__/icons/SvgMagnifyingGlass'; import { SvgMagnifyingGlassMinus } from '../__generated__/icons/SvgMagnifyingGlassMinus'; import { SvgMagnifyingGlassPlus } from '../__generated__/icons/SvgMagnifyingGlassPlus'; import { SvgMagnifyingGlassSadFace } from '../__generated__/icons/SvgMagnifyingGlassSadFace'; +import { SvgMealTypes } from '../__generated__/icons/SvgMealTypes'; import { SvgMediaControlsBack } from '../__generated__/icons/SvgMediaControlsBack'; import { SvgMediaControlsForward } from '../__generated__/icons/SvgMediaControlsForward'; import { SvgMediaControlsPause } from '../__generated__/icons/SvgMediaControlsPause'; @@ -108,7 +125,9 @@ import { SvgMessage } from '../__generated__/icons/SvgMessage'; import { SvgMessageRound } from '../__generated__/icons/SvgMessageRound'; import { SvgMinus } from '../__generated__/icons/SvgMinus'; import { SvgMoon } from '../__generated__/icons/SvgMoon'; -import { SvgNewsletter } from '../__generated__/icons/SvgNewsletter'; +import { SvgNewsletterFilled } from '../__generated__/icons/SvgNewsletterFilled'; +import { SvgNewsletterOutlined } from '../__generated__/icons/SvgNewsletterOutlined'; +import { SvgNewspaperArchive } from '../__generated__/icons/SvgNewspaperArchive'; import { SvgNoteFilled } from '../__generated__/icons/SvgNoteFilled'; import { SvgNoteOutlined } from '../__generated__/icons/SvgNoteOutlined'; import { SvgNotificationsOff } from '../__generated__/icons/SvgNotificationsOff'; @@ -116,6 +135,8 @@ import { SvgNotificationsOffRound } from '../__generated__/icons/SvgNotification import { SvgNotificationsOn } from '../__generated__/icons/SvgNotificationsOn'; import { SvgNotificationsOnRound } from '../__generated__/icons/SvgNotificationsOnRound'; import { SvgPadlock } from '../__generated__/icons/SvgPadlock'; +import { SvgPadlockLocked } from '../__generated__/icons/SvgPadlockLocked'; +import { SvgPadlockUnlocked } from '../__generated__/icons/SvgPadlockUnlocked'; import { SvgPartyOfThree } from '../__generated__/icons/SvgPartyOfThree'; import { SvgPartyPopperFilled } from '../__generated__/icons/SvgPartyPopperFilled'; import { SvgPartyPopperOutlined } from '../__generated__/icons/SvgPartyPopperOutlined'; @@ -137,8 +158,13 @@ import { SvgSettings } from '../__generated__/icons/SvgSettings'; import { SvgShareApp } from '../__generated__/icons/SvgShareApp'; import { SvgShareAppSmall } from '../__generated__/icons/SvgShareAppSmall'; import { SvgShareCallout } from '../__generated__/icons/SvgShareCallout'; +import { SvgShareRoundFilled } from '../__generated__/icons/SvgShareRoundFilled'; +import { SvgShareRoundOutline } from '../__generated__/icons/SvgShareRoundOutline'; import { SvgShareWeb } from '../__generated__/icons/SvgShareWeb'; +import { SvgShoppingBasket } from '../__generated__/icons/SvgShoppingBasket'; +import { SvgShoppingList } from '../__generated__/icons/SvgShoppingList'; import { SvgSignalBrand } from '../__generated__/icons/SvgSignalBrand'; +import { SvgSort } from '../__generated__/icons/SvgSort'; import { SvgSpeechBubble } from '../__generated__/icons/SvgSpeechBubble'; import { SvgSpeechBubbleCross } from '../__generated__/icons/SvgSpeechBubbleCross'; import { SvgSpeechBubblePlus } from '../__generated__/icons/SvgSpeechBubblePlus'; @@ -147,9 +173,12 @@ import { SvgStarOutline } from '../__generated__/icons/SvgStarOutline'; import { SvgTelegramBrand } from '../__generated__/icons/SvgTelegramBrand'; import { SvgTextLarge } from '../__generated__/icons/SvgTextLarge'; import { SvgTextSize } from '../__generated__/icons/SvgTextSize'; +import { SvgTextSizeRoundFilled } from '../__generated__/icons/SvgTextSizeRoundFilled'; +import { SvgTextSizeRoundOutline } from '../__generated__/icons/SvgTextSizeRoundOutline'; import { SvgTextSmall } from '../__generated__/icons/SvgTextSmall'; import { SvgTickRound } from '../__generated__/icons/SvgTickRound'; import { SvgTimer } from '../__generated__/icons/SvgTimer'; +import { SvgTransparentArrowLeftStraightRound } from '../__generated__/icons/SvgTransparentArrowLeftStraightRound'; import { SvgTwitter } from '../__generated__/icons/SvgTwitter'; import { SvgUpload } from '../__generated__/icons/SvgUpload'; import { SvgVideo } from '../__generated__/icons/SvgVideo'; @@ -158,12 +187,13 @@ import { SvgWhatsAppBrand } from '../__generated__/icons/SvgWhatsAppBrand'; import type { ThemeIcon } from './theme'; const uiIcons = [ + SvgAddToBasket, SvgAlarmClockFilled, SvgAlarmClockOutlined, SvgAlarmClockSounded, SvgAlertPhone, SvgAlertRound, - SvgAlertTriangle, + SvgAllRecipes, SvgAppleBrand, SvgArrowContract, SvgArrowDownStraight, @@ -184,24 +214,30 @@ const uiIcons = [ SvgBookmarkCross, SvgBookmarkFilled, SvgBookmarkOutlined, + SvgBookmarkRoundFilled, + SvgBookmarkRoundOutlined, SvgCalendar, SvgCamera, SvgCameraRoundOutlined, SvgCameraSmall, SvgCheckmark, + SvgChef, SvgChevronDownDouble, SvgChevronDownSingle, SvgChevronDownSingleSmall, SvgChevronDownSingleXsmall, SvgChevronLeftDouble, SvgChevronLeftSingle, + SvgChevronLeftSingleSmall, SvgChevronRightDouble, SvgChevronRightSingle, + SvgChevronRightSingleSmall, SvgChevronUpAndDownSmall, SvgChevronUpDouble, SvgChevronUpSingle, SvgChevronUpSingleSmall, - SvgClock, + SvgClockFilled, + SvgClockOutlined, SvgClockBaselineSmall, SvgCross, SvgCrossRoundFilled, @@ -209,6 +245,9 @@ const uiIcons = [ SvgCrossSmall, SvgCrossedOutCloud, SvgCrosswords, + SvgCuisines, + SvgDiets, + SvgDiscover, SvgDocument, SvgDownload, SvgDragHandle, @@ -228,11 +267,17 @@ const uiIcons = [ SvgFilterIosApp, SvgFilterIosAppSmall, SvgFilterOutlinedWeb, + SvgFolder, + SvgFolderFilled, SvgGift, SvgGlobe, SvgGoogleBrand, SvgGps, SvgHandPointed, + SvgHeadphonesFilled, + SvgHeadphonesOutlined, + SvgHeadphonesRoundFilled, + SvgHeadphonesRoundOutlined, SvgHomeHouseFilled, SvgHomeHouseOutlined, SvgHomeSquareFilled, @@ -247,11 +292,13 @@ const uiIcons = [ SvgIngredient3, SvgKnifeAndFork, SvgLinkedIn, + SvgList, SvgLocationMarker, SvgMagnifyingGlass, SvgMagnifyingGlassMinus, SvgMagnifyingGlassPlus, SvgMagnifyingGlassSadFace, + SvgMealTypes, SvgMediaControlsBack, SvgMediaControlsForward, SvgMediaControlsPause, @@ -262,7 +309,9 @@ const uiIcons = [ SvgMessageRound, SvgMinus, SvgMoon, - SvgNewsletter, + SvgNewsletterFilled, + SvgNewsletterOutlined, + SvgNewspaperArchive, SvgNoteFilled, SvgNoteOutlined, SvgNotificationsOff, @@ -270,6 +319,8 @@ const uiIcons = [ SvgNotificationsOn, SvgNotificationsOnRound, SvgPadlock, + SvgPadlockLocked, + SvgPadlockUnlocked, SvgPartyOfThree, SvgPartyPopperFilled, SvgPartyPopperOutlined, @@ -290,8 +341,13 @@ const uiIcons = [ SvgShareApp, SvgShareAppSmall, SvgShareCallout, + SvgShareRoundFilled, + SvgShareRoundOutline, SvgShareWeb, + SvgShoppingBasket, + SvgShoppingList, SvgSignalBrand, + SvgSort, SvgSpeechBubble, SvgSpeechBubbleCross, SvgSpeechBubblePlus, @@ -300,9 +356,12 @@ const uiIcons = [ SvgTelegramBrand, SvgTextLarge, SvgTextSize, + SvgTextSizeRoundFilled, + SvgTextSizeRoundOutline, SvgTextSmall, SvgTickRound, SvgTimer, + SvgTransparentArrowLeftStraightRound, SvgTwitter, SvgUpload, SvgVideo, @@ -312,8 +371,6 @@ const uiIcons = [ const paymentIcons = [SvgCreditCard, SvgDirectDebit, SvgPayPalBrand]; -const widePaymentIcons = [SvgDirectDebitWide]; - const IconLibrary = (args: { size: IconSize; theme: ThemeIcon; @@ -410,13 +467,6 @@ export const PaymentIconsDefaultTheme: Story = { }, }; -export const WidePaymentIconsDefaultTheme: Story = { - args: { - ...MediumIconsDefaultTheme.args, - icons: widePaymentIcons, - }, -}; - export const MediumIconsCustomTheme: Story = { args: { ...MediumIconsDefaultTheme.args, diff --git a/libs/@guardian/source/src/react-components/icons/labels.ts b/libs/@guardian/source/src/react-components/icons/labels.ts index 8278c259b..e2e2e5492 100644 --- a/libs/@guardian/source/src/react-components/icons/labels.ts +++ b/libs/@guardian/source/src/react-components/icons/labels.ts @@ -1,10 +1,12 @@ export const labels: Record = { + 'add-to-basket': 'Add to basket', 'alarm-clock-filled': 'Alarm', 'alarm-clock-outlined': 'Alarm', 'alarm-clock-sounded': 'Alarm sounded', 'alert-phone': 'Mobile phone with exclamation mark', 'alert-round': 'Warning', 'alert-triangle': 'Warning', + 'all-recipes': 'All recipes', 'apple-brand': 'Apple logo', 'arrow-contract': 'Collapse', 'arrow-down-straight': 'Arrow down', @@ -25,25 +27,31 @@ export const labels: Record = { 'bookmark-cross': 'Remove bookmark', 'bookmark-filled': 'Bookmark', 'bookmark-outlined': 'Bookmark', + 'bookmark-round-filled': 'Bookmarked', + 'bookmark-round-outlined': 'Bookmark', calendar: 'Calendar', camera: 'Camera', 'camera-round-outlined': 'Camera', 'camera-small': 'Camera', checkmark: 'Checkmark', + chef: 'Chef', 'chevron-down-double': 'Double chevron down', 'chevron-down-single': 'Expand to show more', 'chevron-down-single-small': 'Expand', 'chevron-down-single-xsmall': 'Expand to show more', 'chevron-left-double': 'Double chevron left', 'chevron-left-single': 'Chevron left', + 'chevron-left-single-small': 'Chevron left', 'chevron-right-double': 'Double chevron right', 'chevron-right-single': 'Chevron right', + 'chevron-right-single-small': 'Chevron right', 'chevron-up-and-down-small': 'Sort', 'chevron-up-double': 'Double chevron up', 'chevron-up-single': 'Collapse to show less', 'chevron-up-single-small': 'Collapse', - clock: 'Clock', + 'clock-filled': 'Clock', 'clock-baseline-small': 'Clock', + 'clock-outlined': 'Clock', 'credit-card': 'Credit card', cross: 'Close', 'cross-round-filled': 'Close', @@ -51,8 +59,11 @@ export const labels: Record = { 'cross-small': 'Close', 'crossed-out-cloud': 'No WiFi', crosswords: 'Crosswords', + cuisines: 'Cuisines', + diets: 'Diets', 'direct-debit': 'Direct Debit logo', 'direct-debit-wide': 'Direct Debit logo', + discover: 'Discover', document: 'Document', download: 'Download', 'drag-handle': 'Drag', @@ -72,11 +83,17 @@ export const labels: Record = { 'filter-ios-app': 'Filter', 'filter-ios-app-small': 'Filter', 'filter-outlined-web': 'Filter', + 'folder-filled': 'Folder', + folder: 'Folder', gift: 'Gift', globe: 'Globe', 'google-brand': 'Google logo', gps: 'Location', 'hand-pointed': 'Interactive', + 'headphones-filled': 'Listening', + 'headphones-outlined': 'Listen', + 'headphones-round-filled': 'Listening', + 'headphones-round-outlined': 'Listen', 'home-house-filled': 'Home', 'home-house-outlined': 'Home', 'home-square-filled': 'Home', @@ -91,11 +108,13 @@ export const labels: Record = { 'ingredient-3': 'Ingredient', 'knife-and-fork': 'Serving', 'linked-in': 'LinkedIn logo', + list: 'list', 'location-marker': 'Location', 'magnifying-glass': 'Search', 'magnifying-glass-minus': 'Zoom out', 'magnifying-glass-plus': 'Zoom in', 'magnifying-glass-sad-face': 'No results', + 'meal-types': 'Meal types', 'media-controls-back': 'Rewind', 'media-controls-forward': 'Fast forward', 'media-controls-pause': 'Pause', @@ -106,7 +125,9 @@ export const labels: Record = { 'message-round': 'Message', minus: 'Minus sign', moon: 'Dark mode', - newsletter: 'Newsletter', + 'newsletter-filled': 'Newsletter', + 'newspaper-archive': 'Newspaper archive', + 'newsletter-outlined': 'Newsletter', 'note-filled': 'Note', 'note-outlined': 'Note', 'notifications-off': 'Notification off', @@ -114,6 +135,8 @@ export const labels: Record = { 'notifications-on': 'Notification on', 'notifications-on-round': 'Notification on', padlock: 'Lock', + 'padlock-locked': 'Padlock locked', + 'padlock-unlocked': 'Padlock unlocked', 'party-of-three': 'Share', 'party-popper-filled': 'Celebration', 'party-popper-outlined': 'Celebration', @@ -135,8 +158,13 @@ export const labels: Record = { 'share-app': 'Share', 'share-app-small': 'Share', 'share-callout': 'Share callout', + 'share-round-filled': 'Share', + 'share-round-outline': 'Share', 'share-web': 'Share', + 'shopping-list': 'Shopping list', + 'shopping-basket': 'Shopping basket', 'signal-brand': 'Signal logo', + sort: 'Sort', 'speech-bubble': 'Comments', 'speech-bubble-cross': 'Remove comment', 'speech-bubble-plus': 'Add comment', @@ -145,12 +173,16 @@ export const labels: Record = { 'telegram-brand': 'Telegram logo', 'text-large': 'Large text', 'text-size': 'Text size', + 'text-size-round-filled': 'Text size active', + 'text-size-round-outline': 'Text size', 'text-small': 'Small text', 'tick-round': 'Ticked', + 'transparent-arrow-left-straight-round': 'Go back', timer: 'Timer', twitter: 'Twitter logo', upload: 'Upload', video: 'Video', 'whats-app': 'WhatsApp logo', 'whats-app-brand': 'WhatsApp logo', + 'white-arrow-left-straight-round': 'Go back', }; diff --git a/libs/@guardian/source/src/react-components/index.test.ts b/libs/@guardian/source/src/react-components/index.test.ts index 3d836f7bc..72c71d1e4 100644 --- a/libs/@guardian/source/src/react-components/index.test.ts +++ b/libs/@guardian/source/src/react-components/index.test.ts @@ -1,7 +1,7 @@ import * as pkgExports from './index'; // this makes sure no type exports have been removed -// it won't catch that new ones have been added, but can anyone? +// it won't catch that new ones have been added", but can anyone? export type { AccordionProps, AccordionRowProps, @@ -90,12 +90,13 @@ it('Should have exactly these exports', () => { 'Select', 'Spinner', 'Stack', + 'SvgAddToBasket', 'SvgAlarmClockFilled', 'SvgAlarmClockOutlined', 'SvgAlarmClockSounded', 'SvgAlertPhone', 'SvgAlertRound', - 'SvgAlertTriangle', + 'SvgAllRecipes', 'SvgAppleBrand', 'SvgArrowContract', 'SvgArrowDownStraight', @@ -116,25 +117,31 @@ it('Should have exactly these exports', () => { 'SvgBookmarkCross', 'SvgBookmarkFilled', 'SvgBookmarkOutlined', + 'SvgBookmarkRoundFilled', + 'SvgBookmarkRoundOutlined', 'SvgCalendar', 'SvgCamera', 'SvgCameraRoundOutlined', 'SvgCameraSmall', 'SvgCheckmark', + 'SvgChef', 'SvgChevronDownDouble', 'SvgChevronDownSingle', 'SvgChevronDownSingleSmall', 'SvgChevronDownSingleXsmall', 'SvgChevronLeftDouble', 'SvgChevronLeftSingle', + 'SvgChevronLeftSingleSmall', 'SvgChevronRightDouble', 'SvgChevronRightSingle', + 'SvgChevronRightSingleSmall', 'SvgChevronUpAndDownSmall', 'SvgChevronUpDouble', 'SvgChevronUpSingle', 'SvgChevronUpSingleSmall', - 'SvgClock', 'SvgClockBaselineSmall', + 'SvgClockFilled', + 'SvgClockOutlined', 'SvgCreditCard', 'SvgCross', 'SvgCrossRoundFilled', @@ -142,8 +149,10 @@ it('Should have exactly these exports', () => { 'SvgCrossSmall', 'SvgCrossedOutCloud', 'SvgCrosswords', + 'SvgCuisines', + 'SvgDiets', 'SvgDirectDebit', - 'SvgDirectDebitWide', + 'SvgDiscover', 'SvgDocument', 'SvgDownload', 'SvgDragHandle', @@ -163,6 +172,8 @@ it('Should have exactly these exports', () => { 'SvgFilterIosApp', 'SvgFilterIosAppSmall', 'SvgFilterOutlinedWeb', + 'SvgFolder', + 'SvgFolderFilled', 'SvgGift', 'SvgGlobe', 'SvgGoogleBrand', @@ -171,6 +182,10 @@ it('Should have exactly these exports', () => { 'SvgGuardianLiveLogo', 'SvgGuardianLogo', 'SvgHandPointed', + 'SvgHeadphonesFilled', + 'SvgHeadphonesOutlined', + 'SvgHeadphonesRoundFilled', + 'SvgHeadphonesRoundOutlined', 'SvgHomeHouseFilled', 'SvgHomeHouseOutlined', 'SvgHomeSquareFilled', @@ -185,11 +200,13 @@ it('Should have exactly these exports', () => { 'SvgIngredient3', 'SvgKnifeAndFork', 'SvgLinkedIn', + 'SvgList', 'SvgLocationMarker', 'SvgMagnifyingGlass', 'SvgMagnifyingGlassMinus', 'SvgMagnifyingGlassPlus', 'SvgMagnifyingGlassSadFace', + 'SvgMealTypes', 'SvgMediaControlsBack', 'SvgMediaControlsForward', 'SvgMediaControlsPause', @@ -200,7 +217,9 @@ it('Should have exactly these exports', () => { 'SvgMessageRound', 'SvgMinus', 'SvgMoon', - 'SvgNewsletter', + 'SvgNewsletterFilled', + 'SvgNewsletterOutlined', + 'SvgNewspaperArchive', 'SvgNoteFilled', 'SvgNoteOutlined', 'SvgNotificationsOff', @@ -208,6 +227,8 @@ it('Should have exactly these exports', () => { 'SvgNotificationsOn', 'SvgNotificationsOnRound', 'SvgPadlock', + 'SvgPadlockLocked', + 'SvgPadlockUnlocked', 'SvgPartyOfThree', 'SvgPartyPopperFilled', 'SvgPartyPopperOutlined', @@ -233,8 +254,13 @@ it('Should have exactly these exports', () => { 'SvgShareApp', 'SvgShareAppSmall', 'SvgShareCallout', + 'SvgShareRoundFilled', + 'SvgShareRoundOutline', 'SvgShareWeb', + 'SvgShoppingBasket', + 'SvgShoppingList', 'SvgSignalBrand', + 'SvgSort', 'SvgSpeechBubble', 'SvgSpeechBubbleCross', 'SvgSpeechBubblePlus', @@ -243,9 +269,12 @@ it('Should have exactly these exports', () => { 'SvgTelegramBrand', 'SvgTextLarge', 'SvgTextSize', + 'SvgTextSizeRoundFilled', + 'SvgTextSizeRoundOutline', 'SvgTextSmall', 'SvgTickRound', 'SvgTimer', + 'SvgTransparentArrowLeftStraightRound', 'SvgTwitter', 'SvgUpload', 'SvgVideo', diff --git a/libs/@guardian/source/src/react-components/index.ts b/libs/@guardian/source/src/react-components/index.ts index 003fcbcf6..396c33939 100644 --- a/libs/@guardian/source/src/react-components/index.ts +++ b/libs/@guardian/source/src/react-components/index.ts @@ -79,11 +79,13 @@ export { BackToTop } from './footer/BackToTop'; export type { FooterProps } from './footer/Footer'; export { footerThemeBrand } from './footer/theme'; +export { SvgAddToBasket } from './__generated__/icons/SvgAddToBasket'; export { SvgAlarmClockFilled } from './__generated__/icons/SvgAlarmClockFilled'; export { SvgAlarmClockOutlined } from './__generated__/icons/SvgAlarmClockOutlined'; export { SvgAlarmClockSounded } from './__generated__/icons/SvgAlarmClockSounded'; export { SvgAlertPhone } from './__generated__/icons/SvgAlertPhone'; export { SvgAlertRound } from './__generated__/icons/SvgAlertRound'; +export { SvgAllRecipes } from './__generated__/icons/SvgAllRecipes'; export { SvgAppleBrand } from './__generated__/icons/SvgAppleBrand'; export { SvgArrowContract } from './__generated__/icons/SvgArrowContract'; export { SvgArrowDownStraight } from './__generated__/icons/SvgArrowDownStraight'; @@ -104,24 +106,30 @@ export { SvgBookOutlined } from './__generated__/icons/SvgBookOutlined'; export { SvgBookmarkCross } from './__generated__/icons/SvgBookmarkCross'; export { SvgBookmarkFilled } from './__generated__/icons/SvgBookmarkFilled'; export { SvgBookmarkOutlined } from './__generated__/icons/SvgBookmarkOutlined'; +export { SvgBookmarkRoundFilled } from './__generated__/icons/SvgBookmarkRoundFilled'; +export { SvgBookmarkRoundOutlined } from './__generated__/icons/SvgBookmarkRoundOutlined'; export { SvgCalendar } from './__generated__/icons/SvgCalendar'; export { SvgCamera } from './__generated__/icons/SvgCamera'; export { SvgCameraRoundOutlined } from './__generated__/icons/SvgCameraRoundOutlined'; export { SvgCameraSmall } from './__generated__/icons/SvgCameraSmall'; export { SvgCheckmark } from './__generated__/icons/SvgCheckmark'; +export { SvgChef } from './__generated__/icons/SvgChef'; export { SvgChevronDownDouble } from './__generated__/icons/SvgChevronDownDouble'; export { SvgChevronDownSingle } from './__generated__/icons/SvgChevronDownSingle'; export { SvgChevronDownSingleSmall } from './__generated__/icons/SvgChevronDownSingleSmall'; export { SvgChevronDownSingleXsmall } from './__generated__/icons/SvgChevronDownSingleXsmall'; export { SvgChevronLeftDouble } from './__generated__/icons/SvgChevronLeftDouble'; export { SvgChevronLeftSingle } from './__generated__/icons/SvgChevronLeftSingle'; +export { SvgChevronLeftSingleSmall } from './__generated__/icons/SvgChevronLeftSingleSmall'; export { SvgChevronRightDouble } from './__generated__/icons/SvgChevronRightDouble'; export { SvgChevronRightSingle } from './__generated__/icons/SvgChevronRightSingle'; +export { SvgChevronRightSingleSmall } from './__generated__/icons/SvgChevronRightSingleSmall'; export { SvgChevronUpAndDownSmall } from './__generated__/icons/SvgChevronUpAndDownSmall'; export { SvgChevronUpDouble } from './__generated__/icons/SvgChevronUpDouble'; export { SvgChevronUpSingle } from './__generated__/icons/SvgChevronUpSingle'; export { SvgChevronUpSingleSmall } from './__generated__/icons/SvgChevronUpSingleSmall'; -export { SvgClock } from './__generated__/icons/SvgClock'; +export { SvgClockFilled } from './__generated__/icons/SvgClockFilled'; +export { SvgClockOutlined } from './__generated__/icons/SvgClockOutlined'; export { SvgClockBaselineSmall } from './__generated__/icons/SvgClockBaselineSmall'; export { SvgCreditCard } from './__generated__/icons/SvgCreditCard'; export { SvgCross } from './__generated__/icons/SvgCross'; @@ -130,8 +138,10 @@ export { SvgCrossRoundOutlined } from './__generated__/icons/SvgCrossRoundOutlin export { SvgCrossSmall } from './__generated__/icons/SvgCrossSmall'; export { SvgCrossedOutCloud } from './__generated__/icons/SvgCrossedOutCloud'; export { SvgCrosswords } from './__generated__/icons/SvgCrosswords'; +export { SvgCuisines } from './__generated__/icons/SvgCuisines'; +export { SvgDiets } from './__generated__/icons/SvgDiets'; +export { SvgDiscover } from './__generated__/icons/SvgDiscover'; export { SvgDirectDebit } from './__generated__/icons/SvgDirectDebit'; -export { SvgDirectDebitWide } from './__generated__/icons/SvgDirectDebitWide'; export { SvgDocument } from './__generated__/icons/SvgDocument'; export { SvgDownload } from './__generated__/icons/SvgDownload'; export { SvgDragHandle } from './__generated__/icons/SvgDragHandle'; @@ -150,11 +160,17 @@ export { SvgFilterAndroidAppSmall } from './__generated__/icons/SvgFilterAndroid export { SvgFilterIosApp } from './__generated__/icons/SvgFilterIosApp'; export { SvgFilterIosAppSmall } from './__generated__/icons/SvgFilterIosAppSmall'; export { SvgFilterOutlinedWeb } from './__generated__/icons/SvgFilterOutlinedWeb'; +export { SvgFolder } from './__generated__/icons/SvgFolder'; +export { SvgFolderFilled } from './__generated__/icons/SvgFolderFilled'; export { SvgGift } from './__generated__/icons/SvgGift'; export { SvgGlobe } from './__generated__/icons/SvgGlobe'; export { SvgGoogleBrand } from './__generated__/icons/SvgGoogleBrand'; export { SvgGps } from './__generated__/icons/SvgGps'; export { SvgHandPointed } from './__generated__/icons/SvgHandPointed'; +export { SvgHeadphonesFilled } from './__generated__/icons/SvgHeadphonesFilled'; +export { SvgHeadphonesOutlined } from './__generated__/icons/SvgHeadphonesOutlined'; +export { SvgHeadphonesRoundFilled } from './__generated__/icons/SvgHeadphonesRoundFilled'; +export { SvgHeadphonesRoundOutlined } from './__generated__/icons/SvgHeadphonesRoundOutlined'; export { SvgHomeHouseFilled } from './__generated__/icons/SvgHomeHouseFilled'; export { SvgHomeHouseOutlined } from './__generated__/icons/SvgHomeHouseOutlined'; export { SvgHomeSquareFilled } from './__generated__/icons/SvgHomeSquareFilled'; @@ -169,11 +185,13 @@ export { SvgIngredient2 } from './__generated__/icons/SvgIngredient2'; export { SvgIngredient3 } from './__generated__/icons/SvgIngredient3'; export { SvgKnifeAndFork } from './__generated__/icons/SvgKnifeAndFork'; export { SvgLinkedIn } from './__generated__/icons/SvgLinkedIn'; +export { SvgList } from './__generated__/icons/SvgList'; export { SvgLocationMarker } from './__generated__/icons/SvgLocationMarker'; export { SvgMagnifyingGlass } from './__generated__/icons/SvgMagnifyingGlass'; export { SvgMagnifyingGlassMinus } from './__generated__/icons/SvgMagnifyingGlassMinus'; export { SvgMagnifyingGlassPlus } from './__generated__/icons/SvgMagnifyingGlassPlus'; export { SvgMagnifyingGlassSadFace } from './__generated__/icons/SvgMagnifyingGlassSadFace'; +export { SvgMealTypes } from './__generated__/icons/SvgMealTypes'; export { SvgMediaControlsBack } from './__generated__/icons/SvgMediaControlsBack'; export { SvgMediaControlsForward } from './__generated__/icons/SvgMediaControlsForward'; export { SvgMediaControlsPause } from './__generated__/icons/SvgMediaControlsPause'; @@ -184,7 +202,9 @@ export { SvgMessage } from './__generated__/icons/SvgMessage'; export { SvgMessageRound } from './__generated__/icons/SvgMessageRound'; export { SvgMinus } from './__generated__/icons/SvgMinus'; export { SvgMoon } from './__generated__/icons/SvgMoon'; -export { SvgNewsletter } from './__generated__/icons/SvgNewsletter'; +export { SvgNewsletterFilled } from './__generated__/icons/SvgNewsletterFilled'; +export { SvgNewsletterOutlined } from './__generated__/icons/SvgNewsletterOutlined'; +export { SvgNewspaperArchive } from './__generated__/icons/SvgNewspaperArchive'; export { SvgNoteFilled } from './__generated__/icons/SvgNoteFilled'; export { SvgNoteOutlined } from './__generated__/icons/SvgNoteOutlined'; export { SvgNotificationsOff } from './__generated__/icons/SvgNotificationsOff'; @@ -192,6 +212,8 @@ export { SvgNotificationsOffRound } from './__generated__/icons/SvgNotifications export { SvgNotificationsOn } from './__generated__/icons/SvgNotificationsOn'; export { SvgNotificationsOnRound } from './__generated__/icons/SvgNotificationsOnRound'; export { SvgPadlock } from './__generated__/icons/SvgPadlock'; +export { SvgPadlockLocked } from './__generated__/icons/SvgPadlockLocked'; +export { SvgPadlockUnlocked } from './__generated__/icons/SvgPadlockUnlocked'; export { SvgPartyOfThree } from './__generated__/icons/SvgPartyOfThree'; export { SvgPartyPopperFilled } from './__generated__/icons/SvgPartyPopperFilled'; export { SvgPartyPopperOutlined } from './__generated__/icons/SvgPartyPopperOutlined'; @@ -212,19 +234,27 @@ export { SvgReload } from './__generated__/icons/SvgReload'; export { SvgSettings } from './__generated__/icons/SvgSettings'; export { SvgShareApp } from './__generated__/icons/SvgShareApp'; export { SvgShareAppSmall } from './__generated__/icons/SvgShareAppSmall'; +export { SvgShareRoundFilled } from './__generated__/icons/SvgShareRoundFilled'; +export { SvgShareRoundOutline } from './__generated__/icons/SvgShareRoundOutline'; export { SvgShareWeb } from './__generated__/icons/SvgShareWeb'; +export { SvgShoppingList } from './__generated__/icons/SvgShoppingList'; +export { SvgShoppingBasket } from './__generated__/icons/SvgShoppingBasket'; export { SvgSignalBrand } from './__generated__/icons/SvgSignalBrand'; export { SvgSpeechBubble } from './__generated__/icons/SvgSpeechBubble'; export { SvgSpeechBubbleCross } from './__generated__/icons/SvgSpeechBubbleCross'; export { SvgSpeechBubblePlus } from './__generated__/icons/SvgSpeechBubblePlus'; +export { SvgSort } from './__generated__/icons/SvgSort'; export { SvgStar } from './__generated__/icons/SvgStar'; export { SvgStarOutline } from './__generated__/icons/SvgStarOutline'; export { SvgTelegramBrand } from './__generated__/icons/SvgTelegramBrand'; export { SvgTextLarge } from './__generated__/icons/SvgTextLarge'; export { SvgTextSize } from './__generated__/icons/SvgTextSize'; +export { SvgTextSizeRoundFilled } from './__generated__/icons/SvgTextSizeRoundFilled'; +export { SvgTextSizeRoundOutline } from './__generated__/icons/SvgTextSizeRoundOutline'; export { SvgTextSmall } from './__generated__/icons/SvgTextSmall'; export { SvgTickRound } from './__generated__/icons/SvgTickRound'; export { SvgTimer } from './__generated__/icons/SvgTimer'; +export { SvgTransparentArrowLeftStraightRound } from './__generated__/icons/SvgTransparentArrowLeftStraightRound'; export { SvgTwitter } from './__generated__/icons/SvgTwitter'; export { SvgUpload } from './__generated__/icons/SvgUpload'; export { SvgVideo } from './__generated__/icons/SvgVideo'; From 29e58baa8400ce16d24dbcd84d5b06765bbf4a5a Mon Sep 17 00:00:00 2001 From: Anna Beddow Date: Mon, 3 Mar 2025 15:33:54 +0000 Subject: [PATCH 2/2] Add changeset --- .changeset/short-dragons-do.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/short-dragons-do.md diff --git a/.changeset/short-dragons-do.md b/.changeset/short-dragons-do.md new file mode 100644 index 000000000..347ffbcd0 --- /dev/null +++ b/.changeset/short-dragons-do.md @@ -0,0 +1,5 @@ +--- +'@guardian/source': major +--- + +Adds new icons to source and both renames and removes some existing icons. This is a major bump and consumers using removed icons will need to update their UI.