feat: cv-structured-list components in progress

carbon-design-system · Aug 14, 2023 · c4e0959 · c4e0959
1 parent 706a2cd
commit c4e0959
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 52 deletions.
diff --git a/src/components/CvStructuredList/CvStructuredList.stories.js b/src/components/CvStructuredList/CvStructuredList.stories.js
@@ -2,54 +2,93 @@ import {
   sbCompPrefix,
   storyParametersObject,
 } from '../../global/storybook-utils';
-import { CvStructuredList } from '.';
+import {
+  CvStructuredList,
+  CvStructuredListHeading,
+  CvStructuredListData,
+  CvStructuredListItem,
+} from '.';
 
 export default {
   title: `${sbCompPrefix}/CvStructuredList`,
   component: CvStructuredList,
-  argTypes: {},
+  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 template = `<cv-structured-list v-bind="args">
-<template 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 slot="items">
-  <cv-structured-list-item>
-    <cv-structured-list-data>Item_1</cv-structured-list-data>
-    <cv-structured-list-data>Item_1</cv-structured-list-data>
-    <cv-structured-list-data
-      >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.</cv-structured-list-data
-    >
-  </cv-structured-list-item>
-  <cv-structured-list-item>
-    <cv-structured-list-data>Item_2</cv-structured-list-data>
-    <cv-structured-list-data>Item_2</cv-structured-list-data>
-    <cv-structured-list-data
-      >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.</cv-structured-list-data
-    >
-  </cv-structured-list-item>
-  <cv-structured-list-item>
-    <cv-structured-list-data>Item_3</cv-structured-list-data>
-    <cv-structured-list-data>Item_3</cv-structured-list-data>
-    <cv-structured-list-data
-      >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.</cv-structured-list-data
-    >
-  </cv-structured-list-item>
-</template>
-</cv-structured-list>`;
+const template = `
+<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>
+      <cv-structured-list-data v-bind="{noWrap: args.noWrap}">Item_1</cv-structured-list-data>
+      <cv-structured-list-data v-bind="{noWrap: args.noWrap}">Item_1</cv-structured-list-data>
+      <cv-structured-list-data v-bind="{noWrap: args.noWrap}"
+        >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.</cv-structured-list-data
+      >
+    </cv-structured-list-item>
+
+    <cv-structured-list-item>
+      <cv-structured-list-data v-bind="{noWrap: args.noWrap}">Item_2</cv-structured-list-data>
+      <cv-structured-list-data v-bind="{noWrap: args.noWrap}">Item_2</cv-structured-list-data>
+      <cv-structured-list-data v-bind="{noWrap: args.noWrap}"
+        >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.</cv-structured-list-data
+      >
+    </cv-structured-list-item>
+  </template>
+</cv-structured-list>
+`;
 
 const Template = args => {
   return {
-    components: { CvStructuredList },
+    components: {
+      CvStructuredList,
+      CvStructuredListHeading,
+      CvStructuredListData,
+      CvStructuredListItem,
+    },
     setup: () => ({ args }),
     template,
   };

diff --git a/src/components/CvStructuredList/CvStructuredList.vue b/src/components/CvStructuredList/CvStructuredList.vue
@@ -31,16 +31,16 @@ import { defineEmits, provide } from 'vue';
 import { carbonPrefix } from '../../global/settings';
 
 const props = defineProps({
-  /**
-   * makes cv-structured-list-item selectable
-   */
   selectable: Boolean,
   condensed: Boolean,
 });
 
 const emit = defineEmits(['change']);
 
-provide('on', val => {
+provide('change', val => {
+  console.log('CvStructuredListItem change: ', {
+    val,
+  });
   emit('change', val);
 });
 provide('selectable', props.selectable);

diff --git a/src/components/CvStructuredList/CvStructuredListItem.vue b/src/components/CvStructuredList/CvStructuredListItem.vue
@@ -11,15 +11,15 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, inject, provide, watch } from 'vue';
 import CvStructuredListItemStandard from './CvStructuredListItemStandard.vue';
 import CvStructuredListItemSelectable from './CvStructuredListItemSelectable.vue';
 
 defineOptions({
   inheritAttrs: false,
 });
 
-defineProps({
+const props = defineProps({
   modelValue: {
     type: String,
     default: undefined,
@@ -35,14 +35,31 @@ const change = inject('change');
 
 const tagType = computed(() => {
   return selectable
-    ? CvStructuredListItemStandard
-    : CvStructuredListItemSelectable;
+    ? CvStructuredListItemSelectable
+    : CvStructuredListItemStandard;
 });
 
 const emit = defineEmits(['change']);
 
-provide('on', val => {
-  emit('change', val);
-  change(val); //emit to parent
+provide('onRadioItemChange', clickedItemCvId => {
+  emit('change', clickedItemCvId);
+  change(clickedItemCvId); //emit to parent
 });
+
+watch(
+  () => props.modelValue,
+  val => {
+    console.log('WATCH modelValue: ', {
+      val,
+    });
+  }
+);
+watch(
+  () => props.value,
+  val => {
+    console.log('WATCH value: ', {
+      val,
+    });
+  }
+);
 </script>
diff --git a/src/components/CvStructuredList/CvStructuredListItemSelectable.vue b/src/components/CvStructuredList/CvStructuredListItemSelectable.vue
@@ -17,6 +17,7 @@
       :checked="isChecked"
       :value="value"
       type="radio"
+      @change="onChange"
     />
     <div :class="`${carbonPrefix}--structured-list-td`">
       <CheckmarkFilled16 :class="`${carbonPrefix}--structured-list-svg`" />
@@ -50,5 +51,6 @@ const props = defineProps({
 });
 
 const cvId = useCvId(props);
-const { isChecked } = useRadio(props, emit);
+const emit = defineEmits(['update:modelValue', 'change']);
+const { isChecked, onChange } = useRadio(props, emit);
 </script>
diff --git a/src/use/useRadio.js b/src/use/useRadio.js
@@ -13,7 +13,9 @@ export const useRadio = (props, emit) => {
 
   const onChange = () => {
     onRadioItemChange(props.value); // emit to parent
-
+    console.log('useRadio onChange: ', {
+      value: props.value,
+    });
     emit('update:modelValue', props.value); // emit for v-model
     emit('change', props.value);
   };