classcard-ui 0.2.1518 → 0.2.1519

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1518",
+  "version": "0.2.1519",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CCheckbox/CCheckbox.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div class="relative flex items-start">
+    <div
+      :class="['relative flex gap-3', icon ? 'items-center' : 'items-start']"
+    >
       <div class="flex h-5 items-center">
         <input
           type="checkbox"
@@ -13,32 +15,45 @@
           :disabled="isDisabled"
           :indeterminate.prop="indeterminate"
           :id="id"
+          :aria-labelledby="label ? `${id}-label` : null"
+          :aria-describedby="description ? `${id}-description` : null"
         />
       </div>
       <div
-        class="flex cursor-pointer items-center text-sm"
-        :class="[isDisabled ? 'pointer-events-none' : '', setMarginLeft]"
-        :id="id"
+        class="flex cursor-pointer items-center gap-3 text-sm"
+        :class="[isDisabled ? 'pointer-events-none' : '']"
         @click="changeValue"
       >
         <template v-if="showAvatar">
           <c-avatar
-            class="mr-3"
             v-if="avatarImage"
             :size="description ? 'extrasmall' : 'extraextrasmall'"
             :image="avatarImage"
             :rounded="true"
           ></c-avatar>
           <c-avatar
-            class="mr-3"
             :size="description ? 'extrasmall' : 'extraextrasmall'"
             :nameInitials="avatarNameInitials"
             :rounded="true"
             v-else
           ></c-avatar>
         </template>
-        <div class="flex flex-col">
+        <template v-if="icon">
+          <div
+            class="flex h-10 w-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50"
+          >
+            <c-icon
+              :name="icon.name"
+              :type="icon.type"
+              :viewBox="icon.viewBox || '0 0 20 20'"
+              class="h-5 w-5 text-gray-400"
+              cursorType="cursor-pointer"
+            />
+          </div>
+        </template>
+        <div class="flex flex-1 flex-col">
           <label
+            :id="`${id}-label`"
             :class="[
               'cursor-pointer text-gray-900',
               isDisabled ? 'opacity-50' : '',
@@ -57,6 +72,7 @@
           </label>
           <p
             v-if="description"
+            :id="`${id}-description`"
             :class="`mt-0.5 cursor-pointer text-gray-500 ${
               isDisabled ? 'opacity-50' : ''
             }`"
@@ -78,7 +94,11 @@ export default {
   name: "CCheckbox",
   props: {
     label: { type: String },
-    id: { type: String },
+    id: { type: String, default: "c-checkbox" },
+    icon: {
+      type: Object,
+      required: false,
+    },
     customLabelClass: {
       type: String,
     },
@@ -96,10 +116,6 @@ export default {
     permanentIndeterminate: {
       type: Boolean,
     },
-    setMarginLeft: {
-      type: String,
-      default: "ml-3",
-    },
     unCheckable: {
       type: Boolean,
     },

package/src/icons.js

@@ -881,4 +881,5 @@ export default {
     "M11.47 4.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1-1.06 1.06L12 6.31 8.78 9.53a.75.75 0 0 1-1.06-1.06l3.75-3.75Zm-3.75 9.75a.75.75 0 0 1 1.06 0L12 17.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0l-3.75-3.75a.75.75 0 0 1 0-1.06Z",
   "arrow-uturn-left-solid-v2":
     "M9.53 2.47a.75.75 0 0 1 0 1.06L4.81 8.25H15a6.75 6.75 0 0 1 0 13.5h-3a.75.75 0 0 1 0-1.5h3a5.25 5.25 0 1 0 0-10.5H4.81l4.72 4.72a.75.75 0 1 1-1.06 1.06l-6-6a.75.75 0 0 1 0-1.06l6-6a.75.75 0 0 1 1.06 0Z",
+  "exclaimation-circle-outline-v2":"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
 };

package/src/stories/CCheckbox.stories.js

@@ -8,6 +8,7 @@ export default {
     label: String,
     description: String,
     value: Number,
+    icon: Object,
     preferredColor: {
       control: {
         type: "select",
@@ -25,6 +26,7 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = {
+  id: "c-checkbox",
   label: "Includes",
   description: "Add subjects to include them in the package",
   value: 1,
@@ -32,6 +34,11 @@ Default.args = {
   showAvatar: false,
   avatarNameInitials: "SA",
   preferredColor: "indigo",
+  icon: {
+    type: "solid",
+    name: "clipboard-solid-v2",
+    viewBox: "0 0 24 24",
+  },
   onChange() {
     return;
   },