Merge pull request #1193 from City-of-Helsinki/release-3.3.0

Release v3.3.0

.github/pull_request_template.md

@@ -17,3 +17,7 @@ Closes #
 ## How Has This Been Tested?
 
 ## Screenshots (if appropriate):
+
+## Add to changelog
+- [ ] Added needed line to changelog 
+<!-- Or comment here why it is not relevant in the change log -->

CHANGELOG.md

@@ -5,6 +5,41 @@ 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.3.0] - December, 19, 2023
+
+### React
+
+#### Added
+
+- [Header.ActionBarItem] New property "preventButtonResize" to prevent menu button shifting when clicked
+- [Header.NavigationMenu] Mobile menu has open and close animation
+
+#### Changed
+
+- [Tag] Default value for `id` marked to be removed in the next major release.
+- [Table] Default values for `headingId` and `id` marked marked to be removed in the next major release.
+- [Select] Placeholder text inherits background color
+
+#### Fixed
+
+- [Header.LanguageSelector] Added `aria-current` to currently selected language button
+
+### Documentation
+
+#### Changed
+
+- Updated grid documentation with information about the new Header
+
+#### Fixed
+
+- Add missing Next.js and Gatsby code snippets to foundations / server side rendering
+
+### Figma
+
+#### Changed
+
+[UI Kit] Component frames now locked in the file to prevent accidental moving
+
 ## [3.2.0] - December, 5, 2023
 
 ### React
@@ -66,6 +101,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Sketch & Abstract
 
 #### Changed
+
 - Updated HDS Sketch libraries to Sketch version 99.1. Please update your Sketch and files accordingly
 
 ### Icons

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-core",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Core styles for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "copyfiles": "2.2.0",
     "cssnano": "4.1.10",
-    "hds-design-tokens": "3.2.0",
+    "hds-design-tokens": "3.3.0",
     "normalize.css": "8.0.1",
     "postcss": "8.2.15",
     "postcss-cli": "8.3.1",

packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-design-tokens",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Design tokens for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-react",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "React components for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
   "license": "MIT",
@@ -126,7 +126,7 @@
     "crc-32": "1.2.0",
     "date-fns": "2.16.1",
     "downshift": "6.0.6",
-    "hds-core": "3.2.0",
+    "hds-core": "3.3.0",
     "http-status-typed": "^1.0.1",
     "jwt-decode": "^3.1.2",
     "kashe": "1.0.4",

packages/react/src/components/breadcrumb/Breadcrumb.stories.tsx

