Merge pull request #1160 from City-of-Helsinki/release-3.1.0

Release 3.1.0

CHANGELOG.md

@@ -5,6 +5,100 @@ 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.1.0] - October, 31, 2023
+
+### React
+
+#### Added
+
+- [Footer] Added onLogoClick callback
+- [Container] Added a new attribute to align it with Header
+- [Login] New login components and utilities to provide OIDC authentication and api tokens
+
+#### Changed
+
+- [Checkbox, DateInput, Dropdowns, FileInput, NumberInput, PasswordInput, PhoneInput, SelectionGroup, NumberInput, TextInput, TextArea, TimeInput] Improved readability and accessibility of error, success and info states
+
+#### Fixed
+
+- [StepByStep] Fixed React warnings about missing keys.
+- [Header] onDidChangeLanguage is now called only when language is changed.
+- [Header] Fixed header dropdown overflow issues
+- [DatePicker] Fixed selected date getting reseted in a controlled state
+- [CookieConsent, Dropdown, FileInput, NumberInput, SearchInput, TextInput] Fixed button focus inside input components
+- [Tag] Fixed margins with several lines long texts
+
+### Core
+
+#### Changed
+
+- [Checkbox, NumberInput, PasswordInput, PhoneInput, SelectionGroup, NumberInput, TextInput, TextArea] Improved readability and accessibility of error, success and info states
+
+#### Fixed
+
+- [Tag] Border-radiuses and paddings to match designs
+- [Link] Removed underline when using Button styles with Link
+
+### Documentation
+
+#### Added
+
+- [Footer] Added onLogoClick callback
+- [Form validation] Live examples for validation pattern
+- [Form validation] Links to multi-page guidelines and components
+- [Login] Documentation for the new Login system
+
+#### Changed
+
+- [FileInput] Changed from beta to stable
+- [Pagination] Changed from beta to stable
+- [SearchInput] Changed from beta to stable
+
+### Fixed
+
+Several new line issues breaking the documentation and examples
+This is HDS -competition page was broken and not available
+Unified error message implementation, examples and documentation
+
+### Design kit
+
+### Figma
+
+We're excited to announce the availability of the HDS UI Kit in Figma (.fig) format! You can access it within the "hds-design-kit.zip" and import the file to use in your projects. Please be aware that this Figma file is independent and won't receive automatic updates from the original file.
+
+If you're looking for an updatable Figma library, feel free to get in touch with the HDS team. An updatable version is accessible with Helsinki licenses, and we plan to make it available as a community file in the future. Stay tuned for updates!
+
+#### Changed
+
+- [Color styles] Quality of life improvement: added hex codes after color names for ease of access
+- [Color styles] Changed greyscale color names to match token names, e.g. Grey-10 -> Black-10
+- [Highlight] Changed the Quote to be a variant of Highlight component, not its own component, to match implementation
+
+[HDS Form Components] Updated error, success and info text shared symbols in all input components
+
+#### Removed
+
+[Radio button] Removed error states for individual radio buttons, because individual radio buttons should not have an error state in any use cases.
+
+#### Fixed
+
+- [Highlight] Fixed paddings on all sizes and font, line-height to match implementation
+- [Highlight] Linked text properties back to quote variants
+- [Highlight] Correct color style attached to text color
+
+### Sketch/Abstract
+
+#### Changed
+
+- [HDS Form Components] Updated error, success and info text shared symbols in all input symbols
+
+#### Removed
+
+- [Radio button] Removed error states for individual radio buttons, because individual radio buttons should not have an error state in any use cases.
+
+#### Fixed
+
+- [Dropdown] Border for dropdown menu fixed from 2px to 1px and example updated according to that
 
 ## [3.0.0] - October, 4, 2023
 
@@ -38,7 +132,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 #### Changed
 
 - Supported browserlist updated
-- [RadioButton] Default value is not recommended anymore 
+- [RadioButton] Default value is not recommended anymore
 - [Footer] Redesigned and rebuilt
 
 #### Fixed
@@ -68,7 +162,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [Header] Added new Header and its sub-components' documentations
 - [Footer] Added new Footer and its sub-components' documentations
