@kickstartds/ds-agency-premium 1.2.10--canary.168.f4de958.0 → 1.2.10--canary.175.799b9aa.0

package/dist/components/feature/index.js

@@ -1,23 +1,27 @@
+import "./feature.css";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { Button } from '../button/index.js';
 import { Link } from '@kickstartds/base/lib/link';
-import 'react';
 import '@kickstartds/base/lib/button';
 
-const Feature = ({ style = "stack", title, text, icon, ctaToggle = true, ctaStyle = "link", ctaTarget, ctaLabel = "Read more", }) => {
-    return (jsxs("div", { className: classnames(`c-feature c-feature--${style === `stack`
-            ? `stack c-feature--large`
-            : style === `besideSmall`
-                ? `beside c-feature--small`
-                : style === `besideLarge`
-                    ? `beside c-feature--large`
-                    : style === `intext`
-                        ? `intext c-feature--small`
-                        : style === `centered`
-                            ? `centered c-feature--large`
-                            : `${style}`}`), children: [jsxs("div", { className: "c-feature__header", children: [icon && jsx(Icon, { className: "c-feature__icon", icon: icon }), jsx("span", { className: "c-feature__title", children: title })] }), text || ctaStyle === "intext" ? (jsxs("p", { className: "c-feature__text", children: [text, ctaStyle === "intext" && ctaToggle ? (jsxs(Fragment, { children: [" ", " ", jsx(Link, { href: ctaTarget, children: ctaLabel ? ctaLabel : "See more" })] })) : ("")] })) : (""), ctaToggle && (ctaStyle === "link" || ctaStyle === "button") && (jsx("div", { className: "c-feature__cta", children: ctaStyle === "link" ? (jsxs(Link, { className: "c-feature__link", href: ctaTarget, children: [ctaLabel ? ctaLabel : "See more", jsx(Icon, { icon: "arrow-right" })] })) : ctaStyle === "button" ? (jsx(Button, { className: "c-feature__button", size: "small", target: ctaTarget, label: ctaLabel ? ctaLabel : "See more" })) : ("") }))] }));
-};
+const FeatureContextDefault = forwardRef(({ style = "stack", title, text, icon, cta: { toggle = true, style: ctaStyle = "link", target, label = "Read more", }, ...rest }, ref) => (jsxs("div", { ...rest, ref: ref, className: classnames(`c-feature c-feature--${style === `stack`
+        ? `stack c-feature--large`
+        : style === `besideSmall`
+            ? `beside c-feature--small`
+            : style === `besideLarge`
+                ? `beside c-feature--large`
+                : style === `intext`
+                    ? `intext c-feature--small`
+                    : style === `centered`
+                        ? `centered c-feature--large`
+                        : `${style}`}`), children: [jsxs("div", { className: "c-feature__header", children: [icon && jsx(Icon, { className: "c-feature__icon", icon: icon }), jsx("span", { className: "c-feature__title", children: title })] }), text || ctaStyle === "intext" ? (jsxs("p", { className: "c-feature__text", children: [text, ctaStyle === "intext" && toggle ? (jsxs(Fragment, { children: ["  ", jsx(Link, { href: target, children: label ? label : "See more" })] })) : ("")] })) : (""), toggle && (ctaStyle === "link" || ctaStyle === "button") && (jsx("div", { className: "c-feature__cta", children: ctaStyle === "link" ? (jsxs(Link, { className: "c-feature__link", href: target, children: [label ? label : "See more", jsx(Icon, { icon: "arrow-right" })] })) : ctaStyle === "button" ? (jsx(Button, { className: "c-feature__button", size: "small", target: target, label: label ? label : "See more" })) : ("") }))] })));
+const FeatureContext = createContext(FeatureContextDefault);
+const Feature = forwardRef((props, ref) => {
+    const Component = useContext(FeatureContext);
+    return jsx(Component, { ...props, ref: ref });
+});
 
-export { Feature };
+export { Feature, FeatureContext, FeatureContextDefault };

