Skip to content

Commit 23307e6

Browse files
webstackdevwebstackdev
committed
Hide computer animation on mobile, refactor hard-coded hex color values in animation to CSS theme variables, refactor mobile nav animation to run in sequence instead of trying to sync both splash and nav item animations by timing
1 parent 09cf1de commit 23307e6

9 files changed

Lines changed: 167 additions & 83 deletions

File tree

‎_TODO.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,14 @@ We have E2E errors again testimonials slide on mobile chrome and safari. I think
4646

4747
`test/e2e/specs/04-components/testimonials.spec.ts`:244:3 › Testimonials Component › @ready testimonials auto-rotate changes slide index
4848

49+
## Move containers to dev server from Playwright
50+
51+
We should start the mock containers with the dev server instead of with Playwright so that they're useable in a dev environment.
52+
53+
## Add Tooltip component
54+
55+
We need a Tooltip component. It should apply to the existing tooltips on the theme picker palettes.
56+
4957
## Improve print layout by hiding header and footer for articles, add tracking
5058

5159
```typescript
@@ -79,7 +87,3 @@ if (window.matchMedia) {
7987
});
8088
}
8189
```
82-
83-
Please analyze the document CONTENT_PLANNING_OPUS.md
84-
85-
Please add a suggested set of tag groups that would be appropriate for the content goals of the site, as described in the document. These are top-level content organization categories like "DevOps". Then, sketch out 30+ article ideas organized by the tag group they most relate to (they can fall under more than one tag group).

‎src/components/Animations/Computers/index.astro‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import Icon from '@components/Icon/index.astro'
66
---
77

