@kickstartds/ds-agency-premium 1.2.10--canary.171.76273d8.0 → 1.2.10--canary.178.33c3c92.0

package/dist/components/nav-main/nav-main.css

@@ -1,33 +1,38 @@
-.c-nav-main {
-  --c-nav-main--background: linear-gradient(
+.nav-main {
+  --dsa-nav-main--background: linear-gradient(
     125deg,
     var(--ks-background-color-default),
     var(--ks-color-primary-to-bg-6)
   );
-  --c-nav-main--color: var(--ks-color-fg);
-  --c-nav-main--color-hover: var(--ks-color-fg-alpha-4);
-  --c-nav-main--color-active: var(--ks-color-fg);
-  --c-nav-main--font: var(--ks-font-interface-l);
-  --c-nav-main--font-weight: var(--ks-font-weight-semi-bold);
-  --c-nav-main--font-weight-active: var(--ks-font-weight-bold);
-  --c-nav-main--padding: 0.5rem 0;
-  --c-nav-main-link--padding: 0.35em 0;
-  --c-nav-main--shadow: 50px 0px 50px 50px rgba(0, 0, 0, 0.539);
+  --dsa-nav-main__link--color: var(--ks-text-color-interface-interactive);
+  --dsa-nav-main__link--opacity_hover: 0.75;
+  --dsa-nav-main__link--color_active: var(--ks-text-color-interface-interactive-active);
+  --dsa-nav-main__link--font: var(--ks-font-interface-l);
+  --dsa-nav-main__link--font-weight: var(--ks-font-weight-semi-bold);
+  --dsa-nav-main__link--font-weight_active: var(--ks-font-weight-semi-bold);
+  --dsa-nav-main__link--padding: 0.35em 0;
+  --dsa-nav-main--shadow: 50px 0px 50px 50px rgba(0, 0, 0, 0.539);
 }
 @media (min-width: 62rem) {
-  .c-nav-main {
-    --c-nav-main-link--padding: 0 0.75em;
-    --c-nav-main--font: var(--ks-font-interface-m);
-    --c-nav-main--padding: 1px;
+  .nav-main {
+    --dsa-nav-main__link--padding: 0 0.75em;
+    --dsa-nav-main__link--font: var(--ks-font-interface-m);
   }
 }
 
-.c-nav-main {
+.nav-main {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 }
-.c-nav-main ul {
+.nav-main--active .nav-main__item .nav-main__link {
+  color: var(--dsa-nav-main__link--color);
+}
+.nav-main--active .nav-main__item--active .nav-main__link {
+  color: var(--dsa-nav-main__link--color_active);
+  font-weight: var(--dsa-nav-main__link--font-weight_active);
+}
+.nav-main ul {
   /* critical:start */
   box-sizing: border-box;
   margin: 0;
@@ -35,49 +40,46 @@
   list-style: none;
   /* critical:end */
 }
-.c-nav-main ul li {
+.nav-main ul li {
   display: block;
   margin: 0;
 }
-.c-nav-main__item {
+.nav-main__item {
   position: relative;
 }
-.c-nav-main__item--active .nav-main__link {
-  color: var(--c-nav-main--color-active);
-  font-weight: var(--c-nav-main--font-weight-active);
-}
-.c-nav-main__list:hover .c-nav-main__link {
-  color: var(--c-nav-main--color-hover);
+.nav-main__list:hover .nav-main__link {
+  opacity: var(--dsa-nav-main__link--opacity_hover);
 }
-.c-nav-main a.c-nav-main__link {
+.nav-main a.nav-main__link {
   /* critical:start */
-  font: var(--c-nav-main--font);
-  font-weight: var(--c-nav-main--font-weight);
-  color: var(--c-nav-main--color);
+  font: var(--dsa-nav-main__link--font);
+  font-weight: var(--dsa-nav-main__link--font-weight);
+  color: var(--dsa-nav-main__link--color);
   position: relative;
   display: block;
-  padding: var(--c-nav-main-link--padding);
+  padding: var(--dsa-nav-main__link--padding);
   /* critical:end */
 }
-.c-nav-main a.c-nav-main__link:hover {
-  color: var(--c-nav-main--color);
+.nav-main a.nav-main__link:hover {
+  opacity: 1;
+  color: var(--dsa-nav-main__link--color_active);
 }
-.c-nav-main a.c-nav-main__link:active {
-  color: var(--c-nav-main--color-active);
+.nav-main a.nav-main__link:active {
+  color: var(--dsa-nav-main__link--color_active);
 }
-.c-nav-main__logo {
-  padding: var(--g-header--spacing-v) 0;
+.nav-main__logo {
+  padding: var(--dsa-header--spacing-v) 0;
 }
-.c-nav-main__logo img {
-  height: var(--g-logo--height);
+.nav-main__logo img {
+  height: var(--dsa-logo--height);
   width: auto;
 }
-.c-nav-main__wrap {
+.nav-main__wrap {
   flex-grow: 0;
   flex-shrink: 1;
 }
 @media (max-width: 62rem) {
-  .c-nav-main {
+  .nav-main {
     /* critical:start */
     left: -100%;
     /* critical:end */
@@ -92,12 +94,12 @@
     bottom: 0;
     top: 0;
     overflow-y: auto;
-    background: var(--c-nav-main--background);
+    background: var(--dsa-nav-main--background);
     backface-visibility: hidden;
     -webkit-overflow-scrolling: touch;
     box-shadow: 20px 0px 30px rgba(0, 0, 0, 0);
   }
-  .c-nav-main__item--icon {
+  .nav-main__item--icon {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(100%);
@@ -108,56 +110,57 @@
     white-space: nowrap;
     width: 1px;
   }
-  .overlay-open .c-nav-main {
+  .overlay-open .nav-main {
     left: 0;
-    box-shadow: var(--c-nav-main--shadow);
+    box-shadow: var(--dsa-nav-main--shadow);
   }
-  .c-nav-main > .c-nav-main__logo {
-    margin: var(--g-header-spacing);
+  .nav-main > .nav-main__logo {
+    margin-top: var(--dsa-header--spacing-vertical);
+    margin-bottom: var(--dsa-header--spacing-vertical);
   }
-  .c-nav-main ul.nav-main__list {
-    padding-top: calc(var(--g-header-spacing-v) - var(--ks-spacing-s));
+  .nav-main ul.nav-main__list {
+    padding-top: calc(var(--dsa-header--spacing-vertical) - var(--ks-spacing-s));
   }
-  .c-nav-main ul.nav-main__list .nav-main--button {
-    margin-left: var(--g-header-spacing-h);
-    margin-top: var(--g-header-spacing-v);
+  .nav-main ul.nav-main__list .nav-main--button {
+    margin-left: var(--dsa-header--spacing-horizontal);
+    margin-top: var(--dsa-header--spacing-vertical);
   }
-  .c-nav-main ul.nav-main__list .nav-main--button .c-button {
-    --c-button--font: var(--ks-font-interface-s);
+  .nav-main ul.nav-main__list .nav-main--button .button {
+    --button--font: var(--ks-font-interface-s);
   }
-  .c-nav-main ul.nav-main__list .nav-main--button .c-button .c-button__content {
-    --c-button--padding: 0.4rem 1rem;
+  .nav-main ul.nav-main__list .nav-main--button .button .button__content {
+    --button--padding: 0.4rem 1rem;
   }
 }
 @media (min-width: 62rem) {
-  .c-nav-main {
+  .nav-main {
     /* critical:start */
     /* critical:end */
   }
-  .c-nav-main > .c-nav-main__logo {
+  .nav-main > .nav-main__logo {
     display: none;
   }
-  .c-nav-main .c-button--wrapper {
+  .nav-main .button--wrapper {
     margin-left: var(--ks-spacing-inline-xs);
   }
-  .c-nav-main__wrap {
+  .nav-main__wrap {
     display: flex;
     align-items: center;
   }
-  .c-nav-main__list {
+  .nav-main__list {
     /* critical:start */
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     /* critical:end */
   }
-  .c-nav-main__list .nav-main--button .c-button {
-    --c-button--font: var(--ks-font-interface-s);
+  .nav-main__list .nav-main--button .button {
+    --button--font: var(--ks-font-interface-s);
   }
-  .c-nav-main__list .nav-main--button .c-button span {
+  .nav-main__list .nav-main--button .button span {
     font-size: 98%;
   }
-  .c-nav-main__item {
+  .nav-main__item {
     /* critical:start */
     flex-shrink: 0;
     /* critical:end */

package/dist/components/nav-main/nav-main.schema.dereffed.json

@@ -126,6 +126,7 @@
     },
     "logoHref": {
       "type": "string",
+      "format": "uri",
       "default": "/"
     },
     "items": {
@@ -134,10 +135,14 @@
         "type": "object",
         "properties": {
           "href": {
-            "type": "string"
+            "type": "string",
+            "format": "uri"
           },
           "label": {
             "type": "string"
+          },
+          "active": {
+            "type": "boolean"
           }
         },
         "additionalProperties": false,
@@ -149,24 +154,25 @@
       "examples": [
         [
           {
-            "href": "#about",
-            "label": "About us"
+            "label": "Nav Item",
+            "href": "#"
           },
           {
-            "href": "#services",
-            "label": "Our Services"
+            "label": "Active Item",
+            "href": "#",
+            "active": true
           },
           {
-            "href": "#project",
-            "label": "Project"
+            "label": "Another Item",
+            "href": "#"
           },
           {
-            "href": "#showcase",
-            "label": "Showcase"
+            "label": "One more Item",
+            "href": "#"
           },
           {
-            "href": "#blog",
-            "label": "Blog"
+            "label": "Last Item",
+            "href": "#"
           }
         ]
       ]

package/dist/components/nav-main/nav-main.schema.json

@@ -9,6 +9,7 @@
     },
     "logoHref": {
       "type": "string",
+      "format": "uri",
       "default": "/"
     },
     "items": {
@@ -16,8 +17,9 @@
       "items": {
         "type": "object",
         "properties": {
-          "href": { "type": "string" },
-          "label": { "type": "string" }
+          "href": { "type": "string", "format": "uri" },
+          "label": { "type": "string" },
+          "active": { "type": "boolean" }
         },
         "additionalProperties": false,
         "required": ["href", "label"]
@@ -25,24 +27,25 @@
       "examples": [
         [
           {
-            "href": "#about",
-            "label": "About us"
+            "label": "Nav Item",
+            "href": "#"
           },
           {
-            "href": "#services",
-            "label": "Our Services"
+            "label": "Active Item",
+            "href": "#",
+            "active": true
           },
           {
-            "href": "#project",
-            "label": "Project"
+            "label": "Another Item",
+            "href": "#"
           },
           {
-            "href": "#showcase",
-            "label": "Showcase"
+            "label": "One more Item",
+            "href": "#"
           },
           {
-            "href": "#blog",
-            "label": "Blog"
+            "label": "Last Item",
+            "href": "#"
           }
         ]
       ]

package/dist/components/nav-main/nav-toggle.css

@@ -1,3 +1,8 @@
+.nav-toggle {
+  --nav-toggle--color: var(--ks-text-color-default);
+  --nav-toggle--color_open: var(--ks-text-color-default);
+}
+
 html.overlay-open {
   overflow: hidden;
 }
@@ -9,8 +14,8 @@ button.nav-toggle {
   box-sizing: content-box;
   transition: top 0.15s;
   z-index: 1;
-  padding: 0 var(--g-header-spacing-h);
-  transform: translateX(var(--g-header-spacing-h));
+  padding: 0 var(--dsa-header--spacing-horizontal);
+  transform: translateX(var(--dsa-header--spacing-horizontal));
 }
 @media (min-width: 62em) {
   button.nav-toggle {
@@ -30,13 +35,13 @@ button.nav-toggle .nav-toggle__label {
 }
 button.nav-toggle .nav-toggle__icon {
   position: relative;
-  display: inline-block;
+  display: block;
   cursor: pointer;
-  height: 31px;
+  height: var(--dsa-logo--height);
   width: 31px;
   transform: scale(0.7) translate(7.5%, 7.5%);
   transition: inherit;
-  color: var(--g-nav-toggle--color);
+  color: var(--nav-toggle--color);
 }
 @media (min-width: 40rem) {
   button.nav-toggle .nav-toggle__icon {
@@ -44,10 +49,10 @@ button.nav-toggle .nav-toggle__icon {
   }
 }
 .overlay-open button.nav-toggle .nav-toggle__icon, .overlay-open .header-is-scrolling button.nav-toggle .nav-toggle__icon {
-  color: var(--g-nav-toggle-open--color);
+  color: var(--nav-toggle--color_open);
 }
 .header-is-scrolling-up button.nav-toggle .nav-toggle__icon {
-  color: var(--g-nav-toggle-open--color);
+  color: var(--nav-toggle--color_open);
 }
 button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
   content: "";

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

@@ -8,7 +8,7 @@
     "seo"
   ],
   "properties": {
-    "sections": {
+    "section": {
       "type": "array",
       "title": "Sections",
       "description": "Collection of sections (with their contents) to render on the page",
@@ -408,6 +408,7 @@
                         "properties": {
                           "question": {
                             "type": "string",
+                            "format": "markdown",
                             "title": "Question",
                             "description": "The question",
                             "examples": [
@@ -416,6 +417,7 @@
                           },
                           "answer": {
                             "type": "string",
+                            "format": "markdown",
                             "title": "Answer",
                             "description": "The answer to the question",
                             "examples": [
@@ -490,11 +492,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": {
@@ -521,6 +527,17 @@
                               "This is a feature"
                             ]
                           },
+                          "style": {
+                            "type": "string",
+                            "enum": [
+                              "intext",
+                              "stack",
+                              "centered",
+                              "besideLarge",
+                              "besideSmall"
+                            ],
+                            "default": "stack"
+                          },
                           "cta": {
                             "type": "object",
                             "title": "Call to Action",
@@ -541,9 +558,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,
@@ -577,6 +613,7 @@
                           "src": {
                             "type": "string",
                             "title": "src",
+                            "format": "image",
                             "description": "The source of the image",
                             "examples": [
                               "https://example.com/image1.jpg"
@@ -592,6 +629,7 @@
                           },
                           "caption": {
                             "type": "string",
+                            "format": "markdown",
                             "title": "Caption",
                             "description": "The caption of the image",
                             "examples": [
@@ -984,6 +1022,7 @@
                   "properties": {
                     "text": {
                       "type": "string",
+                      "format": "markdown",
                       "title": "Text",
                       "description": "Text content to display beside the image",
                       "examples": [
@@ -1001,6 +1040,7 @@
                       "properties": {
                         "src": {
                           "type": "string",
+                          "format": "image",
                           "title": "Image Source",
                           "description": "URL of the image to display",
                           "examples": [
@@ -1474,7 +1514,7 @@
                         },
                         "chevron": {
                           "title": "Icon",
-                          "description": "Toggle chevron icon",
+                          "description": "Toggle arrow icon",
                           "type": "boolean",
                           "default": false
                         },
@@ -1494,7 +1534,7 @@
                       "type": "string",
                       "title": "Image",
                       "description": "Image to display as cover",
-                      "format": "uri"
+                      "format": "image"
                     },
                     "imageRatio": {
                       "type": "string",
@@ -1619,6 +1659,7 @@
                   "properties": {
                     "text": {
                       "type": "string",
+                      "format": "markdown",
                       "title": "Text",
                       "description": "Text",
                       "examples": [

package/dist/components/page/page.schema.json

@@ -6,7 +6,7 @@
   "type": "object",
   "required": ["seo"],
   "properties": {
-    "sections": {
+    "section": {
       "type": "array",
       "title": "Sections",
       "description": "Collection of sections (with their contents) to render on the page",

package/dist/components/page-wrapper/index.d.ts

@@ -1,3 +1,2 @@
-import { FC, PropsWithChildren } from "react";
-declare const PageWrapper: FC<PropsWithChildren>;
-export { PageWrapper };
+import { RawPageWrapper as PageWrapper } from "../raw-page-wrapper/index.js";
+export { PageWrapper as default, PageWrapper };