package/dist/components/features/features.css

@@ -1,31 +1,18 @@
-.c-feature {
-  --c-feature-icon--color: var(--ks-text-color-primary);
-}
-.c-feature--small {
-  --c-feature-icon--size: calc(var(--ks-line-height-interface-m) * var(--ks-font-size-interface-m));
-  --c-feature--stack: var(--ks-spacing-stack-xs);
-  --c-feature-icon--gap: var(--ks-spacing-xs);
-}
-.c-feature--large {
-  --c-feature-icon--size: calc(var(--ks-font-size-copy-m) * 2.5);
-  --c-feature--stack: var(--ks-spacing-stack-s);
-  --c-feature-icon--gap: var(--ks-spacing-s);
-}
-.c-feature--large.c-feature--beside {
-  --c-feature--stack: var(--ks-spacing-stack-xs);
-}
-.c-feature--stack.c-feature--large {
-  --c-feature-icon--gap: var(--ks-spacing-xs);
+.c-features {
+  --dsa-features--gap-vertical: var(--ks-spacing-stack-l);
+  --dsa-features--gap-horizontal: var(--ks-spacing-inline-m);
 }
 
+.c-features {
+  gap: var(--dsa-features--gap-vertical, var(--ks-spacing-stack-l)) var(--dsa-features--gap-horizontal, var(--ks-spacing-inline-m));
+}
 .c-features--list {
   display: flex;
   flex-direction: column;
-  gap: var(--ks-spacing-stack-m);
+  gap: var(--dsa-features--gap-vertical);
 }
 .c-features--large-tiles {
   display: grid;
-  gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-m);
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 }
 .c-features--large-tiles .c-feature {
@@ -35,81 +22,8 @@
 }
 .c-features--small-tiles {
   display: grid;
-  gap: var(--ks-spacing-stack-l) var(--ks-spacing-inline-m);
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }
 .l-section--align-center .c-features--small-tiles {
   justify-content: center;
-}
-
-.c-feature {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  gap: var(--c-feature--stack);
-}
-.c-feature--beside {
-  padding-left: calc(var(--c-feature-icon--size) + var(--c-feature-icon--gap));
-}
-.c-feature--beside .c-feature__icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.c-feature--stack .c-feature__header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-.c-feature--centered .c-feature__header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.c-feature--centered .c-feature__title,
-.c-feature--centered .c-feature__text {
-  text-align: center;
-}
-.c-feature--centered .c-feature__cta {
-  display: flex;
-  justify-content: center;
-}
-.c-feature__header {
-  display: flex;
-  align-items: center;
-  gap: var(--c-feature-icon--gap);
-}
-.c-feature__title {
-  font: var(--ks-font-interface-m);
-  color: var(--ks-color-fg);
-  font-family: var(--ks-font-family-display);
-  font-weight: var(--ks-font-weight-semi-bold);
-}
-.c-feature__text {
-  color: var(--ks-text-color-default);
-  font: var(--ks-font-copy-s);
-  margin: 0;
-}
-.c-feature__icon {
-  color: var(--c-feature-icon--color);
-  width: var(--c-feature-icon--size);
-  height: var(--c-feature-icon--size);
-}
-.c-feature__cta {
-  margin-top: auto;
-}
-.c-feature__link {
-  font: var(--ks-font-copy-s);
-  display: flex;
-  align-items: center;
-  gap: var(--ks-spacing-xxs);
-  font-weight: var(--ks-font-weight-semi-bold) !important;
-  width: fit-content;
-}
-.c-feature__link .icon {
-  width: 1.125em;
-  height: 1.125em;
-}
-.c-feature__button {
-  margin-top: calc(var(--c-feature--stack) * 0.5);
 }

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

@@ -48,11 +48,15 @@
       },
       "additionalProperties": false
     },
