From c9835d52c3bdf20e4732a4d374eccd8c66d754a2 Mon Sep 17 00:00:00 2001
From: Nathaniel Waldschmidt
 <77284592+NateWaldschmidt@users.noreply.github.com>
Date: Thu, 2 May 2024 09:49:41 -0500
Subject: [PATCH] feat: add new icons (#489)

---
 CHANGELOG.md                                  |  6 +++
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 src/components/Icon/svgs/Details.svg          |  3 ++
 src/components/Icon/svgs/Previous.svg         |  3 ++
 src/components/Icon/types.ts                  |  2 +
 src/components/IconButton/IconButton.vue      |  4 ++
 .../LoadingIndicator/LoadingIndicator.vue     | 43 ++++++++++---------
 ...cator.spec.js => LoadingIndicator.spec.ts} |  4 +-
 9 files changed, 46 insertions(+), 25 deletions(-)
 create mode 100644 src/components/Icon/svgs/Details.svg
 create mode 100644 src/components/Icon/svgs/Previous.svg
 rename src/components/LoadingIndicator/__tests__/{LoadingIndicator.spec.js => LoadingIndicator.spec.ts} (96%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d7722f00..19a341e8c 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/package-lock.json b/package-lock.json
index c3b76fb7a..70152a776 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.47",
+  "version": "2.0.48",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "2.0.47",
+      "version": "2.0.48",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index 0d71d6592..cc6e8c591 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/Icon/svgs/Details.svg b/src/components/Icon/svgs/Details.svg
new file mode 100644
index 000000000..02bceba87
--- /dev/null
+++ b/src/components/Icon/svgs/Details.svg
@@ -0,0 +1,3 @@
+<svg>
+<path d="M12.9509 9.40796L8.23425 4.69962C8.15679 4.62152 8.06462 4.55952 7.96307 4.51721C7.86152 4.47491 7.7526 4.45312 7.64259 4.45312C7.53258 4.45312 7.42366 4.47491 7.32211 4.51721C7.22056 4.55952 7.12839 4.62152 7.05092 4.69962C6.89571 4.85576 6.80859 5.06697 6.80859 5.28712C6.80859 5.50728 6.89571 5.71849 7.05092 5.87462L11.1759 10.0413L7.05092 14.1663C6.89571 14.3224 6.80859 14.5336 6.80859 14.7538C6.80859 14.9739 6.89571 15.1852 7.05092 15.3413C7.1281 15.42 7.22014 15.4827 7.3217 15.5256C7.42326 15.5685 7.53233 15.5908 7.64259 15.5913C7.75284 15.5908 7.86191 15.5685 7.96347 15.5256C8.06504 15.4827 8.15708 15.42 8.23425 15.3413L12.9509 10.633C13.0355 10.5549 13.103 10.4602 13.1492 10.3548C13.1954 10.2494 13.2192 10.1355 13.2192 10.0205C13.2192 9.90537 13.1954 9.79153 13.1492 9.68612C13.103 9.5807 13.0355 9.48599 12.9509 9.40796Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Icon/svgs/Previous.svg b/src/components/Icon/svgs/Previous.svg
new file mode 100644
index 000000000..452074ed0
--- /dev/null
+++ b/src/components/Icon/svgs/Previous.svg
@@ -0,0 +1,3 @@
+<svg>
+<path d="M14.1667 9.16667H7.84169L10.5917 6.425C10.7486 6.26808 10.8368 6.05525 10.8368 5.83333C10.8368 5.61142 10.7486 5.39858 10.5917 5.24167C10.4348 5.08475 10.2219 4.99659 10 4.99659C9.77809 4.99659 9.56526 5.08475 9.40834 5.24167L5.24169 9.40833C5.16583 9.48758 5.10635 9.581 5.06669 9.68333C4.98334 9.88625 4.98334 10.1138 5.06669 10.3167C5.10635 10.419 5.16583 10.5124 5.24169 10.5917L9.40834 14.7583C9.48584 14.8364 9.57801 14.8984 9.67951 14.9407C9.78109 14.9831 9.89001 15.0048 10 15.0048C10.11 15.0048 10.2189 14.9831 10.3205 14.9407C10.4221 14.8984 10.5143 14.8364 10.5917 14.7583C10.6698 14.6808 10.7318 14.5887 10.7741 14.4872C10.8164 14.3856 10.8382 14.2767 10.8382 14.1667C10.8382 14.0567 10.8164 13.9478 10.7741 13.8462C10.7318 13.7447 10.6698 13.6525 10.5917 13.575L7.84169 10.8333H14.1667C14.3877 10.8333 14.5997 10.7455 14.7559 10.5892C14.9123 10.433 15 10.221 15 10C15 9.779 14.9123 9.567 14.7559 9.41075C14.5997 9.2545 14.3877 9.16667 14.1667 9.16667Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
index 009744c16..1534dd3b6 100644
--- a/src/components/Icon/types.ts
+++ b/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',
diff --git a/src/components/IconButton/IconButton.vue b/src/components/IconButton/IconButton.vue
index 1eff01549..811c3affc 100644
--- a/src/components/IconButton/IconButton.vue
+++ b/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;
diff --git a/src/components/LoadingIndicator/LoadingIndicator.vue b/src/components/LoadingIndicator/LoadingIndicator.vue
index 7bcfdf7f2..776996c8e 100644
--- a/src/components/LoadingIndicator/LoadingIndicator.vue
+++ b/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>
diff --git a/src/components/LoadingIndicator/__tests__/LoadingIndicator.spec.js b/src/components/LoadingIndicator/__tests__/LoadingIndicator.spec.ts
similarity index 96%
rename from src/components/LoadingIndicator/__tests__/LoadingIndicator.spec.js
rename to src/components/LoadingIndicator/__tests__/LoadingIndicator.spec.ts
index 9a9ece378..52f6ecf6c 100644
--- a/src/components/LoadingIndicator/__tests__/LoadingIndicator.spec.js
+++ b/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 };