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

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

@@ -0,0 +1,232 @@
+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: {
+    label: { description: 'Toggle label' },
+    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 = 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></cv-toggle-skeleton>
+</div>
+`;
+
+const TemplateSkeleton = args => {
+  return {
+    components: { CvToggle, CvToggleSkeleton },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+    }),
+    template: templateSkeleton,
+  };
+};
+
+export const Skeleton = TemplateSkeleton.bind({});

package/src/components/CvToggle/CvToggle.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="{ [`${carbonPrefix}--form-item`]: formItem }">
+    <input
+      role="toggle"
+      v-bind="$attrs"
+      :class="[
+        `${carbonPrefix}--toggle-input`,
+        { 'bx--toggle-input--small': small },
+      ]"
+      type="checkbox"
+      :id="cvId"
+      :checked="isChecked"
+      @change="onChange"
+      :value="value"
+      ref="input"
+    />
+    <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({
+  small: Boolean,
+  label: String,
+  formItem: { type: Boolean, default: true },
+  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 role="toggle" class="bx--toggle-input" type="checkbox" id="test-1" value="check-1"><label class="bx--toggle-input__label" for="test-1"> <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 role="toggle" disabled="" class="bx--toggle-input bx--toggle-input--small" type="checkbox" id="test-1" value="check-1"><label class="bx--toggle-input__label" for="test-1"> <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 role="toggle" disabled="" class="bx--toggle-input" type="checkbox" id="test-1" value="check-1"><label class="bx--toggle-input__label" for="test-1"> <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/global/storybook-utils/story-source-code.js

@@ -36,6 +36,7 @@ export const storyParametersObject = (
   const code = storySourceCode(templateSource, args, replacing);
 
   if (!parameters) {
+    // eslint-disable-next-line no-param-reassign
     parameters = { docs: { source: { code } } };
   } else {
     if (!parameters.docs) {

package/src/use/cvInput.js

@@ -0,0 +1,34 @@
+import { onBeforeMount, onBeforeUpdate, ref, useSlots } from 'vue';
+import { useIsLight } from './cvTheme';
+
+export const useCvInputHelpers = props => {
+  const slots = useSlots();
+  const isInvalid = ref(false);
+  const isWarn = ref(false);
+  const isHelper = ref(false);
+  const isLight = useIsLight(props);
+
+  function checkSlots() {
+    // NOTE: slots is not reactive so needs to be managed on updated
+    isInvalid.value = !!(
+      props.invalidMessage?.length || slots['invalid-message']
+    );
+    isWarn.value =
+      !isInvalid.value && !!(props.warnText?.length || slots['warn-text']);
+    isHelper.value =
+      !isInvalid.value &&
+      !isWarn.value &&
+      !!(props.helperText?.length || slots['helper-text']);
+  }
+
+  onBeforeMount(checkSlots);
+  onBeforeUpdate(checkSlots);
+
+  return {
+    slots,
+    isInvalid,
+    isWarn,
+    isHelper,
+    isLight,
+  };
+};