Skip to content

Commit

Permalink
Merge pull request #1132 from City-of-Helsinki/development
Browse files Browse the repository at this point in the history
release-3.0.0
  • Loading branch information
mrTuomoK authored Oct 4, 2023
2 parents 68798c0 + 8cbfdb9 commit dea8dde
Show file tree
Hide file tree
Showing 1,834 changed files with 21,762 additions and 16,565 deletions.
91 changes: 91 additions & 0 deletions .github/workflows/build-icon-library.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
# Build icon library, create zip file for release and create PR
name: icon library

on:
workflow_dispatch:

jobs:
build-icon-library:
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v3

- name: Setup Node.js environment
uses: actions/[email protected]
with:
node-version: '20.3.1'
registry-url: 'https://registry.npmjs.org'

- name: Run Glypfig
run: |
npx glypfig \
--apikey $API_KEY \
--filekey $FILE_KEY \
--nodeid $NODE_ID \
--format png,svg,css,react \
--optimize \
--template tsx \
--csspath './release/icon-kit-template-css.eta' \
--jspath './release/icon-kit-template-react-tsx.eta' \
--cssprefix '' \
--license './release/LICENSE.txt' \
--pngscale 2.66 \
--filter 'Size=S'
env:
API_KEY: ${{ secrets.HDS_ICON_KIT }}
FILE_KEY: 'Kxwg3R0zNRHj55nQqFu6VS'
NODE_ID: '172:2478'

- name: Append React interface into index file
run: |
echo -e "export { IconProps } 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
run: |
PKG_VER=`node -pe "require('./packages/react/package.json').version"`
sed -i -E "s/version [0-9]{1,2}.[0-9]{1,2}.[0-9]{1,2}/version ${PKG_VER}/" ./release/icon-kit-template-CHANGELOG.txt
- name: Copy Changelog file to icon library
run: cp ./release/icon-kit-template-CHANGELOG.txt ./icon-library/CHANGELOG.txt

- name: Create release zip file
uses: TheDoctor0/[email protected]
with:
filename: 'release/hds-icon-kit.zip'
path: './icon-library'

