feat: added containered checkbox and radios

M-Media-Group · Apr 17, 2024 · d44e425 · d44e425
1 parent 4b575f2
commit d44e425
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 0 deletions.
diff --git a/__snapshots__/components-inputs-checkbox--containered.png b/__snapshots__/components-inputs-checkbox--containered.png
diff --git a/__snapshots__/components-inputs-radio--containered.png b/__snapshots__/components-inputs-radio--containered.png
diff --git a/src/assets/form.css b/src/assets/form.css
@@ -52,4 +52,71 @@
 
 .input::placeholder {
   color: var(--pico-form-element-placeholder-color);
+}
+
+/* Custom radio/checkbox box */
+.radio-checkbox-container {
+  display: block;
+  position: relative;
+
+  --pico-background-color: var(--pico-form-element-background-color);
+  --pico-border-color: var(--pico-form-element-border-color);
+  --pico-color: var(--pico-form-element-color);
+  --pico-box-shadow: none;
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
+
+
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+
+  min-width: calc(var(--pico-spacing)* 4);
+
+  padding-right: calc(var(--pico-form-element-spacing-horizontal) * 2);
+
+  &:focus {
+    --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
+  }
+
+  &:hover {
+    --pico-background-color: var(--pico-form-element-active-background-color);
+  }
+
+  &:has(input:checked) {
+    --pico-border-color: var(--pico-form-element-active-border-color);
+    --pico-background-color: var(--pico-form-element-active-background-color);
+  }
+
+  &:has(input:disabled) {
+    opacity: 0.5;
+  }
+
+  >small {
+    display: block;
+    color: var(--pico-muted-color);
+  }
+
+  /* Style for the radio button */
+  input[type="radio"],
+  input[type="checkbox"] {
+    vertical-align: middle;
+    position: absolute;
+    right: 0;
+    top: var(--pico-form-element-spacing-vertical);
+
+    +small {
+      margin: unset;
+    }
+  }
+
+  &:has(>input[type="checkbox"]:required)::after,
+  &:has(>input[type="radio"]:required)::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 }
diff --git a/src/stories/Inputs/Checkbox.stories.ts b/src/stories/Inputs/Checkbox.stories.ts
@@ -61,3 +61,36 @@ export const Switch: Story = {
     role: "switch",
   },
 };
+
+export const Containered: Story = {
+  args: {
+    name: "tshirt-size",
+    value: "Small",
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    // We need to render the radio with options from args - here we show 2 radios
+    template: `
+      <label class="radio-checkbox-container">
+        <input type='checkbox' data-testid="input" v-bind='args' name='{{args.name}}'></input>
+        {{args.value}}
+      </label>
+      <label class="radio-checkbox-container">
+        <input type='checkbox' data-testid="input" v-bind='args' name='{{args.name}}' disabled></input>
+        {{args.value}}
+      </label>
+      <label class="radio-checkbox-container">
+        <input type='checkbox' data-testid="input" v-bind='args' name='{{args.name}}' disabled></input>
+        {{args.value}}
+        <small>(Out of stock)</small>
+      </label>
+      <label class="radio-checkbox-container">
+        {{args.value}}
+        <small>(Great text here)</small>
+        <input type='checkbox' data-testid="input" v-bind='args' name='{{args.name}}'></input>
+      </label>
+      `,
+  }),
+};
diff --git a/src/stories/Inputs/Radio.stories.ts b/src/stories/Inputs/Radio.stories.ts
@@ -64,3 +64,37 @@ export const MultiOptions: Story = {
       `,
   }),
 };
+
+// Multi options that show the radio buttons like when picking the size of a t-shirt
+export const Containered: Story = {
+  args: {
+    name: "tshirt-size",
+    value: "Small",
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    // We need to render the radio with options from args - here we show 2 radios
+    template: `
+      <label class="radio-checkbox-container">
+        <input type='radio' data-testid="input" v-bind='args' name='{{args.name}}'></input>
+        {{args.value}}
+      </label>
+      <label class="radio-checkbox-container">
+        <input type='radio' data-testid="input" v-bind='args' name='{{args.name}}' disabled></input>
+        {{args.value}}
+      </label>
+      <label class="radio-checkbox-container">
+        <input type='radio' data-testid="input" v-bind='args' name='{{args.name}}' disabled></input>
+        {{args.value}}
+        <small>(Out of stock)</small>
+      </label>
+      <label class="radio-checkbox-container">
+        {{args.value}}
+        <small>(Great text here)</small>
+        <input type='radio' data-testid="input" v-bind='args' name='{{args.name}}'></input>
+      </label>
+      `,
+  }),
+};