Merge pull request #1213 from City-of-Helsinki/release-3.4.0

Release 3.4.0

.github/workflows/development.yml

@@ -41,6 +41,10 @@ jobs:
         run: yarn build
         working-directory: ./packages/react
 
+      - name: build hds-js package
+        run: yarn build:hds-js
+        working-directory: ./packages/react
+
       - name: test react package
         run: yarn test
         working-directory: ./packages/react
@@ -52,7 +56,7 @@ jobs:
 
       - name: Store storybook as artifact
         if: ${{ !(contains(github.head_ref, 'hotfix') || contains(github.ref, 'hotfix')) }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: storybook-${{ github.sha }}
           path: |
@@ -75,7 +79,7 @@ jobs:
 
     steps:
       - name: download storybook
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: storybook-${{ github.sha }}
 
@@ -93,7 +97,7 @@ jobs:
         run: ./node_modules/.bin/loki test --requireReference --verboseRenderer --reactUri file:./storybook-static --storiesFilter ${{ matrix.loki_test_group }} ${{ matrix.loki_configuration }}
 
       - name: upload reference and actual images with ${{ matrix.loki_configuration }} and ${{ matrix.loki_test_group }} in case of failure
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: loki_images_${{ matrix.loki_configuration }}_${{ steps.sanitize_artifact_name.outputs.value }}
           path: .loki/difference/*.*

.github/workflows/gh-pages.yml

@@ -37,10 +37,14 @@ jobs:
         run: yarn build
         working-directory: ./packages/react
 
+      - name: build hds-js package
+        run: yarn build:hds-js
+        working-directory: ./packages/react
+
       - name: build documentation site
         run: yarn build
         working-directory: ./site
-      
+
       - name: Copy CNAME file
         run: cp CNAME ./site/public/
 

.github/workflows/prerelease.yml

@@ -1,6 +1,6 @@
 name: prerelease
 
-on: 
+on:
   workflow_dispatch:
     inputs:
       prerelease_stage:
@@ -39,6 +39,10 @@ jobs:
         run: yarn build
         working-directory: ./packages/react
 
+      - name: build hds-js package
+        run: yarn build:hds-js
+        working-directory: ./packages/react
+
       - name: release npm packages
         run: yarn run release --dist-tag ${{ github.event.inputs.prerelease_stage }}
         env:

CHANGELOG.md

@@ -5,6 +5,65 @@ 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.4.0] - January, 16, 2024
+
+### React
+
+#### Changed
+
+- [Header] Theme supports max-width and logo-height variables
+- [TextInput] Support using TextInput component as a simple search field
+
+#### Fixed
+
+- [Dropdown] Clearing values from disabled Dropdowns is prohibited
+- [Header.ActionBarItem] Fix click event handling issue in icons
+
+#### Added
+
+- [IconX] New icon for X service
+
+### Core
+
+#### Added
+
+- [Icon] New icon for X service
+
+#### Changed
+
+- [Text input] Support using Text input component as a simple search field
+
+### Documentation
+
+#### Added
+
+- [Hero] Note about scaling to diagonal koros examples
+- [ErrorSummary] Add documentation for Error Summary component
+- [Focus colour] Use of Focus style widths
+- [Icons] New icon for X service added to assets list
+- [Search input] Advice using a Text input as a simple search field if no suggestions and/or results are provided
+
+#### Fixed
+
+- Fixed Wave motifs links to Helsinki Brand pages
+- [Header] Small fixes
+- [Notification] Fix size texts
+
+### Figma
+
+#### Changed
+
+- [Icons] Old Twitter icon renamed back to its original name so that Glyphfig script works correctly
+
+### Hds-js
+
+#### Added
+
+- [cookieConsentController] The Cookie Consent controller for City of Helsinki cookies
+- [cookieController] Controller for reading and writing City of Helsinki cookies
+- [getContent] Common content for City of Helsinki cookies
+- [login] Vanilla JS version of the login system
+
 ## [3.3.0] - December, 19, 2023
 
 ### React

DEVELOPMENT.md

@@ -40,20 +40,20 @@ yarn start:react
 
 ### Commands
 
-| Command                            | Description                                                                        |
-| ---------------------------------- | ---------------------------------------------------------------------------------- |
-| yarn                               | Installs dependencies and links local packages.                                    |
-| yarn build                         | Builds all the packages.                                                           |
-| yarn build:\<package>              | Builds a specific package (`tokens`, `core`, `react` or `site`).                   |
-| yarn start:\<platform>             | Starts the development environment for a specific platform (`core` or `react`).    |
-| release                            | Publishes packages that have changed since the last release.                       |
-| update-versions                    | Bump version of packages to publish.                                               |
+| Command                | Description                                                                     |
+| ---------------------- | ------------------------------------------------------------------------------- |
+| yarn                   | Installs dependencies and links local packages.                                 |
+| yarn build             | Builds all the packages.                                                        |
+| yarn build:\<package>  | Builds a specific package (`tokens`, `core`, `react`, `hds-js` or `site`).      |
+| yarn start:\<platform> | Starts the development environment for a specific platform (`core` or `react`). |
+| release                | Publishes packages that have changed since the last release.                    |
+| update-versions        | Bump version of packages to publish.                                            |
 
 ## Workflow
 
 This project uses the [Git Feature Branch Workflow](https://www.atlassian.com/git/tutorials/comparing-workflows/feature-branch-workflow). Happy branching!
 
-1. Get the latest updates from the `development` branch. The `master` branch is only updated during the release process containing the latest released features while `development` branch has the latest features waiting for a new release. 
+1. Get the latest updates from the `development` branch. The `master` branch is only updated during the release process containing the latest released features while `development` branch has the latest features waiting for a new release.
 
 ```bash
 git checkout development

package.json

@@ -7,10 +7,11 @@
     "site"
   ],
   "scripts": {
-    "build": "yarn build:tokens && yarn build:core && yarn build:react && yarn build:site",
+    "build": "yarn build:tokens && yarn build:core && yarn build:react && yarn build:hds-js && yarn build:site",
     "build:tokens": "lerna run --scope hds-design-tokens build",
     "build:core": "lerna run --scope hds-core build",
     "build:react": "lerna run --scope hds-react build",
+    "build:hds-js": "lerna run --scope hds-react build:hds-js",
     "build:site": "lerna run --scope site build",
     "clean": "lerna clean --yes && rimraf node_modules/ packages/core/lib packages/core/storybook-static packages/react/lib packages/react/storybook-static packages/design-tokens/lib site/.cache site/public",
     "start:core": "lerna run --scope hds-core start",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "3.3.0",
+  "version": "3.4.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.3.0",
+    "hds-design-tokens": "3.4.0",
     "normalize.css": "8.0.1",
     "postcss": "8.2.15",
     "postcss-cli": "8.3.1",

packages/core/src/components/text-input/text-input.css

@@ -62,6 +62,15 @@
   will-change: transform, box-shadow;
 }
 
+.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,
+.hds-text-input__input-clear::-webkit-search-cancel-button {
+  display: none;
+}
+
+.hds-text-input .hds-text-input__button-clear > * {
+  pointer-events: none;
+}
+
 /* text-input transitions */
 .hds-text-input .hds-text-input__input:hover {
   border-color: var(--input-border-color-hover);
@@ -297,4 +306,4 @@
 
 .hds-text-input__button:focus {
   outline: var(--outline-width) solid var(--color-focus-outline);
-}
+}

packages/core/src/icons/icons.css

@@ -185,6 +185,7 @@
 @import url("whatsapp.css");
 @import url("wifi.css");
 @import url("wifi-crossed.css");
+@import url("x.css");
 @import url("yle.css");
 @import url("youth.css");
 @import url("youtube.css");

packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-design-tokens",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Design tokens for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",

packages/hds-js/.gitignore

@@ -0,0 +1 @@
+lib/

packages/hds-js/.npmignore

@@ -0,0 +1,3 @@
+.*
+lib
+index.ts

packages/hds-js/DEVELOPMENT.md

@@ -0,0 +1,13 @@
+# Development
+
+The `hds-js` is a custom export from the [hds-react](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/react) package. It has no own source files; the files are hand-picked from the React-version.
+
+## Adding files to the bundle
+
+Add required exports to the `index.ts` and run `yarn update:hds-js` from the `packages/react` folder.
+
+## Building
+
+The bundle is built with the `rollup.config.js` in the `hds-react` package. Rollup makes sure React or CSS are not included in this bundle.
+
+The build command is in the `hds-react` package. Use `yarn build:hds-js`.

packages/hds-js/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 City of Helsinki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/hds-js/README.md

@@ -0,0 +1,37 @@
+# hds-js [![npm](https://img.shields.io/npm/v/hds-js?style=flat-square)](https://www.npmjs.com/package/hds-js) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/hds-js?label=gzipped%20size&style=flat-square)](https://bundlephobia.com/result?p=hds-js)
+
+Hds-js contains vanilla js exported from the [hds-react](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/react) package of the Helsinki Design System. It has no own source; the files are hand-picked from the React version. React or CSS are not included. This package does not include any UI components either.
+
+## Getting started
+
+Install the package.
+
+```bash
+yarn add hds-js
+```
+
+### Using the components
+
+JS
+
+```js
+import { cookieController } from 'hds-js';
+```
+
+## Development
+
+Read more [here](DEVELOPMENT.md).
+
+## Documentation
+
+Read more [here](https://hds.hel.fi/).
+
+## Built with
+
+- [TypeScript](https://www.typescriptlang.org/) support.
+- Bundled with [Rollup](https://github.com/rollup/rollup), compiled with [Babel](https://github.com/babel/babel).
+- Source files are in the [hds-react](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/react) package.
+
+## Supported browsers
+
+The supported browser versions are listed in the [hds-react README](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/react/README.md).

packages/hds-js/index.ts

@@ -0,0 +1,4 @@
+export * from '../react/src/components/cookieConsent/cookieConsentController';
+export * from '../react/src/components/cookieConsent/cookieController';
+export * from '../react/src/components/cookieConsent/getContent';
+export * from '../react/src/components/login/index.vanilla-js';

packages/hds-js/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "hds-js",
+  "version": "3.4.0",
+  "description": "Vanilla js for the Helsinki Design System",
+  "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "esnext": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": [
+    "base.min-*"
+  ],
+  "dependencies": {
+    "await-to-js": "^3.0.0",
+    "cookie": "^0.4.1",
+    "http-status-typed": "^1.0.1",
+    "jwt-decode": "^3.1.2",
+    "lodash.isobject": "3.0.2",
+    "lodash.isundefined": "3.0.1",
+    "lodash.pick": "^4.4.0",
+    "oidc-client-ts": "^2.2.2"
+  },
+  "scripts": {
+    "prepublishOnly": "cp -r ./lib/. ."
+  }
+}