@utahdts/utah-design-system-header 0.4.3 → 0.6.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utahdts/utah-design-system-header",
-  "version": "0.4.3",
+  "version": "0.6.0-beta.0",
   "description": "Utah Header for the Utah Design System",
   "exports": {
     ".": {
@@ -23,6 +23,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "publishHeader": "npm publish --access public",
+    "publishHeaderBeta": "npm publish --access public --tag beta",
     "sass-build": "sass --no-source-map ./src/css/index.scss ./src/css/build/utah-design-system-header.css",
     "test-publish": "npm publish --dry-run",
     "test": "vitest",
@@ -39,17 +40,18 @@
   },
   "homepage": "https://github.com/utahdts/utah-design-system#readme",
   "dependencies": {
-    "@popperjs/core": "2.11.7"
+    "@popperjs/core": "2.11.7",
+    "@utahdts/utah-design-system": "0.6.0-beta.0"
   },
   "devDependencies": {
-    "eslint": "8.37.0",
+    "eslint": "8.38.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
-    "sass": "1.60.0",
-    "vite": "4.2.1",
+    "sass": "1.62.0",
+    "vite": "4.2.2",
     "vite-plugin-eslint": "1.8.1",
-    "vitest": "0.29.8"
+    "vitest": "0.30.1"
   },
   "type": "module"
 }

package/src/css/_logos.scss

@@ -48,17 +48,59 @@
     }
   }
 }
-.utah-logo-svg {
-  height: 100%;
-  position: relative;
-  margin-bottom: -4px;
-  svg {
+.utah-design-system {
+  .utah-logo-wrapper {
     height: 100%;
-    width: auto;
-    fill: var(--primary-color);
-    font-family: SourceSansPro-Regular, 'Source Sans Pro', Arial, Helvetica, sans-serif;
-    font-weight: normal;
-    font-size: 14px;
-    display: block;
+
+    .popup {
+      &__wrapper {
+
+      }
+      &__content {
+        border-radius: var(--radius-small);
+        background: var(--gray-color);
+        color: white;
+        box-sizing: border-box;
+        padding: var(--spacing-3xs) var(--spacing-s);
+        border-color: var(--gray-color)
+      }
+      &__arrow {
+        &::before {
+
+          border-color: var(--gray-color) !important;
+        }
+      }
+    }
+  }
+  button.utah-logo-svg {
+    height: 100%;
+    position: relative;
+    margin-bottom: -4px;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    &:hover {
+      background: none;
+    }
+    &:active {
+      box-shadow: none;
+    }
+    svg {
+      height: 100%;
+      width: auto;
+      fill: var(--primary-color);
+      font-family: SourceSansPro-Regular, 'Source Sans Pro', Arial, Helvetica, sans-serif;
+      font-weight: normal;
+      font-size: 14px;
+      display: block;
+    }
+  }
+  .utds-official-website-hover {
+    &__wrapper {
+      font-size: 1rem;
+      font-weight: var(--font-weight-normal);
+      text-align: center;
+    }
   }
 }
+

package/src/css/_official-website-popup.scss

@@ -0,0 +1,56 @@
+.utah-design-system {
+  &.utds-official-website-popup {
+    &__wrapper {
+      background: var(--gray-color);
+      color: white;
+      padding: var(--spacing-l);
+      position: relative;
+
+      &.visually-hidden {
+        position: absolute;
+      }
+    }
+  }
+  button.utds-official-website-popup__close-button {
+    position: absolute;
+    top: var(--spacing);
+    right: var(--spacing);
+
+    &.icon-button [class*=utds-icon-before-] {
+      color: white;
+      &::before {
+        font-size: .9rem;
+      }
+    }
+  }
+  .utds-official-website-popup {
+    &__heading {
+      font-size: var(--font-size-xl);
+      font-weight: var(--font-weight-semi-bold);
+      padding: 0 var(--spacing-xl) 0 0;
+      line-height: 1;
+      margin-bottom: var(--spacing-s);
+    }
+    &__content {
+      display: flex;
+      gap: var(--spacing-2xl);
+    }
+    &__col {
+      max-width: 400px;
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-xs);
+
+      [class*=utds-icon-before-]::before {
+        margin: 0;
+      }
+
+      .big-icon[class*=utds-icon-before-] {
+        &::before {
+          font-size: 2.5rem;
+          margin: 0;
+        }
+      }
+    }
+  }
+}

package/src/css/build/utah-design-system-header.css

@@ -912,6 +912,11 @@ base color swatches for the design system
   content: "j";
 }
 
