@kickstartds/ds-agency-premium 1.0.1

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

@@ -0,0 +1,147 @@
+/// <reference types="react" />
+import { HTMLAttributes, FC, PropsWithChildren } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+import { HeroProps } from "../../HeroProps-cf82a16d.js";
+import { CtaProps } from "../../CtaProps-93230a76.js";
+import { MosaicProps } from "../../MosaicProps-aacb9422.js";
+import { FaqProps } from "../../FaqProps-ad618cd5.js";
+import { FeaturesProps } from "../../FeaturesProps-79dea880.js";
+import { GalleryProps } from "../../GalleryProps-76e7de44.js";
+import { HeadlineProps } from "../../HeadlineProps-d413a2cc.js";
+import { ImageStoryProps } from "../../ImageStoryProps-03ff6d21.js";
+import { SplitProps } from "../../SplitProps-89ef39c4.js";
+import { StatsProps } from "../../StatsProps-afa48599.js";
+import { TeaserCardProps } from "../../TeaserCardProps-b52479e5.js";
+import { TestimonialsProps } from "../../TestimonialsProps-d27ae4b4.js";
+import { TextProps } from "../../TextProps-a23170d2.js";
+import { VideoCurtainProps } from "../../VideoCurtainProps-6c625a69.js";
+import { ImageTextProps } from "../../ImageTextProps-9286cca4.js";
+import { LogosProps } from "../../LogosProps-8af8b3c7.js";
+import { ButtonProps } from "../../ButtonProps-03ff6d21.js";
+/**
+ * Width of section to use
+ */
+type Width = "full" | "max" | "wide" | "default" | "narrow";
+/**
+ * Style of background
+ */
+type Style = "stagelights" | "horizontalGradient" | "verticalGradient" | "accentTransition" | "boldTransition" | "symmetricGlow" | "anchorGlow";
+/**
+ * Color of background
+ */
+type Style1 = "default" | "accent" | "bold";
+/**
+ * Show spotlight behind cursor
+ */
+type Spotlight = boolean;
+/**
+ * Amount of spacing before the section
+ */
+type SpaceBefore = "default" | "small" | "none";
+/**
+ * Amount of spacing after the section
+ */
+type SpaceAfter = "default" | "small" | "none";
+/**
+ * Whether to invert the section
+ */
+type Inverted = boolean;
+/**
+ * Reserve additional spacing for a floating header
+ */
+type HeaderSpacing = boolean;
+/**
+ * Headline Text for the section
+ */
+type Headline = string;
+/**
+ * Make the headline larger
+ */
+type LargeHeadline = boolean;
+/**
+ * Width of headline to use
+ */
+type HeadlineWidth = "unset" | "narrow" | "default" | "wide";
+/**
+ * Choose the text alignment for the headline
+ */
+type HeadlineTextAlignment = "left" | "center" | "right";
+/**
+ * Choose an alignment for positioning the headline
+ */
+type HeadlineAlignment = "left" | "center" | "right";
+/**
+ * Subheadline for the section
+ */
+type Subheadline = string;
+/**
+ * Switch the order of headline and subheadline
+ */
+type SwitchHeadlineOrder = boolean;
+/**
+ * Width of content to use
+ */
+type ContentWidth = "unset" | "narrow" | "default" | "wide";
+/**
+ * Choose an alignment for the content
+ */
+type ContentAlignment = "left" | "center" | "right";
+/**
+ * Size of gutter to use
+ */
+type Gutter = "large" | "default" | "small" | "none";
+/**
+ * Layout mode used for section contents
+ */
+type Mode = "default" | "tile" | "list" | "slider";
+/**
+ * Set min-width for the tiles in the grid
+ */
+type TileWidth = "control" | "card" | "narrow" | "medium" | "wide";
+/**
+ * Allowed components for content
+ */
+type Content = (HeroProps | CtaProps | MosaicProps | FaqProps | FeaturesProps | GalleryProps | HeadlineProps | ImageStoryProps | SplitProps | StatsProps | TeaserCardProps | TestimonialsProps | TextProps | VideoCurtainProps | ImageTextProps | LogosProps)[];
+/**
+ * Buttons of the Button Group
+ */
+type Buttons = ButtonProps[];
+/**
+ * Component used to layout components into pages
+ */
+interface SectionProps {
+    width?: Width;
+    style?: Style;
+    backgroundColor?: Style1;
+    spotlight?: Spotlight;
+    spaceBefore?: SpaceBefore;
+    spaceAfter?: SpaceAfter;
+    inverted?: Inverted;
+    headerSpacing?: HeaderSpacing;
+    headline?: {
+        text?: Headline;
+        large?: LargeHeadline;
+        width?: HeadlineWidth;
+        textAlign?: HeadlineTextAlignment;
+        align?: HeadlineAlignment;
+        sub?: Subheadline;
+        switchOrder?: SwitchHeadlineOrder;
+    };
+    content?: {
+        width?: ContentWidth;
+        align?: ContentAlignment;
+        gutter?: Gutter;
+        mode?: Mode;
+        tileWidth?: TileWidth;
+    };
+    components?: Content;
+    buttons?: Buttons;
+}
+declare const Section: import("react").ForwardRefExoticComponent<SectionProps & Omit<HTMLAttributes<HTMLElement>, "style" | "content"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const SectionProvider: FC<PropsWithChildren<any>>;
+export { Section, SectionProvider };

