Merge pull request #18 from fossuok/dev

Dev

pages/component/_meta.js

@@ -1,12 +1,18 @@
 const meta = {
     "actionBar": "Action Bar",
     "alerts": "Alert",
+    "banner": "Banner",
     "button": "Button",
     "card": "Card",
+    "carousel": "Carousel",
+    "form": "Form",
     "form-inputs": "Form Inputs",
     "modal": "Modal",
     "navigation": "Navigation",
+    "progressBar": "Progress Bar",
     "footer": "Footer",
-}
+    "typography": "Typography",
+    "unifiedField": "Unified Fields"
+};
 
-export default meta;
+export default meta;

pages/component/banner.mdx

@@ -0,0 +1,52 @@
+---
+title: Banner Design Guidelines
+component: Banner
+---
+
+# Banners
+
+Banners are used to communicate important messages or statuses prominently. 
+
+## Variants
+
+- **Default Banner**: A standard banner with a neutral tone.
+
+```jsx copy
+<div class="Banner">
+  <div class="Banner-header">Default Banner</div>
+  <div class="Banner-body">This is a neutral banner.</div>
+</div>
+```
+
+- **Success Banner**: Indicates successful actions or statuses.
+
+```jsx copy
+<div class="Banner Banner--success">
+  <div class="Banner-header">Success Banner</div>
+  <div class="Banner-body">Your operation was successful.</div>
+</div>
+```
+
+- **Warning Banner**: Alerts users to potential issues.
+
+```jsx copy
+<div class="Banner Banner--warning">
+  <div class="Banner-header">Warning Banner</div>
+  <div class="Banner-body">Be cautious about this action.</div>
+</div>
+```
+
+- **Error Banner**: Highlights critical problems or errors.
+
+```jsx copy
+<div class="Banner Banner--error">
+  <div class="Banner-header">Error Banner</div>
+  <div class="Banner-body">Something went wrong!</div>
+</div>
+```
+
+## Accessibility
+
+Ensure banners appear prominently for screen readers 
+- using `aria-live="polite"` for non-urgent messages 
+- using `aria-live="assertive"` for critical issues.

pages/component/carousel.mdx

@@ -0,0 +1,46 @@
+---
+title: Progress bar Design Guidelines
+component: Progress bar
+---
+
+# Carousels
+
+Carousels are interactive components that allow users to browse through content
+
+## Variants
+
+- **Basic Carousel**: Displays a set of items with navigation arrows.
+- **Autoplay Carousel**: Automatically cycles through items with an option to pause.
+
+## Code Example
+
+- **Basic Carousel**
+
+```jsx copy
+<div class="Carousel">
+  <div class="Carousel-item">Item 1</div>
+  <div class="Carousel-item">Item 2</div>
+  <div class="Carousel-item">Item 3</div>
+  <button class="Carousel-nav Carousel-prev">←</button>
+  <button class="Carousel-nav Carousel-next">→</button>
+</div>
+```
+
+- **Autoplay Carousel**
+
+```jsx copy
+<div class="Carousel" data-autoplay="true">
+  <div class="Carousel-item">Item 1</div>
+  <div class="Carousel-item">Item 2</div>
+  <div class="Carousel-item">Item 3</div>
+  <button class="Carousel-nav Carousel-prev">←</button>
+  <button class="Carousel-nav Carousel-next">→</button>
+  <button class="Carousel-pause" aria-label="Pause autoplay">⏸</button>
+</div>
+```
+
+## Accessibility
+
+- Use `tabindex="0"` for focusable elements.
+- Allow navigation with `ArrowLeft` and `ArrowRight` keys.
+- Ensure navigation buttons have clear labels using `aria-label`

pages/component/form.mdx

