Merge pull request #871 from FDMediagroep/develop

Moved react dependencies

.gitignore

@@ -10,3 +10,24 @@ js-coverage
 node_modules
 public/service-worker*
 .vercel
+
+#amplify-do-not-edit-begin
+amplify/\#current-cloud-backend
+amplify/.config/local-*
+amplify/logs
+amplify/mock-data
+amplify/backend/amplify-meta.json
+amplify/backend/.temp
+build/
+dist/
+node_modules/
+aws-exports.js
+awsconfiguration.json
+amplifyconfiguration.json
+amplifyconfiguration.dart
+amplify-build-config.json
+amplify-gradle-config.json
+amplifytools.xcconfig
+.secret-*
+**.sample
+#amplify-do-not-edit-end

amplify/.config/project-config.json

@@ -0,0 +1,17 @@
+{
+  "projectName": "fddesignsystem",
+  "version": "3.1",
+  "frontend": "javascript",
+  "javascript": {
+    "framework": "react",
+    "config": {
+      "SourceDir": "src",
+      "DistributionDir": ".next",
+      "BuildCommand": "npm.cmd run-script build",
+      "StartCommand": "npm.cmd run-script start"
+    }
+  },
+  "providers": [
+    "awscloudformation"
+  ]
+}

amplify/README.md

