Skip to content

Commit e7704cd

Browse files
webstackdevwebstackdev
committed
Update Download stylings
1 parent 46bd1eb commit e7704cd

28 files changed

Lines changed: 407 additions & 577 deletions

File tree

‎.cache/pages.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
"consent",
9090
"contact",
9191
"hero",
92+
"links",
9293
"newsletter",
9394
"offline",
9495
{

‎_TODO.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,11 @@ Axe accessibility (2) - axe-core integration
3232
- Code/CodeTabs
3333
- Consent/Checkbox
3434

35+
## Newsletter future plans
36+
37+
- Make the Newsletter a list view page
38+
- Add newsletters as Markdown. Publish to HubSpot from Markdown over API?
39+
3540
## Testimonials on mobile
3641

3742
We have E2E errors again testimonials slide on mobile chrome and safari. I think the problem is that we are pausing carousels when part of the carousel is outside of the viewport, and the testimonials are too large to display on mobile without being off viewport.

‎src/components/Consent/Checkbox/@types/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ export interface ConsentCheckboxProps {
1414
/** Form identifier (for tracking in consent logs) */
1515
formId?: string
1616
/** Layout variants */
17-
variant: 'default' | 'newsletter-cta-home' | 'newsletter-cta-article'
17+
variant: 'default' | 'newsletter-cta-home' | 'newsletter-cta-article' | 'download'
1818
}

‎src/components/Consent/Checkbox/download.astro‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
/**
3+
* GDPR Consent Component Download Layout
4+
*/
5+
6+
import type { ConsentCheckboxProps } from './@types'
7+
8+
export type Props = Omit<ConsentCheckboxProps, 'variant'>
9+
10+
const {
11+
purpose,
12+
privacyPolicyUrl,
13+
cookiePolicyUrl,
14+
name,
15+
id,
16+
formId,
17+
} = Astro.props
18+
---
19+
20+
<div
21+
class="pt-2 border-t border-(--color-blue-500) mb-4"
22+
id={`${id}-container`}
23+
data-component="gdpr-consent"
24+
data-purpose={purpose}
25+
data-form-id={formId}
26+
>
27+
<label class="flex items-start gap-2 cursor-pointer mt-2">
28+
<input
29+
type="checkbox"
30+
name={name}
31+
id={id}
32+
value="true"
33+
aria-labelledby={`${id}-label`}
34+
aria-describedby={`${id}-description`}
35+
aria-invalid="false"
36+
class="relative h-4 w-4 shrink-0 appearance-none rounded border border-(--color-blue-300) bg-blue-800/40
37+
outline-none hover:border-(--color-blue-200) hover:bg-blue-700/40 focus:outline-none
38+
focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0
39+
checked:border-white checked:bg-white checked:after:content-[''] checked:after:absolute
40+
checked:after:inset-0.75 checked:after:rounded-xs checked:after:bg-blue-700
41+
after:pointer-events-none after:absolute after:inset-0 after:border-2 after:border-transparent
42+
focus-visible:after:-inset-1 focus-visible:after:border-white mt-1"
43+
/>
44+
<span id={`${id}-label`} class="sr-only">Consent to data processing</span>
45+
<span id={`${id}-description`} class="text-sm text-(--color-blue-100) leading-tight ml-2">
46+
I consent to Webstack Builders processing my personal data for {purpose}. See our{' '}
47+
<a
48+
href={privacyPolicyUrl}
49+
class="text-white underline decoration-current hover:text-(--color-blue-100) focus-visible:text-(--color-blue-100)"
50+
>
51+
Privacy Policy
52+
</a>{' '}
53+
and{' '}
54+
<a
55+
href={cookiePolicyUrl}
56+
class="text-white underline decoration-current hover:text-(--color-blue-100) focus-visible:text-(--color-blue-100)"
57+
>
58+
Cookie Policy
59+
</a>
60+
.
61+
</span>
62+
</label>
63+
64+
<div
65+
class="bg-danger-offset text-danger text-sm rounded mt-2 p-2 hidden"
66+
id={`${id}-error`}
67+
role="alert"
68+
aria-live="assertive"
69+
>
70+
</div>
71+
72+
<input
73+
type="hidden"
74+
name={name}
75+
value="true"
76+
id={`${id}-hidden`}
77+
data-consent-hidden="true"
78+
disabled
79+
/>
80+
81+
<input
82+
type="hidden"
83+
name="DataSubjectId"
84+
value=""
85+
id={`${id}-data-subject-id`}
86+
data-consent-data-subject-id="true"
87+
disabled
88+
/>
89+
</div>

‎src/components/Consent/Checkbox/index.astro‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import type { ConsentCheckboxProps } from './@types'
1717
export type Props = ConsentCheckboxProps
1818
1919
import DefaultCheckbox from './default.astro'
20+
import DownloadCheckbox from './download.astro'
2021
import NewsletterCtaArticleCheckbox from './newsletter-cta-article.astro'
2122
import NewsletterCtaHomeCheckbox from './newsletter-cta-home.astro'
2223
@@ -68,6 +69,16 @@ const optionalProps = {
6869
{...optionalProps}
6970
/>
7071
)}
72+
{variant === 'download' && (
73+
<DownloadCheckbox
74+
purpose={purpose}
75+
privacyPolicyUrl={privacyPolicyUrl}
76+
cookiePolicyUrl={cookiePolicyUrl}
77+
name={name}
78+
id={id}
79+
{...optionalProps}
80+
/>
81+
)}
7182
</consent-checkbox>
7283

