Hds 2460 general documentation updates

.github/workflows/e2e-tests.yml

@@ -4,9 +4,6 @@ name: e2e-tests
 on:
  workflow_dispatch:
  pull_request:
- push:
- branches:
- - playwright_initial_HDS-2224
 
 jobs:
  e2e-test:
@@ -26,31 +23,71 @@ jobs:
  node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
  registry-url: 'https://registry.npmjs.org'
 
+ # added to build react-storybook for testing
  - name: install dependencies
  run: |
  yarn config set network-timeout 300000 
  yarn
+
+ - name: build design tokens package
+ run: yarn build
+ working-directory: ./packages/design-tokens
+
+ - name: build core package
+ run: yarn build
+ working-directory: ./packages/core
+
+ - name: build core storybook
+ run: yarn build-storybook
+ working-directory: ./packages/core
+
+ - name: build react package
+ run: yarn build
+ working-directory: ./packages/react
+
+ - name: build react storybook
+ run: yarn build-storybook
+ working-directory: ./packages/react
+
+ # added to build react-storybook for testing
+
+ - name: install dependencies
+ run: |
+ yarn config set network-timeout 300000 
+ yarn
+ working-directory: ./e2e
+
+ - name: install playwright dependencies
+ run: |
+ yarn install-deps
  working-directory: ./e2e
 
  - name: install test tools
  run: |
  yarn inst
  working-directory: ./e2e
- 
+
  - name: run tests
  run: |
  yarn start
  env:
- E2E_TESTS_ENV_URL: "https://hds.hel.fi"
+ E2E_TESTS_ENV_URL: 'https://hds.hel.fi'
  working-directory: ./e2e
 
  - name: upload test results in case of failure
  uses: actions/upload-artifact@v4
  with:
  name: e2e_test_report
