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

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

@@ -0,0 +1,249 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+import { CvToggle } from '.';
+import { CvToggleSkeleton } from '.';
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+
+const initArgs = {
+  label: 'label',
+  value: 'check-1',
+  use_textLeft: false,
+  use_textRight: false,
+};
+
+const initArgsMinimal = {
+  value: 'check-1',
+};
+
+export default {
+  title: `${sbCompPrefix}/CvToggle`,
+  component: CvToggle,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [],
+      },
+      manual: true,
+    },
+  },
+  argTypes: {
+    checked: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+    },
+  },
+};
+
+/* DEFAULT STORY */
+
+const template = `
+  <cv-toggle @change="onChange" v-bind='args' >
+  <template v-slot:text-left v-if="args.use_textLeft"> 0 </template>
+  <template v-slot:text-right v-if="args.use_textRight"> 1 </template>
+  </cv-toggle>
+`;
+const Template = args => {
+  return {
+    components: { CvToggle },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template,
+  };
+};
+
+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,
+  Default.args
+);
+
+/* MINIMAL STORY */
+const templateMinimal = `
+<div>
+  <cv-toggle @change="onChange" v-bind='args'> </cv-toggle>
+</div>
+`;
+const TemplateMinimal = args => {
+  return {
+    components: { CvToggle },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template: templateMinimal,
+  };
+};
+
+export const Minimal = TemplateMinimal.bind({});
+Minimal.args = initArgsMinimal;
+
+/* EVENTS STORY */
+
+const templateEvents = `
+  <cv-toggle @change="onChange" v-bind='args'>
+  </cv-toggle>
+`;
+const TemplateEvents = args => {
+  return {
+    components: { CvToggle },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template: templateEvents,
+  };
+};
+
+export const Events = TemplateEvents.bind({});
+Events.args = initArgs;
+Events.parameters = storyParametersObject(
+  Events.parameters,
+  template,
+  Events.args
+);
+Events.args = initArgsMinimal;
+
+/* VMODEL STORY */
+
+const modelValue = ref(false);
+
+const templateVModel = `
+<div>
+  <cv-toggle @change="onChange" v-model="modelValue" v-bind='args'>
+  </cv-toggle>
+<div style="margin-top:1rem; background-color: #888888;  padding:1rem"><div style="font-size: 150%">Sample interaction</div>
+<label for="checkbox">V-model: Check 1:</label>
+<input id="checkbox" type="checkbox" :checked='modelValue' @change="(ev) => {modelValue = ev.currentTarget.checked}"/>
+<div>Checked: <span style="font-weight: bold;">{{modelValue}}</span></div>
+</div>
+</div>
+`;
+
+const TemplateVModel = args => {
+  return {
+    components: { CvToggle },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+      modelValue,
+    }),
+    template: templateVModel,
+  };
+};
+
+export const VModel = TemplateVModel.bind({});
+VModel.parameters = storyParametersObject(
+  VModel.parameters,
+  templateVModel,
+  VModel.args
+);
+VModel.args = initArgsMinimal;
+
+/* ARRAY VMODEL STORY */
+
+const handleModelValue = event => {
+  const tempArr = new Set(Object.values(arrayModelValue.value));
+  if (event.currentTarget.checked) {
+    tempArr.add(event.currentTarget.id);
+    arrayModelValue.value = Array.from(tempArr);
+    return;
+  }
+  tempArr.delete(event.currentTarget.id);
+  arrayModelValue.value = Array.from(tempArr);
+};
+let arrayModelValue = ref([]);
+
+const isChecked = value => {
+  const tempArr = new Set(Object.values(arrayModelValue.value));
+  return tempArr.has(value);
+};
+
+const templateArrayVModel = `
+<div>
+  <cv-toggle v-model="arrayModelValue" name="check-1" value="check-1" v-bind='args'>
+  </cv-toggle>
+  <cv-toggle v-model="arrayModelValue" name="check-2" value="check-2" v-bind='args'>
+  </cv-toggle>
+  <cv-toggle v-model="arrayModelValue" name="check-3" value="check-3" v-bind='args'>
+  </cv-toggle>
+<div style="margin-top:1rem; background-color: #888888;  padding:1rem"><div style="font-size: 150%">Sample interaction</div>
+<label for="check-1">V-model: Check 1:</label>
+<input id="check-1" type="checkbox" :checked="isChecked('check-1')" @change="handleModelValue"/>
+<label for="check-2">V-model: Check 2:</label>
+<input id="check-2" type="checkbox" :checked="isChecked('check-2')" @change="handleModelValue"/>
+<label for="check-3">V-model: Check 3:</label>
+<input id="check-3" type="checkbox" :checked="isChecked('check-3')" @change="handleModelValue"/>
+<div>Checked: <span style="font-weight: bold;">{{arrayModelValue}}</span></div>
+</div>
+</div>
+`;
+
+const TemplateArrayVModel = args => {
+  return {
+    components: { CvToggle },
+    setup: () => ({
+      args,
+      arrayModelValue,
+      handleModelValue,
+      isChecked,
+    }),
+    template: templateArrayVModel,
+  };
+};
+
+export const arrayVModel = TemplateArrayVModel.bind({});
+arrayVModel.parameters = storyParametersObject(
+  arrayVModel.parameters,
+  templateArrayVModel,
+  arrayVModel.args
+);
+
+/* SKELETON STORY */
+
+const templateSkeleton = `
+<div>
+  <cv-toggle-skeleton :small="small"></cv-toggle-skeleton>
+</div>
+`;
+
+const TemplateSkeleton = args => {
+  return {
+    components: { CvToggle, CvToggleSkeleton },
+    setup: () => ({
+      args,
+      small: args.small,
+    }),
+    template: templateSkeleton,
+  };
+};
+
+export const Skeleton = TemplateSkeleton.bind({});
+Skeleton.parameters = {
+  controls: {
+    exclude: [
+      'change',
+      'text-left',
+      'text-right',
+      'update:modelValue',
+      'hideLabel',
+      'formItem',
+      'checked',
+    ],
+  },
+};

