@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvButton/CvIconButton.stories.js

@@ -0,0 +1,139 @@
+import { action } from '@storybook/addon-actions';
+import { CvIconButton } from './';
+import { buttonKinds, buttonSizes } from './consts.js';
+import {
+  sbCompPrefix,
+  storybookControlsFromProps,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { sbBtnPrefix } from './sbBtnPrefix';
+
+import { props as commonCvButtonProps } from './CvButtonCommon';
+import {
+  Bee20,
+  Carbon20,
+  Watson20,
+  IbmCloud20,
+  EdtLoop20,
+  IbmSecurity20,
+} from '@carbon/icons-vue';
+
+const icons = {
+  Bee20,
+  Carbon20,
+  Watson20,
+  IbmCloud20,
+  EdtLoop20,
+  IbmSecurity20,
+};
+
+export default {
+  title: `${sbCompPrefix}/${sbBtnPrefix}/CvIconButton`,
+  component: CvIconButton,
+  argTypes: {
+    ...storybookControlsFromProps(commonCvButtonProps),
+    /**
+     * \@carbon/icons-vue icon, href, svg or symbol
+     */
+    icon: {
+      control: {
+        type: 'select',
+        options: Object.keys(icons),
+      },
+    },
+    /**
+     * Carbon button kind
+     */
+    kind: {
+      control: { type: 'select', options: buttonKinds },
+      defaultValue: CvIconButton.props.kind.default,
+    },
+    /**
+     * Size of the button
+     */
+    size: {
+      control: { type: 'select', options: buttonSizes },
+      defaultValue: CvIconButton.props.size.default,
+    },
+  },
+};
+
+const template = `<cv-icon-button @click="onClick" v-bind="newArgs" />`;
+const Template = (args, { argTypes }) => {
+  const newArgs = { ...args, icon: icons[args.icon] };
+  return {
+    props: Object.keys(argTypes),
+    components: { CvIconButton },
+    template,
+    setup() {
+      return { newArgs, onClick: action('click') };
+    },
+  };
+};
+
+const defaultArgs = { icon: 'Bee20' };
+
+export const Primary = Template.bind({});
+Primary.args = {
+  ...defaultArgs,
+  kind: 'primary',
+  label: 'primary',
+};
+Primary.parameters = storyParametersObject(
+  Primary.parameters,
+  template,
+  Primary.args,
+  'v-bind="newArgs"'
+);
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  kind: 'secondary',
+  label: 'Secondary',
+  icon: 'Bee20',
+};
+Secondary.parameters = storyParametersObject(
+  Secondary.parameters,
+  template,
+  Secondary.args,
+  'v-bind="newArgs"'
+);
+
+export const Field = Template.bind({});
+Field.args = {
+  label: 'Field size',
+  size: 'field',
+  icon: 'Bee20',
+};
+Field.parameters = storyParametersObject(
+  Field.parameters,
+  template,
+  Field.args,
+  'v-bind="newArgs"'
+);
+
+export const Small = Template.bind({});
+Small.args = {
+  label: 'sm',
+  size: 'sm',
+  icon: 'Bee20',
+};
+Small.parameters = storyParametersObject(
+  Small.parameters,
+  template,
+  Small.args,
+  'v-bind="newArgs"'
+);
+
+export const Large = Template.bind({});
+Large.args = {
+  label: 'Large size',
+  size: 'lg',
+  icon: 'Bee20',
+};
+Large.parameters = storyParametersObject(
+  Large.parameters,
+  template,
+  Large.args,
+  'v-bind="newArgs"'
+);

package/src/components/CvButton/CvIconButton.vue

