feat: add radio buttons

ably · Nov 27, 2024 · 865eb28 · 865eb28
1 parent a563d16
commit 865eb28
Show file tree

Hide file tree

Showing 5 changed files with 266 additions and 127 deletions.
diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
@@ -20,7 +20,7 @@ const exampleOptionFields = (
 export const Inputs = {
   render: () => (
     <div className="grid sm:grid-cols-2 gap-16">
-      <div>
+      <div className="grid sm:grid-cols-2 gap-16">
         <p className="mb-16 text-neutral-800">Default</p>
         <input
           type="search"
@@ -29,16 +29,7 @@ export const Inputs = {
           autoComplete="off"
         />
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Default (dark)</p>
-        <input
-          type="search"
-          className="ui-input ui-input-dark"
-          placeholder="Dark mode input"
-          autoComplete="off"
-        />
-      </div>
-      <div>
+      <div className="grid sm:grid-cols-2 gap-16">
         <p className="mb-16 text-neutral-800">Disabled</p>
         <input
           type="search"
@@ -48,16 +39,6 @@ export const Inputs = {
           disabled
         />
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Disabled (dark)</p>
-        <input
-          type="search"
-          className="ui-input ui-input-dark"
-          placeholder="Dark mode input"
-          autoComplete="off"
-          disabled
-        />
-      </div>
       <div>
         <p className="mb-16 text-neutral-800">Invalid</p>
         <input
@@ -69,17 +50,6 @@ export const Inputs = {
         />
         <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Invalid (dark)</p>
-        <input
-          type="search"
-          className="ui-input ui-input-dark"
-          placeholder="Dark mode input"
-          autoComplete="off"
-          required
-        />
-        <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
-      </div>
       <div>
         <p className="mb-16 text-neutral-800">With character insert</p>
         <div className="relative">
@@ -125,17 +95,6 @@ export const Dropdowns = {
           Select language
         </div>
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Dark mode</p>
-        <div className="bg-neutral-1300 p-24">
-          <select
-            className="ui-dropdown ui-dropdown-dark"
-            defaultValue="select"
-          >
-            {exampleOptionFields}
-          </select>
-        </div>
-      </div>
     </div>
   ),
 };
@@ -194,6 +153,118 @@ export const Checkboxes = {
   ),
 };
 
+export const RadioButtons = {
+  render: () => (
+    <div className="grid sm:grid-cols-2 gap-16">
+      <div className="flex flex-col gap-8">
+        <p className="mb-16 text-neutral-800">Default</p>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-1"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-1"
+          >
+            Best option
+          </label>
+        </div>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-2"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-2"
+          >
+            Advisable option
+          </label>
+        </div>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-3"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-3"
+          >
+            Finest option
+          </label>
+        </div>
+      </div>
+      <div className="flex flex-col gap-8">
+        <p className="mb-16 text-neutral-800">Disabled</p>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-4"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+            disabled
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-4"
+          >
+            Best option
+          </label>
+        </div>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-5"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+            disabled
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-5"
+          >
+            Advisable option
+          </label>
+        </div>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-6"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+            disabled
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-6"
+          >
+            Finest option
+          </label>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
 export const Textareas = {
   render: () => (
     <div className="mb-40">