-- Added documention for focus colour tokens 
+- Added documention for focus colour tokens
 - Added navigation pattern guidelines
 - Added new releases page
 - Added new guide how to migrate to 3.0.0
@@ -101,7 +195,7 @@ There is a brand new Figma library available. The licenses are checked and provi
 #### Added
 
 - [Footer] New symbols following the hel.fi visual style. New symbols also include changes to all Footer sections. Service title is now mandatory. The Helsinki logo moved to the Base section. Separate symbols for Footers with custom content (e.g. partner information). New variant for the Utility section which allow more utility links and link groups
-- [Header] New component replacing HDS Navigation  
+- [Header] New component replacing HDS Navigation
 
 #### Changed
 
@@ -120,37 +214,44 @@ There is a brand new Figma library available. The licenses are checked and provi
 ### React
 
 #### Added
+
 - [Header] New Header component to wrap all its child components
 - [Header.UniversalBar] Optional component to display useful quick links
 - [Header.ActionBar] Mandatory component to display service logo, language selection, search and user login
 - [Header.NavigationMenu] Mandatory component to display navigation links
 
 #### Changed
+
 - [LinkBox] Property name `withBorder` changed to `border`
 - [Koros] Renamed variants Wave to Vibration and Storm to Wave
 - Supported browserlist updated
 
 #### Deprecated
+
 - [Navigation] New Header component will be the replacement
 - [Tag] Rectangular version (default)
 - [StatusLabel] Rectangular version (default)
 
 ### Core
 
 #### Changed
+
 - [Koros] Renamed variants Wave to Vibration and Storm to Wave
 
 #### Deprecated
+
 - [Tag] Rectangular version (default)
 - [StatusLabel] Rectangular version (default)
 
 ### Documentation
 
 #### Added
+
 - [Header] Documentation - still a work in progress
 - Helpful tooltip to explain statuses
 
 #### Changed
+
 - [Koros] Renamed variants Wave to Vibration and Storm to Wave
 
 ### Design kit
@@ -164,29 +265,35 @@ There is a brand new Figma library available. The licenses are checked and provi
 ### React
 
 #### Added
+
 - [Highlight] New component for quotes and text highlights
 
 ### Core
 
 #### Added
+
 - [Highlight] New component for quotes and text highlights
 
 ### Documentation
 
 #### Added
+
 - [Highlight] Documentation for new Highlight component
 - Document tokens for focus colours
 
 #### Changed
+
 - Improved docs for creating new react components
 - Updated contributing guide
 
 #### Fixed
+
 - Updated package dependencies
 
 ### Design kit
 
 #### Added
+
 - Figma API icon library export script
 
 ## [2.16.0] - June, 28, 2023

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "3.0.0",
+  "version": "3.1.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.0.0",
+    "hds-design-tokens": "3.1.0",
     "normalize.css": "8.0.1",
     "postcss": "8.2.15",
     "postcss-cli": "8.3.1",

packages/core/src/components/button/button.css

@@ -40,6 +40,7 @@
   min-width: var(--min-size);
   padding: 0 var(--spacing-2-xs);
   position: relative;
+  text-decoration: none;
 
   /*
   * Normalize.css rule

packages/core/src/components/checkbox/checkbox.css

@@ -137,24 +137,26 @@
 
 /* ERROR */
 .hds-checkbox__error-text {
-  color: var(--color-error);
-  display: block;
+  background-color: var(--color-error-light);
+  border-left: 8px solid var(--color-error);
+  color: var(--color-black);
+  display: flex;
   flex-basis: 100%;
   font-size: var(--fontsize-body-m);
   margin-top: var(--spacing-2-xs);
-  padding-left: calc(var(--icon-size) + var(--spacing-2-xs));
+  padding: var(--spacing-2-xs);
   position: relative;
 }
 
 .hds-checkbox__error-text:before {
   background: var(--color-error);
   content: '';
+  display: inline-block;
   height: var(--icon-size);
-  left: 0;
-  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");
+  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");
+  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");
   pointer-events: none;
-  position: absolute;
-  top: 0;
   width: var(--icon-size);
 }
 

