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/alerts.mdx b/pages/component/alerts.mdx new file mode 100644 index 0000000..6ff93ad --- /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 copy +
Success! Your action was completed.
+
Error! Something went wrong.
+
Warning! Proceed with caution.
+``` + +## Accessibility + +- Use `role="alert"` for dynamic alerts. +- Maintain color contrast for visibility. diff --git a/pages/component/button.mdx b/pages/component/button.mdx new file mode 100644 index 0000000..9327339 --- /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 copy + + + +``` + +## 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..f74045f --- /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 copy +
+ Card Image +
+

Card Title

+

Card description goes here.

+
+
+``` + +## Accessibility + +- Use `alt` attributes for images. +- Ensure focus states for interactive cards. diff --git a/pages/component/footer.mdx b/pages/component/footer.mdx new file mode 100644 index 0000000..e847e2e --- /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 copy + +``` diff --git a/pages/component/form-inputs.mdx b/pages/component/form-inputs.mdx new file mode 100644 index 0000000..0f6df0e --- /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 copy + + + + +``` + +## Accessibility + +- Use `