classcard-ui 0.2.394 → 0.2.395

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.394",
+  "version": "0.2.395",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CStackedList/CStackedList.vue

@@ -4,7 +4,7 @@
       <li
         v-for="items in listItems"
         v-bind:key="items.size"
-        class="py-4 flex justify-between items-center"
+        class="flex items-center justify-between py-4"
         :class="{ 'cursor-pointer': items.collapse, 'border-b border-gray-200': divider === true }"
         v-on="items.collapse ? { click: () => collapseList() } : null"
       >
@@ -13,15 +13,20 @@
             v-if="items.collapse"
             :name="showSection ? 'chevron-down' : 'chevron-right'"
             type="solid"
-            class="mt-3 mr-3 text-gray-900 h-5 w-5"
+            class="mt-3 mr-3 h-5 w-5 shrink-0 text-gray-900"
           ></c-icon>
-          <c-avatar :size="items.size" :rounded="items.rounded" :image="items.image"></c-avatar>
+          <c-avatar
+            :size="items.size"
+            :rounded="items.rounded"
+            :image="items.image"
+            class="shrink-0"
+          ></c-avatar>
           <div class="ml-3">
             <div class="flex pb-1">
               <p class="text-sm font-medium text-gray-900">
                 {{ items.heading }}
               </p>
-              <c-tag v-if="items.tag" label="Active" class="ml-2.5 relative bottom-0.5"></c-tag>
+              <c-tag v-if="items.tag" :label="tagLabel" class="relative bottom-0.5 ml-2.5"></c-tag>
             </div>
             <p class="text-sm text-gray-500">{{ items.description }}</p>
             <div v-if="showSection" class="mt-3">
@@ -38,7 +43,7 @@
         <button
           v-if="items.listIcon"
           type="button"
-          class="rounded-full h-8 w-8 flex items-center justify-center text-gray-500 hover:bg-red-100 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500"
+          class="focus:outline-none flex h-8 w-8 items-center justify-center rounded-full text-gray-500 hover:bg-red-100 hover:text-red-800 focus:ring-2 focus:ring-red-500"
         >
           <c-icon name="trash" type="solid" class="h-5 w-5 hover:text-red-800"></c-icon>
         </button>

package/src/stories/CStackedList.stories.js

@@ -1,12 +1,12 @@
-import CStackedList from '../components/CStackedList/CStackedList.vue';
-import './utils.css'
+import CStackedList from "../components/CStackedList/CStackedList.vue";
+import "./utils.css";
 
 export default {
-  title: 'CStackedList',
+  title: "CStackedList",
   component: CStackedList,
   argTypes: {
     listItems: { control: { type: "object" } },
-    divider: Boolean
+    divider: Boolean,
   },
 };
 
@@ -18,8 +18,19 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-    listItems: [
-        { image: "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", heading: "Maths-Level1", description: "calvin.hawkins@example.com", size:"medium", rounded:false, tag:false, collapse:false, listIcon: true },
-      ],
-    divider: true
+  listItems: [
+    {
+      image:
+        "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+      heading: "Maths-Level1",
+      tagLabel: "test",
+      description: "calvin.hawkins@example.com",
+      size: "medium",
+      rounded: false,
+      tag: false,
+      collapse: false,
+      listIcon: true,
+    },
+  ],
+  divider: true,
 };