diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-dialog.ms.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-dialog.ms.mdx new file mode 100644 index 00000000..98ae4daf --- /dev/null +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-dialog.ms.mdx @@ -0,0 +1,6 @@ +--- +title: Dialog +description: Terokai alat ujian kebolehcapaian bersepadu dalam persekitaran pembangunan kami yang membantu mengenal pasti dan menyelesaikan isu kebolehcapaian semasa pembangunan. Alat-alat ini berfungsi bersama untuk memastikan komponen kami memenuhi piawaian WCAG dan memberikan pengalaman yang lebih baik untuk semua pengguna. +--- + +## Kerja Dalam Proses diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx index a1db7bb1..55828a1d 100644 --- a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.mdx @@ -1,6 +1,384 @@ --- title: Input -description: Explore the integrated accessibility testing tools in our development environment that help identify and resolve accessibility issues during development. These tools work together to ensure our components meet WCAG standards and provide a better experience for all users. +description: MYDS-compliant input component for seamless transition starting point from HTML/CSS to React --- +import { + PreviewButton, + Button, + ButtonIcon, + ButtonCounter, + Link, +} from "@/components/myds"; +import { Tab, Tabs } from "fumadocs-ui/components/tabs"; +import IframeThemePreview from "@/components/iframe-theme-preview"; -## Work In Progress \ No newline at end of file + + + + + + ```html +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ ``` + + + ```css +/* CSS BASE RESET ------------------------------------------------------------------------------------ */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* Remove default body margin */ +body { + margin: 0; + font-family: system-ui, sans-serif; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + background-color: #fff; + color: #000; +} + +/* Reset headings */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* Remove list styles */ +ul, +ol { + list-style: none; +} + +/* Remove default anchor styles */ +a { + color: inherit; + text-decoration: none; +} + +/* Normalize images and media */ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +/* Form elements reset */ +button, +input, +select, +textarea { + font: inherit; + color: inherit; + background: none; + border: none; + padding: 0; + margin: 0; + outline: none; + appearance: none; +} + +/* Reset button styles completely */ +button { + background-color: transparent; + border: none; + cursor: pointer; +} + +/* Ensure buttons and inputs are usable */ +button:disabled, +input:disabled { + cursor: not-allowed; +} + +/* Table reset */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Remove focus outlines unless using keyboard */ +:focus:not(:focus-visible) { + outline: none; +} + ``` + + + ```css +/* Layout */ +.myds-page-center { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 2rem; +} + +.myds-input-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + width: 100%; + max-width: 900px; +} + +.myds-input-wrapper { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.myds-input-label { + font-size: 0.875rem; + font-weight: 500; + color: #3f3f46; +} + +/* Base Input Styles */ +.myds-input { + width: 100%; + padding: 0.625rem 0.875rem; + font-size: 0.875rem; + line-height: 1.25rem; + color: #3f3f46; + background-color: #ffffff; + border: 1px solid #e4e4e7; + border-radius: 0.375rem; + transition: all 0.15s ease; + outline: none; +} + +.myds-input::placeholder { + color: #a1a1aa; +} + +/* Hover State */ +.myds-input:hover:not(:disabled):not(.myds-input-error) { + border-color: #d4d4d8; +} + +.myds-input-hover { + border-color: #d4d4d8; +} + +/* Focus State */ +.myds-input:focus:not(:disabled):not(.myds-input-error) { + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(150, 183, 255, 0.4); +} + +.myds-input-focused { + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(150, 183, 255, 0.4); +} + +/* Disabled State */ +.myds-input:disabled { + background-color: #fafafa; + border-color: #f4f4f5; + color: #a1a1aa; + cursor: not-allowed; +} + +/* Error State */ +.myds-input-error { + border-color: #dc2626; + color: #dc2626; +} + +.myds-input-error:hover { + border-color: #b91c1c; +} + +.myds-input-error:focus { + border-color: #dc2626; + box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); +} + +/* For porting into documentation */ +html, +body { + height: 100%; + background-color: white; +} + +.dark body { + height: 100%; + background-color: #161619; +} + ``` + + + ```css +/* Dark mode support */ + +.dark .myds-input-label { + color: #d4d4d8; +} + +/* Base Input Dark Mode */ +.dark .myds-input { + background-color: #18181b; + border-color: #3f3f46; + color: #d4d4d8; +} + +.dark .myds-input::placeholder { + color: #71717a; +} + +/* Hover State Dark Mode */ +.dark .myds-input:hover:not(:disabled):not(.myds-input-error) { + border-color: #52525b; +} + +.dark .myds-input-hover { + border-color: #52525b; +} + +/* Focus State Dark Mode */ +.dark .myds-input:focus:not(:disabled):not(.myds-input-error) { + border-color: #6394ff; + box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.4); +} + +.dark .myds-input-focused { + border-color: #6394ff; + box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.4); +} + +/* Disabled State Dark Mode */ +.dark .myds-input:disabled { + background-color: #27272a; + border-color: #27272a; + color: #52525b; + cursor: not-allowed; +} + +/* Error State Dark Mode */ +.dark .myds-input-error { + border-color: #dc2626; + color: #fca5a5; +} + +.dark .myds-input-error:hover { + border-color: #b91c1c; +} + +.dark .myds-input-error:focus { + border-color: #dc2626; + box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3); +} + ``` + + + +## 1. Overview + +The Input component provides a consistent, accessible text input field that follows MYDS design guidelines. It includes multiple states for different user interactions and feedback scenarios. + +## 2. Features + +- **Multiple States**: Default, hover, focus, disabled, and error states +- **Accessibility**: Proper labels and ARIA attributes +- **Dark Mode**: Full dark mode support +- **Responsive**: Adapts to different screen sizes +- **Customizable**: Easy to style and extend + +## 3. Usage + +### Basic Input + +```html +
+ + +
+``` + +### Input with Error + +```html +
+ + +
+``` + +### Disabled Input + +```html +
+ + +
+``` + +## 4. Class Reference + +| Class | Description | +|-------|-------------| +| `.myds-input` | Base input styling | +| `.myds-input-wrapper` | Container for label and input | +| `.myds-input-label` | Label styling | +| `.myds-input-hover` | Hover state (for demos) | +| `.myds-input-focused` | Focus state (for demos) | +| `.myds-input-error` | Error state styling | + +## 5. Accessibility + +- Always pair inputs with labels using the `myds-input-label` class +- Use appropriate `type` attributes (text, email, password, etc.) +- Include placeholder text for additional context +- Error states should be accompanied by error messages +- Disabled inputs are not focusable or interactive \ No newline at end of file diff --git a/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx new file mode 100644 index 00000000..9331946b --- /dev/null +++ b/apps/docs/content/docs/develop/(transistory-assistance)/ta-input.ms.mdx @@ -0,0 +1,384 @@ +--- +title: Input +description: Komponen input yang mematuhi MYDS untuk titik permulaan peralihan lancar dari HTML/CSS ke React +--- +import { + PreviewButton, + Button, + ButtonIcon, + ButtonCounter, + Link, +} from "@/components/myds"; +import { Tab, Tabs } from "fumadocs-ui/components/tabs"; +import IframeThemePreview from "@/components/iframe-theme-preview"; + + + + + + + ```html +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ ``` + + + ```css +/* CSS BASE RESET ------------------------------------------------------------------------------------ */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* Remove default body margin */ +body { + margin: 0; + font-family: system-ui, sans-serif; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + background-color: #fff; + color: #000; +} + +/* Reset headings */ +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* Remove list styles */ +ul, +ol { + list-style: none; +} + +/* Remove default anchor styles */ +a { + color: inherit; + text-decoration: none; +} + +/* Normalize images and media */ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +/* Form elements reset */ +button, +input, +select, +textarea { + font: inherit; + color: inherit; + background: none; + border: none; + padding: 0; + margin: 0; + outline: none; + appearance: none; +} + +/* Reset button styles completely */ +button { + background-color: transparent; + border: none; + cursor: pointer; +} + +/* Ensure buttons and inputs are usable */ +button:disabled, +input:disabled { + cursor: not-allowed; +} + +/* Table reset */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Remove focus outlines unless using keyboard */ +:focus:not(:focus-visible) { + outline: none; +} + ``` + + + ```css +/* Layout */ +.myds-page-center { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 2rem; +} + +.myds-input-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + width: 100%; + max-width: 900px; +} + +.myds-input-wrapper { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.myds-input-label { + font-size: 0.875rem; + font-weight: 500; + color: #3f3f46; +} + +/* Base Input Styles */ +.myds-input { + width: 100%; + padding: 0.625rem 0.875rem; + font-size: 0.875rem; + line-height: 1.25rem; + color: #3f3f46; + background-color: #ffffff; + border: 1px solid #e4e4e7; + border-radius: 0.375rem; + transition: all 0.15s ease; + outline: none; +} + +.myds-input::placeholder { + color: #a1a1aa; +} + +/* Hover State */ +.myds-input:hover:not(:disabled):not(.myds-input-error) { + border-color: #d4d4d8; +} + +.myds-input-hover { + border-color: #d4d4d8; +} + +/* Focus State */ +.myds-input:focus:not(:disabled):not(.myds-input-error) { + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(150, 183, 255, 0.4); +} + +.myds-input-focused { + border-color: #2563eb; + box-shadow: 0 0 0 3px rgba(150, 183, 255, 0.4); +} + +/* Disabled State */ +.myds-input:disabled { + background-color: #fafafa; + border-color: #f4f4f5; + color: #a1a1aa; + cursor: not-allowed; +} + +/* Error State */ +.myds-input-error { + border-color: #dc2626; + color: #dc2626; +} + +.myds-input-error:hover { + border-color: #b91c1c; +} + +.myds-input-error:focus { + border-color: #dc2626; + box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); +} + +/* For porting into documentation */ +html, +body { + height: 100%; + background-color: white; +} + +.dark body { + height: 100%; + background-color: #161619; +} + ``` + + + ```css +/* Dark mode support */ + +.dark .myds-input-label { + color: #d4d4d8; +} + +/* Base Input Dark Mode */ +.dark .myds-input { + background-color: #18181b; + border-color: #3f3f46; + color: #d4d4d8; +} + +.dark .myds-input::placeholder { + color: #71717a; +} + +/* Hover State Dark Mode */ +.dark .myds-input:hover:not(:disabled):not(.myds-input-error) { + border-color: #52525b; +} + +.dark .myds-input-hover { + border-color: #52525b; +} + +/* Focus State Dark Mode */ +.dark .myds-input:focus:not(:disabled):not(.myds-input-error) { + border-color: #6394ff; + box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.4); +} + +.dark .myds-input-focused { + border-color: #6394ff; + box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.4); +} + +/* Disabled State Dark Mode */ +.dark .myds-input:disabled { + background-color: #27272a; + border-color: #27272a; + color: #52525b; + cursor: not-allowed; +} + +/* Error State Dark Mode */ +.dark .myds-input-error { + border-color: #dc2626; + color: #fca5a5; +} + +.dark .myds-input-error:hover { + border-color: #b91c1c; +} + +.dark .myds-input-error:focus { + border-color: #dc2626; + box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3); +} + ``` + + + +## 1. Gambaran Keseluruhan + +Komponen Input menyediakan medan input teks yang konsisten dan boleh diakses yang mengikuti garis panduan reka bentuk MYDS. Ia termasuk pelbagai keadaan untuk interaksi pengguna dan senario maklum balas yang berbeza. + +## 2. Ciri-ciri + +- **Pelbagai Keadaan**: Keadaan lalai, hover, fokus, dilumpuhkan, dan ralat +- **Kebolehcapaian**: Label dan atribut ARIA yang sesuai +- **Mod Gelap**: Sokongan penuh mod gelap +- **Responsif**: Menyesuaikan diri dengan saiz skrin yang berbeza +- **Boleh Disesuaikan**: Mudah untuk digayakan dan diperluaskan + +## 3. Penggunaan + +### Input Asas + +```html +
+ + +
+``` + +### Input dengan Ralat + +```html +
+ + +
+``` + +### Input Dilumpuhkan + +```html +
+ + +
+``` + +## 4. Rujukan Kelas + +| Kelas | Penerangan | +|-------|-------------| +| `.myds-input` | Gaya input asas | +| `.myds-input-wrapper` | Bekas untuk label dan input | +| `.myds-input-label` | Gaya label | +| `.myds-input-hover` | Keadaan hover (untuk demo) | +| `.myds-input-focused` | Keadaan fokus (untuk demo) | +| `.myds-input-error` | Gaya keadaan ralat | + +## 5. Kebolehcapaian + +- Sentiasa pasangkan input dengan label menggunakan kelas `myds-input-label` +- Gunakan atribut `type` yang sesuai (text, email, password, dll.) +- Sertakan teks placeholder untuk konteks tambahan +- Keadaan ralat perlu disertakan dengan mesej ralat +- Input yang dilumpuhkan tidak boleh difokus atau interaktif \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/input/input-dark.css b/apps/docs/public/assets/ta-preview/input/input-dark.css new file mode 100644 index 00000000..6096bccb --- /dev/null +++ b/apps/docs/public/assets/ta-preview/input/input-dark.css @@ -0,0 +1,68 @@ +/* Dark mode support - MYDS Color Tokens */ +.dark { + --bg-white: rgb(24 24 27); + --bg-washed: rgb(29 29 33); + --txt-black-700: rgb(212 212 216); + --txt-black-500: rgb(161 161 170); + --txt-black-disabled: rgba(161 161 170 / 0.4); + --otl-gray-200: rgb(39 39 42); + --otl-primary-300: rgb(29 78 216); + --fr-primary: rgba(29 78 216 / 0.4); +} + +.dark .myds-input-label { + color: var(--txt-black-700); +} + +.dark .myds-input-container { + background-color: var(--bg-white); + border-color: var(--otl-gray-200); +} + +.dark .myds-input-container:focus-within, +.dark .myds-input-container-focused { + border-color: var(--otl-primary-300); + box-shadow: 0 0 0 3px var(--fr-primary); +} + +.dark .myds-input { + background-color: var(--bg-white); + color: var(--txt-black-700); +} + +.dark .myds-input::placeholder { + color: var(--txt-black-500); +} + +.dark .myds-input:disabled { + background-color: var(--bg-washed); + color: var(--txt-black-disabled); +} + +.dark .myds-input-icon { + color: var(--txt-black-500); +} + +.dark .myds-input-addon { + color: var(--txt-black-700); +} + +.dark .myds-input-addon-prepend { + border-right-color: var(--otl-gray-200); +} + +.dark .myds-input-addon-append { + border-left-color: var(--otl-gray-200); +} + +.dark .myds-input-container:has(.myds-input:disabled) { + background-color: var(--bg-washed); +} + +.dark .myds-input-container:has(.myds-input:disabled) .myds-input-icon { + color: var(--txt-black-disabled); +} + +.dark .myds-input-container:has(.myds-input:disabled) .myds-input-addon { + color: var(--txt-black-disabled); +} \ No newline at end of file diff --git a/apps/docs/public/assets/ta-preview/input/input.css b/apps/docs/public/assets/ta-preview/input/input.css new file mode 100644 index 00000000..284eb44a --- /dev/null +++ b/apps/docs/public/assets/ta-preview/input/input.css @@ -0,0 +1,205 @@ +/* MYDS Color Tokens - Light Mode */ +:root { + --bg-white: rgb(255 255 255); + --bg-washed: rgb(244 244 245); + --txt-black-700: rgb(63 63 70); + --txt-black-500: rgb(107 107 116); + --txt-black-disabled: rgba(82 82 91 / 0.4); + --otl-gray-200: rgb(228 228 231); + --otl-primary-300: rgb(150 183 255); + --fr-primary: rgba(150 183 255 / 0.4); +} + +/* Layout */ +.page-center { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 2rem; +} + +.myds-input-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + width: 100%; + max-width: 1200px; +} + +.myds-input-wrapper { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.myds-input-label { + font-size: 0.875rem; + font-weight: 500; + line-height: 1.25rem; + color: var(--txt-black-700); +} + +/* Input Container (like the wrapper div in React) */ +.myds-input-container { + position: relative; + display: flex; + flex-direction: row; + width: 100%; + border: 1px solid var(--otl-gray-200); + border-radius: 0.375rem; + background-color: var(--bg-white); + outline: none; + box-sizing: border-box; + transition: all 0.15s ease; +} + +.myds-input-container:focus-within, +.myds-input-container-focused { + border-color: var(--otl-primary-300); + box-shadow: 0 0 0 3px var(--fr-primary); +} + +/* Base Input Styles */ +.myds-input { + width: 100%; + background-color: var(--bg-white); + border: 1px solid transparent; + outline: none; + box-sizing: border-box; + border-radius: 0.375rem; + color: var(--txt-black-700); + transition: colors 0.15s ease; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.myds-input::placeholder { + color: var(--txt-black-500); +} + +.myds-input:focus { + outline: none; + border-color: transparent; +} + +.myds-input:disabled { + background-color: var(--bg-washed); + cursor: not-allowed; + color: var(--txt-black-disabled); +} + +/* Size Variants */ +.myds-input-sm { + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.myds-input-md { + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.myds-input-lg { + padding: 0.625rem 0.875rem; + font-size: 1rem; + line-height: 1.5rem; +} + +/* Input with Icons */ +.myds-input-icon { + position: absolute; + top: 0; + bottom: 0; + margin: auto 0; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + color: var(--txt-black-500); +} + +.myds-input-icon svg { + width: 1.125rem; + height: 1.125rem; +} + +.myds-input-icon-left { + left: 0.75rem; +} + +.myds-input-icon-right { + right: 0.75rem; +} + +.myds-input-with-left-icon { + padding-left: 2.5rem; +} + +.myds-input-with-right-icon { + padding-right: 2.5rem; +} + +.myds-input-with-both-icon { + padding-left: 2.5rem; + padding-right: 2.5rem; +} + +/* Input Addons (Prepend/Append) */ +.myds-input-addon { + display: flex; + align-items: center; + border: 1px solid transparent; + outline: none; + box-sizing: border-box; + font-size: 0.875rem; + line-height: 1.25rem; + color: var(--txt-black-700); +} + +.myds-input-addon-prepend { + padding: 0.375rem 0.75rem; + border-right: 1px solid var(--otl-gray-200); +} + +.myds-input-addon-append { + padding: 0.375rem 0.75rem; + border-left: 1px solid var(--otl-gray-200); +} + +.myds-input-with-prepend { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.myds-input-with-append { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +/* Disabled State for Container with addons/icons */ +.myds-input-container:has(.myds-input:disabled) { + background-color: var(--bg-washed); +} + +.myds-input-container:has(.myds-input:disabled) .myds-input-icon { + color: var(--txt-black-disabled); +} + +.myds-input-container:has(.myds-input:disabled) .myds-input-addon { + color: var(--txt-black-disabled); +} + +/* For porting into documentation */ +html, +body { + height: 100%; + background-color: white; +} + +.dark body { + height: 100%; + background-color: #161619; +} diff --git a/apps/docs/public/assets/ta-preview/input/ta-input-preview.html b/apps/docs/public/assets/ta-preview/input/ta-input-preview.html new file mode 100644 index 00000000..bf78ccd5 --- /dev/null +++ b/apps/docs/public/assets/ta-preview/input/ta-input-preview.html @@ -0,0 +1,135 @@ + + + + + + + + + + + + + +
+
+ +
+ +
+ +
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+ + +
+ +
+
+ + + + +
+ +
+
+ + +
+ +
+ +
+ + + + +
+
+
+ + +
+ +
+
+ + + + +
+ +
+ + + + +
+
+
+ + +
+ +
+
RM
+ +
+
+ + +
+ +
+ +
Copy
+
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+
+
+ +