@@ -0,0 +1,88 @@
+<template>
+  <button
+    :class="[
+      buttonClasses,
+      `${carbonPrefix}--tooltip__trigger`,
+      `${carbonPrefix}--tooltip--a11y`,
+      `${carbonPrefix}--tooltip--${tipPosition || 'bottom'}`,
+      `${carbonPrefix}--tooltip--align-${tipAlignment || 'center'}`,
+    ]"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>
+
+    <slot name="icon">
+      <cv-svg :svg="icon" :class="`${carbonPrefix}--btn__icon`" />
+    </slot>
+  </button>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+import {
+  props as commonCvButtonProps,
+  useCvButtonCommon,
+} from './CvButtonCommon';
+import CvSvg from '../CvSvg/_CvSvg.vue';
+
+const { disabled, icon, kind, size } = commonCvButtonProps;
+
+export default {
+  name: 'CvIconButton',
+  components: { CvSvg },
+  emits: ['click'], // emitted to allow testing of click
+  props: {
+    // Docgen comments added for storybook doc page
+    /**
+     * disabled by property or if skeleton
+     */
+    disabled,
+    /**
+     * \@carbon/icons-vue icon, href, svg or symbol
+     */
+    icon,
+    /**
+     * Carbon button kind
+     */
+    kind,
+    /**
+     * label displayed as a tooltip for the icon
+     */
+    label: { type: String, default: undefined },
+    /**
+     * Size of the button
+     */
+    size,
+    /**
+     * tipPosition as per CvTooltip
+     */
+    tipPosition: {
+      type: String,
+      default: 'bottom',
+      validator: val => ['top', 'left', 'bottom', 'right'.includes(val)],
+    },
+    /**
+     * tipAlignment as per CvTooltip
+     */
+    tipAlignment: {
+      type: String,
+      default: 'center',
+      validator: val => ['start', 'center', 'end'].includes(val),
+    },
+  },
+  setup(props) {
+    const { buttonClasses } = useCvButtonCommon(
+      props.kind,
+      props.size,
+      false,
+      true
+    );
+
+    return {
+      buttonClasses,
+      carbonPrefix,
+    };
+  },
+};
+</script>

package/src/components/CvButton/index.js

@@ -0,0 +1,7 @@
+import CvButton from './CvButton.vue';
+import CvIconButton from './CvIconButton.vue';
+import CvButtonSet from './CvButtonSet.vue';
+import CvButtonConsts from './consts';
+
+export { CvButton, CvButtonConsts, CvButtonSet, CvIconButton };
+export default CvButton;

package/src/components/CvButton/sbBtnPrefix.js

@@ -0,0 +1,2 @@
+/* istanbul ignore next */
+export const sbBtnPrefix = 'CvButtons';

package/src/components/CvCheckbox/CvCheckbox.stories.js

@@ -0,0 +1,111 @@
+import {
+  sbCompPrefix,
+  storybookControlsFromProps,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+import { CvCheckbox } from '.';
+import { action } from '@storybook/addon-actions';
+import { props as propsCvCheck } from '../../use/cvCheck';
+import { ref } from 'vue';
+
+export default {
+  title: `${sbCompPrefix}/CvCheckbox`,
+  component: CvCheckbox,
+  argTypes: {
+    ...storybookControlsFromProps(propsCvCheck),
+    label: { description: 'checkbox label' },
+    value: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+    },
+    hideLabel: {
+      description:
+        'makes the label visually hidden but still labels the checkbox',
+    },
+    mixed: {
+      type: 'boolean',
+      description: 'if true aria-checkbox set to mixed if checked is false',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+    },
+    change: { description: 'emitted when state changes' },
+    modelValue: {
+      table: {
+        disable: true,
+      },
+    },
+    name: {
+      table: {
+        disable: true,
+      },
+    },
+    checked: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+    },
+  },
+};
+
+const template = `
+<cv-checkbox @change="onChange" v-bind='args' >
+</cv-checkbox>
+  `;
+const Template = args => {
+  return {
+    components: { CvCheckbox },
+    setup: () => ({ args, onChange: action('change') }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = { label: 'checkbox', value: 'check-1' };
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+// v-model story
+const modelValue = ref(false);
+const templateVModel = `<div>
+<cv-checkbox @change="onChange" v-bind='args' v-model="modelValue">
+</cv-checkbox>
+<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" @change="(ev) => {modelValue = ev.currentTarget.checked}" />
+<div>Checked: <span style="font-weight: bold;">{{modelValue}}</span></div>
+</div>
+</div>
+  `;
+
+const TemplateVModel = args => {
+  return {
+    components: { CvCheckbox },
+    setup: () => ({
+      args,
+      modelValue,
+      onChange: action('change'),
+    }),
+    template: templateVModel,
+  };
+};
+export const vModel = TemplateVModel.bind({});
+vModel.args = {
+  label: 'checkbox',
+  value: 'check-1',
+};
+vModel.parameters = storyParametersObject(
+  vModel.parameters,
+  templateVModel,
+  vModel.args
+);

package/src/components/CvCheckbox/CvCheckbox.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="cv-checkbox"
+    :class="[
+      `${carbonPrefix}--checkbox--${inline ? 'inline' : 'wrapper'}`,
+      { [`${carbonPrefix}--form-item`]: formItem },
+    ]"
+  >
+    <input
+      ref="input"
+      v-bind="$attrs"
+      type="checkbox"
+      :class="`${carbonPrefix}--checkbox`"
+      :checked="isChecked === true"
+      :aria-checked="`${isChecked}`"
+      @focus="onFocus"
+      @blur="onBlur"
+      @change="onChange"
+      :value="value"
+      :id="cvId"
+    /><label
+      :for="cvId"
+      :class="[
+        `${carbonPrefix}--checkbox-label`,
+        {
+          [`${carbonPrefix}--label--disabled`]:
+            $attrs.disabled !== undefined && this.$attrs.disabled,
+          [`${carbonPrefix}--checkbox-label__focus`]: hasFocus,
+        },
+      ]"
+      ><span
+        :class="[
+          `${carbonPrefix}--checkbox-label-text`,
+          { [`${carbonPrefix}--visually-hidden`]: hideLabel },
+        ]"
+        dir="auto"
+        >{{ label }}</span
+      ></label
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref, toRefs } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { useCheck, props as propsCvCheck } from '../../use/cvCheck';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+
+const props = defineProps({
+  hideLabel: { type: Boolean, default: null },
+  label: { type: String, default: null },
+  formItem: { type: Boolean, default: true },
+  inline: { type: Boolean, default: false },
+  ...propsCvCheck,
+  ...propsCvId,
+});
+
+// Track focus
+let hasFocus = ref(false);
+function onFocus() {
+  hasFocus = true;
+}
+function onBlur() {
+  hasFocus = false;
+}
+
+const cvId = useCvId(props);
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const { onChange, isChecked } = useCheck(toRefs(props), emit);
+</script>
+
+<style scoped></style>

