Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Remove button inside links #675

Merged
benhalverson merged 4 commits into from
May 4, 2020
Merged

Remove button inside links #675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7acfe33
fix(hero.tsx): Fix button nested inside links
giankotarola May 3, 2020
f7ab102
fix(hero.scss): Set explicit display flex
giankotarola May 3, 2020
7540e71
fix(hero.scss): Align center for lts container and update snap
giankotarola May 3, 2020
e64af06
fix(hero.scss): Keep same styles on focus
giankotarola May 3, 2020
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
65 changes: 65 additions & 0 deletions src/components/Hero/Hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
.home-page-hero {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: var(--space-96) 0 var(--space-128) 0;

h1,
p {
margin: 0;
}

h1 {
max-width: 840px;
}

.sub-title {
max-width: 780px;
color: var(--color-text-secondary);
margin: var(--space-32) 0 var(--space-80) 0;
font-weight: var(--font-weight-light);
}
}

.btn-ctas {
display: flex;
flex-direction: row;
align-items: flex-start;
}

.download-lts-container {
display: flex;
position: relative;
flex-direction: column;
align-items: center;

& > p {
margin-top: var(--space-08);
}
}

.circular-container,
.circular-container:hover,
.circular-container:focus {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-sizing: border-box;
width: 20rem;
height: 5.6rem;
padding: 1.4rem 0;
border-radius: 5rem;
color: var(--black0);
margin: 0 var(--space-16);
font-weight: var(--font-weight-semibold);
background-color: var(--color-fill-action);

&.inverse {
background-color: transparent;
color: var(--color-fill-action);
border: var(--color-fill-action) var(--space-02) solid;
}
}
18 changes: 5 additions & 13 deletions src/components/Hero/__tests__/__snapshots__/hero.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,13 @@ exports[`Hero component renders correctly 1`] = `
className="download-lts-container"
>
<a
className="circular-container"
href="https://nodejs.org/dist//node-.tar.gz"
>
<button
className="download-lts-cta t-body1"
type="button"
>
Download Node (LTS)
</button>
Download Node (LTS)
</a>
<p
className="links t-caption"
className="t-caption"
>

<a
Expand All @@ -38,14 +34,10 @@ exports[`Hero component renders correctly 1`] = `
</p>
</div>
<a
className="circular-container inverse"
href="/learn"
>
<button
className="learn-cta t-body1"
type="button"
>
Learn Node
</button>
Learn Node
</a>
</div>
</div>
Expand Down
16 changes: 7 additions & 9 deletions src/components/Hero/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { Link } from 'gatsby';
import { detectOS, UserOS } from '../../util/detectOS';
import { useReleaseHistory, ReleaseData } from '../../hooks/useReleaseHistory';

import './Hero.scss';

interface Props {
title: string;
subTitle: string;
Expand Down Expand Up @@ -58,22 +60,18 @@ const Hero = ({ title, subTitle }: Props): JSX.Element => {
<h2 className="sub-title t-subheading">{subTitle}</h2>
<div className="btn-ctas">
<div className="download-lts-container">
<a href={ltsVersionUrl}>
<button className="download-lts-cta t-body1" type="button">
Download Node (LTS)
</button>
<a className="circular-container" href={ltsVersionUrl}>
Download Node (LTS)
</a>
<p className="links t-caption">
<p className="t-caption">
{lastLTSRelease
? `Version ${lastLTSRelease.version.substr(1)} - `
: ''}
<a href={currentVersionUrl}>Get Current</a>
</p>
</div>
<Link to="/learn">
<button className="learn-cta t-body1" type="button">
Learn Node
</button>
<Link className="circular-container inverse" to="/learn">
Learn Node
</Link>
</div>
</div>
Expand Down
65 changes: 0 additions & 65 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,71 +29,6 @@
z-index: -10;
}

.home-page-hero {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding-top: var(--space-96);
margin-bottom: 160px;

h1,
p {
margin: 0;
}

h1 {
max-width: 840px;
}

.sub-title {
max-width: 780px;
color: var(--color-text-secondary);
margin: var(--space-32) 0 var(--space-80) 0;
font-weight: var(--font-weight-light);
}
}

.download-lts-container {
position: relative;

.links {
color: var(--color-text-secondary);
margin: var(--space-08) 0 0 0;
position: absolute;
left: var(--space-16);
}
}

.home-page-hero .btn-ctas {
display: flex;

button {
border: none;
box-sizing: border-box;
width: 20rem;
height: 5.6rem;
padding: 0 var(--space-16);
font-weight: var(--font-weight-semibold);
margin: 0;
}

.download-lts-cta {
border-radius: 5.6rem;
background: var(--color-fill-action);
color: var(--black0);
margin-right: var(--space-32);
position: relative;
}

.learn-cta {
border-radius: 5.6rem;
border: var(--color-fill-action) var(--space-02) solid;
color: var(--color-fill-action);
}
}

.node-demo-container {
position: relative;
}
Expand Down