Merge pull request #1221 from City-of-Helsinki/release-3.5.0

Release 3.5.0

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.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

packages/core/package.json

@@ -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",
@@ -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",

packages/core/src/base.css

@@ -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%;
+}

packages/core/src/components/hero/hero.css

@@ -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 {
@@ -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,

packages/core/src/components/hero/hero.stories.js

@@ -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>
@@ -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 {
@@ -108,6 +135,7 @@ export const DiagonalKoros = () => `
         ${image}
       </div>
     </div>
+    ${arrowIcon}
   </div>`;
 DiagonalKoros.storyName = 'Diagonal koros';
 
@@ -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';

packages/core/src/components/text-input/text-input.css

@@ -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;

packages/core/src/icons/icons.css

@@ -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");
@@ -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");
@@ -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");