@carbon/vue 3.0.7-alpha.0 → 3.0.8-alpha.0

package/src/components/CvTimePicker/CvTimePicker.stories.mdx

@@ -0,0 +1,325 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import CvTimePicker from './CvTimePicker.vue';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+import {
+  FIELD_MEDIUM,
+  TIME_PICKER_AM,
+  TIME_PICKER_HOURS,
+  TIME_PICKER_SIZES,
+} from './index';
+import { ref } from 'vue';
+const myTime = ref('10:04');
+const myHour = ref('PM');
+const myZone = ref('America/Los_Angeles');
+
+<Meta title={`${sbCompPrefix}/CvTimePicker`} component={CvTimePicker} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvTimePicker,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      light: args.light,
+      ampm: args.ampm,
+      ampmSelectLabel: args.ampmSelectLabel,
+      disabled: args.disabled,
+      invalidMessage: args.invalidMessage,
+      label: args.label,
+      pattern: args.pattern,
+      placeholder: args.placeholder,
+      time: args.time,
+      timezone: args.timezone,
+      timezones: args.timezones,
+      timezonesSelectLabel: args.timezonesSelectLabel,
+      fieldSize: args.fieldSize,
+      slotInvalidText: args.slotInvalidText,
+      myTime,
+      myHour,
+      myZone,
+      onChange: action('change'),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+<cv-time-picker
+  :light="light"
+  :label="label"
+  :time="time"
+  :ampm="ampm"
+  :pattern="pattern"
+  :placeholder="placeholder"
+  :ampm-select-label="ampmSelectLabel"
+  :invalid-message="invalidMessage"
+  :disabled="disabled"
+  :fieldSize="fieldSize"
+  @change="onChange">
+</cv-time-picker>`;
+const timezoneTemplate = `
+<cv-time-picker
+  :timezone="timezone"
+  :timezones="timezones"
+  :timezones-select-label="timezonesSelectLabel"
+  :fieldSize="fieldSize"
+  @change="onChange">
+</cv-time-picker>`;
+const slotTemplate = `
+<cv-time-picker
+  @change="onChange">
+  <template v-if="slotInvalidText" v-slot:invalid-message>Temporal paradox</template>
+</cv-time-picker>`;
+const vModelTemplate = `
+<div>
+<cv-time-picker
+  v-model:time="myTime"
+  v-model:ampm="myHour"
+  v-model:timezone="myZone"
+  :timezones="timezones"
+  @change="onChange">
+</cv-time-picker>
+<div style="margin-top: 1rem; background-color: rgb(136, 136, 136); padding: 1rem;">
+<h2>Sample interaction</h2>
+<div>
+  <label>time: <input type="text" v-model="myTime"></label>
+  <label>Ampm:
+    <select v-model="myHour">
+    <option value="AM">AM</option>
+    <option value="PM">PM</option>
+    </select>
+  </label>
+  <label>Timezone:
+    <select v-model="myZone">
+      <option value="America/Los_Angeles">America/Los Angeles</option>
+      <option value="Moon/Tranquility_Base">Moon Standard Time</option>
+    </select>
+  </label>
+</div>
+</div>
+</div>`;
+
+# CvTimePicker
+
+**Migration notes:**
+
+- The `formItem` boolean property is shown in the Vue 2 storybook, but it has no effect. It is removed from this version.
+- The `fieldSize` property is new.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'change',
+          'template',
+          'update:ampm',
+          'update:time',
+          'update:timezone',
+          'invalid-message',
+          'timezone',
+          'timezones',
+          'timezonesSelectLabel',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      light: false,
+      template: defaultTemplate,
+    }}
+    argTypes={{
+      light: {
+        type: String,
+        description: '`true` to use the light version',
+        table: { category: 'props' },
+      },
+      fieldSize: {
+        control: 'select',
+        default: FIELD_MEDIUM,
+        options: TIME_PICKER_SIZES,
+      },
+      ampm: {
+        control: 'select',
+        default: TIME_PICKER_AM,
+        options: TIME_PICKER_HOURS,
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# With timezones
+
+- The timezone field does not appear unless there is a value for `timezones` array
+- Sample is initialized with this data
+
+```js
+{
+  timezones: [
+    { value: 'America/New_York', label: 'America/New York' },
+    { value: 'Europe/Berlin', label: 'Europe/Berlin' },
+    { value: 'Asia/Dubai', label: 'Asia/Dubai' },
+    { value: 'Asia/Calcutta', label: 'Indian Standard Time' },
+    { value: 'Asia/Shanghai', label: 'China Standard Time' },
+    { value: 'Moon/Tranquility_Base', label: 'Moon Standard Time' },
+  ];
+}
+```
+
+<Canvas>
+  <Story
+    name="Include timezone"
+    parameters={{
+      controls: {
+        exclude: [
+          'change',
+          'template',
+          'update:ampm',
+          'update:time',
+          'update:timezone',
+          'invalid-message',
+          'ampm',
+          'ampmSelectLabel',
+          'disabled',
+          'invalidMessage',
+          'label',
+          'light',
+          'pattern',
+          'placeholder',
+          'time',
+        ],
+      },
+      docs: { source: { code: timezoneTemplate } },
+    }}
+    args={{
+      light: false,
+      template: timezoneTemplate,
+      timezones: [
+        { value: 'America/New_York', label: 'America/New York' },
+        { value: 'Europe/Berlin', label: 'Europe/Berlin' },
+        { value: 'Asia/Dubai', label: 'Asia/Dubai' },
+        { value: 'Asia/Calcutta', label: 'Indian Standard Time' },
+        { value: 'Asia/Shanghai', label: 'China Standard Time' },
+        { value: 'Moon/Tranquility_Base', label: 'Moon Standard Time' },
+      ],
+    }}
+    argTypes={{
+      timezones: { control: false },
+      fieldSize: {
+        control: 'select',
+        default: FIELD_MEDIUM,
+        options: TIME_PICKER_SIZES,
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# With `invalid-message` slot
+
+<Canvas>
+  <Story
+    name="Slots"
+    parameters={{
+      controls: {
+        exclude: [
+          'change',
+          'template',
+          'update:ampm',
+          'update:time',
+          'update:timezone',
+          'invalid-message',
+          'ampm',
+          'ampmSelectLabel',
+          'disabled',
+          'invalidMessage',
+          'label',
+          'light',
+          'pattern',
+          'placeholder',
+          'time',
+          'fieldSize',
+          'timezone',
+          'timezones',
+          'timezonesSelectLabel',
+        ],
+      },
+      docs: { source: { code: slotTemplate } },
+    }}
+    args={{
+      template: slotTemplate,
+      slotInvalidText: false,
+    }}
+    argTypes={{}}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# v-model
+
+<Canvas>
+  <Story
+    name="v-model"
+    parameters={{
+      controls: {
+        exclude: [
+          'change',
+          'template',
+          'update:ampm',
+          'update:time',
+          'update:timezone',
+          'invalid-message',
+          'timezone',
+          'timezones',
+          'timezonesSelectLabel',
+          'ampm',
+          'ampmSelectLabel',
+          'disabled',
+          'invalidMessage',
+          'fieldSize',
+          'label',
+          'light',
+          'pattern',
+          'placeholder',
+          'time',
+        ],
+      },
+      docs: { source: { code: vModelTemplate } },
+    }}
+    args={{
+      light: false,
+      template: vModelTemplate,
+      timezones: [
+        { value: 'America/Los_Angeles', label: 'America/Los Angeles' },
+        { value: 'Moon/Tranquility_Base', label: 'Moon Standard Time' },
+      ],
+    }}
+    argTypes={{
+      light: {
+        type: String,
+        description: '`true` to use the light version',
+        table: { category: 'props' },
+      },
+      fieldSize: {
+        control: 'select',
+        default: FIELD_MEDIUM,
+        options: TIME_PICKER_SIZES,
+      },
+      ampm: {
+        control: 'select',
+        default: TIME_PICKER_AM,
+        options: TIME_PICKER_HOURS,
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvTimePicker/CvTimePicker.vue

@@ -0,0 +1,217 @@
+<!--suppress ES6PreferShortImport -->
+<template>
+  <div :class="`cv-time-picker ${carbonPrefix}--form-item`">
+    <div
+      :class="[
+        `${carbonPrefix}--time-picker`,
+        `${carbonPrefix}--time-picker--${fieldSize}`,
+        { [`${carbonPrefix}--time-picker--light`]: isLight },
+      ]"
+      :data-invalid="isInvalid"
+    >
+      <div :class="`${carbonPrefix}--time-picker__input`">
+        <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
+        <input
+          :id="uid"
+          type="text"
+          :class="[
+            `${carbonPrefix}--time-picker__input-field ${carbonPrefix}--text-input`,
+            { [`${carbonPrefix}--text-input--light`]: isLight },
+          ]"
+          :pattern="pattern"
+          v-bind="$attrs"
+          :placeholder="placeholder"
+          :maxlength="placeholder.length"
+          :value="time"
+          :disabled="isDisabled"
+          @input="onInput"
+        />
+      </div>
+      <cv-select
+        v-if="ampm !== TIME_PICKER_24"
+        :class="`${carbonPrefix}--time-picker__select`"
+        :form-item="false"
+        hide-label
+        :label="ampmSelectLabel"
+        :value="ampm"
+        :disabled="isDisabled"
+        :size="fieldSize"
+        @change="onChangeAMPM"
+      >
+        <cv-select-option
+          :class="`${carbonPrefix}--select-option`"
+          :value="TIME_PICKER_AM"
+          >{{ TIME_PICKER_AM }}</cv-select-option
+        >
+        <cv-select-option
+          :class="`${carbonPrefix}--select-option`"
+          :value="TIME_PICKER_PM"
+          >{{ TIME_PICKER_PM }}</cv-select-option
+        >
+      </cv-select>
+      <div v-else>&nbsp;</div>
+
+      <cv-select
+        v-if="timezones.length > 0"
+        :class="`${carbonPrefix}--time-picker__select`"
+        :form-item="false"
+        hide-label
+        :label="timezonesSelectLabel"
+        :value="validTimezone"
+        :disabled="isDisabled"
+        :size="fieldSize"
+        @change="onChangeTimeZone"
+      >
+        <cv-select-option
+          v-for="item in timezones"
+          :key="item.value"
+          :class="`${carbonPrefix}--select-option`"
+          :value="item.value"
+          >{{ item.label }}</cv-select-option
+        >
+      </cv-select>
+    </div>
+    <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { props as propsCvId, useCvId } from '../../use/cvId';
+import { props as propsTheme, useIsLight } from '../../use/cvTheme';
+import CvSelect from '../CvSelect/CvSelect.vue';
+import CvSelectOption from '../CvSelect/CvSelectOption.vue';
+import { computed, onMounted, onUpdated, ref, useSlots } from 'vue';
+import {
+  TIME_PICKER_SIZES,
+  TIME_PICKER_HOURS,
+  FIELD_MEDIUM,
+  TIME_PICKER_AM,
+  TIME_PICKER_PM,
+  TIME_PICKER_24,
+} from './index';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  /**
+   * Initial value for the AM/PM `<cv-select>`. If set to `24` the `<cv-select>` is not included.
+   */
+  ampm: {
+    type: String,
+    default: TIME_PICKER_AM,
+    validator: value => TIME_PICKER_HOURS.includes(value),
+  },
+  /**
+   * Label for the AM/PM `<cv-select>`
+   */
+  ampmSelectLabel: { type: String, default: 'Select AM/PM' },
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: { type: Boolean, default: false },
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidMessage: { type: String, default: undefined },
+  /**
+   * Label for the time `<input>`
+   */
+  label: { type: String, default: 'Select a time' },
+  /**
+   * Specify the regular expression working as the [pattern](https://www.w3schools.com/tags/att_input_pattern.asp) of the time string in `<input>`.
+   */
+  pattern: { type: String, default: '([01][0-9]:[0-6][0-9])' },
+  /**
+   * Specify the placeholder attribute for the <input>
+   */
+  placeholder: { type: String, default: 'hh:mm' },
+  /**
+   * Specify the initial value of the `<input>`
+   */
+  time: { type: String, default: undefined },
+  /**
+   * Specify the initial value of the `<cv-select>` for the timezone
+   */
+  timezone: { type: String, default: undefined },
+  /**
+   * List of timezones to display
+   * @type {Array<{value: string, label:string}>}
+   */
+  timezones: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * Specify the label of the `<cv-select>` for the timezone. Label is hidden but text will be read by a screen reader when visiting this control.
+   */
+  timezonesSelectLabel: { type: String, default: 'Select time zone' },
+  /**
+   * Specify the size of the Time Picker.
+   */
+  fieldSize: {
+    type: String,
+    default: FIELD_MEDIUM,
+    validator: value => TIME_PICKER_SIZES.includes(value),
+  },
+  ...propsCvId,
+  ...propsTheme,
+});
+
+const uid = useCvId(props, true);
+const isLight = useIsLight(props);
+
+const isInvalid = ref(false);
+const slots = useSlots();
+function checkSlots() {
+  // NOTE: slots is not reactive so needs to be managed on updated
+  isInvalid.value = !!(
+    slots['invalid-message'] ||
+    (props.invalidMessage && props.invalidMessage.length)
+  );
+}
+onMounted(checkSlots);
+onUpdated(checkSlots);
+
+const emit = defineEmits([
+  'change',
+  'update:ampm',
+  'update:timezone',
+  'update:time',
+]);
+
+const validTimezone = computed(() => {
+  // Validate timezone setting
+  let result = props.timezone;
+  if (props.timezones && props.timezones.length) {
+    if (!props.timezones.find(item => item.value === props.timezone)) {
+      if (props.timezone !== undefined)
+        console.error(
+          `CvTimePicker: invalid value '${props.timezone}' supplied for prop timezone. Default applied.`
+        );
+      // set to first valid value
+      result = props.timezones[0].value;
+      emit('update:timezone', result);
+    }
+  }
+  return result;
+});
+const isDisabled = computed(() => (props.disabled ? true : undefined));
+
+function onInput(e) {
+  emit('change', { type: 'time', value: e?.target?.value });
+  emit('update:time', e?.target?.value);
+}
+function onChangeAMPM(value) {
+  emit('change', { type: 'ampm', value });
+  emit('update:ampm', value);
+}
+function onChangeTimeZone(value) {
+  emit('change', { type: 'timezone', value });
+  emit('update:timezone', value);
+}
+</script>

package/src/components/CvTimePicker/index.js

@@ -0,0 +1,21 @@
+import CvTimePicker from './CvTimePicker.vue';
+const FIELD_SMALL = 'sm';
+const FIELD_MEDIUM = 'md';
+const FIELD_LARGE = 'lg';
+const TIME_PICKER_SIZES = [FIELD_SMALL, FIELD_MEDIUM, FIELD_LARGE];
+const TIME_PICKER_AM = 'AM';
+const TIME_PICKER_PM = 'PM';
+const TIME_PICKER_24 = '24';
+const TIME_PICKER_HOURS = [TIME_PICKER_AM, TIME_PICKER_PM, TIME_PICKER_24];
+
+export {
+  CvTimePicker,
+  FIELD_SMALL,
+  FIELD_MEDIUM,
+  FIELD_LARGE,
+  TIME_PICKER_SIZES,
+  TIME_PICKER_AM,
+  TIME_PICKER_PM,
+  TIME_PICKER_24,
+  TIME_PICKER_HOURS,
+};

package/src/components/CvToggle/CvToggle-Skeleton.vue

@@ -1,14 +1,22 @@
 <template>
-  <div :class="`cv-toggle ${carbonPrefix}--form-item`" :id="cvId">
-    <label
-      :class="`${carbonPrefix}--toggle__label ${carbonPrefix}--skeleton`"
-      :for="cvId"
-      :aria-label="label ? 'Toggle is loading' : label"
-    >
-      <span :class="`${carbonPrefix}--toggle__label-text`" />
-      <span :class="`${carbonPrefix}--toggle__text--left`" />
-      <span :class="`${carbonPrefix}--toggle__appearance`" />
-      <span :class="`${carbonPrefix}--toggle__text--right`" />
+  <div :class="`cv-toggle ${carbonPrefix}--form-item`" :aria-label="label">
+    <input
+      :id="cvId"
+      type="checkbox"
+      :class="[
+        `${carbonPrefix}--toggle ${carbonPrefix}--skeleton`,
+        {
+          [`${carbonPrefix}--toggle-input--small`]: small,
+        },
+      ]"
+    />
+    <label :class="`${carbonPrefix}--toggle-input__label`" :for="cvId">
+      <div></div>
+      <span :class="`${carbonPrefix}--toggle__switch`">
+        <span :class="`${carbonPrefix}--toggle__text--left`" />
+        <span :class="`${carbonPrefix}--toggle__appearance`" />
+        <span :class="`${carbonPrefix}--toggle__text--right`" />
+      </span>
     </label>
   </div>
 </template>
@@ -18,12 +26,19 @@ import { carbonPrefix } from '../../global/settings';
 import { useCvId, props as propsCvId } from '../../use/cvId';
 
 const props = defineProps({
+  /**
+   * Label and aria-label for the toggle
+   */
   label: {
     type: String,
     default: 'Toggle is loading',
-    ...propsCvId,
   },
+  /**
+   * Specify the size of the Toggle. Default is medium. Set to `true` for small.
+   */
+  small: { type: Boolean, default: false },
+  ...propsCvId,
 });
 
-const cvId = useCvId(props);
+const cvId = useCvId(props, true);
 </script>

package/src/components/CvToggle/CvToggle.stories.js

@@ -31,7 +31,6 @@ export default {
     },
   },
   argTypes: {
-    label: { description: 'Toggle label' },
     checked: {
       type: 'boolean',
       table: {
@@ -63,6 +62,11 @@ const Template = args => {
 
 export const Default = Template.bind({});
 Default.args = initArgs;
+Default.parameters = {
+  controls: {
+    exclude: ['change', 'update:modelValue', 'text-left', 'text-right'],
+  },
+};
 Default.parameters = storyParametersObject(
   Default.parameters,
   template,
@@ -214,7 +218,7 @@ arrayVModel.parameters = storyParametersObject(
 
 const templateSkeleton = `
 <div>
-  <cv-toggle-skeleton></cv-toggle-skeleton>
+  <cv-toggle-skeleton :small="small"></cv-toggle-skeleton>
 </div>
 `;
 
@@ -223,10 +227,23 @@ const TemplateSkeleton = args => {
     components: { CvToggle, CvToggleSkeleton },
     setup: () => ({
       args,
-      onChange: action('change'),
+      small: args.small,
     }),
     template: templateSkeleton,
   };
 };
 
 export const Skeleton = TemplateSkeleton.bind({});
+Skeleton.parameters = {
+  controls: {
+    exclude: [
+      'change',
+      'text-left',
+      'text-right',
+      'update:modelValue',
+      'hideLabel',
+      'formItem',
+      'checked',
+    ],
+  },
+};