classcard-ui 0.2.1539 → 0.2.1540

package/package.json

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

package/src/components/CDatepicker/CDatepicker.vue

@@ -5,7 +5,6 @@
         <label v-if="label" class="block text-sm font-medium text-gray-900">
           {{ label }}
         </label>
-        <!-- asterisk sign to render if field is required -->
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
       </div>
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
@@ -34,13 +33,18 @@
           <div v-if="showOnlyDatePickerIcon">
             <button
               type="button"
-              class="relative flex h-9 w-9 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:custom-disabled-state"
+              class="datepicker-button relative flex h-9 w-9 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:custom-disabled-state"
               :id="id + '_button_toggle_dropdown'"
               :disabled="disabled"
+              :style="computedStyles"
+              :aria-disabled="disabled"
+              :aria-label="disabled ? 'Disabled' : 'Open datepicker'"
+              :title="disabled ? 'Disabled' : 'Open datepicker'"
               @click="togglePopover()"
             >
               <c-icon
                 :name="calendarIcon.iconName"
+                :cursorType="disabled ? 'not-allowed' : 'pointer'"
                 class="text-gray-400 flex h-5 w-5 justify-center"
                 :type="calendarIcon.type ? calendarIcon.type : 'solid'"
                 :viewBox="calendarIcon.viewBox ? calendarIcon.viewBox : ''"
@@ -60,8 +64,9 @@
               <c-icon
                 :name="calendarIcon.iconName"
                 class="text-gray-400 h-5 w-5"
-                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
                 :viewBox="calendarIcon.viewBox"
+                :cursorType="disabled ? 'not-allowed' : 'pointer'"
+                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
               ></c-icon>
             </button>
             <input
@@ -77,7 +82,6 @@
         </template>
       </v-date-picker>
     </div>
-    <!-- validation error message -->
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
     </p>
@@ -87,13 +91,12 @@
   </div>
 </template>
 <script>
+import { COLOR_CONFIG } from "../../colorConfig";
 import CIcon from "../CIcon/CIcon.vue";
-// import Calendar from "v-calendar/lib/components/calendar.umd";
 import VDatePicker from "v-calendar/lib/components/date-picker.umd";
 export default {
   name: "CDatepicker",
   components: {
-    // Calendar,
     VDatePicker,
     CIcon,
   },
@@ -188,6 +191,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
   },
   data() {
     const masks = {
@@ -213,6 +220,14 @@ export default {
       ],
     };
   },
+  computed: {
+    computedStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--primary-ring-color": colors.shade600,
+      };
+    },
+  },
   methods: {
     onDayClick(date) {
       this.$emit("input", date);
@@ -233,3 +248,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.datepicker-button:focus {
+  outline-color: var(--primary-ring-color);
+}
+</style>

package/src/components/CRadio/CRadio.vue

@@ -1,17 +1,21 @@
 <template>
   <div>
-    <div class="-space-y-px rounded-md bg-white" :class="customWrapperClasses">
+    <div
+      class="-space-y-px rounded-md bg-white"
+      :class="customWrapperClasses"
+    >
       <div
         v-for="(item, index) in items"
-        :class="`relative ${
+        :class="[
+          'relative first:rounded-t-md last:rounded-b-md',
           index != items.length - 1
             ? useIncreasedPadding
               ? 'pb-6'
               : 'pb-4'
-            : ''
-        } ${
-          customClasses ? classes(item, index) : ''
-        } first:rounded-t-md last:rounded-b-md`"
+            : '',
+          customClasses ? classes(item, index) : '',
+          isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+        ]"
         v-bind:key="item[labelName]"
       >
         <div class="flex items-start">
@@ -19,22 +23,21 @@
             type="radio"
             :value="item.value"
             :name="name"
-            :id="id"
+            :id="id + '_input_' + item.value"
             v-model="selectedItem"
             @click="onChange(item.value)"
-            class="radio-state mt-0.5 h-4 w-4 cursor-pointer disabled:opacity-50"
+            class="radio-state mt-0.5 h-4 w-4 disabled:opacity-50 disabled:cursor-not-allowed"
             :disabled="isDisabled"
             :style="colorStyles"
           />
           <div
-            :class="`ml-3 flex cursor-pointer flex-col ${
-              isDisabled ? 'opacity-60' : ''
-            }`"
-            :id="id"
+            :id="id + '_label_' + item.value"
+            class="ml-3 flex flex-col"
             @click="onChange(item.value)"
           >
             <div class="flex items-center gap-2">
               <p
+                :id="id + '_label_text_' + item.value"
                 class="text-sm font-medium text-gray-900"
                 :class="
                   customClasses && item.value === selectedItem
@@ -43,7 +46,11 @@
                 "
               >
                 {{ item[labelName] }}
-                <span v-if="item.labelHelperText" :class="item.labelHelperTextClass">{{ item.labelHelperText }}</span>
+                <span
+                  v-if="item.labelHelperText"
+                  :class="item.labelHelperTextClass"
+                  >{{ item.labelHelperText }}</span
+                >
               </p>
               <c-tag
                 v-if="item.tag"
@@ -52,6 +59,7 @@
               ></c-tag>
             </div>
             <p
+              :id="id + '_description_' + item.value"
               class="block text-sm"
               :class="
                 customClasses && item.value === selectedItem
@@ -65,13 +73,14 @@
         </div>
         <slot v-if="item.value === selectedItem" :name="item.value" />
       </div>
-      <div
+      <button
         v-if="showClearSelection"
+        type="button"
         class="cursor-pointer pt-4 text-sm text-gray-400 hover:text-gray-700 hover:underline"
         @click="clearSelection"
       >
         Clear selection
-      </div>
+      </button>
     </div>
   </div>
 </template>
@@ -86,6 +95,7 @@ export default {
   props: {
     id: {
       type: String,
+      default: "c-radio",
     },
     items: {
       type: Array,

package/src/stories/CDatepicker.stories.js

@@ -9,6 +9,12 @@ export default {
     classes: String,
     label: String,
     helpText: String,
+    preferredColor: {
+      control: {
+        type: "select",
+        options: ["red", "indigo", "yellow", "green", "purple", "gray"],
+      },
+    },
   },
 };