Merge pull request #1211 from City-of-Helsinki/HDS-1724-hero-arrow

HDS-1724-hero-arrow
City-of-Helsinki · Jan 31, 2024 · 3a60649 · 3a60649
2 parents 506c747 + 19205bd
commit 3a60649
Show file tree

Hide file tree

Showing 11 changed files with 374 additions and 70 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,8 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 #### Changed
 
-Changes that are not related to specific components
-- [Component] What has been changed
+- [Hero] Add support for showing an arrow-icon in the bottom left corner with theming support
 
 #### Fixed
 
@@ -41,6 +40,7 @@ Changes that are not related to specific components
 
 Changes that are not related to specific components
 - [Component] What has been changed
+- [Hero] Add support for showing an arrow-icon in the bottom left corner with theming support
 
 #### Fixed
 
@@ -55,7 +55,7 @@ Changes that are not related to specific components
 
 #### Added
 
-- [Component] What is added?
+- [Hero] Added examples and code of the arrow-icon
 
 #### Changed
 

diff --git a/packages/core/src/components/hero/hero.css b/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,

diff --git a/packages/core/src/components/hero/hero.stories.js b/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';
diff --git a/...t/.loki/reference/chrome_iphone7_Components_Hero_All_Heroes_With_Arrow_Icon.png b/...t/.loki/reference/chrome_iphone7_Components_Hero_All_Heroes_With_Arrow_Icon.png
diff --git a/...ct/.loki/reference/chrome_laptop_Components_Hero_All_Heroes_With_Arrow_Icon.png b/...ct/.loki/reference/chrome_laptop_Components_Hero_All_Heroes_With_Arrow_Icon.png
diff --git a/packages/react/src/components/hero/Hero.module.scss b/packages/react/src/components/hero/Hero.module.scss
@@ -117,3 +117,17 @@
 .korosAligner {
   composes: hds-hero--diagonal-koros__koros-aligner from 'hds-core/lib/components/hero/hero.css';
 }
+
+/* arrow icon specific styles */
+
+.arrowIconContainer {
+  composes: hds-hero__arrow-icon-container from 'hds-core/lib/components/hero/hero.css';
+}
+
+.arrowIcon {
+  composes: hds-hero--arrow-icon from 'hds-core/lib/components/hero/hero.css';
+}
+
+.arrowIconSpacingAfter {
+  composes: hds-hero__arrow-icon-spacing-after from 'hds-core/lib/components/hero/hero.css';
+}
diff --git a/packages/react/src/components/hero/Hero.stories.tsx b/packages/react/src/components/hero/Hero.stories.tsx
@@ -16,7 +16,6 @@ export default {
     controls: { expanded: true },
     layout: 'fullscreen',
   },
-  args: {},
 };
 
 type DefaultContentProps = {
@@ -295,6 +294,7 @@ WithoutImageKorosOverlay.argTypes = {
     '--background-color': '#000',
     '--color': '#fff',
     '--koros-color': '#000',
+    '--arrow-icon-color': 'var(--color-brick)',
   }),
   ...createKorosArg({ flipVertical: true }),
   ...createVariantArg('noImage'),
@@ -667,3 +667,47 @@ AllHeroes.argTypes = {
   ...getDisabledControl('centeredContent'),
   ...getDisabledControl('variant'),
 };
+
+export const AllHeroesWithArrowIcon = () => {
+  const DummyContent = () => {
+    return (
+      <div style={{ minHeight: '200px', padding: '20px' }}>
+        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, quam sed aliquet faucibus, nisl risus
+          condimentum nisl, quis aliquam ligula mauris nec enim. Donec euismod, quam sed aliquet faucibus, nisl risus
+          condimentum nisl, quis aliquam ligula mauris nec enim. Donec euismod, quam sed aliquet faucibus, nisl risus
+          condimentum nisl, quis aliquam ligula mauris nec enim.
+        </p>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', backgroundColor: 'beige' }}>
+      <ImageLeft {...{ ...getDefaultArgs('imageLeft'), showArrowIcon: true }} />
+      <DummyContent />
+      <BackgroundImage
+        {...{ ...getDefaultArgs('backgroundImage'), theme: { '--koros-color': 'beige' }, showArrowIcon: true }}
+      />
+      <DummyContent />
+      <ImageRight {...{ ...getDefaultArgs('imageRight'), showArrowIcon: true }} />
+      <DummyContent />
+      <WithoutImage {...{ ...getDefaultArgs('noImage', noImageOptions[1]), showArrowIcon: true }} />
+      <DummyContent />
+      <DiagonalKoros {...{ ...getDefaultArgs('diagonalKoros'), showArrowIcon: true }} />
+      <DummyContent />
+      <WithoutImageKorosOverlay
+        {...{
+          ...getDefaultArgs('noImage', noImageOptions[2]),
+          showArrowIcon: true,
+        }}
+      />
+      <DummyContent />
+      <ImageBottom {...{ ...getDefaultArgs('imageBottom'), showArrowIcon: true }} />
+      <DummyContent />
+      <WithoutImageAndKoros {...{ ...getDefaultArgs('noImage', noImageOptions[3]), showArrowIcon: true }} />
+      <DummyContent />
+    </div>
+  );
+};