Skip to content

Commit 9024df3

Browse files
RoyalIcingRoyalIcing
committed
Slim down and improve landing page
1 parent 4dfb12b commit 9024df3

File tree

8 files changed

+76
-73
lines changed

8 files changed

+76
-73
lines changed

‎apps/components_guide_web/assets/css/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
display: none !important;
3030
}
3131

32-
article a {
32+
article a:not(nav *) {
3333
text-decoration: underline;
3434
}
3535
article a:hover {

‎apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/_header.html.eex‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
<header class="text-white" style="<%= header_styles() %>">
2-
<div class="mx-auto max-w-4xl">
3-
<h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
4-
<span class="mr-2 text-4xl">💁🏼‍♀️🥇</span>
5-
<span><%= "Accessibility-First" %></span>
6-
</h1>
7-
<%= render ComponentsGuideWeb.AccessibilityFirstView, "_nav.html" %>
8-
</div>
1+
<header style="<%= header_styles() %>">
2+
<%= render ComponentsGuideWeb.AccessibilityFirstView, "_top.html" %>
93
</header>

‎apps/components_guide_web/lib/components_guide_web/templates/accessibility_first/_top.html.eex‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="mx-auto max-w-4xl text-white">
2+
<h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
3+
<span class="mr-2 text-4xl">💁🏼‍♀️🥇</span>
4+
<span><%= "Accessibility-First" %></span>
5+
</h1>
6+
<%= render ComponentsGuideWeb.AccessibilityFirstView, "_nav.html" %>
7+
</div>

‎apps/components_guide_web/lib/components_guide_web/templates/landing/index.html.eex‎

Lines changed: 10 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -45,46 +45,15 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
4545
</section>
4646
</div>
4747

48-
<div class="text-white" style="<%= sections_styles(:blue) %>">
49-
<header class="mx-auto max-w-4xl">
50-
<h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
51-
<div class="row">
52-
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=48 height=48>
53-
<span class="mr-2 text-3xl">❤️</span>
54-
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=48 height=48>
55-
</div>
56-
<span><%= "React & TypeScript Guide" %></span>
57-
</h1>
58-
<nav class="pt-6 pb-4">
59-
<ul class="list-none row font-bold" style="--link-padding: 0.75em">
60-
<li><%= link("Fundamentals", to: '/react+typescript') %>
61-
<li><%= link("Testing", to: '/react+typescript/testing') %>
62-
</ul>
63-
</nav>
64-
</header>
65-
</div>
48+
<article class="text-white" style="<%= sections_styles(:blue) %>">
49+
<%= render ComponentsGuideWeb.ReactTypescriptView, "_top.html" %>
50+
</article>
6651

67-
<div class="text-white" style="<%= sections_styles(:blue) %>">
68-
<header class="mx-auto max-w-4xl">
69-
<h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
70-
<div class="row">
71-
<span class="mr-2 text-4xl">💁🏼‍♀️🥇</span>
72-
</div>
73-
<span><%= "Accessibility-First Development" %></span>
74-
</h1>
75-
<nav class="pt-6 pb-4">
76-
<ul class="list-none row font-bold" style="--link-padding: 0.75em">
77-
<li><%= link("Landmarks", to: '/accessibility-first/landmarks') %>
78-
<li><%= link("Widgets", to: '/accessibility-first/widgets-cheatsheet') %>
79-
<li><%= link("Properties", to: '/accessibility-first/properties-cheatsheet') %>
80-
<li><%= link("Forms", to: '/accessibility-first/forms') %>
81-
<li><%= link("Keyboard Navigation", to: '/accessibility-first/keyboard-navigation') %>
82-
</ul>
83-
</nav>
84-
</header>
85-
</div>
52+
<article class="text-white" style="<%= sections_styles(:warm) %>">
53+
<%= render ComponentsGuideWeb.AccessibilityFirstView, "_top.html" %>
54+
</article>
8655

87-
<div class="text-white">
56+
<div hidden class="text-white">
8857
<section class="pt-20 pb-20" style="<%= sections_styles(:dark) %>">
8958
<header class="mb-8 mx-auto max-w-4xl px-2 text-center">
9059
<h2 class="text-3xl sm:text-4xl font-bold leading-snug">
@@ -194,6 +163,9 @@ subhead = "Guides to accessibility, TDD, BDD, naming, performance, and the lates
194163
</div>
195164
</section>
196165

166+
</div>
167+
168+
<div class="text-white">
197169
<aside class="py-20">
198170
<div class="container space-y-6 text-2xl md:text-3xl rounded">
199171
<p>

‎apps/components_guide_web/lib/components_guide_web/templates/react_typescript/_top.html.eex‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="mx-auto max-w-4xl text-white">
2+
<h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
3+
<div class="row">
4+
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=48 height=48>
5+
<span class="mr-2 text-3xl">❤️</span>
6+
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=48 height=48>
7+
</div>
8+
<span><%= "React & TypeScript Guide" %></span>
9+
</h1>
10+
<nav class="pt-6 pb-4">
11+
<ul class="list-none row font-bold" style="--link-padding: 0.75em">
12+
<li><%= link("Fundamentals", to: '/react+typescript') %>
13+
<li><%= link("Testing", to: '/react+typescript/testing') %>
14+
<li><%= link("Forms", to: '/react+typescript/forms') %>
15+
</ul>
16+
</nav>
17+
</div>

‎apps/components_guide_web/lib/components_guide_web/templates/react_typescript/index.html.eex‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,6 @@
1-
<div class="text-white" style="<%= header_styles() %>">
2-
<header class="mx-auto max-w-4xl">
3-
<h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
4-
<div class="row">
5-
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=48 height=48>
6-
<span class="mr-2 text-3xl">❤️</span>
7-
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=48 height=48>
8-
</div>
9-
<span><%= "React & TypeScript Guide" %></span>
10-
</h1>
11-
<nav class="pt-6 pb-4">
12-
<ul class="list-none row font-bold" style="--link-padding: 0.75em">
13-
<li><%= link("Fundamentals", to: '/react+typescript') %>
14-
<li><%= link("Testing", to: '/react+typescript/testing') %>
15-
<li><%= link("Forms", to: '/react+typescript/forms') %>
16-
</ul>
17-
</nav>
18-
</header>
19-
</div>
1+
<header style="<%= header_styles() %>">
2+
<%= render @view_module, "_top.html" %>
3+
</header>
204

215
<article>
226
<div class="text-white bg-gray-900">

‎apps/components_guide_web/lib/components_guide_web/templates/react_typescript/testing.html.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,36 @@ This sounds exactly what we would desire for our automated tests! We want to fin
3535

3636
This is what accessibility-first testing allows us to achieve. And as a massive bonus, it lets us create an accessible experience from day one. We can be on a path to creating a fantastic user experience too.
3737

38+
## Component test boilerplate
39+
40+
```tsx
41+
import SignInForm from "./SignInForm";
42+
43+
import React from "react";
44+
import { lazy, freshFn } from "jest-zest";
45+
import { render } from "@testing-library/react";
46+
import user from "@testing-library/react";
47+
48+
const onSignIn = freshFn();
49+
const { getByRole } = lazy(() => render(
50+
<SignInForm onSignIn={onSignIn} />
51+
));
52+
53+
it("renders an email textbox", () => {
54+
expect(getByRole('textbox', { name: /Email/i })).toBeInTheDocument();
55+
});
56+
57+
describe("when Sign In button is clicked", () => {
58+
beforeEach(() => {
59+
user.click(getByRole('button', { name: /Sign In/i }));
60+
});
61+
62+
it("calls onSignIn prop", () => {
63+
expect(onSignIn).toHaveBeenCalled();
64+
});
65+
})
66+
```
67+
3868
## Available Roles
3969

4070
<table class="text-left table-fixed">

‎apps/components_guide_web/lib/components_guide_web/views/landing_view.ex‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -138,17 +138,16 @@ defmodule ComponentsGuideWeb.LandingView do
138138
end
139139

140140
def sections_styles(:warm) do
141-
color = {:lab, 30, 90, 20} |> Styling.to_css()
141+
color = {:lab, 47, 10, -44}
142142

143143
gradient = Styling.linear_gradient("150grad", [
144-
{:lab, 65, 40, 50},
145-
{:lab, 50, 90, 40},
146-
{:lab, 30, 90, 20},
147-
{:lab, 30, 90, 10},
148-
{:lab, 50, 70, 60},
144+
{:lab, 47, 5, -44},
145+
{:lab, 47, -24, -44},
146+
color,
147+
{:lab, 47, 53, -44}
149148
])
150149

151-
"background-color: #{color}; background-image: #{gradient};"
150+
"background-color: #{color |> Styling.to_css()}; background-image: #{gradient};"
152151
end
153152

154153
# def header_background do

0 commit comments

Comments
 (0)