@waaelg/dga-design-system 0.4.2 → 0.4.4

package/docs/components/navbar.md

@@ -1,93 +0,0 @@
-# Navbar
-
-Responsive navigation with dropdown menus and mobile toggle.
-
-**Source:** `src/styles/components/navbar.scss`  
-**Demo:** `index.html` (header)  
-**JavaScript required:** Yes — `DGAMenuDropDown`
-
----
-
-## HTML structure
-
-```html
-<nav class="dga-navbar dga-px-3" role="navigation" aria-label="Main navigation">
-  <a class="dga-navbar-brand" href="#">
-    <img src="logo.svg" alt="Site name" />
-  </a>
-
-  <ul class="dga-menu">
-    <li>
-      <a class="dga-menu-item" href="#">Link</a>
-    </li>
-    <li>
-      <a class="dga-menu-item dga-has-dropdown" href="#" role="button"
-         aria-expanded="false" aria-haspopup="true">
-        الرئيسية
-      </a>
-      <div class="dga-dropdown">
-        <div class="dga-dropdown-content">
-          <ul>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-          </ul>
-        </div>
-      </div>
-    </li>
-  </ul>
-
-  <button class="dga-navbar-toggler" aria-label="Open menu" aria-expanded="false"></button>
-</nav>
-```
-
----
-
-## Classes
-
-| Class | Purpose |
-|-------|---------|
-| `dga-navbar` | Root nav container (72px height) |
-| `dga-navbar-brand` | Logo / brand link |
-| `dga-menu` | Horizontal menu list |
-| `dga-menu-item` | Nav link |
-| `dga-has-dropdown` | Item with dropdown chevron |
-| `dga-menu-item-with-icon` | Item with trailing icon |
-| `dga-menu-icon` | Icon inside menu item |
-| `dga-dropdown` | Dropdown panel |
-| `dga-dropdown-content` | Dropdown inner content |
-| `dga-dropdwon-title` | Section title in dropdown (note spelling in source) |
-| `dga-navbar-toggler` | Mobile menu button |
-
----
-
-## JavaScript
-
-```js
-import { DGAMenuDropDown, DGAVerifyBar } from '@waaelg/dga-design-on-sass'
-
-const menu = new DGAMenuDropDown({
-  navbar: document.querySelector('.dga-navbar'),
-})
-
-// Optional: coordinate with verify bar
-const verifyBar = new DGAVerifyBar()
-verifyBar.menu = menu
-menu.verifyBar = verifyBar
-```
-
-Handles desktop dropdowns, mobile slide-out menu, keyboard, and resize.
-
----
-
-## Accessibility
-
-- `role="navigation"` and `aria-label` on `<nav>`
-- Dropdown triggers: `role="button"`, `aria-expanded`, `aria-haspopup`
-- Toggler: `aria-label`, update `aria-expanded` when open
-
----
-
-## Related
-
-- [Verify bar](./verify-bar.md)
-- [JavaScript API](../getting-started/javascript-api.md)

package/docs/components/table.md

@@ -1,69 +0,0 @@
-# Table
-
-Data tables with optional contained and striped styles.
-
-**Source:** `src/styles/components/table.scss`  
-**Demo:** `index.html`  
-**JavaScript required:** No
-
----
-
-## Basic table
-
-```html
-<table class="dga-table" data-contained="true" data-striped="true">
-  <thead>
-    <tr>
-      <th>الاسم</th>
-      <th>العمر</th>
-      <th>المدينة</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>أحمد</td>
-      <td>30</td>
-      <td>الرياض</td>
-    </tr>
-    <tr>
-      <td>سارة</td>
-      <td>25</td>
-      <td>جدة</td>
-    </tr>
-  </tbody>
-</table>
-```
-
----
-
-## Data attributes
-
-| Attribute | Effect |
-|-----------|--------|
-| `data-contained="true"` | Rounded border wrapper, internal dividers |
-| `data-striped="true"` | Alternating row background |
-
-Both can be combined.
-
----
-
-## Styling details
-
-- Header: gray background, 48px height, 12px font
-- Body rows: 64px height, 14px font
-- Row hover: light gray highlight
-- Text alignment: `text-align: start` (RTL-aware)
-
----
-
-## Accessibility
-
-- Use `<thead>`, `<tbody>`, `<th>`, `<td>` semantically
-- Add `<caption>` for table description when helpful
-- For sortable tables, add ARIA sort attributes in your app logic
-
----
-
-## Related
-
-- [Grid](../foundations/grid.md)

package/docs/components/tag.md

