Merge pull request #1146 from undp/905-997-1008-multiple-updates-to-p…

…age-hero #905 - #997 - #1008 -- Fix to page hero to make sure to use default image variant
undp · Mar 7, 2023 · 3866dd1 · 3866dd1
2 parents 52c2cec + 0129d50
commit 3866dd1
Show file tree

Hide file tree

Showing 4 changed files with 305 additions and 329 deletions.
diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx b/stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx
@@ -1,6 +1,7 @@
+/* eslint-disable import/no-named-as-default */
+/* eslint-disable react/jsx-no-useless-fragment */
 import React, { useEffect } from 'react';
 import './page-hero.scss';
-// eslint-disable-next-line import/no-named-as-default
 import expandToSize from '../../../../assets/js/animation';
 import BackgroundVideo from '../../../../assets/video/video_sample.mp4';
 import { Video } from '../../../../Atom/Video/Video';
@@ -28,13 +29,16 @@ export function PageHero({
 
   return (
     <div className="pagehero-full">
-      {variant === 'Video' && (
+      {variant === 'Video' ? (
         <Video src={BackgroundVideo} width="100%" height="100%" />
-      )}
-      {variant === 'Image' && (
-        <div className="overlay-grey">
-          <img src={imgsrc} alt={imgalt} />
-        </div>
+      ) : (
+        <>
+          {variant !== 'No background' && imgsrc && (
+            <div className="overlay-grey">
+              <img src={imgsrc} alt={imgalt} />
+            </div>
+          )}
+        </>
       )}
       <Breadcrumbcomponent data={data} Color={textColor} />
       <div className="pagehero-content medium-offset-1">

diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHero.stories.mdx b/stories/Components/UIcomponents/Hero/PageHero/PageHero.stories.mdx
@@ -10,18 +10,10 @@ export const getCaptionForLocale = (locale) => {
     case "english":
       const engText = {
         herodata: [
-          {
-            text: "Home",
-          },
-          {
-            text: "Second-level",
-          },
-          {
-            text: "Third-level",
-          },
-          {
-            text: "Page Title",
-          },
+          { text: "Home" },
+          { text: "Second-level" },
+          { text: "Third-level" },
+          { text: "Page Title" },
         ],
         title: "The sdgs in action",
         subtitle:
@@ -37,18 +29,10 @@ export const getCaptionForLocale = (locale) => {
     case "arabic":
       const arabicText = {
         herodata: [
-          {
-            text: "الصفحة الرئيسية",
-          },
-          {
-            text: "المستوى الثاني",
-          },
-          {
-            text: "المستوى الثالث",
-          },
-          {
-            text: "عنوان الصفحة",
-          },
+          { text: "الصفحة الرئيسية" },
+          { text: "المستوى الثاني" },
+          { text: "المستوى الثالث" },
+          { text: "عنوان الصفحة" },
         ],
         title: "أهداف التنمية المستدامة في العمل",
         content: "تركيزنا",
@@ -62,18 +46,10 @@ export const getCaptionForLocale = (locale) => {
     case "burmese":
       const burmeseText = {
         herodata: [
-          {
-            text: "အိမ်ပြန်",
-          },
-          {
-            text: "ဒုတိယအဆင့်",
-          },
-          {
-            text: "တတိယအဆင့်",
-          },
-          {
-            text: "စာမျက်နှာခေါင်းစဉ်",
-          },
+          { text: "အိမ်ပြန်" },
+          { text: "ဒုတိယအဆင့်" },
+          { text: "တတိယအဆင့်" },
+          { text: "စာမျက်နှာခေါင်းစဉ်" },
         ],
         title: "sdgs သည်လုပ်ဆောင်သည်",
         content: "ကျွန်ုပ်တို့၏အာရုံ",
@@ -87,18 +63,10 @@ export const getCaptionForLocale = (locale) => {
     case "japanese":
       const japaneseText = {
         herodata: [
-          {
-            text: "家",
-          },
-          {
-            text: "セカンドレベル",
-          },
-          {
-            text: "第3レベル",
-          },
-          {
-            text: "ページタイトル",
-          },
+          { text: "家" },
+          { text: "セカンドレベル" },
+          { text: "第3レベル" },
+          { text: "ページタイトル" },
         ],
         title: "動作中のsdgs",
         content: "私たちの焦点",
@@ -112,18 +80,10 @@ export const getCaptionForLocale = (locale) => {
     default:
       const dummy = {
         herodata: [
-          {
-            text: "Home",
-          },
-          {
-            text: "Second-level",
-          },
-          {
-            text: "Third-level",
-          },
-          {
-            text: "Page Title",
-          },
+          { text: "Home" },
+          { text: "Second-level" },
+          { text: "Third-level" },
+          { text: "Page Title" },
         ],
         title: "The sdgs in action",
         subtitle:
@@ -143,18 +103,22 @@ export const getCaptionForLocale = (locale) => {
   title="Components/UI components/Hero/Page"
   argTypes={{
     Variant: {
+      name: "Variant",
       options: ["Video", "Image", "No background"],
-      control: { type: "radio" },
+      control: { type: "inline-radio" },
     },
     CTA: {
+      name: "Enable CTA",
       options: ["On", "Off"],
       control: { type: "inline-radio" },
     },
     Overline: {
+      name: "Enable Overline",
       options: ["On", "Off"],
       control: { type: "inline-radio" },
     },
     Subtitle: {
+      name: "Enable Subtitle",
       options: ["On", "Off"],
       control: { type: "inline-radio" },
     },

diff --git a/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.mdx b/stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.mdx
@@ -10,18 +10,10 @@ export const getCaptionForLocale = (locale) => {
     case "english":
       const engText = {
         herodata: [
-          {
-            text: "Home",
-          },
-          {
-            text: "Second-level",
-          },
-          {
-            text: "Third-level",
-          },
-          {
-            text: "Page Title",
-          },
+          { text: "Home" },
+          { text: "Second-level" },
+          { text: "Third-level" },
+          { text: "Page Title" },
         ],
         title: "The sdgs in action",
         subtitle:
@@ -37,18 +29,10 @@ export const getCaptionForLocale = (locale) => {
     case "arabic":
       const arabicText = {
         herodata: [
-          {
-            text: "الصفحة الرئيسية",
-          },
-          {
-            text: "المستوى الثاني",
-          },
-          {
-            text: "المستوى الثالث",
-          },
-          {
-            text: "عنوان الصفحة",
-          },
+          { text: "الصفحة الرئيسية" },
+          { text: "المستوى الثاني" },
+          { text: "المستوى الثالث" },
+          { text: "عنوان الصفحة" },
         ],
         title: "أهداف التنمية المستدامة في العمل",
         content: "تركيزنا",
@@ -62,18 +46,10 @@ export const getCaptionForLocale = (locale) => {
     case "burmese":
       const burmeseText = {
         herodata: [
-          {
-            text: "အိမ်ပြန်",
-          },
-          {
-            text: "ဒုတိယအဆင့်",
-          },
-          {
-            text: "တတိယအဆင့်",
-          },
-          {
-            text: "စာမျက်နှာခေါင်းစဉ်",
-          },
+          { text: "အိမ်ပြန်" },
+          { text: "ဒုတိယအဆင့်" },
+          { text: "တတိယအဆင့်" },
+          { text: "စာမျက်နှာခေါင်းစဉ်" },
         ],
         title: "sdgs သည်လုပ်ဆောင်သည်",
         content: "ကျွန်ုပ်တို့၏အာရုံ",
@@ -87,18 +63,10 @@ export const getCaptionForLocale = (locale) => {
     case "japanese":
       const japaneseText = {
         herodata: [
-          {
-            text: "家",
-          },
-          {
-            text: "セカンドレベル",
-          },
-          {
-            text: "第3レベル",
-          },
-          {
-            text: "ページタイトル",
-          },
+          { text: "家" },
+          { text: "セカンドレベル" },
+          { text: "第3レベル" },
+          { text: "ページタイトル" },
         ],
         title: "動作中のsdgs",
         content: "私たちの焦点",
@@ -112,18 +80,10 @@ export const getCaptionForLocale = (locale) => {
     default:
       const dummy = {
         herodata: [
-          {
-            text: "Home",
-          },
-          {
-            text: "Second-level",
-          },
-          {
-            text: "Third-level",
-          },
-          {
-            text: "Page Title",
-          },
+          { text: "Home" },
+          { text: "Second-level" },
+          { text: "Third-level" },
+          { text: "Page Title" },
         ],
         title: "The sdgs in action",
         subtitle:
@@ -143,18 +103,22 @@ export const getCaptionForLocale = (locale) => {
   title="Components/UI components/Hero/Page"
   argTypes={{
     Variant: {
+      name: "Variant",
       options: ["Video", "Image"],
-      control: { type: "radio" },
+      control: { type: "inline-radio" },
     },
     CTA: {
+      name: "Enable CTA",
       options: ["On", "Off"],
       control: { type: "inline-radio" },
     },
     Overline: {
+      name: "Enable Overline",
       options: ["On", "Off"],
       control: { type: "inline-radio" },
     },
     Subtitle: {
+      name: "Enable Subtitle",
       options: ["On", "Off"],
       control: { type: "inline-radio" },
     },