@ivds/core 0.1.1

package/src/components/header/_header-mixin.scss

@@ -0,0 +1,275 @@
+// Header component mixins and private styles
+// This file contains mixins for header layout, branding, and responsive behavior
+
+@use '../../variables/variables' as vars;
+
+// Base header mixin with common layout styles
+@mixin header-base {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
+  background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+  min-height: 64px;
+  
+  // Ensure proper z-index for overlays
+  position: relative;
+  z-index: 10;
+}
+
+// Header layout mixin for different arrangements
+@mixin header-layout($justify: space-between, $gap: var(--spacing-6, 1.5rem)) {
+  justify-content: $justify;
+  gap: $gap;
+  
+  // Responsive behavior
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+    min-height: 56px;
+  }
+}
+
+// Branding area mixin
+@mixin header-brand($logo-size: 2rem, $text-size: var(--fontSize-lg, 1.125rem)) {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  
+  &-logo {
+    height: $logo-size;
+    width: auto;
+    margin-right: var(--spacing-3, 0.75rem);
+    
+    @media (max-width: 768px) {
+      height: calc(#{$logo-size} * 0.875);
+      margin-right: var(--spacing-2, 0.5rem);
+    }
+  }
+  
+  &-text {
+    font-size: $text-size;
+    font-weight: var(--fontWeight-bold, 700);
+    color: var(--color-semantic-neutral-900, #0f172a);
+    text-decoration: none;
+    line-height: var(--lineHeight-tight, 1.25);
+    
+    &:hover {
+      color: var(--color-brand-primary-600, #ea580c);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+      border-radius: var(--borderRadius-sm, 0.25rem);
+    }
+    
+    @media (max-width: 768px) {
+      font-size: var(--fontSize-base, 1rem);
+    }
+  }
+}
+
+// Navigation area mixin
+@mixin header-nav($gap: var(--spacing-6, 1.5rem)) {
+  display: flex;
+  align-items: center;
+  gap: $gap;
+  flex: 1;
+  justify-content: center;
+  
+  @media (max-width: 768px) {
+    display: none; // Hide on mobile by default
+    
+    &--mobile-visible {
+      display: flex;
+      flex-basis: 100%;
+      order: 3;
+      justify-content: flex-start;
+      margin-top: var(--spacing-3, 0.75rem);
+      padding-top: var(--spacing-3, 0.75rem);
+      border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+      gap: var(--spacing-4, 1rem);
+    }
+  }
+  
+  a {
+    color: var(--color-semantic-neutral-700, #374151);
+    text-decoration: none;
+    font-weight: var(--fontWeight-medium, 500);
+    font-size: var(--fontSize-sm, 0.875rem);
+    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
+    border-radius: var(--borderRadius-md, 0.375rem);
+    transition: all 0.15s ease-in-out;
+    
+    &:hover {
+      color: var(--color-brand-primary-600, #ea580c);
+      background-color: var(--color-brand-primary-50, #fff7ed);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+    }
+    
+    &[aria-current="page"] {
+      color: var(--color-brand-primary-600, #ea580c);
+      background-color: var(--color-brand-primary-100, #fed7aa);
+      font-weight: var(--fontWeight-semibold, 600);
+    }
+  }
+}
+
+// Actions area mixin
+@mixin header-actions($gap: var(--spacing-3, 0.75rem)) {
+  display: flex;
+  align-items: center;
+  gap: $gap;
+  flex-shrink: 0;
+  
+  @media (max-width: 768px) {
+    gap: var(--spacing-2, 0.5rem);
+  }
+}
+
+// Sticky header mixin
+@mixin header-sticky($shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05))) {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  box-shadow: $shadow;
+  backdrop-filter: blur(8px);
+  background-color: rgba(252, 252, 253, 0.95);
+  
+  @supports not (backdrop-filter: blur(8px)) {
+    background-color: var(--color-semantic-neutral-25, #fcfcfd);
+  }
+}
+
+// Header variant for different themes
+@mixin header-theme($bg-color, $border-color, $text-color) {
+  background-color: $bg-color;
+  border-bottom-color: $border-color;
+  
+  .ivds-header__brand-text {
+    color: $text-color;
+  }
+  
+  .ivds-header__nav a {
+    color: $text-color;
+    
+    &:hover {
+      background-color: rgba($text-color, 0.1);
+    }
+  }
+}
+
+// Dark theme header
+@mixin header-dark {
+  @include header-theme(
+    var(--color-semantic-neutral-900, #0f172a),
+    var(--color-semantic-neutral-700, #374151),
+    var(--color-semantic-neutral-50, #f8fafc)
+  );
+}
+
+// Transparent header mixin
+@mixin header-transparent {
+  background-color: transparent;
+  border-bottom: none;
+  backdrop-filter: none;
+  
+  &.ivds-header--sticky {
+    background-color: rgba(252, 252, 253, 0.95);
+    border-bottom: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+    backdrop-filter: blur(8px);
+  }
+}
+
+// Compact header mixin for reduced height
+@mixin header-compact {
+  padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
+  min-height: 48px;
+  
+  .ivds-header__brand {
+    &-logo {
+      height: 1.5rem;
+      margin-right: var(--spacing-2, 0.5rem);
+    }
+    
+    &-text {
+      font-size: var(--fontSize-base, 1rem);
+    }
+  }
+  
+  .ivds-header__nav {
+    gap: var(--spacing-4, 1rem);
+    
+    a {
+      padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+      font-size: var(--fontSize-xs, 0.75rem);
+    }
+  }
+  
+  .ivds-header__actions {
+    gap: var(--spacing-2, 0.5rem);
+  }
+}
+
+// Mobile menu toggle mixin
+@mixin header-mobile-toggle {
+  display: none;
+  background: none;
+  border: none;
+  padding: var(--spacing-2, 0.5rem);
+  cursor: pointer;
+  color: var(--color-semantic-neutral-700, #374151);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  
+  &:hover {
+    background-color: var(--color-semantic-neutral-100, #f3f4f6);
+  }
+  
+  &:focus {
+    outline: 2px solid var(--color-brand-primary-500, #f97316);
+    outline-offset: 2px;
+  }
+  
+  @media (max-width: 768px) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+// Responsive container mixin for header content
+@mixin header-container($max-width: 1200px) {
+  max-width: $max-width;
+  margin: 0 auto;
+  width: 100%;
+}
+
+// Search integration mixin
+@mixin header-search($flex-basis: 400px) {
+  flex: 1;
+  max-width: $flex-basis;
+  margin: 0 var(--spacing-4, 1rem);
+  
+  @media (max-width: 768px) {
+    display: none;
+    
+    &--mobile-visible {
+      display: block;
+      flex-basis: 100%;
+      order: 2;
+      margin: var(--spacing-3, 0.75rem) 0 0 0;
+      max-width: none;
+    }
+  }
+}

package/src/components/header/header.scss

@@ -0,0 +1,84 @@
+// Header component styles
+// Provides styling for the IVDS header component with layout and branding mixins
+
+@use '_header-mixin' as header;
+
+.ivds-header {
+  @include header.header-base;
+  @include header.header-layout;
+  
+  // Brand area
+  &__brand {
+    @include header.header-brand;
+  }
+  
+  // Navigation area
+  &__nav {
+    @include header.header-nav;
+  }
+  
+  // Actions area
+  &__actions {
+    @include header.header-actions;
+  }
+  
+  // Mobile menu toggle button
+  &__mobile-toggle {
+    @include header.header-mobile-toggle;
+  }
+  
+  // Search area
+  &__search {
+    @include header.header-search;
+  }
+  
+  // Container wrapper
+  &__container {
+    @include header.header-container;
+    @include header.header-layout;
+  }
+  
+  // Variants
+  &--sticky {
+    @include header.header-sticky;
+  }
+  
+  &--dark {
+    @include header.header-dark;
+  }
+  
+  &--transparent {
+    @include header.header-transparent;
+  }
+  
+  &--compact {
+    @include header.header-compact;
+  }
+  
+  // Responsive navigation visibility
+  &--mobile-nav-open {
+    .ivds-header__nav {
+      @media (max-width: 768px) {
+        display: flex;
+        flex-basis: 100%;
+        order: 3;
+        justify-content: flex-start;
+        margin-top: var(--spacing-3, 0.75rem);
+        padding-top: var(--spacing-3, 0.75rem);
+        border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
+        gap: var(--spacing-4, 1rem);
+        flex-wrap: wrap;
+      }
+    }
+    
+    .ivds-header__search--mobile-visible {
+      @media (max-width: 768px) {
+        display: block;
+        flex-basis: 100%;
+        order: 2;
+        margin: var(--spacing-3, 0.75rem) 0 0 0;
+        max-width: none;
+      }
+    }
+  }
+}