@kickstartds/ds-agency-premium 1.6.68 → 1.6.69--canary.45.1732.0

package/dist/components/section/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { HTMLAttributes, FC, PropsWithChildren } from "react";
-import { SectionProps } from "../../SectionProps-1cfcf6e8.js";
+import { SectionProps } from "../../SectionProps-7caa223c.js";
 declare const SectionContextDefault: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
 declare const SectionContext: import("react").Context<import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>>;
 declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/section/index.js

@@ -7,7 +7,7 @@ import { SectionContextDefault as SectionContextDefault$1, SectionContext as Sec
 import { identifier } from './js/Section.client.js';
 import '@kickstartds/core/lib/component';
 
-const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", backgroundImage, spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
+const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", transition, backgroundImage, spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
     const { large: headlineLarge = false, ...headlineRest } = {
         align: "left",
         ...headline,
@@ -30,7 +30,15 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
                                 ? "symmetric-glow"
                                 : style === "anchorGlow"
                                     ? "anchor-glow"
-                                    : style}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor, backgroundImage: backgroundImage, content: content, headline: {
+                                    : style}`, transition &&
+            transition !== "none" &&
+            `dsa-section--transition-${transition}`, headerSpacing && "dsa-section--header-spacing", spotlight && "dsa-section--spotlight", className), background: backgroundColor === "default"
+            ? "default"
+            : backgroundColor === "accent"
+                ? "accent"
+                : backgroundColor === "bold"
+                    ? "bold"
+                    : undefined, backgroundImage: backgroundImage, content: content, headline: {
             ...headlineRest,
             spaceAfter: "large",
             // @ts-expect-error
@@ -41,7 +49,7 @@ const SectionContextDefault = forwardRef(({ headline, content, headerSpacing, wi
             buttons,
             // @ts-expect-error
             items: buttons,
-        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }));
+        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: style === "colorful" ? true : inverted, ref: ref, children: props.children }));
 });
 const SectionContext = createContext(SectionContextDefault);
 const Section = forwardRef((props, ref) => {

package/dist/components/section/section.css

@@ -11,7 +11,7 @@
   --dsa-section__col--min-width_medium: var(--dsa-tile--width_medium);
   --dsa-section__col--min-width_large: var(--dsa-tile--width_large);
   --dsa-section__col--min-width_largest: var(--dsa-tile--width_largest);
-  --dsa-section--space_default: var(--ks-spacing-xxl);
+  --dsa-section--space_default: var(--dsa-content--vertical-spacing);
   --dsa-section--space_small: calc(var(--ks-spacing-xxl) / 2);
   --dsa-section--gutter_small: var(--ks-spacing-s);
   --dsa-section--gutter_default: var(--ks-spacing-m);
@@ -22,10 +22,22 @@
   --dsa-section__content--width_wide: var(--dsa-content--width_wide);
   --dsa-section__content--width_max: 100vw;
   --dsa-section__content--width_full: 100vw;
-  --dsa-section__content--padding: var(--dsa-content--spacing);
+  --dsa-section__content--padding: var(--dsa-content--horizontal-spacing);
   --dsa-section--background-color_default: var(--ks-background-color-default);
   --dsa-section--background-color_accent: var(--ks-background-color-accent);
   --dsa-section--background-color_bold: var(--ks-background-color-bold);
+  --dsa-section--transition_to-default: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default) 75%
+  );
+  --dsa-section--transition_to-accent: linear-gradient(178deg, transparent 75%, var(--ks-background-color-accent) 75%);
+  --dsa-section--transition_to-bold: linear-gradient(178deg, transparent 75%, var(--ks-background-color-bold) 75%);
+  --dsa-section--transition_to-inverted: linear-gradient(
+    178deg,
+    transparent 75%,
+    var(--ks-background-color-default-inverted) 75%
+  );
   --dsa-section__slider-arrow--color: var(--ks-text-color-interface-interactive);
   --dsa-section__slider-arrow--size: 2rem;
   --dsa-section__slider-arrow--padding: 0.5em;
@@ -33,45 +45,8 @@
   --dsa-section__slider-arrow--opacity_hover: 1;
   --dsa-section__slider-arrow--opacity_disabled: 0.3;
   --dsa-section__slider-arrow--background: transparent;
-  --dsa-section_stagelights--background-image: radial-gradient(
-      50% 150% at 100% -50%,
-      var(--ks-color-primary-inverted-alpha-3) 0%,
-      transparent 100%
-    ),
-    radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%);
-  --dsa-section_anchor-glow--background-image: radial-gradient(
-    50% 50% at 50% 100%,
-    var(--ks-color-secondary-alpha-5) 0%,
-    transparent 100%
-  );
-  --dsa-section_symmetric-glow--background-image: radial-gradient(
-      20% 50% at 100% 50%,
-      var(--ks-color-primary-alpha-5) 0%,
-      transparent 100%
-    ),
-    radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%);
-  --dsa-section_accent-transition--background-image: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ks-background-color-accent) 100%
-  );
-  --dsa-section_bold-transition--background-image: linear-gradient(
-    180deg,
-    transparent 0%,
-    var(--ks-background-color-bold) 100%
-  );
-  --dsa-section_vertical-gradient--background-image: linear-gradient(
-    0deg,
-    var(--ks-color-primary-alpha-5) 0%,
-    var(--ks-color-secondary-alpha-5) 100%
-  );
-  --dsa-section_horizontal-gradient--background-image: linear-gradient(
-    90deg,
-    var(--ks-color-primary-alpha-5) 0%,
-    var(--ks-color-secondary-alpha-5) 100%
-  );
-  --dsa-section__spotlight--size: 150px;
-  --dsa-section__spotlight--blur: 100%;
+  --dsa-section__spotlight--size: 50px;
+  --dsa-section__spotlight--blur: 0%;
   --dsa-section__spotlight--color: var(--ks-color-primary-alpha-5);
 }
 
@@ -128,6 +103,18 @@
 .l-section.dsa-section.l-section--bold {
   background-color: var(--dsa-section--background-color_bold, var(--ks-background-color-bold));
 }
+.l-section.dsa-section.dsa-section--transition-to-accent {
+  background-image: var(--dsa-section--transition_to-accent, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
+}
+.l-section.dsa-section.dsa-section--transition-to-bold {
+  background-image: var(--dsa-section--transition_to-bold, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
+}
+.l-section.dsa-section.dsa-section--transition-to-default {
+  background-image: var(--dsa-section--transition_to-default, linear-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
+}
+.l-section.dsa-section.dsa-section--transition-to-inverted {
+  background-image: var(--dsa-section--transition_to-inverted, linear-gradient(180deg, transparent 80%, var(--ks-background-color-default-inverted) 80%));
+}
 .l-section.dsa-section--header-spacing {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space_default));
 }
@@ -137,26 +124,19 @@
 .l-section.dsa-section--header-spacing.l-section--space-before-small {
   padding-top: calc(var(--dsa-header--height) + var(--dsa-section--space-small));
 }
-.l-section.dsa-section-style--stagelights {
-  background-image: var(--dsa-section_stagelights--background-image, radial-gradient(50% 150% at 100% -50%, var(--ks-color-primary-inverted-alpha-3) 0%, transparent 100%), radial-gradient(50% 150% at 0% -50%, var(--ks-color-primary-alpha-3) 0%, transparent 100%));
-}
-.l-section.dsa-section-style--anchor-glow {
-  background-image: var(--dsa-section_anchor-glow--background-image, radial-gradient(50% 50% at 50% 100%, var(--ks-color-secondary-alpha-5) 0%, transparent 100%));
-}
-.l-section.dsa-section-style--symmetric-glow {
-  background-image: var(--dsa-section_symmetric-glow--background-image, radial-gradient(20% 50% at 100% 50%, var(--ks-color-primary-alpha-5) 0%, transparent 100%), radial-gradient(20% 50% at 0% 50%, var(--ks-color-primary-inverted-alpha-5) 0%, transparent 100%));
-}
-.l-section.dsa-section-style--accent-transition {
-  background-image: var(--dsa-section_accent-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%));
+.l-section.dsa-section-style--framed {
+  background-color: var(--ks-background-color-accent);
 }
-.l-section.dsa-section-style--bold-transition {
-  background-image: var(--dsa-section_bold-transition--background-image, linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%));
+.l-section.dsa-section-style--framed .l-section__container--content .l-section__content {
+  padding: var(--dsa-section--space_default);
+  background-color: var(--ks-background-color-default);
+  border-radius: var(--ks-border-radius-surface);
 }
-.l-section.dsa-section-style--vertical-gradient {
-  background-image: var(--dsa-section_vertical-gradient--background-image, linear-gradient(0deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
+.l-section.dsa-section-style--deko {
+  background-image: var(--dsa-section_deko--background-image, radial-gradient(180deg, transparent 0%, var(--ks-background-color-default) 100%));
 }
-.l-section.dsa-section-style--horizontal-gradient {
-  background-image: var(--dsa-section_horizontal-gradient--background-image, linear-gradient(90deg, var(--ks-color-primary-alpha-5) 0%, var(--ks-color-secondary-alpha-5) 100%));
+.l-section.dsa-section-style--colorful {
+  background-image: var(--dsa-section_colorful--background-image, linear-gradient(145deg, var(--ks-color-primary) 30%, #4aaea9 100%));
 }
 .l-section.dsa-section--spotlight {
   position: relative;

package/dist/components/section/section.schema.dereffed.json

@@ -23,15 +23,10 @@
       "title": "Style",
       "description": "Style of background",
       "enum": [
-        "stagelights",
-        "horizontalGradient",
-        "verticalGradient",
-        "accentTransition",
-        "boldTransition",
-        "symmetricGlow",
-        "anchorGlow"
-      ],
-      "default": "default"
+        "framed",
+        "deko",
+        "colorful"
+      ]
     },
     "backgroundColor": {
       "type": "string",
@@ -44,6 +39,19 @@
       ],
       "default": "default"
     },
+    "transition": {
+      "type": "string",
+      "title": "Style",
+      "description": "Color of background",
+      "enum": [
+        "none",
+        "to-default",
+        "to-accent",
+        "to-bold",
+        "to-inverted"
+      ],
+      "default": "default"
+    },
     "backgroundImage": {
       "title": "Background image",
       "description": "Background image for the whole section",
@@ -268,12 +276,6 @@
                 "default": false,
                 "type": "boolean"
               },
-              "fullWidth": {
-                "title": "Width",
-                "description": "Set the width of the content to the full width of the element",
-                "type": "boolean",
-                "default": false
-              },
               "buttons": {
                 "type": "array",
                 "items": {
@@ -294,10 +296,10 @@
                       "title": "Icon",
                       "description": "Choose an icon"
                     },
-                    "target": {
+                    "url": {
                       "type": "string",
-                      "title": "Target",
-                      "description": "Target that should be linked, makes the button behave like a link semantically",
+                      "title": "URL",
+                      "description": "The URL to link to when the button is clicked",
                       "format": "uri"
                     }
                   },
@@ -337,6 +339,17 @@
                     "title": "Alt text",
                     "description": "Image description",
                     "type": "string"
+                  },
+                  "align": {
+                    "title": "Vertical alignment of the image",
+                    "description": "Select a vertical alignment for the image",
+                    "type": "string",
+                    "enum": [
+                      "center",
+                      "top",
+                      "bottom"
+                    ],
+                    "default": "center"
                   }
                 },
                 "additionalProperties": false
@@ -371,9 +384,9 @@
                 "type": "string",
                 "default": "left"
               },
-              "contentAlign": {
+              "align": {
                 "title": "Vertical alignment of the content",
-                "description": "Select a vertical alignment for the image",
+                "description": "Select a vertical alignment for the content",
                 "type": "string",
                 "enum": [
                   "center",
@@ -382,6 +395,18 @@
                 ],
                 "default": "center"
               },
+              "padding": {
+                "title": "Padding",
+                "description": "Toggle padding of the content",
+                "type": "boolean",
+                "default": false
+              },
+              "inverted": {
+                "title": "Inverted",
+                "description": "Toggle inversion of the component",
+                "type": "boolean",
+                "default": false
+              },
               "type": {
                 "const": "cta"
               }
@@ -558,10 +583,10 @@
                     "cta": {
                       "type": "object",
                       "properties": {
-                        "target": {
+                        "url": {
                           "type": "string",
-                          "title": "Call to Action target",
-                          "description": "The CTA target",
+                          "title": "Call to Action url",
+                          "description": "The CTA url",
                           "default": "#",
                           "format": "uri"
                         },
@@ -573,6 +598,16 @@
                           "examples": [
                             "See all our partners"
                           ]
+                        },
+                        "icon": {
+                          "type": "string",
+                          "format": "icon",
+                          "title": "Icon",
+                          "description": "Icon for the link style of the cta",
+                          "examples": [
+                            "arrow-right"
+                          ],
+                          "default": "arrow-right"
                         }
                       },
                       "additionalProperties": false
@@ -646,7 +681,8 @@
                   "stack",
                   "smallTiles",
                   "largeTiles"
-                ]
+                ],
+                "default": "smallTiles"
               },
               "aspectRatio": {
                 "type": "string",
@@ -748,10 +784,10 @@
                       "title": "Icon",
                       "description": "Choose an icon"
                     },
-                    "target": {
+                    "url": {
                       "type": "string",
-                      "title": "Target",
-                      "description": "Target that should be linked, makes the button behave like a link semantically",
+                      "title": "URL",
+                      "description": "The URL to link to when the button is clicked",
                       "format": "uri"
                     }
                   },
@@ -840,6 +876,12 @@
                 "type": "string",
                 "default": "bottom"
               },
+              "inverted": {
+                "type": "boolean",
+                "title": "Inverted",
+                "description": "Inverted color scheme for the box",
+                "default": false
+              },
               "type": {
                 "const": "hero"
               }
@@ -978,10 +1020,10 @@
                         "Book a meeting"
                       ]
                     },
-                    "target": {
+                    "url": {
                       "type": "string",
-                      "title": "Target",
-                      "description": "Target that should be linked, makes the button behave like a link semantically",
+                      "title": "URL",
+                      "description": "The URL to link to when the button is clicked",
                       "format": "uri"
                     },
                     "variant": {
@@ -1378,10 +1420,10 @@
                             "Book a meeting"
                           ]
                         },
-                        "target": {
+                        "url": {
                           "type": "string",
-                          "title": "Target",
-                          "description": "Target that should be linked, makes the button behave like a link semantically",
+                          "title": "URL",
+                          "description": "The URL to link to when the button is clicked",
                           "format": "uri"
                         },
                         "icon": {
@@ -1530,12 +1572,6 @@
                           "default": false,
                           "type": "boolean"
                         },
-                        "fullWidth": {
-                          "title": "Width",
-                          "description": "Set the width of the content to the full width of the element",
-                          "type": "boolean",
-                          "default": false
-                        },
                         "buttons": {
                           "type": "array",
                           "items": {
@@ -1556,10 +1592,10 @@
                                 "title": "Icon",
                                 "description": "Choose an icon"
                               },
-                              "target": {
+                              "url": {
                                 "type": "string",
-                                "title": "Target",
-                                "description": "Target that should be linked, makes the button behave like a link semantically",
+                                "title": "URL",
+                                "description": "The URL to link to when the button is clicked",
                                 "format": "uri"
                               }
                             },
@@ -1599,6 +1635,17 @@
                               "title": "Alt text",
                               "description": "Image description",
                               "type": "string"
+                            },
+                            "align": {
+                              "title": "Vertical alignment of the image",
+                              "description": "Select a vertical alignment for the image",
+                              "type": "string",
+                              "enum": [
+                                "center",
+                                "top",
+                                "bottom"
+                              ],
+                              "default": "center"
                             }
                           },
                           "additionalProperties": false
@@ -1633,9 +1680,9 @@
                           "type": "string",
                           "default": "left"
                         },
-                        "contentAlign": {
+                        "align": {
                           "title": "Vertical alignment of the content",
-                          "description": "Select a vertical alignment for the image",
+                          "description": "Select a vertical alignment for the content",
                           "type": "string",
                           "enum": [
                             "center",
@@ -1644,6 +1691,18 @@
                           ],
                           "default": "center"
                         },
+                        "padding": {
+                          "title": "Padding",
+                          "description": "Toggle padding of the content",
+                          "type": "boolean",
+                          "default": false
+                        },
+                        "inverted": {
+                          "title": "Inverted",
+                          "description": "Toggle inversion of the component",
+                          "type": "boolean",
+                          "default": false
+                        },
                         "type": {
                           "const": "cta"
                         }
@@ -1737,10 +1796,10 @@
                               "cta": {
                                 "type": "object",
                                 "properties": {
-                                  "target": {
+                                  "url": {
                                     "type": "string",
-                                    "title": "Call to Action target",
-                                    "description": "The CTA target",
+                                    "title": "Call to Action url",
+                                    "description": "The CTA url",
                                     "default": "#",
                                     "format": "uri"
                                   },
@@ -1752,6 +1811,16 @@
                                     "examples": [
                                       "See all our partners"
                                     ]
+                                  },
+                                  "icon": {
+                                    "type": "string",
+                                    "format": "icon",
+                                    "title": "Icon",
+                                    "description": "Icon for the link style of the cta",
+                                    "examples": [
+                                      "arrow-right"
+                                    ],
+                                    "default": "arrow-right"
                                   }
                                 },
                                 "additionalProperties": false
@@ -1825,7 +1894,8 @@
                             "stack",
                             "smallTiles",
                             "largeTiles"
-                          ]
+                          ],
+                          "default": "smallTiles"
                         },
                         "aspectRatio": {
                           "type": "string",
@@ -1927,10 +1997,10 @@
                                 "title": "Icon",
                                 "description": "Choose an icon"
                               },
-                              "target": {
+                              "url": {
                                 "type": "string",
-                                "title": "Target",
-                                "description": "Target that should be linked, makes the button behave like a link semantically",
+                                "title": "URL",
+                                "description": "The URL to link to when the button is clicked",
                                 "format": "uri"
                               }
                             },
@@ -2019,6 +2089,12 @@
                           "type": "string",
                           "default": "bottom"
                         },
+                        "inverted": {
+                          "type": "boolean",
+                          "title": "Inverted",
+                          "description": "Inverted color scheme for the box",
+                          "default": false
+                        },
                         "type": {
                           "const": "hero"
                         }
@@ -2250,13 +2326,12 @@
                               "number": {
                                 "title": "Number",
                                 "description": "The number of the stat",
-                                "type": "string",
+                                "type": "integer",
                                 "examples": [
                                   1,
-                                  "5x",
                                   2,
-                                  "40%",
-                                  "bis zu 100"
+                                  3,
+                                  4
                                 ]
                               },
                               "description": {
@@ -2361,10 +2436,10 @@
                           "description": "Layout for the Teaser Card",
                           "default": "stack"
                         },
-                        "target": {
+                        "url": {
                           "type": "string",
-                          "title": "Target",
-                          "description": "Target that should be linked",
+                          "title": "Url",
+                          "description": "Url that should be linked",
                           "format": "uri"
                         },
                         "button": {
@@ -2417,7 +2492,7 @@
                       "additionalProperties": false,
                       "required": [
                         "topic",
-                        "target"
+                        "url"
                       ]
                     },
                     {
@@ -2610,13 +2685,12 @@
                     "number": {
                       "title": "Number",
                       "description": "The number of the stat",
-                      "type": "string",
+                      "type": "integer",
                       "examples": [
                         1,
-                        "5x",
                         2,
-                        "40%",
-                        "bis zu 100"
+                        3,
+                        4
                       ]
                     },
                     "description": {
@@ -2721,10 +2795,10 @@
                 "description": "Layout for the Teaser Card",
                 "default": "stack"
               },
-              "target": {
+              "url": {
                 "type": "string",
-                "title": "Target",
-                "description": "Target that should be linked",
+                "title": "Url",
+                "description": "Url that should be linked",
                 "format": "uri"
               },
               "button": {
@@ -2777,7 +2851,7 @@
             "additionalProperties": false,
             "required": [
               "topic",
-              "target"
+              "url"
             ]
           },
           {
@@ -2989,10 +3063,10 @@
                       "title": "Icon",
                       "description": "Choose an icon"
                     },
-                    "target": {
+                    "url": {
                       "type": "string",
-                      "title": "Target",
-                      "description": "Target that should be linked, makes the button behave like a link semantically",
+                      "title": "URL",
+                      "description": "The URL to link to when the button is clicked",
                       "format": "uri"
                     }
                   },
@@ -3048,8 +3122,10 @@
                 "description": "Choose the alginment of the module content",
                 "enum": [
                   "center",
+                  "bottom",
                   "left",
-                  "right"
+                  "right",
+                  "corner"
                 ],
                 "type": "string",
                 "default": "bottom"
@@ -3082,10 +3158,10 @@
               "Book a meeting"
             ]
           },
-          "target": {
+          "url": {
             "type": "string",
-            "title": "Target",
-            "description": "Target that should be linked, makes the button behave like a link semantically",
+            "title": "URL",
+            "description": "The URL to link to when the button is clicked",
             "format": "uri"
           },
           "variant": {