@@ -1,76 +0,0 @@
-# Tag
-
-Compact labels for status, categories, and metadata.
-
-**Source:** `src/styles/components/tag.scss`  
-**Demo:** `index.html`  
-**JavaScript required:** No
-
----
-
-## Basic tag
-
-```html
-<span class="dga-tag">تاق افتراضي</span>
-```
-
-Use `<span class="dga-tag">` — includes a default info icon on the left (LTR) or right (RTL).
-
----
-
-## Variants
-
-| `data-variant` | Color |
-|----------------|-------|
-| (default) | Gray |
-| `success` | Green |
-| `info` | Blue |
-| `warning` | Orange |
-
-```html
-<span class="dga-tag" data-variant="success">تاق نجاح</span>
-<span class="dga-tag" data-variant="info">تاق معلومة</span>
-<span class="dga-tag" data-variant="warning">تاق تحذير</span>
-```
-
----
-
-## Modifiers
-
-| Attribute | Effect |
-|-----------|--------|
-| `data-outline="true"` | Outlined border |
-| `data-rounded="true"` | Pill shape |
-| `data-icononly="true"` | Circle icon only (no text) |
-
-```html
-<span class="dga-tag" data-outline="true">تاق بحدود</span>
-<span class="dga-tag" data-outline="true" data-rounded="true">تاق مدور بحدود</span>
-<span class="dga-tag" data-variant="warning" data-rounded="true" data-icononly="true"></span>
-```
-
----
-
-## Combined example
-
-```html
-<div class="dga-d-flex dga-flex-wrap dga-gap-2 dga-align-items-center">
-  <span class="dga-tag" data-outline="true">تاق بحدود</span>
-  <span class="dga-tag">تاق افتراضي</span>
-  <span class="dga-tag" data-variant="success">تاق نجاح</span>
-  <div class="dga-divider" data-variant="primary" data-direction="v"></div>
-  <span class="dga-tag" data-variant="info" data-rounded="true">تاق معلومة</span>
-</div>
-```
-
----
-
-## RTL
-
-Icon position flips with `[dir="rtl"]` on parent or `dir="rtl"` on the tag.
-
----
-
-## Related
-
-- [Divider](./divider.md)

package/docs/components/verify-bar.md

@@ -1,79 +0,0 @@
-# Verify Bar
-
-Saudi government official site verification banner.
-
-**Source:** `src/styles/components/verifyBar.scss`, `src/scripts/verifyBar.js`, `src/scripts/dga-verify-bar.js`  
-**Demo:** `verify-bar.html`, `index.html`  
-**JavaScript:** Optional — web component or `DGAVerifyBar` class
-
----
-
-## Option 1: Web component (recommended)
-
-Import the package once — registers `<dga-verify-bar>` automatically:
-
-```html
-<dga-verify-bar></dga-verify-bar>
-```
-
-### Custom attributes
-
-```html
-<dga-verify-bar
-  domain=".edu.sa"
-  registration-number="20250105758"
-  registration-link="https://raqmi.dga.gov.sa/platforms/platforms/9ebc5e60-9081-4653-bfb9-08dd2a2f8633/platform-license">
-</dga-verify-bar>
-```
-
-| Attribute | Default | Description |
-|-----------|---------|-------------|
-| `domain` | `.edu.sa` | Official domain suffix shown in copy |
-| `registration-number` | `20250105758` | DGA registration number |
-| `registration-link` | DGA Raqmi URL | Link to platform license |
-
-No manual JS init required when using the web component.
-
----
-
-## Option 2: Legacy markup + DGAVerifyBar
-
-Requires fixed element IDs:
-
-- `#dga-verify-bar`
-- `#dga-verifyBtn`
-- `#dga-verify-bar_content`
-
-```js
-import { DGAVerifyBar, DGAMenuDropDown } from '@waaelg/dga-design-on-sass'
-
-const verifyBar = new DGAVerifyBar()
-const menu = new DGAMenuDropDown()
-verifyBar.menu = menu
-menu.verifyBar = verifyBar
-```
-
-Use this when integrating with the legacy HTML structure in `index.html`.
-
----
-
-## Styling
-
-- Background: `dga-bg-gray-100`
-- Toggle button: `dga-btn dga-btn-subtle dga-text-primary-500`
-- Expandable panel with domain and HTTPS verification info
-- Arabic copy by default
-
----
-
-## Assets
-
-The web component references SVG assets (`saudiFlag.svg`, `link-icon.svg`, etc.). Serve them from your app `public` folder or configure paths in your build.
-
----
-
-## Related
-
-- [Navbar](./navbar.md) — coordinate open/close with mobile menu
-- [JavaScript API](../getting-started/javascript-api.md)
-- [RTL & Arabic](../getting-started/rtl-arabic.md)