@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvGrid/GvGrid.stories.mdx

@@ -0,0 +1,217 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import CvGrid from "./CvGrid.vue";
+import CvRow from "./CvRow.vue";
+import CvColumn from "./CvColumn.vue";
+import SbContainer from "./_SbContainer.vue";
+
+<Meta title={`${sbCompPrefix}/CvGrid`}
+      component={CvGrid}
+      decorators={[() => ({
+        components: { SbContainer, Story },
+        template: `<SbContainer><story/></SbContainer>`,
+      })]}
+/>
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvGrid,CvRow,CvColumn,SbContainer
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      ...args,
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+<cv-grid :full-width="fullWidth" :kind="kind">
+  <cv-row>
+    <cv-column><div>span 25%</div></cv-column>
+    <cv-column><div>span 25%</div></cv-column>
+    <cv-column><div>span 25%</div></cv-column>
+    <cv-column><div>span 25%</div></cv-column>
+  </cv-row>
+</cv-grid>
+`;
+const rowOptionsTemplate = `
+<cv-grid>
+  <cv-row :kind="rowKind1">
+    <cv-column><div><h3>{{rowKind1}}</h3></div></cv-column>
+    <cv-column><div>Elora Danan</div></cv-column>
+    <cv-column><div>Queen Bavmorda</div></cv-column>
+    <cv-column><div>Willow Ufgood</div></cv-column>
+  </cv-row>
+  <cv-row :kind="rowKind2">
+    <cv-column><div><h3>{{rowKind2}}</h3></div></cv-column>
+    <cv-column><div>Jade Claymore</div></cv-column>
+    <cv-column><div>Graydon Hastur</div></cv-column>
+    <cv-column><div>Thraxus Boorman</div></cv-column>
+  </cv-row>
+  <cv-row :kind="rowKind3">
+    <cv-column><div><h3>{{rowKind3}}</h3></div></cv-column>
+    <cv-column><div>Madmartigan</div></cv-column>
+    <cv-column><div>Princess Kit</div></cv-column>
+    <cv-column><div>Airk Tanthalos</div></cv-column>
+  </cv-row>
+</cv-grid>
+`
+const responsiveTemplate = `
+<cv-grid>
+  <cv-row>
+    <cv-column :sm="2" :md="4" :lg="6"><div>
+      <p>small: span 2 of 4</p>
+      <p>medium: span 4 of 8</p>
+      <p>large: span 6 of 12</p>
+    </div></cv-column>
+    <cv-column :sm="2" :md="2" :lg="3"><div>
+      <p>small: span 2 of 4</p>
+      <p>medium: span 2 of 8</p>
+      <p>large: span 3 of 12</p>
+    </div></cv-column>
+    <cv-column :sm="0" :md="2" :lg="3"><div>
+      <p>small: span 0 (hidden at this break point) of 4</p>
+      <p>medium: span 2 of 8</p>
+      <p>large: span 3 of 12</p>
+    </div></cv-column>
+  </cv-row>
+</cv-grid>
+`
+const offsetTemplate = `
+<cv-grid>
+  <cv-row>
+    <cv-column :sm="{ span: 1, offset: 3 }"><div>span 1, offset 3</div></cv-column>
+    <cv-column :sm="{ span: 2, offset: 2 }"><div>span 2, offset 2</div></cv-column>
+    <cv-column :sm="{ span: 3, offset: 1 }"><div>span 3, offset 1</div></cv-column>
+    <cv-column :sm="{ span: 4, offset: 0 }"><div>span 4, offset 0</div></cv-column>
+  </cv-row>
+</cv-grid>
+`
+const startEndTemplate = `
+<cv-grid>
+  <cv-row>
+    <cv-column :sm="{ span: 1, start: 4 }"><div>span 1, start 4</div></cv-column>
+    <cv-column :sm="{ span: 2, end: 5 }"><div>span 2, end 5</div></cv-column>
+    <cv-column :sm="{ start: 1, end: 4 }"><div>start 1, end 5</div></cv-column>
+  </cv-row>
+</cv-grid>
+`
+
+# CvGrid
+
+A Vue utility component for the Carbon Grid
+
+<Canvas isColumn>
+  <h4>Size columns automatically</h4>
+  <h5>Properties:</h5>
+  <ul>
+    <li>fullWidth - Remove the default max width that the grid has set</li>
+    <li>kind - "wide", "narrow", or "condensed"</li>
+  </ul>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      fullWidth: false,
+      kind: 'wide',
+      template: defaultTemplate,
+    }}
+    argTypes={{
+      kind: { control: 'select', default: 'wide', options: ['wide', 'condensed', 'narrow'] },
+    }}
+    >
+    {Template.bind({})}
+  </Story>
+  <hr/>
+  <h4>Row options</h4>
+  <h5>Properties:</h5>
+  <ul>
+    <li>kind - "wide", "narrow", or "condensed". Override the gid setting for a row.</li>
+  </ul>
+  <Story
+    name="Rows"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'kind',
+          'fullWidth',
+        ],
+      },
+      docs: { source: { code: rowOptionsTemplate } },
+    }}
+    args={{
+      rowKind1: 'wide',
+      rowKind2: 'condensed',
+      rowKind3: 'narrow',
+      template: rowOptionsTemplate,
+    }}
+    argTypes={{
+      rowKind1: { control: 'select', default: 'wide', options: ['wide', 'condensed', 'narrow'] },
+      rowKind2: { control: 'select', default: 'condensed', options: ['wide', 'condensed', 'narrow'] },
+      rowKind3: { control: 'select', default: 'narrow', options: ['wide', 'condensed', 'narrow'] },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <hr/>
+  <h4>Responsive</h4>
+  <Story
+    name="Responsive"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'kind',
+          'fullWidth',
+        ],
+      },
+      docs: { source: { code: responsiveTemplate } },
+    }}
+    args={{
+      template: responsiveTemplate,
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <hr/>
+  <h4>Offset - Fun! But useful?</h4>
+  <Story
+    name="Offset"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'kind',
+          'fullWidth',
+        ],
+      },
+      docs: { source: { code: offsetTemplate } },
+    }}
+    args={{
+      template: offsetTemplate,
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+

package/src/components/CvGrid/_SbContainer.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="sb-grid-container">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup></script>
+
+<style>
+.sb-grid-container {
+  width: 100%;
+}
+.sb-grid-container .cv-column {
+  background-color: #d0e2ff; /* blue-20 */
+  outline: 1px dashed #78a9ff; /* blue-40 */
+}
+.sb-grid-container .cv-column div {
+  background-color: #edf5ff; /* blue-10 */
+  min-height: 100px;
+  height: 100%;
+}
+</style>

package/src/components/CvGrid/_cvColumnValidation.js

@@ -0,0 +1,48 @@
+const validSmall = Array(5)
+  .fill(0)
+  .map((val, index) => index);
+const validMedium = Array(9)
+  .fill(0)
+  .map((val, index) => index);
+const validLarge = Array(17)
+  .fill(0)
+  .map((val, index) => index);
+
+/**
+ * Check the breakpoint property
+ * @param {string} breakPoint - valid breakpoint
+ * @param value - property value
+ * @returns {boolean}
+ */
+function columnValidator(breakPoint, value) {
+  if (typeof value === 'number') {
+    switch (breakPoint) {
+      case 'sm':
+        return validSmall.includes(value);
+      case 'md':
+        return validMedium.includes(value);
+      case 'lg':
+      case 'xlg':
+      case 'max':
+        return validLarge.includes(value);
+      default:
+        console.warn(`breakpoint "${breakPoint}" not recognized`);
+        return false;
+    }
+  } else if (typeof value === 'boolean') {
+    return true;
+  } else if (typeof value === 'object') {
+    return (
+      'span' in value &&
+      typeof value.span === 'number' &&
+      validLarge.includes(value.span) &&
+      'offset' in value &&
+      typeof value.offset === 'number' &&
+      validLarge.includes(value.offset)
+    );
+  }
+
+  return false;
+}
+
+export { columnValidator };

package/src/components/CvLink/CvLink.stories.js

@@ -0,0 +1,169 @@
+import {
+  sbCompPrefix,
+  storybookControlsFromProps,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+import { CvLink } from '.';
+import { Download16 } from '@carbon/icons-vue';
+import { props as propsCvLink, linkSizes } from '../../use/cvLink';
+
+export default {
+  title: `${sbCompPrefix}/CvLink`,
+  component: CvLink,
+  argTypes: {
+    ...storybookControlsFromProps(propsCvLink),
+    disabled: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      defaultValue: false,
+      description: 'Toogle anchor / router-link disable state.',
+    },
+    inline: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      defaultValue: false,
+      description:
+        'Specify whether you want the inline version of this control.',
+    },
+    href: {
+      type: 'string',
+      table: {
+        type: { summary: 'string' },
+        category: 'props',
+      },
+      description: 'Provide the href attribute for the `<a>` node.',
+    },
+    to: {
+      type: 'string',
+      table: {
+        type: {
+          summary:
+            'string, object (see vue-router documentation for router-link)',
+        },
+        category: 'props',
+      },
+      description:
+        "Replace `<a>` node for vue-router's `router-link`, providing `to` property to it. Cannot be used with href.",
+    },
+    visited: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      defaultValue: false,
+      description:
+        'Specify whether you want the link to receive visited styles after the link has been clicked.',
+    },
+    size: {
+      type: 'string',
+      table: {
+        type: { summary: linkSizes.join(' | ') },
+        defaultValue: { summary: 'medium (md)' },
+        category: 'props',
+      },
+      options: linkSizes,
+      control: {
+        type: 'select',
+        labels: {
+          sm: 'small (sm)',
+          md: 'medium (md)',
+          lg: 'large (lg)',
+        },
+      },
+      defaultValue: 'md',
+      description:
+        'Specify the size of the Link. Currently supports either `sm`, `md` (default) or `lg` as an option.',
+    },
+    icon: {
+      table: {
+        type: { summary: 'string | object' },
+        category: 'props',
+      },
+      control: { type: null },
+      description:
+        'Render an icon next to the link. Can be a component object or a svg string',
+    },
+    default: {
+      type: 'string',
+      table: {
+        type: { summary: 'html' },
+        category: 'slots',
+      },
+      description: 'Inner `<a>` node / router-link content.',
+    },
+  },
+};
+
+const template = `<cv-link href='#' v-bind='args'>{{ args.default }}</cv-link>`;
+const Template = args => {
+  return {
+    components: { CvLink },
+    setup: () => ({ args }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = { default: 'Link' };
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const Disabled = Template.bind({});
+Disabled.args = { default: 'Disabled link', disabled: true };
+Disabled.parameters = storyParametersObject(
+  Disabled.parameters,
+  template,
+  Disabled.args
+);
+
+const inlineTemplate = `
+<p>
+  Ut facilisis semper lorem in aliquet. Aliquam accumsan ante justo, vitae
+  fringilla eros vehicula id. Ut at enim quis libero pharetra ullamcorper.
+  Maecenas feugiat sodales arcu ut porttitor. In blandit ultricies est.
+  Vivamus risus massa, cursus eu tellus sed, sagittis commodo nunc.
+  <cv-link href="#" v-bind='args'>{{ args.default }}</cv-link>,
+  finibus suscipit nunc. Phasellus ex quam, placerat quis tempus sit amet,
+  pretium nec sem. Etiam dictum scelerisque mauris, blandit ultrices erat
+  pellentesque id. Quisque venenatis purus sit amet sodales condimentum.
+  Duis at tincidunt orci. Ut velit ipsum, lacinia at ex quis, aliquet
+  rhoncus purus. Praesent et scelerisque ligula.
+</p>
+`;
+const InlineTemplate = args => {
+  return {
+    components: { CvLink },
+    setup: () => ({ args }),
+    template: inlineTemplate,
+  };
+};
+
+export const Inline = InlineTemplate.bind({});
+Inline.args = {
+  default: 'Maecenas nunc mauris, consequat quis mauris sit amet',
+  inline: true,
+};
+Inline.parameters = storyParametersObject(
+  Inline.parameters,
+  inlineTemplate,
+  Inline.args
+);
+
+export const PariedWithIcon = Template.bind({});
+PariedWithIcon.args = { default: 'Download', icon: Download16 };
+PariedWithIcon.parameters = storyParametersObject(
+  PariedWithIcon.parameters,
+  template,
+  PariedWithIcon.args
+);

package/src/components/CvLink/CvLink.vue

@@ -0,0 +1,38 @@
+<template>
+  <component
+    :is="tagType"
+    v-bind="linkProps"
+    class="cv-link"
+    :class="[
+      `${carbonPrefix}--link`,
+      {
+        [`${carbonPrefix}--link--disabled`]: disabled,
+        [`${carbonPrefix}--link--inline`]: inline,
+        [`${carbonPrefix}--link--visited`]: visited,
+        [`${carbonPrefix}--link--${size}`]: size,
+      },
+    ]"
+  >
+    <slot></slot>
+    <CvSvg v-if="icon" :class="`${carbonPrefix}--link__icon`" :svg="icon" />
+  </component>
+</template>
+
+<script setup>
+import CvSvg from '../CvSvg/_CvSvg.vue';
+import { carbonPrefix } from '../../global/settings';
+import {
+  props as linkPropsDefinition,
+  useLinkProps,
+  useTagType,
+} from '../../use/cvLink';
+
+const props = defineProps({
+  icon: { type: [String, Object] },
+  inline: Boolean,
+  visited: Boolean,
+  ...linkPropsDefinition,
+});
+const linkProps = useLinkProps(props);
+const tagType = useTagType(props);
+</script>

package/src/components/CvLink/index.js

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

package/src/components/CvList/CvList.stories.js

@@ -0,0 +1,88 @@
+import { CvList, CvListItem } from '.';
+
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+export default {
+  title: `${sbCompPrefix}/CvList`,
+  component: CvList,
+  argTypes: {
+    ordered: {
+      control: { type: 'boolean' },
+    },
+    nested: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template = `<cv-list v-bind="args">
+  <cv-list-item>List item 1</cv-list-item>
+  <cv-list-item>List item 2</cv-list-item>
+  <cv-list-item>List item 3</cv-list-item>
+</cv-list>`;
+const Template = args => ({
+  components: { CvList, CvListItem },
+  setup: () => ({ args }),
+  template,
+});
+
+export const Unordered = Template.bind({});
+Unordered.args = {};
+Unordered.parameters = storyParametersObject(
+  Unordered.parameters,
+  template,
+  Unordered.args
+);
+
+export const Ordered = Template.bind({});
+Ordered.args = {
+  ordered: true,
+};
+Ordered.parameters = storyParametersObject(
+  Ordered.parameters,
+  template,
+  Ordered.args
+);
+
+const nestedTemplate = `<cv-list v-bind="args">
+  <cv-list-item>
+    List with no internal order
+    <cv-list nested>
+      <cv-list-item>Nested item 1</cv-list-item>
+      <cv-list-item>Nested item 2</cv-list-item>
+      <cv-list-item>Nested item 3</cv-list-item>
+    </cv-list>
+  </cv-list-item>
+  <cv-list-item>
+    List with ordered = false
+    <cv-list nested :ordered="false">
+      <cv-list-item>Nested item 1</cv-list-item>
+      <cv-list-item>Nested item 2</cv-list-item>
+      <cv-list-item>Nested item 3</cv-list-item>
+    </cv-list>
+  </cv-list-item>
+  <cv-list-item>
+    List with opposite ordering
+    <cv-list nested :ordered="!args.ordered">
+      <cv-list-item>Nested item 1</cv-list-item>
+      <cv-list-item>Nested item 2</cv-list-item>
+      <cv-list-item>Nested item 3</cv-list-item>
+    </cv-list>
+  </cv-list-item>
+</cv-list>`;
+const NestedTemplate = args => ({
+  components: { CvList, CvListItem },
+  setup: () => ({ args }),
+  template: nestedTemplate,
+});
+
+export const Nested = NestedTemplate.bind({});
+Nested.args = {};
+Nested.parameters = storyParametersObject(
+  Nested.parameters,
+  nestedTemplate,
+  Nested.args
+);

package/src/components/CvList/CvList.vue

@@ -0,0 +1,50 @@
+<template>
+  <component
+    :is="listType"
+    :class="{
+      [`${carbonPrefix}--list--nested`]: nested,
+      [`${carbonPrefix}--list--ordered`]: isActuallyOrdered,
+      [`${carbonPrefix}--list--unordered`]: !isActuallyOrdered,
+    }"
+  >
+    <slot />
+  </component>
+</template>
+
+<script>
+import { getCurrentInstance, computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvList',
+  props: {
+    /** Is the list ordered? */
+    ordered: {
+      type: Boolean,
+      default: undefined,
+    },
+    /** Is this list nested in another list? */
+    nested: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const instance = getCurrentInstance();
+
+    const isActuallyOrdered = computed(() => {
+      if (props.nested && props.ordered === undefined) {
+        if (instance.parent?.parent?.type.name === instance.type.name) {
+          return instance.parent?.parent?.setupState.isActuallyOrdered;
+        }
+      }
+
+      return props.ordered || false;
+    });
+
+    const listType = computed(() => (isActuallyOrdered.value ? 'ol' : 'ul'));
+
+    return { carbonPrefix, isActuallyOrdered, listType };
+  },
+};
+</script>

package/src/components/CvList/CvListItem.vue

@@ -0,0 +1,12 @@
+<template>
+  <li :class="`${carbonPrefix}--list__item`"><slot /></li>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+
+export default {
+  name: 'CvListItem',
+  setup: () => ({ carbonPrefix }),
+};
+</script>

package/src/components/CvList/index.js

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