chore: update form group to 1030 (#1173)

Co-authored-by: Lee Chase <[email protected]>
carbon-design-system · Apr 18, 2021 · 11b299b · 11b299b
1 parent 90ef917
commit 11b299b
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 4 deletions.
diff --git a/packages/core/src/components/cv-form/cv-form-group.vue b/packages/core/src/components/cv-form/cv-form-group.vue
@@ -1,9 +1,20 @@
 <template>
-  <fieldset :class="`cv-form-group ${carbonPrefix}--fieldset`">
+  <fieldset
+    :class="[
+      `cv-form-group ${carbonPrefix}--fieldset`,
+      {
+        [`${carbonPrefix}--fieldset--no-margin`]: noMargin,
+      },
+    ]"
+    :data-invalid="invalid"
+  >
     <legend :class="`${carbonPrefix}--label`">
       <slot name="label"></slot>
     </legend>
     <slot name="content"></slot>
+    <div v-if="message" :class="`${carbonPrefix}--form__requirements`">
+      {{ message }}
+    </div>
   </fieldset>
 </template>
 
@@ -12,5 +23,10 @@ import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvFormGroup',
   mixins: [carbonPrefixMixin],
+  props: {
+    noMargin: Boolean,
+    invalid: Boolean,
+    message: String,
+  },
 };
 </script>
diff --git a/packages/core/src/components/cv-form/cv-form-notes.md b/packages/core/src/components/cv-form/cv-form-notes.md
@@ -18,7 +18,7 @@ CvForm has no properties and a single default slot
 Used inside a form to group components such as checkboxes and radio buttons.
 
 ```html
-<cv-form-group>
+<cv-form-group noMargin invalid message="Optional text message">
   <template slot="label">Form group legend</template>
   <template slot="content">
     <label> Small <input type="radio" name="size" id="size_1" value="small" /> </label>

diff --git a/storybook/.storybook/config.js b/storybook/.storybook/config.js
@@ -13,7 +13,7 @@ addDecorator(withNotes);
 addParameters({
   options: {
     name: 'Carbon Components in Vue.js',
-    url: 'https://github.com/carbon-design-system/carbon-components-vue/blob/master/packages/core/README.md',
+    url: 'https://github.com/carbon-design-system/carbon-components-vue/blob/main/packages/core/README.md',
     theme: themes.dark,
     isToolshown: true,
     showPanel: true,

diff --git a/storybook/stories/cv-form-story.js b/storybook/stories/cv-form-story.js
@@ -8,10 +8,13 @@ import knobsHelper from '../_storybook/utils/knobs-helper';
 import CvFormNotesMD from '../../packages/core/src/components/cv-form/cv-form-notes.md';
 import {
   CvForm,
+  CvFormGroup,
   CvTextArea,
   CvTextInput,
   CvSelect,
   CvButton,
+  CvRadioButton,
+  CvRadioGroup,
   CvSelectOptgroup,
   CvSelectOption,
 } from '../../packages/core/src/';
@@ -102,3 +105,77 @@ for (const story of storySet) {
     }
   );
 }
+
+for (const story of storySet) {
+  storiesDefault.add(
+    `form-group-${story.name}`,
+    () => {
+      const settings = story.knobs();
+
+      // ----------------------------------------------------------------
+
+      const templateString = `
+<cv-form @submit.prevent="actionSubmit">
+  <cv-form-group style="style" noMargin invalid message="An optional message">
+    <template slot="label">
+      FormGroup label-legend
+    </template>
+    <template slot="content">
+      <cv-text-input label="First Name" />
+      <cv-text-input label="Last Name" />
+      <cv-radio-group>
+        <cv-radio-button label="Option 1" value="radio-1" id="radio-1" />
+        <cv-radio-button label="Option 2" value="radio-2" id="radio-2" />
+        <cv-radio-button label="Option 3" value="radio-3" id="radio-3" />
+      </cv-radio-group>
+    </template>
+  </cv-form-group>
+  <cv-button>Submit</cv-button>
+</cv-form>`;
+
+      // ----------------------------------------------------------------
+
+      const templateViewString = `
+      <sv-template-view
+        sv-margin
+        sv-source='${templateString.trim()}'>
+        <template slot="component">${templateString}</template>
+      </sv-template-view>
+    `;
+
+      return {
+        components: {
+          CvForm,
+          CvFormGroup,
+          CvButton,
+          CvRadioButton,
+          CvRadioGroup,
+          CvTextInput,
+          SvTemplateView,
+        },
+
+        template: templateViewString,
+        props: settings.props,
+        computed: {
+          style() {
+            return { maxWidth: '400px' };
+          },
+        },
+        mounted() {
+          this.doSubmit = action('cv-form-group -submit event');
+        },
+        methods: {
+          actionSubmit(ev) {
+            // eslint-disable-next-line
+            console.dir([].slice.call(ev.target, [0, ev.target.length]));
+
+            this.doSubmit();
+          },
+        },
+      };
+    },
+    {
+      notes: { markdown: CvFormNotesMD },
+    }
+  );
+}
diff --git a/storybook/stories/cv-tile-story.js b/storybook/stories/cv-tile-story.js
@@ -53,7 +53,7 @@ let preKnobs = {
     type: text,
     config: [
       'where to go when clicked',
-      'https://github.com/carbon-design-system/carbon-components-vue/blob/master/README.md',
+      'https://github.com/carbon-design-system/carbon-components-vue/blob/main/README.md',
     ],
     prop: 'href',
   },