@@ -0,0 +1,8 @@
+# Getting Started with Amplify CLI
+This directory was generated by [Amplify CLI](https://docs.amplify.aws/cli).
+
+Helpful resources:
+- Amplify documentation: https://docs.amplify.aws
+- Amplify CLI documentation: https://docs.amplify.aws/cli
+- More details on this folder & generated files: https://docs.amplify.aws/cli/reference/files
+- Join Amplify's community: https://amplify.aws/community/

amplify/backend/backend-config.json

@@ -0,0 +1 @@
+{}

amplify/backend/tags.json

@@ -0,0 +1,10 @@
+[
+  {
+    "Key": "user:Stack",
+    "Value": "{project-env}"
+  },
+  {
+    "Key": "user:Application",
+    "Value": "{project-name}"
+  }
+]

amplify/cli.json

@@ -0,0 +1,51 @@
+{
+  "features": {
+    "graphqltransformer": {
+      "addmissingownerfields": true,
+      "improvepluralization": false,
+      "validatetypenamereservedwords": true,
+      "useexperimentalpipelinedtransformer": true,
+      "enableiterativegsiupdates": true,
+      "secondarykeyasgsi": true,
+      "skipoverridemutationinputtypes": true,
+      "transformerversion": 2,
+      "suppressschemamigrationprompt": true
+    },
+    "frontend-ios": {
+      "enablexcodeintegration": true
+    },
+    "auth": {
+      "enablecaseinsensitivity": true,
+      "useinclusiveterminology": true,
+      "breakcirculardependency": true,
+      "forcealiasattributes": false,
+      "useenabledmfas": true
+    },
+    "codegen": {
+      "useappsyncmodelgenplugin": true,
+      "usedocsgeneratorplugin": true,
+      "usetypesgeneratorplugin": true,
+      "cleangeneratedmodelsdirectory": true,
+      "retaincasestyle": true,
+      "addtimestampfields": true,
+      "handlelistnullabilitytransparently": true,
+      "emitauthprovider": true,
+      "generateindexrules": true,
+      "enabledartnullsafety": true
+    },
+    "appsync": {
+      "generategraphqlpermissions": true
+    },
+    "latestregionsupport": {
+      "pinpoint": 1,
+      "translate": 1,
+      "transcribe": 1,
+      "rekognition": 1,
+      "textract": 1,
+      "comprehend": 1
+    },
+    "project": {
+      "overrides": true
+    }
+  }
+}

amplify/hooks/README.md

@@ -0,0 +1,7 @@
+# Command Hooks
+
+Command hooks can be used to run custom scripts upon Amplify CLI lifecycle events like pre-push, post-add-function, etc.
+
+To get started, add your script files based on the expected naming convention in this directory.
+
+Learn more about the script file naming convention, hook parameters, third party dependencies, and advanced configurations at https://docs.amplify.aws/cli/usage/command-hooks

amplify/team-provider-info.json

@@ -0,0 +1,15 @@
+{
+  "dev": {
+    "awscloudformation": {
+      "AuthRoleName": "amplify-fddesignsystem-dev-143608-authRole",
+      "UnauthRoleArn": "arn:aws:iam::851161100412:role/amplify-fddesignsystem-dev-143608-unauthRole",
+      "AuthRoleArn": "arn:aws:iam::851161100412:role/amplify-fddesignsystem-dev-143608-authRole",
+      "Region": "eu-west-1",
+      "DeploymentBucketName": "amplify-fddesignsystem-dev-143608-deployment",
+      "UnauthRoleName": "amplify-fddesignsystem-dev-143608-unauthRole",
+      "StackName": "amplify-fddesignsystem-dev-143608",
+      "StackId": "arn:aws:cloudformation:eu-west-1:851161100412:stack/amplify-fddesignsystem-dev-143608/47793b40-6d63-11ec-94bd-0a587617e72d",
+      "AmplifyAppId": "daztfc5libv8i"
+    }
+  }
+}

package.json

@@ -84,8 +84,6 @@
         "pretty": "^2.0.0",
         "punycode": "^2.1.1",
         "raw-loader": "^4.0.2",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
         "react-element-to-jsx-string": "^14.3.4",
         "sass": "^1.45.2",
         "sass-loader": "^12.4.0",
@@ -101,7 +99,9 @@
         "webpack-cli": "^4.9.1"
     },
     "dependencies": {
-        "js-cookie": "^3.0.1"
+        "js-cookie": "^3.0.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
     },
     "browserslist": {
         "production": [

src/pages/[section]/[id]/Article.module.scss → pages/[section]/[id]/Article.module.scss

@@ -1,7 +1,7 @@
-@import '../../../utils/map-deep-get.scss';
-@import '../../../design-tokens/colors.scss';
-@import '../../../design-tokens/media.scss';
-@import '../../../design-tokens/typography.scss';
+@import '../../../src/utils/map-deep-get.scss';
+@import '../../../src/design-tokens/colors.scss';
+@import '../../../src/design-tokens/media.scss';
+@import '../../../src/design-tokens/typography.scss';
 
 .article {
     max-width: 1248px;

src/pages/[section]/[id]/[title].tsx → pages/[section]/[id]/[title].tsx

@@ -2,14 +2,14 @@ import React, { useState, useEffect } from 'react';
 import '@fdmg/css-grid/css/grid.css';
 import '@fdmg/css-grid/css/flex.css';
 import styles from './Article.module.scss';
-import { mergeInlineContent } from '../../../utils/articleContent';
-import PageStore from '../../../stores/PageStore';
-import { OEmbedLoader } from '../../../utils/OEmbedLoader';
-import { ArticleMeta } from '../../../components/article-meta/ArticleMeta';
+import { mergeInlineContent } from '../../../src/utils/articleContent';
+import PageStore from '../../../src/stores/PageStore';
+import { OEmbedLoader } from '../../../src/utils/OEmbedLoader';
+import { ArticleMeta } from '../../../src/components/article-meta/ArticleMeta';
 import { parseXMLToJSON } from '@fdmg/article-xml-json';
 import Head from 'next/head';
 import { GridContainer } from '@fdmg/css-grid/GridContainer';
-import { VerticalToolbar } from '../../../components/toolbar/VerticalToolbar';
+import { VerticalToolbar } from '../../../src/components/toolbar/VerticalToolbar';
 import {
     GetStaticPaths,
     GetStaticPathsContext,

src/pages/_app.module.scss → pages/_app.module.scss

@@ -1,6 +1,6 @@
-@import '../utils/map-deep-get.scss';
-@import '../design-tokens/colors.scss';
-@import '../design-tokens/media.scss';
+@import '../src/utils/map-deep-get.scss';
+@import '../src/design-tokens/colors.scss';
+@import '../src/design-tokens/media.scss';
 
 .overview,
 .article {

src/pages/_app.scss → pages/_app.scss

@@ -1,6 +1,6 @@
-@import '../utils/map-deep-get.scss';
-@import '../design-tokens/colors.scss';
-@import '../design-tokens/typography.scss';
+@import '../src/utils/map-deep-get.scss';
+@import '../src/design-tokens/colors.scss';
+@import '../src/design-tokens/typography.scss';
 
 html {
     overflow-x: hidden;

src/pages/_app.tsx → pages/_app.tsx

@@ -2,19 +2,19 @@ import React, { useEffect, useState } from 'react';
 import '@fdmg/css-grid/css/flex.css';
 import '@fdmg/css-grid/css/grid.css';
 import '@fdmg/css-grid/GridContainer.css';
-import '../design-tokens/design-tokens.scss';
+import '../src/design-tokens/design-tokens.scss';
 import './_app.scss';
 import './_app_markdown.scss';
 import './_app_a11y-dark.scss';
 import styles from './_app.module.scss';
-import PageStore, { Page } from '../stores/PageStore';
+import PageStore, { Page } from '../src/stores/PageStore';
 import Head from 'next/head';
-import { Tooltip } from '../components/Tooltip';
-import { Menu } from '../components/menu/Menu';
-import { debounce } from '../utils/debounce';
-import { Footer } from '../components/footer/Footer';
-import { Profile } from '../components/menu/Profile';
-import { Aside } from '../components/Aside';
+import { Tooltip } from '../src/components/Tooltip';
+import { Menu } from '../src/components/menu/Menu';
+import { debounce } from '../src/utils/debounce';
+import { Footer } from '../src/components/footer/Footer';
+import { Profile } from '../src/components/menu/Profile';
+import { Aside } from '../src/components/Aside';
 
 /**
  * Make sibling elements same height as its tallest sibling with the given CSS Class Name.

src/pages/_app_a11y-dark.scss → pages/_app_a11y-dark.scss

@@ -1,6 +1,6 @@
-@import '../utils/map-deep-get.scss';
-@import '../design-tokens/colors.scss';
-@import '../design-tokens/typography.scss';
+@import '../src/utils/map-deep-get.scss';
+@import '../src/design-tokens/colors.scss';
+@import '../src/design-tokens/typography.scss';
 
 .markdown {
     &#{&} {

src/pages/_app_markdown.scss → pages/_app_markdown.scss

@@ -1,6 +1,6 @@
-@import '../utils/map-deep-get.scss';
-@import '../design-tokens/colors.scss';
-@import '../design-tokens/typography.scss';
+@import '../src/utils/map-deep-get.scss';
+@import '../src/design-tokens/colors.scss';
+@import '../src/design-tokens/typography.scss';
 
 html.dark {
     .markdown {

src/pages/ab.module.scss → pages/ab.module.scss

@@ -1,6 +1,6 @@
-@import '../utils/map-deep-get.scss';
-@import '../design-tokens/colors.scss';
-@import '../design-tokens/media.scss';
+@import '../src/utils/map-deep-get.scss';
+@import '../src/design-tokens/colors.scss';
+@import '../src/design-tokens/media.scss';
 
 .ab {
     display: flex;

src/pages/ab.tsx → pages/ab.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ABProvider, Experiment, Variant } from '../components/ab/ab';
+import { ABProvider, Experiment, Variant } from '../src/components/ab/ab';
 import { parseCookies } from 'nookies';
 import styles from './ab.module.scss';
 import { GetServerSidePropsContext } from 'next';

src/pages/accordion.tsx → pages/accordion.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect } from 'react';
-import { Explain } from '../components/Explain';
-import { Accordion, getCssClassNames } from '../components/accordion/Accordion';
-import PageStore from '../stores/PageStore';
+import { Explain } from '../src/components/Explain';
+import {
+    Accordion,
+    getCssClassNames,
+} from '../src/components/accordion/Accordion';
+import PageStore from '../src/stores/PageStore';
 import Head from 'next/head';
-import { globalCssClassNames } from '../utils/globalCssClassNames';
+import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
 const items = [
     {

src/pages/api/fd-web/index.ts → pages/api/fd-web/index.ts

@@ -1,5 +1,5 @@
 import Cors from 'micro-cors';
-import { timeout } from '../../../utils/timeout';
+import { timeout } from '../../../src/utils/timeout';
 const cors = Cors({ allowMethods: ['GET', 'HEAD'] });
 
 export const data = {

src/pages/article-bullet-point.tsx → pages/article-bullet-point.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect } from 'react';
-import { Explain } from '../components/Explain';
+import { Explain } from '../src/components/Explain';
 import {
     BulletPoint,
     getCssClassNames,
-} from '../components/bullet-point/BulletPoint';
-import PageStore from '../stores/PageStore';
+} from '../src/components/bullet-point/BulletPoint';
+import PageStore from '../src/stores/PageStore';
 import styles from './article-bullet-point.module.scss';
 import Head from 'next/head';
-import { globalCssClassNames } from '../utils/globalCssClassNames';
+import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
 const initialProps = {
     bullets: [

src/pages/article-image.tsx → pages/article-image.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
-import { Explain } from '../components/Explain';
+import { Explain } from '../src/components/Explain';
 import {
     ArticleImage,
     getCssClassNames,
-} from '../components/article-image/ArticleImage';
-import PageStore from '../stores/PageStore';
+} from '../src/components/article-image/ArticleImage';
+import PageStore from '../src/stores/PageStore';
 import Head from 'next/head';
-import { globalCssClassNames } from '../utils/globalCssClassNames';
+import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
 const initialProps = {
     caption: `What a photo`,

src/pages/article-infographic.tsx → pages/article-infographic.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
-import { Explain } from '../components/Explain';
+import { Explain } from '../src/components/Explain';
 import {
     InfographicExtended,
     getCssClassNames,
-} from '../components/article-image/InfographicExtended';
-import PageStore from '../stores/PageStore';
+} from '../src/components/article-image/InfographicExtended';
+import PageStore from '../src/stores/PageStore';
 import Head from 'next/head';
-import { globalCssClassNames } from '../utils/globalCssClassNames';
+import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
 const initialProps = {
     smallImageUrl:

src/pages/article-latest-news.tsx → pages/article-latest-news.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
-import { Explain } from '../components/Explain';
+import { Explain } from '../src/components/Explain';
 import {
     ArticleLatestNews,
     getCssClassNames,
-} from '../components/article-latest-news/ArticleLatestNews';
-import PageStore from '../stores/PageStore';
+} from '../src/components/article-latest-news/ArticleLatestNews';
+import PageStore from '../src/stores/PageStore';
 import Head from 'next/head';
-import { globalCssClassNames } from '../utils/globalCssClassNames';
+import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
 const initialProps = {
     news: [

src/pages/article-link-block.tsx → pages/article-link-block.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect } from 'react';
-import { Explain } from '../components/Explain';
+import { Explain } from '../src/components/Explain';
 import {
     LinkBlock,
     getCssClassNames,
-} from '../components/article-link-block/LinkBlock';
-import PageStore from '../stores/PageStore';
+} from '../src/components/article-link-block/LinkBlock';
+import PageStore from '../src/stores/PageStore';
 import styles from './article-link-block.module.scss';
 import Head from 'next/head';
-import { globalCssClassNames } from '../utils/globalCssClassNames';
+import { globalCssClassNames } from '../src/utils/globalCssClassNames';
 
 export const metaTitle = 'Link block';
 export const metaDescription =