Skip to content

Commit f296101

Browse files
mihir880mihir880
committed
Merge branch 'develop' of https://github.com/undp/design-system into 1499-optimize-js-loading
2 parents d8eecda + 3efb93d commit f296101

File tree

10 files changed

+229
-155
lines changed

10 files changed

+229
-155
lines changed

‎docs/css/base-minimal-no-grid.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/css/base-minimal.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/css/ckeditor5.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎stories/Components/Navigationcomponents/Breadcrumbs/Breadcrumbs.jsx

+19-10
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,38 @@
1-
import React from 'react';
2-
import './breadcrumbs.scss';
1+
import React from "react";
2+
import "./breadcrumbs.scss";
33

4-
export function Breadcrumbcomponent({ data, Color, ...args }) {
4+
export function Breadcrumbcomponent({ data, Color, rlt_offset, ...args }) {
55
const lastIndex = data.length - 1;
6+
console.log(rlt_offset);
67

7-
let color = '';
8-
if (Color == 'White') {
9-
color = 'white';
8+
let color = "";
9+
if (Color == "White") {
10+
color = "white";
1011
}
1112

12-
let moreClasses = args.Cls || '';
13+
let moreClasses = args.Cls || "";
1314

1415
return (
15-
<nav aria-label="breadcrumbs" data-viewport="true" className={['breadcrumb', `${color}`, moreClasses].join(' ')}>
16+
<nav
17+
aria-label="breadcrumbs"
18+
data-viewport="true"
19+
className={["breadcrumb", `${color}`, moreClasses].join(" ")}
20+
>
1621
<ul>
1722
{data.map((item, i) => {
1823
if (i === lastIndex) {
1924
return (
20-
<li key={i} aria-current={item.text}>{item.text}</li>
25+
<li key={i} aria-current={item.text}>
26+
{item.text}
27+
</li>
2128
);
2229
}
2330

2431
return (
2532
<li key={i}>
26-
<a href="#" aria-label={item.text}>{item.text}</a>
33+
<a href="#" aria-label={item.text}>
34+
{item.text}
35+
</a>
2736
</li>
2837
);
2938
})}

‎stories/Components/UIcomponents/Hero/HomePageHero/HomePageHero.jsx

+25-16
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import React, { useEffect } from 'react';
2-
import './homepage-hero.scss';
3-
import expandToSize from '../../../../assets/js/animation';
4-
import BackgroundImg from '../../../../assets/images/field.jpg';
5-
import BackgroundVideo from '../../../../assets/video/video_sample.mp4';
6-
import { Video } from '../../../../Atom/Video/Video';
7-
import { Heading } from '../../../../Atom/Typography/Heading/Heading';
8-
import { CtaButton } from '../../Buttons/CtaButton/CtaButton';
1+
import React, { useEffect } from "react";
2+
import "./homepage-hero.scss";
3+
import expandToSize from "../../../../assets/js/animation";
4+
import BackgroundImg from "../../../../assets/images/field.jpg";
5+
import BackgroundVideo from "../../../../assets/video/video_sample.mp4";
6+
import { Video } from "../../../../Atom/Video/Video";
7+
import { Heading } from "../../../../Atom/Typography/Heading/Heading";
8+
import { CtaButton } from "../../Buttons/CtaButton/CtaButton";
99

10-
export const Homepagehero = ({
11-
title, content, button, variant, ...args
12-
}) => {
10+
export const Homepagehero = ({ title, content, button, variant, ...args }) => {
1311
// useEffect(() => {
14-
// expandToSize('.homepage-hero-full');
12+
// expandToSize(".homepage-hero-full");
1513
// }, []);
1614
return (
1715
<div className="homepage-hero-full" data-undpds-component="expandToSize" data-selector=".homepage-hero-full">
@@ -26,8 +24,20 @@ export const Homepagehero = ({
2624
)}
2725
<div className="grid-x homepage-hero-content">
2826
<div className="cell large-7 medium-9 medium-offset-1">
29-
<Heading type="1" className="color-white" label={title} dataViewport="true"/>
30-
{content && <Heading type="4" className="color-white" label={content} dataViewport="true"/>}
27+
<Heading
28+
type="1"
29+
className="color-white"
30+
label={title}
31+
dataViewport="true"
32+
/>
33+
{content && (
34+
<Heading
35+
type="4"
36+
className="color-white"
37+
label={content}
38+
dataViewport="true"
39+
/>
40+
)}
3141
<CtaButton label={button} />
3242
</div>
3343
</div>
@@ -36,6 +46,5 @@ export const Homepagehero = ({
3646
};
3747

3848
Homepagehero.defaultProps = {
39-
variant: 'image',
49+
variant: "image",
4050
};
41-

‎stories/Components/UIcomponents/Hero/HomePageHero/HomePageHeroOption.jsx

+37-20
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,56 @@
1-
import React from 'react';
2-
import './homepage-hero.scss';
3-
import BackgroundVideo from '../../../../assets/video/video_sample.mp4';
4-
import { Video } from '../../../../Atom/Video/Video';
5-
import { Heading } from '../../../../Atom/Typography/Heading/Heading';
6-
import { CtaButton } from '../../Buttons/CtaButton/CtaButton';
1+
import React from "react";
2+
import "./homepage-hero.scss";
3+
import BackgroundVideo from "../../../../assets/video/video_sample.mp4";
4+
import { Video } from "../../../../Atom/Video/Video";
5+
import { Heading } from "../../../../Atom/Typography/Heading/Heading";
6+
import { CtaButton } from "../../Buttons/CtaButton/CtaButton";
77

88
export const Homepageherooption = ({
9-
title, subtitle, button, variant, imgalt, imgsrc, imgsrc2, content, headingTop,
9+
title,
10+
subtitle,
11+
button,
12+
variant,
13+
imgalt,
14+
imgsrc,
15+
imgsrc2,
16+
content,
17+
headingTop,
1018
}) => (
1119
<div className="homepage-hero-wide">
12-
{headingTop && <Heading type="3" className="medium-offset-1" label={headingTop} dataViewport="true"/>}
13-
<Heading type="1" className="medium-offset-1" label={title} dataViewport="true"/>
20+
{headingTop && (
21+
<Heading
22+
type="3"
23+
className="medium-offset-1 "
24+
label={headingTop}
25+
dataViewport="true"
26+
/>
27+
)}
28+
<Heading
29+
type="1"
30+
className="medium-offset-1 "
31+
label={title}
32+
dataViewport="true"
33+
/>
1434
<div className="grid-x">
15-
<div className="cell large-4 medium-4 medium-offset-1">
35+
<div className="cell large-4 medium-4 medium-offset-1 ">
1636
<div className="homepage-hero-wide-content">
17-
<Heading type="5" label={subtitle} dataViewport="true"/>
37+
<Heading type="5" label={subtitle} dataViewport="true" />
1838
<div className="show-large">
1939
<CtaButton label={button} />
2040
</div>
2141
</div>
2242
</div>
2343
<div className="cell large-7 medium-7">
2444
<div className="homepage-hero-image">
25-
{variant === 'video'
26-
? (
27-
<Video src={BackgroundVideo} width="100%" height="100%" />
28-
)
29-
: (
45+
{variant === "video" ? (
46+
<Video src={BackgroundVideo} width="100%" height="100%" />
47+
) : (
3048
<picture>
3149
<source media="(min-width:767px)" srcSet={imgsrc} />
3250
<img src={imgsrc2} alt={imgalt} />
3351
</picture>
34-
)}
35-
</div>
52+
)}
53+
</div>
3654
<div className="show-small">
3755
<CtaButton label={button} />
3856
</div>
@@ -42,6 +60,5 @@ export const Homepageherooption = ({
4260
);
4361

4462
Homepageherooption.defaultProps = {
45-
variant: 'image',
63+
variant: "image",
4664
};
47-

‎stories/Components/UIcomponents/Hero/HomePageHero/HomePageHeroSplit.jsx

+20-25
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,34 @@
1-
import React from 'react';
2-
import './homepage-hero.scss';
3-
import BackgroundImg from '../../../../assets/images/homepagehero.jpg';
4-
import BackgroundImg2 from '../../../../assets/images/homepagehero.jpg';
5-
import BackgroundVideo from '../../../../assets/video/video_sample.mp4';
6-
import { Video } from '../../../../Atom/Video/Video';
7-
import { Heading } from '../../../../Atom/Typography/Heading/Heading';
8-
import { CtaButton } from '../../Buttons/CtaButton/CtaButton';
1+
import React from "react";
2+
import "./homepage-hero.scss";
3+
import BackgroundImg from "../../../../assets/images/homepagehero.jpg";
4+
import BackgroundImg2 from "../../../../assets/images/homepagehero.jpg";
5+
import BackgroundVideo from "../../../../assets/video/video_sample.mp4";
6+
import { Video } from "../../../../Atom/Video/Video";
7+
import { Heading } from "../../../../Atom/Typography/Heading/Heading";
8+
import { CtaButton } from "../../Buttons/CtaButton/CtaButton";
99

10-
export const Homepageherosplit = ({
11-
title, content, button, variant,
12-
}) => (
10+
export const Homepageherosplit = ({ title, content, button, variant }) => (
1311
<div className="homepage-hero-tall">
1412
<div className="grid-x">
1513
<div className="cell medium-5 medium-offset-1">
16-
<div className="homepage-hero-tall-content">
17-
{content && <Heading type="1" label={title} dataViewport="true"/>}
18-
{content && <Heading type="4" label={content} dataViewport="true"/>}
19-
<div className="show-small">
20-
<div className='show-small-button'>
21-
<CtaButton label={button} />
14+
<div className="homepage-hero-tall-content">
15+
{content && <Heading type="1" label={title} dataViewport="true" />}
16+
{content && <Heading type="4" label={content} dataViewport="true" />}
17+
<div className="show-small">
18+
<div className="show-small-button">
19+
<CtaButton label={button} />
20+
</div>
2221
</div>
23-
</div>
2422
<div className="show-large">
2523
<CtaButton label={button} />
2624
</div>
2725
</div>
2826
</div>
2927
<div className="cell medium-6">
3028
<div className="homepage-hero-image">
31-
{variant === 'video'
32-
? (
33-
<Video src={BackgroundVideo} width="100%" height="100%" />
34-
)
35-
: (
29+
{variant === "video" ? (
30+
<Video src={BackgroundVideo} width="100%" height="100%" />
31+
) : (
3632
<picture>
3733
<source media="(min-width:767px )" srcSet={BackgroundImg2} />
3834
<img src={BackgroundImg2} alt={BackgroundImg} />
@@ -45,6 +41,5 @@ export const Homepageherosplit = ({
4541
);
4642

4743
Homepageherosplit.defaultProps = {
48-
variant: 'image',
44+
variant: "image",
4945
};
50-

‎stories/Components/UIcomponents/Hero/PageHero/PageHero.jsx

+30-19
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* eslint-disable import/no-named-as-default */
22
/* eslint-disable react/jsx-no-useless-fragment */
3-
import React, { useEffect } from 'react';
4-
import './page-hero.scss';
5-
import expandToSize from '../../../../assets/js/animation';
6-
import BackgroundVideo from '../../../../assets/video/video_sample.mp4';
7-
import { Video } from '../../../../Atom/Video/Video';
8-
import { Heading } from '../../../../Atom/Typography/Heading/Heading';
9-
import { Breadcrumbcomponent } from '../../../Navigationcomponents/Breadcrumbs/Breadcrumbs';
10-
import { CtaButton } from '../../Buttons/CtaButton/CtaButton';
3+
import React, { useEffect } from "react";
4+
import "./page-hero.scss";
5+
import expandToSize from "../../../../assets/js/animation";
6+
import BackgroundVideo from "../../../../assets/video/video_sample.mp4";
7+
import { Video } from "../../../../Atom/Video/Video";
8+
import { Heading } from "../../../../Atom/Typography/Heading/Heading";
9+
import { Breadcrumbcomponent } from "../../../Navigationcomponents/Breadcrumbs/Breadcrumbs";
10+
import { CtaButton } from "../../Buttons/CtaButton/CtaButton";
1111

1212
export function PageHero({
1313
data,
@@ -18,37 +18,48 @@ export function PageHero({
1818
imgsrc,
1919
imgalt,
2020
cta,
21-
mobileImagePosition = 'center',
21+
mobileImagePosition = "center",
2222
...args
2323
}) {
2424
// useEffect(() => {
25-
// expandToSize('.pagehero-full');
25+
// expandToSize(".pagehero-full");
2626
// }, []);
2727

28-
const textColor = variant === 'No background' ? 'Black' : 'White';
29-
const textColorClass = variant === 'No background' ? 'color-black' : 'color-white';
28+
const textColor = variant === "No background" ? "Black" : "White";
29+
const textColorClass =
30+
variant === "No background" ? "color-black" : "color-white";
3031
const mobilePositionClass = `mobile-position-${mobileImagePosition}`;
31-
const navPositionClass = 'medium-offset-1';
32+
const navPositionClass = "medium-offset-1";
3233
return (
3334
<div className="pagehero-full" data-undpds-component="expandToSize" data-selector=".pagehero-full">
3435
{variant === 'Video' ? (
3536
<Video src={BackgroundVideo} width="100%" height="100%" />
3637
) : (
3738
<>
38-
{variant !== 'No background' && imgsrc && (
39+
{variant !== "No background" && imgsrc && (
3940
<div className="overlay-grey">
4041
<img className={mobilePositionClass} src={imgsrc} alt={imgalt} />
4142
</div>
4243
)}
4344
</>
4445
)}
45-
<Breadcrumbcomponent data={data} Color={textColor} Cls={navPositionClass} />
46+
<Breadcrumbcomponent
47+
data={data}
48+
Color={textColor}
49+
Cls={navPositionClass}
50+
/>
4651
<div className="pagehero-content medium-offset-1">
47-
<div className={['content-box', textColorClass].join(' ')}>
48-
{args.Overline == 'On' && content && <Heading type="4" label={content} dataViewport="true" />}
52+
<div className={["content-box", textColorClass].join(" ")}>
53+
{args.Overline == "On" && content && (
54+
<Heading type="4" label={content} dataViewport="true" />
55+
)}
4956
{title && <Heading type="2" label={title} dataViewport="true" />}
50-
{args.Subtitle == 'On' && subtitle && <p className="subtitle">{subtitle}</p>}
51-
{args.CTA == 'On' && cta.label && <CtaButton label={cta.label} For_Primary={cta.for_primary} />}
57+
{args.Subtitle == "On" && subtitle && (
58+
<p className="subtitle">{subtitle}</p>
59+
)}
60+
{args.CTA == "On" && cta.label && (
61+
<CtaButton label={cta.label} For_Primary={cta.for_primary} />
62+
)}
5263
</div>
5364
</div>
5465
</div>

‎stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx

+20-15
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
2-
import './page-hero.scss';
3-
import { Video } from '../../../../Atom/Video/Video';
4-
import { Heading } from '../../../../Atom/Typography/Heading/Heading';
5-
import { Breadcrumbcomponent } from '../../../Navigationcomponents/Breadcrumbs/Breadcrumbs';
6-
import { CtaButton } from '../../Buttons/CtaButton/CtaButton';
1+
import React from "react";
2+
import "./page-hero.scss";
3+
import { Video } from "../../../../Atom/Video/Video";
4+
import { Heading } from "../../../../Atom/Typography/Heading/Heading";
5+
import { Breadcrumbcomponent } from "../../../Navigationcomponents/Breadcrumbs/Breadcrumbs";
6+
import { CtaButton } from "../../Buttons/CtaButton/CtaButton";
77

88
export function PageHeroOption({
99
data,
@@ -19,28 +19,33 @@ export function PageHeroOption({
1919
cta,
2020
...args
2121
}) {
22-
const CtaEnabledClass = args.CTA == 'On' ? 'has-cta' : '';
22+
const CtaEnabledClass = args.CTA == "On" ? "has-cta" : "";
2323
return (
24-
<div className={['pagehero-tall', CtaEnabledClass].join(' ')}>
24+
<div className={["pagehero-tall", CtaEnabledClass].join(" ")}>
2525
<div className="grid-x">
26-
<div className="cell medium-4 medium-offset-1">
26+
<div className="cell medium-4 medium-offset-1 ">
2727
<div className="pagehero-content color-black">
2828
<Breadcrumbcomponent data={data} />
29-
{args.Overline == 'On' && content && <Heading type="4" label={content} dataViewport="true" />}
29+
{args.Overline == "On" && content && (
30+
<Heading type="4" label={content} dataViewport="true" />
31+
)}
3032
<Heading type="2" label={title} dataViewport="true" />
31-
{args.Subtitle == 'On' && subtitle && <p className="subtitle">{subtitle}</p>}
32-
{args.CTA == 'On' && cta.label && <CtaButton label={cta.label} For_Primary={cta.for_primary} />}
33+
{args.Subtitle == "On" && subtitle && (
34+
<p className="subtitle">{subtitle}</p>
35+
)}
36+
{args.CTA == "On" && cta.label && (
37+
<CtaButton label={cta.label} For_Primary={cta.for_primary} />
38+
)}
3339
</div>
3440
</div>
3541
<div className="cell medium-7">
3642
<div className="homepage-hero-image">
37-
{variant === 'Video' ? (
43+
{variant === "Video" ? (
3844
<Video src={videosrc} width="100%" height="100%" />
3945
) : (
4046
<picture>
4147
<source media="(min-width: 767px)" srcSet={imgsrc} />
42-
<img
43-
src={imgsrc2} alt={imgalt} />
48+
<img src={imgsrc2} alt={imgalt} />
4449
</picture>
4550
)}
4651
</div>

0 commit comments

Comments
 (0)