8-
<computers-animation class="order-1 lg:order-2 flex justify-center items-center">
8+
<computers-animation class="hidden lg:flex order-1 lg:order-2 justify-center items-center">
99
<div class="relative w-full max-w-lg mx-auto">
1010
<button
1111
type="button"
@@ -27,31 +27,31 @@ import Icon from '@components/Icon/index.astro'
2727
aria-hidden="true"
2828
focusable="false"
2929
xmlns="http://www.w3.org/2000/svg"
30-
width="600"
31-
height="600"
30+
class="block w-full h-auto max-w-full"
3231
viewBox="0 0 600 600"
32+
preserveAspectRatio="xMidYMid meet"
3333
>
3434
<defs>
3535
<clipPath id="monitorEdgeMask">
3636
<path
3737
class="monitorEdgeMask"
38-
fill="#494D5D"
38+
fill="var(--color-gray-700)"
3939
d="M559.7 79h-520C32.5 79 27 84.6 27 91.8V403h546V91.8c0-7.2-6.1-12.8-13.3-12.8z"
4040
></path>
4141
</clipPath>
4242
<clipPath id="laptopBaseMask">
4343
<path
4444
class="laptopBaseMask"
45-
fill="#FFFAEB"
45+
fill="var(--color-gray-50)"
4646
d="M487 409v15.5c0 3.8-3.2 7.5-7 7.5H120c-3.8 0-7-3.7-7-7.5V409h374z"></path>
4747
</clipPath>
4848
<clipPath id="monitorStandMask">
49-
<path class="monitorStandMask" fill="#EA2877" d="M23 455h550v102H23z"></path>
49+
<path class="monitorStandMask" fill="var(--color-gray-500)" d="M23 455h550v102H23z"></path>
5050
</clipPath>
5151
<clipPath id="tabletContentGroupMask">
5252
<path
5353
class="tabletContentGroupMask"
54-
fill="#BDCCD4"
54+
fill="var(--color-gray-200)"
5555
d="M218.5 386.5v-203c0-2.8 2.3-5 5-5h153c2.8 0 5 2.3 5 5v203c0 2.8-2.3 5-5 5h-153c-2.7 0-5-2.2-5-5z"
5656
></path>
5757
</clipPath>
@@ -60,181 +60,181 @@ import Icon from '@components/Icon/index.astro'
6060
<g class="monitorStandGroup" clip-path="url(#monitorStandMask)">
6161
<path
6262
class="monitorStand"
63-
fill="#FFFAEB"
63+
fill="var(--color-gray-50)"
6464
d="M386.3 512H374l-20.7-57h-106L226 512h-12.3c-2.6 0-4.7 1.9-4.7 4.5s2.1 4.5 4.7 4.5h172.7c2.6 0 4.7-1.9 4.7-4.5s-2.2-4.5-4.8-4.5z"
6565
></path>
6666
</g>
67-
<path class="monitorStandShadow" fill="#D9D7D3" d="M357.4 467H242.6l4.5-12h106"></path>
67+
<path class="monitorStandShadow" fill="var(--color-gray-200)" d="M357.4 467H242.6l4.5-12h106"></path>
6868
<g class="monitorEdgeGroup" clip-path="url(#monitorEdgeMask)">
6969
<path
7070
class="monitorEdge"
71-
fill="#494D5D"
71+
fill="var(--color-gray-700)"
7272
d="M559.7 79h-520C32.5 79 27 84.6 27 91.8V403h546V91.8c0-7.2-6.1-12.8-13.3-12.8z"
7373
></path>
7474
<path
7575
class="monitorScreen"
76-
fill="#BDCCD4"
76+
fill="var(--color-gray-200)"
7777
d="M544.5 383.3h-489c-3.8 0-7-3.1-7-7v-271c0-3.8 3.2-7 7-7h489c3.8 0 7 3.2 7 7v271c0 3.8-3.2 7-7 7z"
7878
></path>
7979
<g class="monitorContentGroup" opacity=".6">
8080
<path
81-
fill="#E5EBEE"
81+
fill="var(--color-gray-100)"
8282
d="M526.8 145H73.2c-3.2 0-5.7-2.6-5.7-5.7v-15.5c0-3.2 2.6-5.7 5.7-5.7h453.5c3.2 0 5.7 2.6 5.7 5.7v15.5c.1 3.1-2.5 5.7-5.6 5.7z"
8383
></path>
8484
<path
85-
fill="#8CA5B2"
85+
fill="var(--color-gray-400)"
8686
d="M157.9 364.5H73.1c-3.1 0-5.6-2.5-5.6-5.6v-58.7c0-3.1 2.5-5.6 5.6-5.6h84.7c3.1 0 5.6 2.5 5.6 5.6v58.7c.1 3.1-2.4 5.6-5.5 5.6z"
8787
></path>
8888
<path
89-
fill="#8CA5B2"
89+
fill="var(--color-gray-400)"
9090
d="M526.9 272.5H73.1c-3.1 0-5.6-2.5-5.6-5.6v-93.7c0-3.1 2.5-5.6 5.6-5.6h453.7c3.1 0 5.6 2.5 5.6 5.6v93.7c.1 3.1-2.4 5.6-5.5 5.6z"
9191
></path>
9292
<path
93-
fill="#E5EBEE"
93+
fill="var(--color-gray-100)"
9494
d="M530.5 306H190.2c-1.1 0-2-.9-2-2v-7.5c0-1.1.9-2 2-2h340.3c1.1 0 2 .9 2 2v7.5c0 1.1-.9 2-2 2z"
9595
></path>
9696
<path
97-
fill="#E5EBEE"
97+
fill="var(--color-gray-100)"
9898
d="M530.5 334.3H190.2c-1.1 0-2-.9-2-2v-7.5c0-1.1.9-2 2-2h340.3c1.1 0 2 .9 2 2v7.5c0 1.1-.9 2-2 2z"
9999
></path>
100100
<path
101-
fill="#E5EBEE"
101+
fill="var(--color-gray-100)"
102102
d="M530.5 364.5H190.2c-1.1 0-2-.9-2-2V355c0-1.1.9-2 2-2h340.3c1.1 0 2 .9 2 2v7.5c0 1.1-.9 2-2 2z"
103103
></path>
104104
</g>
105105
</g>
106106
<path
107107
class="monitorBottom"
108-
fill="#FFFAEB"
108+
fill="var(--color-gray-50)"
109109
d="M573 403v39c0 7.1-6.1 13-13.3 13h-520c-7.2 0-12.7-5.9-12.7-13v-39h546z"></path>
110-
<circle class="monitorLogo" fill="#A4ACBB" cx="300" cy="426" r="10"></circle>
110+
<circle class="monitorLogo" fill="var(--color-gray-400)" cx="300" cy="426" r="10"></circle>
111111
</g>
112112
<g class="laptopGroup">
113-
<path class="laptopEdgeLeft" fill="#FFFAEB" d="M310 401.5H131.5v-226c0-3.9 3.2-7 7-7H310"
113+
<path class="laptopEdgeLeft" fill="var(--color-gray-50)" d="M310 401.5H131.5v-226c0-3.9 3.2-7 7-7H310"
114114
></path>
115-
<path class="laptopEdgeRight" fill="#FFFAEB" d="M290 168.5h171.5c3.8 0 7 3.1 7 7v226H290"
115+
<path class="laptopEdgeRight" fill="var(--color-gray-50)" d="M290 168.5h171.5c3.8 0 7 3.1 7 7v226H290"
116116
></path>
117117
<g class="laptopBaseGroup" clip-path="url(#laptopBaseMask)">
118118
<path
119119
class="laptopBase"
120-
fill="#FFFAEB"
120+
fill="var(--color-gray-50)"
121121
d="M487 409v15.5c0 3.8-3.2 7.5-7 7.5H120c-3.8 0-7-3.7-7-7.5V409h374z"></path>
122122
</g>
123-
<path class="laptopTrackpad" fill="#A4ACBB" d="M326.7 421.8h-53.4l-5-7.6h63.4"></path>
123+
<path class="laptopTrackpad" fill="var(--color-gray-400)" d="M326.7 421.8h-53.4l-5-7.6h63.4"></path>
124124
<path
125125
class="laptopScreen"
126-
fill="#BDCCD4"
126+
fill="var(--color-gray-200)"
127127
d="M452.7 391.9H147.3c-3.8 0-7-3.1-7-7V185.6c0-3.8 3.2-7 7-7h305.3c3.9 0 7 3.2 7 7v199.3c.1 3.9-3.1 7-6.9 7z"
128128
></path>
129129
<g class="laptopContentGroup" opacity=".6">
130130
<path
131-
fill="#E5EBEE"
131+
fill="var(--color-gray-100)"
132132
d="M437.8 212.3H164.1c-1.9 0-3.5-1.6-3.5-3.5v-9.4c0-1.9 1.6-3.5 3.5-3.5h273.7c1.9 0 3.5 1.6 3.5 3.5v9.4c-.1 1.9-1.6 3.5-3.5 3.5z"
133133
></path>
134134
<path
135-
fill="#8CA5B2"
135+
fill="var(--color-gray-400)"
136136
d="M215.1 363.8H164c-1.9 0-3.4-1.5-3.4-3.4V325c0-1.9 1.5-3.4 3.4-3.4h51.1c1.9 0 3.4 1.5 3.4 3.4v35.4c0 1.9-1.5 3.4-3.4 3.4z"
137137
></path>
138138
<path
139-
fill="#8CA5B2"
139+
fill="var(--color-gray-400)"
140140
d="M437.8 307.3H164c-1.9 0-3.4-1.5-3.4-3.4v-74.6c0-1.9 1.5-3.4 3.4-3.4h273.8c1.9 0 3.4 1.5 3.4 3.4v74.6c0 1.9-1.5 3.4-3.4 3.4z"
141141
></path>
142142
<path
143-
fill="#E5EBEE"
143+
fill="var(--color-gray-100)"
144144
d="M440 328.5H234.6c-.7 0-1.2-.5-1.2-1.2v-4.5c0-.7.5-1.2 1.2-1.2H440c.7 0 1.2.5 1.2 1.2v4.5c0 .6-.5 1.2-1.2 1.2z"
145145
></path>
146146
<path
147-
fill="#E5EBEE"
147+
fill="var(--color-gray-100)"
148148
d="M440 345.5H234.6c-.7 0-1.2-.5-1.2-1.2v-4.5c0-.7.5-1.2 1.2-1.2H440c.7 0 1.2.5 1.2 1.2v4.5c0 .7-.5 1.2-1.2 1.2z"
149149
></path>
150150
<path
151-
fill="#E5EBEE"
151+
fill="var(--color-gray-100)"
152152
d="M440 363.8H234.6c-.7 0-1.2-.5-1.2-1.2v-4.5c0-.7.5-1.2 1.2-1.2H440c.7 0 1.2.5 1.2 1.2v4.5c0 .7-.5 1.2-1.2 1.2z"
153153
></path>
154154
</g>
155155
</g>
156156
<g class="phoneGroup" opacity="0">
157157
<path
158158
class="phoneEdge"
159-
fill="#FFFAEB"
159+
fill="var(--color-gray-50)"
160160
d="M255.2 371.4V198.6c0-3.2 2.7-5.9 5.9-5.9H339c3.2 0 5.9 2.7 5.9 5.9v172.9c0 3.2-2.7 5.9-5.9 5.9h-77.9c-3.3-.1-5.9-2.7-5.9-6z"
161161
></path>
162-
<circle class="phoneButton" fill="#9AA3B2" cx="300" cy="363.1" r="6"></circle>
163-
<circle class="phoneCamera" fill="#A4ACBB" cx="284.3" cy="203.6" r="1.5"></circle>
164-
<path class="phoneScreen" fill="#BDCCD4" d="M262.1 214.3h75.7v135.3h-75.7z"></path>
162+
<circle class="phoneButton" fill="var(--color-gray-400)" cx="300" cy="363.1" r="6"></circle>
163+
<circle class="phoneCamera" fill="var(--color-gray-400)" cx="284.3" cy="203.6" r="1.5"></circle>
164+
<path class="phoneScreen" fill="var(--color-gray-200)" d="M262.1 214.3h75.7v135.3h-75.7z"></path>
165165
<path
166166
class="phoneSpeaker"
167167
fill="none"
168-
stroke="#9AA3B2"
168+
stroke="var(--color-gray-400)"
169169
stroke-width="3"
170170
stroke-linecap="round"
171171
stroke-linejoin="round"
172172
stroke-miterlimit="10"
173173
d="M292.5 203h15"></path>
174174
<g class="phoneContentGroup" opacity=".6">
175175
<path
176-
fill="#E5EBEE"
176+
fill="var(--color-gray-100)"
177177
d="M327.8 235.6h-55.3c-1 0-1.9-.9-1.9-1.9v-7.3c0-1 .9-1.9 1.9-1.9h55.3c1 0 1.9.9 1.9 1.9v7.3c0 1.1-.9 1.9-1.9 1.9z"
178178
></path>
179179
<path
180-
fill="#8CA5B2"
180+
fill="var(--color-gray-400)"
181181
d="M294.3 338.7h-21.9c-1 0-1.9-.8-1.9-1.9v-25c0-1 .8-1.9 1.9-1.9h21.9c1 0 1.9.8 1.9 1.9v25c0 1-.9 1.9-1.9 1.9z"
182182
></path>
183183
<path
184-
fill="#8CA5B2"
184+
fill="var(--color-gray-400)"
185185
d="M327.8 300.3h-55.4c-1 0-1.9-.8-1.9-1.9v-51.7c0-1 .8-1.9 1.9-1.9h55.4c1 0 1.9.8 1.9 1.9v51.7c0 1-.9 1.9-1.9 1.9z"
186186
></path>
187187
<path
188-
fill="#E5EBEE"
188+
fill="var(--color-gray-100)"
189189
d="M329 314.7h-25.6c-.4 0-.7-.3-.7-.7v-3.4c0-.4.3-.7.7-.7H329c.4 0 .7.3.7.7v3.4c0 .4-.3.7-.7.7z"
190190
></path>
191191
<path
192-
fill="#E5EBEE"
192+
fill="var(--color-gray-100)"
193193
d="M329 338.7h-25.6c-.4 0-.7-.3-.7-.7v-3.4c0-.4.3-.7.7-.7H329c.4 0 .7.3.7.7v3.4c0 .4-.3.7-.7.7z"
194194
></path>
195195
<path
196-
fill="#E5EBEE"
196+
fill="var(--color-gray-100)"
197197
d="M329 326.3h-25.6c-.4 0-.7-.3-.7-.7v-3.4c0-.4.3-.7.7-.7H329c.4 0 .7.3.7.7v3.4c0 .4-.3.7-.7.7z"
198198
></path>
199199
</g>
200200
</g>
201201
<g class="tabletGroup">
202202
<path
203203
class="tabletEdge"
204-
fill="#FFFAEB"
204+
fill="var(--color-gray-50)"
205205
d="M198.5 404.5v-239c0-7.7 6.3-14 14-14h175c7.7 0 14 6.3 14 14v239c0 7.7-6.3 14-14 14h-175c-7.7 0-14-6.3-14-14z"
206206
></path>
207207
<path
208208
class="tabletScreen"
209-
fill="#BDCCD4"
209+
fill="var(--color-gray-200)"
210210
d="M218.5 386.5v-203c0-2.8 2.3-5 5-5h153c2.8 0 5 2.3 5 5v203c0 2.8-2.3 5-5 5h-153c-2.7 0-5-2.2-5-5z"
211211
></path>
212-
<circle class="tabletButton" fill="#A4ACBB" cx="300" cy="406" r="6"></circle>
213-
<circle class="tabletCamera" fill="#A4ACBB" cx="300" cy="168" r="2"></circle>
212+
<circle class="tabletButton" fill="var(--color-gray-400)" cx="300" cy="406" r="6"></circle>
213+
<circle class="tabletCamera" fill="var(--color-gray-400)" cx="300" cy="168" r="2"></circle>
214214
<g class="maskedTabletContentGroup" clip-path="url(#tabletContentGroupMask)">
215215
<g class="tabletContentGroup" opacity=".6">
216216
<path
217-
fill="#E5EBEE"
217+
fill="var(--color-gray-100)"
218218
d="M363.6 217.4H236.9c-1.9 0-3.5-1.6-3.5-3.5v-9.4c0-1.9 1.6-3.5 3.5-3.5h126.7c1.9 0 3.5 1.6 3.5 3.5v9.4c-.1 1.9-1.6 3.5-3.5 3.5z"
219219
></path>
220220
<path
221-
fill="#8CA5B2"
221+
fill="var(--color-gray-400)"
222222
d="M288 368.9h-51.1c-1.9 0-3.4-1.5-3.4-3.4v-35.4c0-1.9 1.5-3.4 3.4-3.4H288c1.9 0 3.4 1.5 3.4 3.4v35.4c0 1.9-1.6 3.4-3.4 3.4z"
223223
></path>
224224
<path
225-
fill="#8CA5B2"
225+
fill="var(--color-gray-400)"
226226
d="M363.6 312.4H236.8c-1.9 0-3.4-1.5-3.4-3.4v-74.6c0-1.9 1.5-3.4 3.4-3.4h126.8c1.9 0 3.4 1.5 3.4 3.4V309c0 1.9-1.5 3.4-3.4 3.4z"
227227
></path>
228228
<path
229-
fill="#E5EBEE"
229+
fill="var(--color-gray-100)"
230230
d="M365.8 333.6h-58.4c-.7 0-1.2-.5-1.2-1.2v-4.5c0-.7.5-1.2 1.2-1.2h58.4c.7 0 1.2.5 1.2 1.2v4.5c0 .7-.5 1.2-1.2 1.2z"
231231
></path>
232232
<path
233-
fill="#E5EBEE"
233+
fill="var(--color-gray-100)"
234234
d="M365.8 368.9h-58.4c-.7 0-1.2-.5-1.2-1.2v-4.5c0-.7.5-1.2 1.2-1.2h58.4c.7 0 1.2.5 1.2 1.2v4.5c0 .7-.5 1.2-1.2 1.2z"
235235
></path>
236236
<path
237-
fill="#E5EBEE"
237+
fill="var(--color-gray-100)"
238238
d="M365.8 350.6h-58.4c-.7 0-1.2-.5-1.2-1.2v-4.5c0-.7.5-1.2 1.2-1.2h58.4c.7 0 1.2.5 1.2 1.2v4.5c0 .7-.5 1.2-1.2 1.2z"
239239
></path>
240240
</g>

