classcard-ui 0.2.1503-beta.0 → 0.2.1504

package/package.json

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

package/src/components/CInput/CInput.vue

@@ -40,6 +40,7 @@
           errorClasses,
           customClasses ? customClasses : 'rounded-md',
           isSearchEnabled ? 'pl-8' : '',
+          trailingIcon && isValidate ? 'pr-9' : '',
         ]"
         class="block w-full h-full flex-1 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
         :placeholder="placeholder"
@@ -54,6 +55,35 @@
       >
         <c-icon name="exclamation-circle" type="solid" class="h-5 w-5 bg-white"></c-icon>
       </div>
+      <!-- trailing info icon with optional tooltip; hidden when a validation error is shown so the error icon takes priority -->
+      <div
+        v-if="trailingIcon && isValidate"
+        class="absolute inset-y-0 right-0 flex items-center pr-3"
+      >
+        <span
+          tabindex="0"
+          class="relative flex items-center text-gray-400 focus:outline-none"
+          @mouseenter="showTrailingTooltip = true"
+          @mouseleave="showTrailingTooltip = false"
+          @focus="showTrailingTooltip = true"
+          @blur="showTrailingTooltip = false"
+        >
+          <c-icon
+            :name="trailingIcon"
+            :type="trailingIconType"
+            :viewBox="trailingIconViewBox || undefined"
+            :classes="`${trailingIconClass} `"
+            cursorType="cursor-pointer"
+          ></c-icon>
+          <c-tool-tip
+            v-if="showTrailingTooltip && trailingIconTooltip"
+            :tooltipText="trailingIconTooltip"
+            isTopAligned
+            classes="bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white"
+            color="#111827"
+          ></c-tool-tip>
+        </span>
+      </div>
       <slot name="customIcon" v-if="customIcon"></slot>
     </div>
     <!-- validation error message -->
@@ -69,9 +99,10 @@
 
 <script>
 import CIcon from "../CIcon/CIcon.vue";
+import CToolTip from "../CToolTip/CToolTip.vue";
 export default {
   name: "CInput",
-  components: { CIcon },
+  components: { CIcon, CToolTip },
   props: {
     // Label of input field
     label: {
@@ -138,6 +169,28 @@ export default {
       type: Boolean,
       default: false,
     },
+    // c-icon name to render at the right edge of the input
+    trailingIcon: {
+      type: String,
+    },
+    // type passed through to the trailing <c-icon :type>
+    trailingIconType: {
+      type: String,
+      default: "outline",
+    },
+    // tooltip text shown on hover/focus of the trailing icon
+    trailingIconTooltip: {
+      type: String,
+    },
+    // viewBox passed through to the trailing <c-icon>; only applied when provided
+    trailingIconViewBox: {
+      type: String,
+    },
+    // class bound on the trailing <c-icon> so callers control colour/size (positioning is preserved)
+    trailingIconClass: {
+      type: String,
+      default: "h-5 w-5 text-gray-400",
+    },
   },
   computed: {
     errorClasses() {
@@ -162,6 +215,7 @@ export default {
   data() {
     return {
       inputValue: this.value,
+      showTrailingTooltip: false,
     };
   },
   watch: {

package/src/components/CProgress/CProgress.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center justify-center">
     <p class="text-sm font-medium text-gray-900">
-      {{ steps[currentStep - 1].name }}
+      {{ customName ? customName : steps[currentStep - 1].name }}
     </p>
     <ol role="list" class="ml-4 flex items-center space-x-5">
       <li v-for="step in steps" :key="step.name">
@@ -59,6 +59,10 @@ export default {
       type: Number,
       require: true,
     },
+    customName: {
+      type: String,
+      default: "",
+    },
     preferredColor: {
       type: String,
       default: "indigo",

package/src/components/CRadio/CRadio.vue

@@ -43,6 +43,7 @@
                 "
               >
                 {{ item[labelName] }}
+                <span v-if="item.labelHelperText" :class="item.labelHelperTextClass">{{ item.labelHelperText }}</span>
               </p>
               <c-tag
                 v-if="item.tag"

package/src/components/CUpload/CUpload.vue

@@ -15,10 +15,7 @@
     </div>
     <button
       type="button"
-      :class="[
-        'inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
-        extraClasses,
-      ]"
+      class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
       @click="initFilestack()"
       :id="id"
       v-if="displayMode == 'overlay' && icon"
@@ -28,7 +25,6 @@
         :class="icon.class"
         :name="icon.name"
         :viewBox="icon.viewBox"
-        cursorType="cursor-pointer"
       ></c-icon>
       {{ buttonText }}
     </button>
@@ -120,10 +116,6 @@ export default {
     id: {
       type: String,
     },
-    extraClasses: {
-      type: String,
-      default: "",
-    },
     buttonText: {
       type: String,
       default: "Upload",

package/src/stories/CInput.stories.js

@@ -14,6 +14,9 @@ export default {
     value: String,
     disabled: Boolean,
     type: String,
+    trailingIcon: String,
+    trailingIconType: String,
+    trailingIconTooltip: String,
   },
 };
 
@@ -34,3 +37,14 @@ Default.args = {
   disabled: true,
   type: "text",
 };
+
+export const TrailingIcon = Template.bind({});
+TrailingIcon.args = {
+  label: "Email",
+  placeholder: "Enter your email",
+  hint: "Optional",
+  isValidate: true,
+  type: "text",
+  trailingIcon: "information-circle",
+  trailingIconTooltip: "Pending verification",
+};