@@ -0,0 +1,35 @@
+---
+title: Form custamization Guidelines
+component: Form 
+---
+
+# Forms
+
+Forms allow users to input data that is sent to a server for processing.
+
+## Usage
+
+Forms can be used for a variety of purposes, including survey, collecting information, and feedback. 
+
+## Code Example
+
+```jsx copy
+<FormControl required>
+  <FormControl.Label>
+    Form Input Label
+  </FormControl.Label>
+  <Checkbox />
+</FormControl>
+```
+
+## Accessibility
+
+- Use `aria-describedby` to associate inputs with error or helper messages.
+
+```jsx copy
+<span id="email-error">Invalid email address</span>
+<input aria-describedby="email-error" />
+```
+- Add form controls according to the situation
+- for more info visit - [Primer Form controls](https://primer.style/components/form-control)
+

pages/component/progressBar.mdx

@@ -0,0 +1,36 @@
+---
+title: Progress bar Design Guidelines
+component: Progress bar
+---
+
+# Progress bar
+
+Visual indicators that show the completion status of a task or process.
+
+## Variants
+
+- **Default Progress Bar**: Displays progress as a solid bar.
+
+```jsx copy
+<div class="Progress">
+  <div class="Progress-bar" style="width: 50%;"></div>
+</div>
+```
+
+
+- **Indeterminate Progress Bar**: Represents an ongoing process with no defined end.
+
+```jsx copy
+<div class="Progress Progress--indeterminate">
+  <div class="Progress-bar"></div>
+</div>
+```
+For indeterminate states, use `aria-valuetext="Loading"` to indicate ongoing activity.
+
+## Guidelines
+
+- Use subtle animations for indeterminate progress bars to indicate motion.
+- Ensure color contrasts are high enough for accessibility.
+- Align labels consistently with the progress bar, either inside or adjacent to it.
+
+- for more info visit - [Primer Progress bar](https://primer.style/components/progress-bar)

pages/component/unifiedField.mdx

@@ -0,0 +1,160 @@
+---
+title: Unified Form Inputs
+component: Labels, Radio Buttons and Checkboxes
+---
+
+
+# Unified Form Inputs
+
+This template consolidates the **Label**, **Radio**, and **Checkbox** components into one unified, easy-to-understand structure. It provides clear guidelines, usage examples, and best practices for implementing these components effectively.  
+
+---
+
+## Purpose
+
+Use this template to design consistent form controls for single or multiple selections (**radio buttons**, **checkboxes**) and for contextual metadata display (**labels**). This approach ensures reusability and simplicity in design.
+
+---
+
+## Sub-Components
+
+### Label
+
+Labels provide textual context to form controls, improving clarity and accessibility.
+
+- **Variants**:
+  - **Default**: Neutral styling.
+  - **Colored**: Variants like primary, success, danger for contextual emphasis.
+
+- **Code Example**:
+  ```jsx
+  <Label variant="success" size="large">Success</Label>
+  ```
+
+- **Props**:
+  | Prop    | Default    | Description                  |
+  |---------|------------|------------------------------|
+  | variant | `default`  | Style variant of the label.  |
+  | size    | `small`    | Render size: `small` or `large`. |
+
+---
+
+### Radio
+
+Radio buttons allow users to make a **single selection** from a group of options.
+
+- **Usage**:
+  - Use in a group context only.
+  - Implement validation at the group level.
+
+- **Code Example**:
+  ```jsx
+  <div role="radiogroup" aria-labelledby="radio-group-label">
+    <label>
+      <input type="radio" name="choice" value="option1" /> Option 1
+    </label>
+    <label>
+      <input type="radio" name="choice" value="option2" /> Option 2
+    </label>
+  </div>
+  ```
+
+- **Props**:
+  | Prop            | Default    | Description                              |
+  |-----------------|------------|------------------------------------------|
+  | value           | Required   | Unique value used during form submission. |
+  | name            | Required   | Groups related radios together.         |
+  | checked         | `false`    | Controlled state for the radio.         |
+  | defaultChecked  | `false`    | Uncontrolled state for the radio.       |
+  | disabled        | `false`    | Makes the radio button non-interactive. |
+  | onChange        |            | Callback triggered when state changes.  |
+
+---
+
+### Checkbox
+
+Checkboxes allow users to select one or multiple options. They support three states: checked, unchecked, and indeterminate.
+
+- **Usage**:
+  - Use for multiple selections or to toggle individual items.
+  - Implement validation for the group instead of individual checkboxes.
+
+- **Code Example**:
+  ```jsx
+  <div>
+    <label>
+      <input type="checkbox" value="option1" /> Option 1
+    </label>
+    <label>
+      <input type="checkbox" value="option2" /> Option 2
+    </label>
+  </div>
+  ```
+
+- **Props**:
+  | Prop            | Default    | Description                                  |
+  |-----------------|------------|----------------------------------------------|
+  | checked         | `false`    | Controlled state for the checkbox.          |
+  | defaultChecked  | `false`    | Initial state for the checkbox.             |
+  | indeterminate   | `false`    | Sets the indeterminate state for the checkbox. |
+  | disabled        | `false`    | Makes the checkbox non-interactive.         |
+  | onChange        |            | Callback triggered when state changes.      |
+  | value           |            | Unique value used during form submission.   |
+
+---
+
+## Unified Code Example
+
+Here’s a complete example combining **Label**, **Radio**, and **Checkbox** into one form.
+
+```jsx
+<div>
+  <h3>Unified Input Example</h3>
+
+  {/* Label */}
+  <Label variant="primary" size="large">Form Title</Label>
+
+  {/* Radio Group */}
+  <fieldset>
+    <legend>Select your preferred option:</legend>
+    <label>
+      <input type="radio" name="preference" value="option1" /> Option 1
+    </label>
+    <label>
+      <input type="radio" name="preference" value="option2" /> Option 2
+    </label>
+  </fieldset>
+
+  {/* Checkbox Group */}
+  <fieldset>
+    <legend>Select your hobbies:</legend>
+    <label>
+      <input type="checkbox" value="reading" /> Reading
+    </label>
+    <label>
+      <input type="checkbox" value="traveling" /> Traveling
+    </label>
+    <label>
+      <input type="checkbox" value="coding" /> Coding
+    </label>
+  </fieldset>
+</div>
+```
+
+---
+
+## Best Practices
+
+1. **Group Context**:
+   - Always render radios and checkboxes in a group with proper labels for accessibility.
+   - Use `fieldset` and `legend` for better grouping semantics.
+
+2. **Validation**:
+   - Display validation errors for groups, not individual inputs.
+   - Ensure proper contrast and focus states.
+
+3. **Accessibility**:
+   - Provide clear labels and use `aria-labelledby` or `aria-describedby` where needed.
+   - Enable keyboard navigation.
+
+---