@kickstartds/ds-agency-premium 1.6.68--canary.44.1633.0 → 1.6.68--canary.44.1638.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/BlogAsideProps-d9decb7c.d.ts +1 -1
- package/dist/{BlogAuthorProps-88a11566.d.ts → BlogAuthorProps-9320ef58.d.ts} +6 -1
- package/dist/components/blog-aside/blog-aside.schema.dereffed.json +9 -1
- package/dist/components/blog-author/blog-author.schema.dereffed.json +9 -1
- package/dist/components/blog-author/index.d.ts +1 -1
- package/dist/components/blog-post/blog-post.schema.dereffed.json +9 -1
- package/dist/components/contact/contact.schema.dereffed.json +10 -2
- package/dist/components/contact/contact.schema.json +8 -2
- package/dist/components/contact/index.d.ts +5 -0
- package/dist/components/contact/index.js +1 -1
- package/dist/components/feature/index.js +1 -1
- package/dist/components/header/header.css +1 -0
- package/dist/components/nav-dropdown/nav-dropdown.css +5 -3
- package/dist/components/nav-flyout/index.js +2 -2
- package/dist/components/nav-flyout/nav-flyout.css +15 -7
- package/dist/components/nav-toggle/index.js +1 -1
- package/dist/components/nav-topbar/index.js +2 -2
- package/dist/components/nav-topbar/nav-topbar.css +15 -4
- package/dist/components/page-wrapper/tokens.css +1 -1
- package/dist/components/presets.json +42 -28
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +1 -1
- package/dist/tokens/tokens.js +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
|
4
4
|
* and run json-schema-to-typescript to regenerate this file.
|
|
5
5
|
*/
|
|
6
|
-
import { BlogAuthorProps } from "./BlogAuthorProps-
|
|
6
|
+
import { BlogAuthorProps } from "./BlogAuthorProps-9320ef58.js";
|
|
7
7
|
/**
|
|
8
8
|
* The icon name for the social link
|
|
9
9
|
*/
|
|
@@ -31,6 +31,10 @@ type AspectRatio = "wide" | "square" | "vertical";
|
|
|
31
31
|
* Open link in new Tab
|
|
32
32
|
*/
|
|
33
33
|
type OpenLinkInNewTab = boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Aria label for the link
|
|
36
|
+
*/
|
|
37
|
+
type AriaLabel = string;
|
|
34
38
|
/**
|
|
35
39
|
* The author of the blog post
|
|
36
40
|
*/
|
|
@@ -48,6 +52,7 @@ interface BlogAuthorProps {
|
|
|
48
52
|
label?: string;
|
|
49
53
|
href?: string;
|
|
50
54
|
newTab?: OpenLinkInNewTab;
|
|
55
|
+
ariaLabel?: AriaLabel;
|
|
51
56
|
}[];
|
|
52
57
|
}
|
|
53
|
-
export { Name, Byline, ImageSource, AltText, FullWidth, AspectRatio, OpenLinkInNewTab, BlogAuthorProps };
|
|
58
|
+
export { Name, Byline, ImageSource, AltText, FullWidth, AspectRatio, OpenLinkInNewTab, AriaLabel, BlogAuthorProps };
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"title": "Alt Text",
|
|
46
46
|
"description": "Alt text of the image",
|
|
47
47
|
"examples": [
|
|
48
|
-
"Picture of
|
|
48
|
+
"Picture of Isabella Doe"
|
|
49
49
|
]
|
|
50
50
|
},
|
|
51
51
|
"fullWidth": {
|
|
@@ -89,6 +89,14 @@
|
|
|
89
89
|
"description": "Open link in new Tab",
|
|
90
90
|
"type": "boolean",
|
|
91
91
|
"default": false
|
|
92
|
+
},
|
|
93
|
+
"ariaLabel": {
|
|
94
|
+
"title": "Aria Label",
|
|
95
|
+
"description": "Aria label for the link",
|
|
96
|
+
"type": "string",
|
|
97
|
+
"examples": [
|
|
98
|
+
"Link to Isabella Doe's social media profile"
|
|
99
|
+
]
|
|
92
100
|
}
|
|
93
101
|
},
|
|
94
102
|
"additionalProperties": false
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"title": "Alt Text",
|
|
39
39
|
"description": "Alt text of the image",
|
|
40
40
|
"examples": [
|
|
41
|
-
"Picture of
|
|
41
|
+
"Picture of Isabella Doe"
|
|
42
42
|
]
|
|
43
43
|
},
|
|
44
44
|
"fullWidth": {
|
|
@@ -82,6 +82,14 @@
|
|
|
82
82
|
"description": "Open link in new Tab",
|
|
83
83
|
"type": "boolean",
|
|
84
84
|
"default": false
|
|
85
|
+
},
|
|
86
|
+
"ariaLabel": {
|
|
87
|
+
"title": "Aria Label",
|
|
88
|
+
"description": "Aria label for the link",
|
|
89
|
+
"type": "string",
|
|
90
|
+
"examples": [
|
|
91
|
+
"Link to Isabella Doe's social media profile"
|
|
92
|
+
]
|
|
85
93
|
}
|
|
86
94
|
},
|
|
87
95
|
"additionalProperties": false
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
|
-
import { BlogAuthorProps } from "../../BlogAuthorProps-
|
|
3
|
+
import { BlogAuthorProps } from "../../BlogAuthorProps-9320ef58.js";
|
|
4
4
|
declare const BlogAuthorContextDefault: import("react").ForwardRefExoticComponent<BlogAuthorProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const BlogAuthorContext: import("react").Context<import("react").ForwardRefExoticComponent<BlogAuthorProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const BlogAuthor: import("react").ForwardRefExoticComponent<BlogAuthorProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
"title": "Alt Text",
|
|
134
134
|
"description": "Alt text of the image",
|
|
135
135
|
"examples": [
|
|
136
|
-
"Picture of
|
|
136
|
+
"Picture of Isabella Doe"
|
|
137
137
|
]
|
|
138
138
|
},
|
|
139
139
|
"fullWidth": {
|
|
@@ -177,6 +177,14 @@
|
|
|
177
177
|
"description": "Open link in new Tab",
|
|
178
178
|
"type": "boolean",
|
|
179
179
|
"default": false
|
|
180
|
+
},
|
|
181
|
+
"ariaLabel": {
|
|
182
|
+
"title": "Aria Label",
|
|
183
|
+
"description": "Aria label for the link",
|
|
184
|
+
"type": "string",
|
|
185
|
+
"examples": [
|
|
186
|
+
"Link to Isabella Doe's social media profile"
|
|
187
|
+
]
|
|
180
188
|
}
|
|
181
189
|
},
|
|
182
190
|
"additionalProperties": false
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"title": "Alt Text",
|
|
23
23
|
"description": "Alt text of the image",
|
|
24
24
|
"examples": [
|
|
25
|
-
"Picture of
|
|
25
|
+
"Picture of Isabella Doe"
|
|
26
26
|
]
|
|
27
27
|
},
|
|
28
28
|
"fullWidth": {
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"description": "Name, company name, etc.",
|
|
51
51
|
"type": "string",
|
|
52
52
|
"examples": [
|
|
53
|
-
"
|
|
53
|
+
"Isabella Doe"
|
|
54
54
|
]
|
|
55
55
|
},
|
|
56
56
|
"subtitle": {
|
|
@@ -82,6 +82,14 @@
|
|
|
82
82
|
"description": "Open link in new Tab",
|
|
83
83
|
"type": "boolean",
|
|
84
84
|
"default": false
|
|
85
|
+
},
|
|
86
|
+
"ariaLabel": {
|
|
87
|
+
"title": "Aria Label",
|
|
88
|
+
"description": "Aria label for the link",
|
|
89
|
+
"type": "string",
|
|
90
|
+
"examples": [
|
|
91
|
+
"Link to Isabella Doe's social media profile"
|
|
92
|
+
]
|
|
85
93
|
}
|
|
86
94
|
},
|
|
87
95
|
"additionalProperties": false
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"type": "string",
|
|
20
20
|
"title": "Alt Text",
|
|
21
21
|
"description": "Alt text of the image",
|
|
22
|
-
"examples": ["Picture of
|
|
22
|
+
"examples": ["Picture of Isabella Doe"]
|
|
23
23
|
},
|
|
24
24
|
"fullWidth": {
|
|
25
25
|
"type": "boolean",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"title": "Title",
|
|
41
41
|
"description": "Name, company name, etc.",
|
|
42
42
|
"type": "string",
|
|
43
|
-
"examples": ["
|
|
43
|
+
"examples": ["Isabella Doe"]
|
|
44
44
|
},
|
|
45
45
|
"subtitle": {
|
|
46
46
|
"title": "Subtitle",
|
|
@@ -69,6 +69,12 @@
|
|
|
69
69
|
"description": "Open link in new Tab",
|
|
70
70
|
"type": "boolean",
|
|
71
71
|
"default": false
|
|
72
|
+
},
|
|
73
|
+
"ariaLabel": {
|
|
74
|
+
"title": "Aria Label",
|
|
75
|
+
"description": "Aria label for the link",
|
|
76
|
+
"type": "string",
|
|
77
|
+
"examples": ["Link to Isabella Doe's social media profile"]
|
|
72
78
|
}
|
|
73
79
|
},
|
|
74
80
|
"additionalProperties": false
|
|
@@ -34,6 +34,10 @@ type Subtitle = string;
|
|
|
34
34
|
* Open link in new Tab
|
|
35
35
|
*/
|
|
36
36
|
type OpenLinkInNewTab = boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Aria label for the link
|
|
39
|
+
*/
|
|
40
|
+
type AriaLabel = string;
|
|
37
41
|
type CopyText = string;
|
|
38
42
|
/**
|
|
39
43
|
* Additional css classes attached to the wrapping element
|
|
@@ -60,6 +64,7 @@ interface ContactProps {
|
|
|
60
64
|
label?: string;
|
|
61
65
|
href?: string;
|
|
62
66
|
newTab?: OpenLinkInNewTab;
|
|
67
|
+
ariaLabel?: AriaLabel;
|
|
63
68
|
}[];
|
|
64
69
|
copy?: CopyText;
|
|
65
70
|
className?: Class;
|
|
@@ -9,7 +9,7 @@ import { Icon } from '@kickstartds/base/lib/icon';
|
|
|
9
9
|
import { RichText } from '@kickstartds/base/lib/rich-text';
|
|
10
10
|
import { Container } from '@kickstartds/core/lib/container';
|
|
11
11
|
|
|
12
|
-
const ContactContextDefault = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src
|
|
12
|
+
const ContactContextDefault = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src && (jsx("div", { className: "dsa-contact__image-wrap", children: jsx(Picture, { src: image?.src, alt: image?.alt, className: "dsa-contact__image" }) })), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" }), links && links.length && (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, href, label, ariaLabel, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", "aria-label": ariaLabel, href: href, ...(newTab && { target: "_blank", rel: "noopener" }), children: [jsx(Icon, { role: "presentation", focusable: "false", "aria-hidden": true, icon: icon }), label] }) }, i))) }))] })] }) })));
|
|
13
13
|
const ContactContext = createContext(ContactContextDefault);
|
|
14
14
|
const Contact = forwardRef((props, ref) => {
|
|
15
15
|
const Component = useContext(ContactContext);
|
|
@@ -16,7 +16,7 @@ const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon,
|
|
|
16
16
|
? `intext dsa-feature--small`
|
|
17
17
|
: style === `centered`
|
|
18
18
|
? `centered dsa-feature--large`
|
|
19
|
-
: `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && (jsx(Icon, { className: "dsa-feature__icon", icon: icon, role: "presentation", "aria-hidden": true, focusable: false })), jsx("span", { className: "dsa-feature__title", children: title })] }), text || cta.style === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [text, cta.style === "intext" && cta.toggle ? (jsxs(Fragment, { children: [" ", " ", jsx(Link, { href: cta.target, children: cta.label ? cta.label : "See more" })] })) : ("")] })) : (""), cta.toggle && (cta.style === "link" || cta.style === "button") && (jsx("div", { className: "dsa-feature__cta", children: cta.style === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: cta.target, children: [cta.label ? cta.label : "See more", jsx(Icon, { "aria-hidden": true, role: "presentation", icon: cta.icon || "arrow-right" })] })) : cta.style === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", target: cta.target, label: cta.label ? cta.label : "See more" })) : ("") }))] })));
|
|
19
|
+
: `${style}`}`), children: [jsxs("div", { className: "dsa-feature__header", children: [icon && (jsx(Icon, { className: "dsa-feature__icon", icon: icon, role: "presentation", "aria-hidden": true, focusable: false })), jsx("span", { className: "dsa-feature__title", children: title })] }), text || cta.style === "intext" ? (jsxs("p", { className: "dsa-feature__text", children: [text, cta.style === "intext" && cta.toggle ? (jsxs(Fragment, { children: [" ", " ", jsx(Link, { href: cta.target, children: cta.label ? cta.label : "See more" })] })) : ("")] })) : (""), cta.toggle && (cta.style === "link" || cta.style === "button") && (jsx("div", { className: "dsa-feature__cta", children: cta.style === "link" ? (jsxs(Link, { className: "dsa-feature__link", href: cta.target, children: [cta.label ? cta.label : "See more", jsx(Icon, { "aria-hidden": true, role: "presentation", focusable: false, icon: cta.icon || "arrow-right" })] })) : cta.style === "button" ? (jsx(Button, { className: "dsa-feature__button", size: "small", target: cta.target, label: cta.label ? cta.label : "See more" })) : ("") }))] })));
|
|
20
20
|
const FeatureContext = createContext(FeatureContextDefault);
|
|
21
21
|
const Feature = forwardRef((props, ref) => {
|
|
22
22
|
const Component = useContext(FeatureContext);
|
|
@@ -54,6 +54,7 @@
|
|
|
54
54
|
height: 100vh;
|
|
55
55
|
}
|
|
56
56
|
.dsa-header--floating {
|
|
57
|
+
width: calc(100vw - var(--dsa-header_floating--spacing-horizontal) * 2);
|
|
57
58
|
max-width: calc(var(--dsa-header--max-width) + var(--dsa-header_floating--spacing-horizontal) * 2);
|
|
58
59
|
top: 10px;
|
|
59
60
|
padding: var(--dsa-header--spacing-vertical) 0;
|
|
@@ -9,13 +9,14 @@
|
|
|
9
9
|
--dsa-nav-dropdown__label--color_hover: var(--ks-text-color-interface-interactive-hover);
|
|
10
10
|
--dsa-nav-dropdown__label--color_active: var(--ks-text-color-interface-interactive-active);
|
|
11
11
|
--dsa-nav-dropdown__label--background-color_hover: var(--ks-color-fg-alpha-8);
|
|
12
|
+
--dsa-nav-dropdown__label--background-color_active: unset;
|
|
12
13
|
--dsa-nav-dropdown__label--border-radius: var(--ks-border-radius-control);
|
|
13
14
|
--dsa-nav-dropdown__label--font: var(--ks-font-interface-m);
|
|
14
|
-
--dsa-nav-dropdown__label
|
|
15
|
+
--dsa-nav-dropdown__label--font-family: var(--ks-font-family-display);
|
|
15
16
|
--dsa-nav-dropdown__label--font-weight: var(--ks-font-weight-semi-bold);
|
|
16
17
|
--dsa-nav-dropdown__label--font-weight_active: var(--ks-font-weight-bold);
|
|
17
18
|
--dsa-nav-dropdown__label--padding: 0.45em 0.75em;
|
|
18
|
-
--dsa-nav-dropdown__label_dimmed--opacity:
|
|
19
|
+
--dsa-nav-dropdown__label_dimmed--opacity: 1;
|
|
19
20
|
}
|
|
20
21
|
.dsa-nav-dropdown[ks-inverted=true] {
|
|
21
22
|
--dsa-nav-dropdown--background: var(--ks-color-fg-inverted);
|
|
@@ -42,13 +43,14 @@
|
|
|
42
43
|
}
|
|
43
44
|
.dsa-nav-dropdown .dsa-nav-dropdown__item--active .dsa-nav-dropdown__label {
|
|
44
45
|
color: var(--dsa-nav-dropdown__label--color_active);
|
|
46
|
+
background-color: var(--dsa-nav-dropdown__label--background-color_active);
|
|
45
47
|
font-weight: var(--dsa-nav-dropdown__label--font-weight_active);
|
|
46
48
|
}
|
|
47
49
|
.dsa-nav-dropdown .dsa-nav-dropdown__label {
|
|
48
50
|
text-decoration: var(--dsa-nav-dropdown__label--text-decoration);
|
|
49
51
|
font: inherit;
|
|
50
52
|
font-weight: var(--dsa-nav-dropdown__label--font-weight);
|
|
51
|
-
font-family: var(--dsa-nav-dropdown__label
|
|
53
|
+
font-family: var(--dsa-nav-dropdown__label--font-family);
|
|
52
54
|
color: var(--dsa-nav-dropdown__label--color);
|
|
53
55
|
position: relative;
|
|
54
56
|
display: block;
|
|
@@ -4,8 +4,8 @@ import classnames from 'classnames';
|
|
|
4
4
|
import { Link } from '@kickstartds/base/lib/link';
|
|
5
5
|
import { forwardRef, createContext, useContext } from 'react';
|
|
6
6
|
|
|
7
|
-
const NavFlyoutContextDefault = forwardRef(({ items, inverted }, ref) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "
|
|
8
|
-
return (jsxs("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active"), children: [subItems?.length ? (jsx("span", {
|
|
7
|
+
const NavFlyoutContextDefault = forwardRef(({ items, inverted }, ref) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-flyout", "ks-inverted": inverted.toString(), id: "dsa-nav-flyout", "aria-label": "Main Navigation", ref: ref, children: jsx("ul", { className: "dsa-nav-flyout__list", children: items.map(({ label, href, active, items: subItems }) => {
|
|
8
|
+
return (jsxs("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active"), children: [subItems?.length ? (jsx("span", { className: "dsa-nav-flyout__label", children: label })) : (jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label })), subItems?.length ? (jsx("ul", { className: "dsa-nav-flyout__sublist", children: subItems.map(({ label, href, active }) => {
|
|
9
9
|
return (jsx("li", { className: classnames("dsa-nav-flyout__item", active && "dsa-nav-flyout__item--active"), children: jsx(Link, { href: href, className: `dsa-nav-flyout__label dsa-nav-flyout__link`, children: label }) }, href));
|
|
10
10
|
}) })) : null] }, href));
|
|
11
11
|
}) }) })) : null);
|
|
@@ -11,17 +11,22 @@
|
|
|
11
11
|
--dsa-nav-flyout__label--color: var(--ks-color-fg);
|
|
12
12
|
--dsa-nav-flyout__label--color_hover: var(--ks-text-color-interface-interactive-hover);
|
|
13
13
|
--dsa-nav-flyout__label--color_active: var(--ks-text-color-interface-interactive-active);
|
|
14
|
+
--dsa-nav-flyout__label--background-color_hover: unset;
|
|
15
|
+
--dsa-nav-flyout__label--background-color_active: unset;
|
|
14
16
|
--dsa-nav-flyout__label--font: var(--ks-font-interface-l);
|
|
15
|
-
--dsa-nav-flyout__label
|
|
17
|
+
--dsa-nav-flyout__label--font-family: var(--ks-font-family-display);
|
|
16
18
|
--dsa-nav-flyout__label--font-weight: var(--ks-font-weight-semi-bold);
|
|
17
19
|
--dsa-nav-flyout__label--font-weight_active: var(--ks-font-weight-bold);
|
|
18
20
|
--dsa-nav-flyout__label--padding: 0.25em 0;
|
|
19
21
|
--dsa-nav-flyout__label--text-decoration: none;
|
|
20
22
|
--dsa-nav-flyout__label--text-decoration_hover: none;
|
|
21
23
|
--dsa-nav-flyout__label_dimmed--opacity: 0.8;
|
|
24
|
+
--dsa-nav-flyout__label--transition: var(--ks-transition-hover);
|
|
25
|
+
--dsa-nav-flyout__label--transition-property: background-color, color, opacity;
|
|
22
26
|
--dsa-nav-flyout__sublist--padding: 0.25em 0 0.5em 0.75em;
|
|
23
27
|
--dsa-nav-flyout__sublist__label--color: var(--ks-color-fg);
|
|
24
|
-
--dsa-nav-flyout__sublist__label--font: var(--ks-font-interface-
|
|
28
|
+
--dsa-nav-flyout__sublist__label--font: var(--ks-font-interface-l);
|
|
29
|
+
--dsa-nav-flyout__sublist__label--font-family: var(--ks-font-family-display);
|
|
25
30
|
--dsa-nav-flyout__sublist__label--font-weight: var(--ks-font-weight-semi-bold);
|
|
26
31
|
--dsa-nav-flyout__sublist__label--padding: 0.25em 0;
|
|
27
32
|
}
|
|
@@ -77,28 +82,31 @@
|
|
|
77
82
|
.dsa-nav-flyout .dsa-nav-flyout__item--active.dsa-nav-flyout__item > .dsa-nav-flyout__label {
|
|
78
83
|
font-weight: var(--dsa-nav-flyout__label--font-weight_active);
|
|
79
84
|
color: var(--dsa-nav-flyout__label--color_active);
|
|
80
|
-
|
|
81
|
-
.dsa-nav-flyout .dsa-nav-flyout__item:hover > .dsa-nav-sublist {
|
|
82
|
-
display: flex;
|
|
85
|
+
background-color: var(--dsa-nav-flyout__label--background-color_active);
|
|
83
86
|
}
|
|
84
87
|
.dsa-nav-flyout .dsa-nav-flyout__label {
|
|
85
88
|
text-decoration: var(--dsa-nav-flyout__label--text-decoration);
|
|
86
|
-
display:
|
|
89
|
+
display: block;
|
|
90
|
+
width: fit-content;
|
|
87
91
|
font: var(--dsa-nav-flyout__label--font);
|
|
88
|
-
font-family: var(--dsa-nav-flyout__label
|
|
92
|
+
font-family: var(--dsa-nav-flyout__label--font-family);
|
|
89
93
|
font-weight: var(--dsa-nav-flyout__label--font-weight);
|
|
90
94
|
color: var(--dsa-nav-flyout__label--color);
|
|
91
95
|
height: 100%;
|
|
92
96
|
align-items: center;
|
|
93
97
|
padding: var(--dsa-nav-flyout__label--padding);
|
|
98
|
+
transition: var(--dsa-nav-flyout__label--transition);
|
|
99
|
+
transition-property: var(--dsa-nav-flyout__label--transition-property);
|
|
94
100
|
}
|
|
95
101
|
.dsa-nav-flyout .dsa-nav-flyout__label:hover, .dsa-nav-flyout .dsa-nav-flyout__label:focus, .dsa-nav-flyout .dsa-nav-flyout__label:active {
|
|
96
102
|
color: var(--dsa-nav-flyout__label--color_hover);
|
|
103
|
+
background-color: var(--dsa-nav-flyout__label--background-color_hover);
|
|
97
104
|
text-decoration: var(--dsa-nav-flyout__label--text-decoration_hover);
|
|
98
105
|
}
|
|
99
106
|
.dsa-nav-flyout .dsa-nav-flyout__sublist {
|
|
100
107
|
padding: var(--dsa-nav-flyout__sublist--padding);
|
|
101
108
|
font: var(--dsa-nav-flyout__sublist__label--font);
|
|
109
|
+
font-family: var(--dsa-nav-flyout__label--font-family);
|
|
102
110
|
font-weight: var(--dsa-nav-flyout__sublist__label--font-weight);
|
|
103
111
|
}
|
|
104
112
|
.dsa-nav-flyout .dsa-nav-flyout__sublist .dsa-nav-flyout__label {
|
|
@@ -2,7 +2,7 @@ import "./nav-toggle.css";
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef, createContext, useContext } from 'react';
|
|
4
4
|
|
|
5
|
-
const NavToggleContextDefault = forwardRef((_, ref) => (jsxs("button", { ref: ref, type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "dsa-nav-
|
|
5
|
+
const NavToggleContextDefault = forwardRef((_, ref) => (jsxs("button", { ref: ref, type: "button", className: "dsa-nav-toggle", id: "toggle-sidebar", "aria-controls": "dsa-nav-flyout", "aria-expanded": "false", "ks-component": "base.nav-toggle", children: [jsx("span", { className: "dsa-nav-toggle__label", children: "Open main navigation" }), jsx("span", { className: "dsa-nav-toggle__icon", children: jsx("span", { className: "dsa-nav-toggle__icon__middle" }) })] })));
|
|
6
6
|
const NavToggleContext = createContext(NavToggleContextDefault);
|
|
7
7
|
const NavToggle = forwardRef((props, ref) => {
|
|
8
8
|
const Component = useContext(NavToggleContext);
|
|
@@ -6,8 +6,8 @@ import { Icon } from '@kickstartds/base/lib/icon';
|
|
|
6
6
|
import { NavDropdown } from '../nav-dropdown/index.js';
|
|
7
7
|
import { forwardRef, createContext, useContext } from 'react';
|
|
8
8
|
|
|
9
|
-
const NavTopbarContextDefault = forwardRef(({ items, inverted }, ref) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-
|
|
10
|
-
return (jsxs("li", { className: classnames("dsa-nav-topbar__item", active && "dsa-nav-topbar__item--active", subItems?.length && "dsa-nav-topbar__item--dropdown"), children: [subItems?.length ? (jsxs("span", {
|
|
9
|
+
const NavTopbarContextDefault = forwardRef(({ items, inverted }, ref) => items && items.length > 0 ? (jsx("nav", { className: "dsa-nav-topbar", id: "dsa-nav-topbar", "aria-label": "Main Navigation", ref: ref, children: jsx("ul", { className: "dsa-nav-topbar__list", children: items.map(({ label, href, active, items: subItems }) => {
|
|
10
|
+
return (jsxs("li", { className: classnames("dsa-nav-topbar__item", active && "dsa-nav-topbar__item--active", subItems?.length && "dsa-nav-topbar__item--dropdown"), children: [subItems?.length ? (jsxs("span", { className: "dsa-nav-topbar__label", children: [label, subItems?.length ? (jsx(Icon, { className: "dsa-nav-topbar__label__icon", icon: "chevron-down", role: "presentation", "aria-hidden": true, focusable: false })) : ("")] })) : (jsx(Link, { href: href, className: `dsa-nav-topbar__label dsa-nav-topbar__link`, children: label })), subItems?.length ? (jsx(NavDropdown, { items: subItems, inverted: inverted })) : null] }, href));
|
|
11
11
|
}) }) })) : null);
|
|
12
12
|
const NavTopbarContext = createContext(NavTopbarContextDefault);
|
|
13
13
|
const NavTopbar = forwardRef((props, ref) => {
|
|
@@ -2,14 +2,19 @@
|
|
|
2
2
|
--dsa-nav-topbar__label--color: var(--ks-color-fg);
|
|
3
3
|
--dsa-nav-topbar__label--color_hover: var(--ks-text-color-interface-interactive-hover);
|
|
4
4
|
--dsa-nav-topbar__label--color_active: var(--ks-text-color-interface-interactive-active);
|
|
5
|
+
--dsa-nav-topbar__label--background-color: transparent;
|
|
6
|
+
--dsa-nav-topbar__label--background-color_hover: var(--ks-color-fg-alpha-8);
|
|
7
|
+
--dsa-nav-topbar__label--background-color_active: transparent;
|
|
5
8
|
--dsa-nav-topbar__label--font: var(--ks-font-interface-m);
|
|
6
|
-
--dsa-nav-topbar__label
|
|
9
|
+
--dsa-nav-topbar__label--font-family: var(--ks-font-family-display);
|
|
7
10
|
--dsa-nav-topbar__label--font-weight: var(--ks-font-weight-semi-bold);
|
|
8
11
|
--dsa-nav-topbar__label--font-weight_active: var(--ks-font-weight-bold);
|
|
9
|
-
--dsa-nav-topbar__label--padding: 0.
|
|
12
|
+
--dsa-nav-topbar__label--padding: 0.45em 0.75em;
|
|
10
13
|
--dsa-nav-topbar__label--text-decoration: none;
|
|
11
14
|
--dsa-nav-topbar__label--text-decoration_hover: none;
|
|
12
|
-
--dsa-nav-topbar__label_dimmed--opacity:
|
|
15
|
+
--dsa-nav-topbar__label_dimmed--opacity: 1;
|
|
16
|
+
--dsa-nav-topbar__label--transition: var(--ks-transition-hover);
|
|
17
|
+
--dsa-nav-topbar__label--transition-property: background-color, color, opacity;
|
|
13
18
|
--dsa-nav-topbar__label__icon--size: 1.5em;
|
|
14
19
|
--dsa-nav-topbar_floating__label_dimmed--opacity: 0.85;
|
|
15
20
|
--dsa-nav-topbar_floating__label--color: var(--ks-color-fg);
|
|
@@ -56,6 +61,7 @@
|
|
|
56
61
|
}
|
|
57
62
|
.dsa-nav-topbar .dsa-nav-topbar__item--active .dsa-nav-topbar__label {
|
|
58
63
|
color: var(--dsa-nav-topbar__label--color_active);
|
|
64
|
+
background-color: var(--dsa-nav-topbar__label--background-color_active);
|
|
59
65
|
font-weight: var(--dsa-nav-topbar__label--font-weight_active);
|
|
60
66
|
}
|
|
61
67
|
.dsa-nav-topbar .dsa-nav-topbar__item:hover > .dsa-nav-dropdown, .dsa-nav-topbar .dsa-nav-topbar__item:focus-within > .dsa-nav-dropdown {
|
|
@@ -67,16 +73,21 @@
|
|
|
67
73
|
.dsa-nav-topbar .dsa-nav-topbar__label {
|
|
68
74
|
display: flex;
|
|
69
75
|
font: var(--dsa-nav-topbar__label--font);
|
|
70
|
-
font-family: var(--dsa-nav-topbar__label
|
|
76
|
+
font-family: var(--dsa-nav-topbar__label--font-family);
|
|
71
77
|
font-weight: var(--dsa-nav-topbar__label--font-weight);
|
|
72
78
|
color: var(--dsa-nav-topbar__label--color);
|
|
79
|
+
background-color: var(--dsa-nav-topbar__label--background-color);
|
|
80
|
+
border-radius: var(--ks-border-radius-control);
|
|
73
81
|
height: 100%;
|
|
74
82
|
align-items: center;
|
|
75
83
|
padding: var(--dsa-nav-topbar__label--padding);
|
|
76
84
|
text-decoration: var(--dsa-nav-topbar__label--text-decoration);
|
|
85
|
+
transition: var(--dsa-nav-topbar__label--transition);
|
|
86
|
+
transition-property: var(--dsa-nav-topbar__label--transition-property);
|
|
77
87
|
}
|
|
78
88
|
.dsa-nav-topbar .dsa-nav-topbar__label:hover, .dsa-nav-topbar .dsa-nav-topbar__label:focus, .dsa-nav-topbar .dsa-nav-topbar__label:active {
|
|
79
89
|
color: var(--dsa-nav-topbar__label--color_hover);
|
|
90
|
+
background-color: var(--dsa-nav-topbar__label--background-color_hover);
|
|
80
91
|
text-decoration: var(--dsa-nav-topbar__label--text-decoration_hover);
|
|
81
92
|
}
|
|
82
93
|
.dsa-header--floating .dsa-nav-topbar .dsa-nav-topbar__label {
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
"id": "blog-blog-aside--default",
|
|
4
4
|
"group": "Blog/ Blog Aside",
|
|
5
5
|
"name": "Default",
|
|
6
|
-
"code": "<BlogAside\n author={{\n byline: 'CEO at Company',\n image: {\n alt: 'Picture of
|
|
6
|
+
"code": "<BlogAside\n author={{\n byline: 'CEO at Company',\n image: {\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n },\n links: [\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: 'tel:+4922868896620',\n icon: 'twitter',\n label: 'jane_smith',\n newTab: false\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: 'mailto:mail@example.com',\n icon: 'email',\n label: 'jane.smith@example.com',\n newTab: false\n }\n ],\n name: 'Jane Smith'\n }}\n date=\"12/30/2022\"\n readingTime=\"5 min read\"\n socialSharing={[\n {\n href: 'https://twitter.com/share?text=The%20Future%20of%20AI&url=https://example.com/blog/the-future-of-ai',\n icon: 'twitter',\n title: 'Share on Twitter'\n },\n {\n href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog/the-future-of-ai&title=The%20Future%20of%20AI&summary=The%20Future%20of%20AI&source=LinkedIn',\n icon: 'linkedin',\n title: 'Share on LinkedIn'\n }\n ]}\n/>",
|
|
7
7
|
"args": {
|
|
8
8
|
"author": {
|
|
9
9
|
"name": "Jane Smith",
|
|
10
10
|
"byline": "CEO at Company",
|
|
11
11
|
"image": {
|
|
12
12
|
"src": "img/people/author-emily.png",
|
|
13
|
-
"alt": "Picture of
|
|
13
|
+
"alt": "Picture of Isabella Doe",
|
|
14
14
|
"fullWidth": false,
|
|
15
15
|
"aspectRatio": "square"
|
|
16
16
|
},
|
|
@@ -19,13 +19,15 @@
|
|
|
19
19
|
"icon": "twitter",
|
|
20
20
|
"label": "jane_smith",
|
|
21
21
|
"href": "tel:+4922868896620",
|
|
22
|
-
"newTab": false
|
|
22
|
+
"newTab": false,
|
|
23
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
23
24
|
},
|
|
24
25
|
{
|
|
25
26
|
"icon": "email",
|
|
26
27
|
"label": "jane.smith@example.com",
|
|
27
28
|
"href": "mailto:mail@example.com",
|
|
28
|
-
"newTab": false
|
|
29
|
+
"newTab": false,
|
|
30
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
29
31
|
}
|
|
30
32
|
]
|
|
31
33
|
},
|
|
@@ -50,13 +52,13 @@
|
|
|
50
52
|
"id": "blog-blog-author--default",
|
|
51
53
|
"group": "Blog/ Blog Author",
|
|
52
54
|
"name": "Default",
|
|
53
|
-
"code": "<BlogAuthor\n byline=\"CEO at Company\"\n image={{\n alt: 'Picture of
|
|
55
|
+
"code": "<BlogAuthor\n byline=\"CEO at Company\"\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n }}\n links={[\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: 'tel:+4922868896620',\n icon: 'twitter',\n label: 'jane_smith',\n newTab: false\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: 'mailto:mail@example.com',\n icon: 'email',\n label: 'jane.smith@example.com',\n newTab: false\n }\n ]}\n name=\"Jane Smith\"\n/>",
|
|
54
56
|
"args": {
|
|
55
57
|
"name": "Jane Smith",
|
|
56
58
|
"byline": "CEO at Company",
|
|
57
59
|
"image": {
|
|
58
60
|
"src": "img/people/author-emily.png",
|
|
59
|
-
"alt": "Picture of
|
|
61
|
+
"alt": "Picture of Isabella Doe",
|
|
60
62
|
"fullWidth": false,
|
|
61
63
|
"aspectRatio": "square"
|
|
62
64
|
},
|
|
@@ -65,13 +67,15 @@
|
|
|
65
67
|
"icon": "twitter",
|
|
66
68
|
"label": "jane_smith",
|
|
67
69
|
"href": "tel:+4922868896620",
|
|
68
|
-
"newTab": false
|
|
70
|
+
"newTab": false,
|
|
71
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
69
72
|
},
|
|
70
73
|
{
|
|
71
74
|
"icon": "email",
|
|
72
75
|
"label": "jane.smith@example.com",
|
|
73
76
|
"href": "mailto:mail@example.com",
|
|
74
|
-
"newTab": false
|
|
77
|
+
"newTab": false,
|
|
78
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
75
79
|
}
|
|
76
80
|
]
|
|
77
81
|
},
|
|
@@ -509,7 +513,7 @@
|
|
|
509
513
|
"id": "page-archetypes-blog-post--blog-post",
|
|
510
514
|
"group": "Page Archetypes/Blog Post",
|
|
511
515
|
"name": "BlogPost",
|
|
512
|
-
"code": "<BlogPost\n aside={{\n author: {\n byline: 'Senior Developer',\n email: 'Jane.doe@example.com',\n image: {\n alt: 'Picture of
|
|
516
|
+
"code": "<BlogPost\n aside={{\n author: {\n byline: 'Senior Developer',\n email: 'Jane.doe@example.com',\n image: {\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n },\n links: [\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: 'tel:+4922868896620',\n icon: 'phone',\n label: '0228 / 688 966 20',\n newTab: false\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: 'mailto:mail@example.com',\n icon: 'email',\n label: 'mail@example.com',\n newTab: false\n }\n ],\n name: 'Jane Doe',\n twitter: 'Janedoe'\n },\n date: '12/30/2022',\n readingTime: '5 min read',\n socialSharing: [\n {\n href: 'https://twitter.com/share?text=This%20is%20a%20blog%20post%20headline&url=https://example.com/blog',\n icon: 'twitter',\n title: 'Share on Twitter'\n },\n {\n href: 'https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/blog&title=This%20is%20a%20blog%20post%20headline',\n icon: 'linkedin',\n title: 'Share on LinkedIn'\n }\n ]\n }}\n contact={{\n copy: 'Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.',\n image: {\n alt: 'Picture of Jane Smith',\n aspectRatio: 'vertical',\n fullWidth: false,\n src: 'img/people/contact-john.png'\n },\n links: [\n {\n href: 'mailto:mail@example.com',\n icon: 'xing',\n label: 'john.smith',\n newTab: false\n },\n {\n href: '#',\n icon: 'twitter',\n label: '@john_smith',\n newTab: false\n }\n ],\n subtitle: 'Sales Representative',\n title: 'John Smith'\n }}\n content=\"\n## Introduction\nThe future of **Artificial Intelligence (AI)** is a topic that has been the subject of much debate. It's a field that's constantly evolving, with new advancements and breakthroughs happening all the time. [Learn more about AI](https://en.wikipedia.org/wiki/Artificial_intelligence)\n\n## The Current State of AI\nToday, AI is already a part of our daily lives. From *smart home devices* to *recommendation algorithms* on our favorite streaming services, AI is everywhere.\n\n## The Potential of AI\nThe potential of AI is immense. It has the ability to revolutionize industries, from healthcare to finance, and everything in between.\n\n## The Challenges of AI\nHowever, with great potential comes great challenges. Issues such as data privacy and the ethical implications of AI are just some of the hurdles that need to be overcome.\n\n## The Role of AI in Society\nAI has the potential to greatly impact society. It can lead to job creation in new industries, and can also help solve complex societal problems.\n\n## Conclusion\nThe future of AI is exciting and full of potential. However, it's important that we navigate this future with caution, ensuring that the benefits of AI are accessible to all, while minimizing its potential risks.\n \"\n cta={{\n align: 'center',\n buttons: [\n {\n icon: 'person',\n label: 'Contact Us',\n target: '#'\n },\n {\n icon: 'date',\n label: 'Learn More',\n target: '#'\n }\n ],\n colorNeutral: false,\n headline: 'Ready to Transform Your Development Process?',\n highlightText: false,\n image: {\n align: 'center',\n padding: true\n },\n inverted: false,\n order: {\n desktopImageLast: true,\n mobileImageLast: false\n },\n padding: false,\n sub: 'Start your journey today.',\n text: 'Get started with our design system today and experience a new level of efficiency and consistency in your projects.',\n textAlign: 'center'\n }}\n head={{\n alt: 'Image of a business team working',\n date: '12/30/2022',\n headline: 'The Future of AI: A Glimpse into the Unseen',\n image: 'img/close-up-young-business-team-working.png',\n tags: [\n {\n entry: 'Technology'\n },\n {\n entry: 'AI'\n }\n ]\n }}\n section={[\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n transition: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n transition: 'default',\n width: 'default'\n },\n {\n backgroundColor: 'default',\n buttons: [\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n },\n {\n disabled: false,\n label: 'Book a meeting',\n size: 'medium',\n variant: 'secondary'\n }\n ],\n content: {\n align: 'center',\n gutter: 'default',\n mode: 'list',\n tileWidth: 'default',\n width: 'unset'\n },\n headerSpacing: false,\n headline: {\n large: false,\n text: 'Section headline',\n width: 'unset'\n },\n inverted: false,\n spaceAfter: 'default',\n spaceBefore: 'default',\n spotlight: false,\n transition: 'default',\n width: 'default'\n }\n ]}\n/>",
|
|
513
517
|
"args": {
|
|
514
518
|
"head": {
|
|
515
519
|
"date": "12/30/2022",
|
|
@@ -531,7 +535,7 @@
|
|
|
531
535
|
"byline": "Senior Developer",
|
|
532
536
|
"image": {
|
|
533
537
|
"src": "img/people/author-emily.png",
|
|
534
|
-
"alt": "Picture of
|
|
538
|
+
"alt": "Picture of Isabella Doe",
|
|
535
539
|
"fullWidth": false,
|
|
536
540
|
"aspectRatio": "square"
|
|
537
541
|
},
|
|
@@ -540,13 +544,15 @@
|
|
|
540
544
|
"icon": "phone",
|
|
541
545
|
"label": "0228 / 688 966 20",
|
|
542
546
|
"href": "tel:+4922868896620",
|
|
543
|
-
"newTab": false
|
|
547
|
+
"newTab": false,
|
|
548
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
544
549
|
},
|
|
545
550
|
{
|
|
546
551
|
"icon": "email",
|
|
547
552
|
"label": "mail@example.com",
|
|
548
553
|
"href": "mailto:mail@example.com",
|
|
549
|
-
"newTab": false
|
|
554
|
+
"newTab": false,
|
|
555
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
550
556
|
}
|
|
551
557
|
],
|
|
552
558
|
"twitter": "Janedoe",
|
|
@@ -759,11 +765,11 @@
|
|
|
759
765
|
"id": "components-contact--wide-image",
|
|
760
766
|
"group": "Components/Contact",
|
|
761
767
|
"name": "WideImage",
|
|
762
|
-
"code": "<Contact\n image={{\n alt: 'Picture of
|
|
768
|
+
"code": "<Contact\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'wide',\n fullWidth: false,\n src: 'img/people/contact-isabella.png'\n }}\n links={[\n {\n ariaLabel: 'Isabella Doe on Twitter',\n href: '#',\n icon: 'twitter',\n label: '@Isabella_Doe',\n newTab: false\n },\n {\n ariaLabel: 'Isabella Doe on LinkedIn',\n href: 'mailto:mail@example.com',\n icon: 'linkedin',\n label: 'Isabella.Doe',\n newTab: false\n }\n ]}\n subtitle=\"Creative Director\"\n title=\"Isabella Doe\"\n/>",
|
|
763
769
|
"args": {
|
|
764
770
|
"image": {
|
|
765
771
|
"src": "img/people/contact-isabella.png",
|
|
766
|
-
"alt": "Picture of
|
|
772
|
+
"alt": "Picture of Isabella Doe",
|
|
767
773
|
"fullWidth": false,
|
|
768
774
|
"aspectRatio": "wide"
|
|
769
775
|
},
|
|
@@ -774,13 +780,15 @@
|
|
|
774
780
|
"icon": "twitter",
|
|
775
781
|
"label": "@Isabella_Doe",
|
|
776
782
|
"href": "#",
|
|
777
|
-
"newTab": false
|
|
783
|
+
"newTab": false,
|
|
784
|
+
"ariaLabel": "Isabella Doe on Twitter"
|
|
778
785
|
},
|
|
779
786
|
{
|
|
780
787
|
"icon": "linkedin",
|
|
781
788
|
"label": "Isabella.Doe",
|
|
782
789
|
"href": "mailto:mail@example.com",
|
|
783
|
-
"newTab": false
|
|
790
|
+
"newTab": false,
|
|
791
|
+
"ariaLabel": "Isabella Doe on LinkedIn"
|
|
784
792
|
}
|
|
785
793
|
]
|
|
786
794
|
},
|
|
@@ -790,11 +798,11 @@
|
|
|
790
798
|
"id": "components-contact--circular-avatar",
|
|
791
799
|
"group": "Components/Contact",
|
|
792
800
|
"name": "CircularAvatar",
|
|
793
|
-
"code": "<Contact\n copy=\"Leads with a vision for innovative, user-centric web designs\"\n image={{\n alt: 'Picture of
|
|
801
|
+
"code": "<Contact\n copy=\"Leads with a vision for innovative, user-centric web designs\"\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'square',\n fullWidth: false,\n src: 'img/people/author-emily.png'\n }}\n links={[\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: '#',\n icon: 'twitter',\n label: '@jane_smith',\n newTab: false\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: 'mailto:mail@example.com',\n icon: 'linkedin',\n label: 'jane.smith',\n newTab: false\n }\n ]}\n subtitle=\"CEO at DS Agency\"\n title=\"Jane Smith\"\n/>",
|
|
794
802
|
"args": {
|
|
795
803
|
"image": {
|
|
796
804
|
"src": "img/people/author-emily.png",
|
|
797
|
-
"alt": "Picture of
|
|
805
|
+
"alt": "Picture of Isabella Doe",
|
|
798
806
|
"fullWidth": false,
|
|
799
807
|
"aspectRatio": "square"
|
|
800
808
|
},
|
|
@@ -805,13 +813,15 @@
|
|
|
805
813
|
"icon": "twitter",
|
|
806
814
|
"label": "@jane_smith",
|
|
807
815
|
"href": "#",
|
|
808
|
-
"newTab": false
|
|
816
|
+
"newTab": false,
|
|
817
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
809
818
|
},
|
|
810
819
|
{
|
|
811
820
|
"icon": "linkedin",
|
|
812
821
|
"label": "jane.smith",
|
|
813
822
|
"href": "mailto:mail@example.com",
|
|
814
|
-
"newTab": false
|
|
823
|
+
"newTab": false,
|
|
824
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
815
825
|
}
|
|
816
826
|
],
|
|
817
827
|
"copy": "Leads with a vision for innovative, user-centric web designs"
|
|
@@ -822,11 +832,11 @@
|
|
|
822
832
|
"id": "components-contact--vertical-image-with-paragraph",
|
|
823
833
|
"group": "Components/Contact",
|
|
824
834
|
"name": "VerticalImageWithParagraph",
|
|
825
|
-
"code": "<Contact\n copy=\"Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.\"\n image={{\n alt: 'Picture of
|
|
835
|
+
"code": "<Contact\n copy=\"Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences.\"\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'vertical',\n fullWidth: false,\n src: 'img/people/contact-john.png'\n }}\n links={[\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: 'mailto:mail@example.com',\n icon: 'xing',\n label: 'john.smith',\n newTab: false\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: '#',\n icon: 'twitter',\n label: '@john_smith',\n newTab: false\n }\n ]}\n subtitle=\"Sales Representative\"\n title=\"John Smith\"\n/>",
|
|
826
836
|
"args": {
|
|
827
837
|
"image": {
|
|
828
838
|
"src": "img/people/contact-john.png",
|
|
829
|
-
"alt": "Picture of
|
|
839
|
+
"alt": "Picture of Isabella Doe",
|
|
830
840
|
"fullWidth": false,
|
|
831
841
|
"aspectRatio": "vertical"
|
|
832
842
|
},
|
|
@@ -837,13 +847,15 @@
|
|
|
837
847
|
"icon": "xing",
|
|
838
848
|
"label": "john.smith",
|
|
839
849
|
"href": "mailto:mail@example.com",
|
|
840
|
-
"newTab": false
|
|
850
|
+
"newTab": false,
|
|
851
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
841
852
|
},
|
|
842
853
|
{
|
|
843
854
|
"icon": "twitter",
|
|
844
855
|
"label": "@john_smith",
|
|
845
856
|
"href": "#",
|
|
846
|
-
"newTab": false
|
|
857
|
+
"newTab": false,
|
|
858
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
847
859
|
}
|
|
848
860
|
],
|
|
849
861
|
"copy": "Leads with a vision for innovative, user-centric web designs, ensuring each project merges creativity with functionality to deliver outstanding digital experiences."
|
|
@@ -854,11 +866,11 @@
|
|
|
854
866
|
"id": "components-contact--full-image-width",
|
|
855
867
|
"group": "Components/Contact",
|
|
856
868
|
"name": "FullImageWidth",
|
|
857
|
-
"code": "<Contact\n copy=\"Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement.\"\n image={{\n alt: 'Picture of
|
|
869
|
+
"code": "<Contact\n copy=\"Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement.\"\n image={{\n alt: 'Picture of Isabella Doe',\n aspectRatio: 'wide',\n fullWidth: true,\n src: 'img/people/contact-jim.png'\n }}\n links={[\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: 'mailto:mail@example.com',\n icon: 'email',\n label: 'jim.johnsson@mail.com',\n newTab: false\n },\n {\n ariaLabel: 'Link to Isabella Doe\\'s social media profile',\n href: '#',\n icon: 'facebook',\n label: '@jim_johnsson',\n newTab: false\n }\n ]}\n subtitle=\"Lead Designer\"\n title=\"Jim Johnsson\"\n/>",
|
|
858
870
|
"args": {
|
|
859
871
|
"image": {
|
|
860
872
|
"src": "img/people/contact-jim.png",
|
|
861
|
-
"alt": "Picture of
|
|
873
|
+
"alt": "Picture of Isabella Doe",
|
|
862
874
|
"fullWidth": true,
|
|
863
875
|
"aspectRatio": "wide"
|
|
864
876
|
},
|
|
@@ -869,13 +881,15 @@
|
|
|
869
881
|
"icon": "email",
|
|
870
882
|
"label": "jim.johnsson@mail.com",
|
|
871
883
|
"href": "mailto:mail@example.com",
|
|
872
|
-
"newTab": false
|
|
884
|
+
"newTab": false,
|
|
885
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
873
886
|
},
|
|
874
887
|
{
|
|
875
888
|
"icon": "facebook",
|
|
876
889
|
"label": "@jim_johnsson",
|
|
877
890
|
"href": "#",
|
|
878
|
-
"newTab": false
|
|
891
|
+
"newTab": false,
|
|
892
|
+
"ariaLabel": "Link to Isabella Doe's social media profile"
|
|
879
893
|
}
|
|
880
894
|
],
|
|
881
895
|
"copy": "Blends artistic flair with technical expertise, creating visually stunning and intuitive websites that captivate users and drive engagement."
|
package/dist/tokens/themes.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 27 May 2025 08:18:14 GMT
|
|
4
4
|
*/
|
|
5
5
|
:root [ks-theme=business] {
|
|
6
6
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -2727,7 +2727,7 @@
|
|
|
2727
2727
|
}
|
|
2728
2728
|
/**
|
|
2729
2729
|
* Do not edit directly
|
|
2730
|
-
* Generated on
|
|
2730
|
+
* Generated on Tue, 27 May 2025 08:18:18 GMT
|
|
2731
2731
|
*/
|
|
2732
2732
|
:root [ks-theme=google] {
|
|
2733
2733
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -5458,7 +5458,7 @@
|
|
|
5458
5458
|
}
|
|
5459
5459
|
/**
|
|
5460
5460
|
* Do not edit directly
|
|
5461
|
-
* Generated on
|
|
5461
|
+
* Generated on Tue, 27 May 2025 08:18:16 GMT
|
|
5462
5462
|
*/
|
|
5463
5463
|
:root [ks-theme=ngo] {
|
|
5464
5464
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
|
@@ -8459,7 +8459,7 @@
|
|
|
8459
8459
|
}
|
|
8460
8460
|
/**
|
|
8461
8461
|
* Do not edit directly
|
|
8462
|
-
* Generated on
|
|
8462
|
+
* Generated on Tue, 27 May 2025 08:18:20 GMT
|
|
8463
8463
|
*/
|
|
8464
8464
|
:root [ks-theme=telekom] {
|
|
8465
8465
|
--ks-background-color-accent-base: var(--ks-color-primary-to-bg-8-base);
|
package/dist/tokens/tokens.css
CHANGED
package/dist/tokens/tokens.js
CHANGED