‎src/components/Header/index.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@ const { path } = Astro.props
6060
aria-hidden="true"
6161
data-testid="mobile-splash-backdrop"
6262
>
63+
<div
64+
id="mobile-splash-backdrop"
65+
class="mobile-splash-backdrop"
66+
aria-hidden="true"
67+
>
68+
</div>
6369
</div>
6470
{/* Logo and wordmark */}
6571
<span

‎src/components/Navigation/client/__tests__/index.spec.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,18 @@ describe('NavigationElement web component behavior', () => {
7171
}
7272

7373
test('toggleMenu toggles menu visibility classes', async () => {
74-
vi.useFakeTimers()
7574
await renderNavigation(async () => {
7675
const menu = document.querySelector('.main-nav-menu')
7776
const header = document.querySelector('#header')
7877
const toggleButton = document.querySelector('.nav-toggle-btn')
79-
80-
if (!isUlElement(menu) || !isHeaderElement(header) || !isButtonElement(toggleButton)) {
78+
const splashBackdrop = document.querySelector('#mobile-splash-backdrop')
79+
80+
if (
81+
!isUlElement(menu) ||
82+
!isHeaderElement(header) ||
83+
!isButtonElement(toggleButton) ||
84+
!(splashBackdrop instanceof HTMLDivElement)
85+
) {
8186
throw new TestError('Navigation DOM structure is missing expected elements')
8287
}
8388

@@ -90,7 +95,7 @@ describe('NavigationElement web component behavior', () => {
9095
expect(menu.classList.contains('menu-visible')).toBe(false)
9196
expect(setOverlayPauseStateMock).toHaveBeenNthCalledWith(1, 'navigation', true)
9297

93-
vi.advanceTimersByTime(600)
98+
splashBackdrop.dispatchEvent(new Event('transitionend'))
9499
expect(menu.classList.contains('menu-visible')).toBe(true)
95100

96101
toggleButton.click()
@@ -100,7 +105,6 @@ describe('NavigationElement web component behavior', () => {
100105
expect(menu.classList.contains('menu-visible')).toBe(false)
101106
expect(setOverlayPauseStateMock).toHaveBeenNthCalledWith(2, 'navigation', false)
102107
})
103-
vi.useRealTimers()
104108
})
105109

106110
test('Escape key closes the menu', async () => {

0 commit comments

Comments
 (0)