diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index 4614976e33..6d2897a6d4 100644 --- a/.github/workflows/development.yml +++ b/.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/*.* diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index f62321b663..904c4c8742 100644 --- a/.github/workflows/gh-pages.yml +++ b/.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/ diff --git a/.github/workflows/prerelease.yml b/.github/workflows/prerelease.yml index 3e1cd6a6d8..6a8619690b 100644 --- a/.github/workflows/prerelease.yml +++ b/.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: diff --git a/CHANGELOG.md b/CHANGELOG.md index ccf052c9c8..bb1206f016 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index a0cf9f967f..a949410a75 100644 --- a/DEVELOPMENT.md +++ b/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:\ | Builds a specific package (`tokens`, `core`, `react` or `site`). | -| yarn start:\ | 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:\ | Builds a specific package (`tokens`, `core`, `react`, `hds-js` or `site`). | +| yarn start:\ | 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 diff --git a/package.json b/package.json index a300b672b3..77aa43891d 100644 --- a/package.json +++ b/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", diff --git a/packages/core/package.json b/packages/core/package.json index daa1603184..da2ed9aac5 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/core/src/components/text-input/text-input.css b/packages/core/src/components/text-input/text-input.css index f6ed82ca70..f93ea505da 100644 --- a/packages/core/src/components/text-input/text-input.css +++ b/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); -} +} \ No newline at end of file diff --git a/packages/core/src/icons/icons.css b/packages/core/src/icons/icons.css index e85d34bee6..295859d152 100644 --- a/packages/core/src/icons/icons.css +++ b/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"); diff --git a/packages/core/src/icons/twitter_old.css b/packages/core/src/icons/twitter_old.css new file mode 100644 index 0000000000..32cdb54587 --- /dev/null +++ b/packages/core/src/icons/twitter_old.css @@ -0,0 +1,4 @@ +.hds-icon--twitter_old { + -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='M19.0714 3C20.0855 3 20.9173 3.78353 20.9942 4.7779L21 4.92857V19.0714C21 20.0855 20.2165 20.9173 19.2221 20.9942L19.0714 21H4.92857C3.91454 21 3.08273 20.2165 3.0058 19.2221L3 19.0714V4.92857C3 3.91454 3.78353 3.08273 4.7779 3.0058L4.92857 3H19.0714ZM14.6916 6.43652C13.1015 6.43652 11.8223 7.72458 11.8223 9.30582C11.8223 9.52791 11.8489 9.74997 11.8933 9.96317C9.51265 9.83878 7.38954 8.70174 5.97709 6.96062C5.72835 7.38702 5.58624 7.8756 5.58624 8.40859C5.58624 9.40352 6.09257 10.283 6.86541 10.7982C6.46189 10.783 6.07789 10.6829 5.73587 10.5204L5.56847 10.434V10.4695C5.56847 11.8642 6.55454 13.019 7.86926 13.2855C7.62943 13.3477 7.37179 13.3832 7.11419 13.3832C6.92762 13.3832 6.74997 13.3655 6.57229 13.3388C6.93651 14.4759 7.99362 15.302 9.25505 15.3287C8.269 16.1015 7.03421 16.5546 5.69285 16.5546C5.45299 16.5546 5.23093 16.5457 4.99996 16.5191C6.27027 17.3363 7.78042 17.8071 9.40607 17.8071C14.6827 17.8071 17.5698 13.4365 17.5698 9.64338C17.5698 9.51902 17.5698 9.39464 17.5609 9.27028C18.1206 8.86162 18.6092 8.3553 19 7.78679C18.4847 8.00885 17.9251 8.16878 17.3477 8.23094C17.9428 7.87563 18.3959 7.31598 18.6091 6.64972C18.0583 6.9784 17.4365 7.21826 16.788 7.34262C16.2639 6.78297 15.5177 6.43652 14.6916 6.43652Z' 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='M19.0714 3C20.0855 3 20.9173 3.78353 20.9942 4.7779L21 4.92857V19.0714C21 20.0855 20.2165 20.9173 19.2221 20.9942L19.0714 21H4.92857C3.91454 21 3.08273 20.2165 3.0058 19.2221L3 19.0714V4.92857C3 3.91454 3.78353 3.08273 4.7779 3.0058L4.92857 3H19.0714ZM14.6916 6.43652C13.1015 6.43652 11.8223 7.72458 11.8223 9.30582C11.8223 9.52791 11.8489 9.74997 11.8933 9.96317C9.51265 9.83878 7.38954 8.70174 5.97709 6.96062C5.72835 7.38702 5.58624 7.8756 5.58624 8.40859C5.58624 9.40352 6.09257 10.283 6.86541 10.7982C6.46189 10.783 6.07789 10.6829 5.73587 10.5204L5.56847 10.434V10.4695C5.56847 11.8642 6.55454 13.019 7.86926 13.2855C7.62943 13.3477 7.37179 13.3832 7.11419 13.3832C6.92762 13.3832 6.74997 13.3655 6.57229 13.3388C6.93651 14.4759 7.99362 15.302 9.25505 15.3287C8.269 16.1015 7.03421 16.5546 5.69285 16.5546C5.45299 16.5546 5.23093 16.5457 4.99996 16.5191C6.27027 17.3363 7.78042 17.8071 9.40607 17.8071C14.6827 17.8071 17.5698 13.4365 17.5698 9.64338C17.5698 9.51902 17.5698 9.39464 17.5609 9.27028C18.1206 8.86162 18.6092 8.3553 19 7.78679C18.4847 8.00885 17.9251 8.16878 17.3477 8.23094C17.9428 7.87563 18.3959 7.31598 18.6091 6.64972C18.0583 6.9784 17.4365 7.21826 16.788 7.34262C16.2639 6.78297 15.5177 6.43652 14.6916 6.43652Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); +} diff --git a/packages/core/src/icons/x.css b/packages/core/src/icons/x.css new file mode 100644 index 0000000000..aaa9156a34 --- /dev/null +++ b/packages/core/src/icons/x.css @@ -0,0 +1,4 @@ +.hds-icon--x { + -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='M5 3C4 3 3 4 3 5V19C3 20 4 21 5 21H19C20 21 21 20 21 19V5C21 4 20 3 19 3H5ZM16.9092 7H15.2128L12.4174 10.1954L10.0005 7H6.5L10.6826 12.4692L6.71846 17H8.4159L11.4754 13.5041L14.1492 17H17.5631L13.2031 11.2359L16.9092 7Z' fill='currentColor'%3E%3C/path%3E %3Cpath d='M14.6174 15.9846H15.5574L9.48974 7.96205H8.48103L14.6174 15.9846Z' 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='M5 3C4 3 3 4 3 5V19C3 20 4 21 5 21H19C20 21 21 20 21 19V5C21 4 20 3 19 3H5ZM16.9092 7H15.2128L12.4174 10.1954L10.0005 7H6.5L10.6826 12.4692L6.71846 17H8.4159L11.4754 13.5041L14.1492 17H17.5631L13.2031 11.2359L16.9092 7Z' fill='currentColor'%3E%3C/path%3E %3Cpath d='M14.6174 15.9846H15.5574L9.48974 7.96205H8.48103L14.6174 15.9846Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E"); +} diff --git a/packages/core/src/svg/twitter_old.svg b/packages/core/src/svg/twitter_old.svg new file mode 100644 index 0000000000..69ba5bab7a --- /dev/null +++ b/packages/core/src/svg/twitter_old.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/core/src/svg/x.svg b/packages/core/src/svg/x.svg new file mode 100644 index 0000000000..c3f51f0c17 --- /dev/null +++ b/packages/core/src/svg/x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 0b4d17e38f..1ed591657b 100644 --- a/packages/design-tokens/package.json +++ b/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", diff --git a/packages/hds-js/.gitignore b/packages/hds-js/.gitignore new file mode 100644 index 0000000000..c3af857904 --- /dev/null +++ b/packages/hds-js/.gitignore @@ -0,0 +1 @@ +lib/ diff --git a/packages/hds-js/.npmignore b/packages/hds-js/.npmignore new file mode 100644 index 0000000000..ae6bd629e8 --- /dev/null +++ b/packages/hds-js/.npmignore @@ -0,0 +1,3 @@ +.* +lib +index.ts diff --git a/packages/hds-js/DEVELOPMENT.md b/packages/hds-js/DEVELOPMENT.md new file mode 100644 index 0000000000..cd2e49bf81 --- /dev/null +++ b/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`. diff --git a/packages/hds-js/LICENSE b/packages/hds-js/LICENSE new file mode 100644 index 0000000000..a52ee46848 --- /dev/null +++ b/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. diff --git a/packages/hds-js/README.md b/packages/hds-js/README.md new file mode 100644 index 0000000000..4a995b2e38 --- /dev/null +++ b/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). diff --git a/packages/hds-js/index.ts b/packages/hds-js/index.ts new file mode 100644 index 0000000000..cb3660bccb --- /dev/null +++ b/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'; diff --git a/packages/hds-js/package.json b/packages/hds-js/package.json new file mode 100644 index 0000000000..4c7c2778e8 --- /dev/null +++ b/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/. ." + } +} diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Container_Aligns_Wit_Custom_Width_Header.png b/packages/react/.loki/reference/chrome_iphone7_Components_Container_Aligns_Wit_Custom_Width_Header.png new file mode 100644 index 0000000000..97ef36db99 Binary files /dev/null and b/packages/react/.loki/reference/chrome_iphone7_Components_Container_Aligns_Wit_Custom_Width_Header.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_Section.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_Section.png index 679473b676..eb9019a555 100644 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_Section.png and b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_Section.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_theme.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_theme.png index 7ba976c430..bfe4989aff 100644 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_theme.png and b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_theme.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Default.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Default.png deleted file mode 100644 index 87ba0fbe03..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Default.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Example.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Example.png index b202b28117..510e1593d3 100644 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Example.png and b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Example.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_No_navigation.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_No_navigation.png index b1c974382d..7a68c39285 100644 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_No_navigation.png and b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_No_navigation.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Sitemap.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Sitemap.png index be3f7d751a..131851dc1e 100644 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Sitemap.png and b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Sitemap.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Utility_Groups.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Utility_Groups.png index 686a476fc4..cbc7124f16 100644 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Utility_Groups.png and b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Utility_Groups.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Header_Manual_Language_Options.png b/packages/react/.loki/reference/chrome_iphone7_Components_Header_Manual_Language_Options.png index dd96c819de..f9164ca3dd 100644 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Header_Manual_Language_Options.png and b/packages/react/.loki/reference/chrome_iphone7_Components_Header_Manual_Language_Options.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Header_Minimal_With_Localization.png b/packages/react/.loki/reference/chrome_iphone7_Components_Header_Minimal_With_Localization.png deleted file mode 100644 index ee573e60be..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Header_Minimal_With_Localization.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Action_Bar.png b/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Action_Bar.png deleted file mode 100644 index fb8a450557..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Action_Bar.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Full_Features_Custom_Theme.png b/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Full_Features_Custom_Theme.png index 7b0fb0a502..0f451884c5 100644 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Full_Features_Custom_Theme.png and b/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Full_Features_Custom_Theme.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Full_Features_Dark_Theme.png b/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Full_Features_Dark_Theme.png deleted file mode 100644 index 7890c3d78a..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Full_Features_Dark_Theme.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Skip_Link.png b/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Skip_Link.png deleted file mode 100644 index f2f2c9646b..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Header_With_Skip_Link.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Shifted.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Shifted.png deleted file mode 100644 index 10dc2e73c1..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Shifted.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Storm.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Storm.png deleted file mode 100644 index 57550daada..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Storm.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLinkDropdown_Example.png b/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLinkDropdown_Example.png deleted file mode 100644 index 20df77419a..0000000000 --- a/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLinkDropdown_Example.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:eb2fc4632c126c127a46f6d6ccd4079b1e5ad1c435f9a4be32fdc00801368318 -size 793 diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLink_Default.png b/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLink_Default.png deleted file mode 100644 index f0c3eaee48..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLink_Default.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLink_With_Dropdown.png b/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLink_With_Dropdown.png deleted file mode 100644 index 30f063ff7d..0000000000 --- a/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLink_With_Dropdown.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fc7f9e91ab205fab5f67b57ad360f19a9954004d0462c1084bafa72600815c7a -size 24674 diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLink_With_Nested_Dropdown.png b/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLink_With_Nested_Dropdown.png deleted file mode 100644 index 30f063ff7d..0000000000 --- a/packages/react/.loki/reference/chrome_iphone7_Components_NavigationLink_With_Nested_Dropdown.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fc7f9e91ab205fab5f67b57ad360f19a9954004d0462c1084bafa72600815c7a -size 24674 diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Custom_theme.png b/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Custom_theme.png deleted file mode 100644 index 436cc3b45d..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Custom_theme.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Default.png b/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Default.png deleted file mode 100644 index d2592279df..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Default.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Dropdown_Links.png b/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Dropdown_Links.png deleted file mode 100644 index d2592279df..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Dropdown_Links.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Example.png b/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Example.png deleted file mode 100644 index d2592279df..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Example.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Inline.png b/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Inline.png deleted file mode 100644 index d2592279df..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_Navigation_Inline.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_StatusLabel_With_Rounded_Corners.png b/packages/react/.loki/reference/chrome_iphone7_Components_StatusLabel_With_Rounded_Corners.png deleted file mode 100644 index 44aa762b28..0000000000 Binary files a/packages/react/.loki/reference/chrome_iphone7_Components_StatusLabel_With_Rounded_Corners.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_TextInput_As_search_input.png b/packages/react/.loki/reference/chrome_iphone7_Components_TextInput_As_search_input.png new file mode 100644 index 0000000000..0b4414d368 Binary files /dev/null and b/packages/react/.loki/reference/chrome_iphone7_Components_TextInput_As_search_input.png differ diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_TextInput_As_search_input_with_default_value.png b/packages/react/.loki/reference/chrome_iphone7_Components_TextInput_As_search_input_with_default_value.png new file mode 100644 index 0000000000..8789d9c951 Binary files /dev/null and b/packages/react/.loki/reference/chrome_iphone7_Components_TextInput_As_search_input_with_default_value.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Container_Aligns_Wit_Custom_Width_Header.png b/packages/react/.loki/reference/chrome_laptop_Components_Container_Aligns_Wit_Custom_Width_Header.png new file mode 100644 index 0000000000..9885169eb2 Binary files /dev/null and b/packages/react/.loki/reference/chrome_laptop_Components_Container_Aligns_Wit_Custom_Width_Header.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_Section.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_Section.png index cfa2161f04..8f6db4115a 100644 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_Section.png and b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_Section.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_theme.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_theme.png index 200ed48453..f262bf3ed1 100644 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_theme.png and b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_theme.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Default.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Default.png deleted file mode 100644 index ac53da9587..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Default.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Example.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Example.png index 069f636b08..649356ef3a 100644 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Example.png and b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Example.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_No_navigation.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_No_navigation.png index 2eb8190ec3..589d022987 100644 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Footer_No_navigation.png and b/packages/react/.loki/reference/chrome_laptop_Components_Footer_No_navigation.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Sitemap.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Sitemap.png index 7a803ca89b..89397dadf4 100644 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Sitemap.png and b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Sitemap.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Utility_Groups.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Utility_Groups.png index 5c98929cc0..1d1e1ee1ba 100644 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Utility_Groups.png and b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Utility_Groups.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Header_Manual_Language_Options.png b/packages/react/.loki/reference/chrome_laptop_Components_Header_Manual_Language_Options.png index 8786c6b24a..0c40ed056a 100644 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Header_Manual_Language_Options.png and b/packages/react/.loki/reference/chrome_laptop_Components_Header_Manual_Language_Options.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Header_Minimal_With_Localization.png b/packages/react/.loki/reference/chrome_laptop_Components_Header_Minimal_With_Localization.png deleted file mode 100644 index a54a333fea..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Header_Minimal_With_Localization.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Action_Bar.png b/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Action_Bar.png deleted file mode 100644 index 93ea9bee8d..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Action_Bar.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Full_Features_Custom_Theme.png b/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Full_Features_Custom_Theme.png index 9232493c95..1de4654439 100644 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Full_Features_Custom_Theme.png and b/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Full_Features_Custom_Theme.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Full_Features_Dark_Theme.png b/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Full_Features_Dark_Theme.png deleted file mode 100644 index 58c41d5517..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Full_Features_Dark_Theme.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Skip_Link.png b/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Skip_Link.png deleted file mode 100644 index 53a6a49725..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Header_With_Skip_Link.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Shifted.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Shifted.png deleted file mode 100644 index a86c4c965f..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Shifted.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Storm.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Storm.png deleted file mode 100644 index 7eb516d2f2..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Storm.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_NavigationLinkDropdown_Example.png b/packages/react/.loki/reference/chrome_laptop_Components_NavigationLinkDropdown_Example.png deleted file mode 100644 index f73d1aaaff..0000000000 --- a/packages/react/.loki/reference/chrome_laptop_Components_NavigationLinkDropdown_Example.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:76011703eafa8ad0cea7342d13f5f5ae7c2400dcc1820bebf39da38133334620 -size 665 diff --git a/packages/react/.loki/reference/chrome_laptop_Components_NavigationLink_Default.png b/packages/react/.loki/reference/chrome_laptop_Components_NavigationLink_Default.png deleted file mode 100644 index 6ad54805b4..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_NavigationLink_Default.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_NavigationLink_With_Dropdown.png b/packages/react/.loki/reference/chrome_laptop_Components_NavigationLink_With_Dropdown.png deleted file mode 100644 index 5d7a462b0a..0000000000 --- a/packages/react/.loki/reference/chrome_laptop_Components_NavigationLink_With_Dropdown.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4da9309512fe59207c7d1d8e7a371673d7f2fe86a410273601dc19c980c84f70 -size 14472 diff --git a/packages/react/.loki/reference/chrome_laptop_Components_NavigationLink_With_Nested_Dropdown.png b/packages/react/.loki/reference/chrome_laptop_Components_NavigationLink_With_Nested_Dropdown.png deleted file mode 100644 index 5d7a462b0a..0000000000 --- a/packages/react/.loki/reference/chrome_laptop_Components_NavigationLink_With_Nested_Dropdown.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4da9309512fe59207c7d1d8e7a371673d7f2fe86a410273601dc19c980c84f70 -size 14472 diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Custom_theme.png b/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Custom_theme.png deleted file mode 100644 index 26bb2cea20..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Custom_theme.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Default.png b/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Default.png deleted file mode 100644 index 39cd3ebee0..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Default.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Dropdown_Links.png b/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Dropdown_Links.png deleted file mode 100644 index 0118b726ee..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Dropdown_Links.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Example.png b/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Example.png deleted file mode 100644 index 6bad2ee5e5..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Example.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Inline.png b/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Inline.png deleted file mode 100644 index c0338dfda2..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_Navigation_Inline.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_StatusLabel_With_Rounded_Corners.png b/packages/react/.loki/reference/chrome_laptop_Components_StatusLabel_With_Rounded_Corners.png deleted file mode 100644 index d93170855a..0000000000 Binary files a/packages/react/.loki/reference/chrome_laptop_Components_StatusLabel_With_Rounded_Corners.png and /dev/null differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_TextInput_As_search_input.png b/packages/react/.loki/reference/chrome_laptop_Components_TextInput_As_search_input.png new file mode 100644 index 0000000000..eb3a1ab7d6 Binary files /dev/null and b/packages/react/.loki/reference/chrome_laptop_Components_TextInput_As_search_input.png differ diff --git a/packages/react/.loki/reference/chrome_laptop_Components_TextInput_As_search_input_with_default_value.png b/packages/react/.loki/reference/chrome_laptop_Components_TextInput_As_search_input_with_default_value.png new file mode 100644 index 0000000000..1238037d40 Binary files /dev/null and b/packages/react/.loki/reference/chrome_laptop_Components_TextInput_As_search_input_with_default_value.png differ diff --git a/packages/react/DEVELOPMENT.md b/packages/react/DEVELOPMENT.md index 8b5d20278f..c265e4719d 100644 --- a/packages/react/DEVELOPMENT.md +++ b/packages/react/DEVELOPMENT.md @@ -20,16 +20,18 @@ yarn start:react ### Commands -| Command | Description | -| ---------------------------------- | --------------------------------------------------------- | -| yarn | Install dependencies and link local packages. | -| yarn build | Builds the package. | -| yarn start | Starts the development environment. | -| yarn test | Runs the tests. | -| yarn lint | Runs the linting. | -| yarn scaffold | Runs the scaffolding script for creating a new component. | -| yarn visual-test | Runst the visual regression tests. | -| yarn update-reference-images | Update reference images for visual regression tests. | +| Command | Description | +| ---------------------------- | --------------------------------------------------------- | +| yarn | Install dependencies and link local packages. | +| yarn build | Builds the React package. | +| yarn build:hds-js | Builds the hds-js package. | +| yarn start | Starts the development environment. | +| yarn test | Runs the tests. | +| yarn lint | Runs the linting. | +| yarn scaffold | Runs the scaffolding script for creating a new component. | +| yarn visual-test | Runst the visual regression tests. | +| yarn update-reference-images | Update reference images for visual regression tests. | +| yarn update:hds-js | Updates dependencies in the hds-js/package.json | ## Adding a component diff --git a/packages/react/package.json b/packages/react/package.json index 5ef270485e..c4af482750 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "hds-react", - "version": "3.3.0", + "version": "3.4.0", "description": "React components for the Helsinki Design System", "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme", "license": "MIT", @@ -12,8 +12,10 @@ "base.min-*" ], "scripts": { - "build": "rimraf lib/ && yarn run lint && yarn run tcm && rollup -c", - "clean": "rimraf node_modules lib storybook-static", + "build": "rimraf lib/ && yarn run lint && yarn run tcm && rollup -c", + "build:hds-js": "rimraf ../hds-js/lib/ && yarn lint:code && yarn run tcm && rollup -c --environment hdsJS", + "update:hds-js": "rollup -c --environment hdsJSUpdate", + "clean": "rimraf node_modules lib storybook-static ../hds-js/lib/", "start": "tcm src internal --watch & yarn storybook", "scaffold": "node scripts/scaffold.js", "icon": "node scripts/icon.js", @@ -21,14 +23,15 @@ "tsc:es6": "tsc -m es6 --outDir lib-esm --moduleResolution node", "tcm": "tcm src", "ts-check": "tcm src internal && tsc --skipLibCheck --noEmit --project tsconfig.json", - "lint": "yarn ts-check && yarn eslint \"src/**/*.{ts,tsx}\" && yarn lint:styles", + "lint": "yarn lint:code && yarn lint:styles", + "lint:code": "yarn ts-check && yarn eslint \"src/**/*.{ts,tsx}\"", "lint:styles": "yarn stylelint \"src/**/*.{css,scss}\" --formatter verbose", "storybook": "start-storybook -p 6006 --quiet", "build-storybook": "build-storybook --loglevel error", "test": "jest --env=jest-environment-jsdom-sixteen", "prepublishOnly": "cp -r ./lib/. .", "visual-test": "loki test --requireReference --verboseRenderer --reactUri file:./storybook-static", - "update-reference-images": "loki update --requireReference --verboseRenderer --reactUri file:./storybook-static" + "update-reference-images": "rimraf .loki/reference/ && loki update --requireReference --verboseRenderer --reactUri file:./storybook-static" }, "devDependencies": { "@babel/core": "7.11.6", @@ -65,6 +68,7 @@ "@types/jest-axe": "^3.5.3", "@types/react": "17.0.2", "@types/react-dom": "17.0.2", + "@types/rollup-plugin-generate-package-json": "^3.2.8", "@types/uuid": "^9.0.1", "@types/yup": "^0.32.0", "@typescript-eslint/eslint-plugin": "5.10.2", @@ -99,6 +103,7 @@ "rollup": "2.67.2", "rollup-plugin-css-text": "^1.0.3", "rollup-plugin-delete": "^2.0.0", + "rollup-plugin-generate-package-json": "^3.2.0", "rollup-plugin-includepaths": "0.2.4", "rollup-plugin-postcss": "3.1.8", "rollup-plugin-terser": "7.0.2", @@ -126,7 +131,7 @@ "crc-32": "1.2.0", "date-fns": "2.16.1", "downshift": "6.0.6", - "hds-core": "3.3.0", + "hds-core": "3.4.0", "http-status-typed": "^1.0.1", "jwt-decode": "^3.1.2", "kashe": "1.0.4", diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js index 36c77fba9c..2f816efcc5 100644 --- a/packages/react/rollup.config.js +++ b/packages/react/rollup.config.js @@ -12,9 +12,23 @@ import postcssImport from 'postcss-import'; import { terser } from 'rollup-plugin-terser'; import del from 'rollup-plugin-delete'; import cssText from 'rollup-plugin-css-text'; +import generatePackageJson from 'rollup-plugin-generate-package-json'; // eslint-disable-next-line @typescript-eslint/no-var-requires const esmInput = require('./config/esmInput'); +// eslint-disable-next-line @typescript-eslint/no-var-requires +const packageJSON = require('./package.json'); + +const buildForHdsJs = !!process.env.hdsJS; +const updateHdsJs = !!process.env.hdsJSUpdate; +const reactEsmOutputFormat = 'react-esm'; +const reactCommonJsOutputFormat = 'react-cjs'; +const hdsJsEsmOutput = 'hds-js-esm'; +const hdsJsCommonJsOutput = 'hds-js-cjs'; + +const isEsmOutputFormat = (format) => format === hdsJsEsmOutput || format === reactEsmOutputFormat; +const isHdsJsOutputFormat = (format) => format === hdsJsEsmOutput || format === hdsJsCommonJsOutput; +const hdsJsPackageJSON = require('../hds-js/package.json'); const insertCssEsm = () => { return { @@ -52,34 +66,73 @@ const moveCss = () => { }; const extensions = ['.js', '.jsx', '.ts', '.tsx']; -const external = [ - 'crc-32', - 'kashe', - 'memoize-one', - 'postcss', - 'react', - 'react-dom', - 'lodash.uniqueid', - 'lodash.isequal', - 'lodash.isfunction', - 'react-spring', - 'react-use-measure', - 'react-merge-refs', - 'react-virtual', - 'react-popper', - '@juggle/resize-observer', - '@popperjs/core', - '@react-aria/visually-hidden', -]; - -const getExternal = (format) => (format === 'esm' ? [...external, /@babel\/runtime/] : external); + +const externals = [...Object.keys(packageJSON.dependencies), ...Object.keys(packageJSON.peerDependencies)]; + +const getExternal = (format) => (isEsmOutputFormat(format) ? [...externals, /@babel\/runtime/] : externals); + +const checkModule = (forHdsJs) => { + const forbiddenImportIds = ['react', 'react-dom']; + const forbiddenFileExtensions = ['.tsx', '.jsx', '.css', '.scss']; + const allowedExternals = ['tslib']; + if (!forHdsJs) { + // https://github.com/Hacker0x01/react-datepicker/issues/1606 + allowedExternals.push('date-fns'); + // not in react/package.json. Used by rollup-plugin-postcss + // not sure why included. + allowedExternals.push('style-inject'); + } + + const hasForbiddenImports = (importedIds) => { + return importedIds.some((id) => { + return forbiddenImportIds.includes(id); + }); + }; + const hasForbiddenFiletype = (id) => { + const extStartIndex = id.lastIndexOf('.'); + if (extStartIndex === -1) { + return false; + } + const filetype = id.substr(extStartIndex).toLowerCase(); + return forbiddenFileExtensions.includes(filetype); + }; + + const isNodeModule = (id) => { + const folderCheck = 'node_modules/'; + const isInNodeModules = id.includes(folderCheck); + if (!isInNodeModules) { + return false; + } + const moduleFolder = id.split(folderCheck)[1].split('/')[0]; + if (allowedExternals.includes(moduleFolder)) { + return false; + } + return true; + }; + + return { + name: 'checkModule', + moduleParsed(info) { + if (forHdsJs && hasForbiddenImports(info.importedIds)) { + this.error(`Forbidden import found! It imports: ${info.importedIds.join(',')}`); + } + if (forHdsJs && hasForbiddenFiletype(info.id)) { + this.error(`Forbidden file type found!`); + } + if (isNodeModule(info.id)) { + const message = `External module ${info.id} added to built code!`; + forHdsJs ? this.error(message) : this.warn(message); + } + }, + }; +}; const getConfig = (format, extractCSS) => ({ plugins: [ includePaths({ paths: ['src'], extensions }), resolve(), ts(), - format === 'esm' && + isEsmOutputFormat(format) && babel({ babelHelpers: 'runtime', exclude: 'node_modules/**', @@ -116,13 +169,22 @@ const getConfig = (format, extractCSS) => ({ hook: 'closeBundle', }) : undefined, - format === 'cjs' ? insertCssCjs() : undefined, + format === reactCommonJsOutputFormat ? insertCssCjs() : undefined, + format === hdsJsEsmOutput && + updateHdsJs && + generatePackageJson({ + inputFolder: './', + outputFolder: '../hds-js/', + baseContents: hdsJsPackageJSON, + }), + checkModule(buildForHdsJs || updateHdsJs), ], external: getExternal(format), }); -export default [ - { +const outputQueue = []; +if (!buildForHdsJs && !updateHdsJs) { + outputQueue.push({ input: esmInput, output: [ { @@ -130,9 +192,9 @@ export default [ format: 'esm', }, ], - ...getConfig('esm', false), - }, - { + ...getConfig(reactEsmOutputFormat, false), + }); + outputQueue.push({ input: esmInput, output: [ { @@ -141,9 +203,9 @@ export default [ exports: 'named', }, ], - ...getConfig('esm', true), - }, - { + ...getConfig(reactEsmOutputFormat, true), + }); + outputQueue.push({ input: ['src/index.ts', 'lib/index.css-text.js'], output: [ { @@ -151,6 +213,32 @@ export default [ format: 'cjs', }, ], - ...getConfig('cjs', false), - }, -]; + ...getConfig(reactCommonJsOutputFormat, false), + }); +} else { + outputQueue.push({ + input: { index: '../hds-js/index.ts' }, + output: [ + { + dir: '../hds-js/lib', + format: 'esm', + }, + ], + ...getConfig(hdsJsEsmOutput, false), + }); + + if (!updateHdsJs) { + outputQueue.push({ + input: ['../hds-js/index.ts'], + output: [ + { + dir: '../hds-js/lib/cjs', + format: 'cjs', + }, + ], + ...getConfig(hdsJsCommonJsOutput, false), + }); + } +} + +export default outputQueue; diff --git a/packages/react/src/components/container/Container.stories.tsx b/packages/react/src/components/container/Container.stories.tsx index 15ca718c2d..3b20c726ad 100644 --- a/packages/react/src/components/container/Container.stories.tsx +++ b/packages/react/src/components/container/Container.stories.tsx @@ -87,3 +87,74 @@ AlignsWithHeader.argTypes = { AlignsWithHeader.parameters = { layout: 'fullscreen', }; + +export const AlignsWitCustomWidthHeader = (args) => { + return ( + <> + +
+ + + + + + + { + event.preventDefault(); + }} + /> + { + event.preventDefault(); + }} + /> + + } + > + } + id="action-bar-login" + closeLabel="Close" + > +

