Merge pull request #1256 from City-of-Helsinki/release-3.7.0

Release 3.7.0
City-of-Helsinki · Apr 11, 2024 · 08116a6 · 08116a6
2 parents e6ef08c + 4e3e6b9
commit 08116a6
Show file tree

Hide file tree

Showing 302 changed files with 1,455 additions and 837 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,81 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.7.0] - April, 11, 2024
+
+### React
+
+#### Added
+
+- [CookieConsent] A new cookie is set containing version number of consents.
+
+#### Changed
+
+- [Link] Possibility to style a Link as button with `useButtonStyles` prop.
+- [Header] Fixed an issue with inconsistent css-class order in SSR.
+- [Select] Marked most props as deprecated. The redesigned next major version will have different props.
+- [CookieConsent] Consent cookie's default domain was changed to window.location.hostname.
+- [Combobox] Marked the component as deprecated
+- [Footer.Base] Added `aria-hidden` to separators
+
+#### Fixed
+
+- [FileInput] FileInput accepts capitalized extensions (.png vs .PNG)
+- [TextInput] Fix info, success and error icon shrinking when the description was long.
+
+### Core
+
+#### Changed
+
+- [Link] Possibility to style a Link as button.
+
+#### Fixed
+
+- [TextInput] Fix info, success and error icon shrinking when the description was long.
+
+### Documentation
+
+#### Added
+
+- [Hero] Added note that hero should not be used with side navigation.
+
+#### Changed
+
+- [CookieConsent] Cookie guidelines recommend using subdomains
+- [Dropdown] Added notification about deprecated Combobox and deprecated Select props
+- [Link] Added examples of styling Link as a button.
+- [CookieConsent] Updated the list of cookies
+- Updated Getting started-section for designers from Sketch/Abstract guidelines to Figma guidelines
+  - This includes: Contributing guide, FAQ, Versioning, and a new Figma tutorial
+
+#### Fixed
+
+- [Typography] Fixed typo in Typography table, mobile heading title had extra x.
+
+### Figma
+
+### Changed
+
+– [Design kit] The name on the project, file and cover is updated from HDS UI kit to HDS Design kit as per change of naming conventions to match the implementation more.
+– [Footer] Copyright year updated from 2023 to 2024
+
+### Fixed
+
+– [Button] Focus ring stroke width fixed from 2px to 3px
+– [Dialog] Fixed icon on Danger-dialog from info to alert to match implementation
+– [NavigationPattern] Broken hero on NavigationPattern medium size example fixed.
+
+### Changed
+
+– [Design kit] The name on the project, file and cover is updated from HDS UI kit to HDS Design kit as per change of naming conventions to match the implementation more.
+– [Footer] Copyright year updated from 2023 to 2024
+
+### Fixed
+
+– [Button] Focus ring stroke width fixed from 2px to 3px
+– [Dialog] Fixed icon on Danger-dialog from info to alert to match implementation
+– [NavigationPattern] Broken hero on NavigationPattern medium size example fixed.
+
 ## [3.6.0] - March, 6, 2024
 
 ### React

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Core styles for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "copyfiles": "2.2.0",
     "cssnano": "4.1.10",
-    "hds-design-tokens": "3.6.0",
+    "hds-design-tokens": "3.7.0",
     "postcss": "8.2.15",
     "postcss-cli": "8.3.1",
     "postcss-import": "12.0.1",

diff --git a/packages/core/src/components/link/link.stories.js b/packages/core/src/components/link/link.stories.js
@@ -95,3 +95,10 @@ export const withCustomIcon = () => `
   </a>
 `
 withCustomIcon.storyName = 'With a custom icon';
+
+export const withButtonStyles = () => `
+  <a href="https://hds.hel.fi" class="hds-button hds-button--primary" aria-label="Button styled link. Opens in external domain">
+    <span class="hds-button__label">Link with button styles</span>
+  </a>
+`
+withButtonStyles.storyName = 'With Button styles';
diff --git a/packages/core/src/components/text-input/text-input.css b/packages/core/src/components/text-input/text-input.css
@@ -194,6 +194,7 @@
   background: var(--color-error);
   content: '';
   display: inline-block;
+  flex-shrink: 0;
   height: var(--icon-size);
   margin-right: var(--spacing-2-xs);
   -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
@@ -224,6 +225,7 @@
   background: var(--color-success);
   content: '';
   display: inline-block;
+  flex-shrink: 0;
   height: var(--icon-size);
   margin-right: var(--spacing-2-xs);
   -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E");
@@ -254,6 +256,7 @@
   background: var(--color-info);
   content: '';
   display: inline-block;
+  flex-shrink: 0;
   height: var(--icon-size);
   margin-right: var(--spacing-2-xs);
   -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E");

diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hds-design-tokens",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Design tokens for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",

diff --git a/packages/hds-js/package.json b/packages/hds-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hds-js",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Vanilla js for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",

diff --git a/packages/react/.eslintrc.json b/packages/react/.eslintrc.json
@@ -23,7 +23,7 @@
   "rules": {
     "no-use-before-define": "off",
     "default-param-last": "off",
-    "@typescript-eslint/no-use-before-define": ["error"],
+    "@typescript-eslint/no-use-before-define": "error",
     "no-shadow": "off", // replaced by ts-eslint rule below
     "@typescript-eslint/no-shadow": "error",
     "import/no-extraneous-dependencies": [
@@ -36,6 +36,14 @@
       "error",
       {
         "groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]],
+        "pathGroups": [
+          {
+            "pattern": "./**/*.{css,scss}",
+            "group": "sibling",
+            "position": "before"
+          }
+        ],
+        "distinctGroup": false,
         "newlines-between": "always"
       }
     ],
@@ -82,7 +90,7 @@
       }
     ],
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["error"]
+    "@typescript-eslint/no-unused-vars": "error"
   },
   "settings": {
     "react": {

diff --git a/...ges/react/.loki/reference/chrome_iphone7_Components_Link_With_Button_styles.png b/...ges/react/.loki/reference/chrome_iphone7_Components_Link_With_Button_styles.png
diff --git a/...ages/react/.loki/reference/chrome_laptop_Components_Link_With_Button_styles.png b/...ages/react/.loki/reference/chrome_laptop_Components_Link_With_Button_styles.png
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hds-react",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "React components for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -133,7 +133,7 @@
     "crc-32": "1.2.0",
     "date-fns": "2.16.1",
     "downshift": "6.0.6",
-    "hds-core": "3.6.0",
+    "hds-core": "3.7.0",
     "http-status-typed": "^1.0.1",
     "jwt-decode": "^3.1.2",
     "kashe": "1.0.4",

diff --git a/packages/react/src/components/button/Button.tsx b/packages/react/src/components/button/Button.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import '../../styles/base.module.css';
-import { LoadingSpinner } from '../loadingSpinner';
 import styles from './Button.module.scss';
+import { LoadingSpinner } from '../loadingSpinner';
 import classNames from '../../utils/classNames';
 
 export type ButtonSize = 'default' | 'small';