feat: add new icons (#489)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v2.0.48
+
+- Add new icons for the `Icon` component
+  - `Details`
+  - `Previous`
+
 ## v2.0.47
 
 - Use the correct classes for box shadow in `Overlay` and `Menu` component.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.47",
+  "version": "2.0.48",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/Icon/types.ts

@@ -34,6 +34,7 @@ export const IconName = {
   COIN: 'Coin',
   CREDIT_CARD: 'CreditCard',
   DELETE: 'Delete',
+  DETAILS: 'Details',
   DUPLICATE: 'Duplicate',
   EDIT: 'Edit',
   ENVELOPE: 'Envelope',
@@ -60,6 +61,7 @@ export const IconName = {
   PLAN_GROWTH: 'PlanGrowth',
   PLAN_STARTUP: 'PlanStartup',
   PLUS: 'Plus',
+  PREVIOUS: 'Previous',
   PROCESSING: 'Processing',
   SIGNAL: 'Signal',
   SUCCESS: 'Success',

src/components/IconButton/IconButton.vue

@@ -83,6 +83,10 @@ const linkTag = computed(() => {
 .uic-icon-button {
   @apply rounded-lg;
 
+  &:disabled {
+    @apply cursor-not-allowed;
+  }
+
   &.size- {
     &sm {
       @apply p-2;

src/components/LoadingIndicator/LoadingIndicator.vue

@@ -1,34 +1,37 @@
 <template>
   <div
-    :class="loading ? `loading-gif ${loadingClass}` : ''"
+    :class="isLoading ? `loading-gif ${loadingClass}` : ''"
     aria-live="polite"
-    :aria-busy="loading"
+    :aria-busy="isLoading"
     data-testId="loading-indicator"
   >
     <slot />
   </div>
 </template>
 
-<script>
-import { Comment } from 'vue';
+<script setup lang="ts">
+import { Comment, computed, defineOptions, defineSlots } from 'vue';
 
-export default {
-  name: 'LoadingIndicator',
-  props: {
-    loadingClass: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    loading() {
-      return (
-        !this.$slots.default ||
-        this.$slots.default().findIndex((o) => o.type !== Comment) === -1
-      );
-    }
+defineOptions({ name: 'LoadingIndicator' });
+
+withDefaults(
+  defineProps<{
+    loadingClass?: string;
+  }>(),
+  {
+    loadingClass: undefined
   }
-};
+);
+
+const slots = defineSlots<{
+  default(): any;
+}>();
+
+const isLoading = computed(
+  () =>
+    !slots.default ||
+    slots.default().findIndex((o: any) => o.type !== Comment) === -1
+);
 </script>
 
 <style lang="scss" scoped>

src/components/LoadingIndicator/__tests__/LoadingIndicator.spec.js → src/components/LoadingIndicator/__tests__/LoadingIndicator.spec.ts

@@ -21,8 +21,8 @@ describe('LoadingIndicator', () => {
   });
 
   describe('when there is content in the default slot', () => {
-    let slotContent;
-    let slots;
+    let slotContent: string;
+    let slots: Record<string, string>;
     beforeEach(() => {
       slotContent = 'Hello, this is the slot.';
       slots = { default: slotContent };