Tempor incididunt ut labore et dolore

+ + +
+ +

Header and Container have max-width of 1220px

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. +

+ + + ); +}; + +AlignsWitCustomWidthHeader.argTypes = { + alignWithHeader: { + defaultValue: true, + control: 'boolean', + }, +}; + +AlignsWitCustomWidthHeader.parameters = { + layout: 'fullscreen', +}; diff --git a/packages/react/src/components/dropdown/combobox/Combobox.tsx b/packages/react/src/components/dropdown/combobox/Combobox.tsx index b04e589f8b..c7e4294970 100644 --- a/packages/react/src/components/dropdown/combobox/Combobox.tsx +++ b/packages/react/src/components/dropdown/combobox/Combobox.tsx @@ -526,6 +526,7 @@ export const Combobox = (props: ComboboxProps) => { selectedItemsContainerRef={selectedItemsContainerRef} setActiveIndex={setActiveIndex} toggleButtonHidden={!showToggleButton} + disabled={disabled} /> )} {props.multiselect === false && props.icon && ( @@ -569,6 +570,7 @@ export const Combobox = (props: ComboboxProps) => { toggleButtonRef.current.focus(); }} clearButtonAriaLabel={props.clearButtonAriaLabel} + disabled={disabled} /> )} {/* MENU */} diff --git a/packages/react/src/components/dropdown/select/Select.tsx b/packages/react/src/components/dropdown/select/Select.tsx index 710821d48f..6681fec868 100644 --- a/packages/react/src/components/dropdown/select/Select.tsx +++ b/packages/react/src/components/dropdown/select/Select.tsx @@ -550,6 +550,7 @@ export const Select = (props: SelectProps) => { selectedItemSrLabel={props.selectedItemSrLabel} selectedItemsContainerRef={selectedItemsContainerRef} setActiveIndex={setActiveIndex} + disabled={disabled} /> )} {/* TOGGLE BUTTON */} @@ -581,6 +582,7 @@ export const Select = (props: SelectProps) => { toggleButtonRef.current.focus(); }} clearButtonAriaLabel={props.clearButtonAriaLabel} + disabled={disabled} /> )} {/* MENU */} diff --git a/packages/react/src/components/errorSummary/ErrorSummary.stories.tsx b/packages/react/src/components/errorSummary/ErrorSummary.stories.tsx index 6b5bfb609b..744f7d536d 100644 --- a/packages/react/src/components/errorSummary/ErrorSummary.stories.tsx +++ b/packages/react/src/components/errorSummary/ErrorSummary.stories.tsx @@ -14,23 +14,23 @@ export default { }, }; -const getContent = () => ( - +export const Default = (args) => ( + + + ); -export const Default = (args) => {getContent()}; - -export const Large = (args) => {getContent()}; +export const Large = (args) => ; Large.args = { size: 'large', }; diff --git a/packages/react/src/components/footer/__snapshots__/Footer.test.tsx.snap b/packages/react/src/components/footer/__snapshots__/Footer.test.tsx.snap index 4c0991c795..ba158b79d2 100644 --- a/packages/react/src/components/footer/__snapshots__/Footer.test.tsx.snap +++ b/packages/react/src/components/footer/__snapshots__/Footer.test.tsx.snap @@ -76,7 +76,7 @@ exports[`