-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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
Task/HOM-1 update white hero banner text color #826
base: dev
Are you sure you want to change the base?
Changes from 7 commits
f7e114e
d9db918
fc26c9f
a12965a
eec21bf
dca4abb
d5e2e66
9509a3c
f98f890
5c8bb99
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
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 textContainer = ({ isHideScroll }) => `su-relative su-rs-pt-9 | ||
${isHideScroll ? 'su-rs-pb-8' : 'su-rs-pb-4'}`; | ||
export const flexbox = 'lg:su-mt-[19rem]'; | ||
export const textWrapper = ({ blackText }) => | ||
dcnb('su-text-center su-text-white', blackText); | ||
Comment on lines
+15
to
+16
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 marginTop = ({ sansSub }) => (sansSub ? 'su-rs-mt-4' : ''); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @yvonnetangsu After I passed sansSub as a prop, ESLint says 'sansSub' is already declared in the upper scope on line 33. Should I change the name of the one on line 33? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @shc314 So yes, the fastest way to do this would be to update the variable name on line 33, but after that you'll need to update it in the hero.js file as well (where it uses styles.sansSub), so for example, if you rename the variable to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thank you. I've changed the variable name and there is no error now. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thank you for the update @shc314! I'll get back to you next week on this - it's been a really busy week. |
||
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 scrollText = 'su-mb-02em'; | ||
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'; |
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@yvonnetangsu I wasn't sure if this one would still work if moved to hero.styles. Is
sansSub
referring to something different here?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@shc314 You'll need to pass sansSub into the styles here like how you pass blackText into the other ones 😄 Otherwise in the styles file, it wouldn't know whether this field exists.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you. There was already a sansSub in the styles file, so I think that's why it didn't cause an error, but I don't think it's the same one as what's here.