#260 update fieldset styles, template, script and stories

src/atoms/fieldset/Fieldset.html

@@ -1,15 +1,18 @@
 <fieldset
   class="a-fieldset"
   :aria-labelledby="`legend-${id}`"
+  :disabled="disabled"
 >
   <legend
     :id="`legend-${id}`"
     :class="[
       legendClass,
-      'a-fieldset__legend'
+      'a-fieldset__legend',
+      { 'a-fieldset__legend--hidden': hideLegend }
     ]"
   >
     {{ legendText }}
   </legend>
+  <!-- @slot Slot for fieldset content -->
   <slot />
 </fieldset>

src/atoms/fieldset/Fieldset.js

@@ -14,6 +14,20 @@ export default {
     legendClass: {
       type: String,
       default: null
+    },
+    /**
+     * Visually hide legend
+     */
+    hideLegend: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Disable content of fieldset
+     */
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

src/atoms/fieldset/Fieldset.scss

@@ -1,19 +1,26 @@
 @import '../../../assets/styles/_globals.scss';
 
-$fieldset__border            : none !default;
-$fieldset__legend-margin     : 0 0 25px !default;
-$fieldset__legend-font-size  : $font-size-large !default;
-$fieldset__legend-line-height: 1.2 !default;
+$fieldset__border               : none !default;
+$fieldset__padding              : 0 !default;
+$fieldset__margin               : 0 !default;
+$fieldset__legend-padding       : 0 !default;
+$fieldset__legend-margin        : 0 0 $spacer--semi-medium !default;
+$fieldset__legend-font-size     : $font-size-large !default;
+$fieldset__legend-line-height   : $font-line-height !default;
 
 .a-fieldset {
-  margin: 0;
-  padding: 0;
+  margin: $fieldset__margin;
+  padding: $fieldset__padding;
   border: $fieldset__border;
 
   &__legend {
     margin: $fieldset__legend-margin;
-    padding: 0;
+    padding: $fieldset__legend-padding;
     font-size: $fieldset__legend-font-size;
     line-height: $fieldset__legend-line-height;
+
+    &--hidden {
+      @include visually-hidden();
+    }
   }
 }

src/atoms/fieldset/Fieldset.spec.js

@@ -42,4 +42,15 @@ describe('Fieldset', () => {
     expect(wrapper.find('.a-fieldset').exists()).toBe(true)
     expect(wrapper.find('.a-fieldset > span').text()).toEqual('Fieldset content')
   })
+
+  it('content is disabled when disabled prop passed', () => {
+    const wrapper = mount(AFieldset, {
+      propsData: {
+        legendText: 'Legend text',
+        disabled: true
+      }
+    })
+
+    expect(wrapper.attributes('disabled')).toBe('disabled')
+  })
 })

src/atoms/fieldset/Fieldset.stories.js

@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/vue'
-import { text } from '@storybook/addon-knobs'
+import { text, boolean } from '@storybook/addon-knobs'
 
 import AFieldset from './Fieldset.vue'
 
@@ -10,10 +10,20 @@ storiesOf('Atoms/Fieldset', module)
     props: {
       legendKnobs: {
         default: text('Legend', 'Legend text')
+      },
+      disabledKnobs: {
+        default: boolean('Disabled', false)
+      },
+      hideLegendKnobs: {
+        default: boolean('Hide legend', false)
       }
     },
     template: `
-      <a-fieldset :legend-text="legendKnobs">
+      <a-fieldset
+        :legend-text="legendKnobs"
+        :hide-legend="hideLegendKnobs"
+        :disabled="disabledKnobs"
+      >
         <span>Fieldset content</span>
       </a-fieldset>
     `