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

package/src/components/CvTextInput/CvTextInput.stories.js

@@ -0,0 +1,245 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+import CvTextInput from '.';
+import { ref } from 'vue';
+
+export default {
+  title: `${sbCompPrefix}/CvTextInput`,
+  component: CvTextInput,
+  argTypes: {
+    // attrs
+    disabled: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'attributes',
+      },
+      description: 'Specify whether the `<input>` should be disabled',
+    },
+    placeholder: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'attributes',
+      },
+      description: 'Specify the placeholder attribute for the `<input>`',
+    },
+    // props
+    helperText: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        'Provide text that is used alongside the control label for additional help',
+    },
+    hideLabel: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+        defaultValue: false,
+      },
+      description:
+        'Specify whether you want the underlying label to be visually hidden',
+    },
+    invalidMessage: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        'Provide the text that is displayed when the control is in an invalid state',
+    },
+    label: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: "Input's label",
+    },
+    light: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+        defaultValue: false,
+      },
+      description:
+        "Toggles light version. For use on `$ui-01` backgrounds only. Don't use this to make tile background color same as container background color.",
+    },
+    modelValue: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        "Input's value, modelValue is the vue3 default 'prop' for two-way data binding with v-model",
+    },
+    passwordHideLabel: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: '"Hide password" tooltip text on password visibility toggle',
+    },
+    passwordShowLabel: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: '"Show password" tooltip text on password visibility toggle',
+    },
+    passwordVisible: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description: 'Toggle password visibility.',
+    },
+    type: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+        defaultValue: { summary: 'text' },
+      },
+      options: ['text', 'password'],
+      control: {
+        type: 'select',
+      },
+      description: 'Input type, only `text` and `password` are available',
+    },
+    warnText: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description:
+        'Provide the text that is displayed when the control is in warning state',
+    },
+    // slots
+    'helper-text': {
+      type: 'string',
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description:
+        "Helper text slot. It isn't shown if invalid message or warn text, either props or slots, are available",
+    },
+    'invalid-message': {
+      type: 'string',
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description: 'Invalid message slot.',
+    },
+    'warn-text': {
+      type: 'string',
+      table: {
+        type: { summary: 'string | html | Component' },
+        category: 'slots',
+      },
+      description:
+        "Warn text slot. It isn't shown if invalid message, either prop or slot, is available",
+    },
+    // events
+    'update:modelValue': {
+      type: 'event',
+      table: {
+        type: { summary: 'event' },
+        category: 'events',
+      },
+      control: { type: null },
+      description:
+        "Triggered on textarea update. `update:modelValue` is the vue3 default 'event' for two-way data binding with v-model",
+    },
+  },
+};
+
+const template = `
+  <cv-text-input v-bind="args">
+    <template v-if="args['helper-text']" v-slot:helper-text />
+    <template v-if="args['warn-text']" v-slot:warn-text />
+    <template v-if="args['invalid-message']" v-slot:invalid-message />
+  </cv-text-input>
+`;
+const Template = args => {
+  return {
+    components: { CvTextInput },
+    setup: () => ({ args }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  helperText: 'Same helper text',
+  label: 'Text input label',
+  placeholder: 'Sample placeholder',
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const Slots = Template.bind({});
+Slots.args = {
+  'invalid-message': 'Same invalid message',
+  'warn-text': 'Same warn message',
+  'helper-text': 'Same help message',
+  label: 'Text input label',
+  placeholder: 'Sample placeholder',
+};
+Slots.parameters = storyParametersObject(
+  Slots.parameters,
+  template,
+  Slots.args
+);
+
+const vModelTemplate = `
+  <cv-text-input v-bind="args" v-model="value" />
+  <p style="margin-top: 1rem;">Value passed to v-model: {{ value }}</p>
+`;
+const VModelTemplate = args => {
+  return {
+    components: { CvTextInput },
+    setup: () => ({ args, value: ref('') }),
+    template: vModelTemplate,
+  };
+};
+export const vModel = VModelTemplate.bind({});
+vModel.args = {
+  label: 'Text input label',
+  placeholder: 'Sample placeholder',
+};
+vModel.parameters = storyParametersObject(
+  vModel.parameters,
+  vModelTemplate,
+  vModel.args
+);
+
+export const Password = Template.bind({});
+Password.args = {
+  label: 'Password input label',
+  type: 'password',
+};
+Password.parameters = storyParametersObject(
+  Password.parameters,
+  template,
+  Password.args
+);

package/src/components/CvTextInput/CvTextInput.vue

@@ -0,0 +1,217 @@
+<template>
+  <div
+    :class="[
+      'cv-text-input',
+      `${carbonPrefix}--form-item`,
+      `${carbonPrefix}--text-input-wrapper`,
+      { [`${carbonPrefix}--password-input-wrapper`]: isPassword },
+    ]"
+  >
+    <label
+      :for="cvId"
+      :class="[
+        `${carbonPrefix}--label`,
+        {
+          [`${carbonPrefix}--label--disabled`]: $attrs.disabled,
+          [`${carbonPrefix}--visually-hidden`]: hideLabel,
+        },
+      ]"
+    >
+      {{ label }}
+    </label>
+    <div
+      :class="[
+        `${carbonPrefix}--text-input__field-wrapper`,
+        { [`${carbonPrefix}--text-input__field-wrapper--warning`]: isWarn },
+      ]"
+      :data-invalid="isInvalid"
+    >
+      <WarningFilled16
+        v-if="isInvalid"
+        :class="`${carbonPrefix}--text-input__invalid-icon`"
+      />
+      <WarningAltFilled16
+        v-if="isWarn"
+        :class="`${carbonPrefix}--text-input__invalid-icon ${carbonPrefix}--text-input__invalid-icon--warning`"
+      />
+      <input
+        ref="input"
+        :id="cvId"
+        :class="[
+          `${carbonPrefix}--text-input`,
+          {
+            [`${carbonPrefix}--text-input--invalid`]: isInvalid,
+            [`${carbonPrefix}--text-input--light`]: isLight,
+            [`${carbonPrefix}--text-input--warning`]: isWarn,
+            [`${carbonPrefix}--password-input`]: isPassword,
+          },
+        ]"
+        v-bind="$attrs"
+        :type="dataType"
+        :value="modelValue"
+        :data-toggle-password-visibility="isPassword"
+        @input="$event => $emit('update:modelValue', $event.target.value)"
+      />
+      <button
+        v-if="isPassword"
+        :class="[
+          `${carbonPrefix}--btn`,
+          `${carbonPrefix}--btn--icon-only`,
+          `${carbonPrefix}--text-input--password__visibility__toggle`,
+          `${carbonPrefix}--tooltip__trigger`,
+          `${carbonPrefix}--tooltip--a11y`,
+          `${carbonPrefix}--tooltip--bottom`,
+          `${carbonPrefix}--tooltip--align-center`,
+          { [`${carbonPrefix}--btn--disabled`]: $attrs.disabled },
+        ]"
+        @click="togglePasswordVisibility"
+        type="button"
+        :disabled="$attrs.disabled"
+      >
+        <span :class="`${carbonPrefix}--assistive-text`">
+          {{ passwordHideShowLabel }}
+        </span>
+        <ViewOff16
+          v-if="isPasswordVisible"
+          :class="`${carbonPrefix}--icon-visibility-off`"
+        />
+        <View16 v-else :class="`${carbonPrefix}--icon-visibility-on`" />
+      </button>
+    </div>
+    <div v-if="isInvalid" :class="`${carbonPrefix}--form-requirement`">
+      <slot name="invalid-message">{{ invalidMessage }}</slot>
+    </div>
+    <div v-if="isWarn" :class="`${carbonPrefix}--form__requirement`">
+      <slot name="warn-text">{{ warnText }}</slot>
+    </div>
+    <div
+      v-if="isHelper"
+      :class="[
+        `${carbonPrefix}--form__helper-text`,
+        { [`${carbonPrefix}--form__helper-text--disabled`]: $attrs.disabled },
+      ]"
+    >
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  onBeforeUpdate,
+  ref,
+  useSlots,
+  computed,
+  watch,
+  nextTick,
+} from 'vue';
+import {
+  WarningFilled16,
+  WarningAltFilled16,
+  ViewOff16,
+  View16,
+} from '@carbon/icons-vue';
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+import { useIsLight, props as propsTheme } from '../../use/cvTheme';
+import { inputTypes } from './const';
+
+const props = defineProps({
+  helperText: { type: String, default: undefined },
+  hideLabel: { type: Boolean, default: false },
+  invalidMessage: { type: String, default: undefined },
+  label: String,
+  modelValue: String,
+  passwordHideLabel: { type: String, default: 'Hide password' },
+  passwordShowLabel: { type: String, default: 'Show password' },
+  passwordVisible: { type: Boolean, default: undefined },
+  type: {
+    type: String,
+    default: 'text',
+    validator: value => inputTypes.has(value),
+  },
+  warnText: { type: String, default: undefined },
+  ...propsCvId,
+  ...propsTheme,
+});
+
+const cvId = useCvId(props);
+
+// DOM Elements
+const input = ref();
+const slots = useSlots();
+
+// Data
+const isInvalid = ref(false);
+const isWarn = ref(false);
+const isHelper = ref(false);
+const isLight = useIsLight(props);
+const dataType = ref(props.type);
+const dataPasswordVisible = ref(false);
+
+// Computed Values
+const isPassword = computed(() => props.type === 'password');
+const isPasswordVisible = computed(
+  () => isPassword.value && dataPasswordVisible.value
+);
+const passwordHideShowLabel = computed(() =>
+  isPasswordVisible.value ? props.passwordHideLabel : props.passwordShowLabel
+);
+
+// Watchers
+watch(
+  () => props.passwordVisible,
+  newValue => {
+    if (newValue !== dataPasswordVisible.value) {
+      togglePasswordVisibility();
+    }
+  }
+);
+watch(
+  () => props.type,
+  newValue => {
+    dataType.value = newValue;
+  }
+);
+
+// Methods
+function togglePasswordVisibility() {
+  const currentValue = input.value.value;
+  dataPasswordVisible.value = !dataPasswordVisible.value;
+  dataType.value = dataPasswordVisible.value ? 'text' : 'password';
+  nextTick(() => {
+    input.value.value = currentValue;
+  });
+}
+
+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']);
+}
+
+// Lifecycle Hooks
+onBeforeMount(() => {
+  checkSlots();
+  // update initial state for dataPasswordVisible & dataType
+  if (isPassword.value && props.passwordVisible) {
+    dataPasswordVisible.value = true;
+    dataType.value = 'text';
+  }
+});
+onBeforeUpdate(checkSlots);
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>

