Skip to content

Commit 174d22f

Browse files
webstackdevwebstackdev
committed
More styles for consent form
1 parent c039c2b commit 174d22f

16 files changed

Lines changed: 328 additions & 187 deletions

File tree

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
viewBox="0 0 24 24"
17+
class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
18+
fill="currentColor"
19+
stroke="none"
20+
aria-hidden={accessible ? "false" : "true"}
21+
focusable={focusable ? "true" : "false"}
22+
role="img"
23+
>
24+
{accessible && <title>error icon</title>}
25+
<path style="stroke-width:1" d="M 12,0 C 5.37,0 0,5.37 0,12 0,18.63 5.37,24 12,24 18.63,24 24,18.63 24,12 24,5.37 18.63,0 12,0 Z M 18.38,16.62 16.61,18.39 12,13.77 7.38,18.39 5.61,16.62 10.23,12 5.62,7.38 7.39,5.61 12,10.23 16.62,5.61 18.39,7.38 13.77,12 Z" />
26+
</svg>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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="currentColor"
18+
stroke="none"
19+
viewBox="0 0 24 24"
20+
aria-hidden={accessible ? "false" : "true"}
21+
focusable={focusable ? "true" : "false"}
22+
>
23+
{accessible && <title>wrench icon</title>}
24+
<path style="stroke-width:0.447763" d="m 1.1928772,22.818537 c 1.653633,1.653633 3.9386116,1.563409 5.7325288,-0.220478 1.4331099,-1.43311 4.409613,-6.494174 6.995264,-9.079825 1.723753,-1.723753 3.62791,-0.811749 5.542141,-1.593454 L 17.759028,5.71122 C 17.54858,4.9395455 17.859234,4.2981699 18.751226,4.0576318 L 22.5093,3.0554489 C 22.38903,2.7046715 22.058357,2.2235951 21.647491,1.802698 19.332467,-0.51299723 15.504094,-0.6025498 13.219116,1.5621789 9.8918796,4.7391269 12.417351,8.096408 10.222597,10.291208 7.4665722,13.047232 3.4578409,14.991463 1.4133556,17.076023 -0.38056152,18.87997 -0.48077089,21.144889 1.1928772,22.818537 Z M 13.650087,7.6254063 c -0.220479,0.060135 -0.400927,-0.050105 -0.481076,-0.2906429 -0.06014,-0.1803589 0.07016,-0.4008373 0.280613,-0.4610166 l 2.335128,-0.6313457 c 0.190389,-0.050105 0.410867,0.07012 0.471002,0.280613 0.06014,0.2305084 -0.07016,0.430927 -0.280613,0.4910615 z m 6.92519,3.8183417 c 0.380733,-0.230507 0.78157,-0.53118 1.192482,-0.922033 1.262871,-1.1424664 1.914142,-2.866219 1.653678,-4.0888803 l -3.036638,0.8317642 c -0.340702,0.090224 -0.621316,0.1102389 -0.942093,0.060179 z M 13.950716,8.8179778 c -0.220479,0.06018 -0.410868,-0.050059 -0.491062,-0.290598 -0.06014,-0.1804037 0.07011,-0.4008821 0.280613,-0.4509868 L 16.07535,7.4350175 c 0.190433,-0.04012 0.410912,0.07012 0.471047,0.280613 0.07011,0.2304635 -0.07016,0.430927 -0.280614,0.4910168 z m 0.290642,1.1926162 c -0.210494,0.06014 -0.420897,-0.050103 -0.471047,-0.2806127 -0.0501,-0.2104486 0.07016,-0.4008373 0.280614,-0.4609719 l 2.325098,-0.6213605 c 0.220478,-0.070165 0.430927,0.060089 0.481031,0.2605532 0.04011,0.2004634 -0.08015,0.4209419 -0.270583,0.4710465 z M 2.7663158,21.255173 c -0.6814949,-0.68154 -0.6915249,-1.824007 -0.02006,-2.505502 0.6814951,-0.701511 1.8139769,-0.671465 2.515487,-0.01006 0.7216147,0.681495 0.6514502,1.803947 -0.00999,2.515532 -0.6313904,0.69148 -1.8139768,0.67142 -2.4854421,0 z" />
25+
</svg>

