Merge pull request #606 from vrk-kpa/develop

[Release] 7.0.0
vrk-kpa · Apr 28, 2022 · a40f6a6 · a40f6a6
2 parents 4269c4f + 53e97fa
commit a40f6a6
Show file tree

Hide file tree

Showing 110 changed files with 14,319 additions and 14,839 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1 +1 @@
-*       @LJKaski @ketsappi @valger11
+*       @LJKaski @ketsappi
diff --git a/.styleguidist/logger.md b/.styleguidist/logger.md
@@ -0,0 +1,35 @@
+## Instructions
+
+Some of the components have additional logging to guide the right use of those and which was not able to be guided through API or Typescript.
+
+By default, nothing is logged. User of the library needs to enable logging when needed. User can use console or some 3rd party logging library for their needs.
+
+### Console
+
+Basic setup to log to your console.
+
+```jsx static
+import { setLogger } from 'suomifi-ui-components';
+
+setLogger(console);
+```
+
+Some customization.
+
+```jsx static
+import { setLogger, Logger } from 'suomifi-ui-components';
+
+const logging: Logger = {
+  log: (val: string) => {
+    console.log(`[INFO] ${val}`);
+  },
+  warn: (val: string) => {
+    console.warn(`[WARN] ${val}`);
+  },
+  error: (val: string) => {
+    console.error(`[ERR] ${val}`);
+  }
+};
+setLogger(logging);
+```
+
diff --git a/.styleguidist/styleguidist.sections.js b/.styleguidist/styleguidist.sections.js
@@ -8,7 +8,6 @@ const primitiveComponents = [
   'VisuallyHidden',
   ['Form', 'TextInput'],
   ['Form', 'SearchInput'],
-  ['Form', 'Checkbox'],
   ['Form', 'Textarea'],
   ['Form', 'Label'],
   ['Form', 'HintText'],
@@ -72,6 +71,10 @@ module.exports = {
             },
           ],
         },
+        {
+          name: 'Logger',
+          content: './.styleguidist/logger.md',
+        },
       ],
       sectionDepth: 2,
       expand: true,
@@ -104,6 +107,13 @@ module.exports = {
               ]),
             },
 
