feat: add radio buttons

ably · Nov 29, 2024 · 1dac71e · 1dac71e
1 parent 306c048
commit 1dac71e
Show file tree

Hide file tree

Showing 6 changed files with 350 additions and 183 deletions.
diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "../Icon";
+import { Checkbox, RadioButton } from "./forms/story-components";
 
 export default {
   title: "Styles/Forms",
@@ -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,71 +95,48 @@ 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>
   ),
 };
 
 export const Checkboxes = {
   render: () => (
     <div className="grid sm:grid-cols-2 gap-16">
-      <div>
-        <p className="mb-16 text-neutral-800">Default</p>
-        <div className="ui-checkbox-p1">
-          <input
-            data-ui-checkbox-native=""
-            type="checkbox"
-            id="checkbox-example-1"
-            name="checkbox-example-1"
-            value="yes"
-            className="ui-checkbox-input"
-          />
-          <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
-            <Icon
-              name="icon-gui-tick"
-              size="1rem"
-              additionalCSS="ui-checkbox-styled-tick"
-            />
-          </div>
-          <label htmlFor="checkbox-example-1" className="ui-checkbox-label-p1">
-            Subscribe to the Ably newsletter
-          </label>
+      {["Default", "Disabled"].map((label, groupIndex) => (
+        <div key={label} className="flex flex-col gap-8">
+          <p className="mb-16 text-neutral-800">{label}</p>
+          {Array(3)
+            .fill(0)
+            .map((_, i) => (
+              <Checkbox
+                key={i}
+                index={i + groupIndex * 3 + 1}
+                disabled={groupIndex === 1}
+              />
+            ))}
         </div>
-      </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Disabled</p>
-        <div className="ui-checkbox-p1">
-          <input
-            data-ui-checkbox-native=""
-            type="checkbox"
-            id="checkbox-example-2"
-            name="checkbox-example-2"
-            value="yes"
-            className="ui-checkbox-input"
-            disabled
-          />
-          <div data-ui-checkbox-styled="" className="ui-checkbox-styled">
-            <Icon
-              name="icon-gui-tick"
-              size="1rem"
-              additionalCSS="ui-checkbox-styled-tick"
-            />
-          </div>
-          <label htmlFor="checkbox-example-2" className="ui-checkbox-label-p2">
-            Subscribe to the Ably newsletter
-          </label>
+      ))}
+    </div>
+  ),
+};
+
+export const RadioButtons = {
+  render: () => (
+    <div className="grid sm:grid-cols-2 gap-16">
+      {["Default", "Disabled"].map((label, groupIndex) => (
+        <div key={label} className="flex flex-col gap-8">
+          <p className="mb-16 text-neutral-800">{label}</p>
+          {Array(3)
+            .fill(0)
+            .map((_, i) => (
+              <RadioButton
+                key={i}
+                index={i + groupIndex * 3 + 1}
+                disabled={groupIndex === 1}
+              />
+            ))}
         </div>
-      </div>
+      ))}
     </div>
   ),
 };