package/src/components/CvTextInput/const.js

@@ -0,0 +1,2 @@
+// Currently available types for CvTextInput
+export const inputTypes = new Set(['password', 'text']);

package/src/components/CvTextInput/index.js

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

package/src/components/CvTile/CvTile.stories.mdx

@@ -0,0 +1,156 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import CvTile from './CvTile.vue';
+import CvTileStandard from './CvTileStandard.vue';
+import CvTileClickable from './CvTileClickable.vue';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+
+<Meta title={`${sbCompPrefix}/CvTile`} component={CvTile} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvTile,
+    CvTileStandard,
+    CvTileClickable,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      args: {
+        light: args.light,
+        kind: args.kind,
+        disabled: args.disabled,
+        expanded: args.expanded,
+        tileCollapsedLabel: args.tileCollapsedLabel,
+        tileExpandedLabel: args.tileExpandedLabel,
+      },
+      onChange: action('change'),
+      onExpanded: action('expanded'),
+      onClick: action('click'),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `<cv-tile v-bind='args'>Hello!</cv-tile>`;
+const defaultCode = defaultTemplate.replace("v-bind='args'", '');
+const expandableTemplate = `<cv-tile v-bind='args' kind="expandable" @expanded="onExpanded">Hello expandable!<template #below><h1>More Content</h1><p>Expanded</p></template></cv-tile>`;
+const expandableCode = expandableTemplate.replace("v-bind='args'", '');
+const clickableTemplate = `<cv-tile v-bind='args' kind="clickable" @click="onClick" to="{name: 'something'}">Hello clickable!</cv-tile>`;
+const clickableCode = clickableTemplate.replace("v-bind='args'", '');
+const selectableTemplate = `<cv-tile v-bind='args' kind="selectable" value="my-selection" @change="onChange">Hello selectable! </cv-tile>`;
+const selectableCode = selectableTemplate.replace("v-bind='args'", '');
+
+# CvTile
+
+**Migration notes:**
+
+- The `light` and '`theme` options continue to be supported but the boolean `light` is preferred.
+- The expandable tile now emits a `expanded` event with a Boolean value.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'selected',
+          'template',
+          'data',
+          'kind',
+          'expanded',
+          'tileExpandedLabel',
+          'tileCollapsedLabel',
+        ],
+      },
+      docs: { source: { code: defaultCode } },
+    }}
+    args={{
+      kind: '',
+      light: false,
+      disabled: false,
+      template: defaultTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Expandable"
+    parameters={{
+      controls: {
+        exclude: ['default', 'selected', 'template', 'data', 'kind', 'slots'],
+      },
+      docs: { source: { code: expandableCode } },
+    }}
+    args={{
+      light: false,
+      disabled: false,
+      template: expandableTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Clickable"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'selected',
+          'template',
+          'data',
+          'kind',
+          'slots',
+          'expanded',
+          'tileExpandedLabel',
+          'tileCollapsedLabel',
+        ],
+      },
+      docs: { source: { code: clickableCode } },
+    }}
+    args={{
+      light: false,
+      disabled: false,
+      template: clickableTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Selectable"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'selected',
+          'template',
+          'data',
+          'kind',
+          'slots',
+          'expanded',
+          'tileExpandedLabel',
+          'tileCollapsedLabel',
+        ],
+      },
+      docs: { source: { code: selectableCode } },
+    }}
+    args={{
+      light: false,
+      disabled: false,
+      template: selectableTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvTile/CvTile.vue

@@ -0,0 +1,67 @@
+<template>
+  <component
+    :is="tagType"
+    :checked="checkProp('checked', selected)"
+    :expanded="checkProp('expanded', expanded)"
+    :tileCollapsedLabel="checkProp('tileCollapsedLabel', tileCollapsedLabel)"
+    :tileExpandedLabel="checkProp('tileCollapsedLabel', tileExpandedLabel)"
+    :class="[
+      `cv-tile ${carbonPrefix}--tile`,
+      { [`${carbonPrefix}--tile--light`]: isLight },
+    ]"
+  >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData"
+      ><slot :name="name" v-bind="slotData"
+    /></template>
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { props as propsTheme, useIsLight } from '../../use/cvTheme';
+import CvTileStandard from './CvTileStandard.vue';
+import CvTileClickable from './CvTileClickable.vue';
+import CvTileSelectable from './CvTileSelectable.vue';
+import CvTileExpandable from './CvTileExpandable.vue';
+
+const props = defineProps({
+  expanded: Boolean,
+  selected: Boolean,
+  tileCollapsedLabel: { type: String, default: 'Tile collapsed' },
+  tileExpandedLabel: { type: String, default: 'Tile expanded' },
+  kind: {
+    type: String,
+    default: '',
+    validator: value =>
+      ['clickable', 'expandable', 'selectable', 'standard', ''].includes(value),
+  },
+  ...propsTheme,
+});
+
+const tagType = computed(() => {
+  switch (props.kind) {
+    case 'clickable':
+      return CvTileClickable;
+    case 'selectable':
+      return CvTileSelectable;
+    case 'expandable':
+      return CvTileExpandable;
+    default:
+      return CvTileStandard;
+  }
+});
+const isLight = useIsLight(props);
+
+/**
+ * If the prop is defined on the tagType pass it along otherwise, discard it.
+ * @param {string} prop
+ * @param {any} value
+ * @returns {*|undefined}
+ */
+function checkProp(prop, value) {
+  return prop in (tagType.value.props || {}) ? value : undefined;
+}
+</script>
+
+<style scoped></style>