Merge pull request #747 from vrk-kpa/develop

[Release] 11.0.0
vrk-kpa · Jun 15, 2023 · c3842cc · c3842cc
2 parents 7b48287 + 9376b49
commit c3842cc
Show file tree

Hide file tree

Showing 95 changed files with 9,061 additions and 1,905 deletions.
diff --git a/.styleguidist/assets/v10.0.4/build/bundle.44a8d11a.js b/.styleguidist/assets/v10.0.4/build/bundle.44a8d11a.js
diff --git a/.styleguidist/assets/v10.0.4/build/bundle.44a8d11a.js.LICENSE.txt b/.styleguidist/assets/v10.0.4/build/bundle.44a8d11a.js.LICENSE.txt
diff --git a/.styleguidist/assets/v10.0.4/index.html b/.styleguidist/assets/v10.0.4/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Suomifi-ui-components 10.0.4</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600&display=swap">
+  </head>
+  <body>
+    <div id="rsg-root"></div>
+    <script src="build/bundle.44a8d11a.js"></script>
+  </body>
+</html>
diff --git a/.styleguidist/icon.md b/.styleguidist/icon.md
@@ -0,0 +1 @@
+This component has been removed since library version 11.0.0. See documentation for [Icons](./#/Introduction/Icons).
diff --git a/.styleguidist/icons.md b/.styleguidist/icons.md
@@ -0,0 +1,115 @@
+Suomi.fi icons are available from the [suomifi-icons](https://github.com/vrk-kpa/suomifi-icons) library.
+
+The API varies by component type. Any props not mentioned in the respective APIs are passed to the `svg` element.
+
+Click on an icon to copy its component name to clipboard for easy importing.
+
+## Usage
+
+Icons can be imported either through `suomifi-ui-components` or directly from the `suomifi-icons` package.
+
+After importing the individual icons, they can be used via the APIs described below.
+
+```js
+import { IconArchive } from 'suomifi-ui-components';
+// OR import { IconArchive } from 'suomifi-icons';
+
+<IconArchive color="green" mousePointer />;
+```
+
+To use icons as a property for other components, simply give an icon element with the desired properties as a value for the component property.
+
+```js
+import { Button, IconLogin } from 'suomifi-ui-components';
+// OR import { IconLogin } from 'suomifi-icons';
+
+<Button iconRight={<IconLogin />}>Log in</Button>;
+```
+
+## Base icons
+
+Base icons are the most commonly used icon set. Their color and size can be customized via props. By default the color value is set to `currentColor`, so the icons inherit the current font color.
+
+### Base icons API
+
+| Property | Property type | Description |
+| --- | --- | --- |
+| className | `string` | Custom classname to extend or customize |
+| ariaLabel | `string` | Aria-label for SVG, undefined hides SVG from screen reader |
+| mousePointer | `boolean` | Show mouse cursor as hand-pointer |
+| color | `string` | Custom fill color |
+| fill | `string` | Custom fill color, takes precedence over color if both are provided |
+
+### Icons
+
+Click on an icon to copy its component name to clipboard for easy importing
+
+```jsx noeditor
+import { BaseIcons } from '../src/docs/Icons/Icons';
+<BaseIcons />;
+```
+
+## Illustrative icons
+
+Illustrative icons are 2-color icons that can be customized to fit the required color scheme.
+
+### Illustrative icons API
+
+| Property | Property type | Description |
+| --- | --- | --- |
+| className | `string` | Custom classname to extend or customize |
+| ariaLabel | `string` | Aria-label for SVG, undefined hides SVG from screen reader |
+| mousePointer | `boolean` | Show mouse cursor as hand-pointer |
+| baseColor | `string` | Custom base color |
+| highlightColor | `string` | Custom highlight color |
+
+### Icons
+
+Click on an icon to copy its component name to clipboard for easy importing
+
+```jsx noeditor
+import { IllustrativeIcons } from '../src/docs/Icons/Icons';
+<IllustrativeIcons />;
+```
+
+## Doctype icons
+
+Doctype icons portray different document types.
+
+### Doctype icons API
+
+| Property | Property type | Description |
+| --- | --- | --- |
+| className | `string` | Custom classname to extend or customize |
+| ariaLabel | `string` | Aria-label for SVG, undefined hides SVG from screen reader |
+| mousePointer | `boolean` | Show mouse cursor as hand-pointer |
+
+### Icons
+
+Click on an icon to copy its component name to clipboard for easy importing
+
+```jsx noeditor
+import { DoctypeIcons } from '../src/docs/Icons/Icons';
+<DoctypeIcons />;
+```
+
+## Logo icons
+
+LogoIcons contains variations of the Suomi.fi logo. It offers only limited customisation options.
+
+### Logo icons API
+
+| Property | Property type | Description |
+| --- | --- | --- |
+| className | `string` | Custom classname to extend or customize |
+| ariaLabel | `string` | Aria-label for SVG, undefined hides SVG from screen reader |
+| mousePointer | `boolean` | Show mouse cursor as hand-pointer |
+
+### Icons
+
+Click on an icon to copy its component name to clipboard for easy importing
+
+```jsx noeditor
+import { LogoIcons } from '../src/docs/Icons/Icons';
+<LogoIcons />;
+```
diff --git a/.styleguidist/styleguidist.sections.js b/.styleguidist/styleguidist.sections.js
@@ -65,6 +65,10 @@ module.exports = {
           name: 'Colors',
           content: './.styleguidist/colors.md',
         },
+        {
+          name: 'Icons',
+          content: './.styleguidist/icons.md',
+        },
         {
           name: 'Typography',
           content: './.styleguidist/typography.md',
@@ -162,7 +166,7 @@ module.exports = {
         },
         {
           name: 'Icon',
-          components: getComponents(['Icon', 'StaticIcon', 'LogoIcon']),
+          content: './.styleguidist/icon.md',
         },
         {
           name: 'MultiSelect',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "10.0.4",
+  "version": "11.0.0",
   "description": "Suomi.fi UI component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -168,7 +168,7 @@
     "react-popper": "2.3.0",
     "react-svg": "15.1.3",
     "suomifi-design-tokens": "5.0.0",
-    "suomifi-icons": "6.5.0"
+    "suomifi-icons": "7.0.0"
   },
   "peerDependencies": {
     "@types/styled-components": ">=5.1.9",

diff --git a/src/core/Alert/Alert/Alert.tsx b/src/core/Alert/Alert/Alert.tsx
@@ -8,11 +8,11 @@ import {
   HtmlButtonProps,
   HtmlDivWithRefProps,
 } from '../../../reset';
-import { Icon } from '../../../core/Icon/Icon';
 import { AutoId } from '../../utils/AutoId/AutoId';
 import { getConditionalAriaProp } from '../../../utils/aria';
 import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme';
 import { baseStyles } from './Alert.baseStyles';
+import { IconClose, IconError, IconInfo, IconWarning } from 'suomifi-icons';
 
 const baseClassName = 'fi-alert';
 const alertClassNames = {
@@ -63,7 +63,6 @@ class BaseAlert extends Component<AlertProps> {
       ...closeButtonPassProps
     } = closeButtonProps;
 
-    const variantIcon = status === 'neutral' ? 'info' : status;
     return (
       <HtmlDivWithRef
         as="section"
@@ -74,12 +73,30 @@ class BaseAlert extends Component<AlertProps> {
         })}
       >
         <HtmlDiv className={alertClassNames.styleWrapper}>
-          <Icon
-            icon={variantIcon}
-            className={classnames(alertClassNames.icon, {
-              [`${alertClassNames.icon}--${status}`]: !!status,
-            })}
-          />
+          {status === 'warning' && (
+            <IconWarning
+              className={classnames(
+                alertClassNames.icon,
+                `${alertClassNames.icon}--${status}`,
+              )}
+            />
+          )}
+          {status === 'error' && (
+            <IconError
+              className={classnames(
+                alertClassNames.icon,
+                `${alertClassNames.icon}--${status}`,
+              )}
+            />
+          )}
+          {status === 'neutral' && (
+            <IconInfo
+              className={classnames(
+                alertClassNames.icon,
+                `${alertClassNames.icon}--${status}`,
+              )}
+            />
+          )}
 
           <HtmlDiv
             className={alertClassNames.textContentWrapper}
@@ -102,7 +119,7 @@ class BaseAlert extends Component<AlertProps> {
             {...closeButtonPassProps}
           >
             {!smallScreen ? closeText.toUpperCase() : ''}
-            <Icon icon="close" />
+            <IconClose />
           </HtmlButton>
         </HtmlDiv>
       </HtmlDivWithRef>

diff --git a/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap b/src/core/Alert/Alert/__snapshots__/Alert.test.tsx.snap
@@ -112,6 +112,30 @@ exports[`props children should match snapshot 1`] = `
   box-sizing: border-box;
 }
 
+.c5 {
+  vertical-align: baseline;
+}
+
+.c5.fi-icon {
+  display: inline-block;
+}
+
+.c5 .fi-icon-base-fill {
+  fill: currentColor;
+}
+
+.c5 .fi-icon-base-stroke {
+  stroke: currentColor;
+}
+
+.c5.fi-icon--cursor-pointer {
+  cursor: pointer;
+}
+
+.c5.fi-icon--cursor-pointer * {
+  cursor: inherit;
+}
+
 .c3 {
   vertical-align: baseline;
 }
@@ -334,7 +358,7 @@ exports[`props children should match snapshot 1`] = `
       >
         <path
           class="fi-icon-base-fill"
-          d="M12 0c6.617 0 12 5.383 12 12s-5.383 12-12 12S0 18.617 0 12 5.383 0 12 0zm0 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm.003 8a1 1 0 011 1v6h1a1 1 0 010 2H10a1 1 0 010-2h1v-5h-1a1 1 0 010-2h2.003zm-.501-5a1.5 1.5 0 01.145 2.994L11.502 8H11.5a1.5 1.5 0 110-3h.002z"
+          d="M12 0c6.617 0 12 5.383 12 12s-5.383 12-12 12S0 18.617 0 12 5.383 0 12 0Zm0 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2Zm.003 8a1 1 0 0 1 1 1v6h1a1 1 0 0 1 0 2H10a1 1 0 0 1 0-2h1v-5h-1a1 1 0 0 1 0-2h2.003Zm-.501-5a1.5 1.5 0 0 1 .145 2.994L11.502 8H11.5a1.5 1.5 0 1 1 0-3h.002Z"
           fill="#222"
           fill-rule="evenodd"
         />
@@ -361,7 +385,7 @@ exports[`props children should match snapshot 1`] = `
         CLOSE
         <svg
           aria-hidden="true"
-          class="fi-icon c3"
+          class="fi-icon c5"
           focusable="false"
           height="1em"
           viewBox="0 0 24 24"
@@ -370,7 +394,7 @@ exports[`props children should match snapshot 1`] = `
         >
           <path
             class="fi-icon-base-fill"
-            d="M4.75 3.3L12 10.55l7.25-7.25a1.026 1.026 0 011.45 1.45L13.45 12l7.25 7.25a1.026 1.026 0 01-1.45 1.45L12 13.45 4.75 20.7a1.026 1.026 0 01-1.45-1.45L10.55 12 3.3 4.75A1.026 1.026 0 014.75 3.3z"
+            d="M4.75 3.3 12 10.55l7.25-7.25a1.026 1.026 0 0 1 1.45 1.45L13.45 12l7.25 7.25a1.026 1.026 0 0 1-1.45 1.45L12 13.45 4.75 20.7a1.026 1.026 0 0 1-1.45-1.45L10.55 12 3.3 4.75A1.026 1.026 0 0 1 4.75 3.3Z"
             fill="#222"
             fill-rule="evenodd"
           />

diff --git a/src/core/Alert/InlineAlert/InlineAlert.tsx b/src/core/Alert/InlineAlert/InlineAlert.tsx
@@ -2,7 +2,7 @@ import React, { Component, forwardRef, ReactNode } from 'react';
 import { default as styled } from 'styled-components';
 import classnames from 'classnames';
 import { HtmlDiv, HtmlDivWithRef, HtmlDivWithRefProps } from '../../../reset';
-import { Icon } from '../../../core/Icon/Icon';
+import { IconError, IconWarning } from 'suomifi-icons';
 import { AutoId } from '../../utils/AutoId/AutoId';
 import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme';
 import { baseStyles } from './InlineAlert.baseStyles';
@@ -61,9 +61,15 @@ class BaseInlineAlert extends Component<InlineAlertProps & InnerRef> {
         })}
       >
         <HtmlDiv className={inlineAlertClassNames.styleWrapper}>
-          {status !== 'neutral' && (
-            <Icon
-              icon={status}
+          {status === 'warning' && (
+            <IconWarning
+              className={classnames(inlineAlertClassNames.icon, {
+                [`${inlineAlertClassNames.icon}--${status}`]: !!status,
+              })}
+            />
+          )}
+          {status === 'error' && (
+            <IconError
               className={classnames(inlineAlertClassNames.icon, {
                 [`${inlineAlertClassNames.icon}--${status}`]: !!status,
               })}

diff --git a/src/core/Breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx b/src/core/Breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { default as styled } from 'styled-components';
 import { Link, LinkProps } from '../../Link';
-import { Icon } from '../../Icon/Icon';
 import { HtmlSpan } from '../../../reset';
 import classnames from 'classnames';
 import { baseStyles } from './BreadcrumbLink.baseStyles';
 import { SuomifiThemeConsumer, SuomifiThemeProp } from '../../theme';
+import { IconLinkBreadcrumb } from 'suomifi-icons';
 
 const baseClassName = 'fi-breadcrumb-link';
 const breadcrumbClassNames = {
@@ -41,7 +41,7 @@ const BaseBreadcrumbLink = (props: BreadcrumbLinkProps & SuomifiThemeProp) => {
           >
             {children}
           </Link>
-          <Icon icon="linkBreadcrumb" className={breadcrumbClassNames.icon} />
+          <IconLinkBreadcrumb className={breadcrumbClassNames.icon} />
         </>
       ) : (
         <HtmlSpan

diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx
@@ -147,16 +147,16 @@ export const baseStyles = (theme: SuomifiTheme) => css`
   ${secondaryNoBorderStyles(theme)}
   ${linkStyles(theme)}
   
-  & > .fi-button_icon {
+  & > .fi-button_icon > .fi-icon {
     width: 16px;
     height: 16px;
     margin-right: ${theme.spacing.insetM};
-    vertical-align: middle;
+    vertical-align: text-bottom;
     transform: translateY(-0.1em);
-    &.fi-button_icon--right {
-      margin-right: 0;
-      margin-left: ${theme.spacing.insetM};
-    }
+  }
+  & > .fi-button_icon--right > .fi-icon {
+    margin-right: 0;
+    margin-left: ${theme.spacing.insetM};
   }
 
   &.fi-button--disabled > .fi-button_icon {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This component has been removed since library version 11.0.0. See documentation for [Icons](./#/Introduction/Icons).