@@ -12,6 +12,7 @@ export default {
   title: 'Components/Breadcrumb',
   parameters: {
     controls: { expanded: true },
+    layout: 'fullscreen',
   },
   args: {
     ariaLabel: 'Breadcrumb',
@@ -35,56 +36,58 @@ export const Example = (args) => <Breadcrumb {...args} />;
 
 export const ExampleInHeader = (args) => {
   return (
-    <Header languages={languages}>
-      <Header.UniversalBar primaryLinkText="Helsingin kaupunki" primaryLinkHref="#" />
-      <Header.ActionBar
-        title="Helsingin kaupunki"
-        titleAriaLabel="Helsingin kaupunki"
-        titleHref="https://hel.fi"
-        logoAriaLabel="Service logo"
-        logoHref="https://hel.fi"
-        logo={<Logo src={logoFi} alt="Helsingin kaupunki" />}
-        menuButtonAriaLabel="Menu"
-      >
-        <Header.LanguageSelector ariaLabel="Kielen valinta">
-          <h3>Tietoa muilla kielillä</h3>
-          <Link external href="www.example.com">
-            Selkosuomi
-          </Link>
-          <Link external href="www.example.com">
-            Viittomakieli
-          </Link>
-        </Header.LanguageSelector>
-      </Header.ActionBar>
-      <Header.NavigationMenu>
-        <Header.Link
-          href="#"
-          label="Health and social services"
-          onClick={(event) => event.preventDefault()}
-          active
-          dropdownLinks={[
-            <Header.Link
-              href="#"
-              label="Senior services"
-              active
-              dropdownLinks={[
-                <Header.Link href="#" label="Informal care" active />,
-                <Header.Link href="#" label="Senior centres" />,
-                <Header.Link href="#" label="Home care" />,
-              ]}
-            />,
-            <Header.Link
-              href="#"
-              label="Data and the rights of the client"
-              dropdownLinks={[
-                <Header.Link href="#" label="Requesting client data" />,
-                <Header.Link href="#" label="Fees" />,
-              ]}
-            />,
-          ]}
-        />
-        <Header.Link href="#" label="Child and family services" />
-      </Header.NavigationMenu>
+    <>
+      <Header languages={languages}>
+        <Header.ActionBar
+          title="Helsingin kaupunki"
+          titleAriaLabel="Helsingin kaupunki"
+          titleHref="https://hel.fi"
+          logoAriaLabel="Service logo"
+          logoHref="https://hel.fi"
+          logo={<Logo src={logoFi} alt="Helsingin kaupunki" />}
+          menuButtonAriaLabel="Menu"
+          frontPageLabel="Etusivu"
+        >
+          <Header.LanguageSelector ariaLabel="Kielen valinta">
+            <h3>Tietoa muilla kielillä</h3>
+            <Link external href="www.example.com">
+              Selkosuomi
+            </Link>
+            <Link external href="www.example.com">
+              Viittomakieli
+            </Link>
+          </Header.LanguageSelector>
+        </Header.ActionBar>
+        <Header.NavigationMenu>
+          <Header.Link
+            href="#"
+            label="Health and social services"
+            onClick={(event) => event.preventDefault()}
+            active
+            dropdownLinks={[
+              <Header.Link
+                href="#"
+                label="Senior services"
+                active
+                dropdownLinks={[
+                  <Header.Link href="#" label="Informal care" active />,
+                  <Header.Link href="#" label="Senior centres" />,
+                  <Header.Link href="#" label="Home care" />,
+                ]}
+              />,
+              <Header.Link
+                href="#"
+                label="Data and the rights of the client"
+                dropdownLinks={[
+                  <Header.Link href="#" label="Requesting client data" />,
+                  <Header.Link href="#" label="Fees" />,
+                ]}
+              />,
+            ]}
+          />
+          <Header.Link href="#" label="Child and family services" />
+        </Header.NavigationMenu>
+      </Header>
       <Container alignWithHeader>
         <Breadcrumb
           {...args}
@@ -96,7 +99,7 @@ export const ExampleInHeader = (args) => {
           }}
         />
       </Container>
-    </Header>
+    </>
   );
 };
 

packages/react/src/components/container/Container.stories.tsx

@@ -31,20 +31,6 @@ export const AlignsWithHeader = (args) => {
           <Header.Link href="#online" label="Online" />
           <Header.Link href="#feedback" label="Feedback" />
         </Header.UniversalBar>
-        <Header.NavigationMenu>
-          <Header.Link
-            label="Sosiaali ja terveyspalvelut"
-            onClick={(event) => {
-              event.preventDefault();
-            }}
-          />
-          <Header.Link
-            label="kasvatus ja koulutus"
-            onClick={(event) => {
-              event.preventDefault();
-            }}
-          />
-        </Header.NavigationMenu>
         <Header.ActionBar
           frontPageLabel="Frontpage"
           title="City of Helsinki"
@@ -62,6 +48,20 @@ export const AlignsWithHeader = (args) => {
             <h3>Tempor incididunt ut labore et dolore</h3>
           </Header.ActionBarItem>
         </Header.ActionBar>
+        <Header.NavigationMenu>
+          <Header.Link
+            label="Sosiaali ja terveyspalvelut"
+            onClick={(event) => {
+              event.preventDefault();
+            }}
+          />
+          <Header.Link
+            label="kasvatus ja koulutus"
+            onClick={(event) => {
+              event.preventDefault();
+            }}
+          />
+        </Header.NavigationMenu>
       </Header>
       <Container {...args}>
         <h1>Duis aute irure dolor in reprehenderit</h1>

packages/react/src/components/dropdown/select/Select.module.scss

@@ -26,6 +26,7 @@
   width: 100%;
 
   &.placeholder {
+    background-color: inherit;
     color: var(--placeholder-color);
   }
 
@@ -130,4 +131,4 @@
       @extend %dropdownFocusOutline;
     }
   }
-}
+}

