Merge pull request #14 from fossuok/dev

Dev

pages/component/_meta.js

@@ -1,5 +1,13 @@
 const meta = {
     "actionBar": "Action Bar",
+    "alerts": "Alert",
+    "button": "Button",
+    "card": "Card",
+    "form-inputs": "Form Inputs",
+    "modal": "Modal",
+    "navigation": "Navigation",
+    "footer": "Footer",
+    "typography": "Typography",
 }
 
 export default meta;

pages/component/alerts.mdx

@@ -0,0 +1,27 @@
+---
+title: Alert Design Guidelines
+component: Alert
+---
+
+# Alerts
+
+Alerts provide feedback to users for important actions.
+
+## Variants
+
+- **Success**: Positive feedback.
+- **Error**: Negative feedback.
+- **Warning**: Cautionary feedback.
+
+## Code Example
+
+```jsx copy
+<div class="alert alert-success">Success! Your action was completed.</div>
+<div class="alert alert-error">Error! Something went wrong.</div>
+<div class="alert alert-warning">Warning! Proceed with caution.</div>
+```
+
+## Accessibility
+
+- Use `role="alert"` for dynamic alerts.
+- Maintain color contrast for visibility.

pages/component/button.mdx

@@ -0,0 +1,27 @@
+---
+title: Button Design Guidelines
+component: Button
+---
+
+# Button Design
+
+Buttons are interactive elements that allow users to perform actions. Here's how you should design buttons in our system.
+
+## Variants
+
+- **Primary Button**: Used for main actions.
+- **Secondary Button**: Used for less prominent actions.
+- **Disabled Button**: Non-clickable buttons.
+
+## Code Example
+
+```jsx copy
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-secondary">Secondary</button>
+<button class="btn btn-disabled" disabled>Disabled</button>
+```
+
+## Accessibility
+
+- Ensure buttons have a `tabindex` for keyboard navigation.
+- Use `aria-label` when button content is non-textual (e.g., icons).

pages/component/card.mdx

@@ -0,0 +1,30 @@
+---
+title: Card Design Guidelines
+component: Card
+---
+
+# Cards
+
+Cards are containers that group related information.
+
+## Usage
+
+- **Informational Cards**: Display textual data.
+- **Image Cards**: Combine text with visuals.
+
+## Code Example
+
+```jsx copy
+<div class="card">
+  <img src="image.jpg" alt="Card Image" />
+  <div class="card-content">
+    <h3>Card Title</h3>
+    <p>Card description goes here.</p>
+  </div>
+</div>
+```
+
+## Accessibility
+
+- Use `alt` attributes for images.
+- Ensure focus states for interactive cards.

pages/component/footer.mdx

@@ -0,0 +1,25 @@
+---
+title: Footer Design Guidelines
+component: Footer
+---
+
+# Footer
+
+The footer provides secondary navigation and information.
+
+## Usage
+
+- **Links**: Important pages and policies.
+- **Copyright**: Legal information.
+
+## Code Example
+
+```jsx copy
+<footer class="footer">
+  <p>&copy; 2024 FOSS Community. All rights reserved.</p>
+  <nav>
+    <a href="/privacy">Privacy Policy</a>
+    <a href="/terms">Terms of Service</a>
+  </nav>
+</footer>
+```

pages/component/form-inputs.mdx

@@ -0,0 +1,32 @@
+---
+title: Form Input Guidelines
+component: Form Input
+---
+
+# Form Inputs
+
+Forms allow users to input and submit information.
+
+## Input Types
+
+- **Text Input**
+- **Password Input**
+- **Dropdowns**
+- **Radio Buttons**
+- **Checkboxes**
+
+## Code Example
+
+```jsx copy
+<label for="name">Name</label>
+<input id="name" type="text" class="input-field" placeholder="Enter your name" />
+
+<label for="terms">
+  <input id="terms" type="checkbox" /> Agree to terms
+</label>
+```
+
+## Accessibility
+
+- Use `<label>` elements with `for` attributes.
+- Use `aria-describedby` for validation messages.

pages/component/modal.mdx

@@ -0,0 +1,31 @@
+---
+title: Modal Design Guidelines
+component: Modal
+---
+
+# Modals
+
+Modals are overlays used for tasks like confirmations or alerts.
+
+## Usage
+
+- **Confirmation Modals**
+- **Information Modals**
+
+## Code Example
+
+```jsx copy
+<div class="modal">
+  <div class="modal-content">
+    <h2>Modal Title</h2>
+    <p>This is the modal body.</p>
+    <button class="btn btn-primary">Confirm</button>
+    <button class="btn btn-secondary">Cancel</button>
+  </div>
+</div>
+```
+
+## Accessibility
+
+- Use `aria-hidden` and `aria-modal="true"`.
+- Ensure modals trap focus while open.

pages/component/navigation.mdx

@@ -0,0 +1,29 @@
+---
+title: Navigation Guidelines
+component: Navigation
+---
+
+# Navigation
+
+Navigation allows users to move between pages or sections.
+
+## Types of Navigation
+
+- **Top Navigation Bar**
+- **Side Navigation**
+- **Breadcrumbs**
+
+## Code Example
+
+```jsx copy
+<nav class="navbar">
+  <a href="/" class="nav-link">Home</a>
+  <a href="/about" class="nav-link">About</a>
+  <a href="/contact" class="nav-link">Contact</a>
+</nav>
+```
+
+## Accessibility
+
+- Use `<nav>` elements with proper landmarks.
+- Add `aria-current` for active links.

pages/component/typography.mdx

@@ -0,0 +1,33 @@
+---
+title: Typography Guidelines
+component: Typography
+---
+
+# Typography
+
+Typography provides structure and hierarchy to content.
+
+## Font Family
+
+- **Primary Font**: Roboto or Sans-Serif
+- **Monospace Font**: For code snippets.
+
+## Font Sizes
+
+| Style      | Size (px)   | Weight  |
+|------------|-------------|---------|
+| Heading 1  | 32px        | Bold    |
+| Heading 2  | 28px        | Bold    |
+| Body       | 16px        | Normal  |
+
+## Code Example
+
+```jsx copy
+<h1 class="heading-1">Heading 1</h1>
+<p class="body-text">This is body text.</p>
+```
+
+## Accessibility
+
+- Use appropriate heading levels (`<h1>` to `<h6>`).
+- Maintain a minimum 4.5:1 contrast ratio.

pages/guidance.mdx

@@ -43,6 +43,6 @@ For more details, visit the [Primer Design Official Website](https://primer.styl
 
 ## Adding a Primer Component to the Project
 
-You can see the components and how to use those in [Component](component/mydoc).
+You can see the components and how to use those in [Component](https://primer.style/guides/status).
 
 And also, you can look into more details about how to function and customize those components in the storybook provided by Primer Design. [View in Storybook](https://primer.style/react/storybook)