-    "items": {
+    "feature": {
       "type": "array",
-      "title": "Items",
+      "title": "Features",
       "description": "The features to display",
       "items": {
+        "$schema": "http://json-schema.org/draft-07/schema#",
+        "$id": "http://schema.mydesignsystem.com/feature.schema.json",
+        "title": "Feature",
+        "description": "Partial Component used to display a feature",
         "type": "object",
         "properties": {
           "icon": {
@@ -79,6 +83,17 @@
               "This is a feature"
             ]
           },
+          "style": {
+            "type": "string",
+            "enum": [
+              "intext",
+              "stack",
+              "centered",
+              "besideLarge",
+              "besideSmall"
+            ],
+            "default": "stack"
+          },
           "cta": {
             "type": "object",
             "title": "Call to Action",
@@ -99,9 +114,28 @@
                 "examples": [
                   "See all our partners"
                 ]
+              },
+              "toggle": {
+                "type": "boolean",
+                "title": "Call to Action Toggle",
+                "description": "Activate/disable the CTAs",
+                "default": true
+              },
+              "style": {
+                "type": "string",
+                "description": "Choose the style of the CTA",
+                "enum": [
+                  "button",
+                  "link",
+                  "intext"
+                ],
+                "default": "link"
               }
             },
             "additionalProperties": false
+          },
+          "type": {
+            "const": "feature"
           }
         },
         "additionalProperties": false,

package/dist/components/features/features.schema.json

@@ -34,56 +34,12 @@
       },
       "additionalProperties": false
     },