package/src/components/CvCheckbox/index.js

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

package/src/components/CvCodeSnippet/CvCodeSnippet.stories.js

@@ -0,0 +1,181 @@
+import { carbonPrefix } from '../../global/settings';
+import {
+  sbCompPrefix,
+  splitSlotArgs,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+
+import { CvCodeSnippet, CvCodeSnippetSkeleton } from '.';
+import CvCodeSnippetConsts from './consts';
+
+import './CvCodeSnippet.stories.scss';
+
+export default {
+  title: `${sbCompPrefix}/CvCodeSnippet`,
+  component: CvCodeSnippet,
+  argTypes: {
+    default: { control: { type: 'text' } },
+    kind: {
+      control: { type: 'select' },
+      options: CvCodeSnippetConsts.codeSnippetKinds,
+      defaultValue: CvCodeSnippetConsts.codeSnippetKinds[0],
+      table: {
+        defaultValue: {
+          summary: `'${CvCodeSnippetConsts.codeSnippetKinds[0]}'`,
+        },
+      },
+    },
+  },
+};
+
+const template = `
+<div class="code-snippet-story" :class="{ '${carbonPrefix}--tile': args.light }">
+  <small v-if="args.light">
+    The snippet container should never be the same color as the page background.<br />
+    Do not use the <cv-code-snippet kind="inline" :light="true" :hide-copy-button="true">light</cv-code-snippet> variant on <cv-code-snippet kind="inline" :light="true" :hide-copy-button="true">$ui-background</cv-code-snippet> or <cv-code-snippet kind="inline" :light="true" :hide-copy-button="true">$ui-02</cv-code-snippet>.
+  </small>
+  <cv-code-snippet v-bind="args" @copy="copy">{{ slotArgs.default }}</cv-code-snippet>
+</div>
+`;
+const Template = argsIn => {
+  const { args, slotArgs } = splitSlotArgs(argsIn, ['default']);
+
+  return {
+    components: { CvCodeSnippet },
+    setup: () => ({ args, slotArgs, copy: action('copy') }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  kind: CvCodeSnippetConsts.codeSnippetKinds[0],
+  default:
+    'yarn add carbon-components@latest carbon-components-react@latest @carbon/icons-react@latest carbon-icons@latest',
+  ariaLabel: 'Container label',
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  '<cv-code-snippet v-bind="args" @copy="copy">{{ slotArgs.default }}</cv-code-snippet>',
+  Default.args
+);
+
+export const Oneline = Template.bind({});
+Oneline.args = {
+  kind: CvCodeSnippetConsts.codeSnippetKinds[0],
+  default:
+    'yarn add carbon-components@latest carbon-components-react@latest @carbon/icons-react@latest carbon-icons@latest',
+  ariaLabel: 'Container label',
+};
+Oneline.argTypes = {
+  wrapText: { table: { disable: true } },
+  lessText: { table: { disable: true } },
+  moreText: { table: { disable: true } },
+  minCollapsedNumberOfRows: { table: { disable: true } },
+  maxCollapsedNumberOfRows: { table: { disable: true } },
+  minExpandedNumberOfRows: { table: { disable: true } },
+  maxExpandedNumberOfRows: { table: { disable: true } },
+};
+Oneline.parameters = storyParametersObject(
+  Oneline.parameters,
+  template,
+  Oneline.args
+);
+
+export const Multiline = Template.bind({});
+Multiline.args = {
+  kind: CvCodeSnippetConsts.codeSnippetKinds[1],
+  default: `"scripts": {
+    "build": "lerna run build --stream --prefix --npm-client yarn",
+    "ci-check": "carbon-cli ci-check",
+    "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+    "doctoc": "doctoc --title '## Table of Contents'",
+    "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+    "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+    "lint": "eslint actions config codemods packages",
+    "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+    "sync": "carbon-cli sync",
+    "test": "cross-env BABEL_ENV=test jest",
+    "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+  },
+  "resolutions": {
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-is": "~16.9.0",
+    "react-test-renderer": "~16.9.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-export-default-from": "^7.7.4",
+    "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.10.0",
+    "@babel/preset-react": "^7.10.0",
+    "@babel/runtime": "^7.10.0",
+    "@commitlint/cli": "^8.3.5",`,
+};
+Multiline.parameters = storyParametersObject(
+  Multiline.parameters,
+  template,
+  Multiline.args
+);
+
+export const Inline = Template.bind({});
+Inline.args = {
+  kind: CvCodeSnippetConsts.codeSnippetKinds[2],
+  default: 'node -v',
+};
+Inline.argTypes = {
+  ariaLabel: { table: { disable: true } },
+  wrapText: { table: { disable: true } },
+  lessText: { table: { disable: true } },
+  moreText: { table: { disable: true } },
+  minCollapsedNumberOfRows: { table: { disable: true } },
+  maxCollapsedNumberOfRows: { table: { disable: true } },
+  minExpandedNumberOfRows: { table: { disable: true } },
+  maxExpandedNumberOfRows: { table: { disable: true } },
+};
+Inline.parameters = storyParametersObject(
+  Inline.parameters,
+  template,
+  Inline.args
+);
+
+const skeletonTemplate = `
+<div class="code-snippet-story" :class="{ '${carbonPrefix}--tile': args.light }">
+  <small v-if="args.light">
+    The snippet container should never be the same color as the page background.<br />
+    Do not use the <cv-code-snippet kind="inline" :light="true" :hide-copy-button="true">light</cv-code-snippet> variant on <cv-code-snippet kind="inline" :light="true" :hide-copy-button="true">$ui-background</cv-code-snippet> or <cv-code-snippet kind="inline" :light="true" :hide-copy-button="true">$ui-02</cv-code-snippet>.
+  </small>
+  <cv-code-snippet-skeleton v-bind="args" />
+</div>
+`;
+const SkeletonTemplate = args => ({
+  components: { CvCodeSnippet, CvCodeSnippetSkeleton },
+  setup: () => ({ args }),
+  template: skeletonTemplate,
+});
+
+export const Skeleton = SkeletonTemplate.bind({});
+Skeleton.argTypes = {
+  kind: { options: CvCodeSnippetConsts.codeSnippetKinds.slice(0, 2) },
+  copyFeedback: { table: { disable: true } },
+  copyFeedbackTimeout: { table: { disable: true } },
+  hideCopyButton: { table: { disable: true } },
+  disabled: { table: { disable: true } },
+  ariaLabel: { table: { disable: true } },
+  wrapText: { table: { disable: true } },
+  lessText: { table: { disable: true } },
+  moreText: { table: { disable: true } },
+  minCollapsedNumberOfRows: { table: { disable: true } },
+  maxCollapsedNumberOfRows: { table: { disable: true } },
+  minExpandedNumberOfRows: { table: { disable: true } },
+  maxExpandedNumberOfRows: { table: { disable: true } },
+};
+Skeleton.parameters = storyParametersObject(
+  Skeleton.parameters,
+  `<cv-code-snippet-skeleton v-bind="args" />`,
+  Skeleton.args
+);

package/src/components/CvCodeSnippet/CvCodeSnippet.stories.scss

@@ -0,0 +1,4 @@
+.code-snippet-story > small {
+  display: block;
+  margin-bottom: 1rem;
+}