- name: Copy svg files to repo folders
run: cp ./icon-library/svg/* ./packages/core/src/svg

- name: Copy css files to repo folders
run: cp ./icon-library/css/* ./packages/core/src/icons

- name: Copy react files to repo folders
run: cp ./icon-library/react/tsx/* ./packages/react/src/icons

- name: Install React package NPM dependencies
run: (cd ./packages/react && yarn)

- name: Lint React files
run: npx prettier --write './packages/react/src/icons/*.{ts,tsx}'

- name: Code analysis for React files
run: npx eslint --debug -c './packages/react/.eslintrc.json' --ignore-path './packages/react/.eslintignore' --fix './packages/react/src/icons/*.{ts,tsx}'

- name: Remove icon library build directory
run: rm -rf ./icon-library

- name: Commit changed files
run: |
git config --global user.email "[email protected]"
git config --global user.name "Github Actions"
git add .
git commit -m 'Updated icon library'
git push
- name: create pull request
run: gh pr create -B development --title 'Icon library build' --body 'Created by Github action icon library'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
4 changes: 2 additions & 2 deletions .github/workflows/development.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
uses: actions/checkout@v4

- name: Read .nvmrc
run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
id: nvmrc

- name: setup node ${{ steps.nvmrc.outputs.NODE_VERSION }}
uses: actions/setup-node@v3.7.0
uses: actions/setup-node@v3.8.1
with:
node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
registry-url: 'https://registry.npmjs.org'
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/gh-pages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
uses: actions/checkout@v4

- name: Read .nvmrc
run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
id: nvmrc

- name: setup node ${{ steps.nvmrc.outputs.NODE_VERSION }}
uses: actions/setup-node@v3.7.0
uses: actions/setup-node@v3.8.1
with:
node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
registry-url: 'https://registry.npmjs.org'
Expand Down
45 changes: 45 additions & 0 deletions .github/workflows/prerelease.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
name: prerelease

on:
workflow_dispatch:
inputs:
prerelease_stage:
description: 'alpha or beta'
required: true

jobs:
build-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3

- name: Read .nvmrc
run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
id: nvmrc

- name: setup node ${{ steps.nvmrc.outputs.NODE_VERSION }}
uses: actions/setup-node@v3
with:
node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
registry-url: 'https://registry.npmjs.org'

- name: install dependencies
run: 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 react package
run: yarn build
working-directory: ./packages/react

- name: release npm packages
run: yarn run release --dist-tag ${{ github.event.inputs.prerelease_stage }}
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@
lib
node_modules
.idea/
.vscode/
155 changes: 153 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,159 @@ 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).

## [Unreleased]

## [3.0.0] - October, 4, 2023

### React

#### Breaking

- [Navigation] Removed, use new Header instead
- [Footer] Redesigned and rebuilt
- [StatusLabel, Tag] Rectangular versions removed
- [LinkBox] Property name `withBorder` changed to `border`
- [Koros] Renamed variants Wave to Vibration and Storm to Wave

#### Added

- [Header] Added new Header-component
- [Header.UniversalBar] Added new UniversalBar component
- [Header.ActionBar] Added new ActionBar component
- [Header.ActionBarItem] New component to display button icons
- [Header.LanguageSelector] Added new language selector component
- [Header.Link] Added new component to be used under Header components
- [Header.NavigationMenu] Added new NavigationMenu component
- [Footer] (changed) is now redesigned with new components
- [Footer.Custom] New component for custom content
- [Footer.Link] New link component to be used under Footer components
- [Footer.NavigationGroup] New component for displaying grouped navigation links
- [Footer.UtilityGroup] New component for displaying grouped utility links
- [Footer.GroupHeading] New component for group components headings
- [Header, Footer] Added navigation landmarks.

#### Changed

- Supported browserlist updated
- [RadioButton] Default value is not recommended anymore
- [Footer] Redesigned and rebuilt

#### Fixed

- [Breadcrumb] Theme variable typos
- [LoadingSpinner] Made more polite accessibility-wise, not interrupting screen readers anymore

#### Removed

- [StatusLabel, Tag] Removed rectangular versions
- [Navigation] New Header component is the replacement

### Core

#### Changed

- [Koros] Rename Koros variants according to brand
- [Koros] Renamed variants Wave to Vibration and Storm to Wave

#### Removed

- [StatusLabel, Tag] Rectangular version (default)

### Documentation

#### Added

- [Header] Added new Header and its sub-components' documentations
- [Footer] Added new Footer and its sub-components' documentations
- Added documention for focus colour tokens
- Added navigation pattern guidelines
- Added new releases page
- Added new guide how to migrate to 3.0.0

#### Changed

- [Koros] Rename Koros variants according to brand
- [Koros] Fix Storm and Wave Koros variant usage
- [Koros] Rename koros flipHorizontal to flipVertical
- Update contributing guide
- [Radiobutton, Checkbox, Toggle] Update guide for no default value
- [StatusLabel, Tag] Remove support for rectangular variants

#### Fixes

- [Breadcrumb, Hero] Added missing StatusLabelTooltips
- [Koros] Koros accessibility tab content copied from footer
- [Heros] Wrong css class in Hero component examples
- [LoadingSpinner] Change aria alert to polite
- [Breadcrumbs] Fixed typos in BreadCrumbCustomTheme variables

### Design kit

### Figma

There is a brand new Figma library available. The licenses are checked and provided separately, and currently available for a limited time. But if you're interested in switching to Figma, contact HDS team. It will be available with Helsinki licenses and in the future also as a community file.

### Sketch/Abstract

#### Added

- [Footer] New symbols following the hel.fi visual style. New symbols also include changes to all Footer sections. Service title is now mandatory. The Helsinki logo moved to the Base section. Separate symbols for Footers with custom content (e.g. partner information). New variant for the Utility section which allow more utility links and link groups
- [Header] New component replacing HDS Navigation

#### Changed

- Updated HDS Sketch libraries to Sketch version 98.3. Please update your Sketch and files accordingly.
- [Koros] Renamed Storm to Wave and Wave to Vibration according to brand
- [Page templates] Breakpoint-XS padding fix from 12px to 16px
- [Heros] Fixes for paddings and Lead Text width in sizes M and S

#### Deprecated

- [Footer] Old Footer symbols deprecated. These will be removed in a future major release. Switch to new Footer symbols as soon as possible
- [Navigation] Marked as deprecated, will be removed in the next major release. Replaced by HDS Header. Switch to new Header symbols as soon as possible

## [3.0.0-alpha.0] - July, 6, 2023

### React

#### Added
- [Header] New Header component to wrap all its child components
- [Header.UniversalBar] Optional component to display useful quick links
- [Header.ActionBar] Mandatory component to display service logo, language selection, search and user login
- [Header.NavigationMenu] Mandatory component to display navigation links

#### Changed
- [LinkBox] Property name `withBorder` changed to `border`
- [Koros] Renamed variants Wave to Vibration and Storm to Wave
- Supported browserlist updated

#### Deprecated
- [Navigation] New Header component will be the replacement
- [Tag] Rectangular version (default)
- [StatusLabel] Rectangular version (default)

### Core

#### Changed
- [Koros] Renamed variants Wave to Vibration and Storm to Wave

#### Deprecated
- [Tag] Rectangular version (default)
- [StatusLabel] Rectangular version (default)

### Documentation

#### Added
- [Header] Documentation - still a work in progress
- Helpful tooltip to explain statuses

#### Changed
- [Koros] Renamed variants Wave to Vibration and Storm to Wave

### Design kit

#### Added

- [Header] Add HDS Header.sketch file to shared libraries for HDS 3.0.0 Alpha release purposes. The shared library file includes new Header and Side navigation symbols.

## [2.17.0] - Aug, 18, 2023

Expand Down Expand Up @@ -37,7 +189,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
#### Added
- Figma API icon library export script


## [2.16.0] - June, 28, 2023

### React
Expand Down

Large diffs are not rendered by default.

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion packages/core/DEVELOPMENT.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,3 @@ Remember to always build the tokens after updating or adding new ones, otherwise
- [PostCSS](https://github.com/postcss/postcss)
- [Storybook](https://storybook.js.org/)
- hds-core follows the [BEM methodology](http://getbem.com/)

4 changes: 2 additions & 2 deletions packages/core/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ hds-core/
│ :
├── icons/ # collection of HDS icon styles
│ ├── all.css # bundled stylesheet including all icons
│ ├── icons.css # bundled stylesheet including all icons
│ ├── icon.css # base styles for icons
│ ├── icon-<icon name>.css # individual icon stylesheet
│ :
Expand All @@ -37,7 +37,7 @@ hds-core/

### Using the styles

To import styles for all the core components, you'll need two stylesheets: `base.css` (the base styles and CSS variables) and `components/all.css`. If you use any of the icons, you'll also need `icons/all.css`. Do note that the `all.css`-files bundle all the components and icons into single stylesheets and thus are large in filesize.
To import styles for all the core components, you'll need two stylesheets: `base.css` (the base styles and CSS variables) and `components/all.css`. If you use any of the icons, you'll also need `icons/icons.css`. Do note that the `components/all.css` bundles all the components and `icons/icons.css` bundles all the icons into single stylesheets and thus are large in filesize.

Therefore, we do recommend that you use individual component and icon stylesheets instead of the bundled styles.

Expand Down
4 changes: 2 additions & 2 deletions packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "hds-core",
"version": "2.17.0",
"version": "3.0.0",
"description": "Core styles for the Helsinki Design System",
"homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
"license": "MIT",
Expand Down Expand Up @@ -30,7 +30,7 @@
"@storybook/manager-webpack5": "^6.5.16",
"copyfiles": "2.2.0",
"cssnano": "4.1.10",
"hds-design-tokens": "2.17.0",
"hds-design-tokens": "3.0.0",
"normalize.css": "8.0.1",
"postcss": "8.2.15",
"postcss-cli": "8.3.1",
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/breadcrumb/breadcrumb.stories.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import './breadcrumb.css';
import '../link/link.css';
import '../../icons/ui/icon-angle-right.css';
import '../../icons/ui/icon-angle-left.css';
import '../../icons/angle-right.css';
import '../../icons/angle-left.css';

export default {
title: 'Components/Breadcrumb',
Expand Down
Loading

0 comments on commit dea8dde

Please sign in to comment.