- path: e2e/report/**
+ path: e2e/report/
  include-hidden-files: true
- # if: failure()
+ if: failure()
+
+ - name: upload screenshot differences in case of failure
+ uses: actions/upload-artifact@v4
+ with:
+ name: e2e_test_results
+ path: e2e/test-results/
+ if: failure()
 
  - name: Publish Test Results
  uses: EnricoMi/publish-unit-test-result-action@v2

.github/workflows/update-icon-library.yml

@@ -68,7 +68,7 @@ jobs:
  - name: Append React interface into index file
  if: steps.build_checker.outputs.SKIP_REST_STEPS != 'true'
  run: |
- echo -e "export { IconProps } from './Icon.interface';\n" | \
+ echo -e "export { IconProps, IconSize } from './Icon.interface';\n" | \
  cat - ./icon-library/react/tsx/index.ts > temp && mv temp ./icon-library/react/tsx/index.ts
 
  - name: Bump version in Changelog
@@ -143,4 +143,4 @@ jobs:
  git push
 
  - name: End
- run: echo "Done!"
+ run: echo "Done!"

.gitignore

@@ -5,3 +5,4 @@ lib
 node_modules
 .idea/
 .vscode/
+.editorconfig

CHANGELOG.md

@@ -5,23 +5,68 @@ 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.X.X] - Month, XX, 202X
+## [4.0.0] - Month, XX, 202X
 
 ### React
 
 #### Breaking
 
-- [Component] What are the breaking changes?
-
-#### Added
-
-- [Component] What is added?
+- [Tag] Rewritten Tag component
+- [Button] Renewed Button component with theming support
+- [Link] iconLeft prop is renamed to iconStart, size prop is now enum (LinkSize.Small, .Medium and .Large). Aria-label is now native so ariaLabel prop is now obsolete -> use aria-label.
+- [Accordion] Changed size prop to use AccordionSize enum (AccordionSize.Small, AccordionSize.Medium and AccordionSize.Large) or without usin Typescript ("small", "medium" and "large"). Also theming has changed variables.
+- [Notification] Changed size prop to enum (NotificationSize.Small, NotificationSize.Medium and NotificationSize.Large) or without using Typescript ("small", "medium" and "large"). The "default" size was removed and replaced with "medium".
+- [ErrorSummary] Changed size prop to enum (ErrorSummarySize.Medium and ErrorSummarySize.Large) or without using Typescript ("medium" and "large"). The "default" size was removed and replaced with "medium".
+- [Icon] Icon size changed to enum (IconSize.ExtraSmall, IconSize.Small, IconSize.Medium, IconSize.Large and IconSize.ExtraLarge) or without Typescript ("extraSmall", "small", "medium", "large" and "extraLarge").
+- [Hero] The optional arrow icon takes vertical space and may require background color to be set.
+- [SelectionGroup] Updated element spacings
+- Typography changes to heading line-heights and letter-spacings
+- [Hero] heading typography changes
+- [Header] heading typography changes
+- [Header.ActionBarSubItem] iconLeft and iconRight props renamed to iconStart and iconEnd
+- [Dialog] heading typography changes
+- [Dialog.Header] iconLeft prop renamed to iconStart
+- [CookieConsent] heading typography changes
+- [Accordion] heading typography changes
+- [Pagination] Active element changed from "a" element to "span" element
+- [Hero] content spacing changes
+- [Icon] ariaLabel, ariaLabelledby and ariaHidden replaced by native aria-\* counterparts.
+- [StatusLabel] iconLeft prop renamed to iconStart
+- [Table] dataTestId prop changed to "data-testid"
+- [Notification] dataTestId prop changed to "data-testid"
+- [Logo] dataTestId prop changed to "data-testid"
+- [Pagination] dataTestId prop changed to "data-testid"
+- [StatusLabel] dataTestId prop changed to "data-testid"
+- [Stepper] dataTestId prop changed to "data-testid"
+- [Breadcrumb] ariaLabel prop changed to "aria-label"
+- [Footer] ariaLabel prop changed to "aria-label"
+- [Footer.Base] ariaLabel prop changed to "aria-label"
+- [Footer.Custom] ariaLabel prop changed to "aria-label"
+- [Footer.Utilities] ariaLabel prop changed to "aria-label"
+- [Footer.Navigation] ariaLabel prop changed to "aria-label"
+- [Footer.Link] ariaLabel prop changed to "aria-label"
+- [Header] ariaLabel prop changed to "aria-label"
+- [Header.ActionBar] ariaLabel prop changed to "aria-label"
+- [Header.ActionBarItem] ariaLabel prop changed to "aria-label"
+- [Header.LanguageSelector] ariaLabel prop changed to "aria-label"
+- [Header.NavigationMenu] ariaLabel prop changed to "aria-label"
+- [Header.Universalbar] ariaLabel prop changed to "aria-label"
+- [SideNavigation] ariaLabel prop changed to "aria-label"
+- [SkipLink] ariaLabel prop changed to "aria-label"
+
+#### Added
+
+- [Hero] New information element below the hero for photographer credits
+- [StatusLabel] Added SCSS support and scss files are exported too. See documentation about usage.
 
 #### Changed
 
 Changes that are not related to specific components
 
-- [Component] What has been changed
+- [Hero] The optional arrow element does not overlap with the element below
+- [Notification] Change auto closing notification progressbar to decrease instead of increase.
+- [LinkBox] Change size prop to an enum (LinkboxSize.Small, LinkboxSize.Medium, LinkboxSize.Large), not a breaking change though since the enum values are identical to the old ones.
+- [Logo] Changed size prop to enum (LogoSize.Small, LogoSize.Medium, LogoSize.Large and LogoSize.Full) which correspond to previous values "small", "medium", "large" and "full".
 
 #### Fixed
 
@@ -31,11 +76,24 @@ Changes that are not related to specific components
 
 #### Breaking
 
-- [Component] What are the breaking changes?
+- [Hero] The optional arrow icon takes vertical space and may require background color to be set.
+- [Tag] Rewritten Tag component
+- [Button] Renewed Button component with theming support
+- [Link] Renamed hds-icon-left class to hds-icon-start
+- [Table] id and headingId props do not have default values anymore. Affects also the id of the CheckBox inside the Table. Also removed default dataTestId
+- [Stepper] Removed default dataTestId.
+- [Pagination] Removed default dataTestId.
+- [SelectionGroup] Updated element spacings
+- Typography changes to heading line-heights and letter-spacings
+- [Table] heading typography changes
+- [StepByStep] heading typography changes
+- [Notification] heading typography changes
+- [Highlight] heading typography changes
+- [Pagination] Active element changed from "a" element to "span" element
 
 #### Added
 
-- [Component] What is added?
+- [Hero] New information element below the hero for photographer credits
 
 #### Changed
 
@@ -47,6 +105,12 @@ Changes that are not related to specific components
 
 - [Component] What bugs/typos are fixed?
 
+### Design tokens
+
+#### Breaking
+
+- Changed colour `black-60` from `#666666` to `#595959` due to contrast issues and the accessibility and readability improvement.
+
 ### Documentation
 
 #### Breaking
@@ -55,13 +119,19 @@ Changes that are not related to specific components
 
 #### Added
 
-- [Component] What is added?
+- [StatusLabel] Documentation about SCSS usage.
 
 #### Changed
 
 Changes that are not related to specific components
 
-- [Component] What has been changed
+- [Hero] Added documentation and examples for new information element
+- [Tag] Document the new Tag component and it's uses
+- [Button] Renewed Button component with theming support
+- [Notification] Changed according to new size enum.
+- [ErrorSummary] Changed according to new size enum.
+- [Icon] Document the size prop as enum usage.
+- Changes to the line-heights in foundation/typography.
 
 #### Fixed