Merge pull request #631 from vrk-kpa/develop

[Release] 8.0.0
vrk-kpa · Jun 7, 2022 · 4dcd4ad · 4dcd4ad
2 parents a40f6a6 + 23f3690
commit 4dcd4ad
Show file tree

Hide file tree

Showing 54 changed files with 1,831 additions and 1,144 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1 +1 @@
-*       @LJKaski @ketsappi
+*       @LJKaski @ketsappi @riitasointi @Riippi
diff --git a/.styleguidist/ComponentsList.tsx b/.styleguidist/ComponentsList.tsx
@@ -21,10 +21,13 @@ export default class ComponentsList extends Component<ComponentsListProps> {
 
     if (hide) return null;
 
+    const shouldSortAlphabetically =
+      items.length > 0 && items[0].sections?.length === 0;
+
     return (
       <DefaultComponentsList
         {...passProps}
-        items={hashPath.length === 2 ? sortItems(items) : items}
+        items={shouldSortAlphabetically ? sortItems(items) : items}
       />
     );
   }

diff --git a/.styleguidist/modules.md b/.styleguidist/modules.md
diff --git a/.styleguidist/primitive.md b/.styleguidist/primitive.md
diff --git a/.styleguidist/styleguidist.sections.js b/.styleguidist/styleguidist.sections.js
@@ -82,136 +82,122 @@ module.exports = {
     {
       name: 'Components',
       content: './.styleguidist/components.md',
+      components: getComponents(primitiveComponents),
       sections: [
         {
-          name: 'Primitive',
-          content: './.styleguidist/primitive.md',
-          components: getComponents(primitiveComponents),
-          sections: [
-            {
-              name: 'Toggle',
-              components: getComponentWithVariants('Form/Toggle')([
-                'ToggleButton/ToggleButton',
-                'ToggleInput/ToggleInput',
-              ]),
-            },
-            {
-              name: 'Text',
-              components: getComponents(['Text', 'Paragraph']),
-            },
-            {
-              name: 'Alert',
-              components: getComponentWithVariants('Alert')([
-                'Alert/Alert',
-                'InlineAlert/InlineAlert',
-              ]),
-            },
+          name: 'Toggle',
+          components: getComponentWithVariants('Form/Toggle')([
+            'ToggleButton/ToggleButton',
+            'ToggleInput/ToggleInput',
+          ]),
+        },
+        {
+          name: 'Text',
+          components: getComponents(['Text', 'Paragraph']),
+        },
+        {
+          name: 'Alert',
+          components: getComponentWithVariants('Alert')([
+            'Alert/Alert',
+            'InlineAlert/InlineAlert',
+          ]),
+        },
 
-            {
-              name: 'Checkbox',
-              components: getComponentWithVariants('Form/Checkbox')([
-                'Checkbox',
-                'CheckboxGroup',
-              ]),
-            },
-            {
-              name: 'RadioButton',
-              components: getComponentWithVariants('Form/RadioButton')([
-                'RadioButton',
-                'RadioButtonGroup',
-              ]),
-            },
-            {
-              name: 'Link',
-              components: getComponentWithVariants('Link')([
-                'Link/Link',
-                'SkipLink/SkipLink',
-                'ExternalLink/ExternalLink',
-              ]),
-            },
-            {
-              name: 'Chip',
-              components: getComponentWithVariants('Chip')([
-                'Chip/Chip',
-                'StaticChip/StaticChip',
-              ]),
-            },
-            {
-              name: 'Icon',
-              components: getComponents(['Icon', 'StaticIcon', 'LogoIcon']),
-            },
-            {
-              name: 'MultiSelect',
-              components: getComponentWithVariants('Form/Select')([
-                'MultiSelect/MultiSelect/MultiSelect',
-              ]),
-            },
-            {
-              name: 'SingleSelect',
-              components: getComponentWithVariants('Form/Select')([
-                'SingleSelect/SingleSelect',
-              ]),
-            },
-          ],
-          expand: true,
+        {
+          name: 'Checkbox',
+          components: getComponentWithVariants('Form/Checkbox')([
+            'Checkbox',
+            'CheckboxGroup',
+          ]),
         },
         {
-          name: 'Modules',
-          content: './.styleguidist/modules.md',
-          sections: [
-            {
-              name: 'Breadcrumb',
-              components: getComponentWithVariants('Breadcrumb')([
-                'Breadcrumb/Breadcrumb',
-                'BreadcrumbLink/BreadcrumbLink',
-              ]),
-            },
-            {
-              name: 'Dropdown',
-              components: getComponentWithVariants('Dropdown')([
-                'Dropdown/Dropdown',
-                'DropdownItem/DropdownItem',
-              ]),
-            },
-            {
-              name: 'LanguageMenu',
-              components: getComponentWithVariants('LanguageMenu')([
-                'LanguageMenu/LanguageMenu',
-                'LanguageMenuItem/LanguageMenuItem',
-                'LanguageMenuLink/LanguageMenuLink',
-              ]),
-            },
-            {
-              name: 'Notification',
-              components: getComponents(['Notification']),
-            },
-            {
-              name: 'Expander',
-              components: getComponentWithVariants('Expander')([
-                'Expander/Expander',
-                'ExpanderGroup/ExpanderGroup',
-                'ExpanderTitle/ExpanderTitle',
-                'ExpanderTitleButton/ExpanderTitleButton',
-                'ExpanderContent/ExpanderContent',
-              ]),
-            },
-            {
-              name: 'Modal',
-              components: getComponentWithVariants('Modal')([
-                'Modal/Modal',
-                'ModalContent/ModalContent',
-                'ModalFooter/ModalFooter',
-              ]),
-            },
-            {
-              name: 'Toast',
-              components: getComponents(['Toast']),
-            },
-          ],
-          expand: true,
+          name: 'RadioButton',
+          components: getComponentWithVariants('Form/RadioButton')([
+            'RadioButton',
+            'RadioButtonGroup',
+          ]),
+        },
+        {
+          name: 'Link',
+          components: getComponentWithVariants('Link')([
+            'Link/Link',
+            'SkipLink/SkipLink',
+            'ExternalLink/ExternalLink',
+          ]),
+        },
+        {
+          name: 'Chip',
+          components: getComponentWithVariants('Chip')([
+            'Chip/Chip',
+            'StaticChip/StaticChip',
+          ]),
+        },
+        {
+          name: 'Icon',
+          components: getComponents(['Icon', 'StaticIcon', 'LogoIcon']),
+        },
+        {
+          name: 'MultiSelect',
+          components: getComponentWithVariants('Form/Select')([
+            'MultiSelect/MultiSelect/MultiSelect',
+          ]),
+        },
+        {
+          name: 'SingleSelect',
+          components: getComponentWithVariants('Form/Select')([
+            'SingleSelect/SingleSelect',
+          ]),
+        },
+        {
+          name: 'Breadcrumb',
+          components: getComponentWithVariants('Breadcrumb')([
+            'Breadcrumb/Breadcrumb',
+            'BreadcrumbLink/BreadcrumbLink',
+          ]),
+        },
+        {
+          name: 'Dropdown',
+          components: getComponentWithVariants('Dropdown')([
+            'Dropdown/Dropdown',
+            'DropdownItem/DropdownItem',
+          ]),
+        },
+        {
+          name: 'LanguageMenu',
+          components: getComponentWithVariants('LanguageMenu')([
+            'LanguageMenu/LanguageMenu',
+            'LanguageMenuItem/LanguageMenuItem',
+            'LanguageMenuLink/LanguageMenuLink',
+          ]),
+        },
+        {
+          name: 'Notification',
+          components: getComponents(['Notification']),
+        },
+        {
+          name: 'Expander',
+          components: getComponentWithVariants('Expander')([
+            'Expander/Expander',
+            'ExpanderGroup/ExpanderGroup',
+            'ExpanderTitle/ExpanderTitle',
+            'ExpanderTitleButton/ExpanderTitleButton',
+            'ExpanderContent/ExpanderContent',
+          ]),
+        },
+        {
+          name: 'Modal',
+          components: getComponentWithVariants('Modal')([
+            'Modal/Modal',
+            'ModalContent/ModalContent',
+            'ModalFooter/ModalFooter',
+          ]),
+        },
+        {
+          name: 'Toast',
+          components: getComponents(['Toast']),
         },
       ],
-      sectionDepth: 2,
+      sectionDepth: 1,
       expand: true,
     },
   ],

