Skip to content

Commit

Permalink
Merge pull request #12588 from guardian/doml/usa-expandable-swipe
Browse files Browse the repository at this point in the history 
US marketing card component - Swipe to dismiss
  • Loading branch information
@domlander
domlander authored Oct 21, 2024
2 parents 5dd3a58 + 5e4e8d6 commit 6c8e421
Show file tree
Hide file tree
Showing 4 changed files with 357 additions and 192 deletions.
12 changes: 2 additions & 10 deletions dotcom-rendering/src/components/ExpandableMarketingCard.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,12 @@ export const Default = {
heading: 'Pop your US news bubble',
kicker: 'How the Guardian is different',
isExpanded: false,
setIsExpanded: fn(),
setIsClosed: fn(),
},
decorators: [centreColumnDecorator],
parameters: {
viewport: {
defaultViewport: 'mobile',
defaultViewport: 'mobileMedium',
},
chromatic: {
viewports: [
Expand All @@ -41,14 +40,7 @@ export const Default = {

// LeftCol and larger screen sizes
export const DefaultLargeScreens = {
args: {
guardianBaseURL: 'https://www.theguardian.com',
heading: 'Pop your US news bubble',
kicker: 'How the Guardian is different',
isExpanded: false,
setIsExpanded: fn(),
setIsClosed: fn(),
},
...Default,
decorators: [leftColumnDecorator],
parameters: {
viewport: {
Expand Down
182 changes: 86 additions & 96 deletions dotcom-rendering/src/components/ExpandableMarketingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ const summaryStyles = css`
z-index: 1;
width: 100%;
`;

const contractedSummaryStyles = css`
${summaryStyles}
cursor: pointer;
Expand Down Expand Up @@ -196,7 +197,6 @@ interface Props {
kicker: string;
guardianBaseURL: string;
isExpanded: boolean;
setIsExpanded: Dispatch<SetStateAction<boolean>>;
setIsClosed: Dispatch<SetStateAction<boolean>>;
}

Expand All @@ -205,107 +205,97 @@ export const ExpandableMarketingCard = ({
heading,
kicker,
isExpanded,
setIsExpanded,
setIsClosed,
}: Props) => {
return (
<div data-component="us-expandable-marketing-card">
<div css={fillBarStyles} />
<div css={contentStyles}>
{!isExpanded ? (
<>
<BannersIllustration
type="faded"
styles={imageTopStyles}
/>
<section
data-link-name="us-expandable-marketing-card expand"
css={contractedSummaryStyles}
role="button"
tabIndex={0}
onClick={() => {
setIsExpanded(true);
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
setIsExpanded(true);
}
if (event.key === 'Escape') {
setIsClosed(true);
}
}}
>
<div css={headingStyles}>
<h2>{heading}</h2>
<div css={arrowStyles}>
<SvgChevronDownSingle />
<>
<div data-component="us-expandable-marketing-card">
<div css={fillBarStyles} />
<div css={contentStyles}>
{!isExpanded ? (
<>
<BannersIllustration
type="faded"
styles={imageTopStyles}
/>
<section
data-link-name="us-expandable-marketing-card expand"
css={contractedSummaryStyles}
>
<div css={headingStyles}>
<h2>{heading}</h2>
<div css={arrowStyles}>
<SvgChevronDownSingle />
</div>
</div>
</div>
<div css={kickerStyles}>{kicker}</div>
</section>
</>
) : (
<>
<BannersIllustration
type="top"
styles={imageTopStyles}
/>
<BannersIllustration
type="bottom"
styles={imageBottomStyles}
/>
<section css={summaryStyles}>
<div css={headingStyles}>
<h2>{heading}</h2>
<button
data-link-name="us-expandable-marketing-card close"
onClick={() => {
setIsClosed(true);
}}
type="button"
css={arrowStyles}
>
<SvgCross />
</button>
</div>
<div css={kickerStyles}>{kicker}</div>
</section>
<div css={detailsStyles}>
<section css={sectionStyles}>
<h3>We’re independent</h3>
<p>
With no billionaire owner or shareholders,
our journalism is funded by readers
</p>
<div css={kickerStyles}>{kicker}</div>
</section>
<section css={sectionStyles}>
<h3>We’re open</h3>
<p>
With misinformation threatening democracy,
we keep our fact-based news paywall-free
</p>
</section>
<section css={sectionStyles}>
<h3>We’re global</h3>
<p>
With 200 years of history and staff across
America and the world, we offer an outsider
perspective on US news
</p>
</>
) : (
<>
<BannersIllustration
type="top"
styles={imageTopStyles}
/>
<BannersIllustration
type="bottom"
styles={imageBottomStyles}
/>
<section css={summaryStyles}>
<div css={headingStyles}>
<h2>{heading}</h2>
<button
data-link-name="us-expandable-marketing-card close"
onClick={() => {
setIsClosed(true);
}}
type="button"
css={arrowStyles}
>
<SvgCross />
</button>
</div>
<div css={kickerStyles}>{kicker}</div>
</section>
<LinkButton
data-link-name="us-expandable-marketing-card cta-click"
priority="tertiary"
size="xsmall"
href={`${guardianBaseURL}/email-newsletters`}
cssOverrides={buttonStyles}
>
View newsletters
</LinkButton>
</div>
</>
)}
<div css={detailsStyles}>
<section css={sectionStyles}>
<h3>We’re independent</h3>
<p>
With no billionaire owner or
shareholders, our journalism is funded
by readers
</p>
</section>
<section css={sectionStyles}>
<h3>We’re open</h3>
<p>
With misinformation threatening
democracy, we keep our fact-based news
paywall-free
</p>
</section>
<section css={sectionStyles}>
<h3>We’re global</h3>
<p>
With 200 years of history and staff
across America and the world, we offer
an outsider perspective on US news
</p>
</section>
<LinkButton
data-link-name="us-expandable-marketing-card cta-click"
priority="tertiary"
size="xsmall"
href={`${guardianBaseURL}/email-newsletters`}
cssOverrides={buttonStyles}
>
View newsletters
</LinkButton>
</div>
</>
)}
</div>
</div>
</div>
</>
);
};
Loading

0 comments on commit 6c8e421

Please sign in to comment.