@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvAspectRatio/CvAspectRatio.stories.js

@@ -0,0 +1,56 @@
+import { h } from 'vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+import { CvAspectRatio, CvAspectRatioConsts } from '.';
+
+import './CvAspectRatio.stories.scss';
+
+export default {
+  title: `${sbCompPrefix}/CvAspectRatio`,
+  component: CvAspectRatio,
+  decorators: [
+    story => h('div', { class: 'aspect-ratio-story' }, story().render()),
+  ],
+  argTypes: {
+    ratio: {
+      control: { type: 'select' },
+      options: CvAspectRatioConsts.aspectRatios,
+      defaultValue: CvAspectRatioConsts.aspectRatios[0],
+      table: {
+        defaultValue: { summary: `"${CvAspectRatioConsts.aspectRatios[0]}"` },
+      },
+    },
+    width: {
+      control: { type: 'range', min: 200, max: 500 },
+      description: 'Width of container around `CvAspectRatio`',
+    },
+  },
+};
+
+const template = `<div class="width-container" :style="{ width: args.width + 'px' }">Container width: {{ args.width }}px
+  <cv-aspect-ratio v-bind="args">
+    Content<br />
+    Width-based only!
+  </cv-aspect-ratio>
+</div>
+`;
+const Template = args => {
+  return {
+    components: { CvAspectRatio },
+    setup: () => ({ args }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  width: 200,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

package/src/components/CvAspectRatio/CvAspectRatio.stories.scss

@@ -0,0 +1,4 @@
+.aspect-ratio-story .bx--aspect-ratio {
+  padding: 1rem;
+  background-color: rgb(247, 241, 255);
+}

package/src/components/CvAspectRatio/CvAspectRatio.vue

@@ -0,0 +1,33 @@
+<template>
+  <component
+    :is="as"
+    :class="[
+      `${carbonPrefix}--aspect-ratio`,
+      `${carbonPrefix}--aspect-ratio--${ratio}`,
+    ]"
+  >
+    <slot />
+  </component>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+import { aspectRatios } from './consts';
+import { includesOrError } from '../../global/component-utils/validators';
+
+export default {
+  name: 'CvAspectRatio',
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+    ratio: {
+      type: String,
+      default: aspectRatios[0],
+      validator: includesOrError(aspectRatios, 'CvAspectRatio', 'ratio'),
+    },
+  },
+  setup: () => ({ carbonPrefix }),
+};
+</script>

package/src/components/CvAspectRatio/consts.js

@@ -0,0 +1,2 @@
+export const aspectRatios = ['1x1', '1x2', '2x1', '3x4', '4x3', '9x16', '16x9'];
+export default { aspectRatios };

package/src/components/CvAspectRatio/index.js

@@ -0,0 +1,4 @@
+import CvAspectRatio from './CvAspectRatio';
+import CvAspectRatioConsts from './consts';
+export { CvAspectRatio, CvAspectRatioConsts };
+export default CvAspectRatio;

package/src/components/CvBreadcrumb/CvBreadcrumb.stories.js

@@ -0,0 +1,75 @@
+import {
+  CvBreadcrumb,
+  CvBreadcrumbItem,
+  CvBreadcrumbSkeleton,
+  CvBreadcrumbSkeletonItem,
+} from '.';
+
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+export default {
+  title: `${sbCompPrefix}/CvBreadcrumb`,
+  component: CvBreadcrumb,
+  argTypes: {
+    ariaLabel: {
+      control: { type: 'text' },
+      defaultValue: CvBreadcrumb.props.ariaLabel.default,
+      table: {
+        defaultValue: { summary: `"${CvBreadcrumb.props.ariaLabel.default}"` },
+      },
+    },
+    noTrailingSlash: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template = `<cv-breadcrumb v-bind="args">
+  <cv-breadcrumb-item>Breadcrumb 1</cv-breadcrumb-item>
+  <cv-breadcrumb-item>Breadcrumb 2</cv-breadcrumb-item>
+  <cv-breadcrumb-item>Breadcrumb 3</cv-breadcrumb-item>
+</cv-breadcrumb>`;
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CvBreadcrumb, CvBreadcrumbItem },
+  setup() {
+    return { args };
+  },
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+const skeletonTemplate = `<cv-breadcrumb-skeleton v-bind="args">
+  <cv-breadcrumb-skeleton-item />
+  <cv-breadcrumb-skeleton-item />
+  <cv-breadcrumb-skeleton-item />
+</cv-breadcrumb-skeleton>`;
+const SkeletonTemplate = args => ({
+  props: ['noTrailingSlash'],
+  components: { CvBreadcrumbSkeleton, CvBreadcrumbSkeletonItem },
+  setup() {
+    return { args };
+  },
+  template: skeletonTemplate,
+});
+
+export const Skeleton = SkeletonTemplate.bind({});
+Skeleton.args = {};
+Skeleton.argTypes = {
+  ariaLabel: { table: { disable: true } },
+};
+Skeleton.parameters = storyParametersObject(
+  Skeleton.parameters,
+  template,
+  Skeleton.args
+);

package/src/components/CvBreadcrumb/CvBreadcrumb.vue

@@ -0,0 +1,37 @@
+<template>
+  <nav :aria-label="ariaLabel">
+    <ol
+      :class="[
+        `${carbonPrefix}--breadcrumb`,
+        { [`${carbonPrefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash },
+      ]"
+    >
+      <slot />
+    </ol>
+  </nav>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvBreadcrumb',
+  props: {
+    /**
+     * A11y label
+     */
+    ariaLabel: {
+      type: String,
+      default: 'Breadcrumb',
+    },
+    /**
+     * Stop trailing slash from being added
+     */
+    noTrailingSlash: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup: () => ({ carbonPrefix }),
+};
+</script>

package/src/components/CvBreadcrumb/CvBreadcrumbItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <li
+    :class="[
+      `${carbonPrefix}--breadcrumb-item`,
+      { [`${carbonPrefix}--breadcrumb-item--current`]: isCurrentPage },
+    ]"
+  >
+    <slot />
+  </li>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvBreadcrumbItem',
+  props: {
+    /**
+     * Is this item the current page?
+     */
+    isCurrentPage: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup: () => ({ carbonPrefix }),
+};
+</script>

package/src/components/CvBreadcrumb/CvBreadcrumbSkeleton.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--breadcrumb`,
+      `${carbonPrefix}--skeleton`,
+      { [`${carbonPrefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash },
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvBreadcrumbSkeleton',
+  props: {
+    /**
+     * Stop trailing slash from being added
+     */
+    noTrailingSlash: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup: () => ({ carbonPrefix }),
+};
+</script>

package/src/components/CvBreadcrumb/CvBreadcrumbSkeletonItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <div :class="`${carbonPrefix}--breadcrumb-item`">
+    <span :class="`${carbonPrefix}--link`">&nbsp;</span>
+  </div>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvBreadcrumbSkeletonItem',
+  setup: () => ({ carbonPrefix }),
+};
+</script>

package/src/components/CvBreadcrumb/index.js

@@ -0,0 +1,11 @@
+import CvBreadcrumb from './CvBreadcrumb.vue';
+import CvBreadcrumbItem from './CvBreadcrumbItem.vue';
+import CvBreadcrumbSkeleton from './CvBreadcrumbSkeleton.vue';
+import CvBreadcrumbSkeletonItem from './CvBreadcrumbSkeletonItem.vue';
+export {
+  CvBreadcrumb,
+  CvBreadcrumbItem,
+  CvBreadcrumbSkeleton,
+  CvBreadcrumbSkeletonItem,
+};
+export default CvBreadcrumb;

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

@@ -0,0 +1,119 @@
+import { action } from '@storybook/addon-actions';
+import { CvButton } from './';
+import { buttonKinds, buttonSizes } from './consts';
+import {
+  sbCompPrefix,
+  splitSlotArgs,
+  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}/CvButton`,
+  component: CvButton,
+  argTypes: {
+    ...storybookControlsFromProps(commonCvButtonProps),
+    default: { control: { type: 'text' } },
+    icon: { control: { type: 'select', options: Object.keys(icons) } },
+    kind: {
+      control: { type: 'select', options: buttonKinds },
+      defaultValue: CvButton.props.kind.default,
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: buttonSizes,
+      },
+      defaultValue: CvButton.props.size.default,
+    },
+  },
+};
+
+const template = `<cv-button @click="onClick" v-bind="args">{{slotArgs.default}}</cv-button>`;
+const Template = (argsIn, { argTypes }) => {
+  let { args, slotArgs } = splitSlotArgs(argsIn, ['default']);
+  args = { ...args, icon: icons[args.icon] };
+
+  return {
+    props: Object.keys(argTypes),
+    components: { CvButton },
+    setup() {
+      return { args, onClick: action('click'), slotArgs };
+    },
+    template,
+  };
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  kind: 'primary',
+  default: 'Primary',
+};
+Primary.parameters = storyParametersObject(
+  Primary.parameters,
+  template,
+  Primary.args
+);
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  kind: 'secondary',
+  default: 'Secondary',
+};
+Secondary.parameters = storyParametersObject(
+  Secondary.parameters,
+  template,
+  Secondary.args
+);
+
+export const Field = Template.bind({});
+Field.args = {
+  'slotArgs.default': 'Field size',
+  size: 'field',
+};
+Field.parameters = storyParametersObject(
+  Field.parameters,
+  template,
+  Field.args
+);
+
+export const Small = Template.bind({});
+Small.args = {
+  'slotArgs.default': 'sm',
+  size: 'sm',
+};
+Small.parameters = storyParametersObject(
+  Small.parameters,
+  template,
+  Small.args
+);
+
+export const Large = Template.bind({});
+Large.args = {
+  'slotArgs.default': 'Large size',
+  size: 'lg',
+};
+Large.parameters = storyParametersObject(
+  Large.parameters,
+  template,
+  Large.args
+);

package/src/components/CvButton/CvButton.vue

@@ -0,0 +1,68 @@
+<template>
+  <button
+    :class="buttonClasses"
+    :disabled="disabled || skeleton"
+    @click="$emit('click', $event)"
+  >
+    <!-- @slot Default content of button -->
+    <slot v-if="!skeleton" />
+
+    <cv-svg
+      v-if="!skeleton && icon"
+      :svg="icon"
+      :class="`${carbonPrefix}--btn__icon`"
+    />
+  </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: 'CvButton',
+  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,
+    /**
+     * Size of the button
+     */
+    size,
+    /**
+     * skeleton - shows the skeleton version of the button
+     */
+    skeleton: Boolean,
+  },
+  setup(props) {
+    const { buttonClasses } = useCvButtonCommon(
+      props.kind,
+      props.size,
+      props.skeleton
+    );
+
+    return {
+      buttonClasses,
+      carbonPrefix,
+    };
+  },
+};
+</script>

package/src/components/CvButton/CvButtonCommon.js

@@ -0,0 +1,75 @@
+import { computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { buttonKinds, buttonSizes } from './consts.js';
+
+export const props = {
+  /**
+   * disabled by property or if skeleton
+   */
+  disabled: Boolean,
+
+  icon: {
+    type: [String, Object],
+    default: undefined,
+  },
+  kind: {
+    type: String,
+    default: 'primary',
+    validator: val => {
+      const valid = buttonKinds.includes(val);
+      if (!valid) {
+        console.error(
+          `Invalid button kind specified "${val}". Valid values are [${buttonKinds}]`
+        );
+      }
+      return valid;
+    },
+  },
+  size: {
+    type: String,
+    default: '',
+    validator: val => {
+      const valid = buttonSizes.includes(val);
+      if (!valid) {
+        console.error(
+          `Invalid button size specified "${val}". Valid values are [${buttonSizes.slice(
+            1
+          )}]`
+        );
+      }
+      return valid;
+    },
+  },
+};
+
+export const useCvButtonCommon = (
+  kind,
+  size,
+  skeleton = false,
+  iconOnly = false
+) => {
+  const buttonClasses = computed(() => {
+    const classes = [`${carbonPrefix}--btn`];
+
+    if (skeleton) {
+      classes.push(`${carbonPrefix}--skeleton`);
+    }
+
+    if (iconOnly) {
+      classes.push(`${carbonPrefix}--btn--icon-only`);
+    }
+
+    if (kind && !skeleton) {
+      classes.push(`${carbonPrefix}--btn--${kind.toLowerCase()}`);
+    }
+
+    if (size) {
+      const _size = size === 'small' ? 'sm' : size;
+      classes.push(`${carbonPrefix}--btn--${_size}`);
+    }
+
+    return classes;
+  });
+
+  return { buttonClasses };
+};

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

@@ -0,0 +1,36 @@
+import { CvButtonSet, CvButton } from './';
+
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { sbBtnPrefix } from './sbBtnPrefix';
+
+export default {
+  title: `${sbCompPrefix}/${sbBtnPrefix}/CvButtonSet`,
+  component: CvButtonSet,
+};
+
+const template = `
+<cv-button-set v-bind="args">
+  <cv-button>One</cv-button>
+  <cv-button kind="secondary">Two</cv-button>
+  <cv-button kind="danger">Three</cv-button>
+</cv-button-set>`;
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvButtonSet, CvButton },
+    template,
+    setup() {
+      return { args };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

package/src/components/CvButton/CvButtonSet.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--btn-set`,
+      { [`${carbonPrefix}--btn-set--stacked`]: stacked },
+    ]"
+  >
+    <!-- @slot Default content of button set, expects buttons -->
+    <slot />
+  </div>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvButtonSet',
+  props: {
+    /**
+     * Button set stacked vertically
+     */
+    stacked: Boolean,
+  },
+  setup() {
+    return {
+      carbonPrefix,
+    };
+  },
+};
+</script>