classcard-ui 0.2.1519 → 0.2.1520

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1519",
+  "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/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/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",
 };