classcard-ui 0.2.1518 → 0.2.1520

package/package.json

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

package/src/components/CButtonIcon/CButtonIcon.vue

@@ -24,11 +24,12 @@
     <button
       v-else-if="type == 'rounded-hover'"
       @click.prevent="$emit('action')"
-      class="flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="rounded-hover-button flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
       :class="[
         isTransparent ? 'bg-transparent' : 'bg-white',
         customButtonClasses,
       ]"
+      :style="computedStyles"
       :disabled="disabled"
       :id="id"
     >
@@ -163,4 +164,8 @@ export default {
 .white-button-classes:focus {
   outline-color: var(--primary-ring-color);
 }
+
+.rounded-hover-button:focus {
+  outline-color: var(--primary-ring-color);
+}
 </style>

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/components/CConfirmActionModal/CConfirmActionModal.vue

@@ -155,6 +155,10 @@ const COLOR_VARIANT_CLASSES = {
     background: "bg-yellow-100",
     text: "text-yellow-600",
   },
+  orange: {
+    background: "bg-orange-100",
+    text: "text-orange-600",
+  },
 };
 
 export default {

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/CButtonIcon.stories.js

@@ -1,11 +1,33 @@
-import CButtonIcon from '../components/CButtonIcon/CButtonIcon.vue';
-import './utils.css'
+import CButtonIcon from "../components/CButtonIcon/CButtonIcon.vue";
+import "./utils.css";
 
 export default {
-  title: 'CButtonIcon',
+  title: "CButtonIcon",
   component: CButtonIcon,
   argTypes: {
-    type: { control: { type: 'select', options: ['primary', 'secondary', 'white', 'danger', 'success', 'tertiary', 'secondary-gray', 'rounded-hover', 'dark-blue', 'white-plain'] } },
+    type: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "white",
+          "danger",
+          "success",
+          "tertiary",
+          "secondary-gray",
+          "rounded-hover",
+          "dark-blue",
+          "white-plain",
+        ],
+      },
+    },
+    preferredColor: {
+      control: {
+        type: "select",
+        options: ["red", "indigo", "yellow", "green", "purple"],
+      },
+    },
   },
 };
 
@@ -18,10 +40,11 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = {
   isLoading: false,
-  type: 'primary',
+  type: "primary",
   icon: {
-    name: 'check',
-    type: 'solid',
-    class: 'h-5 w-5'
-  }
+    name: "check",
+    type: "solid",
+    class: "h-5 w-5",
+  },
+  preferredColor: "indigo",
 };

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;
   },