@vsn-ux/gaia-styles 0.6.0 → 0.6.1

package/dist/docs/Modal.md

@@ -0,0 +1,337 @@
+# Modal
+
+## Visual Structure
+
+```
+ga-modal__backdrop
+ga-modal__container (optional)
+  └── ga-modal [--small|--medium|--large] [--danger|--warning|--success|--information]
+      ├── ga-modal__top-section [--scrollable]
+      │   ├── ga-modal__icon (optional)
+      │   ├── ga-modal__heading
+      │   │   ├── ga-modal__label (optional)
+      │   │   ├── ga-modal__title
+      │   │   └── ga-modal__description (optional)
+      │   └── ga-modal__close-icon (optional)
+      ├── ga-modal__content (optional)
+      └── ga-modal__actions
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-modal` - Main container for the modal component
+
+### Mandatory Elements
+
+- `ga-modal__backdrop` - Semi-transparent overlay that covers the screen behind the modal
+- `ga-modal__top-section` - Upper section of the modal containing title and close button
+- `ga-modal__heading` - Container for title and optional label text
+- `ga-modal__title` - Main title text of the modal
+- `ga-modal__actions` - Container for action buttons
+
+### Optional Elements
+
+- `ga-modal__container` - Container used for modal positioning, can be omitted if positioning is handled manually by the framework
+- `ga-modal__icon` - Icon that appears at the top of the modal (for status modals)
+- `ga-modal__label` - Secondary text displayed above the title
+- `ga-modal__close-icon` - Button for closing the modal
+- `ga-modal__description` - Description of the modal
+- `ga-modal__content` - Container for the main content area of the modal
+
+### Modifiers
+
+- `ga-modal__top-section--scrollable` - Allows the modal's top section to shrink and enables vertical scrolling of description when content overflows. Note: This is necessary due to technical constraints, since the description and main content are rendered in separate containers, explicit scrolling must be enabled to prevent duplicate overflow behavior.
+
+#### Size Variants
+
+- `ga-modal--small` - Small-sized modal
+- `ga-modal--medium` - Medium-sized modal
+- `ga-modal--large` - Large-sized modal
+
+#### Type Variants
+
+- `ga-modal--danger` - Modal with danger/error styling
+- `ga-modal--warning` - Modal with warning styling
+- `ga-modal--success` - Modal with success styling
+- `ga-modal--information` - Modal with information styling
+
+## Examples
+
+### Types
+
+#### Default
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Danger
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small ga-modal--danger">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: octagon-alert, size=48 --></div>
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Warning
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small ga-modal--warning">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: triangle-alert, size=48 --></div>
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Success
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small ga-modal--success">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: circle-check, size=48 --></div>
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Information
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small ga-modal--information">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: info, size=48 --></div>
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+### Sizes
+
+#### Small
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Medium
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--medium">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Large
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--large">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+### With Label
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <div class="ga-modal__label">Label</div>
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+### Full Example
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--medium ga-modal--danger">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: octagon-alert, size=48 --></div>
+      <div class="ga-modal__heading">
+        <div class="ga-modal__label">Label</div>
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">
+          The data could not be updated due to a server error. Please check your
+          internet connection and try again.
+        </div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__content">
+      <div class="ga-form-field">
+        <label class="ga-form-field__label" for="input2">
+          <span class="ga-form-field__label-text">Send invitation(s) to:</span>
+        </label>
+        <div class="ga-input">
+          <input id="input2" type="text" placeholder="user@domain.example" />
+        </div>
+        <div class="ga-form-field__info">
+          Please make sure no sensitive data is shared.
+        </div>
+      </div>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Accept</button>
+      <button class="ga-button ga-button--secondary">Decline</button>
+    </div>
+  </div>
+</div>
+```

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>
+```