@kickstartds/ds-agency-premium 1.3.29 → 1.3.30

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.
Files changed (47) hide show
  1. package/dist/{FooterProps-9f94ed98.d.ts → FooterProps-10c950a6.d.ts} +7 -2
  2. package/dist/{HeaderProps-c41aeb76.d.ts → HeaderProps-7be94a61.d.ts} +9 -14
  3. package/dist/LogoProps-01796f0a.d.ts +44 -0
  4. package/dist/LogosProps-f9474fe2.d.ts +97 -0
  5. package/dist/SectionProps-93230a76.d.ts +1 -1
  6. package/dist/SliderProps-93230a76.d.ts +1 -1
  7. package/dist/components/cta/cta.css +2 -2
  8. package/dist/components/footer/footer.css +10 -14
  9. package/dist/components/footer/footer.schema.dereffed.json +12 -9
  10. package/dist/components/footer/footer.schema.json +11 -25
  11. package/dist/components/footer/index.d.ts +1 -1
  12. package/dist/components/footer/index.js +3 -2
  13. package/dist/components/header/header.css +0 -16
  14. package/dist/components/header/header.schema.dereffed.json +13 -26
  15. package/dist/components/header/header.schema.json +24 -6
  16. package/dist/components/header/index.d.ts +1 -1
  17. package/dist/components/header/index.js +7 -3
  18. package/dist/components/image/image.schema.dereffed.json +1 -1
  19. package/dist/components/image/image.schema.json +1 -1
  20. package/dist/components/image/index.d.ts +1 -1
  21. package/dist/components/index/index.d.ts +2 -2
  22. package/dist/components/logo/index.d.ts +4 -0
  23. package/dist/components/logo/index.js +10 -0
  24. package/dist/components/logo/logo.css +7 -0
  25. package/dist/components/logo/logo.schema.dereffed.json +43 -19
  26. package/dist/components/logo/logo.schema.json +41 -17
  27. package/dist/components/logos/index.d.ts +1 -1
  28. package/dist/components/logos/logos.schema.dereffed.json +0 -5
  29. package/dist/components/logos/logos.schema.json +27 -1
  30. package/dist/components/nav-main/index.d.ts +8 -37
  31. package/dist/components/nav-main/index.js +3 -2
  32. package/dist/components/nav-main/nav-main.css +33 -45
  33. package/dist/components/nav-main/nav-main.schema.dereffed.json +28 -26
  34. package/dist/components/nav-main/nav-main.schema.json +4 -53
  35. package/dist/components/page/page.schema.dereffed.json +0 -10
  36. package/dist/components/page-wrapper/tokens.css +1 -1
  37. package/dist/components/picture/picture.schema.json +1 -1
  38. package/dist/components/presets.json +6 -5
  39. package/dist/components/section/section.schema.dereffed.json +0 -10
  40. package/dist/components/settings/settings.schema.dereffed.json +25 -35
  41. package/dist/components/slider/slider.schema.dereffed.json +0 -5
  42. package/dist/static/favicon/favicon-192-192.png +1 -1
  43. package/dist/tokens/themes.css +4 -4
  44. package/dist/tokens/tokens.css +1 -1
  45. package/dist/tokens/tokens.js +1 -1
  46. package/package.json +1 -1
  47. package/dist/LogosProps-58c84ccc.d.ts +0 -242
@@ -7,6 +7,10 @@
7
7
  * Picture source
8
8
  */
9
9
  type Source = string;
10
+ /**
11
+ * Picture source
12
+ */
13
+ type Source1 = string;
10
14
  /**
11
15
  * Alt text to display for picture
12
16
  */
@@ -29,7 +33,6 @@ type Byline = string;
29
33
  type Inverted = boolean;
