@ivds/core 0.1.1

package/src/components/radio-button/radio-button.stories.js

@@ -0,0 +1,379 @@
+// Radio Button component stories for Storybook
+// Showcases all radio button variants, sizes, states, and features
+
+export default {
+  title: 'Core/Radio Button',
+  parameters: {
+    docs: {
+      description: {
+        component: 'CSS-only radio button component using IVDS design tokens. Provides multiple variants, sizes, states, and features for form selections where only one option can be chosen.'
+      }
+    },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            enabled: true
+          },
+          {
+            id: 'label-title-only',
+            enabled: true
+          }
+        ]
+      }
+    }
+  }
+};
+
+// Basic radio button
+export const Default = () => `
+  <label class="ivds-radio-button">
+    <input type="radio" class="ivds-radio-button__input" name="default-example" />
+    <div class="ivds-radio-button__circle"></div>
+    <span class="ivds-radio-button__label">Default Radio Button</span>
+  </label>
+`;
+
+// Radio button with description
+export const WithDescription = () => `
+  <label class="ivds-radio-button">
+    <input type="radio" class="ivds-radio-button__input" name="description-example" />
+    <div class="ivds-radio-button__circle"></div>
+    <div>
+      <span class="ivds-radio-button__label">Premium Shipping</span>
+      <div class="ivds-radio-button__description">
+        Delivery within 1-2 business days. Additional charges may apply.
+      </div>
+    </div>
+  </label>
+`;
+
+// Radio button sizes
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+    <label class="ivds-radio-button ivds-radio-button--small">
+      <input type="radio" class="ivds-radio-button__input" name="size-example" />
+      <div class="ivds-radio-button__circle"></div>
+      <span class="ivds-radio-button__label">Small Radio Button</span>
+    </label>
+    
+    <label class="ivds-radio-button">
+      <input type="radio" class="ivds-radio-button__input" name="size-example" />
+      <div class="ivds-radio-button__circle"></div>
+      <span class="ivds-radio-button__label">Default Radio Button</span>
+    </label>
+    
+    <label class="ivds-radio-button ivds-radio-button--large">
+      <input type="radio" class="ivds-radio-button__input" name="size-example" checked />
+      <div class="ivds-radio-button__circle"></div>
+      <span class="ivds-radio-button__label">Large Radio Button</span>
+    </label>
+  </div>
+`;
+
+// Radio button states
+export const States = () => `
+  <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+    <label class="ivds-radio-button">
+      <input type="radio" class="ivds-radio-button__input" name="state-example" />
+      <div class="ivds-radio-button__circle"></div>
+      <span class="ivds-radio-button__label">Unselected</span>
+    </label>
+    
+    <label class="ivds-radio-button">
+      <input type="radio" class="ivds-radio-button__input" name="state-example" checked />
+      <div class="ivds-radio-button__circle"></div>
+      <span class="ivds-radio-button__label">Selected</span>
+    </label>
+  </div>
+`;
+
+// Disabled states
+export const DisabledStates = () => `
+  <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+    <label class="ivds-radio-button ivds-radio-button--disabled">
+      <input type="radio" class="ivds-radio-button__input" name="disabled-example" disabled />
+      <div class="ivds-radio-button__circle"></div>
+      <span class="ivds-radio-button__label">Disabled Unselected</span>
+    </label>
+    
+    <label class="ivds-radio-button ivds-radio-button--disabled">
+      <input type="radio" class="ivds-radio-button__input" name="disabled-example" checked disabled />
+      <div class="ivds-radio-button__circle"></div>
+      <span class="ivds-radio-button__label">Disabled Selected</span>
+    </label>
+  </div>
+`;
+
+// Validation states
+export const ValidationStates = () => `
+  <div style="display: flex; flex-direction: column; gap: 1.5rem;">
+    <label class="ivds-radio-button ivds-radio-button--error">
+      <input type="radio" class="ivds-radio-button__input" name="validation-example" />
+      <div class="ivds-radio-button__circle"></div>
+      <span class="ivds-radio-button__label">Error State</span>
+    </label>
+    
+    <label class="ivds-radio-button ivds-radio-button--success">
+      <input type="radio" class="ivds-radio-button__input" name="validation-example" checked />
+      <div class="ivds-radio-button__circle"></div>
+      <span class="ivds-radio-button__label">Success State</span>
+    </label>
+  </div>
+`;
+
+// Radio button groups
+export const RadioButtonGroups = () => `
+  <div style="display: flex; flex-direction: column; gap: 2rem;">
+    <div class="ivds-radio-button-group">
+      <div class="ivds-radio-button-group__label">
+        Preferred Contact Method
+      </div>
+      <div class="ivds-radio-button-group__description">
+        Choose how you'd like us to contact you.
+      </div>
+      
+      <label class="ivds-radio-button">
+        <input type="radio" class="ivds-radio-button__input" name="contact-method" value="email" />
+        <div class="ivds-radio-button__circle"></div>
+        <span class="ivds-radio-button__label">Email</span>
+      </label>
+      
+      <label class="ivds-radio-button">
+        <input type="radio" class="ivds-radio-button__input" name="contact-method" value="phone" />
+        <div class="ivds-radio-button__circle"></div>
+        <span class="ivds-radio-button__label">Phone</span>
+      </label>
+      
+      <label class="ivds-radio-button">
+        <input type="radio" class="ivds-radio-button__input" name="contact-method" value="sms" />
+        <div class="ivds-radio-button__circle"></div>
+        <span class="ivds-radio-button__label">SMS</span>
+      </label>
+    </div>
+    
+    <div class="ivds-radio-button-group ivds-radio-button-group--horizontal">
+      <div class="ivds-radio-button-group__label ivds-radio-button-group__label--required">
+        Account Type
+      </div>
+      
+      <label class="ivds-radio-button">
+        <input type="radio" class="ivds-radio-button__input" name="account-type" value="personal" required />
+        <div class="ivds-radio-button__circle"></div>
+        <span class="ivds-radio-button__label">Personal</span>
+      </label>
+      
+      <label class="ivds-radio-button">
+        <input type="radio" class="ivds-radio-button__input" name="account-type" value="business" />
+        <div class="ivds-radio-button__circle"></div>
+        <span class="ivds-radio-button__label">Business</span>
+      </label>
+    </div>
+  </div>
+`;
+
+// Card variant
+export const CardVariant = () => `
+  <div style="display: flex; flex-direction: column; gap: 1rem; max-width: 400px;">
+    <label class="ivds-radio-button">
+      <input type="radio" class="ivds-radio-button__input" name="plan-selection" value="premium" />
+      <div class="ivds-radio-button__circle"></div>
+      <div class="ivds-radio-button--card">
+        <div class="ivds-radio-button__label" style="font-weight: 500; margin-bottom: 0.25rem;">
+          Premium Plan - $29/month
+        </div>
+        <div class="ivds-radio-button__description" style="margin-left: 0;">
+          Access to all features, priority support, and advanced analytics.
+        </div>
+      </div>
+    </label>
+    
+    <label class="ivds-radio-button">
+      <input type="radio" class="ivds-radio-button__input" name="plan-selection" value="basic" />
+      <div class="ivds-radio-button__circle"></div>
+      <div class="ivds-radio-button--card">
+        <div class="ivds-radio-button__label" style="font-weight: 500; margin-bottom: 0.25rem;">
+          Basic Plan - $9/month
+        </div>
+        <div class="ivds-radio-button__description" style="margin-left: 0;">
+          Essential features for getting started.
+        </div>
+      </div>
+    </label>
+    
+    <label class="ivds-radio-button">
+      <input type="radio" class="ivds-radio-button__input" name="plan-selection" value="free" checked />
+      <div class="ivds-radio-button__circle"></div>
+      <div class="ivds-radio-button--card">
+        <div class="ivds-radio-button__label" style="font-weight: 500; margin-bottom: 0.25rem;">
+          Free Plan - $0/month
+        </div>
+        <div class="ivds-radio-button__description" style="margin-left: 0;">
+          Limited features with basic functionality.
+        </div>
+      </div>
+    </label>
+  </div>
+`;
+
+// Radio button group with error
+export const GroupWithError = () => `
+  <div class="ivds-radio-button-group">
+    <div class="ivds-radio-button-group__label ivds-radio-button-group__label--required">
+      Shipping Method
+    </div>
+    <div class="ivds-radio-button-group__description">
+      Please select a shipping method to continue.
+    </div>
+    
+    <label class="ivds-radio-button ivds-radio-button--error">
+      <input type="radio" class="ivds-radio-button__input" name="shipping-method" value="standard" />
+      <div class="ivds-radio-button__circle"></div>
+      <div>
+        <span class="ivds-radio-button__label">Standard Shipping</span>
+        <div class="ivds-radio-button__description">
+          5-7 business days - Free
+        </div>
+      </div>
+    </label>
+    
+    <label class="ivds-radio-button ivds-radio-button--error">
+      <input type="radio" class="ivds-radio-button__input" name="shipping-method" value="express" />
+      <div class="ivds-radio-button__circle"></div>
+      <div>
+        <span class="ivds-radio-button__label">Express Shipping</span>
+        <div class="ivds-radio-button__description">
+          2-3 business days - $9.99
+        </div>
+      </div>
+    </label>
+    
+    <label class="ivds-radio-button ivds-radio-button--error">
+      <input type="radio" class="ivds-radio-button__input" name="shipping-method" value="overnight" />
+      <div class="ivds-radio-button__circle"></div>
+      <div>
+        <span class="ivds-radio-button__label">Overnight Shipping</span>
+        <div class="ivds-radio-button__description">
+          Next business day - $24.99
+        </div>
+      </div>
+    </label>
+    
+    <div class="ivds-radio-button-group__error">
+      Please select a shipping method.
+    </div>
+  </div>
+`;
+
+// Legacy radio component (for backward compatibility)
+export const LegacyRadio = () => `
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <div style="font-weight: 500; margin-bottom: 0.5rem;">Legacy Radio Component:</div>
+    
+    <label class="ivds-radio">
+      <input type="radio" class="ivds-radio__input" name="legacy-example" />
+      <div class="ivds-radio__button"></div>
+      <span class="ivds-radio__label">Option 1</span>
+    </label>
+    
+    <label class="ivds-radio">
+      <input type="radio" class="ivds-radio__input" name="legacy-example" checked />
+      <div class="ivds-radio__button"></div>
+      <span class="ivds-radio__label">Option 2 (Selected)</span>
+    </label>
+    
+    <label class="ivds-radio">
+      <input type="radio" class="ivds-radio__input" name="legacy-example" disabled />
+      <div class="ivds-radio__button"></div>
+      <span class="ivds-radio__label">Option 3 (Disabled)</span>
+    </label>
+  </div>
+`;
+
+// Accessibility example
+export const AccessibilityFeatures = () => `
+  <div style="display: flex; flex-direction: column; gap: 1.5rem; max-width: 500px;">
+    <fieldset class="ivds-radio-button-group" style="border: none; padding: 0; margin: 0;">
+      <legend class="ivds-radio-button-group__label">
+        Notification Preferences
+      </legend>
+      <div class="ivds-radio-button-group__description">
+        Choose how often you'd like to receive notifications.
+      </div>
+      
+      <label class="ivds-radio-button">
+        <input 
+          type="radio" 
+          class="ivds-radio-button__input" 
+          name="notifications"
+          value="immediate"
+          id="immediate-notifications"
+          aria-describedby="immediate-description"
+        />
+        <div class="ivds-radio-button__circle"></div>
+        <div>
+          <span class="ivds-radio-button__label">Immediate</span>
+          <div id="immediate-description" class="ivds-radio-button__description">
+            Receive notifications as soon as events occur.
+          </div>
+        </div>
+      </label>
+      
+      <label class="ivds-radio-button">
+        <input 
+          type="radio" 
+          class="ivds-radio-button__input" 
+          name="notifications"
+          value="daily"
+          id="daily-notifications"
+          aria-describedby="daily-description"
+        />
+        <div class="ivds-radio-button__circle"></div>
+        <div>
+          <span class="ivds-radio-button__label">Daily Summary</span>
+          <div id="daily-description" class="ivds-radio-button__description">
+            Receive a daily digest of all notifications.
+          </div>
+        </div>
+      </label>
+      
+      <label class="ivds-radio-button">
+        <input 
+          type="radio" 
+          class="ivds-radio-button__input" 
+          name="notifications"
+          value="weekly"
+          id="weekly-notifications"
+          aria-describedby="weekly-description"
+          checked
+        />
+        <div class="ivds-radio-button__circle"></div>
+        <div>
+          <span class="ivds-radio-button__label">Weekly Summary</span>
+          <div id="weekly-description" class="ivds-radio-button__description">
+            Receive a weekly digest of all notifications.
+          </div>
+        </div>
+      </label>
+      
+      <label class="ivds-radio-button">
+        <input 
+          type="radio" 
+          class="ivds-radio-button__input" 
+          name="notifications"
+          value="none"
+          id="no-notifications"
+          aria-describedby="none-description"
+        />
+        <div class="ivds-radio-button__circle"></div>
+        <div>
+          <span class="ivds-radio-button__label">No Notifications</span>
+          <div id="none-description" class="ivds-radio-button__description">
+            Turn off all notifications.
+          </div>
+        </div>
+      </label>
+    </fieldset>
+  </div>
+`;

package/src/components/tag/_tag-mixin.scss

@@ -0,0 +1,261 @@
+// Tag component mixins and private styles
+// This file contains mixins for tag variants, sizes, and internal utilities
+
+@use '../../variables/variables' as vars;
+
+// Base tag mixin with common styles
+@mixin tag-base {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  border: var(--borderWidth-1, 1px) solid transparent;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 0.15s ease-in-out;
+  user-select: none;
+  
+  &:focus-within {
+    outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+    outline-offset: 2px;
+  }
+}
+
+// Tag variant mixin
+@mixin tag-variant($bg-color, $text-color, $border-color: transparent, $hover-bg: null, $hover-border: null) {
+  background-color: $bg-color;
+  color: $text-color;
+  border-color: $border-color;
+  
+  @if $hover-bg {
+    &:hover {
+      background-color: $hover-bg;
+      
+      @if $hover-border {
+        border-color: $hover-border;
+      }
+    }
+  }
+}
+
+// Tag size mixin
+@mixin tag-size($padding-y, $padding-x, $font-size, $min-height: null) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  
+  @if $min-height {
+    min-height: $min-height;
+  }
+}
+
+// Tag with icon mixin
+@mixin tag-with-icon($gap: var(--spacing-2, 0.5rem)) {
+  gap: $gap;
+  
+  .ivds-tag__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentcolor;
+    }
+  }
+}
+
+// Removable tag mixin
+@mixin tag-removable {
+  padding-right: var(--spacing-1, 0.25rem);
+  
+  .ivds-tag__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--spacing-2, 0.5rem);
+    padding: var(--spacing-1, 0.25rem);
+    background: transparent;
+    border: none;
+    border-radius: var(--borderRadius-sm, 0.25rem);
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+    
+    &:hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+      outline-offset: 1px;
+      opacity: 1;
+    }
+    
+    &:active {
+      transform: scale(0.95);
+    }
+    
+    svg {
+      width: 0.875em;
+      height: 0.875em;
+      fill: currentcolor;
+    }
+  }
+}
+
+// Tag link mixin (for clickable tags)
+@mixin tag-link {
+  cursor: pointer;
+  text-decoration: none;
+  
+  &:hover {
+    text-decoration: none;
+  }
+  
+  &:focus {
+    outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+    outline-offset: 2px;
+  }
+  
+  &:active {
+    transform: translateY(1px);
+  }
+}
+
+// Tag outlined variant mixin
+@mixin tag-outlined($border-color, $text-color, $hover-bg: null) {
+  background-color: transparent;
+  border-color: $border-color;
+  color: $text-color;
+  
+  @if $hover-bg {
+    &:hover {
+      background-color: $hover-bg;
+    }
+  }
+}
+
+// Tag solid variant mixin (for high contrast)
+@mixin tag-solid($bg-color, $text-color, $hover-bg: null) {
+  background-color: $bg-color;
+  color: $text-color;
+  border-color: $bg-color;
+  
+  @if $hover-bg {
+    &:hover {
+      background-color: $hover-bg;
+      border-color: $hover-bg;
+    }
+  }
+}
+
+// Tag group mixin
+@mixin tag-group($gap: var(--spacing-2, 0.5rem)) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $gap;
+  align-items: center;
+}
+
+// Tag size variants
+@mixin tag-small {
+  @include tag-size(var(--spacing-1, 0.25rem), var(--spacing-2, 0.5rem), var(--fontSize-xs, 0.75rem), 20px);
+  
+  .ivds-tag__icon svg {
+    width: 0.875em;
+    height: 0.875em;
+  }
+  
+  &.ivds-tag--removable {
+    .ivds-tag__remove {
+      margin-left: var(--spacing-1, 0.25rem);
+      padding: 2px;
+      
+      svg {
+        width: 0.75em;
+        height: 0.75em;
+      }
+    }
+  }
+}
+
+@mixin tag-large {
+  @include tag-size(var(--spacing-2, 0.5rem), var(--spacing-4, 1rem), var(--fontSize-base, 1rem), 32px);
+  
+  .ivds-tag__icon svg {
+    width: 1.125em;
+    height: 1.125em;
+  }
+  
+  &.ivds-tag--removable {
+    .ivds-tag__remove {
+      margin-left: var(--spacing-3, 0.75rem);
+      padding: var(--spacing-1, 0.25rem);
+      
+      svg {
+        width: 1em;
+        height: 1em;
+      }
+    }
+  }
+}
+
+// Tag status variants (for different semantic meanings)
+@mixin tag-status-new {
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 6px;
+    height: 6px;
+    background-color: var(--color-semantic-success-500, #22c55e);
+    border-radius: 50%;
+    border: 1px solid var(--color-semantic-neutral-50, #f8fafc);
+  }
+}
+
+@mixin tag-status-updated {
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 6px;
+    height: 6px;
+    background-color: var(--color-semantic-info-500, #3b82f6);
+    border-radius: 50%;
+    border: 1px solid var(--color-semantic-neutral-50, #f8fafc);
+  }
+}
+
+// Tag interactive states
+@mixin tag-interactive {
+  cursor: pointer;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+// Tag disabled state
+@mixin tag-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}