Merge pull request #1304 from guardian/sa-icon-components-folder

get-icons #1 - Move icon components to components folder

packages/@guardian/source-react-components/src/accordion/AccordionRow.tsx

@@ -4,7 +4,7 @@ import { visuallyHidden as _visuallyHidden } from '@guardian/source-foundations'
 import { useEffect, useState } from 'react';
 import type { HTMLAttributes } from 'react';
 import type { Props } from '../@types/Props';
-import { SvgChevronDownSingle } from '../icons/SvgChevronDownSingle';
+import { SvgChevronDownSingle } from '../icons/components/SvgChevronDownSingle';
 import { AccordionRowNoJS } from './AccordionRowNoJS';
 import {
 	accordionRow,

packages/@guardian/source-react-components/src/accordion/AccordionRowNoJS.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { visuallyHidden as _visuallyHidden } from '@guardian/source-foundations';
-import { SvgChevronDownSingle } from '../icons/SvgChevronDownSingle';
+import { SvgChevronDownSingle } from '../icons/components/SvgChevronDownSingle';
 import type { AccordionRowProps } from './AccordionRow';
 import {
 	accordionRow,

packages/@guardian/source-react-components/src/button/Button.stories.tsx

@@ -6,7 +6,7 @@ import {
 	asChromaticStory,
 	asPlayground,
 } from '../../../../../lib/story-intents';
-import { SvgCross } from '../icons/SvgCross';
+import { SvgCross } from '../icons/components/SvgCross';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 import { buttonThemeBrand, buttonThemeBrandAlt } from './theme';

packages/@guardian/source-react-components/src/button/LinkButton.stories.tsx

@@ -3,7 +3,7 @@ import {
 	asChromaticStory,
 	asPlayground,
 } from '../../../../../lib/story-intents';
-import { SvgArrowRightStraight } from '../icons/SvgArrowRightStraight';
+import { SvgArrowRightStraight } from '../icons/components/SvgArrowRightStraight';
 import { LinkButton } from './LinkButton';
 import type { LinkButtonProps } from './LinkButton';
 // These types are the right types, but don't work with Storybook v6 which uses Emotion v10

packages/@guardian/source-react-components/src/button/shared.tsx

@@ -3,7 +3,7 @@ import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { visuallyHidden } from '@guardian/source-foundations';
 import type { ReactElement, ReactNode } from 'react';
 import { cloneElement } from 'react';
-import { SvgSpinner } from '../icons/SvgSpinner';
+import { SvgSpinner } from '../icons/components/SvgSpinner';
 
 export const buttonContents = ({
 	hideLabel,

packages/@guardian/source-react-components/src/choice-card/ChoiceCard.stories.tsx

@@ -3,7 +3,7 @@ import {
 	asChromaticStory,
 	asPlayground,
 } from '../../../../../lib/story-intents';
-import { SvgCamera } from '../icons/SvgCamera';
+import { SvgCamera } from '../icons/components/SvgCamera';
 import { ChoiceCard } from './ChoiceCard';
 import type { ChoiceCardProps } from './ChoiceCard';
 

packages/@guardian/source-react-components/src/footer/BackToTop.tsx

@@ -1,4 +1,4 @@
-import { SvgChevronUpSingle } from '../icons/SvgChevronUpSingle';
+import { SvgChevronUpSingle } from '../icons/components/SvgChevronUpSingle';
 import { backToTop, backToTopIcon } from './styles';
 
 export const BackToTop = (

packages/@guardian/source-react-components/src/icons/Icons.stories.tsx

@@ -6,59 +6,59 @@ import {
 } from '../../../../../lib/story-intents';
 // These types are the right types, but don't work with Storybook v6 which uses Emotion v10
 // import type { Args, Story } from '@storybook/react';
-import { SvgAlert } from './SvgAlert';
-import { SvgAlertRound } from './SvgAlertRound';
-import { SvgAlertTriangle } from './SvgAlertTriangle';
-import { SvgAppleBrand } from './SvgAppleBrand';
-import { SvgArrowDownStraight } from './SvgArrowDownStraight';
-import { SvgArrowLeftStraight } from './SvgArrowLeftStraight';
-import { SvgArrowRightStraight } from './SvgArrowRightStraight';
-import { SvgArrowUpStraight } from './SvgArrowUpStraight';
-import { SvgAudio } from './SvgAudio';
-import { SvgCamera } from './SvgCamera';
-import { SvgCheckmark } from './SvgCheckmark';
-import { SvgChevronDownSingle } from './SvgChevronDownSingle';
-import { SvgChevronLeftDouble } from './SvgChevronLeftDouble';
-import { SvgChevronLeftSingle } from './SvgChevronLeftSingle';
-import { SvgChevronRightDouble } from './SvgChevronRightDouble';
-import { SvgChevronRightSingle } from './SvgChevronRightSingle';
-import { SvgChevronUpSingle } from './SvgChevronUpSingle';
-import { SvgClock } from './SvgClock';
-import { SvgCreditCard } from './SvgCreditCard';
-import { SvgCross } from './SvgCross';
-import { SvgDirectDebit } from './SvgDirectDebit';
-import { SvgDirectDebitWide } from './SvgDirectDebitWide';
-import { SvgEnvelope } from './SvgEnvelope';
-import { SvgExternal } from './SvgExternal';
-import { SvgEye } from './SvgEye';
-import { SvgEyeStrike } from './SvgEyeStrike';
-import { SvgFacebook } from './SvgFacebook';
-import { SvgFacebookBrand } from './SvgFacebookBrand';
-import { SvgGift } from './SvgGift';
-import { SvgGlobe } from './SvgGlobe';
-import { SvgGoogleBrand } from './SvgGoogleBrand';
-import { SvgHouse } from './SvgHouse';
-import { SvgIndent } from './SvgIndent';
-import { SvgInfo } from './SvgInfo';
-import { SvgLinkedIn } from './SvgLinkedIn';
-import { SvgMessenger } from './SvgMessenger';
-import { SvgMinus } from './SvgMinus';
-import { SvgOfflineCloud } from './SvgOfflineCloud';
-import { SvgPayPal } from './SvgPayPal';
-import { SvgPerson } from './SvgPerson';
-import { SvgPinned } from './SvgPinned';
-import { SvgPinterest } from './SvgPinterest';
-import { SvgPlay } from './SvgPlay';
-import { SvgPlus } from './SvgPlus';
-import { SvgQuote } from './SvgQuote';
-import { SvgSettings } from './SvgSettings';
-import { SvgSpeechBubble } from './SvgSpeechBubble';
-import { SvgSpinner } from './SvgSpinner';
-import { SvgStar } from './SvgStar';
-import { SvgTickRound } from './SvgTickRound';
-import { SvgTwitter } from './SvgTwitter';
-import { SvgVideo } from './SvgVideo';
-import { SvgWhatsApp } from './SvgWhatsApp';
+import { SvgAlert } from './components/SvgAlert';
+import { SvgAlertRound } from './components/SvgAlertRound';
+import { SvgAlertTriangle } from './components/SvgAlertTriangle';
+import { SvgAppleBrand } from './components/SvgAppleBrand';
+import { SvgArrowDownStraight } from './components/SvgArrowDownStraight';
+import { SvgArrowLeftStraight } from './components/SvgArrowLeftStraight';
+import { SvgArrowRightStraight } from './components/SvgArrowRightStraight';
+import { SvgArrowUpStraight } from './components/SvgArrowUpStraight';
+import { SvgAudio } from './components/SvgAudio';
+import { SvgCamera } from './components/SvgCamera';
+import { SvgCheckmark } from './components/SvgCheckmark';
+import { SvgChevronDownSingle } from './components/SvgChevronDownSingle';
+import { SvgChevronLeftDouble } from './components/SvgChevronLeftDouble';
+import { SvgChevronLeftSingle } from './components/SvgChevronLeftSingle';
+import { SvgChevronRightDouble } from './components/SvgChevronRightDouble';
+import { SvgChevronRightSingle } from './components/SvgChevronRightSingle';
+import { SvgChevronUpSingle } from './components/SvgChevronUpSingle';
+import { SvgClock } from './components/SvgClock';
+import { SvgCreditCard } from './components/SvgCreditCard';
+import { SvgCross } from './components/SvgCross';
+import { SvgDirectDebit } from './components/SvgDirectDebit';
+import { SvgDirectDebitWide } from './components/SvgDirectDebitWide';
+import { SvgEnvelope } from './components/SvgEnvelope';
+import { SvgExternal } from './components/SvgExternal';
+import { SvgEye } from './components/SvgEye';
+import { SvgEyeStrike } from './components/SvgEyeStrike';
+import { SvgFacebook } from './components/SvgFacebook';
+import { SvgFacebookBrand } from './components/SvgFacebookBrand';
+import { SvgGift } from './components/SvgGift';
+import { SvgGlobe } from './components/SvgGlobe';
+import { SvgGoogleBrand } from './components/SvgGoogleBrand';
+import { SvgHouse } from './components/SvgHouse';
+import { SvgIndent } from './components/SvgIndent';
+import { SvgInfo } from './components/SvgInfo';
+import { SvgLinkedIn } from './components/SvgLinkedIn';
+import { SvgMessenger } from './components/SvgMessenger';
+import { SvgMinus } from './components/SvgMinus';
+import { SvgOfflineCloud } from './components/SvgOfflineCloud';
+import { SvgPayPal } from './components/SvgPayPal';
+import { SvgPerson } from './components/SvgPerson';
+import { SvgPinned } from './components/SvgPinned';
+import { SvgPinterest } from './components/SvgPinterest';
+import { SvgPlay } from './components/SvgPlay';
+import { SvgPlus } from './components/SvgPlus';
+import { SvgQuote } from './components/SvgQuote';
+import { SvgSettings } from './components/SvgSettings';
+import { SvgSpeechBubble } from './components/SvgSpeechBubble';
+import { SvgSpinner } from './components/SvgSpinner';
+import { SvgStar } from './components/SvgStar';
+import { SvgTickRound } from './components/SvgTickRound';
+import { SvgTwitter } from './components/SvgTwitter';
+import { SvgVideo } from './components/SvgVideo';
+import { SvgWhatsApp } from './components/SvgWhatsApp';
 import type { IconProps, IconSize } from './types';
 
 const uiIcons = {

packages/@guardian/source-react-components/src/icons/SvgAlert.tsx → packages/@guardian/source-react-components/src/icons/components/SvgAlert.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgAlert = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgAlertRound.tsx → packages/@guardian/source-react-components/src/icons/components/SvgAlertRound.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgAlertRound = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgAlertTriangle.tsx → packages/@guardian/source-react-components/src/icons/components/SvgAlertTriangle.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgAlertTriangle = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgAppleBrand.tsx → packages/@guardian/source-react-components/src/icons/components/SvgAppleBrand.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 // The viewBox is changed from "6 6 44 44" to "15 15 26 26" for a ~60% zoom
 export const SvgAppleBrand = ({

packages/@guardian/source-react-components/src/icons/SvgArrowDownStraight.tsx → packages/@guardian/source-react-components/src/icons/components/SvgArrowDownStraight.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgArrowDownStraight = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgArrowLeftStraight.tsx → packages/@guardian/source-react-components/src/icons/components/SvgArrowLeftStraight.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgArrowLeftStraight = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgArrowRightStraight.tsx → packages/@guardian/source-react-components/src/icons/components/SvgArrowRightStraight.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgArrowRightStraight = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgArrowUpStraight.tsx → packages/@guardian/source-react-components/src/icons/components/SvgArrowUpStraight.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgArrowUpStraight = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgAudio.tsx → packages/@guardian/source-react-components/src/icons/components/SvgAudio.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgAudio = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgCamera.tsx → packages/@guardian/source-react-components/src/icons/components/SvgCamera.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgCamera = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgCheckmark.tsx → packages/@guardian/source-react-components/src/icons/components/SvgCheckmark.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgCheckmark = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgChevronDownSingle.tsx → packages/@guardian/source-react-components/src/icons/components/SvgChevronDownSingle.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgChevronDownSingle = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgChevronLeftDouble.tsx → packages/@guardian/source-react-components/src/icons/components/SvgChevronLeftDouble.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgChevronLeftDouble = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgChevronLeftSingle.tsx → packages/@guardian/source-react-components/src/icons/components/SvgChevronLeftSingle.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgChevronLeftSingle = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgChevronRightDouble.tsx → packages/@guardian/source-react-components/src/icons/components/SvgChevronRightDouble.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgChevronRightDouble = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgChevronRightSingle.tsx → packages/@guardian/source-react-components/src/icons/components/SvgChevronRightSingle.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgChevronRightSingle = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgChevronUpSingle.tsx → packages/@guardian/source-react-components/src/icons/components/SvgChevronUpSingle.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgChevronUpSingle = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgClock.tsx → packages/@guardian/source-react-components/src/icons/components/SvgClock.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgClock = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgCreditCard.tsx → packages/@guardian/source-react-components/src/icons/components/SvgCreditCard.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgCreditCard = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgCross.tsx → packages/@guardian/source-react-components/src/icons/components/SvgCross.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgCross = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgDirectDebit.tsx → packages/@guardian/source-react-components/src/icons/components/SvgDirectDebit.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgDirectDebit = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgDirectDebitWide.tsx → packages/@guardian/source-react-components/src/icons/components/SvgDirectDebitWide.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgDirectDebitWide = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgEnvelope.tsx → packages/@guardian/source-react-components/src/icons/components/SvgEnvelope.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgEnvelope = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgExternal.tsx → packages/@guardian/source-react-components/src/icons/components/SvgExternal.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgExternal = ({
 	size,

packages/@guardian/source-react-components/src/icons/SvgEye.tsx → packages/@guardian/source-react-components/src/icons/components/SvgEye.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 import { iconSize, visuallyHidden } from '@guardian/source-foundations';
-import type { IconProps } from './types';
+import type { IconProps } from '../types';
 
 export const SvgEye = ({
 	size,