+            {
+              name: 'Checkbox',
+              components: getComponentWithVariants('Form/Checkbox')([
+                'Checkbox',
+                'CheckboxGroup',
+              ]),
+            },
             {
               name: 'RadioButton',
               components: getComponentWithVariants('Form/RadioButton')([
@@ -128,7 +138,7 @@ module.exports = {
             },
             {
               name: 'Icon',
-              components: getComponents(['Icon', 'StaticIcon']),
+              components: getComponents(['Icon', 'StaticIcon', 'LogoIcon']),
             },
             {
               name: 'MultiSelect',
@@ -206,3 +216,6 @@ module.exports = {
     },
   ],
 };
+
+
+
diff --git a/.styleguidist/webpack.config.js b/.styleguidist/webpack.config.js
@@ -3,11 +3,11 @@ const path = require('path');
 module.exports = (env) => ({
   mode: env.production ? 'production' : 'development',
   devtool: env.production ? 'inline-source-map' : 'eval',
-  node: {
-    fs: 'empty',
-  },
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    fallback: {
+      fs: false,
+    },
   },
   module: {
     rules: [
@@ -28,3 +28,4 @@ module.exports = (env) => ({
     ],
   },
 });
+
diff --git a/.stylelintrc b/.stylelintrc
@@ -4,7 +4,8 @@
     "stylelint-config-styled-components"
   ],
   "rules": {
-    "no-extra-semicolons": null
+    "no-extra-semicolons": null,
+    "function-no-unknown": null
   },
   "overrides": [
     {

diff --git a/README.md b/README.md
@@ -80,7 +80,7 @@ Components have variant-property for different versions of the current component
 
 ```jsx
 import { Button } from 'suomifi-ui-components';
-<Button variant="secondary">This is a seconday button</Button>;
+<Button variant="secondary">This is a secondary button</Button>;
 ```
 
 ### ⛱ Extending styles

diff --git a/jest.config.js b/jest.config.js
@@ -7,7 +7,7 @@ module.exports = {
   // Automatically clear mock calls and instances between every test
   clearMocks: true,
 
-  collectCoverage: true,
+  collectCoverage: false,
   // The directory where Jest should output its coverage files
   coverageDirectory: 'coverage',
   collectCoverageFrom: [

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "6.2.1",
+  "version": "7.0.0",
   "description": "Suomi.fi UI component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -68,57 +68,57 @@
     "deploy-dev": "gh-pages -d styleguide -e dev -m \"[skip ci] Updates\""
   },
   "devDependencies": {
-    "@babel/core": "7.16.10",
-    "@babel/plugin-transform-runtime": "7.16.10",
-    "@babel/preset-env": "7.16.10",
+    "@babel/core": "7.17.7",
+    "@babel/plugin-transform-runtime": "7.17.0",
+    "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
     "@reach/rect": "0.16.0",
-    "@rollup/plugin-babel": "5.3.0",
-    "@rollup/plugin-commonjs": "21.0.1",
+    "@rollup/plugin-babel": "5.3.1",
+    "@rollup/plugin-commonjs": "21.0.2",
     "@rollup/plugin-node-resolve": "13.1.3",
     "@stylelint/postcss-css-in-js": "0.37.2",
-    "@testing-library/jest-dom": "5.16.1",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.4",
     "@types/classnames": "2.3.1",
-    "@types/jest": "27.4.0",
+    "@types/jest": "27.4.1",
     "@types/jest-axe": "3.5.3",
-    "@types/react": "17.0.38",
-    "@types/react-dom": "17.0.11",
-    "@types/styled-components": "5.1.20",
+    "@types/react": "17.0.40",
+    "@types/react-dom": "17.0.13",
+    "@types/styled-components": "5.1.24",
     "@types/warning": "3.0.0",
-    "@typescript-eslint/eslint-plugin": "5.10.0",
-    "@typescript-eslint/parser": "5.10.0",
-    "autoprefixer": "10.4.2",
-    "babel-jest": "27.4.6",
-    "clean-css": "5.2.2",
+    "@typescript-eslint/eslint-plugin": "5.15.0",
+    "@typescript-eslint/parser": "5.15.0",
+    "autoprefixer": "10.4.4",
+    "babel-jest": "27.5.1",
+    "clean-css": "5.2.4",
     "clipboard-copy": "4.0.1",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
-    "css-loader": "5.2.7",
-    "cssnano": "5.0.15",
-    "eslint": "8.7.0",
+    "css-loader": "6.7.1",
+    "cssnano": "5.1.4",
+    "eslint": "8.11.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.3.0",
+    "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.0",
     "eslint-plugin-import": "2.25.4",
-    "eslint-plugin-jest": "25.7.0",
+    "eslint-plugin-jest": "26.1.1",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react": "7.28.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "eslint-plugin-tree-shaking": "1.10.0",
     "gh-pages": "3.2.3",
     "husky": "7.0.4",
-    "jest": "27.4.7",
-    "jest-axe": "5.0.1",
+    "jest": "27.5.1",
+    "jest-axe": "6.0.0",
     "jest-styled-components": "7.0.8",
-    "lint-staged": "12.2.1",
+    "lint-staged": "12.3.6",
     "node-sass": "7.0.1",
     "npm-run-all": "4.1.5",
-    "postcss": "8.4.5",
+    "postcss": "8.4.12",
     "postcss-import": "14.0.2",
     "postcss-syntax": "0.36.2",
-    "prettier": "2.5.1",
+    "prettier": "2.6.0",
     "prettier-check": "2.0.0",
     "prettier-eslint": "13.0.0",
     "prop-types": "15.8.1",
@@ -127,42 +127,42 @@
     "react-docgen": "5.4.0",
     "react-docgen-typescript": "2.2.2",
     "react-dom": "17.0.2",
-    "react-styleguidist": "11.1.8",
+    "react-styleguidist": "11.2.0",
     "rimraf": "3.0.2",
-    "rollup": "2.64.0",
+    "rollup": "2.70.1",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-progress": "1.1.2",
     "rollup-plugin-ts": "2.0.5",
-    "sass": "1.49.0",
-    "sass-loader": "10.2.0",
-    "size-limit": "5.0.5",
-    "style-loader": "2.0.0",
+    "sass": "1.49.9",
+    "sass-loader": "12.6.0",
+    "size-limit": "7.0.8",
+    "style-loader": "3.3.1",
     "styled-components": "5.3.3",
-    "stylelint": "14.2.0",
-    "stylelint-config-recommended": "6.0.0",
+    "stylelint": "14.6.0",
+    "stylelint-config-recommended": "7.0.0",
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-custom-processor-loader": "0.6.0",
     "stylelint-processor-styled-components": "1.10.0",
     "ts-jest": "27.1.3",
-    "ts-loader": "8.1.0",
+    "ts-loader": "9.2.8",
     "tslib": "2.3.1",
-    "typescript": "4.5.4",
-    "webpack": "4.46.0"
+    "typescript": "4.6.2",
+    "webpack": "5.70.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.16.7",
-    "@popperjs/core": "2.11.2",
+    "@babel/runtime": "7.17.7",
+    "@popperjs/core": "2.11.4",
     "@reach/listbox": "0.16.2",
     "@reach/menu-button": "0.16.2",
     "@reach/popover": "0.16.2",
     "@types/react-modal": "3.13.1",
     "classnames": "2.3.1",
-    "polished": "4.1.3",
+    "polished": "4.1.4",
     "react-modal": "3.14.4",
     "react-popper": "2.2.5",
-    "react-svg": "14.1.8",
+    "react-svg": "14.1.14",
     "suomifi-design-tokens": "3.2.0",
-    "suomifi-icons": "^6.0.0"
+    "suomifi-icons": "^6.1.0"
   },
   "peerDependencies": {
     "@types/styled-components": ">=5.1.9",
@@ -181,6 +181,8 @@
     {
       "path": "dist/suomifi-ui-components.esm.js"
     }
-  ]
+  ],
+  "resolutions": {
+    "babel-plugin-styled-components": "2.0.7"
+  }
 }
-
diff --git a/rollup.config.js b/rollup.config.js
@@ -42,7 +42,10 @@ const plugins = (tsConfig, extractCSS) => [
     transpiler: 'babel',
     babelConfig: {
       presets: ['@babel/preset-env', '@babel/preset-react'],
-      plugins: ['@babel/plugin-transform-runtime'],
+      plugins: [
+        '@babel/plugin-transform-runtime',
+        ['styled-components', { ssr: true, displayName: false }],
+      ],
     },
     include: ['**/*.ts', '**/*.tsx'],
     transpileOnly: false,

diff --git a/src/core/Alert/Alert/Alert.baseStyles.ts b/src/core/Alert/Alert/Alert.baseStyles.ts
@@ -6,29 +6,30 @@ import { baseAlertBaseStyles } from '../BaseAlert/BaseAlert.baseStyles';
 export const baseStyles = (theme: SuomifiTheme) => css`
   ${baseAlertBaseStyles(theme)}
 
-  & .fi-alert_icon-wrapper {
-    display: flex;
-    flex: 1 0 auto;
-    justify-content: flex-end;
+  & .fi-alert_style-wrapper {
+    display: block;
+    max-width: 1110px; /** Based on Suomi.fi front page header content width on large screens */
+    margin: auto;
   }
 
-  & .fi-alert_close-button-wrapper {
-    flex: 1 0 auto;
+  & .fi-alert_text-content-wrapper {
     display: flex;
-    flex-wrap: nowrap;
-    box-sizing: border-box;
-    margin-top: 7px;
-    margin-right: ${theme.spacing.xs};
-    margin-bottom: ${theme.spacing.insetM};
+    flex-direction: column;
+    padding: 0 ${theme.spacing.m};
+    margin: ${theme.spacing.s} auto ${theme.spacing.s} 0;
   }
 
   & .fi-alert_close-button {
     ${font(theme)('bodyTextSmall')}
     height: 40px;
-    min-width: 40px;
-    padding: 7px 8px;
+    display: inline-block;
+    padding: 7px;
+    margin-top: 7px;
+    margin-right: ${theme.spacing.xs};
+    margin-bottom: ${theme.spacing.insetM};
     border: 1px solid transparent;
     border-radius: ${theme.radius.basic};
+    white-space: nowrap;
 
     &:focus-visible {
       outline: 0;
@@ -50,13 +51,24 @@ export const baseStyles = (theme: SuomifiTheme) => css`
       height: 14px;
       margin-left: ${theme.spacing.xxs};
       transform: translateY(0.1em);
+
+      .fi-icon-base-fill {
+        fill: currentColor;
+      }
     }
   }
 
   /** Small screen variant styles */
   &.fi-alert--small-screen {
-    & .fi-alert_close-button-wrapper {
-      justify-content: flex-end;
+    & .fi-alert_style-wrapper {
+      width: 100%;
+    }
+
+    & .fi-alert_text-content-wrapper {
+      padding: 0 0 0 ${theme.spacing.xs};
+    }
+
+    & .fi-alert_close-button {
       margin: 0;
       & .fi-icon {
         margin-right: ${theme.spacing.xxs};
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		* @LJKaski @ketsappi @valger11
		* @LJKaski @ketsappi