@vsn-ux/gaia-styles 0.6.0 → 0.6.2

package/dist/docs/Notification.md

@@ -0,0 +1,341 @@
+# Notification
+
+## Visual Structure
+
+```
+ga-notification [--information|--success|--error|--warning]
+  ├── ga-notification__icon (optional)
+  ├── ga-notification__content
+  │   ├── ga-notification__heading (optional)
+  │   │   ├── ga-notification__title
+  │   │   └── ga-notification__title-actions (optional)
+  │   └── ga-notification__description
+  └── ga-notification__progress [--indeterminate] (optional)
+      └── ga-notification__progress-bar
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-notification` - Main container for the entire notification component
+
+### Mandatory Elements
+
+- `ga-notification__content` - Container for all text content within the notification
+- `ga-notification__description` - The contents of the notification
+
+### Optional Elements
+
+- `ga-notification__icon` - Icon displayed to enhance the visual meaning of the notification
+- `ga-notification__heading` - Container that groups the title and action buttons
+- `ga-notification__title` - The heading text of the notification
+- `ga-notification__title-actions` - Container for action buttons displayed in the title area
+- `ga-notification__progress` - Container for the progress bar, indicating the status of the notification
+- `ga-notification__progress-bar` - The actual progress bar element, use css `width` to control the progress percentage value
+- Dismiss button - Button to close/dismiss the notification
+
+### Modifiers
+
+- `ga-notification--information` - Styles the notification with information colors
+- `ga-notification--success` - Styles the notification with success colors
+- `ga-notification--error` - Styles the notification with error colors
+- `ga-notification--warning` - Styles the notification with warning colors
+- `ga-notification__progress--indeterminate` - Styles the notification with indeterminate progress bar
+
+## Examples
+
+### Default
+
+```html
+<div class="ga-notification">
+  <div class="ga-notification__content">
+    <p class="ga-notification__description">
+      This is an information notification message.
+    </p>
+  </div>
+</div>
+```
+
+### With Title
+
+```html
+<div class="ga-notification">
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Information notification</div>
+    </div>
+    <p class="ga-notification__description">
+      Here is some important information for you.
+    </p>
+  </div>
+</div>
+```
+
+### With Icon
+
+```html
+<div class="ga-notification">
+  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <p class="ga-notification__description">
+      Here is some important information for you.
+    </p>
+  </div>
+</div>
+```
+
+### With Icon & Title
+
+```html
+<div class="ga-notification">
+  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Information notification</div>
+    </div>
+    <p class="ga-notification__description">
+      Here is some important information for you.
+    </p>
+  </div>
+</div>
+```
+
+### Success
+
+```html
+<div class="ga-notification ga-notification--success">
+  <!-- icon: circle-check, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Success notification</div>
+    </div>
+    <p class="ga-notification__description">
+      The operation was completed successfully.
+    </p>
+  </div>
+</div>
+```
+
+### Error
+
+```html
+<div class="ga-notification ga-notification--error">
+  <!-- icon: octagon-alert, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Error notification</div>
+    </div>
+    <p class="ga-notification__description">
+      An error occurred while processing your request.
+    </p>
+  </div>
+</div>
+```
+
+### Warning
+
+```html
+<div class="ga-notification ga-notification--warning">
+  <!-- icon: triangle-alert, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Warning notification</div>
+    </div>
+    <p class="ga-notification__description">
+      Please review the following warning message.
+    </p>
+  </div>
+</div>
+```
+
+### Information
+
+```html
+<div class="ga-notification ga-notification--information">
+  <!-- icon: info, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Information notification</div>
+    </div>
+    <p class="ga-notification__description">
+      Here is some important information for you.
+    </p>
+  </div>
+</div>
+```
+
+### With Icon & Dismiss
+
+```html
+<div class="ga-notification">
+  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <p class="ga-notification__description">
+      This is an information notification message.
+    </p>
+  </div>
+  <button type="button" class="ga-button ga-button--icon-only ga-button--ghost">
+    <!-- icon: x, size=24 -->
+  </button>
+</div>
+```
+
+### With Content
+
+```html
+<div class="ga-notification">
+  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Title of the notification</div>
+    </div>
+    <div class="ga-notification__description">
+      <p>This is an information notification message.</p>
+      <div class="mt-4 flex flex-wrap gap-2">
+        <button type="button" class="ga-button ga-button--primary">
+          <!-- icon: check, size=24 -->
+          Approve
+        </button>
+        <button type="button" class="ga-button ga-button--secondary">
+          <!-- icon: octagon-x, size=24 -->
+          Reject
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### With Title Actions
+
+```html
+<div class="ga-notification">
+  <!-- icon: hand-coins, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Title of the notification</div>
+      <div class="ga-notification__title-actions">
+        <button
+          type="button"
+          class="ga-button ga-button--icon-only ga-button--ghost"
+        >
+          <!-- icon: ellipsis, size=24 -->
+        </button>
+        <button
+          type="button"
+          class="ga-button ga-button--icon-only ga-button--ghost"
+        >
+          <!-- icon: bell-off, size=24 -->
+        </button>
+        <button
+          type="button"
+          class="ga-button ga-button--icon-only ga-button--ghost"
+        >
+          <!-- icon: chevrons-left-right-ellipsis, size=24 -->
+        </button>
+      </div>
+    </div>
+    <div class="ga-notification__description">
+      <p>This is an information notification message.</p>
+    </div>
+  </div>
+</div>
+```
+
+### With Progress Bar
+
+```html
+<div class="ga-notification">
+  <div class="ga-notification__content">
+    <p class="ga-notification__description">
+      This is an information notification message.
+    </p>
+  </div>
+  <div class="ga-notification__progress">
+    <div class="ga-notification__progress-bar" style="width: 35%"></div>
+  </div>
+</div>
+```
+```html
+<div class="ga-notification ga-notification--success">
+  <!-- icon: circle-check, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Success notification</div>
+    </div>
+    <p class="ga-notification__description">
+      The operation was completed successfully.
+    </p>
+  </div>
+  <div class="ga-notification__progress">
+    <div class="ga-notification__progress-bar" style="width: 35%"></div>
+  </div>
+</div>
+```
+```html
+<div class="ga-notification ga-notification--error">
+  <!-- icon: octagon-alert, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Error notification</div>
+    </div>
+    <p class="ga-notification__description">
+      An error occurred while processing your request.
+    </p>
+  </div>
+  <div class="ga-notification__progress">
+    <div class="ga-notification__progress-bar" style="width: 35%"></div>
+  </div>
+</div>
+```
+```html
+<div class="ga-notification ga-notification--warning">
+  <!-- icon: triangle-alert, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Warning notification</div>
+    </div>
+    <p class="ga-notification__description">
+      Please review the following warning message.
+    </p>
+  </div>
+  <div class="ga-notification__progress">
+    <div class="ga-notification__progress-bar" style="width: 35%"></div>
+  </div>
+</div>
+```
+```html
+<div class="ga-notification ga-notification--information">
+  <!-- icon: info, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Information notification</div>
+    </div>
+    <p class="ga-notification__description">
+      Here is some important information for you.
+    </p>
+  </div>
+  <div class="ga-notification__progress">
+    <div class="ga-notification__progress-bar" style="width: 35%"></div>
+  </div>
+</div>
+```
+```html
+<div class="ga-notification ga-notification--information">
+  <!-- icon: info, size=24, class="ga-notification__icon" -->
+  <div class="ga-notification__content">
+    <div class="ga-notification__heading">
+      <div class="ga-notification__title">Information notification</div>
+    </div>
+    <p class="ga-notification__description">
+      Here is some important information for you.
+    </p>
+  </div>
+  <div
+    class="ga-notification__progress ga-notification__progress--indeterminate"
+  >
+    <div class="ga-notification__progress-bar"></div>
+  </div>
+</div>
+```

package/dist/docs/ProgressBar.md

@@ -0,0 +1,87 @@
+# Progress Bar
+
+## Visual Structure
+
+```
+ga-progress [--success|--error|--indeterminate]
+  ├── ga-progress__label (optional)
+  ├── ga-progress__buffer
+  │   └── ga-progress__bar
+  └── ga-progress__helper (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-progress` - Main container for the progress bar component
+
+### Mandatory Elements
+
+- `ga-progress__buffer` - Background buffer for the progress bar
+- `ga-progress__bar` - Actual progress indicator
+
+### Optional Elements
+
+- `ga-progress__label` - Label for the progress bar
+- `ga-progress__helper` - Helper text providing additional context
+
+### Modifiers
+
+- `ga-progress--success` - Indicates a successful operation
+- `ga-progress--error` - Indicates an error or failure
+- `ga-progress--indeterminate` - Represents an ongoing process without a defined end
+
+## Examples
+
+### Default
+
+```html
+<div class="ga-progress w-40">
+  <div class="ga-progress__label">Label</div>
+  <div class="ga-progress__buffer">
+    <div class="ga-progress__bar" style="width: 40%"></div>
+  </div>
+  <div class="ga-progress__helper">Helper text</div>
+</div>
+```
+
+### Success
+
+```html
+<div class="ga-progress ga-progress--success w-40">
+  <div class="ga-progress__label">Label</div>
+  <div class="ga-progress__buffer">
+    <div class="ga-progress__bar" style="width: 40%"></div>
+  </div>
+  <div class="ga-progress__helper">
+    <!-- icon: circle-check, size=16, class="ga-icon" -->
+    Helper text
+  </div>
+</div>
+```
+
+### Error
+
+```html
+<div class="ga-progress ga-progress--error w-40">
+  <div class="ga-progress__label">Label</div>
+  <div class="ga-progress__buffer">
+    <div class="ga-progress__bar" style="width: 40%"></div>
+  </div>
+  <div class="ga-progress__helper">
+    <!-- icon: octagon-alert, size=16, class="ga-icon" -->
+    Helper text
+  </div>
+</div>
+```
+
+### Indeterminate
+
+```html
+<div class="ga-progress ga-progress--indeterminate w-40">
+  <div class="ga-progress__label">Label</div>
+  <div class="ga-progress__buffer"><div class="ga-progress__bar"></div></div>
+  <div class="ga-progress__helper">Helper text</div>
+</div>
+```

package/dist/docs/ProgressIndicator.md

@@ -0,0 +1,217 @@
+# Progress Indicator
+
+A component for displaying multi-step progress, such as wizards, checkout flows, or onboarding processes.
+
+## Visual Structure
+
+```
+ga-progress-indicator [--vertical|--horizontal]
+  ├── ga-progress-indicator__item [--completed|--current|--incomplete|--error|--disabled]
+  │   ├── ga-progress-indicator__indicator
+  │   │   ├── ga-icon
+  │   │   └── ga-progress-indicator__current-dot (optional, for current state)
+  │   └── ga-progress-indicator__content
+  │       ├── ga-progress-indicator__label
+  │       │   ├── ga-progress-indicator__label-text
+  │       │   └── ga-progress-indicator__label-state (optional)
+  │       └── ga-progress-indicator__description (optional)
+  ├── ga-progress-indicator__item
+  └── ...
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-progress-indicator` - Main container for the progress indicator component
+
+### Mandatory Elements
+
+- `ga-progress-indicator__item` - Individual step item (use `<button>` for clickable steps). The border-top/border-left acts as the connector line.
+- `ga-progress-indicator__indicator` - Icon container (positioned to the left of content)
+- `ga-progress-indicator__content` - Container for label and description (aligned vertically)
+- `ga-progress-indicator__label` - Label wrapper
+- `ga-progress-indicator__label-text` - The text content of the step label
+
+### Optional Elements
+
+- `ga-progress-indicator__current-dot` - Small dot inside the indicator for current state
+- `ga-progress-indicator__label-state` - Additional text for the label (e.g., "(optional)")
+- `ga-progress-indicator__description` - Helper text below the label (aligned with label, not icon)
+
+### Block Modifiers
+
+- `ga-progress-indicator--vertical` - Arranges items in a vertical column (border-left as connector)
+- `ga-progress-indicator--horizontal` - Arranges items in a horizontal row (border-top as connector)
+
+### Item State Modifiers
+
+- `ga-progress-indicator__item--completed` - Step has been completed. Use `CircleCheckBigIcon` (size 22).
+- `ga-progress-indicator__item--current` - Currently active step. Use `CircleDashedIcon` (size 22) with `ga-progress-indicator__current-dot` inside.
+- `ga-progress-indicator__item--incomplete` - Step not yet reached. Use `CircleDashedIcon` (size 22).
+- `ga-progress-indicator__item--error` - Step has an error. Use `OctagonAlertIcon` (size 22).
+- `ga-progress-indicator__item--disabled` - Step is disabled/non-interactive. Use `CircleDashedIcon` (size 22).
+
+## Horizontal
+
+```html
+<div class="ga-progress-indicator ga-progress-indicator--horizontal w-250">
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--completed"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-check-big, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Account setup</span>
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--current"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+      <span class="ga-progress-indicator__current-dot"></span>
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Personal info</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Provide your personal details.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--incomplete"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Preferences</span>
+        <span class="ga-progress-indicator__label-state">(optional)</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Set your notification preferences.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--error"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: octagon-alert, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Verification</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Identity verification failed.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--disabled"
+    disabled=""
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Confirmation</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Finalize your registration.
+      </span>
+    </div>
+  </button>
+</div>
+```
+
+## Vertical
+
+```html
+<div class="ga-progress-indicator ga-progress-indicator--vertical w-60">
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--completed"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-check-big, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Account setup</span>
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--current"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+      <span class="ga-progress-indicator__current-dot"></span>
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Personal info</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Provide your personal details.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--incomplete"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Preferences</span>
+        <span class="ga-progress-indicator__label-state">(optional)</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Set your notification preferences.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--error"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: octagon-alert, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Verification</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Identity verification failed.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--disabled"
+    disabled=""
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Confirmation</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Finalize your registration.
+      </span>
+    </div>
+  </button>
+</div>
+```