package/src/components/CvToggle/CvToggle.vue

@@ -0,0 +1,87 @@
+<template>
+  <div :class="{ [`${carbonPrefix}--form-item`]: formItem }">
+    <input
+      :id="cvId"
+      ref="input"
+      role="toggle"
+      v-bind="$attrs"
+      :class="[
+        `${carbonPrefix}--toggle-input`,
+        {
+          [`${carbonPrefix}--toggle-input--small`]: small,
+        },
+      ]"
+      type="checkbox"
+      :checked="isChecked"
+      :value="value"
+      @change="onChange"
+    />
+    <label
+      :class="`${carbonPrefix}--toggle-input__label`"
+      :for="cvId"
+      :aria-label="hiddenLabel"
+    >
+      {{ visibleLabel }}
+      <span :class="`${carbonPrefix}--toggle__switch`">
+        <svg
+          :class="`${carbonPrefix}--toggle__check`"
+          width="6px"
+          height="5px"
+          viewBox="0 0 6 5"
+        >
+          <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
+        </svg>
+        <span :class="`${carbonPrefix}--toggle__text--off`" aria-hidden="true">
+          <slot name="text-left">Off</slot>
+        </span>
+        <span :class="`${carbonPrefix}--toggle__text--on`" aria-hidden="true">
+          <slot name="text-right">On</slot>
+        </span>
+      </span>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { computed, toRefs } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { useCheck, props as propsCvCheck } from '../../use/cvCheck';
+
+const hiddenLabel = computed(() => {
+  return props.hideLabel ? props.label : undefined;
+});
+
+const visibleLabel = computed(() => {
+  return props.hideLabel ? undefined : props.label;
+});
+
+const props = defineProps({
+  /**
+   * Specify the size of the Toggle. Default is medium. Set to `true` for small.
+   */
+  small: Boolean,
+  /**
+   * Label and aria-label for the toggle
+   */
+  label: {
+    type: String,
+    default: 'Toggle element',
+  },
+  /**
+   * Set the carbon form-item class
+   */
+  formItem: { type: Boolean, default: true },
+  /**
+   * Visibly hide the toggle label
+   */
+  hideLabel: Boolean,
+  ...propsCvId,
+  ...propsCvCheck,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const { onChange, isChecked } = useCheck(toRefs(props), emit);
+
+const cvId = useCvId(props);
+</script>

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvToggle CvToggle - should render formItem: default 1`] = `<div class="bx--form-item"><input id="test-1" role="toggle" class="bx--toggle-input" type="checkbox" value="check-1"><label class="bx--toggle-input__label" for="test-1">Toggle element <span class="bx--toggle__switch"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg><span class="bx--toggle__text--off" aria-hidden="true">Off</span><span class="bx--toggle__text--on" aria-hidden="true">On</span></span></label></div>`;
+
+exports[`CvToggle CvToggle - should render when formItem: false && small && hideLabel 1`] = `<div class="" disabled="true"><input id="test-1" role="toggle" disabled="" class="bx--toggle-input bx--toggle-input--small" type="checkbox" value="check-1"><label class="bx--toggle-input__label" for="test-1" aria-label="Toggle element"> <span class="bx--toggle__switch"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg><span class="bx--toggle__text--off" aria-hidden="true">Off</span><span class="bx--toggle__text--on" aria-hidden="true">On</span></span></label></div>`;
+
+exports[`CvToggle CvToggle - should render when formItem: true && disabled 1`] = `<div class="bx--form-item" disabled="true"><input id="test-1" role="toggle" disabled="" class="bx--toggle-input" type="checkbox" value="check-1"><label class="bx--toggle-input__label" for="test-1">Toggle element <span class="bx--toggle__switch"><svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5"><path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path></svg><span class="bx--toggle__text--off" aria-hidden="true">Off</span><span class="bx--toggle__text--on" aria-hidden="true">On</span></span></label></div>`;

package/src/components/CvToggle/index.js

@@ -0,0 +1,4 @@
+import CvToggle from './CvToggle.vue';
+import CvToggleSkeleton from './CvToggle-Skeleton.vue';
+export { CvToggle, CvToggleSkeleton };
+export default CvToggle;

package/src/components/CvTooltip/CvDefinitionTooltip.stories.js

@@ -0,0 +1,80 @@
+import CvDefinitionTooltip from './CvDefinitionTooltip.vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { alignments, directions } from './consts';
+import { sbTooltipPrefix } from './sbTooltipPrefix';
+
+export default {
+  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvDefinitionTooltip`,
+  component: CvDefinitionTooltip,
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      options: alignments,
+      defaultValue: CvDefinitionTooltip.props.alignment.default,
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: directions,
+      defaultValue: CvDefinitionTooltip.props.direction.default,
+    },
+    definition: {
+      control: { type: 'text' },
+      table: { category: 'props' },
+      description: 'Definition of the term',
+    },
+    term: {
+      control: { type: 'text' },
+      table: { category: 'props' },
+      description: 'Term to be defined',
+    },
+    'definition ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Definition of the term slot.',
+    },
+    'term ': {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Term slot',
+    },
+  },
+};
+
+const Term = 'A term needing definition';
+const Definition = 'Brief description of the dotted, underlined term';
+
+const template = `<cv-definition-tooltip v-bind="args" />`;
+
+const Template = args => {
+  return {
+    components: { CvDefinitionTooltip },
+    template,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  term: Term,
+  definition: Definition,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

package/src/components/CvTooltip/CvDefinitionTooltip.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    :class="`cv-definition-tooltip ${carbonPrefix}--tooltip--definition ${carbonPrefix}--tooltip--a11y`"
+    :id="cvId"
+  >
+    <button
+      :aria-describedby="`${cvId}-label`"
+      :class="[
+        `${carbonPrefix}--tooltip__trigger`,
+        `${carbonPrefix}--tooltip--a11y`,
+        `${carbonPrefix}--tooltip__trigger--definition`,
+        `${carbonPrefix}--tooltip--${direction}`,
+        `${carbonPrefix}--tooltip--align-${alignment}`,
+      ]"
+      type="button"
+    >
+      <slot name="term">
+        {{ term }}
+      </slot>
+    </button>
+    <div
+      :class="`${carbonPrefix}--assistive-text`"
+      :id="`${cvId}-label`"
+      role="tooltip"
+    >
+      <slot name="definition">
+        {{ definition }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { TipAlignments, alignments, TipDirections, directions } from './consts';
+
+const props = defineProps({
+  alignment: {
+    type: String,
+    default: TipAlignments.center,
+    validator: val => alignments.includes(val),
+  },
+  direction: {
+    type: String,
+    default: TipDirections.top,
+    validator: val => directions.includes(val),
+  },
+  definition: {
+    type: String,
+    default: '',
+  },
+  term: {
+    type: String,
+    default: '',
+  },
+  ...propsCvId,
+});
+
+const cvId = useCvId(props);
+</script>

package/src/components/CvTooltip/CvInteractiveTooltip.stories.js

@@ -0,0 +1,90 @@
+import CvInteractiveTooltip from './CvInteractiveTooltip.vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { alignments, directions } from './consts';
+import { sbTooltipPrefix } from './sbTooltipPrefix';
+import Filter16 from '@carbon/icons-vue/es/filter/16';
+
+export default {
+  title: `${sbCompPrefix}/${sbTooltipPrefix}/CvInteractiveTooltip`,
+  component: CvInteractiveTooltip,
+  argTypes: {
+    alignment: {
+      control: {
+        type: 'select',
+      },
+      options: alignments,
+      defaultValue: CvInteractiveTooltip.props.alignment.default,
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: directions,
+      defaultValue: CvInteractiveTooltip.props.direction.default,
+    },
+    visible: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: CvInteractiveTooltip.props.visible.default,
+      description: 'Initial tooltip visibility state',
+    },
+    label: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Label slot.',
+    },
+    content: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Content slot.',
+    },
+    trigger: {
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Trigger slot',
+    },
+  },
+};
+const template = `
+  <cv-interactive-tooltip v-bind="args">
+    <template #label>
+      Tooltip label
+    </template>
+    <template #trigger>
+      <Filter16 class="bx--overflow-menu__icon bx--toolbar-filter-icon" />
+    </template>
+    <template #content>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed 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>
+      <button class="bx--button">Clicky one</button>
+    </template>
+  </cv-interactive-tooltip>
+`;
+
+const Template = args => {
+  return {
+    components: { CvInteractiveTooltip, Filter16 },
+    template,
+    setup() {
+      return {
+        args,
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);