packages/core/src/components/checkbox/checkbox.stories.js

@@ -5,8 +5,6 @@ import '../selection-group/selection-group.css';
 const errorTextId = 'checkbox-error-text';
 const helperTextId = 'checkbox-helper-text';
 const getLabel = (id = 'input', label = 'Option') => `<label for="${id}"  class="hds-checkbox__label">${label}</label>`;
-const getHelperText = (text = 'Assistive text') => `<span id="${helperTextId}" class="helper-text">${text}</span>`;
-const getErrorText = (text = 'Error text') => `<span id="${errorTextId}" class="hds-checkbox__error-text">${text}</span>`;
 
 export default {
   title: 'Components/Checkbox',
@@ -56,10 +54,10 @@ export const SelectedDisabled = () => `
 SelectedDisabled.storyName = 'Selected & disabled';
 
 export const Invalid = () => `
-    <div class="hds-checkbox">
+    <div class="hds-checkbox" style="width: 300px">
       <input type="checkbox" id="checkbox6" class="hds-checkbox__input" value="baz" aria-describedby="${errorTextId}" />
       ${getLabel('checkbox6')}
-      ${getErrorText()}
+     <span id="number-input-error" class="hds-checkbox__error-text">Invalid value</span>
     </div>
 `;
 
@@ -129,6 +127,6 @@ export const WithHelperText = () => `
     <div class="hds-checkbox">
       <input type="checkbox" id="checkbox7" class="hds-checkbox__input" value="foo" aria-describedby="${helperTextId}"/>
       ${getLabel('checkbox7')}
-      ${getHelperText()}
+      <span id="${helperTextId}" class="helper-text">Assistive text</span>
     </div>
 `;

packages/core/src/components/error-summary/error-summary.stories.js

@@ -12,7 +12,7 @@ export const Default = () => `
     <section aria-label="Error summary" class="hds-notification hds-notification--error">
       <div class="hds-notification__content">
         <div class="hds-notification__label" role="heading" aria-level="2" tabindex="-1">
-          <span class="hds-icon hds-icon--alert-circle" aria-hidden="true"></span>
+          <span class="hds-icon hds-icon--alert-circle-fill" aria-hidden="true"></span>
           <span>Form contains following errors</span>
         </div>
         <div class="hds-notification__body hds-error-summary__body">
@@ -36,7 +36,7 @@ export const Large = () => `
     <section aria-label="Error summary" class="hds-notification hds-notification--error hds-notification--large">
       <div class="hds-notification__content">
         <div class="hds-notification__label" role="heading" aria-level="2" tabindex="-1">
-          <span class="hds-icon hds-icon--alert-circle" aria-hidden="true"></span>
+          <span class="hds-icon hds-icon--alert-circle-fill" aria-hidden="true"></span>
           <span>Form contains following errors</span>
         </div>
         <div class="hds-notification__body hds-error-summary__body">

packages/core/src/components/number-input/number-input.stories.js

@@ -24,3 +24,33 @@ export const Default = () => `
      <span class="hds-text-input__helper-text">Assistive text</span>
     </div>
 `;
+
+export const Invalid = () => `
+   <div class="hds-text-input">
+     ${getLabel('input1')}
+     <div class="hds-text-input__input-wrapper">
+       <input
+         id="input1"
+         class="hds-text-input__input"
+         type="number"
+       />
+     </div>
+     <span id="number-input-error" class="hds-text-input__error-text">Invalid value</span>
+     <span class="hds-text-input__helper-text">Assistive text</span>
+    </div>
+`;
+
+export const Success = () => `
+   <div class="hds-text-input">
+     ${getLabel('input1')}
+     <div class="hds-text-input__input-wrapper">
+       <input
+         id="input1"
+         class="hds-text-input__input"
+         type="number"
+       />
+     </div>
+     <span id="number-input-success" class="hds-text-input__success-text">Value is valid</span>
+     <span class="hds-text-input__helper-text">Assistive text</span>
+    </div>
+`;