feat(checkbox): add vertical prop

baloise · Feb 15, 2022 · 85fab4e · 85fab4e
1 parent ed63b7e
commit 85fab4e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/...es/components/src/components/form/bal-checkbox/bal-checkbox-group/bal-checkbox-group.scss b/...es/components/src/components/form/bal-checkbox/bal-checkbox-group/bal-checkbox-group.scss
@@ -3,7 +3,7 @@ bal-checkbox-group {
   position: relative;
   width: 100%;
 
-  & > div {
+  &:not(.is-vertical) > div {
     margin-top: 6px;
     margin-left: -16px;
     margin-right: -16px;
@@ -13,4 +13,17 @@ bal-checkbox-group {
       margin-right: 16px;
     }
   }
+
+  &.is-vertical > div {
+    margin-top: 6px;
+
+    bal-checkbox {
+      display: block;
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 4px;
+      }
+    }
+  }
 }
diff --git a/...ges/components/src/components/form/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx b/...ges/components/src/components/form/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx
@@ -1,12 +1,17 @@
-import { Component, h, Host, ComponentInterface } from '@stencil/core'
+import { Component, h, Host, ComponentInterface, Prop } from '@stencil/core'
 
 @Component({
   tag: 'bal-checkbox-group',
 })
 export class CheckboxGroup implements ComponentInterface {
+  /**
+   * Displays the checkboxes vertically
+   */
+  @Prop() vertical = false
+
   render() {
     return (
-      <Host>
+      <Host class={{ 'is-vertical': this.vertical }}>
         <div>
           <slot></slot>
         </div>

diff --git a/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts b/packages/components/src/components/form/bal-checkbox/stories/bal-checkbox.stories.ts
@@ -25,9 +25,16 @@ const component = BalComponentStory({
         category: 'custom',
       },
     },
+    vertical: {
+      description: 'Displays the checkbox vertically',
+      table: {
+        category: 'CheckboxGroup',
+      },
+    },
   },
   args: {
     invalid: false,
+    vertical: false,
     hasFieldMessage: true,
   },
 })
@@ -43,7 +50,7 @@ const Template = args => ({
   <bal-field :disabled="args.disabled" :inverted="args.inverted" :invalid="args.invalid">
     <bal-field-label>Label</bal-field-label>
     <bal-field-control>
-      <bal-checkbox-group>
+      <bal-checkbox-group :vertical="args.vertical">
         <bal-checkbox v-bind="args" v-model="args.value">
           {{ args.content }}
         </bal-checkbox>
@@ -68,6 +75,16 @@ Basic.parameters = {
   controls: { exclude: excludedControls },
 }
 
+export const Vertical = Template.bind({})
+Vertical.args = {
+  content: 'Label',
+  vertical: true,
+}
+Vertical.parameters = {
+  ...component.sourceCode(Vertical),
+  controls: { exclude: excludedControls },
+}
+
 export const Switch = Template.bind({})
 Switch.args = {
   content: 'Label',