package/dist/components/section/index.js

@@ -0,0 +1,48 @@
+import "./section.css";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import classnames from 'classnames';
+import { useKsComponent } from '@kickstartds/core/lib/react';
+import { SectionContextDefault, SectionContext } from '@kickstartds/base/lib/section';
+import { identifier } from './js/Section.client.js';
+import '@kickstartds/core/lib/component';
+
+const Section = forwardRef(({ headline, content, headerSpacing, width = "default", style = "default", spotlight = false, backgroundColor = "default", spaceBefore = "default", spaceAfter = "default", className, inverted, buttons = [], ...props }, ref) => {
+    const { large: headlineLarge = false, ...headlineRest } = {
+        align: "left",
+        ...headline,
+    };
+    const componentProps = useKsComponent(identifier, ref, [
+        spotlight,
+        content?.mode === "slider",
+    ]);
+    return (jsx(SectionContextDefault, { ...props, ...componentProps, className: classnames(style !== "default" &&
+            `l-section-style--${style === "verticalGradient"
+                ? "vertical-gradient"
+                : style === "horizontalGradient"
+                    ? "horizontal-gradient"
+                    : style === "accentTransition"
+                        ? "accent-transition"
+                        : style === "boldTransition"
+                            ? "bold-transition"
+                            : style === "symmetricGlow"
+                                ? "symmetric-glow"
+                                : style === "anchorGlow"
+                                    ? "anchor-glow"
+                                    : style}`, headerSpacing && "l-section--header-spacing", spotlight && "l-section--spotlight", content?.tileWidth && `l-section--tiles-${content?.tileWidth}`, className), background: backgroundColor, content: content, headline: {
+            ...headlineRest,
+            spaceAfter: "large",
+            // @ts-expect-error
+            content: headlineRest.text,
+            level: "h2",
+            style: headlineLarge ? "h1" : "h2",
+        }, buttons: {
+            buttons,
+            // @ts-expect-error
+            items: buttons,
+        }, width: width, spaceBefore: spaceBefore, spaceAfter: spaceAfter, inverted: inverted, ref: ref, children: props.children }));
+});
+Section.displayName = "Section";
+const SectionProvider = (props) => (jsx(SectionContext.Provider, { ...props, value: Section }));
+
+export { Section, SectionProvider };

package/dist/components/section/js/Section.client.d.ts

@@ -0,0 +1,2 @@
+declare const identifier: "dsa.section";
+export { identifier };

package/dist/components/section/js/Section.client.js

@@ -0,0 +1,26 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+const identifier = "dsa.section";
+class Section extends Component {
+    constructor(element) {
+        super(element);
+        if (element.classList.contains("l-section--spotlight")) {
+            import('./spotlight.client.js').then((mod) => {
+                const cleanup = mod.initSpotlight(element);
+                this.onDisconnect(cleanup);
+            });
+        }
+        const sliderContainer = element.querySelector(".l-section__slider");
+        if (sliderContainer) {
+            import('@kickstartds/base/lib/section/Section')
+                .then((mod) => mod.getSectionSlider())
+                .then((initSectionSlider) => {
+                const cleanup = initSectionSlider(sliderContainer);
+                this.onDisconnect(cleanup);
+            });
+        }
+    }
+}
+define(identifier, Section);
+
+export { identifier };

package/dist/components/section/js/spotlight.client.d.ts

@@ -0,0 +1,2 @@
+declare function initSpotlight(element: any): () => void;
+export { initSpotlight };

package/dist/components/section/js/spotlight.client.js

