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

package/src/components/CvStructuredList/CvStructuredList.stories.js

@@ -0,0 +1,141 @@
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import {
+  CvStructuredList,
+  CvStructuredListHeading,
+  CvStructuredListData,
+  CvStructuredListItem,
+} from '.';
+
+export default {
+  title: `${sbCompPrefix}/CvStructuredList`,
+  component: CvStructuredList,
+  argTypes: {
+    selectable: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Makes list items selectable (prop on cv-structured-list component)',
+    },
+    condensed: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Condense spacing of the structured list (prop on cv-structured-list component)',
+    },
+    noWrap: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Prevent text wrapping in list data (prop on cv-structured-list-data component)',
+    },
+  },
+};
+
+const DefaultListItems = [
+  {
+    id: 'item-1',
+    data: [
+      'Item_1',
+      'Item_1',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.',
+    ],
+  },
+  {
+    id: 'item-2',
+    data: [
+      'Item_2',
+      'Item_2',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.',
+    ],
+  },
+];
+
+const template = `
+<div>
+  <cv-structured-list v-bind="args">
+    <template v-slot:headings>
+      <cv-structured-list-heading>
+        Heading 1
+      </cv-structured-list-heading>
+      <cv-structured-list-heading>
+        Heading 2
+      </cv-structured-list-heading>
+      <cv-structured-list-heading>
+        Heading 3
+      </cv-structured-list-heading>
+    </template>
+
+    <template v-slot:items>
+      <cv-structured-list-item v-for="({id, data}, index) in DefaultListItems" :key="index" name="group-1" :value="id" v-model="listValue" @change="onChange">
+        <cv-structured-list-data v-for="(itemData, dataIndex) in data" :key="dataIndex" :no-wrap="args.noWrap">{{ itemData }}</cv-structured-list-data>
+      </cv-structured-list-item>
+    </template>
+  </cv-structured-list>
+
+  <div style="margin-top:1rem; background-color: #888888; padding:1rem" v-if="args.withVModel">
+    <div style="font-size: 150%">Sample interaction</div>
+    <template
+      v-for="({id}, vmodelIndex) in DefaultListItems"
+      :key="vmodelIndex"
+    >
+      <input name="listValue" :id="id" type="radio" @change="(ev) => {listValue = ev.target.id}" :checked="id === listValue" />
+      <label :for="id" style="margin-right: 16px;">{{id}}:</label>
+    </template>
+
+    <div style="margin-top: 16px;">Checked: <span style="font-weight: bold;">{{ listValue }}</span></div>
+  </div>
+</div>
+`;
+
+const Template = args => {
+  return {
+    components: {
+      CvStructuredList,
+      CvStructuredListHeading,
+      CvStructuredListData,
+      CvStructuredListItem,
+    },
+    setup: () => ({
+      args,
+      listValue: ref(DefaultListItems[0].id),
+      DefaultListItems,
+      onChange: action('change'),
+    }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  withVModel: false,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const VModel = Template.bind({});
+VModel.args = {
+  selectable: true,
+  withVModel: true,
+};
+VModel.parameters = storyParametersObject(
+  VModel.parameters,
+  template,
+  VModel.args
+);

package/src/components/CvStructuredList/CvStructuredList.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--structured-list`,
+      {
+        [`${carbonPrefix}--structured-list--selection`]: selectable,
+        [`${carbonPrefix}--structured-list--condensed`]: condensed,
+      },
+    ]"
+    :data-structured-list="selectable"
+  >
+    <div :class="`${carbonPrefix}--structured-list-thead`">
+      <div
+        :class="`${carbonPrefix}--structured-list-row ${carbonPrefix}--structured-list-row--header-row`"
+      >
+        <slot name="headings"></slot>
+        <div
+          v-if="selectable"
+          :class="`${carbonPrefix}--structured-list-th`"
+        ></div>
+      </div>
+    </div>
+    <div :class="`${carbonPrefix}--structured-list-tbody`">
+      <slot name="items"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits, provide } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+
+const props = defineProps({
+  selectable: Boolean,
+  condensed: Boolean,
+});
+
+const emit = defineEmits(['change']);
+
+provide('change', val => {
+  emit('change', val);
+});
+provide('selectable', props.selectable);
+</script>

package/src/components/CvStructuredList/CvStructuredListData.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :class="[
+      `cv-structured-list-data ${carbonPrefix}--structured-list-td`,
+      {
+        [`${carbonPrefix}--structured-list-content--nowrap`]: noWrap,
+      },
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+defineProps({
+  noWrap: Boolean,
+});
+</script>

package/src/components/CvStructuredList/CvStructuredListHeading.vue

@@ -0,0 +1,11 @@
+<template>
+  <div
+    :class="`cv-structured-list-heading ${carbonPrefix}--structured-list-th`"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvStructuredList/CvStructuredListItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <component
+    :is="tagType"
+    v-bind="$attrs"
+    class="cv-structured-list-item"
+    :value="value"
+    :modelValue="modelValue"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script setup>
+import { computed, inject, provide } from 'vue';
+import CvStructuredListItemStandard from './CvStructuredListItemStandard.vue';
+import CvStructuredListItemSelectable from './CvStructuredListItemSelectable.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const selectable = inject('selectable');
+const change = inject('change');
+const emit = defineEmits(['change']);
+
+provide('onRadioItemChange', clickedItemCvId => {
+  emit('change', clickedItemCvId);
+  change(clickedItemCvId); //emit to parent
+});
+
+const tagType = computed(() => {
+  return selectable
+    ? CvStructuredListItemSelectable
+    : CvStructuredListItemStandard;
+});
+</script>

package/src/components/CvStructuredList/CvStructuredListItemSelectable.vue

@@ -0,0 +1,56 @@
+<template>
+  <label
+    :for="cvId"
+    :aria-label="label"
+    :class="[
+      `cv-structured-list-item--selectable ${carbonPrefix}--structured-list-row`,
+      { ' ${carbonPrefix}--structured-list-row--selected': isChecked },
+    ]"
+    tabindex="0"
+  >
+    <slot></slot>
+    <input
+      v-bind="$attrs"
+      tabindex="-1"
+      :id="cvId"
+      :class="`${carbonPrefix}--structured-list-input`"
+      :checked="isChecked"
+      :value="value"
+      type="radio"
+      @change="onChange"
+    />
+    <div :class="`${carbonPrefix}--structured-list-td`">
+      <CheckmarkFilled16 :class="`${carbonPrefix}--structured-list-svg`" />
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, propsCvId, useRadio } from '../../use';
+import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: undefined,
+  },
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: undefined,
+  },
+  ...propsCvId,
+});
+
+const cvId = useCvId(props);
+const emit = defineEmits(['update:modelValue', 'change']);
+const { isChecked, onChange } = useRadio(props, emit);
+</script>

package/src/components/CvStructuredList/CvStructuredListItemStandard.vue

@@ -0,0 +1,11 @@
+<template>
+  <div
+    :class="`cv-structured-list-item--standard ${carbonPrefix}--structured-list-row`"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredList.spec.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredList should render \`headings\` slot correctly 1`] = `
+<div class="bx--structured-list bx--structured-list--selection bx--structured-list--condensed" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="headings-slot-test">Headings slot test</div>
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render \`items\` slot correctly 1`] = `
+<div class="bx--structured-list bx--structured-list--selection bx--structured-list--condensed" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody">
+    <ul class="items-slot-test">
+      <li>Test 1.1</li>
+      <li>Test 1.2</li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when condensed 1`] = `
+<div class="bx--structured-list bx--structured-list--condensed" data-structured-list="false" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when not selectable and not condensed 1`] = `
+<div class="bx--structured-list" data-structured-list="false" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when selectable 1`] = `
+<div class="bx--structured-list bx--structured-list--selection" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when selectable and condensed 1`] = `
+<div class="bx--structured-list bx--structured-list--selection bx--structured-list--condensed" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListData.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredListData should render correctly when not wrapping text 1`] = `<div class="cv-structured-list-data bx--structured-list-td bx--structured-list-content--nowrap" id="test-3"></div>`;
+
+exports[`CvStructuredListData should render correctly when wrapping text 1`] = `<div class="cv-structured-list-data bx--structured-list-td" id="test-3"></div>`;

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListHeading.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredListHeading should render correctly 1`] = `<div class="cv-structured-list-heading bx--structured-list-th"></div>`;
+
+exports[`CvStructuredListHeading should render with slot correctly 1`] = `
+<div class="cv-structured-list-heading bx--structured-list-th">
+  <div class="headings-slot-default-test">Headings slot default test</div>
+</div>
+`;

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListItem.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredListItem should render correctly when \`value\` is default 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;
+
+exports[`CvStructuredListItem should render correctly when \`value\` is set 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test" value="strictured list item value test"></cv-structured-list-item-standard-stub>`;
+
+exports[`CvStructuredListItem should render correctly when slot is specified 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;

package/src/components/CvStructuredList/index.js

@@ -0,0 +1,12 @@
+import CvStructuredListData from './CvStructuredListData.vue';
+import CvStructuredListHeading from './CvStructuredListHeading.vue';
+import CvStructuredListItem from './CvStructuredListItem.vue';
+import CvStructuredList from './CvStructuredList.vue';
+export {
+  CvStructuredList,
+  CvStructuredListItem,
+  CvStructuredListHeading,
+  CvStructuredListData,
+};
+
+export default CvStructuredList;

package/src/components/CvTextArea/CvTextArea.stories.js

@@ -2,12 +2,12 @@ import {
   sbCompPrefix,
   storyParametersObject,
 } from '../../global/storybook-utils';
-
+import { StorybookGroupConst } from './StorybookGroupConst';
 import CvTextArea from '.';
 import { ref } from 'vue';
 
 export default {
-  title: `${sbCompPrefix}/CvTextArea`,
+  title: `${sbCompPrefix}/${StorybookGroupConst}/CvTextArea`,
   component: CvTextArea,
   argTypes: {
     // attrs

package/src/components/CvTextArea/CvTextAreaSkeleton.stories.js

@@ -0,0 +1,29 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { StorybookGroupConst } from './StorybookGroupConst';
+import { CvTextAreaSkeleton } from './';
+
+export default {
+  title: `${sbCompPrefix}/${StorybookGroupConst}/CvTextAreaSkeleton`,
+  component: CvTextAreaSkeleton,
+};
+
+const template = `<cv-text-area-skeleton></cv-text-area-skeleton>`;
+const Template = args => {
+  return {
+    components: { CvTextAreaSkeleton },
+    template,
+    setup() {
+      return { args };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

package/src/components/CvTextArea/CvTextAreaSkeleton.vue

@@ -0,0 +1,10 @@
+<template>
+  <div :class="`${carbonPrefix}--form-item`">
+    <label :class="`${carbonPrefix}--label ${carbonPrefix}--skeleton`" />
+    <div :class="`${carbonPrefix}--text-area ${carbonPrefix}--skeleton`" />
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvTextArea/StorybookGroupConst.js

@@ -0,0 +1 @@
+export const StorybookGroupConst = 'CvTextArea';

package/src/components/CvTextArea/__tests__/__snapshots__/CvTextAreaSkeleton.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvTextAreaSkeleton should match snapshot 1`] = `
+<div class="bx--form-item"><label class="bx--label bx--skeleton"></label>
+  <div class="bx--text-area bx--skeleton"></div>
+</div>
+`;

package/src/components/CvTextArea/index.js

@@ -1,4 +1,5 @@
 import CvTextArea from './CvTextArea.vue';
+import CvTextAreaSkeleton from './CvTextAreaSkeleton';
 
-export { CvTextArea };
+export { CvTextArea, CvTextAreaSkeleton };
 export default CvTextArea;