@kickstartds/ds-agency-premium 1.6.71--canary.1897.4e4f047.0 → 1.6.71--canary.45.1899.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/BlogOverviewProps-9f207f1c.d.ts +1 -1
- package/dist/BlogPostProps-6b3cff22.d.ts +1 -1
- package/dist/{CtaProps-babe4ee6.d.ts → CtaProps-789f8508.d.ts} +1 -6
- package/dist/{HeroProps-40f6c7f5.d.ts → HeroProps-2ff0068e.d.ts} +2 -7
- package/dist/SectionProps-21d04028.d.ts +3 -3
- package/dist/{SliderProps-babe4ee6.d.ts → SliderProps-789f8508.d.ts} +2 -2
- package/dist/components/blog-overview/blog-overview.schema.dereffed.json +6 -32
- package/dist/components/blog-post/blog-post.schema.dereffed.json +6 -32
- package/dist/components/button/button.css +2 -2
- package/dist/components/cta/cta.schema.dereffed.json +0 -6
- package/dist/components/cta/cta.schema.json +0 -6
- package/dist/components/cta/index.d.ts +1 -1
- package/dist/components/cta/index.js +1 -1
- package/dist/components/footer/footer.css +1 -1
- package/dist/components/footer/footer.schema.dereffed.json +12 -20
- package/dist/components/header/header.schema.dereffed.json +12 -20
- package/dist/components/hero/hero.css +24 -28
- package/dist/components/hero/hero.schema.dereffed.json +3 -7
- package/dist/components/hero/hero.schema.json +9 -7
- package/dist/components/hero/index.d.ts +1 -1
- package/dist/components/hero/index.js +15 -5
- package/dist/components/nav-dropdown/nav-dropdown.css +3 -3
- package/dist/components/nav-flyout/nav-flyout.schema.dereffed.json +12 -20
- package/dist/components/nav-main/nav-main.schema.dereffed.json +12 -20
- package/dist/components/nav-main/nav-main.schema.json +12 -20
- package/dist/components/nav-topbar/nav-topbar.css +3 -3
- package/dist/components/nav-topbar/nav-topbar.schema.dereffed.json +12 -20
- package/dist/components/page/page.schema.dereffed.json +6 -26
- package/dist/components/page-wrapper/index.js +0 -6
- package/dist/components/page-wrapper/tokens.css +245 -245
- package/dist/components/presets.json +28 -58
- package/dist/components/section/section.schema.dereffed.json +6 -26
- package/dist/components/settings/settings.schema.dereffed.json +24 -40
- package/dist/components/slider/index.d.ts +1 -1
- package/dist/components/slider/slider.schema.dereffed.json +3 -13
- package/dist/components/split-even/index.d.ts +3 -3
- package/dist/components/split-even/split-even.schema.dereffed.json +12 -52
- package/dist/components/split-weighted/index.d.ts +3 -3
- package/dist/components/split-weighted/split-weighted.schema.dereffed.json +12 -52
- package/dist/components/stats/stats.css +3 -3
- package/dist/components/teaser-card/teaser-card.css +4 -3
- package/dist/components/testimonials/index.d.ts +1 -1
- package/dist/global.css +1 -1
- package/dist/static/favicon/android-chrome-192x192.png +0 -0
- package/dist/static/favicon/android-chrome-512x512.png +0 -0
- package/dist/static/favicon/apple-touch-icon.png +0 -0
- package/dist/static/favicon/browserconfig.xml +9 -0
- package/dist/static/favicon/favicon-16x16.png +0 -0
- package/dist/static/favicon/favicon-192-192.png +20 -0
- package/dist/static/favicon/favicon-32x32.png +0 -0
- package/dist/static/favicon/favicon.ico +0 -0
- package/dist/static/favicon/mstile-144x144.png +0 -0
- package/dist/static/favicon/mstile-150x150.png +0 -0
- package/dist/static/favicon/mstile-310x150.png +0 -0
- package/dist/static/favicon/mstile-310x310.png +0 -0
- package/dist/static/favicon/mstile-70x70.png +0 -0
- package/dist/static/favicon/safari-pinned-tab.svg +30 -0
- package/dist/static/favicon/site.webmanifest +19 -1
- package/dist/static/logo-inverted.svg +12 -20
- package/dist/static/logo.svg +12 -54
- package/dist/tokens/IconSprite.js +0 -6
- package/dist/tokens/icon-sprite.html +0 -2
- package/dist/tokens/themes.css +4 -4
- package/dist/tokens/tokens.css +245 -245
- package/dist/tokens/tokens.js +375 -376
- package/package.json +1 -1
- package/dist/static/guenther/brands/cadillac.png +0 -0
- package/dist/static/guenther/brands/corvette.png +0 -0
- package/dist/static/guenther/brands/infiniti.png +0 -0
- package/dist/static/guenther/brands/isuzu.png +0 -0
- package/dist/static/guenther/brands/kia.png +0 -0
- package/dist/static/guenther/brands/maserati.png +0 -0
- package/dist/static/guenther/brands/micro.png +0 -0
- package/dist/static/guenther/brands/msg.png +0 -0
- package/dist/static/guenther/brands/nissan.png +0 -0
- package/dist/static/guenther/brands/saab.png +0 -0
- package/dist/static/guenther/brands/subaru.png +0 -0
- package/dist/static/guenther/contact.jpg +0 -0
- package/dist/static/guenther/header.jpg +0 -0
- package/dist/static/guenther/header.png +0 -0
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { SectionProps } from "./SectionProps-21d04028.js";
|
|
7
7
|
import { BlogTeaserProps } from "./BlogTeaserProps-f5855e93.js";
|
|
8
|
-
import { CtaProps } from "./CtaProps-
|
|
8
|
+
import { CtaProps } from "./CtaProps-789f8508.js";
|
|
9
9
|
import { SeoProps } from "./SeoProps-f2d6dcaa.js";
|
|
10
10
|
/**
|
|
11
11
|
* Collection of sections (with their contents) to render as the blog overview intro
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { BlogHeadProps } from "./BlogHeadProps-c04a5ed8.js";
|
|
7
7
|
import { BlogAsideProps } from "./BlogAsideProps-c760fd2a.js";
|
|
8
8
|
import { SectionProps } from "./SectionProps-21d04028.js";
|
|
9
|
-
import { CtaProps } from "./CtaProps-
|
|
9
|
+
import { CtaProps } from "./CtaProps-789f8508.js";
|
|
10
10
|
import { SeoProps } from "./SeoProps-f2d6dcaa.js";
|
|
11
11
|
/**
|
|
12
12
|
* Body text for the blog post, overwrites sections if present
|
|
@@ -79,10 +79,6 @@ type VerticalAlignmentOfTheContent = "center" | "top" | "bottom";
|
|
|
79
79
|
* Toggle padding of the content
|
|
80
80
|
*/
|
|
81
81
|
type Padding1 = boolean;
|
|
82
|
-
/**
|
|
83
|
-
* Toggle inversion of the component
|
|
84
|
-
*/
|
|
85
|
-
type Inverted = boolean;
|
|
86
82
|
interface CtaProps {
|
|
87
83
|
headline?: ComponentHeadline;
|
|
88
84
|
sub?: ComponentSubheadline;
|
|
@@ -97,7 +93,6 @@ interface CtaProps {
|
|
|
97
93
|
textAlign?: TextAlignment;
|
|
98
94
|
align?: VerticalAlignmentOfTheContent;
|
|
99
95
|
padding?: Padding1;
|
|
100
|
-
inverted?: Inverted;
|
|
101
96
|
}
|
|
102
97
|
interface Button {
|
|
103
98
|
label?: Label;
|
|
@@ -120,4 +115,4 @@ interface Order {
|
|
|
120
115
|
mobileImageLast?: MobileImageAfterText;
|
|
121
116
|
desktopImageLast?: DesktopImageAfterText;
|
|
122
117
|
}
|
|
123
|
-
export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, URL, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, Padding1,
|
|
118
|
+
export { ComponentHeadline, ComponentSubheadline, ComponentText, HighlightText, ColorNeutral, Label, Icon, URL, BackgroundColor, BackgroundImage, ImageSource, Padding, AltText, VerticalAlignmentOfTheImage, MobileImageAfterText, DesktopImageAfterText, TextAlignment, VerticalAlignmentOfTheContent, Padding1, CtaProps, Button, Image, Order };
|
|
@@ -71,11 +71,7 @@ type AltText = string;
|
|
|
71
71
|
/**
|
|
72
72
|
* Choose the alginment of the module content
|
|
73
73
|
*/
|
|
74
|
-
type ModuleAligment = "center" | "below" | "left" | "right" | "corner";
|
|
75
|
-
/**
|
|
76
|
-
* Inverted color scheme for the box
|
|
77
|
-
*/
|
|
78
|
-
type Inverted = boolean;
|
|
74
|
+
type ModuleAligment = "center" | "below" | "offset" | "left" | "right" | "corner" | "bottom";
|
|
79
75
|
interface HeroProps {
|
|
80
76
|
headline?: Headline;
|
|
81
77
|
sub?: ModuleSubheadline;
|
|
@@ -88,7 +84,6 @@ interface HeroProps {
|
|
|
88
84
|
overlay?: GridLayer;
|
|
89
85
|
image?: BackgroundImage;
|
|
90
86
|
textPosition?: ModuleAligment;
|
|
91
|
-
inverted?: Inverted;
|
|
92
87
|
}
|
|
93
88
|
interface Button {
|
|
94
89
|
label?: Label;
|
|
@@ -106,4 +101,4 @@ interface BackgroundImage {
|
|
|
106
101
|
indent?: ImageIndent;
|
|
107
102
|
alt?: AltText;
|
|
108
103
|
}
|
|
109
|
-
export { Headline, ModuleSubheadline, ModuleText, HighlightText, ColorNeutral, Height, Textbox, Label, Icon, URL, GridLayer, MobileImageSource, TabletImageSource, DesktopImageSource, OptionalSource, ImageIndent, AltText, ModuleAligment,
|
|
104
|
+
export { Headline, ModuleSubheadline, ModuleText, HighlightText, ColorNeutral, Height, Textbox, Label, Icon, URL, GridLayer, MobileImageSource, TabletImageSource, DesktopImageSource, OptionalSource, ImageIndent, AltText, ModuleAligment, HeroProps, Button, BackgroundImage };
|
|
@@ -3,18 +3,18 @@
|
|
|
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 { CtaProps } from "./CtaProps-
|
|
6
|
+
import { CtaProps } from "./CtaProps-789f8508.js";
|
|
7
7
|
import { DividerProps } from "./DividerProps-2ef31901.js";
|
|
8
8
|
import { FaqProps } from "./FaqProps-ad618cd5.js";
|
|
9
9
|
import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
|
|
10
10
|
import { GalleryProps } from "./GalleryProps-76e7de44.js";
|
|
11
|
-
import { HeroProps } from "./HeroProps-
|
|
11
|
+
import { HeroProps } from "./HeroProps-2ff0068e.js";
|
|
12
12
|
import { HtmlProps } from "./HtmlProps-9d091769.js";
|
|
13
13
|
import { ImageStoryProps } from "./ImageStoryProps-e853e1e7.js";
|
|
14
14
|
import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
|
|
15
15
|
import { LogosProps } from "./LogosProps-f9474fe2.js";
|
|
16
16
|
import { MosaicProps } from "./MosaicProps-d52c7151.js";
|
|
17
|
-
import { SliderProps } from "./SliderProps-
|
|
17
|
+
import { SliderProps } from "./SliderProps-789f8508.js";
|
|
18
18
|
import { StatsProps } from "./StatsProps-bf5ef578.js";
|
|
19
19
|
import { TeaserCardProps } from "./TeaserCardProps-994cb119.js";
|
|
20
20
|
import { TestimonialsProps } from "./TestimonialsProps-e344f597.js";
|
|
@@ -3,10 +3,10 @@
|
|
|
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 { CtaProps } from "./CtaProps-
|
|
6
|
+
import { CtaProps } from "./CtaProps-789f8508.js";
|
|
7
7
|
import { FeaturesProps } from "./FeaturesProps-a9041d97.js";
|
|
8
8
|
import { GalleryProps } from "./GalleryProps-76e7de44.js";
|
|
9
|
-
import { HeroProps } from "./HeroProps-
|
|
9
|
+
import { HeroProps } from "./HeroProps-2ff0068e.js";
|
|
10
10
|
import { ImageTextProps } from "./ImageTextProps-9286cca4.js";
|
|
11
11
|
import { LogosProps } from "./LogosProps-f9474fe2.js";
|
|
12
12
|
import { StatsProps } from "./StatsProps-bf5ef578.js";
|
|
@@ -416,12 +416,6 @@
|
|
|
416
416
|
"type": "boolean",
|
|
417
417
|
"default": false
|
|
418
418
|
},
|
|
419
|
-
"inverted": {
|
|
420
|
-
"title": "Inverted",
|
|
421
|
-
"description": "Toggle inversion of the component",
|
|
422
|
-
"type": "boolean",
|
|
423
|
-
"default": false
|
|
424
|
-
},
|
|
425
419
|
"type": {
|
|
426
420
|
"const": "cta"
|
|
427
421
|
}
|
|
@@ -884,19 +878,15 @@
|
|
|
884
878
|
"enum": [
|
|
885
879
|
"center",
|
|
886
880
|
"below",
|
|
881
|
+
"offset",
|
|
887
882
|
"left",
|
|
888
883
|
"right",
|
|
889
|
-
"corner"
|
|
884
|
+
"corner",
|
|
885
|
+
"bottom"
|
|
890
886
|
],
|
|
891
887
|
"type": "string",
|
|
892
888
|
"default": "bottom"
|
|
893
889
|
},
|
|
894
|
-
"inverted": {
|
|
895
|
-
"type": "boolean",
|
|
896
|
-
"title": "Inverted",
|
|
897
|
-
"description": "Inverted color scheme for the box",
|
|
898
|
-
"default": false
|
|
899
|
-
},
|
|
900
890
|
"type": {
|
|
901
891
|
"const": "hero"
|
|
902
892
|
}
|
|
@@ -1712,12 +1702,6 @@
|
|
|
1712
1702
|
"type": "boolean",
|
|
1713
1703
|
"default": false
|
|
1714
1704
|
},
|
|
1715
|
-
"inverted": {
|
|
1716
|
-
"title": "Inverted",
|
|
1717
|
-
"description": "Toggle inversion of the component",
|
|
1718
|
-
"type": "boolean",
|
|
1719
|
-
"default": false
|
|
1720
|
-
},
|
|
1721
1705
|
"type": {
|
|
1722
1706
|
"const": "cta"
|
|
1723
1707
|
}
|
|
@@ -2097,19 +2081,15 @@
|
|
|
2097
2081
|
"enum": [
|
|
2098
2082
|
"center",
|
|
2099
2083
|
"below",
|
|
2084
|
+
"offset",
|
|
2100
2085
|
"left",
|
|
2101
2086
|
"right",
|
|
2102
|
-
"corner"
|
|
2087
|
+
"corner",
|
|
2088
|
+
"bottom"
|
|
2103
2089
|
],
|
|
2104
2090
|
"type": "string",
|
|
2105
2091
|
"default": "bottom"
|
|
2106
2092
|
},
|
|
2107
|
-
"inverted": {
|
|
2108
|
-
"type": "boolean",
|
|
2109
|
-
"title": "Inverted",
|
|
2110
|
-
"description": "Inverted color scheme for the box",
|
|
2111
|
-
"default": false
|
|
2112
|
-
},
|
|
2113
2093
|
"type": {
|
|
2114
2094
|
"const": "hero"
|
|
2115
2095
|
}
|
|
@@ -3915,12 +3895,6 @@
|
|
|
3915
3895
|
"type": "boolean",
|
|
3916
3896
|
"default": false
|
|
3917
3897
|
},
|
|
3918
|
-
"inverted": {
|
|
3919
|
-
"title": "Inverted",
|
|
3920
|
-
"description": "Toggle inversion of the component",
|
|
3921
|
-
"type": "boolean",
|
|
3922
|
-
"default": false
|
|
3923
|
-
},
|
|
3924
3898
|
"type": {
|
|
3925
3899
|
"const": "cta"
|
|
3926
3900
|
}
|
|
@@ -700,12 +700,6 @@
|
|
|
700
700
|
"type": "boolean",
|
|
701
701
|
"default": false
|
|
702
702
|
},
|
|
703
|
-
"inverted": {
|
|
704
|
-
"title": "Inverted",
|
|
705
|
-
"description": "Toggle inversion of the component",
|
|
706
|
-
"type": "boolean",
|
|
707
|
-
"default": false
|
|
708
|
-
},
|
|
709
703
|
"type": {
|
|
710
704
|
"const": "cta"
|
|
711
705
|
}
|
|
@@ -1168,19 +1162,15 @@
|
|
|
1168
1162
|
"enum": [
|
|
1169
1163
|
"center",
|
|
1170
1164
|
"below",
|
|
1165
|
+
"offset",
|
|
1171
1166
|
"left",
|
|
1172
1167
|
"right",
|
|
1173
|
-
"corner"
|
|
1168
|
+
"corner",
|
|
1169
|
+
"bottom"
|
|
1174
1170
|
],
|
|
1175
1171
|
"type": "string",
|
|
1176
1172
|
"default": "bottom"
|
|
1177
1173
|
},
|
|
1178
|
-
"inverted": {
|
|
1179
|
-
"type": "boolean",
|
|
1180
|
-
"title": "Inverted",
|
|
1181
|
-
"description": "Inverted color scheme for the box",
|
|
1182
|
-
"default": false
|
|
1183
|
-
},
|
|
1184
1174
|
"type": {
|
|
1185
1175
|
"const": "hero"
|
|
1186
1176
|
}
|
|
@@ -1996,12 +1986,6 @@
|
|
|
1996
1986
|
"type": "boolean",
|
|
1997
1987
|
"default": false
|
|
1998
1988
|
},
|
|
1999
|
-
"inverted": {
|
|
2000
|
-
"title": "Inverted",
|
|
2001
|
-
"description": "Toggle inversion of the component",
|
|
2002
|
-
"type": "boolean",
|
|
2003
|
-
"default": false
|
|
2004
|
-
},
|
|
2005
1989
|
"type": {
|
|
2006
1990
|
"const": "cta"
|
|
2007
1991
|
}
|
|
@@ -2381,19 +2365,15 @@
|
|
|
2381
2365
|
"enum": [
|
|
2382
2366
|
"center",
|
|
2383
2367
|
"below",
|
|
2368
|
+
"offset",
|
|
2384
2369
|
"left",
|
|
2385
2370
|
"right",
|
|
2386
|
-
"corner"
|
|
2371
|
+
"corner",
|
|
2372
|
+
"bottom"
|
|
2387
2373
|
],
|
|
2388
2374
|
"type": "string",
|
|
2389
2375
|
"default": "bottom"
|
|
2390
2376
|
},
|
|
2391
|
-
"inverted": {
|
|
2392
|
-
"type": "boolean",
|
|
2393
|
-
"title": "Inverted",
|
|
2394
|
-
"description": "Inverted color scheme for the box",
|
|
2395
|
-
"default": false
|
|
2396
|
-
},
|
|
2397
2377
|
"type": {
|
|
2398
2378
|
"const": "hero"
|
|
2399
2379
|
}
|
|
@@ -3682,12 +3662,6 @@
|
|
|
3682
3662
|
"type": "boolean",
|
|
3683
3663
|
"default": false
|
|
3684
3664
|
},
|
|
3685
|
-
"inverted": {
|
|
3686
|
-
"title": "Inverted",
|
|
3687
|
-
"description": "Toggle inversion of the component",
|
|
3688
|
-
"type": "boolean",
|
|
3689
|
-
"default": false
|
|
3690
|
-
},
|
|
3691
3665
|
"type": {
|
|
3692
3666
|
"const": "cta"
|
|
3693
3667
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.dsa-button {
|
|
2
|
-
--dsa-button--padding: 0.
|
|
2
|
+
--dsa-button--padding: 0.75em 1.5em;
|
|
3
3
|
--dsa-button--border-width: var(--ks-border-width-default);
|
|
4
4
|
--dsa-button--border-radius: var(--ks-border-radius-control);
|
|
5
|
-
--dsa-button--font-weight: var(--ks-font-weight-
|
|
5
|
+
--dsa-button--font-weight: var(--ks-font-weight-semi-bold);
|
|
6
6
|
--dsa-button--text-transform: default;
|
|
7
7
|
--dsa-button_small--font: var(--ks-font-interface-s);
|
|
8
8
|
--dsa-button_medium--font: var(--ks-font-interface-m);
|
|
@@ -131,12 +131,6 @@
|
|
|
131
131
|
"description": "Toggle padding of the content",
|
|
132
132
|
"type": "boolean",
|
|
133
133
|
"default": false
|
|
134
|
-
},
|
|
135
|
-
"inverted": {
|
|
136
|
-
"title": "Inverted",
|
|
137
|
-
"description": "Toggle inversion of the component",
|
|
138
|
-
"type": "boolean",
|
|
139
|
-
"default": false
|
|
140
134
|
}
|
|
141
135
|
},
|
|
142
136
|
"additionalProperties": false
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
|
-
import { CtaProps } from "../../CtaProps-
|
|
3
|
+
import { CtaProps } from "../../CtaProps-789f8508.js";
|
|
4
4
|
declare const CtaContextDefault: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const CtaContext: import("react").Context<import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const Cta: import("react").ForwardRefExoticComponent<CtaProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -8,7 +8,7 @@ import { useButtonGroup } from '../button-group/index.js';
|
|
|
8
8
|
import { Container } from '@kickstartds/core/lib/container';
|
|
9
9
|
import '@kickstartds/base/lib/button-group';
|
|
10
10
|
|
|
11
|
-
const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, align, padding, order, buttons = [],
|
|
11
|
+
const CtaContextDefault = forwardRef(({ headline, highlightText = false, sub, image, text, textAlign, backgroundImage, backgroundColor, colorNeutral, align, padding, order, buttons = [], ...rest }, ref) => {
|
|
12
12
|
const ButtonGroup = useButtonGroup();
|
|
13
13
|
return (jsx(ButtonContext.Provider
|
|
14
14
|
// @ts-expect-error
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
--dsa-footer__link--font-weight: var(--dsa-link--font-weight);
|
|
11
11
|
--dsa-footer__link--color: var(--dsa-link--color);
|
|
12
12
|
--dsa-footer__link--text-tecoration: none;
|
|
13
|
-
--dsa-footer__link--text-tecoration_hover:
|
|
13
|
+
--dsa-footer__link--text-tecoration_hover: underline;
|
|
14
14
|
--dsa-footer__logo--height: 1.5rem;
|
|
15
15
|
}
|
|
16
16
|
@media (min-width: 62em) {
|
|
@@ -107,51 +107,43 @@
|
|
|
107
107
|
"examples": [
|
|
108
108
|
[
|
|
109
109
|
{
|
|
110
|
-
"label": "
|
|
110
|
+
"label": "Active Item",
|
|
111
111
|
"url": "#",
|
|
112
112
|
"active": true
|
|
113
113
|
},
|
|
114
114
|
{
|
|
115
|
-
"label": "
|
|
115
|
+
"label": "Navigation Item",
|
|
116
|
+
"url": "#"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"label": "Dropdown",
|
|
116
120
|
"url": "#",
|
|
117
121
|
"items": [
|
|
118
122
|
{
|
|
119
|
-
"label": "
|
|
123
|
+
"label": "Level 2 Item",
|
|
120
124
|
"url": "#"
|
|
121
125
|
},
|
|
122
126
|
{
|
|
123
|
-
"label": "
|
|
127
|
+
"label": "Active Item",
|
|
124
128
|
"active": true,
|
|
125
129
|
"url": "#"
|
|
126
130
|
},
|
|
127
131
|
{
|
|
128
|
-
"label": "
|
|
132
|
+
"label": "An Item with a longer Label",
|
|
129
133
|
"url": "#"
|
|
130
134
|
},
|
|
131
135
|
{
|
|
132
|
-
"label": "
|
|
136
|
+
"label": "And One last one",
|
|
133
137
|
"url": "#"
|
|
134
138
|
}
|
|
135
139
|
]
|
|
136
140
|
},
|
|
137
141
|
{
|
|
138
|
-
"label": "
|
|
139
|
-
"url": "#"
|
|
140
|
-
},
|
|
141
|
-
{
|
|
142
|
-
"label": "Bonusprogramm",
|
|
143
|
-
"url": "#"
|
|
144
|
-
},
|
|
145
|
-
{
|
|
146
|
-
"label": "News",
|
|
147
|
-
"url": "#"
|
|
148
|
-
},
|
|
149
|
-
{
|
|
150
|
-
"label": "Jobs",
|
|
142
|
+
"label": "One more Item",
|
|
151
143
|
"url": "#"
|
|
152
144
|
},
|
|
153
145
|
{
|
|
154
|
-
"label": "
|
|
146
|
+
"label": "Last Item",
|
|
155
147
|
"url": "#"
|
|
156
148
|
}
|
|
157
149
|
]
|
|
@@ -120,51 +120,43 @@
|
|
|
120
120
|
"examples": [
|
|
121
121
|
[
|
|
122
122
|
{
|
|
123
|
-
"label": "
|
|
123
|
+
"label": "Active Item",
|
|
124
124
|
"url": "#",
|
|
125
125
|
"active": true
|
|
126
126
|
},
|
|
127
127
|
{
|
|
128
|
-
"label": "
|
|
128
|
+
"label": "Navigation Item",
|
|
129
|
+
"url": "#"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"label": "Dropdown",
|
|
129
133
|
"url": "#",
|
|
130
134
|
"items": [
|
|
131
135
|
{
|
|
132
|
-
"label": "
|
|
136
|
+
"label": "Level 2 Item",
|
|
133
137
|
"url": "#"
|
|
134
138
|
},
|
|
135
139
|
{
|
|
136
|
-
"label": "
|
|
140
|
+
"label": "Active Item",
|
|
137
141
|
"active": true,
|
|
138
142
|
"url": "#"
|
|
139
143
|
},
|
|
140
144
|
{
|
|
141
|
-
"label": "
|
|
145
|
+
"label": "An Item with a longer Label",
|
|
142
146
|
"url": "#"
|
|
143
147
|
},
|
|
144
148
|
{
|
|
145
|
-
"label": "
|
|
149
|
+
"label": "And One last one",
|
|
146
150
|
"url": "#"
|
|
147
151
|
}
|
|
148
152
|
]
|
|
149
153
|
},
|
|
150
154
|
{
|
|
151
|
-
"label": "
|
|
152
|
-
"url": "#"
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
"label": "Bonusprogramm",
|
|
156
|
-
"url": "#"
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
"label": "News",
|
|
160
|
-
"url": "#"
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
"label": "Jobs",
|
|
155
|
+
"label": "One more Item",
|
|
164
156
|
"url": "#"
|
|
165
157
|
},
|
|
166
158
|
{
|
|
167
|
-
"label": "
|
|
159
|
+
"label": "Last Item",
|
|
168
160
|
"url": "#"
|
|
169
161
|
}
|
|
170
162
|
]
|
|
@@ -20,24 +20,19 @@
|
|
|
20
20
|
--dsa-hero__textbox--border-radius: var(--ks-border-radius-card);
|
|
21
21
|
--dsa-hero__textbox--max-width: var(--dsa-content--width_narrow);
|
|
22
22
|
--dsa-hero__textbox--padding: var(--ks-spacing-inset-squish-xl);
|
|
23
|
-
--dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
|
|
24
|
-
--dsa-hero_below__textbox--offset: -10%;
|
|
25
23
|
--dsa-hero__overlay--background: radial-gradient(
|
|
26
24
|
50% 125% at 100% 0%,
|
|
27
25
|
var(--ks-color-primary-alpha-5) 0%,
|
|
28
|
-
var(--ks-color-
|
|
26
|
+
var(--ks-color-bg-alpha-4) 100%
|
|
29
27
|
);
|
|
30
|
-
--dsa-
|
|
28
|
+
--dsa-hero_offset__textbox--max-width: var(--dsa-content--width_default);
|
|
29
|
+
--dsa-hero_offset__textbox--offset: -10%;
|
|
30
|
+
--dsa-hero_offset__overlay--background: linear-gradient(
|
|
31
31
|
0deg,
|
|
32
32
|
var(--ks-background-color-default) 15%,
|
|
33
33
|
transparent 50%
|
|
34
34
|
);
|
|
35
|
-
--dsa-
|
|
36
|
-
var(--dsa-hero__textbox--max-width) var(--dsa-hero__textbox--max-width) at
|
|
37
|
-
calc(var(--dsa-section__content--padding) * 2) 50%,
|
|
38
|
-
var(--ks-color-bg) 100%,
|
|
39
|
-
var(--ks-color-primary-alpha-5) 100%
|
|
40
|
-
);
|
|
35
|
+
--dsa-hero_below__textbox--max-width: var(--dsa-content--width_default);
|
|
41
36
|
}
|
|
42
37
|
@container hero (min-width: 640px) {
|
|
43
38
|
.dsa-hero {
|
|
@@ -98,15 +93,9 @@
|
|
|
98
93
|
radial-gradient(50% 125% at 100% 0%, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-bg-alpha-4) 100%)
|
|
99
94
|
);
|
|
100
95
|
}
|
|
101
|
-
.c-visual.dsa-hero.dsa-hero--content-
|
|
96
|
+
.c-visual.dsa-hero.dsa-hero--content-offset {
|
|
102
97
|
--c-visual_overlay--background: var(
|
|
103
|
-
--dsa-hero--
|
|
104
|
-
linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
.c-visual.dsa-hero.dsa-hero--content-left {
|
|
108
|
-
--c-visual_overlay--background: var(
|
|
109
|
-
--dsa-hero--left__overlay--background,
|
|
98
|
+
--dsa-hero--offset__overlay--background,
|
|
110
99
|
linear-gradient(0deg, var(--ks-background-color-default) 15%, transparent 50%)
|
|
111
100
|
);
|
|
112
101
|
}
|
|
@@ -144,40 +133,47 @@
|
|
|
144
133
|
filter: drop-shadow(var(--dsa-overlay-text--shadow, 0 0 10px var(--ks-color-bg-inverted-alpha-3-base)));
|
|
145
134
|
}
|
|
146
135
|
@container hero (min-width: 640px) {
|
|
147
|
-
.c-visual.dsa-hero.dsa-hero--content-below .c-visual__media {
|
|
136
|
+
.c-visual.dsa-hero.dsa-hero--content-below .c-visual__media, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__media {
|
|
148
137
|
position: relative;
|
|
149
138
|
}
|
|
150
|
-
.c-visual.dsa-hero.dsa-hero--content-below .c-visual__media .c-visual__image {
|
|
139
|
+
.c-visual.dsa-hero.dsa-hero--content-below .c-visual__media .c-visual__image, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__media .c-visual__image {
|
|
151
140
|
height: var(--c-visual--min-height);
|
|
152
141
|
}
|
|
153
|
-
.c-visual.dsa-hero.dsa-hero--content-below .c-visual__content {
|
|
154
|
-
padding: 0 var(--dsa-content--horizontal-spacing);
|
|
155
|
-
margin-top: var(--dsa-hero_below__textbox--offset, -10%);
|
|
142
|
+
.c-visual.dsa-hero.dsa-hero--content-below .c-visual__content, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content {
|
|
156
143
|
position: relative;
|
|
157
144
|
}
|
|
145
|
+
.c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box, .c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content .c-visual__box {
|
|
146
|
+
--c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
|
|
147
|
+
}
|
|
158
148
|
.c-visual.dsa-hero.dsa-hero--content-below .c-visual__content .c-visual__box {
|
|
159
149
|
--c-visual_box--max-width: var(--dsa-hero_below__textbox--max-width, var(--dsa-content--width_default));
|
|
160
150
|
}
|
|
151
|
+
.c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content {
|
|
152
|
+
margin-top: var(--dsa-hero_offset__textbox--offset, -10%);
|
|
153
|
+
}
|
|
154
|
+
.c-visual.dsa-hero.dsa-hero--content-offset .c-visual__content .c-visual__box {
|
|
155
|
+
--c-visual_box--max-width: var(--dsa-hero_offset__textbox--max-width, var(--dsa-content--width_default));
|
|
156
|
+
}
|
|
161
157
|
.c-visual.dsa-hero.c-visual--no-crop {
|
|
162
158
|
--c-visual--min-height: 0;
|
|
163
159
|
}
|
|
164
160
|
@container hero (min-width: 640px) {
|
|
165
|
-
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image {
|
|
161
|
+
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--no-crop .c-visual__media .c-visual__image {
|
|
166
162
|
height: fit-content;
|
|
167
163
|
}
|
|
168
|
-
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image img {
|
|
164
|
+
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--no-crop .c-visual__media .c-visual__image img, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--no-crop .c-visual__media .c-visual__image img {
|
|
169
165
|
object-fit: contain;
|
|
170
166
|
height: auto;
|
|
171
167
|
}
|
|
172
168
|
}
|
|
173
|
-
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--full {
|
|
169
|
+
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--full, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--full {
|
|
174
170
|
height: fit-content;
|
|
175
171
|
}
|
|
176
172
|
@container hero (min-width: 640px) {
|
|
177
|
-
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image {
|
|
173
|
+
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--full .c-visual__media .c-visual__image {
|
|
178
174
|
height: fit-content;
|
|
179
175
|
}
|
|
180
|
-
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image img {
|
|
176
|
+
.c-visual.dsa-hero.dsa-hero--content-below.c-visual--full .c-visual__media .c-visual__image img, .c-visual.dsa-hero.dsa-hero--content-offset.c-visual--full .c-visual__media .c-visual__image img {
|
|
181
177
|
object-fit: cover;
|
|
182
178
|
height: 100vh;
|
|
183
179
|
}
|
|
@@ -156,19 +156,15 @@
|
|
|
156
156
|
"enum": [
|
|
157
157
|
"center",
|
|
158
158
|
"below",
|
|
159
|
+
"offset",
|
|
159
160
|
"left",
|
|
160
161
|
"right",
|
|
161
|
-
"corner"
|
|
162
|
+
"corner",
|
|
163
|
+
"bottom"
|
|
162
164
|
],
|
|
163
165
|
"type": "string",
|
|
164
166
|
"default": "bottom"
|
|
165
167
|
},
|
|
166
|
-
"inverted": {
|
|
167
|
-
"type": "boolean",
|
|
168
|
-
"title": "Inverted",
|
|
169
|
-
"description": "Inverted color scheme for the box",
|
|
170
|
-
"default": false
|
|
171
|
-
},
|
|
172
168
|
"type": {
|
|
173
169
|
"const": "hero"
|
|
174
170
|
}
|
|
@@ -73,15 +73,17 @@
|
|
|
73
73
|
"textPosition": {
|
|
74
74
|
"title": "Module aligment",
|
|
75
75
|
"description": "Choose the alginment of the module content",
|
|
76
|
-
"enum": [
|
|
76
|
+
"enum": [
|
|
77
|
+
"center",
|
|
78
|
+
"below",
|
|
79
|
+
"offset",
|
|
80
|
+
"left",
|
|
81
|
+
"right",
|
|
82
|
+
"corner",
|
|
83
|
+
"bottom"
|
|
84
|
+
],
|
|
77
85
|
"type": "string",
|
|
78
86
|
"default": "bottom"
|
|
79
|
-
},
|
|
80
|
-
"inverted": {
|
|
81
|
-
"type": "boolean",
|
|
82
|
-
"title": "Inverted",
|
|
83
|
-
"description": "Inverted color scheme for the box",
|
|
84
|
-
"default": false
|
|
85
87
|
}
|
|
86
88
|
},
|
|
87
89
|
"additionalProperties": false
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
|
-
import { HeroProps } from "../../HeroProps-
|
|
3
|
+
import { HeroProps } from "../../HeroProps-2ff0068e.js";
|
|
4
4
|
declare const HeroContextDefault: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
5
|
declare const HeroContext: import("react").Context<import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>>;
|
|
6
6
|
declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|