Merge pull request #789 from City-of-Helsinki/feature/cookie-consent-…

…component Feature / Cookie Consent component
City-of-Helsinki · Sep 14, 2022 · 8a134bf · 8a134bf
2 parents 50f1af9 + ec0bb8e
commit 8a134bf
Show file tree

Hide file tree

Showing 71 changed files with 9,046 additions and 24 deletions.
diff --git a/packages/react/.jest/resize-observer-mock.js b/packages/react/.jest/resize-observer-mock.js
@@ -0,0 +1,15 @@
+global.ResizeObserver =
+  global.ResizeObserver ||
+  function (callBack) {
+    let observer = new MutationObserver(callBack);
+    return {
+      disconnect: () => {
+        observer.disconnect();
+        observer = undefined;
+      },
+      observe: (el) => {
+        observer.observe(el, { childList: true, attributes: true, subtree: true });
+      },
+      unobserve: () => observer.unobserve(),
+    };
+  };
diff --git a/...ki/reference/chrome_iphone7_Components_CookieConsent_Custom_Content_Version.png b/...ki/reference/chrome_iphone7_Components_CookieConsent_Custom_Content_Version.png
diff --git a/...oki/reference/chrome_iphone7_Components_CookieConsent_English_Modal_Version.png b/...oki/reference/chrome_iphone7_Components_CookieConsent_English_Modal_Version.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_CookieConsent_Example.png b/packages/react/.loki/reference/chrome_iphone7_Components_CookieConsent_Example.png
diff --git a/...oki/reference/chrome_iphone7_Components_CookieConsent_Finnish_Modal_Version.png b/...oki/reference/chrome_iphone7_Components_CookieConsent_Finnish_Modal_Version.png
diff --git a/...react/.loki/reference/chrome_iphone7_Components_CookieConsent_Modal_Version.png b/...react/.loki/reference/chrome_iphone7_Components_CookieConsent_Modal_Version.png
diff --git a/.../react/.loki/reference/chrome_iphone7_Components_CookieConsent_Page_Version.png b/.../react/.loki/reference/chrome_iphone7_Components_CookieConsent_Page_Version.png
diff --git a/...loki/reference/chrome_iphone7_Components_CookieConsent_Simple_Modal_Version.png b/...loki/reference/chrome_iphone7_Components_CookieConsent_Simple_Modal_Version.png
diff --git a/...oki/reference/chrome_laptop_Components_CookieConsent_Custom_Content_Version.png b/...oki/reference/chrome_laptop_Components_CookieConsent_Custom_Content_Version.png
diff --git a/...loki/reference/chrome_laptop_Components_CookieConsent_English_Modal_Version.png b/...loki/reference/chrome_laptop_Components_CookieConsent_English_Modal_Version.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_CookieConsent_Example.png b/packages/react/.loki/reference/chrome_laptop_Components_CookieConsent_Example.png
diff --git a/...loki/reference/chrome_laptop_Components_CookieConsent_Finnish_Modal_Version.png b/...loki/reference/chrome_laptop_Components_CookieConsent_Finnish_Modal_Version.png
diff --git a/.../react/.loki/reference/chrome_laptop_Components_CookieConsent_Modal_Version.png b/.../react/.loki/reference/chrome_laptop_Components_CookieConsent_Modal_Version.png
diff --git a/...s/react/.loki/reference/chrome_laptop_Components_CookieConsent_Page_Version.png b/...s/react/.loki/reference/chrome_laptop_Components_CookieConsent_Page_Version.png
diff --git a/....loki/reference/chrome_laptop_Components_CookieConsent_Simple_Modal_Version.png b/....loki/reference/chrome_laptop_Components_CookieConsent_Simple_Modal_Version.png
diff --git a/packages/react/.storybook/index.css b/packages/react/.storybook/index.css
@@ -125,3 +125,7 @@ body {
 .stepper-card > div:first-child {
   margin-bottom: var(--spacing-m) !important;
 }
+
+#focused-element-after-cookie-consent-closed:focus {
+  outline: 2px black solid;
+}
diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js
@@ -61,7 +61,7 @@ module.exports = {
   globals: {
     'ts-jest': {
       babelConfig: true,
-    }
+    },
   },
 
   // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
@@ -131,7 +131,7 @@ module.exports = {
   // runner: "jest-runner",
 
   // The paths to modules that run some code to configure or set up the testing environment before each test
-  setupFiles: ['<rootDir>/.jest/register-context.js'],
+  setupFiles: ['<rootDir>/.jest/register-context.js', '<rootDir>/.jest/resize-observer-mock.js'],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   setupFilesAfterEnv: ['<rootDir>/.jest/setup.js'],

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -39,6 +39,7 @@
     "@babel/preset-typescript": "7.9.0",
     "@rollup/plugin-babel": "5.2.1",
     "@rollup/plugin-commonjs": "15.1.0",
+    "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "9.0.0",
     "@storybook/addon-a11y": "6.4.22",
     "@storybook/addon-actions": "6.4.22",
@@ -104,11 +105,17 @@
     "@juggle/resize-observer": "3.2.0",
     "@popperjs/core": "2.5.3",
     "@react-aria/visually-hidden": "3.2.0",
+    "@types/cookie": "^0.4.1",
+    "cookie": "^0.4.1",
     "date-fns": "2.16.1",
     "downshift": "6.0.6",
     "hds-core": "2.2.0",
+    "lodash.get": "^4.4.2",
     "lodash.isequal": "4.5.0",
     "lodash.isfunction": "3.0.9",
+    "lodash.isobject": "3.0.2",
+    "lodash.isundefined": "3.0.1",
+    "lodash.pick": "^4.4.0",
     "lodash.pickby": "^4.6.0",
     "lodash.uniqueid": "4.0.1",
     "lodash.xor": "^4.5.0",

diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
@@ -4,6 +4,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import ts from '@wessberg/rollup-plugin-ts';
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
 import postcss from 'rollup-plugin-postcss';
 import { terser } from 'rollup-plugin-terser';
 
@@ -40,6 +41,7 @@ const getConfig = (format) => ({
     commonjs({
       include: ['../../node_modules/**', 'node_modules/**'],
     }),
+    json(),
     postcss({
       modules: true,
       use: ['sass'],
@@ -81,6 +83,7 @@ export default [
       'components/Card/index': 'src/components/card/index.ts',
       'components/Checkbox/index': 'src/components/checkbox/index.ts',
       'components/Columns/index': 'src/components/columns/index.ts',
+      'components/CookieConsent/index': 'src/components/cookieConsent/index.ts',
       'components/Combobox/index': 'src/components/dropdown/combobox/index.ts',
       'components/Container/index': 'src/components/container/index.ts',
       'components/DateInput/index': 'src/components/dateInput/index.ts',