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

Jump to bottom

Task/HOM-1 update white hero banner text color #826

Open
wants to merge 10 commits into
base: dev
Choose a base branch
from
Open

Task/HOM-1 update white hero banner text color #826

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f7e114e
Moved hero.js and hero.styles.js to Hero directory
shc314 Apr 3, 2024
d9db918
Changes su-text-black to su-text-black-true
shc314 Apr 3, 2024
fc26c9f
Moves 'Scroll to explore' styles to hero.styles.js
shc314 Apr 3, 2024
a12965a
Moved more styles from hero to hero.styles
shc314 Apr 3, 2024
eec21bf
Moved more styles to hero.styles
shc314 Apr 3, 2024
dca4abb
Moved remaining styles to hero.styles.js
shc314 Apr 4, 2024
d5e2e66
WIP sansSub and marginTop styles
shc314 Apr 4, 2024
9509a3c
Renames sansSub style to subhead
shc314 Apr 11, 2024
f98f890
Merge branch 'dev' into task/HOM-1_update-white-hero-banner-text-color
sherakama Jun 26, 2024
5c8bb99
Merge branch 'dev' into task/HOM-1_update-white-hero-banner-text-color
sherakama Sep 25, 2024
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
2 changes: 1 addition & 1 deletion src/components/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { SBGlobalHeader } from './storyblok/globalHeader';
import { SBGlobalHeaderPicker } from './storyblok/globalHeaderPicker';
import { SBGrid } from './storyblok/grid';
import { SBHeading } from './storyblok/heading';
import Hero from './composite/hero';
import Hero from './composite/Hero/hero';
import IconCard from './cards/iconCard';
import InterstitialPage from './page-types/registrationFormPage/interstitialPage';
import Itinerary from './composite/itinerary';
Expand Down
50 changes: 17 additions & 33 deletions src/components/composite/hero.js → src/components/composite/Hero/hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import React from 'react';
import SbEditable from 'storyblok-react';
import { ArrowDownIcon } from '@heroicons/react/outline';
import { dcnb } from 'cnbuilder';
import { FlexBox } from '../layout/FlexBox';
import { Container } from '../layout/Container';
import { SrOnlyText } from '../accessibility/SrOnlyText';
import FullWidthImage from '../media/fullWidthImage';
import CreateBloks from '../../utilities/createBloks';
import getNumBloks from '../../utilities/getNumBloks';
import { heroGradient } from '../../utilities/dataSource';
import { FlexBox } from '../../layout/FlexBox';
import { Container } from '../../layout/Container';
import { SrOnlyText } from '../../accessibility/SrOnlyText';
import FullWidthImage from '../../media/fullWidthImage';
import CreateBloks from '../../../utilities/createBloks';
import getNumBloks from '../../../utilities/getNumBloks';
import { heroGradient } from '../../../utilities/dataSource';
import * as styles from './hero.styles';

