Merge pull request #532 from guardian/source-v4

migrate discussion-rendering to source v4

.storybook/preview.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react"
-import { FocusStyleManager } from "@guardian/src-foundations/utils"
+import { FocusStyleManager } from "@guardian/source-foundations"
 import MockDate from 'mockdate';
 import { mockFetchCalls } from '../src/lib/mockFetchCalls';
 

package.json

@@ -29,11 +29,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.1.5",
     "@guardian/libs": "^3.1.0",
-    "@guardian/src-button": "^3.6.0",
-    "@guardian/src-foundations": "^3.6.0",
-    "@guardian/src-icons": "^3.6.0",
-    "@guardian/src-link": "^3.6.0",
-    "@guardian/src-text-input": "^3.6.0",
+    "@guardian/source-foundations": "^4.0.0-rc.0",
+    "@guardian/source-react-components": "^4.0.0-rc.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "typescript": "^4.1.3"
@@ -48,11 +45,8 @@
     "@emotion/react": "^11.1.5",
     "@guardian/libs": "^3.1.0",
     "@guardian/prettier": "^0.4.2",
-    "@guardian/src-button": "^3.6.0",
-    "@guardian/src-foundations": "^3.6.0",
-    "@guardian/src-icons": "^3.6.0",
-    "@guardian/src-link": "^3.6.0",
-    "@guardian/src-text-input": "^3.6.0",
+    "@guardian/source-foundations": "^4.0.0-rc.0",
+    "@guardian/source-react-components": "^4.0.0-rc.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
@@ -136,7 +130,7 @@
   "jest": {
     "testEnvironment": "jest-environment-jsdom-sixteen",
     "transformIgnorePatterns": [
-      "node_modules/(?!(@guardian/src-foundations|@guardian/libs)/)"
+      "node_modules/(?!(@guardian/libs)/)"
     ],
     "preset": "ts-jest/presets/js-with-babel",
     "moduleFileExtensions": [

rollup.config.js

@@ -23,11 +23,7 @@ module.exports = {
         // Ignore all dependencies and PeerDependencies in build
         ...Object.keys(pkg.dependencies || {}),
         ...Object.keys(pkg.peerDependencies || {}),
-        'prop-types',
-        // Nested src-foundations
-        '@guardian/src-foundations/mq',
-        '@guardian/src-foundations/palette',
-        '@guardian/src-foundations/typography',
+        'prop-types'
     ],
     plugins: [
         clear({

src/App.tsx

@@ -1,10 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { css } from '@emotion/react';
 
-import { neutral } from '@guardian/src-foundations/palette';
-import { textSans } from '@guardian/src-foundations/typography';
-import { space } from '@guardian/src-foundations';
-import { SvgPlus } from '@guardian/src-icons';
+import { neutral, textSans, space } from '@guardian/source-foundations';
+import { SvgPlus } from '@guardian/source-react-components';
 
 import { ArticleTheme } from '@guardian/libs';
 

src/components/AbuseReportForm/AbuseReportForm.tsx

@@ -1,16 +1,14 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { css } from '@emotion/react';
 
-import { palette } from '@guardian/src-foundations';
-import { textSans } from '@guardian/src-foundations/typography';
-import { space, neutral } from '@guardian/src-foundations';
-import { Button } from '@guardian/src-button';
-import { SvgCross } from '@guardian/src-icons';
+import { textSans, space, neutral } from '@guardian/source-foundations';
+import { Button, SvgCross } from '@guardian/source-react-components';
 
 import { ArticleTheme } from '@guardian/libs';
 
 import { reportAbuse } from '../../lib/api';
 import { pillarToString } from '../../lib/pillarToString';
+import { palette } from '../../lib/palette';
 
 type formData = {
 	categoryId: number;
@@ -20,7 +18,7 @@ type formData = {
 
 const formWrapper = css`
 	z-index: 1;
-	border: 1px solid ${palette.neutral[86]};
+	border: 1px solid ${neutral[86]};
 	position: absolute;
 	width: 300px;
 	top: 0;

src/components/Badges/Badges.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
-import { space, neutral, brand } from '@guardian/src-foundations';
-import { textSans } from '@guardian/src-foundations/typography';
+import { space, neutral, brand, textSans } from '@guardian/source-foundations';
 
 const staffBadge = css`
 	display: flex;

src/components/Comment/Comment.tsx

@@ -1,13 +1,17 @@
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
 
-import { space, palette, remSpace } from '@guardian/src-foundations';
-import { from, until } from '@guardian/src-foundations/mq';
-import { neutral, border } from '@guardian/src-foundations/palette';
-import { textSans } from '@guardian/src-foundations/typography';
-import { Link } from '@guardian/src-link';
-import { SvgIndent } from '@guardian/src-icons';
-import { Button } from '@guardian/src-button';
+import {
+	space,
+	remSpace,
+	from,
+	until,
+	neutral,
+	border,
+	textSans,
+	brand,
+} from '@guardian/source-foundations';
+import { Link, SvgIndent, Button } from '@guardian/source-react-components';
 
 import { ArticleTheme } from '@guardian/libs';
 
@@ -27,6 +31,7 @@ import { CommentType, UserProfile } from '../../types';
 import { pickComment, unPickComment } from '../../lib/api';
 import { createAuthenticationEventParams } from '../../lib/identity-component-event';
 import { pillarToString } from '../../lib/pillarToString';
+import { palette } from '../../lib/palette';
 
 type Props = {
 	user?: UserProfile;
@@ -114,7 +119,7 @@ const blockedCommentStyles = css`
 // to override a tag styles from dangerouslySetInnerHTML
 const commentLinkStyling = css`
 	a {
-		color: ${palette.brand[500]};
+		color: ${brand[500]};
 		text-decoration: none;
 		:hover {
 			text-decoration: underline;

src/components/CommentContainer/CommentContainer.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { css } from '@emotion/react';
 
-import { space, neutral, border } from '@guardian/src-foundations';
-import { SvgPlus } from '@guardian/src-icons';
+import { space, neutral, border } from '@guardian/source-foundations';
+import { SvgPlus } from '@guardian/source-react-components';
 
 import { ArticleTheme } from '@guardian/libs';
 

src/components/CommentForm/CommentForm.tsx

@@ -1,9 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { css } from '@emotion/react';
 
-import { palette, space } from '@guardian/src-foundations';
-import { neutral, text } from '@guardian/src-foundations/palette';
-import { textSans } from '@guardian/src-foundations/typography';
+import { space, neutral, text, textSans } from '@guardian/source-foundations';
 
 import { ArticleTheme } from '@guardian/libs';
 
@@ -58,9 +56,9 @@ const commentTextArea = css`
 	margin-bottom: ${space[3]}px;
 	padding: 8px 10px 10px 8px;
 	${textSans.small()};
-	border-color: ${palette.neutral[86]};
+	border-color: ${neutral[86]};
 	:focus {
-		border-color: ${palette.neutral[46]};
+		border-color: ${neutral[46]};
 		outline: none;
 	}
 `;
@@ -124,7 +122,7 @@ const commentAddOns = css`
 	height: 22px;
 	font-size: 13px;
 	line-height: 17px;
-	border: 1px solid ${palette.neutral[100]};
+	border: 1px solid ${neutral[100]};
 	color: ${neutral[46]};
 	text-align: center;
 	cursor: pointer;

src/components/CommentReplyPreview/CommentReplyPreview.tsx

@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
 
-import { textSans } from '@guardian/src-foundations/typography';
-import { neutral, space, text, palette } from '@guardian/src-foundations';
-import { SvgIndent } from '@guardian/src-icons';
+import { neutral, space, text, textSans } from '@guardian/source-foundations';
+import { Button, SvgIndent } from '@guardian/source-react-components';
 import { ArticleTheme } from '@guardian/libs';
-import { Button } from '@guardian/src-button';
 
 import { Row } from '../Row/Row';
 import { pillarToString } from '../../lib/pillarToString';
+import { palette } from '../../lib/palette';
 
 import { CommentType } from '../../types';
 

src/components/Dropdown/Dropdown.tsx

@@ -3,20 +3,21 @@ import { css } from '@emotion/react';
 
 import FocusLock from 'react-focus-lock';
 
-import { palette } from '@guardian/src-foundations';
 import {
 	neutral,
 	border,
 	brandAlt,
 	background,
-} from '@guardian/src-foundations/palette';
-import { textSans } from '@guardian/src-foundations/typography';
-import { from, until } from '@guardian/src-foundations/mq';
+	textSans,
+	from,
+	until,
+} from '@guardian/source-foundations';
 import { ArticleTheme } from '@guardian/libs';
 
 import { DropdownOptionType } from '../../types';
 
 import { pillarToString } from '../../lib/pillarToString';
+import { palette } from '../../lib/palette';
 
 type Props = {
 	id: string;

src/components/Filters/Filters.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
-import { space } from '@guardian/src-foundations';
-import { border } from '@guardian/src-foundations/palette';
+import { space, border } from '@guardian/source-foundations';
 import { ArticleTheme } from '@guardian/libs';
 
 import { Dropdown } from '../Dropdown/Dropdown';

src/components/FirstCommentWelcome/FirstCommentWelcome.tsx

@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { css } from '@emotion/react';
-import { textSans, headline } from '@guardian/src-foundations/typography';
-import { space, neutral } from '@guardian/src-foundations';
-import { TextInput } from '@guardian/src-text-input';
-import { Link } from '@guardian/src-link';
+import {
+	textSans,
+	headline,
+	space,
+	neutral,
+} from '@guardian/source-foundations';
+import { Link, TextInput } from '@guardian/source-react-components';
 import { ArticleTheme } from '@guardian/libs';
 
 import { Row } from '../Row/Row';

src/components/LoadingComments/LoadingComments.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { css, keyframes } from '@emotion/react';
 
-import { space } from '@guardian/src-foundations';
-import { neutral } from '@guardian/src-foundations/palette';
+import { space, neutral } from '@guardian/source-foundations';
 
 import { Row } from '../Row/Row';
 import { Column } from '../Column/Column';

src/components/LoadingPicks/LoadingPicks.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { css, keyframes } from '@emotion/react';
 
-import { space } from '@guardian/src-foundations';
-import { neutral } from '@guardian/src-foundations/palette';
+import { space, neutral } from '@guardian/source-foundations';
 
 import { Row } from '../Row/Row';
 

src/components/Pagination/Pagination.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
-import { textSans } from '@guardian/src-foundations/typography';
-import { neutral, border, space } from '@guardian/src-foundations';
-import { until } from '@guardian/src-foundations/mq';
-import { Button } from '@guardian/src-button';
 import {
+	textSans,
+	neutral,
+	border,
+	space,
+	until,
+} from '@guardian/source-foundations';
+import {
+	Button,
 	SvgChevronLeftSingle,
 	SvgChevronRightSingle,
-} from '@guardian/src-icons';
+} from '@guardian/source-react-components';
 
 import { FilterOptions } from '../../types';
 

src/components/PillarButton/PillarButton.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
-import { space } from '@guardian/src-foundations';
-import { SvgCheckmark } from '@guardian/src-icons';
+import { space } from '@guardian/source-foundations';
+import { SvgCheckmark } from '@guardian/source-react-components';
 import { ArticlePillar } from '@guardian/libs';
 
 import { Row } from '../Row/Row';

src/components/PillarButton/PillarButton.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
-import { palette, neutral } from '@guardian/src-foundations';
-import { textSans } from '@guardian/src-foundations/typography';
-import { Button } from '@guardian/src-button';
+import { neutral, textSans } from '@guardian/source-foundations';
+import { Button } from '@guardian/source-react-components';
 import { ArticlePillar, ArticleSpecial, ArticleTheme } from '@guardian/libs';
 
 import { pillarToString } from '../../lib/pillarToString';
+import { palette } from '../../lib/palette';
 
 type Props = {
 	pillar: ArticleTheme;

src/components/Preview/Preview.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
-import { space, neutral } from '@guardian/src-foundations';
-import { textSans } from '@guardian/src-foundations/typography';
+import { space, neutral, textSans } from '@guardian/source-foundations';
 
 type Props = {
 	previewHtml: string;

src/components/RecommendationCount/RecommendationCount.tsx

@@ -1,10 +1,8 @@
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
 
-import { textSans } from '@guardian/src-foundations/typography';
-import { neutral } from '@guardian/src-foundations/palette';
-import { brand } from '@guardian/src-foundations';
-import { SvgArrowUpStraight } from '@guardian/src-icons';
+import { brand, textSans, neutral } from '@guardian/source-foundations';
+import { SvgArrowUpStraight } from '@guardian/source-react-components';
 import { Row } from '../Row/Row';
 
 import { recommend as recommendDefault } from '../../lib/api';

src/components/Timestamp/Timestamp.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
 
-import { textSans } from '@guardian/src-foundations/typography';
-import { palette } from '@guardian/src-foundations';
+import { textSans, neutral } from '@guardian/source-foundations';
 
 import { dateFormatter } from '../../lib/dateFormatter';
 import { useInterval } from '../../lib/useInterval';
@@ -15,7 +14,7 @@ type Props = {
 };
 
 const linkStyles = css`
-	color: ${palette.neutral[46]};
+	color: ${neutral[46]};
 	text-decoration: none;
 	:hover,
 	:focus {