+.utah-design-system .utds-icon-before-lock::before,
+.utah-design-system .utds-icon-after-lock::after {
+  content: "k";
+}
+
 /*
 ############     _settings-index.scss      ############
 variables and settings
@@ -1128,13 +1133,13 @@ elemental html: h1, h2, h3, ul, li, etc.
 
 .utah-design-system h3 {
   font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--font-weight-semi-bold);
   margin: 0;
 }
 
 .utah-design-system h4 {
   font-size: var(--font-size-l);
-  font-weight: var(--font-weight-normal);
+  font-weight: var(--font-weight-semi-bold);
   margin: 0;
 }
 
@@ -3198,6 +3203,11 @@ Font size variables
   content: "j";
 }
 
+.utah-design-system .utds-icon-before-lock::before,
+.utah-design-system .utds-icon-after-lock::after {
+  content: "k";
+}
+
 /*
 ############     _settings-index.scss      ############
 variables and settings
@@ -4790,6 +4800,10 @@ base color swatches for the design system
 .utah-design-system .utds-icon-after-account::after {
   content: "j";
 }
+.utah-design-system .utds-icon-before-lock::before,
+.utah-design-system .utds-icon-after-lock::after {
+  content: "k";
+}
 
 /*
 ############     _settings-index.scss      ############
@@ -5132,12 +5146,35 @@ variables and settings
   color: var(--gray-medium-color);
 }
 
-.utah-logo-svg {
+.utah-design-system .utah-logo-wrapper {
+  height: 100%;
+}
+.utah-design-system .utah-logo-wrapper .popup__content {
+  border-radius: var(--radius-small);
+  background: var(--gray-color);
+  color: white;
+  box-sizing: border-box;
+  padding: var(--spacing-3xs) var(--spacing-s);
+  border-color: var(--gray-color);
+}
+.utah-design-system .utah-logo-wrapper .popup__arrow::before {
+  border-color: var(--gray-color) !important;
+}
+.utah-design-system button.utah-logo-svg {
   height: 100%;
   position: relative;
   margin-bottom: -4px;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+}
+.utah-design-system button.utah-logo-svg:hover {
+  background: none;
 }
-.utah-logo-svg svg {
+.utah-design-system button.utah-logo-svg:active {
+  box-shadow: none;
+}
+.utah-design-system button.utah-logo-svg svg {
   height: 100%;
   width: auto;
   fill: var(--primary-color);
@@ -5146,6 +5183,56 @@ variables and settings
   font-size: 14px;
   display: block;
 }
+.utah-design-system .utds-official-website-hover__wrapper {
+  font-size: 1rem;
+  font-weight: var(--font-weight-normal);
+  text-align: center;
+}
+
+.utah-design-system.utds-official-website-popup__wrapper {
+  background: var(--gray-color);
+  color: white;
+  padding: var(--spacing-l);
+  position: relative;
+}
+.utah-design-system.utds-official-website-popup__wrapper.visually-hidden {
+  position: absolute;
+}
+.utah-design-system button.utds-official-website-popup__close-button {
+  position: absolute;
+  top: var(--spacing);
+  right: var(--spacing);
+}
+.utah-design-system button.utds-official-website-popup__close-button.icon-button [class*=utds-icon-before-] {
+  color: white;
+}
+.utah-design-system button.utds-official-website-popup__close-button.icon-button [class*=utds-icon-before-]::before {
+  font-size: 0.9rem;
+}
+.utah-design-system .utds-official-website-popup__heading {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semi-bold);
+  padding: 0 var(--spacing-xl) 0 0;
+  line-height: 1;
+  margin-bottom: var(--spacing-s);
+}
+.utah-design-system .utds-official-website-popup__content {
+  display: flex;
+  gap: var(--spacing-2xl);
+}
+.utah-design-system .utds-official-website-popup__col {
+  max-width: 400px;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+}
+.utah-design-system .utds-official-website-popup__col [class*=utds-icon-before-]::before {
+  margin: 0;
+}
+.utah-design-system .utds-official-website-popup__col .big-icon[class*=utds-icon-before-]::before {
+  font-size: 2.5rem;
+  margin: 0;
+}
 
 .utds-badge__wrapper {
   align-items: center;

package/src/css/index.scss

@@ -5,6 +5,7 @@
 @use 'popup';
 @use 'utah-header-wrapper';
 @use 'logos';
+@use 'official-website-popup';
 @use 'badge';
 @use 'vertical-menu';
 @use 'mobile-menu';

package/src/css/media-queries.css

@@ -43,6 +43,14 @@
     left: 50%;
     transform: translateX(-50%) translateY(110%);
   }
+
+  .utah-design-system .utds-official-website-popup__content {
+    flex-wrap: wrap;
+    gap: var(--spacing-l);
+  }
+  .utah-design-system .utds-official-website-popup__col {
+    width: 100%;
+  }
 }
 
 @media screen and (max-width: media-size__mobile__PLACEHOLDER) {