packages/react/src/components/header/Header.module.scss

@@ -44,7 +44,9 @@
   --icon-size: 24px;
   --nav-drop-down-icon-color: var(--color-black);
   --nav-background-color: var(--color-white);
-
+  --animation-duration-dropwdown: 250ms;
+  --animation-close-delay-dropdown: 150ms;
+
   @include layout.below-large {
     --action-bar-container-height: 74px;
     --logo-height: 48px;

packages/react/src/components/header/Header.stories.tsx

@@ -289,6 +289,7 @@ export const WithFullFeatures = (args) => {
               icon={<IconUser />}
               id="action-bar-login"
               closeLabel={I18n.close}
+              preventButtonResize
             >
               <h3>{I18n.loginOptions}</h3>
             </Header.ActionBarItem>
@@ -644,6 +645,7 @@ export const ManualLanguageSorting = (args) => {
             icon={<IconUser />}
             id="action-bar-login"
             closeLabel={I18n.close}
+            preventButtonResize
           >
             <h3>{I18n.loginOptions}</h3>
           </Header.ActionBarItem>

packages/react/src/components/header/components/headerActionBar/HeaderActionBar.module.scss

@@ -5,6 +5,7 @@
 
 .headerActionBar {
   align-items: stretch;
+  background-color: var(--actionbar-background-color);
   box-sizing: border-box;
   color: var(--header-color);
   display: flex;
@@ -16,6 +17,7 @@
   padding-left: var(--header-margin);
   padding-right: var(--header-margin);
   position: relative;
+  z-index: var(--header-z-index);
 
   hr {
     border: 0;

packages/react/src/components/header/components/headerActionBar/HeaderActionBar.tsx

@@ -182,7 +182,7 @@ export const HeaderActionBar = ({
   const handleLogoClick = useCallbackIfDefined(onLogoClick);
   const handleKeyPress = useEnterOrSpacePressCallback(handleClick);
   const handleLogoKeyPress = useEnterOrSpacePressCallback(handleLogoClick);
-  const { mobileMenuOpen } = useHeaderContext();
+  const { isNotLargeScreen, mobileMenuOpen } = useHeaderContext();
   const actionBarRef = useRef<HTMLDivElement>();
 
   useEffect(() => {
@@ -267,13 +267,15 @@ export const HeaderActionBar = ({
             )}
           </div>
         </div>
-        <HeaderActionBarNavigationMenu
-          frontPageLabel={frontPageLabel}
-          titleHref={titleHref}
-          logo={logo}
-          logoProps={logoProps}
-          openFrontPageLinksAriaLabel={openFrontPageLinksAriaLabel}
-        />
+        {isNotLargeScreen && (
+          <HeaderActionBarNavigationMenu
+            frontPageLabel={frontPageLabel}
+            titleHref={titleHref}
+            logo={logo}
+            logoProps={logoProps}
+            openFrontPageLinksAriaLabel={openFrontPageLinksAriaLabel}
+          />
+        )}
       </div>
       {componentExists && (
         <HeaderLanguageSelectorConsumer {...lsProps} fullWidthForMobile>

packages/react/src/components/header/components/headerActionBar/HeaderActionBarNavigationMenu.module.scss

@@ -42,8 +42,10 @@
 }
 
 .headerNavigationMenu {
+  overflow: hidden;
   position: absolute;
-  transition: 0.3s min-height;
+  transform: translateY(-100%) translateY(1px);
+  transition: var(--animation-duration-dropwdown) transform var(--animation-close-delay-dropdown), var(--animation-duration-dropwdown) min-height calc(var(--animation-duration-dropwdown) + var(--animation-close-delay-dropdown));
   width: 100%;
 }
 
@@ -184,6 +186,8 @@
   display: flex;
   flex-direction: column;
   height: min-content;
+  transform: translateY(0%);
+  transition: var(--animation-duration-dropwdown) transform 0ms, var(--animation-duration-dropwdown) min-height 0ms;
 }
 
 .mobileNavigationLink {