-    "items": {
+    "feature": {
       "type": "array",
-      "title": "Items",
+      "title": "Features",
       "description": "The features to display",
       "items": {
-        "type": "object",
-        "properties": {
-          "icon": {
-            "type": "string",
-            "title": "Icon",
-            "description": "The icon for the feature",
-            "examples": ["person"]
-          },
-          "title": {
-            "type": "string",
-            "title": "Title",
-            "description": "The title of the feature",
-            "examples": ["Feature 1"]
-          },
-          "text": {
-            "type": "string",
-            "title": "Text",
-            "description": "The description of the feature",
-            "examples": ["This is a feature"]
-          },
-          "cta": {
-            "type": "object",
-            "title": "Call to Action",
-            "description": "The call to action",
-            "properties": {
-              "target": {
-                "type": "string",
-                "title": "Call to Action target",
-                "description": "The CTA target",
-                "default": "#",
-                "format": "uri"
-              },
-              "label": {
-                "type": "string",
-                "title": "Link Label",
-                "description": "The text label displayed on the link",
-                "default": "See more",
-                "examples": ["See all our partners"]
-              }
-            },
-            "additionalProperties": false
-          }
-        },
-        "additionalProperties": false,
-        "required": ["title"]
+        "$ref": "http://schema.mydesignsystem.com/feature.schema.json"
       },
       "minItems": 1,
       "maxItems": 8

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

@@ -1,4 +1,7 @@
-import { HTMLAttributes, FC } from "react";
-import { FeaturesProps } from "../../FeaturesProps-32f5bc0d.js";
-declare const Features: FC<FeaturesProps & HTMLAttributes<HTMLDivElement>>;
-export { Features };
+/// <reference types="react" />
+import { HTMLAttributes } from "react";
+import { FeaturesProps } from "../../FeaturesProps-b05859d6.js";
+declare const FeaturesContextDefault: import("react").ForwardRefExoticComponent<FeaturesProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const FeaturesContext: import("react").Context<import("react").ForwardRefExoticComponent<FeaturesProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Features: import("react").ForwardRefExoticComponent<FeaturesProps & Omit<HTMLAttributes<HTMLDivElement>, "style"> & import("react").RefAttributes<HTMLDivElement>>;
+export { FeaturesContextDefault, FeaturesContext, Features };

package/dist/components/features/index.js

@@ -1,32 +1,25 @@
 import "./features.css";
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { Feature } from '../feature/index.js';
 import '@kickstartds/base/lib/icon';
 import '../button/index.js';
-import 'react';
 import '@kickstartds/base/lib/button';
 import '@kickstartds/base/lib/link';
 
-const Features = ({ layout = "largeTiles", ctas = {
+const FeaturesContextDefault = forwardRef(({ layout = "largeTiles", ctas = {
     style: "link",
     toggle: true,
-}, style = "intext", items = [], ...props }) => {
-    return (jsx("div", { className: classnames(`c-features c-features--${layout === "largeTiles"
-            ? "large-tiles"
-            : layout === "smallTiles"
-                ? "small-tiles"
-                : `${layout}`}`), ...props, children: items.map((item, index) => (jsx(Feature, { title: item.title, text: item.text, style: style === "intext"
-                ? "intext"
-                : style === "stack"
-                    ? "stack"
-                    : style === "centered"
-                        ? "centered"
-                        : style === "besideLarge"
-                            ? "besideLarge"
-                            : style === "besideSmall"
-                                ? "besideSmall"
-                                : undefined, icon: item?.icon, ctaLabel: item?.cta?.label, ctaTarget: item?.cta?.target, ctaToggle: ctas?.toggle, ctaStyle: ctas?.style }, index))) }));
-};
+}, style = "intext", feature: features = [], ...rest }, ref) => (jsx("div", { ...rest, ref: ref, className: classnames(`c-features c-features--${layout === "largeTiles"
+        ? "large-tiles"
+        : layout === "smallTiles"
+            ? "small-tiles"
+            : `${layout}`}`), children: features.map((feature, index) => (jsx(Feature, { ...feature, style: style }, index))) })));
+const FeaturesContext = createContext(FeaturesContextDefault);
+const Features = forwardRef((props, ref) => {
+    const Component = useContext(FeaturesContext);
+    return jsx(Component, { ...props, ref: ref });
+});
 
-export { Features };
+export { Features, FeaturesContext, FeaturesContextDefault };

package/dist/components/footer/footer.css

@@ -1,14 +1,18 @@
 .c-footer {
-  --g-logo--height: 1.5rem;
-}
-@media (min-width: 42rem) {
-  .c-footer {
-    --g-logo--height: 1.5rem;
-  }
+  --dsa-footer--background-color: var(--ks-background-color-default);
+  --dsa-footer--border-top: 1px solid var(--ks-border-color-accent);
+  --dsa-footer--max-width: var(--l-section--content-width-wide);
+  --dsa-footer--gap-vertical: var(--ks-spacing-stack-m);
+  --dsa-footer__trademark--font: var(--ks-font-copy-xs);
+  --dsa-footer__trademark--color: var(--ks-text-color-default);
+  --dsa-footer__links--gap: var(--ks-spacing-stack-s) var(--ks-spacing-inline-m);
+  --dsa-footer__links--font: var(--ks-font-interface-s);
+  --dsa-footer__links--color: var(--dsa-link--color);
+  --dsa-footer__logo--height: 1.5rem;
 }
 @media (min-width: 62em) {
   .c-footer {
-    --g-logo--height: 2rem;
+    --dsa-footer__logo--height: 2rem;
   }
 }
 
@@ -17,37 +21,37 @@
   z-index: 1;
   width: 100%;
   display: flex;
-  background-color: var(--ks-background-color-default);
+  background-color: var(--dsa-footer--background-color, var(--ks-background-color-default));
 }
 .c-footer__content {
   padding: var(--l-section--space-small) var(--l-section--content-padding);
-  border-top: 1px solid var(--ks-border-color-accent);
-  max-width: var(--l-section--content-width-wide);
+  border-top: var(--dsa-footer--border-top, 1px solid var(--ks-border-color-accent));
+  max-width: var(--dsa-footer--max-width, var(--l-section--content-width-wide));
   width: 100%;
   margin: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--ks-spacing-stack-m);
+  gap: var(--dsa-footer--gap-vertical, var(--ks-spacing-stack-m));
 }
 .c-footer__logo {
   display: block;
 }
 .c-footer__logo img {
-  height: var(--g-logo--height);
+  height: var(--dsa-footer__logo--height);
   width: auto;
 }
 .c-footer__trademark {
-  font: var(--ks-font-copy-xs);
-  color: var(--ks-text-color-default);
+  font: var(--dsa-footer__trademark--font, var(--ks-font-copy-xs));
+  color: var(--dsa-footer__trademark--color, var(--ks-text-color-default));
 }
 .c-footer__links {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--ks-spacing-inline-m);
