Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1375 flexible title #1502

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

1375 flexible title #1502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
77eccc8
#1375 - add fitTtile function
Jura Feb 12, 2025
8b1f38e
#1375 - Reset font size to original when resizing the screen larger
ElijahJKim Feb 26, 2025
65c5362
#1375 - Fix title scaling issue for single word text
ElijahJKim Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/js/fitTitle.min.js
View file
Open in desktop

Large diffs are not rendered by default.

39 changes: 27 additions & 12 deletions stories/Atom/Typography/Heading/Heading.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,35 @@
import React from 'react';
import '../../../assets/scss/_typography.scss';
import React, { useEffect, useRef } from "react";
import "../../../assets/scss/_typography.scss";
import { fitTitle } from "../../../assets/js/fitTitle";

export function Heading({
type,
label,
className,
tabIndex,
dataViewport,
}) {
export function Heading({ type, label, className, tabIndex, dataViewport }) {
const HeadingTag = `h${type}`;
const tab_index = tabIndex ?? '0';
const tab_index = tabIndex ?? "0";
const data_viewport = dataViewport ?? false;
const heading_classes = className ?? '';
const heading_classes = className ?? "";

const headingRef = useRef(null);

useEffect(() => {
fitTitle(headingRef.current);

const handleResize = () => {
if (headingRef.current) {
fitTitle(headingRef.current);
}
};

window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);

return (
<HeadingTag className={heading_classes} tabIndex={tab_index} data-viewport={data_viewport}>
<HeadingTag
className={heading_classes}
tabIndex={tab_index}
data-viewport={data_viewport}
ref={headingRef}
>
{label}
</HeadingTag>
);
Expand Down
12 changes: 9 additions & 3 deletions stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from 'react';
import React, { useEffect } from 'react';
import './page-hero.scss';
import { Video } from '../../../../Atom/Video/Video';
import { Heading } from '../../../../Atom/Typography/Heading/Heading';
import { Breadcrumbcomponent } from '../../../Navigationcomponents/Breadcrumbs/Breadcrumbs';
import { CtaButton } from '../../Buttons/CtaButton/CtaButton';
import { fitTitle } from "../../../../assets/js/fitTitle";

export function PageHeroOption({
data,
Expand All @@ -19,6 +20,11 @@ export function PageHeroOption({
cta,
...args
}) {
useEffect(() => {
if (typeof fitTitle == "function") {
fitTitle(".pagehero-content h2");
}
}, []);
const CtaEnabledClass = args.CTA == 'On' ? 'has-cta' : '';
return (
<div className={['pagehero-tall', CtaEnabledClass].join(' ')}>
Expand All @@ -27,7 +33,7 @@ export function PageHeroOption({
<div className="pagehero-content color-black">
<Breadcrumbcomponent data={data} />
{args.Overline == 'On' && content && <Heading type="4" label={content} dataViewport="true" />}
<Heading type="2" label={title} dataViewport="true" />
<div><Heading type="2" label={title} dataViewport="true" /></div>
{args.Subtitle == 'On' && subtitle && <p className="subtitle">{subtitle}</p>}
{args.CTA == 'On' && cta.label && <CtaButton label={cta.label} For_Primary={cta.for_primary} />}
</div>
Expand All @@ -39,7 +45,7 @@ export function PageHeroOption({
) : (
<picture>
<source media="(min-width: 767px)" srcSet={imgsrc} />
<img
<img
src={imgsrc2} alt={imgalt} />
</picture>
)}
Expand Down
251 changes: 149 additions & 102 deletions stories/Components/UIcomponents/Hero/PageHero/PageHeroOption.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@ const getCaptionForLocale = (locale) => {
{ text: "Назва сторінки" },
],
title: "ЦСР У ДІЇ",
subtitle:
"Програма ПРООН із підвищення стійкості та відновлення",
subtitle: "Програма ПРООН із підвищення стійкості та відновлення",
content: "Наші теми",
imgsrc: BackgroundImg,
imgsrc2: BackgroundImg2,
Expand Down Expand Up @@ -150,104 +149,152 @@ export default {
},
parameters: {
docs: {
page: () => (
<>
<h1>Page Hero - Tall Image</h1>

<p>The Page Hero images are large-sized images with text beside or above the image and present at the top of the homepage.</p>

<h3>Overview</h3>

<p>The Page Hero component is a multi-usage component that creates boxes that are usually teasing some kind of content like Image, Text, Subtitle, and Breadcrumb. Animation and atom tags are used for creating this card.</p>

<h4>When to use:</h4>

<p>When the website needs to grab the user's attention to a particular page.</p>

<h3>Formatting</h3>

<h4>Default</h4>

<p>It consists of a grid with title, subtitle, image, and breadcrumbs.</p>

<h3>Content</h3>

<p>The Tall Page Hero image consists of an Image situated at either side or at the bottom of the grid. The text is either at the other side of the grid or above the image.</p>

<h3>Behaviors</h3>

<h4>States</h4>

<p>There are two states in the Tall Image Page: Default and Mobile.</p>

<ol>
<li><strong>Default:</strong> It consists of an image on either side of the grid and content on the other side.</li>
<li><strong>Mobile:</strong> It consists of an image at the bottom of the grid and content above the grid.</li>
</ol>

<Canvas>
<Story name="Page hero tall image">
{(args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
const cta = { label: caption.cta, for_primary: "Arrow" };
return (
<PageHeroOption
data={caption.herodata}
title={caption.title}
subtitle={caption?.subtitle}
content={caption?.content}
variant={args.Variant}
active={"default"}
imgsrc={caption.imgsrc}
imgsrc2={caption.imgsrc2}
imgalt={caption.imgalt}
videosrc={caption.videosrc}
cta={cta}
{...args}
></PageHeroOption>
);
}}
</Story>
</Canvas>

<h3>Usage:</h3>

<ul>
<li>Choose the variant either video or Image from the control tab on canvas.</li>
<li>Grab the HTML from the HTML tab and include the CSS and JS files listed below.</li>
<li>If you want to add left-right animation then add <code>data-viewport="true"</code> attribute to your HTML element.</li>
</ul>

<h3>CSS and JS References</h3>

<h4>CSS:</h4>

<p>Add the base layout style from dist/css/base-minimal.min.css</p>

<ul>
<li><a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/page-hero.min.css">https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/page-hero.min.css</a></li>
<li><a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/breadcrumbs.min.css">https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/breadcrumbs.min.css</a></li>
</ul>

<h4>JS:</h4>

<ul>
<li><a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js">https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js</a></li>
</ul>

<h3>Interactions</h3>

<p>When the page is opened, the contents of the card appear beside the image.</p>

<h3>Changelog</h3>

<p>1.0 — Released component</p>

</>
)
}
}
}
page: () => (
<>
<h1>Page Hero - Tall Image</h1>

<p>
The Page Hero images are large-sized images with text beside or
above the image and present at the top of the homepage.
</p>

<h3>Overview</h3>

<p>
The Page Hero component is a multi-usage component that creates
boxes that are usually teasing some kind of content like Image,
Text, Subtitle, and Breadcrumb. Animation and atom tags are used for
creating this card.
</p>

<h4>When to use:</h4>

<p>
When the website needs to grab the user's attention to a particular
page.
</p>

<h3>Formatting</h3>

<h4>Default</h4>

<p>
It consists of a grid with title, subtitle, image, and breadcrumbs.
</p>

<h3>Content</h3>

<p>
The Tall Page Hero image consists of an Image situated at either
side or at the bottom of the grid. The text is either at the other
side of the grid or above the image.
</p>

<h3>Behaviors</h3>

<h4>States</h4>

<p>
There are two states in the Tall Image Page: Default and Mobile.
</p>

<ol>
<li>
<strong>Default:</strong> It consists of an image on either side
of the grid and content on the other side.
</li>
<li>
<strong>Mobile:</strong> It consists of an image at the bottom of
the grid and content above the grid.
</li>
</ol>

<Canvas>
<Story name="Page hero tall image">
{(args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
const cta = { label: caption.cta, for_primary: "Arrow" };
return (
<PageHeroOption
data={caption.herodata}
title={caption.title}
subtitle={caption?.subtitle}
content={caption?.content}
variant={args.Variant}
active={"default"}
imgsrc={caption.imgsrc}
imgsrc2={caption.imgsrc2}
imgalt={caption.imgalt}
videosrc={caption.videosrc}
cta={cta}
{...args}
></PageHeroOption>
);
}}
</Story>
</Canvas>

<h3>Usage:</h3>

<ul>
<li>
Choose the variant either video or Image from the control tab on
canvas.
</li>
<li>
Grab the HTML from the HTML tab and include the CSS and JS files
listed below.
</li>
<li>
If you want to add left-right animation then add{" "}
<code>data-viewport="true"</code> attribute to your HTML element.
</li>
</ul>

<h3>CSS and JS References</h3>

<h4>CSS:</h4>

<p>Add the base layout style from dist/css/base-minimal.min.css</p>

<ul>
<li>
<a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/page-hero.min.css">
https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/page-hero.min.css
</a>
</li>
<li>
<a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/breadcrumbs.min.css">
https://cdn.jsdelivr.net/npm/@undp/design-system/docs/css/components/breadcrumbs.min.css
</a>
</li>
</ul>

<h4>JS:</h4>

<ul>
<li>
<a href="https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js">
https://cdn.jsdelivr.net/npm/@undp/design-system/docs/js/viewport.min.js
</a>
</li>
</ul>

<h3>Interactions</h3>

<p>
When the page is opened, the contents of the card appear beside the
image.
</p>

<h3>Changelog</h3>

<p>1.0 — Released component</p>
</>
),
},
},
};

const Template = (args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
Expand All @@ -268,7 +315,7 @@ const Template = (args, { globals: { locale } }) => {
{...args}
></PageHeroOption>
);
}
};

export const PageHeroOptionStory = Template.bind({});
PageHeroOptionStory.storyName = "Page Hero Tall Option";
PageHeroOptionStory.storyName = "Page Hero Tall Option";
2 changes: 1 addition & 1 deletion stories/Components/UIcomponents/Hero/PageHero/page-hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
font-weight: 700;
margin-bottom: 0;
text-transform: uppercase;
}
}

.subtitle {
font-size: 1.563rem;
Expand Down
2 changes: 1 addition & 1 deletion stories/assets/js/fitText.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import fitty from 'fitty';
export const fitText = (selector) => {
let items = (typeof selector === 'string') ? document.querySelectorAll(selector) : [selector];
items.forEach((ele) => {
// remove inline font size and retireve it from stylesheet
// remove inline font size and retrieve it from stylesheet
if (ele.style.removeProperty) {
ele.style.removeProperty('font-size');
} else {
Expand Down
Loading