@carbon/vue 3.0.12 → 3.0.13

package/src/components/CvDatePicker/CvDatePicker.stories.js

@@ -15,7 +15,9 @@ const initArgs = {
 
 const now = new Date();
 const tomorrow = new Date();
+const nextWeek = new Date();
 tomorrow.setDate(now.getDate() + 1);
+nextWeek.setDate(now.getDate() + 7);
 
 export default {
   title: `${sbCompPrefix}/CvDatePicker`,
@@ -29,11 +31,12 @@ export default {
     },
   },
   argTypes: {
-    dateLabel: { type: String, description: 'Date picker label' },
-    invalidMessage: {
+    kind: {
       type: String,
-      description: 'Date picker text on invalid value',
+      options: ['short', 'simple', 'single', 'range'],
+      control: { type: 'select' },
     },
+    calOptions: { type: Object },
   },
 };
 
@@ -41,7 +44,7 @@ export default {
 
 const template = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange'>
+  <cv-date-picker v-bind="args" @change="onChange" :value="now">
   </cv-date-picker>
 </div>
 `;
@@ -50,6 +53,7 @@ const Template = args => {
     components: { CvDatePicker },
     setup: () => ({
       args,
+      now,
       onChange: action('change'),
     }),
     template,
@@ -58,6 +62,11 @@ const Template = args => {
 
 export const Default = Template.bind({});
 Default.args = initArgs;
+Default.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+  },
+};
 Default.parameters = storyParametersObject(
   Default.parameters,
   template,
@@ -66,13 +75,13 @@ Default.parameters = storyParametersObject(
 
 /* V-MODEL STORY */
 
-const modelValue = ref('');
+const modelValue = ref(now);
 const templateVModel = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange' v-model="modelValue">
+  <cv-date-picker v-bind="args" @change="onChange" v-model="modelValue">
   </cv-date-picker>
 </div>
-<div style="margin: 32px 0;">
+<div style="margin-top:2rem; background-color: #888888;  padding:1rem">
   <div style="font-size: 150%;">Sample interaction</div>
   <label for="date-model" style='margin-right: 0.5rem'>V-model:</label>
   <input id="date-model" type="text" :value="modelValue.startDate || modelValue" @change="ev => { if (args.kind === 'range') { modelValue.startDate = ev.currentTarget.value } else { modelValue = ev.currentTarget.value } }"/>
@@ -95,6 +104,11 @@ const TemplateVModel = args => {
 
 export const vModel = TemplateVModel.bind({});
 vModel.args = initArgs;
+vModel.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+  },
+};
 vModel.parameters = storyParametersObject(
   vModel.parameters,
   templateVModel,
@@ -105,7 +119,7 @@ vModel.parameters = storyParametersObject(
 
 const templateInvalidMessage = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange'>
+  <cv-date-picker v-bind="args" @change="onChange" :value="now">
   </cv-date-picker>
 </div>
 `;
@@ -115,6 +129,7 @@ const TemplateInvalidMessage = args => {
     components: { CvDatePicker },
     setup: () => ({
       args,
+      now,
       onChange: action('change'),
     }),
     template: templateInvalidMessage,
@@ -123,12 +138,22 @@ const TemplateInvalidMessage = args => {
 
 export const InvalidMessage = TemplateInvalidMessage.bind({});
 InvalidMessage.args = { ...initArgs, invalidMessage: 'Invalid date' };
+InvalidMessage.parameters = {
+  controls: {
+    include: ['invalidMessage'],
+  },
+};
+InvalidMessage.parameters = storyParametersObject(
+  InvalidMessage.parameters,
+  templateInvalidMessage,
+  InvalidMessage.args
+);
 
 /* INVALID MESSAGE SLOT STORY */
 
 const templateInvalidMessageSlot = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange'>
+  <cv-date-picker v-bind="args" @change="onChange" :value="now">
     <template #invalid-message>Invalid date slot</template>
   </cv-date-picker>
 </div>
@@ -139,6 +164,7 @@ const TemplateInvalidMessageSlot = args => {
     components: { CvDatePicker },
     setup: () => ({
       args,
+      now,
       onChange: action('change'),
     }),
     template: templateInvalidMessageSlot,
@@ -147,13 +173,35 @@ const TemplateInvalidMessageSlot = args => {
 
 export const InvalidMessageSlot = TemplateInvalidMessageSlot.bind({});
 InvalidMessageSlot.args = initArgs;
+InvalidMessageSlot.parameters = {
+  controls: {
+    include: [],
+  },
+  docs: {
+    description: {
+      story: `Use slot to set invalid message \`<template #invalid-message>Invalid date slot</template>\``,
+    },
+  },
+};
+InvalidMessageSlot.parameters = storyParametersObject(
+  InvalidMessageSlot.parameters,
+  templateInvalidMessageSlot,
+  InvalidMessageSlot.args
+);
 
 /* SINGLE USING DATE STORY */
 
+const singleValue = ref(now);
 const templateSingleUsingDate = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange' kind="single" :value="now">
+  <cv-date-picker v-bind="args" @change="onChange" kind="single" v-model="singleValue">
   </cv-date-picker>
+</div>`;
+const templateSingleUsingDateVModel = `
+<div style="margin-top:2rem; background-color: #888888;  padding:1rem">
+  <div style="font-size: 150%;">Sample interaction</div>
+  <label for="date-model" style='margin-right: 0.5rem'>V-model:</label>
+  <input id="date-model" type="text" :value="singleValue" @change="ev => { singleValue = ev.currentTarget.value }"/>
 </div>
 `;
 
@@ -163,20 +211,90 @@ const TemplateSingleUsingDate = args => {
     setup: () => ({
       args,
       now,
+      singleValue,
       onChange: action('change'),
     }),
-    template: templateSingleUsingDate,
+    template: templateSingleUsingDate + templateSingleUsingDateVModel,
   };
 };
 
 export const SingleUsingDate = TemplateSingleUsingDate.bind({});
 SingleUsingDate.args = initArgs;
+SingleUsingDate.parameters = {
+  controls: {
+    include: ['dateLabel', 'disabled', 'invalidMessage', 'placeholder'],
+  },
+  docs: {
+    description: {
+      story: `Example of single date input with v-model`,
+    },
+  },
+};
+SingleUsingDate.parameters = storyParametersObject(
+  SingleUsingDate.parameters,
+  templateSingleUsingDate,
+  SingleUsingDate.args
+);
+
+/* SINGLE USING MIN MAX PARAMS STORY */
+
+const templateSingleUsingMinMax = `
+<div>
+  <cv-date-picker v-bind='args' @change="onChange" kind="single" :value="now" :cal-options="calOptions">
+  </cv-date-picker>
+</div>
+`;
+
+const TemplateSingleUsingMinMax = args => {
+  return {
+    components: { CvDatePicker },
+    setup: () => ({
+      args,
+      now,
+      calOptions: {
+        minDate: now,
+        maxDate: nextWeek,
+        dateFormat: 'm/d/Y',
+      },
+      onChange: action('change'),
+    }),
+    template: templateSingleUsingMinMax,
+  };
+};
+
+const codeMinMax = `
+const now = new Date();
+const nextWeek = new Date();
+nextWeek.setDate(now.getDate() + 7);
+const calOptions = ref({
+        minDate: now,
+        maxDate: nextWeek,
+        dateFormat: 'm/d/Y'
+      })
+${templateSingleUsingMinMax}
+`;
+const docMinMax = `Example showing how "calOptions" prop can be used to control the min/max date.`;
+export const SingleUsingMinMax = TemplateSingleUsingMinMax.bind({});
+SingleUsingMinMax.args = initArgs;
+
+SingleUsingMinMax.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'modelValue', 'kind'],
+  },
+  docs: {
+    source: { code: codeMinMax },
+    description: {
+      story: docMinMax,
+    },
+  },
+};
 
 /* RANGE USING DATE STORY */
 
 const templateRangeUsingDate = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange' kind="range" :value="{startDate: now.toLocaleDateString(), endDate: tomorrow.toLocaleDateString()}">
+  <cv-date-picker v-bind="args" @change="onChange" kind="range"
+      :value="{startDate: now.toLocaleDateString(), endDate: tomorrow.toLocaleDateString()}">
   </cv-date-picker>
 </div>
 `;
@@ -196,12 +314,22 @@ const TemplateRangeUsingDate = args => {
 
 export const RangeUsingDate = TemplateRangeUsingDate.bind({});
 RangeUsingDate.args = initArgs;
+RangeUsingDate.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'kind', 'modelValue'],
+  },
+};
+RangeUsingDate.parameters = storyParametersObject(
+  RangeUsingDate.parameters,
+  templateRangeUsingDate,
+  RangeUsingDate.args
+);
 
 /* MINIMAL STORY */
 
 const templateMinimal = `
 <div>
-  <cv-date-picker v-bind='args' @change='onChange'>
+  <cv-date-picker v-bind="args" @change="onChange" :value="now">
   </cv-date-picker>
 </div>
 `;
@@ -211,6 +339,7 @@ const TemplateMinimal = args => {
     components: { CvDatePicker },
     setup: () => ({
       args,
+      now,
       onChange: action('change'),
     }),
     template: templateMinimal,
@@ -218,12 +347,22 @@ const TemplateMinimal = args => {
 };
 
 export const Minimal = TemplateMinimal.bind({});
+Minimal.parameters = {
+  controls: {
+    exclude: ['update:modelValue', 'invalid-message', 'modelValue'],
+  },
+};
+Minimal.parameters = storyParametersObject(
+  Minimal.parameters,
+  templateMinimal,
+  Minimal.args
+);
 
 /* SKELETON STORY */
 
 const templateSkeleton = `
 <div>
-  <cv-date-picker-skeleton v-bind='args'></cv-date-picker-skeleton>
+  <cv-date-picker-skeleton v-bind="args"></cv-date-picker-skeleton>
 </div>
 `;
 
@@ -239,3 +378,15 @@ const TemplateSkeleton = args => {
 };
 
 export const Skeleton = TemplateSkeleton.bind({});
+Skeleton.args = initArgs;
+Skeleton.args = initArgs;
+Skeleton.parameters = {
+  controls: {
+    include: [],
+  },
+};
+Skeleton.parameters = storyParametersObject(
+  Skeleton.parameters,
+  templateSkeleton,
+  Skeleton.args
+);

package/src/components/CvDatePicker/CvDatePicker.vue

@@ -139,13 +139,22 @@ let calendar;
 
 const props = defineProps({
   modelValue: { type: [String, Object, Array, Date], default: undefined },
+  /** Date picker label */
   dateLabel: { type: String, default: undefined },
+  /** Date picker end label (when using kind="range") */
   dateEndLabel: { type: String, default: 'End date' },
-  invalid: { type: Boolean, default: false },
+  /** If true, the date picker will be disabled */
   disabled: { type: Boolean, default: false },
+  /** Date picker text on invalid value */
   invalidMessage: { type: String, default: undefined },
+  /** Regex pattern used for form validation, default \d{1,2}/\d{1,2}/\d{4} */
   pattern: { type: String, default: '\\d{1,2}/\\d{1,2}/\\d{4}' },
+  /** Date picker input placeholder, shown when date picker is empty. Default 'mm/dd/yyyy' */
   placeholder: { type: String, default: 'mm/dd/yyyy' },
+  /** You can pass flatpickr options through this prop.
+   See https://flatpickr.js.org/options/ for more details.
+   Some of the options is not supported (for example, onChange, onReady, mode, nextArrow, prevArrow).
+   Also, you have to pass dateFormat field in calOptions object if you use it. */
   calOptions: {
     type: Object,
     default() {
@@ -155,6 +164,8 @@ const props = defineProps({
     },
   },
   formItem: { type: Boolean, default: true },
+  /** Date picker kind (also known as mode in flatpickr options).
+   Possible values: 'short', 'simple', 'single', 'range' */
   kind: {
     type: String,
     default: 'simple',
@@ -300,6 +311,7 @@ const initFlatpickr = () => {
 };
 
 let dateToString = val => {
+  if (!val) return '';
   return calendar.formatDate(val, props.calOptions.dateFormat);
 };
 
@@ -336,14 +348,17 @@ const handleUpdateEvent = event => {
 };
 
 const setDate = value => {
-  if (!value) return;
-
-  if (isSingle.value) {
-    calendar.setDate(value, true);
-  } else if (isRange.value) {
-    calendar.setDate([value.startDate, value.endDate], true);
-  } else {
-    date.value.value = value;
+  try {
+    if (value === undefined) return;
+    if (isSingle.value) {
+      calendar.setDate(value, true);
+    } else if (isRange.value) {
+      calendar.setDate([value.startDate, value.endDate], true);
+    } else {
+      date.value.value = value;
+    }
+  } catch (e) {
+    console.error('setDate', e);
   }
 };
 

package/src/components/CvRadioButton/CvRadioButton.stories.js

@@ -38,11 +38,28 @@ export default {
       type: 'boolean',
       table: {
         type: { summary: 'boolean' },
-        category: 'props',
+        category: 'CvRadioGroup - props',
       },
       description:
         'Property of CvRadioGroup component - stacks inside radio components vertically',
     },
+    legendText: {
+      control: 'text',
+      table: {
+        type: { summary: 'text' },
+        category: 'CvRadioGroup - props',
+      },
+      description: 'Property of CvRadioGroup component',
+    },
+    hideLegend: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'CvRadioGroup - props',
+      },
+      description:
+        'Property of CvRadioGroup component - makes the legend visually hidden',
+    },
   },
 };
 
@@ -105,6 +122,8 @@ const Template = (args, { argTypes }) => {
 export const Default = Template.bind({});
 Default.args = {
   vertical: false,
+  legendText: 'CvRadioGroup legend',
+  hideLegend: false,
 };
 Default.parameters = storyParametersObject(
   DefaultStoryParameters,

package/src/components/CvRadioButton/CvRadioButton.vue

@@ -18,10 +18,7 @@
     <!-- symbol causes problem in codepen? -->
     <label :for="cvId" :class="`${carbonPrefix}--radio-button__label`">
       <span :class="`${carbonPrefix}--radio-button__appearance`"></span>
-      <span
-        v-if="label"
-        :class="{ [`${carbonPrefix}--visually-hidden`]: hideLabel }"
-      >
+      <span :class="{ [`${carbonPrefix}--visually-hidden`]: hideLabel }">
         {{ label }}
       </span>
     </label>
@@ -35,7 +32,12 @@ import { useCvId, propsCvId, useMethods, useRadio } from '../../use';
 const props = defineProps({
   modelValue: { type: String, default: undefined },
   checked: Boolean,
-  label: { type: String, default: undefined },
+  label: {
+    type: String,
+    default: null,
+    required: true,
+    validator: label => !!label.length,
+  },
   value: { type: String, required: true },
   hideLabel: Boolean,
   labelLeft: Boolean,

package/src/components/CvRadioButton/CvRadioGroup.vue

@@ -1,13 +1,22 @@
 <template>
   <div :class="`cv-radio-group ${carbonPrefix}--form-item`">
-    <div
+    <fieldset
       :class="[
         `${carbonPrefix}--radio-button-group`,
         { [`${carbonPrefix}--radio-button-group--vertical`]: vertical },
       ]"
     >
+      <legend
+        :class="[
+          `${carbonPrefix}--label`,
+          { [`${carbonPrefix}--visually-hidden`]: hideLegend },
+        ]"
+        dir="auto"
+      >
+        {{ legendText }}
+      </legend>
       <slot></slot>
-    </div>
+    </fieldset>
   </div>
 </template>
 
@@ -17,6 +26,13 @@ import { carbonPrefix } from '../../global/settings';
 
 defineProps({
   vertical: Boolean,
+  legendText: {
+    type: String,
+    default: null,
+    required: true,
+    validator: legend => !!legend.length,
+  },
+  hideLegend: Boolean,
 });
 
 const emit = defineEmits(['change']);

package/src/components/CvRadioButton/__tests__/__snapshots__/CvRadioButton.spec.js.snap

@@ -12,16 +12,18 @@ exports[`CvRadioButton matches render with right label 1`] = `<div class="cv-rad
 
 exports[`CvRadioGroup matches render when horizontal 1`] = `
 <div class="cv-radio-group bx--form-item">
-  <div class="bx--radio-button-group">
+  <fieldset class="bx--radio-button-group">
+    <legend class="bx--label" dir="auto">test legend</legend>
     <div class="cv-radio-button-stub">RadioButtonStub</div>
-  </div>
+  </fieldset>
 </div>
 `;
 
 exports[`CvRadioGroup matches render when vertical 1`] = `
 <div class="cv-radio-group bx--form-item">
-  <div class="bx--radio-button-group bx--radio-button-group--vertical">
+  <fieldset class="bx--radio-button-group bx--radio-button-group--vertical">
+    <legend class="bx--label" dir="auto">test legend</legend>
     <div class="cv-radio-button-stub">RadioButtonStub</div>
-  </div>
+  </fieldset>
 </div>
 `;

package/src/components/CvAccordion/CvAccordion.stories.js

@@ -1,55 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { CvAccordion, CvAccordionItem } from '.';
-import { alignConsts, sizeConsts } from './consts';
-
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-
-export default {
-  title: `${sbCompPrefix}/CvAccordion`,
-  component: CvAccordion,
-  argTypes: {
-    align: {
-      control: { type: 'select', options: Object.keys(alignConsts.$labels) },
-    },
-    size: {
-      control: { type: 'select', options: Object.keys(sizeConsts.$labels) },
-    },
-  },
-};
-
-// <cv-button @click="onClick" v-bind="newArgs">{{defaultSlot}}</cv-button>
-const template = `<cv-accordion @change="onChange" v-bind="args">
-  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="n % 2 ? \`acc-item-\${n}\` : ''">
-    <template v-slot:title>Section {{n}} title </template>
-    <template v-slot:content>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </template>
-  </cv-accordion-item>
-</cv-accordion>`;
-const Template = (args, { argTypes }) => {
-  // eslint-disable-next-line no-param-reassign
-  args = {
-    ...args,
-    align: alignConsts[alignConsts.$labels[args.align]],
-    size: sizeConsts[sizeConsts.$labels[args.size]],
-  };
-  return {
-    props: Object.keys(argTypes),
-    components: { CvAccordion, CvAccordionItem },
-    setup() {
-      return { args, onChange: action('change') };
-    },
-    template,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {};
-Default.parameters = storyParametersObject(
-  Default.parameters,
-  template,
-  Default.args
-);