Skip to content

Commit 9d7e16c

Browse files
alexkrolickalexkrolick
committed
banded colors
1 parent 2c07193 commit 9d7e16c

File tree

1 file changed

+76
-76
lines changed

1 file changed

+76
-76
lines changed

‎website/pages/en/index.js‎

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,35 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
const React = require("react");
8+
const React = require('react')
99

10-
const CompLibrary = require("../../core/CompLibrary.js");
10+
const CompLibrary = require('../../core/CompLibrary.js')
1111

12-
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
13-
const Container = CompLibrary.Container;
14-
const GridBlock = CompLibrary.GridBlock;
12+
const MarkdownBlock = CompLibrary.MarkdownBlock /* Used to read markdown */
13+
const Container = CompLibrary.Container
14+
const GridBlock = CompLibrary.GridBlock
1515

1616
class HomeSplash extends React.Component {
1717
render() {
18-
const { siteConfig, language = "" } = this.props;
19-
const { baseUrl, docsUrl } = siteConfig;
20-
const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`;
21-
const langPart = `${language ? `${language}/` : ""}`;
22-
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
18+
const { siteConfig, language = '' } = this.props
19+
const { baseUrl, docsUrl } = siteConfig
20+
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`
21+
const langPart = `${language ? `${language}/` : ''}`
22+
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`
2323

2424
const SplashContainer = props => (
2525
<div className="homeContainer">
2626
<div className="homeSplashFade">
2727
<div className="wrapper homeWrapper">{props.children}</div>
2828
</div>
2929
</div>
30-
);
30+
)
3131

3232
const Logo = props => (
3333
<div className="projectLogo">
3434
<img src={props.img_src} alt="Project Logo" />
3535
</div>
36-
);
36+
)
3737

3838
const ProjectTitle = () => (
3939
<div>
@@ -42,61 +42,61 @@ class HomeSplash extends React.Component {
4242
<p className="projectTagline">{siteConfig.tagline}</p>
4343
</div>
4444
</div>
45-
);
45+
)
4646

4747
const PromoSection = props => (
4848
<div className="section promoSection">
4949
<div className="promoRow">
5050
<div className="pluginRowBlock">{props.children}</div>
5151
</div>
5252
</div>
53-
);
53+
)
5454

5555
const Button = props => (
5656
<div className="pluginWrapper buttonWrapper">
5757
<a className="button" href={props.href} target={props.target}>
5858
{props.children}
5959
</a>
6060
</div>
61-
);
61+
)
6262

6363
return (
6464
<SplashContainer>
6565
<Logo img_src={`${baseUrl}img/logo-large.png`} />
6666
<div className="inner">
6767
<ProjectTitle siteConfig={siteConfig} />
6868
<PromoSection>
69-
<Button href={docUrl("intro")}>Get Started</Button>
69+
<Button href={docUrl('intro')}>Get Started</Button>
7070
</PromoSection>
7171
</div>
7272
</SplashContainer>
73-
);
73+
)
7474
}
7575
}
7676

7777
class Index extends React.Component {
7878
render() {
79-
const { config: siteConfig, language = "" } = this.props;
80-
const { baseUrl } = siteConfig;
79+
const { config: siteConfig, language = '' } = this.props
80+
const { baseUrl } = siteConfig
8181

8282
const Block = props => (
8383
<Container
84-
padding={["bottom", "top"]}
84+
padding={['bottom', 'top']}
8585
id={props.id}
8686
background={props.background}
8787
>
8888
<GridBlock
89-
align={props.align || "center"}
90-
imageAlign={props.imageAlign || "center"}
89+
align={props.align || 'center'}
90+
imageAlign={props.imageAlign || 'center'}
9191
contents={props.children}
9292
layout={props.layout}
9393
/>
9494
</Container>
95-
);
95+
)
9696

9797
const FeatureCallout = () => (
98-
<Container className="" background={"light"} padding={["top", "bottom"]}>
99-
<div style={{ textAlign: "center" }}>
98+
<Container className="" background={'light'} padding={['top', 'bottom']}>
99+
<div style={{ textAlign: 'center' }}>
100100
<p>
101101
<i>
102102
The more your tests resemble the way your software is used, <br />
@@ -108,107 +108,107 @@ class Index extends React.Component {
108108
</MarkdownBlock>
109109
</div>
110110
</Container>
111-
);
111+
)
112112

113113
const Problem = () => (
114114
<React.Fragment>
115-
<Block background={"light"} align="left">
115+
<Block background={'light'} align="left">
116116
{[
117117
{
118-
title: "",
118+
title: '',
119119
content:
120120
"## The Problem \n - You want tests for your web UI that avoid including implementation details and rather focus on making your tests give you the confidence for which they are intended. \n - You want your tests to be maintainable so refactors _(changes to implementation but not functionality)_ don't break your tests and slow you and your team down.",
121121
image: `${baseUrl}img/interrobang-128x128.png`,
122-
imageAlt: "The problem (picture of a question mark)",
123-
imageAlign: "left"
124-
}
122+
imageAlt: 'The problem (picture of a question mark)',
123+
imageAlign: 'left',
124+
},
125125
]}
126126
</Block>
127127
</React.Fragment>
128-
);
128+
)
129129

130130
const Solution = () => [
131131
<Block background={null} align="left">
132132
{[
133133
{
134-
title: "",
134+
title: '',
135135
image: `${baseUrl}img/star-128x128.png`,
136-
imageAlign: "right",
137-
imageAlt: "The solution (picture of a star)",
136+
imageAlign: 'right',
137+
imageAlt: 'The solution (picture of a star)',
138138
content:
139-
"## The Solution \n `dom-testing-library` is a very light-weight solution for testing DOM nodes (whether simulated with [JSDOM](https://github.com/jsdom/jsdom) in [Jest](https://jestjs.io) or in the browser). The main utilities it provides involve querying the DOM for nodes in a way that's similar to how the user finds elements on the page. In this way, the library helps ensure your tests give you confidence in your UI code."
140-
}
139+
"## The Solution \n `dom-testing-library` is a very light-weight solution for testing DOM nodes (whether simulated with [JSDOM](https://github.com/jsdom/jsdom) in [Jest](https://jestjs.io) or in the browser). The main utilities it provides involve querying the DOM for nodes in a way that's similar to how the user finds elements on the page. In this way, the library helps ensure your tests give you confidence in your UI code.",
140+
},
141141
]}
142142
</Block>,
143-
<Block background={null} align="left">
143+
<Block background={'light'} align="left">
144144
{[
145145
{
146-
title: "Guiding Principle",
146+
title: 'Guiding Principle',
147147
image: `${baseUrl}img/trophy-128x128.png`,
148-
imageAlign: "left",
149-
imageAlt: "The guiding principle (picture of a brick wall)",
148+
imageAlign: 'left',
149+
imageAlt: 'The guiding principle (picture of a brick wall)',
150150
content:
151-
"_The more your tests resemble the way your software is used, the more confidence they can give you._"
152-
}
151+
'_The more your tests resemble the way your software is used, the more confidence they can give you._',
152+
},
153153
]}
154-
</Block>
155-
];
154+
</Block>,
155+
]
156156

157157
const Features = () => (
158158
<Block layout="twoColumn">
159159
{[
160160
{
161161
content:
162-
"Tests only break when your app breaks, not implementation details",
162+
'Tests only break when your app breaks, not implementation details',
163163
image: `${baseUrl}img/wrench-128x128.png`,
164-
imageAlign: "top",
165-
title: "Write Maintainable Tests"
164+
imageAlign: 'top',
165+
title: 'Write Maintainable Tests',
166166
},
167167
{
168-
content: "Interact with your app the same way as your users",
168+
content: 'Interact with your app the same way as your users',
169169
image: `${baseUrl}img/check-128x128.png`,
170-
imageAlign: "top",
171-
title: "Develop with Confidence"
170+
imageAlign: 'top',
171+
title: 'Develop with Confidence',
172172
},
173173
{
174174
content:
175-
"Built-in selectors use semantic HTML and ARIA roles to help you write inclusive code",
175+
'Built-in selectors use semantic HTML and ARIA roles to help you write inclusive code',
176176
image: `${baseUrl}img/tada-128x128.png`,
177-
imageAlign: "top",
178-
title: "Accessible by Default"
179-
}
177+
imageAlign: 'top',
178+
title: 'Accessible by Default',
179+
},
180180
]}
181181
</Block>
182-
);
182+
)
183183

184184
const Ecosystem = () => (
185-
<Block layout="threeColumn" background="light">
185+
<Block layout="threeColumn" background={null}>
186186
{[
187187
{
188-
content: "For testing React Components",
188+
content: 'For testing React Components',
189189
image: `${baseUrl}img/react-128x128.png`,
190-
imageAlign: "top",
191-
title: "[React Testing Library](./react)"
190+
imageAlign: 'top',
191+
title: '[React Testing Library](./react)',
192192
},
193193
{
194-
content: "End-to-End Tests",
194+
content: 'End-to-End Tests',
195195
image: `${baseUrl}img/evergreen-128x128.png`,
196-
imageAlign: "top",
197-
title: "[Cypress Testing Library](./cypress)"
196+
imageAlign: 'top',
197+
title: '[Cypress Testing Library](./cypress)',
198198
},
199199
{
200-
content: "Explore the ecosystem",
200+
content: 'Explore the ecosystem',
201201
image: `${baseUrl}img/construction-128x128.png`,
202-
imageAlign: "top",
203-
title: "[And more...](./docs/ecosystem-user-event)"
204-
}
202+
imageAlign: 'top',
203+
title: '[And more...](./docs/ecosystem-user-event)',
204+
},
205205
]}
206206
</Block>
207-
);
207+
)
208208

209209
const Showcase = () => {
210210
if ((siteConfig.users || []).length === 0) {
211-
return null;
211+
return null
212212
}
213213

214214
const showcase = siteConfig.users
@@ -217,22 +217,22 @@ class Index extends React.Component {
217217
<a href={user.infoLink} key={user.infoLink}>
218218
<img src={user.image} alt={user.caption} title={user.caption} />
219219
</a>
220-
));
220+
))
221221

222-
const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
222+
const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page
223223

224224
return (
225225
<div className="productShowcaseSection paddingBottom">
226226
<h2>Who is Using This?</h2>
227227
<div className="logos">{showcase}</div>
228228
<div className="more-users">
229-
<a className="button" href={pageUrl("users.html")}>
229+
<a className="button" href={pageUrl('users.html')}>
230230
More {siteConfig.title} Users
231231
</a>
232232
</div>
233233
</div>
234-
);
235-
};
234+
)
235+
}
236236

237237
return (
238238
<div>
@@ -246,8 +246,8 @@ class Index extends React.Component {
246246
<Ecosystem />
247247
</div>
248248
</div>
249-
);
249+
)
250250
}
251251
}
252252

253-
module.exports = Index;
253+
module.exports = Index

0 commit comments

Comments
 (0)