-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1090 from City-of-Helsinki/release-2.17.0
Release 2.17.0
- Loading branch information
Showing
452 changed files
with
34,518 additions
and
4,758 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| v16.19.1 | ||
| v18.16.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,29 +6,49 @@ Contributions are open even if you don't have a finished solution yet. HDS team | |
|
|
||
| Send pull requests to `development` branch. Right now all pull requests are welcome. If you do not feel that the PR is anywhere near ready, consider opening a draft pull request. Allowing edits for maintainers is also recommended. | ||
|
|
||
| 1. Set up your local development environment by following the steps in [DEVELOPMENT.md](/DEVELOPMENT.md). Use short and descriptive commit messages e.g. "Add rotate property for Koros component". | ||
| 1. [Fork the repository](https://github.com/City-of-Helsinki/helsinki-design-system/fork). Select yourself as the owner and press Create fork. | ||
|
|
||
| 2. Create a new branch with prefix `hds-<Ticket number>` if you have a ticket number, otherwise just use prefix `feature/` or `fix/` whichever is more approriate. When submitting large changes split them into light and coherent parts. This sometimes requires sending in multiple PRs. | ||
| 2. Set up your local development environment by following the steps in [DEVELOPMENT.md](/DEVELOPMENT.md), disregarding the cloning part. | ||
|
|
||
| 3. Create a new branch with prefix `hds-<Ticket number>` if you have a ticket number, otherwise just use prefix `feature/` or `fix/` whichever is more approriate. When submitting large changes split them into light and coherent parts. This sometimes requires sending in multiple PRs. Remember to use short and descriptive commit messages e.g. "Add rotate property for Koros component". | ||
|
|
||
| * Feature – If you intend to change the public API or introduce a new feature. | ||
|
|
||
| * Fix – If you intend to make a code change to solve a production issue. | ||
|
|
||
| 3. If you’ve added code that should be tested, add tests! Ensure the test suite passes and Jest snapshot tests are updated by running the following command. Also commit the updated snapshot tests. HDS support includes responsive design so testing on different screen sizes on real devices, simulators, or browser tools is encouraged. | ||
| 4. When developing for the `hds-react` package: if you’ve added code that should be tested, add tests! HDS tests are usually simple rendering and functionality checks. Avoid excessive amount of mocking for simplicity's sake and testing for implementation details, i.e. don't test whether function `hideComponent` was called but rather that the component is not visible. This way there are no false negatives when the code is refactored by changing the function name for example, or false positives when the function breaks and doesn't hide the component. | ||
|
|
||
| Ensure the test suite and regression tests pass. Remember commit the updated snapshot tests and loki reference images. HDS support includes responsive design so testing on different screen sizes on real devices, simulators, or browser tools is encouraged. | ||
|
|
||
| Run snapshot tests: | ||
| ```bash | ||
| yarn test | ||
| ``` | ||
|
|
||
| Update jest snapshots: | ||
| ```bash | ||
| yarn test -- -u | ||
| ``` | ||
|
|
||
| 4. Lint your code. Tip: Lint runs automatically when you build. | ||
| Run loki tests: | ||
| ```bash | ||
| yarn run visual-test | ||
| ``` | ||
|
|
||
| Update loki tests: | ||
| ```bash | ||
| yarn run update-reference-images | ||
| ``` | ||
|
|
||
| 5. Lint your code. Tip: Lint runs automatically when you build. | ||
|
|
||
| ```bash | ||
| yarn test:lint | ||
| ``` | ||
|
|
||
| 5. Make a Pull Request on the [HDS Github website](https://github.com/City-of-Helsinki/helsinki-design-system/pulls). If you have a ticket number name the PR e.g. "HDS-1377: number input accessibility fix" so it will automatically link to the ticket. Please be sure to check the open PRs in case somebody is already working on a similar issue. Also to prevent overlapping work notify HDS team by Slack at #designsystem or via email [email protected]. | ||
| 6. Make a Pull Request on the [HDS Github website](https://github.com/City-of-Helsinki/helsinki-design-system/pulls). If you have a ticket number name the PR e.g. "HDS-1377: number input accessibility fix" so it will automatically link to the ticket. Please be sure to check the open PRs in case somebody is already working on a similar issue. Also to prevent overlapping work notify HDS team by Slack at #designsystem or via email [email protected]. | ||
|
|
||
| 6. HDS team will review the PR and either add it to the release queue, request changes to it or close it with an explanation. PRs are reviewed with the following quality criteria: | ||
| 7. HDS team will review the PR and either add it to the release queue, request changes to it or close it with an explanation. PRs are reviewed with the following quality criteria: | ||
|
|
||
| * Accessibility | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,14 @@ | ||
| module.exports = { | ||
| core: { | ||
| builder: 'webpack5', | ||
| }, | ||
| stories: ['../src/**/*.stories.@(js|mdx)'], | ||
| addons: [ | ||
| '@storybook/addon-docs', | ||
| '@storybook/addon-a11y', | ||
| '@storybook/addon-backgrounds', | ||
| '@storybook/addon-viewport', | ||
| '@storybook/addon-storysource', | ||
| '@storybook/addon-storysource' | ||
| ], | ||
| staticDirs: ['../src/fonts'], | ||
| staticDirs: ['../src/fonts'] | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| .hds-highlight { | ||
| --accent-line-color: var(--color-bus); | ||
| --text-color: var(--color-black-90); | ||
| --size-width-s: 264px; | ||
| --size-width-m: 536px; | ||
| --size-width-l: 680px; | ||
| --width: var(--size-width-m); | ||
| --margin: var(--spacing-m) 0; | ||
|
|
||
| border-left: 8px solid var(--accent-line-color); | ||
| color: var(--text-color); | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| margin: var(--margin); | ||
| max-width: 100%; | ||
| padding: 0; | ||
| padding-left: var(--spacing-s); | ||
| row-gap: var(--spacing-m); | ||
| width: var(--width); | ||
| } | ||
|
|
||
| .hds-blockquote { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .hds-highlight__text { | ||
| color: var(--text-color); | ||
| font-size: var(--fontsize-heading-m); | ||
| line-height: var(--lineheight-m); | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .hds-highlight--small { | ||
| --margin: var(--spacing-s) 0; | ||
| --width: var(--size-width-s); | ||
| } | ||
|
|
||
| .hds-highlight--large { | ||
| --margin: var(--spacing-l) 0; | ||
| --width: var(--size-width-l); | ||
| } | ||
|
|
||
| .hds-highlight--large .hds-highlight__text { | ||
| font-size: var(--fontsize-heading-l); | ||
| line-height: var(--lineheight-l); | ||
| } | ||
|
|
||
| .hds-highlight__quote:before, | ||
| .hds-highlight__quote:after { | ||
| content: '"'; | ||
| display: inline; | ||
| } | ||
|
|
||
| .hds-highlight__reference { | ||
| font-size: var(--fontsize-heading-xs); | ||
| line-height: var(--lineheight-m); | ||
| } |
78 changes: 78 additions & 0 deletions
78
packages/core/src/components/highlight/highlight.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import './highlight.css'; | ||
|
|
||
| export default { | ||
| title: 'Components/Highlight', | ||
| }; | ||
|
|
||
| const highlightText = 'You may select an highlight from the article to be displayed here. Select an excerpt that you want the user to pay attention to.'; | ||
| const quoteText = 'Add an interesting quote here'; | ||
| const quoteReference = 'First name Last name. Title.'; | ||
| const customColor = '#00005e'; | ||
|
|
||
| export const DefaultHighlight = () => ` | ||
| <figure class="hds-highlight"> | ||
| <blockquote class="hds-blockquote"> | ||
| <p class="hds-highlight__text">${highlightText}</p> | ||
| </blockquote class="hds-blockquote"> | ||
| </figure> | ||
| `; | ||
|
|
||
| export const HighlightLarge = () => ` | ||
| <figure class="hds-highlight hds-highlight--large"> | ||
| <blockquote class="hds-blockquote"> | ||
| <p class="hds-highlight__text">${highlightText}</p> | ||
| </blockquote class="hds-blockquote"> | ||
| </figure> | ||
| `; | ||
|
|
||
| export const HighlightSmall = () => ` | ||
| <figure class="hds-highlight hds-highlight--small"> | ||
| <blockquote class="hds-blockquote"> | ||
| <p class="hds-highlight__text">${highlightText}</p> | ||
| </blockquote class="hds-blockquote"> | ||
| </figure> | ||
| `; | ||
|
|
||
| export const HighlightCustomStyles = () => ` | ||
| <figure class="hds-highlight" style="--accent-line-color:${customColor};--text-color:${customColor}"> | ||
| <blockquote class="hds-blockquote"> | ||
| <p class="hds-highlight__text">${highlightText}</p> | ||
| </blockquote class="hds-blockquote"> | ||
| </figure> | ||
| `; | ||
|
|
||
| export const DefaultQuote = () => ` | ||
| <figure class="hds-highlight"> | ||
| <blockquote class="hds-blockquote"> | ||
| <p class="hds-highlight__text hds-highlight__quote">${quoteText}</p> | ||
| </blockquote class="hds-blockquote"> | ||
| <figcaption class="hds-highlight__reference">—${quoteReference}</figcaption> | ||
| </figure> | ||
| `; | ||
|
|
||
| export const QuoteLarge = () => ` | ||
| <figure class="hds-highlight hds-highlight--large"> | ||
| <blockquote class="hds-blockquote"> | ||
| <p class="hds-highlight__text hds-highlight__quote">${quoteText}</p> | ||
| </blockquote class="hds-blockquote"> | ||
| <figcaption class="hds-highlight__reference">—${quoteReference}</figcaption> | ||
| </figure> | ||
| `; | ||
|
|
||
| export const QuoteSmall = () => ` | ||
| <figure class="hds-highlight hds-highlight--small"> | ||
| <blockquote class="hds-blockquote"> | ||
| <p class="hds-highlight__text hds-highlight--small hds-highlight__quote">${quoteText}</p> | ||
| </blockquote class="hds-blockquote"> | ||
| <figcaption class="hds-highlight__reference">—${quoteReference}</figcaption> | ||
| </figure> | ||
| `; | ||
|
|
||
| export const QuoteCustomStyles = () => ` | ||
| <figure class="hds-highlight" style="--accent-line-color:${customColor};--text-color:${customColor}"> | ||
| <blockquote class="hds-blockquote"> | ||
| <p class="hds-highlight__text hds-highlight__quote">${quoteText}</p> | ||
| </blockquote class="hds-blockquote"> | ||
| <figcaption class="hds-highlight__reference">—${quoteReference}</figcaption> | ||
| </figure> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.