@@ -0,0 +1,14 @@
+function onMousemove(event) {
+    this.style.setProperty("--l-section--spotlight-top", `${event.clientY - this.getBoundingClientRect().top}px`);
+    this.style.setProperty("--l-section--spotlight-left", `${event.clientX - this.getBoundingClientRect().left}px`);
+}
+const initSpotlight = (element) => {
+    element.addEventListener("mousemove", onMousemove, { passive: true });
+    return () => {
+        element.style.removeProperty("--l-section--spotlight-top");
+        element.style.removeProperty("--l-section--spotlight-left");
+        element.removeEventListener("mousemove", onMousemove, { passive: true });
+    };
+};
+
+export { initSpotlight };

package/dist/components/section/section.css

@@ -0,0 +1,110 @@
+.l-section {
+  --l-section--background-color: var(--ks-background-color-default);
+  --l-section--tile-width-control: 14rem;
+  --l-section--tile-width-card: 20rem;
+  --l-section--tile-width-narrow: var(--l-section--content-width-narrow);
+  --l-section--tile-width-medium: var(--l-section--content-width-default);
+  --l-section--tile-width-wide: var(--l-section--content-width-wide);
+  --l-section_slider-arrow--color: var(--ks-text-color-interface-interactive);
+}
+.l-section--accent {
+  --l-section--background-color: var(--ks-background-color-accent);
+}
+.l-section--bold {
+  --l-section--background-color: var(--ks-background-color-bold);
+}
+.l-section-style--stagelights {
+  --l-section--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-style--anchor-glow {
+  --l-section--background-image: radial-gradient(
+    50% 50% at 50% 100%,
+    var(--ks-color-secondary-alpha-5) 0%,
+    transparent 100%
+  );
+}
+.l-section-style--symmetric-glow {
+  --l-section--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-style--accent-transition {
+  --l-section--background-image: linear-gradient(180deg, transparent 0%, var(--ks-background-color-accent) 100%);
+}
+.l-section-style--bold-transition {
+  --l-section--background-image: linear-gradient(180deg, transparent 0%, var(--ks-background-color-bold) 100%);
+}
+.l-section-style--vertical-gradient {
+  --l-section--background-image: linear-gradient(
+    0deg,
+    var(--ks-color-primary-alpha-5) 0%,
+    var(--ks-color-secondary-alpha-5) 100%
+  );
+}
+.l-section-style--horizontal-gradient {
+  --l-section--background-image: linear-gradient(
+    90deg,
+    var(--ks-color-primary-alpha-5) 0%,
+    var(--ks-color-secondary-alpha-5) 100%
+  );
+}
+.l-section--spotlight {
+  --l-section--spotlight-left: 0;
+  --l-section--spotlight-top: 0;
+  --l-section--spotlight-color: var(--ks-color-primary-alpha-5);
+}
+
+:root .l-section {
+  background-image: var(--l-section--background-image);
+  background-color: var(--l-section--background-color);
+  position: relative;
+}
+:root .l-section--header-spacing {
+  padding-top: calc(var(--g-header-height) + var(--l-section--space-default));
+}
+:root .l-section--header-spacing.l-section--space-before-none {
+  padding-top: var(--g-header-height);
+}
+:root .l-section--header-spacing.l-section--space-before-small {
+  padding-top: calc(var(--g-header-height) + var(--l-section--space-small));
+}
+:root .l-section--tiles-control .l-section__content {
+  --l-section_col--min-width: var(--l-section--tile-width-control);
+}
+:root .l-section--tiles-card .l-section__content {
+  --l-section_col--min-width: var(--l-section--tile-width-card);
+}
+:root .l-section--tiles-narrow .l-section__content {
+  --l-section_col--min-width: var(--l-section--tile-width-narrow);
+}
+:root .l-section--tiles-medium .l-section__content {
+  --l-section_col--min-width: var(--l-section--tile-width-medium);
+}
+:root .l-section--tiles-wide .l-section__content {
+  --l-section_col--min-width: var(--l-section--tile-width-wide);
+}
+:root .l-section--spotlight {
+  position: relative;
+}
+:root .l-section--spotlight:hover::before {
+  opacity: 1;
+}
+:root .l-section--spotlight::before {
+  transition: opacity var(--ks-transition-fade);
+  opacity: 0;
+  top: 0;
+  left: 0;
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-image: radial-gradient(650px circle at var(--l-section--spotlight-left) var(--l-section--spotlight-top), var(--l-section--spotlight-color), transparent 80%);
+}