‎src/components/List/index.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import NumberedWithBackgroundList from '@components/List/layouts/NumberedWithBac
99
import PlainIconList from '@components/List/layouts/PlainIconList.astro'
1010
import SideBySideList from '@components/List/layouts/SideBySideList.astro'
1111
import TimelineList from '@components/List/layouts/TimelineList.astro'
12+
import ThreeColumnIconList from '@components/List/layouts/ThreeColumnIconList.astro'
1213
import TwoColumnCheckIconsList from '@components/List/layouts/TwoColumnCheckIconsList.astro'
1314
import TwoColumnIconList from '@components/List/layouts/TwoColumnIconList.astro'
1415
import ZebraList from '@components/List/layouts/ZebraList.astro'
@@ -70,4 +71,5 @@ const itemsWithIconAndColor = items as Array<{
7071
{variant === 'timeline-list' && <TimelineList items={items} {...classesProps} />}
7172
{variant === 'two-column-check-icons-list' && <TwoColumnCheckIconsList items={items} {...classesProps} {...sizeProps} />}
7273
{variant === 'two-column-icon-list' && <TwoColumnIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
74+
{variant === 'three-column-icon-list' && <ThreeColumnIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
7375
{variant === 'zebra-list' && <ZebraList items={items} {...classesProps} />}

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
import Icon from "@components/Icon/index.astro"
3+
4+
export type Props = {
5+
items: {
6+
title?: string
7+
text: string
8+
icon?: string
9+
color: string
10+
bgColor?: string
11+
inverseColor?: string
12+
}[]
13+
classes?: {
14+
ul?: string
15+
li?: string
16+
icon?: string
17+
header?: string
18+
content?: string
19+
em?: string
20+
text?: string
21+
}
22+
size?: number
23+
}
24+
25+
const { items, classes, size }: Props = Astro.props
26+
27+
const ulClass = ["grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", classes?.ul].filter(Boolean).join(" ")
28+
const liClass = ["flex items-start gap-2 bg-white dark:bg-gray-800 rounded-xl p-6 shadow-md", classes?.li].filter(Boolean).join(" ")
29+
const iconWrapper = ["shrink-0 rounded-lg flex items-center justify-center mt-1", classes?.icon].filter(Boolean).join(" ")
30+
const contentWrapper = ["text-page-inverse mb-1 ml-2", classes?.content].filter(Boolean).join(" ")
31+
const headerClass = ["font-sans text-lg font-semibold text-content mt-0 mb-2", classes?.header].filter(Boolean).join(" ")
32+
const textClass = ["text-sm text-note-offset", classes?.text].filter(Boolean).join(" ")
33+
---
34+
35+
<ul class={ulClass}>
36+
{
37+
items.map((item) => {
38+
const icon = item.icon ?? "check"
39+
40+
return (
41+
<li class={liClass}>
42+
<div class:list={[iconWrapper, item.bgColor ? `bg-${item.bgColor}` : ""].filter(Boolean).join(" ")}>
43+
<Icon
44+
icon={icon}
45+
color={item.color}
46+
size={size ?? 6}
47+
/>
48+
</div>
49+
<div class={contentWrapper}>
50+
<h3 class={headerClass}>{item.title}</h3>
51+
<p class={textClass}>{item.text}</p>
52+
</div>
53+
</li>
54+
)
55+
})
56+
}
57+
</ul>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ const ulClass = ["grid grid-cols-1 md:grid-cols-2 gap-6", classes?.ul].filter(Bo
2828
const liClass = ["flex items-start gap-2", classes?.li].filter(Boolean).join(" ")
2929
const iconWrapper = ["shrink-0 rounded-lg flex items-center justify-center mt-1", classes?.icon].filter(Boolean).join(" ")
3030
const contentWrapper = ["text-page-inverse mb-1 ml-2", classes?.content].filter(Boolean).join(" ")
31-
const headerClass = ["font-sans text-xl text-content", classes?.header].filter(Boolean).join(" ")
32-
const textClass = ["text-sm text-content-offset", classes?.text].filter(Boolean).join(" ")
31+
const headerClass = ["font-sans text-xl text-content mt-1 mb-1", classes?.header].filter(Boolean).join(" ")
32+
const textClass = ["text-sm text-note-offset", classes?.text].filter(Boolean).join(" ")
3333
---
3434

3535
<ul class={ulClass}>
@@ -39,7 +39,7 @@ const textClass = ["text-sm text-content-offset", classes?.text].filter(Boolean)
3939

4040
return (
4141
<li class={liClass}>
42-
<div class={[iconWrapper, item.bgColor ? `bg-${item.bgColor}` : ""].filter(Boolean).join(" ")}>
42+
<div class:list={[iconWrapper, item.bgColor ? `bg-${item.bgColor}` : ""].filter(Boolean).join(" ")}>
4343
<Icon
4444
icon={icon}
4545
color={item.color}

‎src/components/Pages/Consent/client/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ export class ConsentPreferencesElement extends LitElement {
3434
static registeredName = COMPONENT_TAG_NAME
3535

3636
private static readonly saveButtonDisabledClasses = [
37-
'bg-gray-300',
37+
'bg-secondary',
3838
'cursor-not-allowed',
39-
'hover:bg-gray-300',
39+
'hover:bg-secondary',
4040
]
4141

42-
private static readonly saveButtonEnabledClasses = ['bg-spotlight', 'hover:bg-spotlight-offset']
42+
private static readonly saveButtonEnabledClasses = ['bg-page-inverse', 'hover:bg-secondary-offset']
4343

4444
private allowAllBtn!: HTMLButtonElement
4545
private denyAllBtn!: HTMLButtonElement

0 commit comments

Comments
 (0)