+  gap: var(--dsa-footer__links--gap, var(--ks-spacing-stack-s) var(--ks-spacing-inline-m));
 }
 .c-footer__link {
-  font: var(--ks-font-interface-s);
-  --g-link--color: var(--ks-text-color-default);
+  font: var(--dsa-footer__links--font, var(--ks-font-interface-s));
+  color: var(--dsa-footer__links--color, var(--dsa-link--color));
 }

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

@@ -5,10 +5,7 @@
   "type": "object",
   "properties": {
     "logo": {
-      "$schema": "http://json-schema.org/draft-07/schema#",
-      "$id": "http://schema.kickstartds.com/base/picture.schema.json",
-      "title": "Picture",
-      "description": "Base component to display a picture",
+      "title": "Logo",
       "type": "object",
       "properties": {
         "src": {
@@ -20,12 +17,6 @@
             "https://picsum.photos/seed/kdspicture/300/300"
           ]
         },
-        "srcSet": {
-          "title": "Picture sourceset",
-          "description": "Use a srcSet to display picture",
-          "type": "string",
-          "format": "image"
-        },
         "alt": {
           "title": "Alt text",
           "description": "Alt text to display for picture",
@@ -48,84 +39,13 @@
           "examples": [
             300
           ]
-        },
-        "className": {
-          "title": "Additional Classes",
-          "description": "Add additional css classes that should be applied to the button",
-          "type": "string"
-        },
-        "component": {
-          "title": "`ks-component` attribute",
-          "description": "Optional custom component identifier",
-          "type": "string"
-        },
-        "id": {
-          "title": "Id",
-          "description": "Add id attribute to the image",
-          "type": "string"
-        },
-        "itemProp": {
-          "title": "`itemprop` attribute",
-          "description": "Define an itemprop attribute for the picture",
-          "type": "string"
-        },
-        "style": {
-          "title": "`style` attribute",
-          "description": "Define a style attribute for the picture",
-          "type": "string"
-        },
-        "noscript": {
-          "title": "Noscript",
-          "description": "Render noscript fallback",
-          "type": "boolean",
-          "default": true
-        },
-        "lazy": {
-          "title": "Lazy",
-          "description": "Load the picture lazily",
-          "type": "boolean",
-          "default": true
-        },
-        "sources": {
-          "title": "Sources",
-          "description": "Additional sources. This will result in a `picture`-Element",
-          "type": "array",
-          "items": {
-            "type": "object",
-            "properties": {
-              "srcSet": {
-                "title": "Picture sourceset",
-                "description": "Use a srcSet to display picture",
-                "type": "string",
-                "format": "image"
-              },
-              "media": {
-                "title": "TODO MEDIA TITLE",
-                "description": "TODO MEDIA DESCRIPTION",
-                "type": "string"
-              },
-              "type": {
-                "title": "TODO TYPE TITLE",
-                "description": "TODO TYPE DESCRIPTION",
-                "type": "string"
-              }
-            },
-            "additionalProperties": false
-          }
-        },
-        "pictureClassName": {
-          "title": "`class` attribute",
-          "description": "Set additional class(es) to the picture",
-          "type": "string"
-        },
-        "type": {
-          "const": "picture"
         }
       },
       "additionalProperties": false
     },
     "logoHref": {
       "type": "string",
+      "format": "uri",
       "default": "/"
     },
     "navItems": {
@@ -134,7 +54,8 @@
         "type": "object",
         "properties": {
           "href": {
-            "type": "string"
+            "type": "string",
+            "format": "uri"
           },
           "label": {
             "type": "string"

package/dist/components/footer/footer.schema.json

@@ -5,10 +5,41 @@
   "type": "object",
   "properties": {
     "logo": {
-      "$ref": "http://schema.kickstartds.com/base/picture.schema.json"
+      "title": "Logo",
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Source",
+          "description": "Picture source",
+          "type": "string",
+          "format": "image",
+          "examples": ["https://picsum.photos/seed/kdspicture/300/300"]
+        },
+        "alt": {
+          "title": "Alt text",
+          "description": "Alt text to display for picture",
+          "type": "string"
+        },
+        "width": {
+          "title": "Width",
+          "description": "Width of the picture",
+          "type": "integer",
+          "minimum": 0,
+          "examples": [300]
+        },
+        "height": {
+          "title": "Height",
+          "description": "Height of the picture",
+          "type": "integer",
+          "minimum": 0,
+          "examples": [300]
+        }
+      },
+      "additionalProperties": false
     },
     "logoHref": {
       "type": "string",
+      "format": "uri",
       "default": "/"
     },
     "navItems": {
@@ -16,7 +47,7 @@
       "items": {
         "type": "object",
         "properties": {
-          "href": { "type": "string" },
+          "href": { "type": "string", "format": "uri" },
           "label": { "type": "string" },
           "target": { "type": "string" }
         },

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

@@ -5,12 +5,24 @@ import { FC } from "react";
  * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
  * and run json-schema-to-typescript to regenerate this file.
  */
-import { PictureProps } from "@kickstartds/base/lib/picture/typing";
+/**
+ * Picture source
+ */
+type Source = string;
+/**
+ * Alt text to display for picture
+ */
+type AltText = string;
+/**
+ * Width of the picture
+ */
+type Width = number;
+/**
+ * Height of the picture
+ */
+type Height = number;
 interface FooterProps {
-    /**
-     * Referenced component PictureProps
-     */
-    logo: PictureProps;
+    logo: Logo;
     logoHref?: string;
     navItems?: {
         href: string;
@@ -18,5 +30,11 @@ interface FooterProps {
         target?: string;
     }[];
 }
+interface Logo {
+    src?: Source;
+    alt?: AltText;
+    width?: Width;
+    height?: Height;
+}
 declare const Footer: FC<FooterProps>;
 export { Footer };

package/dist/components/footer/index.js

@@ -6,6 +6,6 @@ import { Picture } from '@kickstartds/base/lib/picture';
 import { Link } from '@kickstartds/base/lib/link';
 
 const now = new Date();
-const Footer = ({ logo, logoHref = "/", navItems = [], }) => (jsx("div", { className: classnames("c-footer"), children: jsxs("div", { className: "c-footer__content", children: [jsx(Link, { className: "c-footer__logo", href: logoHref, children: jsx(Picture, { ...logo }) }), jsxs("span", { className: "c-footer__trademark", children: ["\u00A9 ", now.getFullYear(), " systemics Inc. All rights reserved."] }), navItems.length > 0 ? (jsx("div", { className: "c-footer__links", children: navItems.map(({ label, ...linkProps }) => (createElement(Link, { ...linkProps, className: "c-footer__link", key: linkProps.href + label }, label))) })) : null] }) }));
+const Footer = ({ logo, logoHref = "/", navItems = [], }) => (jsx("div", { className: classnames("c-footer"), children: jsxs("div", { className: "c-footer__content", children: [jsx(Link, { className: "c-footer__logo", href: logoHref, children: jsx(Picture, { ...logo, lazy: true }) }), jsxs("span", { className: "c-footer__trademark", children: ["\u00A9 ", now.getFullYear(), " systemics Inc. All rights reserved."] }), navItems.length > 0 ? (jsx("div", { className: "c-footer__links", children: navItems.map(({ label, ...linkProps }) => (createElement(Link, { ...linkProps, className: "c-footer__link", key: linkProps.href + label }, label))) })) : null] }) }));
 
 export { Footer };