Skip to content

Commit

Permalink
Merge pull request #1221 from City-of-Helsinki/release-3.5.0
Browse files Browse the repository at this point in the history
Release 3.5.0
  • Loading branch information
mrTuomoK authored Feb 6, 2024
2 parents 3402537 + 51cbf80 commit 301c849
Show file tree
Hide file tree
Showing 114 changed files with 941 additions and 361 deletions.
59 changes: 59 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.5.0] - February, 6, 2024

### React

#### Changed

- [Hero] Add support for showing an arrow-icon in the bottom left corner with theming support
- Normalize is now removed from the `hds-core` package which React-package relies on. If it causes trouble, it can be included in projects separately.

#### Fixed

- [TextInput] Hide native password reveal icon (Edge browser)
- The way styles were imported was broken and could result in faulty styles

### Core

#### Changed

- [Hero] Add support for showing an arrow-icon in the bottom left corner with theming support
- Normalize is now removed from the package, if it causes trouble, it can be included in projects separately.

#### Fixed

- [Text input] Hide native password reveal icon (Edge browser)

### Documentation

#### Added

- [Hero] Added examples and code of the arrow-icon

### Figma

#### Added

- [Hero] Added a visual arrow
- [Hero] Added a photographer information
- [Tag] Two new variants: Link (underlined) and Action (bordered) with interaction states
- [Icons] New icons in the Forms category: document-group, document-blank, document-blank-group, folder, folder-group & box

#### Changed

- [Hero] Variants named according to code implementation
- [Tag] Adjusted focus state offset to 2px

#### Fixed

- [Hero] Fixes for multiple variants e.g fonts, colours, paddings and improved Koro element usage and layout structure.

#### Removed

- [Tag] Removed state variants for informative tags
- [Hero] Removed the "new value" variant as it was unnecessary.

### Icon kit

#### Added:
- [Icons] New icons in the Forms category: document-group, document-blank, document-blank-group, folder, folder-group & box

## [3.4.0] - January, 16, 2024

### React
Expand Down
5 changes: 2 additions & 3 deletions packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "hds-core",
"version": "3.4.0",
"version": "3.5.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,8 +30,7 @@
"@storybook/manager-webpack5": "^6.5.16",
"copyfiles": "2.2.0",
"cssnano": "4.1.10",
"hds-design-tokens": "3.4.0",
"normalize.css": "8.0.1",
"hds-design-tokens": "3.5.0",
"postcss": "8.2.15",
"postcss-cli": "8.3.1",
"postcss-import": "12.0.1",
Expand Down
9 changes: 8 additions & 1 deletion packages/core/src/base.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
@import url("normalize.css");
@import url("hds-design-tokens");
@import url("utils/animations.css");
@import url("utils/helpers.css");

/*
* Normalize.css rule
*/

html {
-webkit-text-size-adjust: 100%;
}
41 changes: 35 additions & 6 deletions packages/core/src/components/hero/hero.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,51 @@
.hds-hero {
--arrow-icon-color: var(--color);
--arrow-icon-size: 128px;
--background-color: var(--color-white);
--color: var(--color-black-90);
--image-position: bottom right;
--koros-color: var(--color-white);
--koros-height: 85px;
--diagonal-koros-position: 45%;
--horizontal-padding-small: var(--spacing-layout-2-xs);
--horizontal-padding-medium: var(--spacing-layout-xs);
--horizontal-padding-large: var(--spacing-layout-xs);
--horizontal-padding-medium: var(--spacing-layout-xs);
--horizontal-padding-small: var(--spacing-layout-2-xs);
--horizontal-padding-x-large: var(--spacing-layout-xs);
--image-position: bottom right;
--koros-color: var(--color-white);
--koros-height: 85px;
--padding-horizontal: var(--horizontal-padding-small);
--padding-vertical: var(--spacing-xl);
--z-index: 1;

background-color: var(--background-color);
color: var(--color);
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
z-index: var(--z-index);
}

.hds-hero__arrow-icon-container {
display: flex;
height: 0;
margin: 0 auto;
max-width: var(--container-width-xl);
overflow: visible;
position: relative;
width: 100%;
z-index: calc(var(--z-index) + 1);
}

.hds-hero__arrow-icon-spacing-after {
margin-bottom: calc(var(--arrow-icon-size) / 2);
}

.hds-hero--arrow-icon {
--icon-size: var(--arrow-icon-size) !important;

color: var(--arrow-icon-color);

/* the following is magic to calculate a proper margins (icon has empty space in it that is taken into account) */
margin-left: calc(var(--padding-horizontal) - (var(--arrow-icon-size) / 4));
margin-top: calc(0px - var(--arrow-icon-size) / (128 / 20) - var(--spacing-layout-xs));
}

