@kickstartds/ds-agency-premium 1.0.1

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

@@ -0,0 +1,182 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/nav-main.schema.json",
+  "title": "Nav Main",
+  "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",
+      "type": "object",
+      "properties": {
+        "src": {
+          "title": "Source",
+          "description": "Picture source",
+          "type": "string",
+          "format": "image",
+          "examples": [
+            "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",
+          "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
+          ]
+        },
+        "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",
+      "default": "/"
+    },
+    "items": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "href": {
+            "type": "string"
+          },
+          "label": {
+            "type": "string"
+          }
+        },
+        "additionalProperties": false,
+        "required": [
+          "href",
+          "label"
+        ]
+      },
+      "examples": [
+        [
+          {
+            "href": "#about",
+            "label": "About us"
+          },
+          {
+            "href": "#services",
+            "label": "Our Services"
+          },
+          {
+            "href": "#project",
+            "label": "Project"
+          },
+          {
+            "href": "#showcase",
+            "label": "Showcase"
+          },
+          {
+            "href": "#blog",
+            "label": "Blog"
+          }
+        ]
+      ]
+    },
+    "type": {
+      "const": "nav-main"
+    }
+  },
+  "additionalProperties": false,
+  "required": [
+    "logo"
+  ]
+}

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

@@ -0,0 +1,53 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/nav-main.schema.json",
+  "title": "Nav Main",
+  "type": "object",
+  "properties": {
+    "logo": {
+      "$ref": "http://schema.kickstartds.com/base/picture.schema.json"
+    },
+    "logoHref": {
+      "type": "string",
+      "default": "/"
+    },
+    "items": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "href": { "type": "string" },
+          "label": { "type": "string" }
+        },
+        "additionalProperties": false,
+        "required": ["href", "label"]
+      },
+      "examples": [
+        [
+          {
+            "href": "#about",
+            "label": "About us"
+          },
+          {
+            "href": "#services",
+            "label": "Our Services"
+          },
+          {
+            "href": "#project",
+            "label": "Project"
+          },
+          {
+            "href": "#showcase",
+            "label": "Showcase"
+          },
+          {
+            "href": "#blog",
+            "label": "Blog"
+          }
+        ]
+      ]
+    }
+  },
+  "additionalProperties": false,
+  "required": ["logo"]
+}

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

@@ -0,0 +1,85 @@
+html.overlay-open {
+  overflow: hidden;
+}
+
+button.nav-toggle {
+  display: block;
+  position: relative;
+  right: 0;
+  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));
+}
+@media (min-width: 62em) {
+  button.nav-toggle {
+    display: none;
+  }
+}
+button.nav-toggle .nav-toggle__label {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+button.nav-toggle .nav-toggle__icon {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  height: 31px;
+  width: 31px;
+  transform: scale(0.7) translate(7.5%, 7.5%);
+  transition: inherit;
+  color: var(--g-nav-toggle--color);
+}
+@media (min-width: 40rem) {
+  button.nav-toggle .nav-toggle__icon {
+    transform: scale(0.9) translate(2.5%, 2.5%);
+  }
+}
+.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);
+}
+.header-is-scrolling-up button.nav-toggle .nav-toggle__icon {
+  color: var(--g-nav-toggle-open--color);
+}
+button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+  content: "";
+}
+button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle, button.nav-toggle .nav-toggle__icon::before, button.nav-toggle .nav-toggle__icon::after {
+  position: absolute;
+  width: 100%;
+  height: 3px;
+  background-color: currentColor;
+}
+button.nav-toggle .nav-toggle__icon .nav-toggle__icon__middle {
+  top: 50%;
+  margin-top: -1.5px;
+}
+button.nav-toggle .nav-toggle__icon::before {
+  top: 2px;
+  transition: top 150ms ease 150ms, transform ease 150ms;
+}
+button.nav-toggle .nav-toggle__icon::after {
+  bottom: 2px;
+  transition: bottom 150ms ease 150ms, transform ease 150ms;
+}
+button.nav-toggle[aria-expanded=true] .nav-toggle__icon__middle {
+  display: none;
+}
+button.nav-toggle[aria-expanded=true] .nav-toggle__icon::before {
+  top: 14px;
+  transition: top ease 150ms, transform 150ms ease 150ms;
+  transform: rotate(-45deg);
+}
+button.nav-toggle[aria-expanded=true] .nav-toggle__icon::after {
+  bottom: 14px;
+  transition: bottom ease 150ms, transform 150ms ease 150ms;
+  transform: rotate(45deg);
+}