From 4719bf3d22ce98ccd8e2fc7c181da027e91a5289 Mon Sep 17 00:00:00 2001
From: PinsaraPerera <1pawanpinsara@gmail.com>
Date: Tue, 17 Dec 2024 22:33:54 +0530
Subject: [PATCH 1/6] alert added

---
 pages/component/alerts.mdx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 pages/component/alerts.mdx

diff --git a/pages/component/alerts.mdx b/pages/component/alerts.mdx
new file mode 100644
index 0000000..36f9fe2
--- /dev/null
+++ b/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
+<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.

From eace65560d01e88cc043efbf169c958f693076db Mon Sep 17 00:00:00 2001
From: PinsaraPerera <1pawanpinsara@gmail.com>
Date: Tue, 17 Dec 2024 22:34:17 +0530
Subject: [PATCH 2/6] button and card added

---
 pages/component/button.mdx | 27 +++++++++++++++++++++++++++
 pages/component/card.mdx   | 30 ++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 pages/component/button.mdx
 create mode 100644 pages/component/card.mdx

diff --git a/pages/component/button.mdx b/pages/component/button.mdx
new file mode 100644
index 0000000..50b2525
--- /dev/null
+++ b/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
+<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).
diff --git a/pages/component/card.mdx b/pages/component/card.mdx
new file mode 100644
index 0000000..097cde3
--- /dev/null
+++ b/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
+<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.

From b03ac1f2910e676ad01617a4a21fd2352692f657 Mon Sep 17 00:00:00 2001
From: PinsaraPerera <1pawanpinsara@gmail.com>
Date: Tue, 17 Dec 2024 22:35:10 +0530
Subject: [PATCH 3/6] added mdx's

---
 pages/component/form-inputs.mdx | 32 ++++++++++++++++++++++++++++++++
 pages/component/modal.mdx       | 31 +++++++++++++++++++++++++++++++
 pages/component/typography.mdx  | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+)
 create mode 100644 pages/component/form-inputs.mdx
 create mode 100644 pages/component/modal.mdx
 create mode 100644 pages/component/typography.mdx

diff --git a/pages/component/form-inputs.mdx b/pages/component/form-inputs.mdx
new file mode 100644
index 0000000..ccee523
--- /dev/null
+++ b/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
+<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.
diff --git a/pages/component/modal.mdx b/pages/component/modal.mdx
new file mode 100644
index 0000000..b8a76f2
--- /dev/null
+++ b/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
+<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.
diff --git a/pages/component/typography.mdx b/pages/component/typography.mdx
new file mode 100644
index 0000000..67be262
--- /dev/null
+++ b/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
+<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.

From a66efb1fa0cfc4ecafb56806760ece4e5f6e26eb Mon Sep 17 00:00:00 2001
From: PinsaraPerera <1pawanpinsara@gmail.com>
Date: Tue, 17 Dec 2024 22:35:28 +0530
Subject: [PATCH 4/6] added alias to _meta

---
 pages/component/_meta.js       |  8 ++++++++
 pages/component/footer.mdx     | 25 +++++++++++++++++++++++++
 pages/component/navigation.mdx | 29 +++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 pages/component/footer.mdx
 create mode 100644 pages/component/navigation.mdx