30
34
  interface FooterProps {
31
35
  logo: Logo;
32
- logoHref?: string;
33
36
  byline?: Byline;
34
37
  inverted?: Inverted;
35
38
  navItems?: {
@@ -40,8 +43,10 @@ interface FooterProps {
40
43
  }
41
44
  interface Logo {
42
45
  src?: Source;
46
+ srcInverted?: Source1;
43
47
  alt?: AltText;
48
+ homepageHref?: string;
44
49
  width?: Width;
45
50
  height?: Height;
46
51
  }
47
- export { Source, AltText, Width, Height, Byline, Inverted, FooterProps, Logo };
52
+ export { Source, Source1, AltText, Width, Height, Byline, Inverted, FooterProps, Logo };
@@ -4,17 +4,13 @@
4
4
  * and run json-schema-to-typescript to regenerate this file.
5
5
  */
6
6
  /**
7
- * Add a link to the logo
8
- */
9
- type Link = string;
10
- /**
11
- * Logo file source
7
+ * Picture source
12
8
  */
13
9
  type Source = string;
14
10
  /**
15
- * Logo inverted file source
11
+ * Picture source
16
12
  */
17
- type SourceInverted = string;
13
+ type Source1 = string;
18
14
  /**
19
15
  * Alt text to display for picture
20
16
  */
@@ -28,9 +24,9 @@ type Width = number;
28
24
  */
29
25
  type Height = number;
30
26
  /**
31
- * Toggle the inversion of the logo inside the mobile navigation
27
+ * Toggle the inversion of the flyout navigation
32
28
  */
33
- type FlyoutLogoInverted = boolean;
29
+ type FlyoutInverted = boolean;
34
30
  /**
35
31
  * Make the header float over the first Section
36
32
  */
@@ -41,8 +37,7 @@ type Floating = boolean;
41
37
  type Inverted = boolean;
42
38
  interface HeaderProps {
43
39
  logo: Logo;
44
- logoHref?: string;
45
- flyoutLogoInverted?: FlyoutLogoInverted;
40
+ flyoutInverted?: FlyoutInverted;
46
41
  floating?: Floating;
47
42
  inverted?: Inverted;
48
43
  navItems?: {
@@ -52,11 +47,11 @@ interface HeaderProps {
52
47
  }[];
53
48
  }
54
49
  interface Logo {
55
- href?: Link;
56
50
  src?: Source;
57
- srcInverted?: SourceInverted;
51
+ srcInverted?: Source1;
58
52
  alt?: AltText;
53
+ homepageHref?: string;
59
54
  width?: Width;
60
55
  height?: Height;
61
56
  }
62
- export { Link, Source, SourceInverted, AltText, Width, Height, FlyoutLogoInverted, Floating, Inverted, HeaderProps, Logo };
57
+ export { Source, Source1, AltText, Width, Height, FlyoutInverted, Floating, Inverted, HeaderProps, Logo };
@@ -0,0 +1,44 @@
1
+ /**
2
+ * This file was automatically generated by json-schema-to-typescript.
3
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
+ * and run json-schema-to-typescript to regenerate this file.
5
+ */
6
+ /**
7
+ * Picture source
8
+ */
9
+ type Source = string;
10
+ /**
11
+ * Picture source
12
+ */
13
+ type Source1 = string;
14
+ /**
15
+ * Alt text to display for picture
16
+ */
17
+ type AltText = string;
18
+ /**
19
+ * Toggle wether the inverted or default version of the logo is being displayed
20
+ */
21
+ type Inverted = boolean;
22
+ /**
23
+ * Width of the picture
24
+ */
25
+ type Width = number;
26
+ /**
27
+ * Height of the picture
28
+ */
29
+ type Height = number;
30
+ /**
31
+ * Add additional css classes that should be applied to the logo
32
+ */
33
+ type AdditionalClasses = string;
34
+ interface LogoProps {
35
+ src?: Source;
36
+ srcInverted?: Source1;
37
+ alt?: AltText;
38
+ homepageHref?: string;
39
+ inverted?: Inverted;
40
+ width?: Width;
41
+ height?: Height;
42
+ className?: AdditionalClasses;
43
+ }
44
+ export { Source, Source1, AltText, Inverted, Width, Height, AdditionalClasses, LogoProps };
@@ -0,0 +1,97 @@
1
+ /**
2
+ * This file was automatically generated by json-schema-to-typescript.
3
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
4
+ * and run json-schema-to-typescript to regenerate this file.
5
+ */
6
+ /**
7
+ * A short tagline atop the logos
8
+ */
9
+ type LogoTagline = string;
10
+ /**
11
+ * The logos to display
12
+ *
13
+ * @minItems 1
14
+ * @maxItems 20
15
+ */
16
+ type Logos = [Logo] | [Logo, Logo] | [Logo, Logo, Logo] | [Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo, Logo] | [
17
+ Logo,
18
+ Logo,
19
+ Logo,
20
+ Logo,
21
+ Logo,
22
+ Logo,
23
+ Logo,
24
+ Logo,
25
+ Logo,
26
+ Logo,
27
+ Logo,
28
+ Logo,
29
+ Logo,
30
+ Logo,
31
+ Logo,
32
+ Logo,
33
+ Logo,
34
+ Logo,
35
+ Logo,
36
+ Logo
37
+ ];
38
+ /**
39
+ * The URL of the logo image
40
+ */
41
+ type URL = string;
42
+ /**
43
+ * The alt text of the logo
44
+ */
45
+ type Caption = string;
46
+ /**
47
+ * The alignment of the logo layout
48
+ */
49
+ type Alignment = "left" | "center";
50
+ /**
51
+ * The amount of logos to display per row
52
+ */
53
+ type LogosPerRow = number;
54
+ /**
55
+ * Activate/disable the CTA
56
+ */
57
+ type CTAToggle = boolean;
58
+ /**
59
+ * A short CTA text
60
+ */
61
+ type CallToActionText = string;
62
+ /**
63
+ * The CTA link
64
+ */
65
+ type CallToActionLink = string;
66
+ /**
67
+ * The text label displayed on the link
68
+ */
69
+ type LinkLabel = string;
70
+ /**
71
+ * Component used to display a set of logos
72
+ */
73
+ interface LogosProps {
74
+ tagline?: LogoTagline;
75
+ logo?: Logos;
76
+ align?: Alignment;
77
+ logosPerRow?: LogosPerRow;
78
+ cta?: CallToAction;
79
+ }
80
+ /**
81
+ * Logo entry for Logos component
82
+ */
83
+ interface Logo {
84
+ src: URL;
85
+ alt?: Caption;
86
+ }
87
+ /**
88
+ * The call to action
89
+ */
90
+ interface CallToAction {
91
+ toggle?: CTAToggle;
92
+ text?: CallToActionText;
93
+ link: CallToActionLink;
94
+ label: LinkLabel;
95
+ style: "button" | "text";
96
+ }
97
+ export { LogoTagline, Logos, URL, Caption, Alignment, LogosPerRow, CTAToggle, CallToActionText, CallToActionLink, LinkLabel, LogosProps, Logo, CallToAction };
@@ -10,7 +10,7 @@ import { GalleryProps } from "./GalleryProps-76e7de44.js";
10
10
  import { HeroProps } from "./HeroProps-cf82a16d.js";
11
11
  import { ImageStoryProps } from "./ImageStoryProps-24e0335c.js";
12
12
  import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
13
- import { LogosProps } from "./LogosProps-58c84ccc.js";
13
+ import { LogosProps } from "./LogosProps-f9474fe2.js";
14
14
  import { MosaicProps } from "./MosaicProps-d52c7151.js";
15
15
  import { SliderProps } from "./SliderProps-93230a76.js";
16
16
  import { StatsProps } from "./StatsProps-bf5ef578.js";
@@ -8,7 +8,7 @@ import { FeaturesProps } from "./FeaturesProps-b05859d6.js";
8
8
  import { GalleryProps } from "./GalleryProps-76e7de44.js";
9
9
  import { HeroProps } from "./HeroProps-cf82a16d.js";
10
10
  import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
11
- import { LogosProps } from "./LogosProps-58c84ccc.js";
11
+ import { LogosProps } from "./LogosProps-f9474fe2.js";
12
12
  import { StatsProps } from "./StatsProps-bf5ef578.js";
13
13
  import { TeaserCardProps } from "./TeaserCardProps-b9c28e78.js";
14
14
  import { TestimonialsProps } from "./TestimonialsProps-f7211553.js";
@@ -16,8 +16,8 @@
16
16
  }
17
17
 
18
18
  @media (min-width: 640px) {
19
- .c-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
20
- .c-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
19
+ .dsa-header--floating + .l-container--storytelling .c-storytelling.dsa-cta,
20
+ .dsa-header--floating + .l-section .l-container--storytelling:first-child .c-storytelling.dsa-cta {
21
21
  padding-top: calc(var(--dsa-header--height) + var(--dsa-cta--horizontal-padding, var(--l-section--content-padding)));
22
22
  z-index: 1;
23
23
  }
@@ -1,4 +1,4 @@
1
- .c-footer {
1
+ .dsa-footer {
2
2
  --dsa-footer--background-color: var(--ks-background-color-default);
3
3
  --dsa-footer--border-top: 1px solid var(--ks-border-color-accent);
4
4
  --dsa-footer--max-width: var(--l-section--content-width-wide);
@@ -11,19 +11,19 @@
11
11
  --dsa-footer__logo--height: 1.5rem;
12
12
  }
13
13
  @media (min-width: 62em) {
14
- .c-footer {
15
- --dsa-footer__logo--height: 2rem;
14
+ .dsa-footer {
15
+ --dsa-footer__logo--height: 4rem;
16
16
  }
17
17
  }
18
18
 
19
- .c-footer {
19
+ .dsa-footer {
20
20
  position: relative;
21
21
  z-index: 1;
22
22
  width: 100%;
23
23
  display: flex;
24
24
  background-color: var(--dsa-footer--background-color, var(--ks-background-color-default));
25
25
  }
26
- .c-footer__content {
26
+ .dsa-footer__content {
27
27
  padding: var(--l-section--space-small) var(--l-section--content-padding);
28
28
  border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-accent));
29
29
  max-width: var(--dsa-footer--max-width, var(--l-section--content-width-wide));
@@ -34,24 +34,20 @@
34
34
  align-items: center;
35
35
  gap: var(--dsa-footer--gap-vertical, var(--ks-spacing-stack-m));
36
36
  }
37
- .c-footer__logo {
38
- display: block;
37
+ .dsa-footer__logo {
38
+ --dsa-logo--height: var(--dsa-footer__logo--height) !important;
39
39
  }
40
- .c-footer__logo img {
41
- height: var(--dsa-footer__logo--height);
42
- width: auto;
43
- }
44
- .c-footer__byline {
40
+ .dsa-footer__byline {
45
41
  font: var(--dsa-footer__byline--font, var(--ks-font-copy-xs));
46
42
  color: var(--dsa-footer__byline--color, var(--ks-text-color-default));
47
43
  }
48
- .c-footer__links {
44
+ .dsa-footer__links {
49
45
  display: flex;
50
46
  flex-wrap: wrap;
51
47
  justify-content: center;
52
48
  gap: var(--dsa-footer__links--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-m));
53
49
  }
54
- .c-footer__link {
50
+ .dsa-footer__link {
55
51
  font: var(--dsa-footer__links--font, var(--ks-font-interface-s));
56
52
  color: var(--dsa-footer__links--color, var(--dsa-link--color));
57
53
  }
@@ -12,16 +12,24 @@
12
12
  "title": "Source",
13
13
  "description": "Picture source",
14
14
  "type": "string",
15
- "format": "image",
16
- "examples": [
17
- "https://picsum.photos/seed/kdspicture/300/300"
18
- ]
15
+ "format": "image"
16
+ },
17
+ "srcInverted": {
18
+ "title": "Source",
19
+ "description": "Picture source",
20
+ "type": "string",
21
+ "format": "image"
19
22
  },
20
23
  "alt": {
21
24
  "title": "Alt text",
22
25
  "description": "Alt text to display for picture",
23
26
  "type": "string"
24
27
  },
28
+ "homepageHref": {
29
+ "type": "string",
30
+ "format": "uri",
31
+ "default": "/"
32
+ },
25
33
  "width": {
26
34
  "title": "Width",
27
35
  "description": "Width of the picture",
@@ -43,11 +51,6 @@
43
51
  },
44
52
  "additionalProperties": false
45
53
  },
46
- "logoHref": {
47
- "type": "string",
48
- "format": "uri",
49
- "default": "/"
50
- },
51
54
  "byline": {
52
55
  "title": "Byline",
53
56
  "description": "Small line of text displayed below the logo",
@@ -9,38 +9,24 @@
9
9
  "type": "object",
10
10
  "properties": {
11
11
  "src": {
12
- "title": "Source",
13
- "description": "Picture source",
14
- "type": "string",
15
- "format": "image",
16
- "examples": ["https://picsum.photos/seed/kdspicture/300/300"]
12
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/src"
13
+ },
14
+ "srcInverted": {
15
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/srcInverted"
17
16
  },
18
17
  "alt": {
19
- "title": "Alt text",
20
- "description": "Alt text to display for picture",
21
- "type": "string"
18
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/alt"
19
+ },
20
+ "homepageHref": {
21
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/homepageHref"
22
22
  },
23
23
  "width": {
24
- "title": "Width",
25
- "description": "Width of the picture",
26
- "type": "integer",
27
- "minimum": 0,
28
- "examples": [300]
24
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/width"
29
25
  },
30
26
  "height": {
31
- "title": "Height",
32
- "description": "Height of the picture",
33
- "type": "integer",
34
- "minimum": 0,
35
- "examples": [300]
27
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/height"
36
28
  }
37
- },
38
- "additionalProperties": false
39
- },
40
- "logoHref": {
41
- "type": "string",
42
- "format": "uri",
43
- "default": "/"
29
+ }
44
30
  },
45
31
  "byline": {
46
32
  "title": "Byline",
@@ -1,4 +1,4 @@
1
1
  import { FC } from "react";
2
- import { FooterProps } from "../../FooterProps-9f94ed98.js";
2
+ import { FooterProps } from "../../FooterProps-10c950a6.js";
3
3
  declare const Footer: FC<FooterProps>;
4
4
  export { Footer };
@@ -2,10 +2,11 @@ import "./footer.css";
2
2
  import { createElement } from 'react';
3
3
  import { jsx, jsxs } from 'react/jsx-runtime';
4
4
  import classnames from 'classnames';
5
- import { Picture } from '@kickstartds/base/lib/picture';
6
5
  import { Link } from '@kickstartds/base/lib/link';
6
+ import { Logo } from '../logo/index.js';
7
+ import '@kickstartds/base/lib/picture';
7
8
 
8
- const Footer = ({ logo, logoHref = "/", byline, inverted = false, navItems = [], }) => (jsx("div", { className: classnames("c-footer"), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "c-footer__content", children: [jsx(Link, { className: "c-footer__logo", href: logoHref, children: jsx(Picture, { ...logo, lazy: true }) }), byline && jsx("span", { className: "c-footer__byline", children: byline }), navItems.length > 0 ? (jsx("div", { className: "c-footer__links", children: navItems.map(({ label, active, ...linkProps }) => (createElement(Link, { ...linkProps, className: "c-footer__link", key: linkProps.href + label }, label))) })) : null] }) }));
9
+ const Footer = ({ logo, byline, inverted = false, navItems = [], }) => (jsx("div", { className: classnames("dsa-footer"), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-footer__content", children: [jsx(Logo, { ...logo, inverted: inverted }), byline && jsx("span", { className: "dsa-footer__byline", children: byline }), navItems.length > 0 ? (jsx("div", { className: "dsa-footer__links", children: navItems.map(({ label, active, ...linkProps }) => (createElement(Link, { ...linkProps, className: "dsa-footer__link", key: linkProps.href + label }, label))) })) : null] }) }));
9
10
  Footer.displayName = "Footer";
10
11
 
11
12
  export { Footer };
@@ -33,22 +33,6 @@
33
33
  display: flex;
34
34
  justify-content: space-between;
35
35
  }
36
- .dsa-header__logo {
37
- display: block;
38
- }
39
- .dsa-header__logo__img {
40
- height: var(--dsa-header__logo--height);
41
- width: auto;
42
- }
43
- [ks-inverted=true] .dsa-header__logo__img {
44
- display: none;
45
- }
46
- .dsa-header__logo__img--inverted {
47
- display: none;
48
- }
49
- [ks-inverted=true] .dsa-header__logo__img--inverted {
50
- display: block;
51
- }
52
36
 
53
37
  .dsa-header--spacer {
54
38
  display: none;
@@ -8,36 +8,28 @@
8
8
  "title": "Logo",
9
9
  "type": "object",
10
10
  "properties": {
11
- "href": {
12
- "title": "Link",
13
- "description": "Add a link to the logo",
14
- "type": "string",
15
- "format": "uri",
16
- "default": "/"
17
- },
18
11
  "src": {
19
12
  "title": "Source",
20
- "description": "Logo file source",
13
+ "description": "Picture source",
21
14
  "type": "string",
22
- "format": "image",
23
- "examples": [
24
- "logo.svg"
25
- ]
15
+ "format": "image"
26
16
  },
27
17
  "srcInverted": {
28
- "title": "Source Inverted",
29
- "description": "Logo inverted file source",
18
+ "title": "Source",
19
+ "description": "Picture source",
30
20
  "type": "string",
31
- "format": "image",
32
- "examples": [
33
- "logo-inverted.svg"
34
- ]
21
+ "format": "image"
35
22
  },
36
23
  "alt": {
37
24
  "title": "Alt text",
38
25
  "description": "Alt text to display for picture",
39
26
  "type": "string"
40
27
  },
28
+ "homepageHref": {
29
+ "type": "string",
30
+ "format": "uri",
31
+ "default": "/"
32
+ },
41
33
  "width": {
42
34
  "title": "Width",
43
35
  "description": "Width of the picture",
@@ -59,15 +51,10 @@
59
51
  },
60
52
  "additionalProperties": false
61
53
  },
62
- "logoHref": {
63
- "type": "string",
64
- "format": "uri",
65
- "default": "/"
66
- },
67
- "flyoutLogoInverted": {
54
+ "flyoutInverted": {
68
55
  "type": "boolean",
69
- "title": "Flyout Logo Inverted",
70
- "description": "Toggle the inversion of the logo inside the mobile navigation",
56
+ "title": "Flyout Inverted",
57
+ "description": "Toggle the inversion of the flyout navigation",
71
58
  "default": false
72
59
  },
73
60
  "floating": {
@@ -5,13 +5,31 @@
5
5
  "type": "object",
6
6
  "properties": {
7
7
  "logo": {
8
- "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logo"
8
+ "title": "Logo",
9
+ "type": "object",
10
+ "properties": {
11
+ "src": {
12
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/src"
13
+ },
14
+ "srcInverted": {
15
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/srcInverted"
16
+ },
17
+ "alt": {
18
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/alt"
19
+ },
20
+ "homepageHref": {
21
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/homepageHref"
22
+ },
23
+ "width": {
24
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/width"
25
+ },
26
+ "height": {
27
+ "$ref": "http://schema.mydesignsystem.com/logo.schema.json#/properties/height"
28
+ }
29
+ }
9
30
  },
10
- "logoHref": {
11
- "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/logoHref"
12
- },
13
- "flyoutLogoInverted": {
14
- "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutLogoInverted"
31
+ "flyoutInverted": {
32
+ "$ref": "http://schema.mydesignsystem.com/nav-main.schema.json#/properties/flyoutInverted"
15
33
  },
16
34
  "floating": {
17
35
  "type": "boolean",
@@ -1,4 +1,4 @@
1
1
  import { FC } from "react";
2
- import { HeaderProps } from "../../HeaderProps-c41aeb76.js";
2
+ import { HeaderProps } from "../../HeaderProps-7be94a61.js";
3
3
  declare const Header: FC<HeaderProps>;
4
4
  export { Header };
@@ -1,17 +1,21 @@
1
1
  import "./header.css";
2
2
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
3
3
  import classnames from 'classnames';
4
- import { Picture } from '@kickstartds/base/lib/picture';
5
- import { Link } from '@kickstartds/base/lib/link';
6
4
  import { NavMain } from '../nav-main/index.js';
5
+ import { Logo } from '../logo/index.js';
7
6
  import 'react';
7
+ import '@kickstartds/base/lib/link';
8
8
  import '../nav-main/js/NavToggle.client.js';
9
9
  import '@kickstartds/core/lib/component';
10
10
  import '../nav-main/js/navMainEvents.client.js';
11
11
  import '@kickstartds/core/lib/core';
12
12
  import '../nav-main/js/body.client.js';
13
+ import '@kickstartds/base/lib/picture';
13
14
 
14
- const Header = ({ logo, logoHref = "/", floating, inverted = false, flyoutLogoInverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsxs(Link, { className: "dsa-header__logo", href: logoHref, children: [jsx(Picture, { className: "dsa-header__logo__img", src: logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: inverted }), jsx(Picture, { className: "dsa-header__logo__img dsa-header__logo__img--inverted", src: logo?.srcInverted || logo?.src, alt: logo?.alt, width: logo?.width, height: logo?.height, lazy: !inverted })] }), jsx(NavMain, { flyoutLogoInverted: flyoutLogoInverted, logo: logo, logoHref: logoHref, items: navItems })] }) }) }));
15
+ const Header = ({ logo, floating, inverted = false, flyoutInverted = false, navItems = [], }) => (jsx(Fragment, { children: jsx("div", { className: classnames("dsa-header", floating ? `dsa-header--floating` : ""), "ks-inverted": inverted.toString(), children: jsxs("div", { className: "dsa-header__content", children: [jsx(Logo, { ...logo, className: "dsa-header__logo", inverted: inverted }), jsx(NavMain, { flyoutInverted: flyoutInverted, items: navItems, logo: {
16
+ ...logo,
17
+ inverted: flyoutInverted,
18
+ } })] }) }) }));
15
19
  Header.displayName = "Header";
16
20
 
17
21
  export { Header };
@@ -51,7 +51,7 @@
51
51
  },
52
52
  "className": {
53
53
  "title": "Additional Classes",
54
- "description": "Add additional css classes that should be applied to the button",
54
+ "description": "Add additional css classes that should be applied to the image",
55
55
  "type": "string"
56
56
  },
57
57
  "style": {
@@ -44,7 +44,7 @@
44
44
  },
45
45
  "className": {
46
46
  "title": "Additional Classes",
47
- "description": "Add additional css classes that should be applied to the button",
47
+ "description": "Add additional css classes that should be applied to the image",
48
48
  "type": "string"
49
49
  },
50
50
  "style": {
@@ -31,7 +31,7 @@ type Height = number;
31
31
  */
32
32
  type AspectRatio = "unset" | "square" | "wide" | "landscape";
33
33
  /**
34
- * Add additional css classes that should be applied to the button
34
+ * Add additional css classes that should be applied to the image
35
35
  */
36
36
  type AdditionalClasses = string;
37
37
  /**
@@ -12,8 +12,8 @@ import { SeoProps } from "../../SeoProps-f2d6dcaa.js";
12
12
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
13
13
  * and run json-schema-to-typescript to regenerate this file.
14
14
  */
15
- import { HeaderProps } from "../../HeaderProps-c41aeb76.js";
16
- import { FooterProps } from "../../FooterProps-9f94ed98.js";
15
+ import { HeaderProps } from "../../HeaderProps-7be94a61.js";
16
+ import { FooterProps } from "../../FooterProps-10c950a6.js";
17
17
  /**
18
18
  * Collection of sections (with their contents) to render on the page
19
19
  */
@@ -0,0 +1,4 @@
1
+ import { FC } from "react";
2
+ import { LogoProps } from "../../LogoProps-01796f0a.js";
3
+ declare const Logo: FC<LogoProps>;
4
+ export { Logo };
@@ -0,0 +1,10 @@
1
+ import "./logo.css";
2
+ import { jsx, Fragment } from 'react/jsx-runtime';
3
+ import classnames from 'classnames';
4
+ import { Picture } from '@kickstartds/base/lib/picture';
5
+ import { Link } from '@kickstartds/base/lib/link';
6
+
7
+ const Logo = ({ src, srcInverted = "/", alt, inverted = false, width, height, homepageHref, className, }) => (jsx(Fragment, { children: jsx(Link, { className: classnames("dsa-logo", className), href: homepageHref, children: jsx(Picture, { className: "dsa-logo__img", src: inverted === false ? src : srcInverted, alt: alt, width: width, height: height }) }) }));
8
+ Logo.displayName = "Logo";
9
+
10
+ export { Logo };