npm - @kickstartds/ds-agency-premium - Versions diffs - 1.6.71 → 1.6.72--canary.43.2476.0 - Mend

@kickstartds/ds-agency-premium 1.6.71 → 1.6.72--canary.43.2476.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.

Files changed (528) hide show

package/dist/components/cookie-consent/cookie-consent.css ADDED Viewed

@@ -0,0 +1,259 @@
+.dsa-cookie-consent {
+  --dsa-cookie-consent-notice--gap: var(--ks-spacing-stack-s);
+  --dsa-cookie-consent-notice--max-height: 45vh;
+  --dsa-cookie-consent-notice_card--background-color: var(--ks-background-color-default);
+  --dsa-cookie-consent-notice_card--padding: var(--ks-spacing-inset-m);
+  --dsa-cookie-consent-notice_card--left: var(--ks-spacing-m);
+  --dsa-cookie-consent-notice_card--bottom: var(--ks-spacing-m);
+  --dsa-cookie-consent-notice_card--border-radius: var(--ks-border-radius-card);
+  --dsa-cookie-consent-notice_card--max-width: var(--dsa-tile--width_largest);
+  --dsa-cookie-consent-notice_card--border: var(--ks-border-color-card) solid var(--ks-border-width-default);
+  --dsa-cookie-consent-notice_card--box-shadow: var(--ks-box-shadow-card);
+  --dsa-cookie-consent-notice_banner--padding: var(--ks-spacing-inset-m);
+  --dsa-cookie-consent-notice_banner--background-color: var(--ks-background-color-default);
+  --dsa-cookie-consent-notice_banner--box-shadow: var(--ks-box-shadow-surface);
+  --dsa-cookie-consent-notice_banner--border-top: var(--ks-border-color-interface) solid var(--ks-border-width-default);
+  --dsa-cookie-consent-notice__buttons--gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-s);
+  --dsa-cookie-consent-revisit--bottom: var(--ks-spacing-m);
+  --dsa-cookie-consent-revisit--left: var(--ks-spacing-m);
+  --dsa-cookie-consent-revisit__label--background-color: var(--ks-background-color-default-inverted);
+  --dsa-cookie-consent-revisit__label--border-radius: 0.25em;
+  --dsa-cookie-consent-revisit__label--padding: var(--ks-spacing-inset-squish-xs);
+  --dsa-cookie-consent-dialogue--padding-horizontal: var(--ks-spacing-inset-m);
+  --dsa-cookie-consent-dialogue--border-radius: var(--ks-border-radius-card);
+  --dsa-cookie-consent-dialogue--border: var(--ks-border-color-interface) solid var(--ks-border-width-default);
+  --dsa-cookie-consent-dialogue--box-shadow: var(--ks-box-shadow-card);
+  --dsa-cookie-consent-dialogue--background-color: var(--ks-background-color-default);
+  --dsa-cookie-consent-dialogue--max-width: var(--dsa-tile--width_largest);
+  --dsa-cookie-consent-dialogue--max-height: 100%;
+}
+@media (min-width: 48em) {
+  .dsa-cookie-consent {
+    --dsa-cookie-consent-dialogue--max-height: 90vh;
+  }
+}
+.dsa-cookie-consent {
+  --dsa-cookie-consent-dialogue--spacing-vertical: var(--ks-spacing-inset-s);
+  --dsa-cookie-consent-dialogue--spacing-horizontal: var(--ks-spacing-inset-s);
+  --dsa-cookie-consent-dialogue__block--padding-vertical: var(--ks-spacing-inset-m);
+  --dsa-cookie-consent-dialogue__header--padding: var(--ks-spacing-inset-squish-m);
+  --dsa-cookie-consent-dialogue__header--gap: var(--ks-spacing-inline-m);
+  --dsa-cookie-consent-dialogue__content--border: var(--ks-border-color-interface) solid var(--ks-border-width-default);
+  --dsa-cookie-consent-dialogue__close--padding: var(--ks-spacing-inset-xs);
+  --dsa-cookie-consent-dialogue__close--color: var(--ks-text-color-interface-interactive);
+  --dsa-cookie-consent-dialogue__close--color_hover: var(--ks-text-color-interface-interactive);
+  --dsa-cookie-consent-dialogue__close--background-color: transparent;
+  --dsa-cookie-consent-dialogue__close--background-color_hover: var(--ks-color-fg-alpha-8);
+  --dsa-cookie-consent-dialogue__description--border-bottom: 1px solid var(--ks-border-color-interface);
+  --dsa-cookie-consent-dialogue__description--font: var(--ks-font-interface-s);
+  --dsa-cookie-consent-dialogue__description--color: var(--ks-text-color-interface);
+  --dsa-cookie-consent-dialogue__option--border-bottom: 1px solid var(--ks-border-color-interface);
+  --dsa-cookie-consent-dialogue__option--padding-vertical: var(--ks-spacing-stack-m);
+  --dsa-cookie-consent-dialogue__option--gap: var(--ks-spacing-stack-xs);
+  --dsa-cookie-consent-dialogue__label--font: var(--ks-font-interface-s);
+  --dsa-cookie-consent-dialogue__label--color: var(--ks-text-color-positive);
+  --dsa-cookie-consent-dialogue__label--font-weight: var(--ks-font-weight-bold);
+  --dsa-cookie-consent-dialogue__toggle--gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-m);
+  --dsa-cookie-consent-dialogue__buttons--gap: var(--ks-spacing-stack-xs) var(--ks-spacing-inline-s);
+  --dsa-cookie-consent-overlay--background-color: var(--dsa-overlay--background-color);
+}
+.dsa-cookie-consent-notice {
+  display: flex;
+  gap: var(--dsa-cookie-consent-notice--gap, var(--ks-spacing-stack-s));
+  flex-direction: column;
+  max-height: var(--dsa-cookie-consent-notice--max-height, 45vh);
+}
+.dsa-cookie-consent-notice--card {
+  width: 100%;
+  background-color: var(--dsa-cookie-consent-notice_card--background-color, var(--ks-background-color-default));
+  padding: var(--dsa-cookie-consent-notice_card--padding, var(--ks-spacing-inset-m));
+  position: fixed;
+  box-shadow: var(--dsa-cookie-consent-notice_card--box-shadow, var(--ks-box-shadow-card));
+  bottom: 0;
+  left: 0;
+  border-top: var(--dsa-cookie-consent-notice_card--border, var(--ks-border-color-card) solid var(--ks-border-width-default));
+}
+@media (min-width: 48em) {
+  .dsa-cookie-consent-notice--card {
+    border: var(--dsa-cookie-consent-notice_card--border, var(--ks-border-color-card) solid var(--ks-border-width-default));
+    max-width: var(--dsa-cookie-consent-notice_card--max-width, var(--dsa-tile--width_large));
+    bottom: var(--dsa-cookie-consent-notice_card--bottom, var(--ks-spacing-m));
+    left: var(--dsa-cookie-consent-notice_card--left, var(--ks-spacing-m));
+    border-radius: var(--dsa-cookie-consent-notice_card--border-radius, var(--ks-border-radius-card));
+  }
+}
+.dsa-cookie-consent-notice--banner {
+  background-color: var(--dsa-cookie-consent-notice_banner--background-color, var(--ks-background-color-default));
+  border-top: var(--dsa-cookie-consent-notice_banner--border-top, var(--ks-border-color-interface)) solid var(--ks-border-width-default);
+  box-shadow: var(--dsa-cookie-consent-notice_banner--box-shadow, var(--ks-box-shadow-surface));
+  padding: var(--dsa-cookie-consent-notice_banner--padding, var(--ks-spacing-inset-m));
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 500;
+}
+.dsa-cookie-consent-notice__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsa-cookie-consent-notice__buttons--gap, var(--ks-spacing-stack-xs) var(--ks-spacing-inline-s));
+  flex-direction: column;
+}
+@media (min-width: 36em) {
+  .dsa-cookie-consent-notice__buttons {
+    flex-direction: row;
+  }
+}
+.dsa-cookie-consent-revisit {
+  position: fixed;
+  bottom: var(--dsa-cookie-consent-revisit--bottom, var(--ks-spacing-m));
+  left: var(--dsa-cookie-consent-revisit--left, var(--ks-spacing-m));
+  z-index: 1000;
+  height: fit-content;
+  width: fit-content;
+  padding: var(--dsa-cookie-consent-revisit--padding, var(--ks-spacing-inset-s));
+  border-radius: var(--ks-border-radius-circle);
+}
+.dsa-cookie-consent-revisit .icon {
+  margin: 0;
+}
+.dsa-cookie-consent-revisit:hover span {
+  opacity: 1;
+}
+.dsa-cookie-consent-revisit span {
+  transition: var(--ks-transition-hover);
+  position: absolute;
+  width: fit-content;
+  white-space: nowrap;
+  left: 100%;
+  transform: translateX(6.5%);
+  background-color: var(--dsa-cookie-consent-revisit__label--background-color, var(--ks-background-color-default-inverted));
+  padding: var(--dsa-cookie-consent-revisit__label--padding, var(--ks-spacing-inset-squish-xs));
+  border-radius: var(--dsa-cookie-consent-revisit__label--border-radius, 0.25em);
+  opacity: 0;
+}
+.dsa-cookie-consent-revisit span::before {
+  position: absolute;
+  content: "";
+  height: 0.75em;
+  aspect-ratio: 1;
+  background-color: var(--dsa-cookie-consent-revisit__label--background-color, var(--ks-background-color-default-inverted));
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  left: 0;
+}
+.dsa-cookie-consent-dialogue[open] {
+  border-radius: var(--dsa-cookie-consent-dialogue--border-radius, var(--ks-border-radius-card));
+  border: var(--dsa-cookie-consent-dialogue--border, var(--ks-border-color-interface) solid var(--ks-border-width-default));
+  box-shadow: var(--dsa-cookie-consent-dialogue--box-shadow, var(--ks-box-shadow-card));
+  background-color: var(--dsa-cookie-consent-dialogue--background-color, var(--ks-background-color-default));
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  width: calc(100% - var(--dsa-cookie-consent-dialogue--spacing-horizontal, var(--ks-spacing-inset-xs)) * 2);
+  max-width: var(--dsa-cookie-consent-dialogue--max-width, var(--dsa-tile--width_largest));
+  max-height: calc(var(--dsa-cookie-consent-dialogue--max-height, 100%) - var(--dsa-cookie-consent-dialogue--spacing-vertical, var(--ks-spacing-inset-xs)) * 2);
+}
+.dsa-cookie-consent-dialogue__header {
+  padding-top: var(--dsa-cookie-consent-dialogue__block--padding-vertical, var(--ks-spacing-inset-m));
+  padding-bottom: var(--dsa-cookie-consent-dialogue__block--padding-vertical, var(--ks-spacing-inset-m));
+  padding-left: var(--dsa-cookie-consent-dialogue--padding-horizontal, var(--ks-spacing-inset-m));
+  padding-right: var(--dsa-cookie-consent-dialogue--padding-horizontal, var(--ks-spacing-inset-m));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dsa-cookie-consent-dialogue__header--gap, var(--ks-spacing-inline-m));
+}
+.dsa-cookie-consent-dialogue__close.dsa-button {
+  --dsa-button--padding: var(--dsa-cookie-consent-dialogue__close--padding, var(--ks-spacing-inset-xs));
+  --dsa-button_secondary--background-color: var(--dsa-cookie-consent-dialogue__close--background-color, transparent);
+  --dsa-button_secondary--color: var(
+    --dsa-cookie-consent-dialogue__close--color,
+    var(--ks-text-color-interface-interactive)
+  );
+  --dsa-button_secondary--color_hover: var(
+    --dsa-cookie-consent-dialogue__close--color_hover,
+    var(--ks-text-color-interface-interactive)
+  );
+  --dsa-button_secondary--background-color_hover: var(
+    --dsa-cookie-consent-dialogue__close--background-color_hover,
+    var(--ks-color-fg-alpha-8)
+  );
+  margin: calc(var(--dsa-cookie-consent-dialogue__close--padding, var(--ks-spacing-inset-xs)) * -1);
+  border-radius: var(--ks-border-radius-circle);
+}
+.dsa-cookie-consent-dialogue__close.dsa-button .icon {
+  margin-left: 0;
+}
+.dsa-cookie-consent-dialogue__form {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.dsa-cookie-consent-dialogue__content {
+  flex: 1;
+  overflow-y: auto;
+  border-top: var(--dsa-cookie-consent-dialogue__content--border, var(--ks-border-color-interface) solid var(--ks-border-width-default));
+  border-bottom: var(--dsa-cookie-consent-dialogue__content--border, var(--ks-border-color-interface) solid var(--ks-border-width-default));
+}
+.dsa-cookie-consent-dialogue__description {
+  border-bottom: var(--dsa-cookie-consent-dialogue__description--border-bottom, 1px solid var(--ks-border-color-interface));
+  padding-top: calc(var(--dsa-cookie-consent-dialogue__block--padding-vertical, var(--ks-spacing-stack-m)) * 0.65);
+  padding-bottom: calc(var(--dsa-cookie-consent-dialogue__block--padding-vertical, var(--ks-spacing-stack-m)) * 0.65);
+  padding-left: var(--dsa-cookie-consent-dialogue--padding-horizontal, var(--ks-spacing-inline-m));
+  padding-right: var(--dsa-cookie-consent-dialogue--padding-horizontal, var(--ks-spacing-inline-m));
+  font: var(--dsa-cookie-consent-dialogue__description--font, var(--ks-font-interface-s));
+}
+.dsa-cookie-consent-dialogue__options {
+  padding-left: var(--dsa-cookie-consent-dialogue--padding-horizontal, var(--ks-spacing-inline-m));
+  padding-right: var(--dsa-cookie-consent-dialogue--padding-horizontal, var(--ks-spacing-inline-m));
+}
+.dsa-cookie-consent-dialogue__option {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-cookie-consent-dialogue__option--gap, var(--ks-spacing-stack-xs));
+  border-bottom: var(--dsa-cookie-consent-dialogue__option--border-bottom, 1px solid var(--ks-border-color-interface));
+  padding-top: var(--dsa-cookie-consent-dialogue__option--padding-vertical, var(--ks-spacing-inset-m));
+  padding-bottom: var(--dsa-cookie-consent-dialogue__option--padding-vertical, var(--ks-spacing-inset-m));
+}
+.dsa-cookie-consent-dialogue__option:last-child {
+  border-bottom: none;
+}
+.dsa-cookie-consent-dialogue__label {
+  font: var(--dsa-cookie-consent-dialogue__label--font, var(--ks-font-interface-s));
+  color: var(--dsa-cookie-consent-dialogue__label--color, var(--ks-text-color-positive));
+  font-weight: var(--dsa-cookie-consent-dialogue__label--font-weight, var(--ks-font-weight-bold));
+}
+.dsa-cookie-consent-dialogue__option-description {
+  margin: 0;
+  font: var(--dsa-cookie-consent-dialogue__description--font, var(--ks-font-interface-s));
+  color: var(--dsa-cookie-consent-dialogue__description--color, var(--ks-text-color-interface));
+}
+.dsa-cookie-consent-dialogue__toggle {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsa-cookie-consent-dialogue__toggle--gap, var(--ks-spacing-stack-xs) var(--ks-spacing-inline-s));
+  align-items: center;
+}
+.dsa-cookie-consent-dialogue__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsa-cookie-consent-dialogue__buttons--gap, var(--ks-spacing-stack-xs) var(--ks-spacing-inline-s));
+  padding-top: var(--dsa-cookie-consent-dialogue__block--padding-vertical, var(--ks-spacing-inset-m));
+  padding-bottom: var(--dsa-cookie-consent-dialogue__block--padding-vertical, var(--ks-spacing-inset-m));
+  padding-left: var(--dsa-cookie-consent-dialogue--padding-horizontal, var(--ks-spacing-inset-m));
+  padding-right: var(--dsa-cookie-consent-dialogue--padding-horizontal, var(--ks-spacing-inset-m));
+  flex-direction: column;
+}
+@media (min-width: 36em) {
+  .dsa-cookie-consent-dialogue__buttons {
+    flex-direction: row;
+  }
+}
+.dsa-cookie-consent-dialogue::backdrop {
+  background-color: var(--dsa-cookie-consent-overlay--background-color, var(--dsa-overlay--background-color));
+}

