@carbon/vue 3.0.12 → 3.0.14

package/src/components/CvNotification/CvToastNotification.stories.js

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
-import { sbCompPrefix } from '../../global/storybook-utils';
-
+import DocumentationTemplate from './CvToastNotificationTemplate.mdx';
+import { sbCompPrefix, storySourceCode } from '../../global/storybook-utils';
 import { CvToastNotification, CvNotificationConsts } from '.';
 
 export default {
@@ -85,6 +85,11 @@ export default {
       description: 'Caption slot for more custom content.',
     },
   },
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
 };
 
 const template = `
@@ -118,58 +123,113 @@ const Template = args => {
   };
 };
 
-export const Info = Template.bind({});
-Info.args = {
+export const Default = Template.bind({});
+Default.args = {
   kind: CvNotificationConsts.notificationKinds[0],
+  title: 'info',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+Default.parameters = {
+  docs: { source: { code: storySourceCode(template, Default.args) } },
 };
 
 export const InfoSquare = Template.bind({});
 InfoSquare.storyName = 'Info square';
 InfoSquare.args = {
   kind: CvNotificationConsts.notificationKinds[1],
+  title: 'info²',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+InfoSquare.parameters = {
+  docs: { source: { code: storySourceCode(template, InfoSquare.args) } },
 };
 
 export const Success = Template.bind({});
 Success.args = {
   kind: CvNotificationConsts.notificationKinds[2],
+  title: 'success',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+Success.parameters = {
+  docs: { source: { code: storySourceCode(template, Success.args) } },
 };
-
 export const Warning = Template.bind({});
 Warning.args = {
   kind: CvNotificationConsts.notificationKinds[3],
+  title: 'warning',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+Warning.parameters = {
+  docs: { source: { code: storySourceCode(template, Warning.args) } },
 };
 
 export const WarningAlt = Template.bind({});
 WarningAlt.storyName = 'Warning (alt)';
 WarningAlt.args = {
   kind: CvNotificationConsts.notificationKinds[4],
+  title: 'warning △',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+WarningAlt.parameters = {
+  docs: { source: { code: storySourceCode(template, WarningAlt.args) } },
 };
 
 export const Error = Template.bind({});
 Error.args = {
   kind: CvNotificationConsts.notificationKinds[5],
+  title: 'error',
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+Error.parameters = {
+  docs: { source: { code: storySourceCode(template, Error.args) } },
 };
 
 export const SlotDefault = Template.bind({});
 SlotDefault.args = {
   kind: CvNotificationConsts.notificationKinds[4],
+  title: 'title',
+  subTitle: 'subtitle',
   defaultSlot: true,
 };
+SlotDefault.parameters = {
+  docs: { source: { code: storySourceCode(template, SlotDefault.args) } },
+};
 
 export const SlotTitle = Template.bind({});
 SlotTitle.args = {
   kind: CvNotificationConsts.notificationKinds[0],
   titleSlot: true,
+  subTitle: 'subtitle',
+  caption: 'more information',
+};
+SlotTitle.parameters = {
+  docs: { source: { code: storySourceCode(template, SlotTitle.args) } },
 };
 
 export const SlotSubtitle = Template.bind({});
 SlotSubtitle.args = {
   kind: CvNotificationConsts.notificationKinds[3],
   subtitleSlot: true,
+  title: 'title',
+  caption: 'more information',
+};
+SlotSubtitle.parameters = {
+  docs: { source: { code: storySourceCode(template, SlotSubtitle.args) } },
 };
 
 export const SlotCaption = Template.bind({});
 SlotCaption.args = {
   kind: CvNotificationConsts.notificationKinds[1],
   captionSlot: true,
+  title: 'title',
+  subTitle: 'subtitle',
+};
+SlotCaption.parameters = {
+  docs: { source: { code: storySourceCode(template, SlotCaption.args) } },
 };

package/src/components/CvNotification/CvToastNotificationTemplate.mdx

@@ -0,0 +1,17 @@
+import { Meta, Title,  Primary, Stories } from '@storybook/addon-docs';
+
+<Meta isTemplate />
+
+<Title />
+
+Migration notes:
+
+- **Breaking**. The `subTitle` property no longer renders html. Please use the `subtitle` slot instead.
+- **Breaking**. The `caption` property no longer renders html. Please use the `caption` slot instead.
+- The `title` content can now be provided in the `title` slot.
+
+<Primary />
+
+<Controls />
+
+<Stories />

package/src/components/CvNumberInput/CvNumberInput.vue

@@ -38,7 +38,7 @@
           :data-invalid="isInvalid || null"
           type="number"
           v-bind="$attrs"
-          :disabled="disabled"
+          :disabled="disabled || null"
           :step="step"
           :min="min"
           :max="max"
@@ -53,7 +53,7 @@
             :class="`${carbonPrefix}--number__control-btn down-icon`"
             type="button"
             :aria-label="ariaLabelForDownButton"
-            :disabled="disabled"
+            :disabled="disabled || null"
             aria-live="polite"
             aria-atomic="true"
             @click="doDown"
@@ -67,7 +67,7 @@
             :class="`${carbonPrefix}--number__control-btn up-icon`"
             type="button"
             :aria-label="ariaLabelForUpButton"
-            :disabled="disabled"
+            :disabled="disabled || null"
             aria-live="polite"
             aria-atomic="true"
             @click="doUp"

package/src/components/CvOverflowMenu/CvOverflowMenuItem.vue

@@ -13,8 +13,8 @@
     <button
       type="button"
       :class="`${carbonPrefix}--overflow-menu-options__btn`"
-      :data-floating-menu-primary-focus="primaryFocus"
-      :disabled="disabled"
+      :data-floating-menu-primary-focus="primaryFocus || null"
+      :disabled="disabled || null"
       @click="onClick"
     >
       <span :class="`${carbonPrefix}--overflow-menu-options__option-content`">

package/src/components/CvProgress/CvProgress.stories.mdx

@@ -4,6 +4,19 @@ import { Time20 as TimeIcon } from '@carbon/icons-vue';
 // noinspection ES6PreferShortImport
 import { sbCompPrefix } from '../../global/storybook-utils';
 import { action } from '@storybook/addon-actions';
+import {ref } from "vue";
+const step3Invalid = ref(false)
+const step4Disable = ref(false)
+const step5Complete = ref(false)
+function onStep4Disable() {
+  step4Disable.value = !step4Disable.value
+}
+function onStep3Invalid() {
+  step3Invalid.value = !step3Invalid.value
+}
+function onStep5Complete() {
+  step5Complete.value = !step5Complete.value
+}
 
 <Meta title={`${sbCompPrefix}/CvProgress`} component={CvProgress} />
 
@@ -31,6 +44,12 @@ export const Template = args => ({
       invalidIds: args.invalidIds,
       disabledIds: args.disabledIds,
       onStepClicked: action('step-clicked'),
+      step3Invalid,
+      onStep3Invalid,
+      step4Disable,
+      onStep4Disable,
+      step5Complete,
+      onStep5Complete,
     };
   },
   // And then the `args` are bound to your component with `v-bind="args"`
@@ -79,7 +98,7 @@ const slotTemplate = `
       id="step-3"
       :label="step3"
       :complete="completeIds.includes('step-3')"