7384
<script>

‎src/components/Icon/icons/book.astro‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
}
10+
11+
const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
12+
---
13+
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
17+
fill="none"
18+
stroke="currentColor"
19+
viewBox="0 0 24 24"
20+
aria-hidden={accessible ? "false" : "true"}
21+
focusable={focusable ? "true" : "false"}
22+
>
23+
{accessible && <title>User Avatar Icon</title>}
24+
<path
25+
stroke-linecap="round"
26+
stroke-linejoin="round"
27+
stroke-width="2"
28+
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
29+
></path>
30+
</svg>

‎src/components/Icon/icons/file.astro‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
accessible: boolean
7+
focusable: boolean
8+
isListMarker?: boolean
9+
}
10+
11+
const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
12+
---
13+
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
17+
fill="none"
18+
stroke="currentColor"
19+
viewBox="0 0 24 24"
20+
aria-hidden={accessible ? "false" : "true"}
21+
focusable={focusable ? "true" : "false"}
22+
>
23+
{accessible && <title>User Avatar Icon</title>}
24+
<path
25+
stroke-linecap="round"
26+
stroke-linejoin="round"
27+
stroke-width="2"
28+
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
29+
></path>
30+
</svg>

‎src/components/List/layouts/CheckIconsList.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const emClass = ["text-content font-semibold not-italic", classes?.em]
2727
<li class:list={liClass}>
2828
<Icon
2929
icon="check-stylized"
30-
color={"text-success"}
30+
color="text-success"
3131
size={5}
3232
classes={"mt-1"}
3333
/>

‎src/components/List/layouts/DownloadPageList.astro‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
---
2+
import Icon from "@components/Icon/index.astro"
3+
24
export type Props = {
35
items: {
46
text: string
@@ -7,14 +9,15 @@ export type Props = {
79
810
const { items } = Astro.props
911
10-
const ulClass = ["list-disc pl-0 space-y-3 mb-0 mt-2"]
12+
const ulClass = ["space-y-3 ml-4 mr-4 md:mr-20 my-4"]
1113
const liClass = ["flex items-start gap-3"]
1214
---
1315

1416
<ul class:list={ulClass}>
1517
{
1618
items.map(({ text }) => (
1719
<li class:list={liClass}>
20+
<Icon icon="check-stylized" size={6} color="success" />
1821
<span>{text}</span>
1922
</li>
2023
))

‎src/components/Pages/Download/client/__tests__/__fixtures__/downloadForm.fixture.astro‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,45 @@
11
---
2-
import DownloadFormComponent from '../../../index.astro'
3-
const props = {
4-
title: 'Test Resource',
5-
fileName: 'test-resource',
6-
fileType: 'PDF',
7-
}
82
---
93

10-
<DownloadFormComponent {...props} />
4+
<download-form>
5+
<form id="downloadForm" method="post" data-download-url="/downloads/test-resource.pdf">
6+
<div>
7+
<label for="firstName">First Name</label>
8+
<input id="firstName" name="firstName" type="text" required />
9+
</div>
10+
11+
<div>
12+
<label for="lastName">Last Name</label>
13+
<input id="lastName" name="lastName" type="text" required />
14+
</div>
15+
16+
<div>
17+
<label for="workEmail">Work Email</label>
18+
<input id="workEmail" name="workEmail" type="email" required />
19+
</div>
20+
21+
<div>
22+
<label for="jobTitle">Job Title</label>
23+
<input id="jobTitle" name="jobTitle" type="text" />
24+
</div>
25+
26+
<div>
27+
<label for="companyName">Company Name</label>
28+
<input id="companyName" name="companyName" type="text" />
29+
</div>
30+
31+
<button id="downloadSubmitBtn" type="submit">Download Now</button>
32+
33+
<div id="downloadButtonWrapper" class="hidden">
34+
<a href="/downloads/test-resource.pdf">Download PDF</a>
35+
</div>
36+
37+
<div
38+
id="downloadFormStatus"
39+
class="hidden"
40+
role="status"
41+
aria-live="polite"
42+
aria-atomic="true"
43+
></div>
44+
</form>
45+
</download-form>

0 commit comments

Comments
 (0)