diff --git a/.styleguidist/styleguidist.styles.js b/.styleguidist/styleguidist.styles.js
@@ -71,24 +71,15 @@ module.exports = {
     type: {
       display: 'block',
       overflowY: 'auto',
-      maxHeight: '6em',
+      maxHeight: '144px',
       minWidth: '20vw',
     },
   },
   Table: {
     cell: {
       position: 'relative',
-      '&:after': {
-        display: 'block',
-        content: '""',
-        position: 'absolute',
-        top: '0',
-        height: '100%',
-        width: '100%',
-        background:
-          'linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 4.5em, rgba(255, 255, 255, 1) 6em)',
-        pointerEvents: 'none',
-      },
+      borderBottom: '1px solid #e8e8e8',
+      lineHeight: '24px',
     },
   },
   Playground: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "Suomi.fi UI component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -12,7 +12,7 @@
   ],
   "sideEffects": false,
   "engines": {
-    "node": ">=8.0.0"
+    "node": ">=14.0.0"
   },
   "repository": {
     "type": "git",
@@ -23,7 +23,9 @@
     "Aappo Ålander",
     "Joonas Kaski",
     "Sami Korpela",
-    "Valtteri Laukkanen"
+    "Valtteri Laukkanen",
+    "Ilkka Pättikangas",
+    "Mikko Riippi"
   ],
   "license": "MIT",
   "bugs": {
@@ -162,7 +164,7 @@
     "react-popper": "2.2.5",
     "react-svg": "14.1.14",
     "suomifi-design-tokens": "3.2.0",
-    "suomifi-icons": "^6.1.0"
+    "suomifi-icons": "^6.2.0"
   },
   "peerDependencies": {
     "@types/styled-components": ">=5.1.9",

diff --git a/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -183,7 +183,6 @@ exports[`calling render with the same component on the same container does not r
 }
 
 .c7 {
-  color: hsl(0,0%,16%);
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
   -ms-letter-spacing: 0;
@@ -197,37 +196,40 @@ exports[`calling render with the same component on the same container does not r
   font-size: 18px;
   line-height: 1.5;
   font-weight: 400;
+}
+
+.c7.fi-link {
   color: hsl(212,63%,45%);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c7:hover,
-.c7:active,
-.c7:focus,
-.c7:focus-within {
+.c7.fi-link:hover,
+.c7.fi-link:active,
+.c7.fi-link:focus,
+.c7.fi-link:focus-within {
   color: hsl(212,63%,45%);
 }
 
-.c7:focus,
-.c7:focus-within {
+.c7.fi-link:focus,
+.c7.fi-link:focus-within {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c7:focus {
+.c7.fi-link:focus {
   outline: 0;
   border-radius: 2px;
   box-shadow: 0 0 0 2px hsl(196,77%,44%);
 }
 
-.c7:hover,
-.c7:active {
+.c7.fi-link:hover,
+.c7.fi-link:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c7:visited {
+.c7.fi-link:visited {
   color: hsl(284,36%,45%);
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		* @LJKaski @ketsappi
		* @LJKaski @ketsappi @riitasointi @Riippi