package/dist/components/cookie-consent/cookie-consent.schema.dereffed.json ADDED Viewed

@@ -0,0 +1,256 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/cookie-consent.schema.json",
+  "title": "Cookie Consent",
+  "type": "object",
+  "properties": {
+    "notice": {
+      "title": "Initial Cookie Consent Notice",
+      "description": "The initial notice displayed to users regarding cookie consent.",
+      "type": "object",
+      "properties": {
+        "displayMode": {
+          "type": "string",
+          "enum": [
+            "card",
+            "banner"
+          ],
+          "description": "The display mode of the cookie consent component",
+          "default": "card"
+        },
+        "title": {
+          "type": "string",
+          "description": "The title of the cookie consent section",
+          "examples": [
+            "We value your privacy"
+          ]
+        },
+        "acceptButton": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "The label for the accept button",
+              "examples": [
+                "Accept All Cookies"
+              ]
+            }
+          },
+          "additionalProperties": false
+        },
+        "rejectButton": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "The label for the reject button",
+              "examples": [
+                "Reject All Cookies"
+              ]
+            }
+          },
+          "additionalProperties": false
+        },
+        "customizeButton": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "type": "string",
+              "description": "The label for the customize button",
+              "examples": [
+                "Customize Cookies"
+              ]
+            },
+            "variant": {
+              "type": "string",
+              "title": "Variant",
+              "description": "Variant of button to be used",
+              "enum": [
+                "primary",
+                "secondary",
+                "tertiary"
+              ],
+              "default": "secondary"
+            }
+          },
+          "additionalProperties": false
+        },
+        "decisionButtonVariant": {
+          "type": "string",
+          "title": "Variant",
+          "description": "Variant of button to be used",
+          "enum": [
+            "primary",
+            "secondary",
+            "tertiary"
+          ],
+          "default": "secondary"
+        },
+        "description": {
+          "type": "string",
+          "description": "The description of the cookie consent section",
+          "examples": [
+            "This website uses cookies to ensure you get the best experience on our website."
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "revisitButton": {
+      "type": "object",
+      "title": "Revisit Cookie Consent Button",
+      "description": "The button that allows users to revisit their cookie preferences.",
+      "properties": {
+        "label": {
+          "type": "string",
+          "description": "The label for the revisit button",
+          "default": "Manage Cookies"
+        }
+      },
+      "additionalProperties": false
+    },
+    "dialogue": {
+      "type": "object",
+      "title": "Cookie Consent Dialogue",
+      "description": "The dialogue displayed when users choose to customize their cookie preferences.",
+      "properties": {
+        "title": {
+          "type": "string",
+          "description": "The title of the cookie consent dialogue",
+          "examples": [
+            "Manage Cookie Preferences"
+          ]
+        },
+        "description": {
+          "type": "string",
+          "description": "The description of the cookie consent dialogue",
+          "examples": [
+            "Customize your privacy settings here. You can choose which types of cookies and tracking technologies you allow."
+          ]
+        },
+        "required": {
+          "title": "Required Cookies",
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "key": {
+                "type": "string",
+                "title": "Internal Key",
+                "examples": [
+                  "necessary"
+                ]
+              },
+              "name": {
+                "type": "string",
+                "description": "The name of the required cookie",
+                "examples": [
+                  "Session Cookie"
+                ]
+              },
+              "description": {
+                "type": "string",
+                "description": "A description of the required cookie",
+                "examples": [
+                  "This cookie is essential for the website to function and cannot be disabled."
+                ]
+              }
+            },
+            "additionalProperties": false
+          }
+        },
+        "buttons": {
+          "type": "object",
+          "properties": {
+            "acceptLabel": {
+              "type": "string",
+              "description": "The label for the accept button in the dialogue",
+              "default": "Accept All"
+            },
+            "rejectLabel": {
+              "type": "string",
+              "description": "The label for the reject button in the dialogue",
+              "default": "Reject All"
+            },
+            "savePreferencesLabel": {
+              "type": "string",
+              "description": "The label for the button to save preferences",
+              "default": "Save Preferences"
+            }
+          },
+          "additionalProperties": false
+        },
+        "decisionButtonVariant": {
+          "type": "string",
+          "description": "The variant of the decision buttons in the dialogue",
+          "enum": [
+            "secondary",
+            "tertiary"
+          ]
+        },
+        "options": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "key": {
+                "type": "string",
+                "title": "Internal Key",
+                "examples": [
+                  "functionality",
+                  "measurement",
+                  "experience",
+                  "marketing"
+                ]
+              },
+              "name": {
+                "type": "string",
+                "description": "The name of the cookie category",
+                "examples": [
+                  "Essential Cookies"
+                ]
+              },
+              "description": {
+                "type": "string",
+                "description": "A description of the cookie category",
+                "examples": [
+                  "These cookies are necessary for the website to function."
+                ]
+              }
+            },
+            "additionalProperties": false
+          }
+        },
+        "toggleLabels": {
+          "type": "object",
+          "properties": {
+            "accept": {
+              "type": "string",
+              "description": "Label for enabled toggle state",
+              "default": "Accept"
+            },
+            "reject": {
+              "type": "string",
+              "description": "Label for disabled toggle state",
+              "default": "Reject"
+            }
+          },
+          "additionalProperties": false
+        },
+        "alwaysActiveLabel": {
+          "type": "string",
+          "description": "Label that indicates that the cookie category is always active",
+          "default": "Always Active"
+        }
+      },
+      "additionalProperties": false
+    },
+    "component": {
+      "title": "`ks-component` attribute",
+      "description": "Optional custom component identifier",
+      "type": "string",
+      "default": "dsa.cookie-consent"
+    }
+  },
+  "additionalProperties": false
+}