@ivds/core 0.1.1

package/src/components/navigation/_navigation-mixins.scss

@@ -0,0 +1,270 @@
+// Navigation component mixins and private styles
+// This file contains mixins for navigation variants and internal utilities
+
+@use '../../variables/variables' as vars;
+
+// Base navigation mixin with common styles
+@mixin navigation-base {
+  --nav-link-color: var(--color-semantic-neutral-700, #404040);
+  --nav-link-color-hover: var(--color-brand-primary-600, #ea580c);
+  --nav-link-color-active: var(--color-brand-primary-600, #ea580c);
+  --nav-link-bg-hover: var(--color-brand-primary-50, #fff7ed);
+  --nav-link-bg-active: var(--color-brand-primary-100, #ffedd5);
+  --nav-spacing-x: var(--spacing-4, 1rem);
+  --nav-spacing-y: var(--spacing-3, 0.75rem);
+
+  display: flex;
+  align-items: center;
+}
+
+// Navigation list mixin
+@mixin navigation-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: 0;
+}
+
+// Navigation item mixin
+@mixin navigation-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+// Navigation link mixin
+@mixin navigation-link {
+  display: flex;
+  align-items: center;
+  padding: var(--nav-spacing-y) var(--nav-spacing-x);
+  color: var(--nav-link-color);
+  text-decoration: none;
+  font-weight: var(--fontWeight-medium, 500);
+  font-size: var(--fontSize-base, 1rem);
+  line-height: var(--lineHeight-tight, 1.25);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  transition: all 0.15s ease-in-out;
+  white-space: nowrap;
+  
+  &:hover {
+    color: var(--nav-link-color-hover);
+    background-color: var(--nav-link-bg-hover);
+  }
+  
+  &:focus {
+    outline: 2px solid var(--color-brand-primary-500, #f97316);
+    outline-offset: 2px;
+    text-decoration: none;
+  }
+  
+  &:active {
+    background-color: var(--nav-link-bg-active);
+  }
+}
+
+// Active navigation link mixin
+@mixin navigation-link-active {
+  color: var(--nav-link-color-active);
+  background-color: var(--nav-link-bg-active);
+  font-weight: var(--fontWeight-semibold, 600);
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80%;
+    height: 2px;
+    background-color: var(--color-brand-primary-500, #f97316);
+    border-radius: var(--borderRadius-full, 9999px);
+  }
+}
+
+// Navigation with icons
+@mixin navigation-with-icons {
+  .ivds-navigation__link {
+    gap: var(--spacing-2, 0.5rem);
+  }
+  
+  .ivds-navigation__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: currentcolor;
+    }
+  }
+}
+
+// Horizontal navigation variant
+@mixin navigation-horizontal {
+  .ivds-navigation__list {
+    flex-direction: row;
+    align-items: center;
+  }
+  
+  .ivds-navigation__link--active::after {
+    bottom: -2px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80%;
+    height: 2px;
+  }
+}
+
+// Vertical navigation variant
+@mixin navigation-vertical {
+  flex-direction: column;
+  align-items: stretch;
+  
+  .ivds-navigation__list {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .ivds-navigation__item {
+    width: 100%;
+  }
+  
+  .ivds-navigation__link {
+    width: 100%;
+    justify-content: flex-start;
+    
+    &--active::after {
+      top: 50%;
+      left: -2px;
+      transform: translateY(-50%);
+      width: 2px;
+      height: 80%;
+    }
+  }
+}
+
+// Navigation size variants
+@mixin navigation-compact {
+  --nav-spacing-x: var(--spacing-3, 0.75rem);
+  --nav-spacing-y: var(--spacing-2, 0.5rem);
+  
+  .ivds-navigation__link {
+    font-size: var(--fontSize-sm, 0.875rem);
+  }
+}
+
+@mixin navigation-spacious {
+  --nav-spacing-x: var(--spacing-6, 1.5rem);
+  --nav-spacing-y: var(--spacing-4, 1rem);
+  
+  .ivds-navigation__link {
+    font-size: var(--fontSize-lg, 1.125rem);
+  }
+}
+
+// Navigation theme variants
+@mixin navigation-theme-dark {
+  --nav-link-color: var(--color-semantic-neutral-200, #e5e5e5);
+  --nav-link-color-hover: var(--color-brand-primary-300, #fdba74);
+  --nav-link-color-active: var(--color-brand-primary-400, #fb923c);
+  --nav-link-bg-hover: rgba(249, 115, 22, 0.1);
+  --nav-link-bg-active: rgba(249, 115, 22, 0.2);
+}
+
+@mixin navigation-theme-minimal {
+  --nav-link-bg-hover: transparent;
+  --nav-link-bg-active: transparent;
+  
+  .ivds-navigation__link {
+    &:hover {
+      text-decoration: underline;
+    }
+    
+    &--active {
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+      text-underline-offset: 4px;
+    }
+    
+    &--active::after {
+      display: none;
+    }
+  }
+}
+
+// Navigation with dropdown support
+@mixin navigation-with-dropdown {
+  .ivds-navigation__dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 200px;
+    background-color: var(--color-semantic-neutral-50, #fafafa);
+    border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e5e5e5);
+    border-radius: var(--borderRadius-md, 0.375rem);
+    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-8px);
+    transition: all 0.15s ease-in-out;
+    z-index: 50;
+    
+    .ivds-navigation__list {
+      flex-direction: column;
+      padding: var(--spacing-2, 0.5rem);
+    }
+    
+    .ivds-navigation__link {
+      width: 100%;
+      justify-content: flex-start;
+      
+      &--active::after {
+        display: none;
+      }
+    }
+  }
+  
+  .ivds-navigation__item {
+    &--has-dropdown {
+      position: relative;
+      
+      &:hover .ivds-navigation__dropdown {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+    }
+  }
+}
+
+// Breadcrumb navigation variant
+@mixin navigation-breadcrumb {
+  .ivds-navigation__list {
+    flex-wrap: wrap;
+  }
+  
+  .ivds-navigation__item {
+    &:not(:last-child)::after {
+      content: '/';
+      margin: 0 var(--spacing-2, 0.5rem);
+      color: var(--color-semantic-neutral-500, #737373);
+      font-weight: var(--fontWeight-normal, 400);
+    }
+  }
+  
+  .ivds-navigation__link {
+    padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
+    
+    &--active {
+      background-color: transparent;
+      font-weight: var(--fontWeight-medium, 500);
+      cursor: default;
+      
+      &::after {
+        display: none;
+      }
+    }
+  }
+}

package/src/components/navigation/navigation.scss

@@ -0,0 +1,64 @@
+// Navigation component styles
+// Provides styling for the IVDS navigation component following Helsinki Design System patterns
+
+@use 'navigation-mixins' as nav;
+
+.ivds-navigation {
+  @include nav.navigation-base;
+  
+  &__list {
+    @include nav.navigation-list;
+  }
+  
+  &__item {
+    @include nav.navigation-item;
+  }
+  
+  &__link {
+    @include nav.navigation-link;
+    
+    &--active {
+      @include nav.navigation-link-active;
+    }
+  }
+  
+  // Layout variants
+  &--horizontal {
+    @include nav.navigation-horizontal;
+  }
+  
+  &--vertical {
+    @include nav.navigation-vertical;
+  }
+  
+  // Size variants
+  &--compact {
+    @include nav.navigation-compact;
+  }
+  
+  &--spacious {
+    @include nav.navigation-spacious;
+  }
+  
+  // Theme variants
+  &--theme-dark {
+    @include nav.navigation-theme-dark;
+  }
+  
+  &--theme-minimal {
+    @include nav.navigation-theme-minimal;
+  }
+  
+  // Feature variants
+  &--with-icons {
+    @include nav.navigation-with-icons;
+  }
+  
+  &--with-dropdown {
+    @include nav.navigation-with-dropdown;
+  }
+  
+  &--breadcrumb {
+    @include nav.navigation-breadcrumb;
+  }
+}