diff --git a/pages/component/_meta.js b/pages/component/_meta.js
index dc85b73..65b9988 100644
--- a/pages/component/_meta.js
+++ b/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;
\ No newline at end of file
diff --git a/pages/component/footer.mdx b/pages/component/footer.mdx
new file mode 100644
index 0000000..546201d
--- /dev/null
+++ b/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
+<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>
+```
diff --git a/pages/component/navigation.mdx b/pages/component/navigation.mdx
new file mode 100644
index 0000000..c4560ac
--- /dev/null
+++ b/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
+<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.

From 8d5fe29ca25be0b1396434b492dd8604162433f0 Mon Sep 17 00:00:00 2001
From: PinsaraPerera <1pawanpinsara@gmail.com>
Date: Tue, 17 Dec 2024 22:38:02 +0530
Subject: [PATCH 5/6] copy feature enable

---
 pages/component/alerts.mdx      | 2 +-
 pages/component/button.mdx      | 2 +-
 pages/component/card.mdx        | 2 +-
 pages/component/footer.mdx      | 2 +-
 pages/component/form-inputs.mdx | 2 +-
 pages/component/modal.mdx       | 2 +-
 pages/component/navigation.mdx  | 2 +-
 pages/component/typography.mdx  | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/pages/component/alerts.mdx b/pages/component/alerts.mdx
index 36f9fe2..6ff93ad 100644
--- a/pages/component/alerts.mdx
+++ b/pages/component/alerts.mdx
@@ -15,7 +15,7 @@ Alerts provide feedback to users for important actions.
 
 ## Code Example
 
-```jsx
+```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>
diff --git a/pages/component/button.mdx b/pages/component/button.mdx
index 50b2525..9327339 100644
--- a/pages/component/button.mdx
+++ b/pages/component/button.mdx
@@ -15,7 +15,7 @@ Buttons are interactive elements that allow users to perform actions. Here's how
 
 ## Code Example
 
-```jsx
+```jsx copy
 <button class="btn btn-primary">Primary</button>
 <button class="btn btn-secondary">Secondary</button>
 <button class="btn btn-disabled" disabled>Disabled</button>
diff --git a/pages/component/card.mdx b/pages/component/card.mdx
index 097cde3..f74045f 100644
--- a/pages/component/card.mdx
+++ b/pages/component/card.mdx
@@ -14,7 +14,7 @@ Cards are containers that group related information.
 
 ## Code Example
 
-```jsx
+```jsx copy
 <div class="card">
   <img src="image.jpg" alt="Card Image" />
   <div class="card-content">
diff --git a/pages/component/footer.mdx b/pages/component/footer.mdx
index 546201d..e847e2e 100644
--- a/pages/component/footer.mdx
+++ b/pages/component/footer.mdx
@@ -14,7 +14,7 @@ The footer provides secondary navigation and information.
 
 ## Code Example
 
-```jsx
+```jsx copy
 <footer class="footer">
   <p>&copy; 2024 FOSS Community. All rights reserved.</p>
   <nav>
diff --git a/pages/component/form-inputs.mdx b/pages/component/form-inputs.mdx
index ccee523..0f6df0e 100644
--- a/pages/component/form-inputs.mdx
+++ b/pages/component/form-inputs.mdx
@@ -17,7 +17,7 @@ Forms allow users to input and submit information.
 
 ## Code Example
 
-```jsx
+```jsx copy
 <label for="name">Name</label>
 <input id="name" type="text" class="input-field" placeholder="Enter your name" />
 
diff --git a/pages/component/modal.mdx b/pages/component/modal.mdx
index b8a76f2..17136ab 100644
--- a/pages/component/modal.mdx
+++ b/pages/component/modal.mdx
@@ -14,7 +14,7 @@ Modals are overlays used for tasks like confirmations or alerts.
 
 ## Code Example
 
-```jsx
+```jsx copy
 <div class="modal">
   <div class="modal-content">
     <h2>Modal Title</h2>
diff --git a/pages/component/navigation.mdx b/pages/component/navigation.mdx
index c4560ac..fe8c2ba 100644
--- a/pages/component/navigation.mdx
+++ b/pages/component/navigation.mdx
@@ -15,7 +15,7 @@ Navigation allows users to move between pages or sections.
 
 ## Code Example
 
-```jsx
+```jsx copy
 <nav class="navbar">
   <a href="/" class="nav-link">Home</a>
   <a href="/about" class="nav-link">About</a>
diff --git a/pages/component/typography.mdx b/pages/component/typography.mdx
index 67be262..40de4fb 100644
--- a/pages/component/typography.mdx
+++ b/pages/component/typography.mdx
@@ -22,7 +22,7 @@ Typography provides structure and hierarchy to content.
 
 ## Code Example
 
-```jsx
+```jsx copy
 <h1 class="heading-1">Heading 1</h1>
 <p class="body-text">This is body text.</p>
 ```

From a5585b0c306b48743a613c313399789aed281fa8 Mon Sep 17 00:00:00 2001
From: PinsaraPerera <1pawanpinsara@gmail.com>
Date: Tue, 17 Dec 2024 22:40:36 +0530
Subject: [PATCH 6/6] fix primer links

---
 pages/guidance.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/guidance.mdx b/pages/guidance.mdx
index 2151767..7c136e3 100644
--- a/pages/guidance.mdx
+++ b/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)