.hds-hero__title {
Expand Down Expand Up @@ -210,6 +238,7 @@
.hds-hero {
--padding-horizontal: var(--horizontal-padding-medium);
--padding-vertical: var(--spacing-layout-m);
--arrow-icon-size: 164px;
}

.hds-hero--with-background__background,
Expand Down
64 changes: 64 additions & 0 deletions packages/core/src/components/hero/hero.stories.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import './hero.css';
import '../../icons/icon.css';

export default {
title: 'Components/Hero',
};

const arrowIcon = `
<div class="hds-hero__arrow-icon-container">
<span class="hds-icon hds-hero--arrow-icon hds-icon--arrow-down" />
</div>
`;

const button = `
<button type="button" class="hds-button hds-button--secondary hds-button--theme-black" role="link">
<span class="hds-button__label">Button</span>
Expand Down Expand Up @@ -68,6 +75,26 @@ export const ImageBottom = () => `

ImageBottom.storyName = 'Bottom image';

export const ImageBottomWithArrow = () => `
<div class="hds-hero hds-hero--image-bottom hds-hero__arrow-icon-spacing-after" style="--koros-height:15px;">
<div class="hds-hero__container">
<div class="hds-hero__content hds-hero__content--single-column">
${card}
</div>
</div>
<div class="hds-hero__koros-and-image-container">
<div class="hds-hero__koros-container">
${getKoros()}
</div>
<div class="hds-hero__image-below-koros">
${image}
</div>
</div>
${arrowIcon}
</div>`;

ImageBottomWithArrow.storyName = 'Bottom image with arrow icon';

export const DiagonalKoros = () => `
<style type="text/css">
.custom-theme {
Expand Down Expand Up @@ -108,6 +135,7 @@ export const DiagonalKoros = () => `
${image}
</div>
</div>
${arrowIcon}
</div>`;
DiagonalKoros.storyName = 'Diagonal koros';

Expand Down Expand Up @@ -259,3 +287,39 @@ export const BackgroundImage = () => `
</div>
</div>`;
BackgroundImage.storyName = 'Background image';

export const BackgroundImageWithArrow = () => `
<style type="text/css">
.container {
background: #ccc;
padding: 10px 10px 200px;
}
.custom-theme {
content: "";
--background-color: #fff;
--color: #000;
--bottom-koros-color: #ccc;
--top-koros-color: var(--background-color);
--koros-height: 15px;
--arrow-icon-color: var(--color-brick);
}
</style>
<div class="container">
<div class="hds-hero custom-theme hds-hero--background-image hds-hero__arrow-icon-spacing-after">
<div class="hds-hero--with-background__container">
<div class="hds-hero--with-background__background">
<div class="hds-hero--background-image__koros">
${getKoros(true)}
</div>
${image}
</div>
<div class="hds-hero__content">
${card}
<div class="hds-hero--with-background__empty-column">
</div>
</div>
</div>
${arrowIcon}
</div>
</div>`;
BackgroundImageWithArrow.storyName = 'Background image with arrow icon';
4 changes: 4 additions & 0 deletions packages/core/src/components/text-input/text-input.css
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,10 @@
resize: vertical;
}

.hds-text-input .hds-text-input__input::-ms-reveal {
display: none;
}

.hds-text-input .hds-text-input__input::placeholder {
color: var(--placeholder-color);
opacity: 1;
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/icons/box.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions packages/core/src/icons/document-blank-group.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions packages/core/src/icons/document-blank.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions packages/core/src/icons/document-group.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions packages/core/src/icons/folder-group.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions packages/core/src/icons/folder.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions packages/core/src/icons/icons.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
@import url("bell.css");
@import url("bell-crossed.css");
@import url("binoculars.css");
@import url("box.css");
@import url("cake.css");
@import url("calendar.css");
@import url("calendar-clock.css");
Expand Down Expand Up @@ -50,6 +51,9 @@
@import url("discord.css");
@import url("display.css");
@import url("document.css");
@import url("document-blank.css");
@import url("document-blank-group.css");
@import url("document-group.css");
@import url("download.css");
@import url("download-cloud.css");
@import url("drag.css");
Expand All @@ -65,6 +69,8 @@
@import url("face-smile.css");
@import url("facebook.css");
@import url("family.css");
@import url("folder.css");
@import url("folder-group.css");
@import url("globe.css");
@import url("google.css");
@import url("graph-columns.css");
Expand Down
5 changes: 5 additions & 0 deletions packages/core/src/svg/box.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions packages/core/src/svg/document-blank-group.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/core/src/svg/document-blank.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 301c849

Please sign in to comment.