const Hero = ({
Expand Down Expand Up @@ -45,33 +45,27 @@ const Hero = ({

let blackText;
if (gradientProp === 'white') {
blackText = 'xs:su-text-black';
blackText = 'xs:su-text-black-true';
}

const numCta = getNumBloks(cta);

return (
<SbEditable content={blok}>
<Container
className="hero su-relative su-bg-saa-black lg:su-top-0"
width="full"
>
<Container className={styles.container} width="full">
{filename?.startsWith('http') && (
<figure className="su-absolute su-top-0 su-overflow-hidden su-w-full su-h-full">
<figure className={styles.imgWrapper}>
<FullWidthImage
filename={filename}
imageFocus={imageFocus}
smartFocus={focus}
className="su-w-full su-h-full su-object-cover"
className={styles.img}
loading="eager"
/>
</figure>
)}
<div
className={dcnb(
'su-absolute su-block su-w-full su-h-full su-top-0 su-bg-gradient-to-t su-from-saa-black',
gradient
)}
className={styles.gradientOverlay({ gradient })}
aria-hidden="true"
/>
<Container
Expand All @@ -80,11 +74,9 @@ const Hero = ({
>
<FlexBox direction="col" className="lg:su-mt-[19rem]">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's move this to styles.js also 😄 @shc314

{(sansSuper || serifSuper || headline || sansSub) && (
<div className={dcnb('su-text-center su-text-white', blackText)}>
<div className={styles.textWrapper({ blackText })}>
{sansSuper && (
<span className="su-block su-max-w-prose su-font-semibold su-leading-display su-text-shadow-md su-type-4 su-mx-auto su-mb-01em">
{sansSuper}
</span>
<span className={styles.sansSuper}>{sansSuper}</span>
)}
{serifSuper && (
<span className={styles.serifSuper({ blackText })}>
Expand Down Expand Up @@ -112,20 +104,12 @@ const Hero = ({
</div>
)}
{!isHideScroll && (
<div
className={dcnb(
'su-text-center su-text-white su-grow-0 su-rs-mt-5 su-font-serif su-font-regular su-text-19 md:su-text-22',
blackText
)}
>
<div className={styles.scroll({ blackText })}>
<p className="su-mb-02em">Scroll to explore</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here's another one. There are a couple more in this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hadn't moved them all because I wasn't sure what to call some of the variables. 😆 I think I got them all now. Please let me know if any of the names aren't clear.

<a
href="#page-title"
className="su-block su-mx-auto su-w-fit su-group"
>
<a href="#page-title" className={styles.pageTitleLink}>
<SrOnlyText>Jump to main content</SrOnlyText>
<ArrowDownIcon
className="su-transition-colors su-text-digital-red-xlight su-w-40 su-h-40 su-p-6 su-border-2 su-border-cardinal-red su-rounded-full group-hocus:su-text-white group-hocus:su-bg-cardinal-red-dark"
className={styles.arrowDownIcon}
aria-hidden="true"
/>
</a>
Expand Down
44 changes: 44 additions & 0 deletions src/components/composite/Hero/hero.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { dcnb } from 'cnbuilder';

export const container = 'hero su-relative su-bg-saa-black lg:su-top-0';
export const imgWrapper =
'su-absolute su-top-0 su-overflow-hidden su-w-full su-h-full';
export const img = 'su-w-full su-h-full su-object-cover';
export const gradientOverlay = ({ gradient }) =>
dcnb(
'su-absolute su-block su-w-full su-h-full su-top-0 su-bg-gradient-to-t su-from-saa-black',
gradient
);
export const textWrapper = ({ blackText }) =>
dcnb('su-text-center su-text-white', blackText);
Comment on lines +15 to +16
Copy link
Member

@yvonnetangsu yvonnetangsu Apr 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's probably a slightly better way to handle this. Here if blackText exists, you're going to have both of these classes su-text-white and su-text-black-true, and you're counting on su-text-black-true being compiled after su-text-white in the CSS so it overrides su-text-white. A better way would be to have a isBlackText variable as boolean instead, then you can pass in dcnb('su-text-center', isBlackText ? 'su-text-black-true' : 'su-text-white'), which is a lot safer @shc314

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for this suggestion. The text needs to be white when the screen size is smaller than the xs breakpoint. That's why I was using xs:su-text-black-true. How can I add a condition for smaller than the xs breakpoint?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see what you're doing - let me take a look later today @shc314

export const sansSuper =
'su-block su-max-w-prose su-font-semibold su-leading-display su-text-shadow-md su-type-4 su-mx-auto su-mb-01em';
export const serifSuper = ({ blackText }) =>
dcnb(
'su-block su-max-w-prose su-font-serif su-leading-display su-type-2 su-mx-auto su-mb-05em su-text-shadow',
{
'xs:su-text-shadow-white': blackText === 'xs:su-text-black-true',
}
);
export const headline = ({ blackText }) =>
dcnb(
'su-block su-font-bold su-font-serif su-leading-tight su-tracking-normal su-mb-02em su-text-shadow-lg',
{
'xs:su-text-shadow-white-lg': blackText === 'xs:su-text-black-true',
}
);
export const sansSub = ({ blackText }) =>
dcnb(
'su-max-w-prose su-type-1 su-leading-display su-text-shadow su-mx-auto su-mb-0 su-text-shadow',
{
'xs:su-text-shadow-white': blackText === 'xs:su-text-black-true',
}
);
export const scroll = ({ blackText }) =>
dcnb(
'su-text-center su-text-white su-grow-0 su-rs-mt-5 su-font-serif su-font-regular su-text-19 md:su-text-22',
blackText
);
export const pageTitleLink = 'su-block su-mx-auto su-w-fit su-group';
export const arrowDownIcon =
'su-transition-colors su-text-digital-red-xlight su-w-40 su-h-40 su-p-6 su-border-2 su-border-cardinal-red su-rounded-full group-hocus:su-text-white group-hocus:su-bg-cardinal-red-dark';
25 changes: 0 additions & 25 deletions src/components/composite/hero.styles.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/page-types/formPage/formPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
setGiveGabVars,
unsetGiveGabVars,
} from '../../../utilities/giveGabVars';
import Hero from '../../composite/hero';
import Hero from '../../composite/Hero/hero';
import {
formatFmDate,
formatEmailDate,
Expand Down
2 changes: 1 addition & 1 deletion src/components/page-types/registrationFormPage/interstitialPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Heading } from '../../simple/Heading';
import Layout from '../../partials/layout';
import getNumBloks from '../../../utilities/getNumBloks';
import Ankle from '../../partials/ankle/ankle';
import Hero from '../../composite/hero';
import Hero from '../../composite/Hero/hero';
import { Grid } from '../../layout/Grid';
import {
FormContextProvider,
Expand Down
2 changes: 1 addition & 1 deletion src/components/page-types/registrationFormPage/registrationFormPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Layout from '../../partials/layout';
import CreateBloks from '../../../utilities/createBloks';
import getNumBloks from '../../../utilities/getNumBloks';
import Ankle from '../../partials/ankle/ankle';
import Hero from '../../composite/hero';
import Hero from '../../composite/Hero/hero';
import { Grid } from '../../layout/Grid';
import { GridCell } from '../../layout/GridCell';
import AuthenticatedPage from '../../auth/AuthenticatedPage';
Expand Down
Loading