-      :invalid="invalidIds.includes('step-3')"
+      :invalid="step3Invalid"
       :disabled="disabledIds.includes('step-3')"
       additionalInfo="save the world"
       @step-clicked="onStepClicked"
@@ -90,7 +109,7 @@ const slotTemplate = `
       :label="step4"
       :complete="completeIds.includes('step-4')"
       :invalid="invalidIds.includes('step-4')"
-      :disabled="disabledIds.includes('step-4')"
+      :disabled="step4Disable"
       additionalInfo="Twins Dennys and Sandy"
       @step-clicked="onStepClicked"
       >
@@ -98,7 +117,7 @@ const slotTemplate = `
     <cv-progress-step
       id="step-5"
       :label="step5"
-      :complete="completeIds.includes('step-5')"
+      :complete="step5Complete"
       :invalid="invalidIds.includes('step-5')"
       :disabled="disabledIds.includes('step-5')"
       additionalInfo="with Polyhymnia O'Keefe"
@@ -106,6 +125,9 @@ const slotTemplate = `
       >
     </cv-progress-step>
   </cv-progress>
+  <div><button @click=onStep3Invalid>Toggle step 3 invalid</button></div>
+  <div><button @click=onStep4Disable>Toggle step 4 disabled</button></div>
+  <div><button @click=onStep5Complete>Toggle step 5 complete</button></div>
 `;
 const skeletonTemplate = `<cv-progress-skeleton :vertical="vertical" />`;
 
@@ -187,15 +209,15 @@ Use `cv-progress-step` for more control over the display.
       },
       disabledIds: {
         control: 'multi-select',
-        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+        options: ['step-1', 'step-2', 'step-3', 'step-5'],
       },
       completeIds: {
         control: 'multi-select',
-        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+        options: ['step-1', 'step-2', 'step-3', 'step-4'],
       },
       invalidIds: {
         control: 'multi-select',
-        options: ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'],
+        options: ['step-1', 'step-2', 'step-4', 'step-5'],
       },
     }}
   >
@@ -221,4 +243,4 @@ Use `cv-progress-step` for more control over the display.
   >
     {Template.bind({})}
   </Story>
-</Canvas>
+</Canvas>

package/src/components/CvProgress/CvProgress.vue

@@ -75,4 +75,5 @@ function updateSteps() {
 }
 onMounted(updateSteps);
 watch(() => props.initialStep, updateSteps);
+watch(progressSteps, updateSteps);
 </script>

package/src/components/CvProgress/CvProgressStep.vue

@@ -106,6 +106,8 @@ function checkCurrentStep() {
 onMounted(checkCurrentStep);
 watch(currentStep, checkCurrentStep);
 watch(completedSteps, checkCurrentStep);
+watch(() => props.complete, checkCurrentStep);
+watch(() => props.disabled, checkCurrentStep);
 
 onBeforeUnmount(() => {
   const index = progressSteps.value.findIndex(step => step.uid === uid.value);

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/CvSlider/CvSlider.vue

@@ -76,7 +76,7 @@
           { [`${carbonPrefix}--text-input--light`]: isLight },
         ]"
         :placeholder="min"
-        :disabled="disabled"
+        :disabled="disabled || null"
         @change="onChange"
         @keydown.up.prevent="onUp"
         @keydown.down.prevent="onDown"

package/src/components/CvTag/CvTag.vue

@@ -8,7 +8,7 @@
       v-if="filter"
       :class="`${carbonPrefix}--tag__close-icon`"
       :aria-label="clearAriaLabel"
-      :disabled="disabled"
+      :disabled="disabled || null"
       @click.stop.prevent="onRemove"
     >
       <Close16 />

package/telemetry.yml

@@ -0,0 +1,8 @@
+# yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
+
+version: 1
+projectId: 084968c7-d247-4ddb-bc07-cbdbe57fdd43
+endpoint: https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics
+collect:
+  npm:
+    dependencies: null

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
-);