@ivds/core 0.1.1

package/src/components/footer/_footer-mixin.scss

@@ -0,0 +1,385 @@
+// Footer component mixins and private styles
+// This file contains mixins for footer layout, multi-column organization, and responsive stacking
+
+@use '../../variables/variables' as vars;
+
+// Base footer mixin with common styles
+@mixin footer-base {
+  padding: var(--spacing-8, 2rem) var(--spacing-6, 1.5rem);
+  background-color: var(--color-semantic-neutral-900, #0f172a);
+  color: var(--color-semantic-neutral-300, #cbd5e1);
+  
+  // Ensure proper contrast and readability
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+
+// Footer container mixin for content width management
+@mixin footer-container($max-width: 1200px) {
+  max-width: $max-width;
+  margin: 0 auto;
+  width: 100%;
+}
+
+// Multi-column grid layout mixin
+@mixin footer-grid($columns: 4, $gap: var(--spacing-8, 2rem), $min-column-width: 250px) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr));
+  gap: $gap;
+  margin-bottom: var(--spacing-8, 2rem);
+  
+  // Responsive behavior for different screen sizes
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-6, 1.5rem);
+    margin-bottom: var(--spacing-6, 1.5rem);
+  }
+  
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--spacing-4, 1rem);
+    margin-bottom: var(--spacing-4, 1rem);
+  }
+  
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-6, 1.5rem);
+  }
+}
+
+// Footer section mixin for individual column styling
+@mixin footer-section {
+  // Section title styling
+  &-title {
+    margin: 0 0 var(--spacing-4, 1rem) 0;
+    font-size: var(--fontSize-lg, 1.125rem);
+    font-weight: var(--fontWeight-semibold, 600);
+    color: var(--color-semantic-neutral-25, #fcfcfd);
+    line-height: var(--lineHeight-tight, 1.25);
+    
+    @media (max-width: 768px) {
+      font-size: var(--fontSize-base, 1rem);
+      margin-bottom: var(--spacing-3, 0.75rem);
+    }
+  }
+  
+  // Section list styling
+  &-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  
+  // Section list item styling
+  &-item {
+    margin-bottom: var(--spacing-2, 0.5rem);
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  // Section link styling
+  &-link {
+    color: var(--color-semantic-neutral-300, #cbd5e1);
+    text-decoration: none;
+    font-size: var(--fontSize-sm, 0.875rem);
+    transition: color 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    
+    &:hover {
+      color: var(--color-semantic-neutral-25, #fcfcfd);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+      border-radius: var(--borderRadius-sm, 0.25rem);
+    }
+    
+    // Icon support in links
+    svg {
+      margin-right: var(--spacing-2, 0.5rem);
+      flex-shrink: 0;
+    }
+  }
+}
+
+// Footer bottom section mixin (copyright, legal links)
+@mixin footer-bottom($border-color: var(--color-semantic-neutral-700, #374151)) {
+  padding-top: var(--spacing-8, 2rem);
+  border-top: var(--borderWidth-1, 1px) solid $border-color;
+  text-align: center;
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-400, #9ca3af);
+  
+  @media (max-width: 768px) {
+    padding-top: var(--spacing-6, 1.5rem);
+    text-align: left;
+  }
+  
+  // Links in bottom section
+  a {
+    color: var(--color-semantic-neutral-300, #cbd5e1);
+    text-decoration: none;
+    
+    &:hover {
+      color: var(--color-semantic-neutral-25, #fcfcfd);
+      text-decoration: underline;
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+      border-radius: var(--borderRadius-sm, 0.25rem);
+    }
+  }
+  
+  // Inline legal links
+  &--inline-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-4, 1rem);
+    flex-wrap: wrap;
+    
+    @media (max-width: 768px) {
+      justify-content: flex-start;
+      gap: var(--spacing-3, 0.75rem);
+    }
+  }
+}
+
+// Footer theme variants
+@mixin footer-theme($bg-color, $text-color, $title-color, $border-color) {
+  background-color: $bg-color;
+  color: $text-color;
+  
+  .ivds-footer__section-title {
+    color: $title-color;
+  }
+  
+  .ivds-footer__section-link {
+    color: $text-color;
+    
+    &:hover {
+      color: $title-color;
+    }
+  }
+  
+  .ivds-footer__bottom {
+    border-top-color: $border-color;
+    color: rgba($text-color, 0.8);
+  }
+}
+
+// Light theme footer
+@mixin footer-light {
+  @include footer-theme(
+    var(--color-semantic-neutral-50, #f8fafc),
+    var(--color-semantic-neutral-600, #475569),
+    var(--color-semantic-neutral-900, #0f172a),
+    var(--color-semantic-neutral-200, #e2e8f0)
+  );
+}
+
+// Minimal footer mixin for simple layouts
+@mixin footer-minimal {
+  padding: var(--spacing-6, 1.5rem) var(--spacing-4, 1rem);
+  text-align: center;
+  
+  .ivds-footer__bottom {
+    padding-top: 0;
+    border-top: none;
+  }
+  
+  @media (max-width: 768px) {
+    padding: var(--spacing-4, 1rem);
+  }
+}
+
+// Footer with brand section mixin
+@mixin footer-brand($logo-size: 2rem) {
+  &-logo {
+    height: $logo-size;
+    width: auto;
+    margin-bottom: var(--spacing-3, 0.75rem);
+    
+    @media (max-width: 768px) {
+      height: calc(#{$logo-size} * 0.875);
+    }
+  }
+  
+  &-name {
+    font-size: var(--fontSize-xl, 1.25rem);
+    font-weight: var(--fontWeight-bold, 700);
+    color: var(--color-semantic-neutral-25, #fcfcfd);
+    margin-bottom: var(--spacing-2, 0.5rem);
+    
+    @media (max-width: 768px) {
+      font-size: var(--fontSize-lg, 1.125rem);
+    }
+  }
+  
+  &-description {
+    font-size: var(--fontSize-sm, 0.875rem);
+    color: var(--color-semantic-neutral-400, #9ca3af);
+    line-height: var(--lineHeight-relaxed, 1.625);
+    margin-bottom: var(--spacing-4, 1rem);
+  }
+}
+
+// Social links mixin
+@mixin footer-social($gap: var(--spacing-3, 0.75rem)) {
+  display: flex;
+  gap: $gap;
+  margin-top: var(--spacing-4, 1rem);
+  
+  @media (max-width: 768px) {
+    justify-content: center;
+    margin-top: var(--spacing-3, 0.75rem);
+  }
+  
+  a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--borderRadius-md, 0.375rem);
+    background-color: var(--color-semantic-neutral-800, #1e293b);
+    color: var(--color-semantic-neutral-300, #cbd5e1);
+    transition: all 0.2s ease-in-out;
+    
+    &:hover {
+      background-color: var(--color-brand-primary-500, #f97316);
+      color: var(--color-semantic-neutral-25, #fcfcfd);
+      transform: translateY(-2px);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+    }
+    
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+      margin: 0;
+    }
+  }
+}
+
+// Newsletter signup mixin
+@mixin footer-newsletter {
+  &-form {
+    display: flex;
+    gap: var(--spacing-2, 0.5rem);
+    margin-top: var(--spacing-3, 0.75rem);
+    
+    @media (max-width: 480px) {
+      flex-direction: column;
+    }
+  }
+  
+  &-input {
+    flex: 1;
+    padding: var(--spacing-3, 0.75rem);
+    border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-600, #475569);
+    border-radius: var(--borderRadius-md, 0.375rem);
+    background-color: var(--color-semantic-neutral-800, #1e293b);
+    color: var(--color-semantic-neutral-100, #f1f5f9);
+    font-size: var(--fontSize-sm, 0.875rem);
+    
+    &::placeholder {
+      color: var(--color-semantic-neutral-500, #64748b);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+      border-color: var(--color-brand-primary-500, #f97316);
+    }
+    
+    @media (max-width: 480px) {
+      width: 100%;
+    }
+  }
+  
+  &-button {
+    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
+    background-color: var(--color-brand-primary-500, #f97316);
+    color: var(--color-semantic-neutral-25, #fcfcfd);
+    border: none;
+    border-radius: var(--borderRadius-md, 0.375rem);
+    font-size: var(--fontSize-sm, 0.875rem);
+    font-weight: var(--fontWeight-medium, 500);
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+    white-space: nowrap;
+    
+    &:hover {
+      background-color: var(--color-brand-primary-600, #ea580c);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #f97316);
+      outline-offset: 2px;
+    }
+    
+    @media (max-width: 480px) {
+      width: 100%;
+    }
+  }
+  
+  &-description {
+    font-size: var(--fontSize-sm, 0.875rem);
+    color: var(--color-semantic-neutral-400, #9ca3af);
+    margin-bottom: var(--spacing-3, 0.75rem);
+    line-height: var(--lineHeight-relaxed, 1.625);
+  }
+}
+
+// Responsive stacking mixin for mobile
+@mixin footer-responsive-stack {
+  @media (max-width: 768px) {
+    .ivds-footer__grid {
+      grid-template-columns: 1fr 1fr;
+      gap: var(--spacing-6, 1.5rem) var(--spacing-4, 1rem);
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .ivds-footer__grid {
+      grid-template-columns: 1fr;
+      gap: var(--spacing-6, 1.5rem);
+    }
+    
+    .ivds-footer__section {
+      text-align: center;
+      
+      &:first-child {
+        text-align: left;
+      }
+    }
+  }
+}
+
+// Address styling mixin
+@mixin footer-address {
+  font-style: normal;
+  line-height: var(--lineHeight-relaxed, 1.625);
+  
+  p {
+    margin-bottom: var(--spacing-2, 0.5rem);
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  strong {
+    color: var(--color-semantic-neutral-200, #e2e8f0);
+    font-weight: var(--fontWeight-medium, 500);
+  }
+}

package/src/components/footer/footer.scss

@@ -0,0 +1,86 @@
+// Footer component styles
+// Provides styling for the IVDS footer component with multi-column layout and responsive stacking
+
+@use '_footer-mixin' as footer;
+
+.ivds-footer {
+  @include footer.footer-base;
+  @include footer.footer-responsive-stack;
+  
+  // Content container
+  &__content {
+    @include footer.footer-container;
+  }
+  
+  // Multi-column grid layout
+  &__grid {
+    @include footer.footer-grid;
+  }
+  
+  // Individual footer sections
+  &__section {
+    @include footer.footer-section;
+  }
+  
+  // Bottom section with copyright and legal links
+  &__bottom {
+    @include footer.footer-bottom;
+  }
+  
+  // Brand section elements
+  &__brand {
+    @include footer.footer-brand;
+  }
+  
+  // Social links container
+  &__social {
+    @include footer.footer-social;
+  }
+  
+  // Newsletter signup elements
+  &__newsletter {
+    @include footer.footer-newsletter;
+  }
+  
+  // Address styling
+  address {
+    @include footer.footer-address;
+  }
+  
+  // Variants
+  &--light {
+    @include footer.footer-light;
+  }
+  
+  &--minimal {
+    @include footer.footer-minimal;
+  }
+  
+  // Grid layout variants
+  &--two-columns {
+    .ivds-footer__grid {
+      @include footer.footer-grid(2, var(--spacing-8, 2rem), 300px);
+    }
+  }
+  
+  &--three-columns {
+    .ivds-footer__grid {
+      @include footer.footer-grid(3, var(--spacing-8, 2rem), 250px);
+    }
+  }
+  
+  &--five-columns {
+    .ivds-footer__grid {
+      @include footer.footer-grid(5, var(--spacing-6, 1.5rem), 200px);
+    }
+  }
+  
+  // Bottom section variants
+  &--bottom-inline {
+    .ivds-footer__bottom {
+      @include footer.footer-bottom;
+      
+      @extend .ivds-footer__bottom--inline-links;
+    }
+  }
+}