From 65dcbaaf26d406f7f9b72ef2db9cf2aba9d65f64 Mon Sep 17 00:00:00 2001
From: Nathaniel Waldschmidt <nathaniel.waldsch@gmail.com>
Date: Thu, 8 Feb 2024 14:23:56 -0600
Subject: [PATCH] feat: style modal closing

---
 .eslintrc                                     |  5 ++++-
 CHANGELOG.md                                  |  9 +++++++++
 package-lock.json                             |  4 ++--
 package.json                                  |  2 +-
 src/components/Icon/Icon.vue                  |  8 +-------
 src/components/Icon/svgs/CircleCheck.svg      |  3 +++
 src/components/Icon/svgs/CircleClose.svg      |  3 +++
 .../Icon/svgs/CircleExclamation.svg           |  3 +++
 src/components/Icon/svgs/Close.svg            |  3 +++
 src/components/Icon/types.ts                  |  4 ++++
 src/components/Modal/Modal.vue                | 20 +++++++++----------
 11 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Icon/svgs/CircleCheck.svg
 create mode 100644 src/components/Icon/svgs/CircleClose.svg
 create mode 100644 src/components/Icon/svgs/CircleExclamation.svg
 create mode 100644 src/components/Icon/svgs/Close.svg

diff --git a/.eslintrc b/.eslintrc
index 0c3f9a76c..ae9ece51c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,7 +3,10 @@
   "plugins": ["prettier"],
   "globals": {
     "URLSearchParams": false,
-    "vi": false
+    "vi": false,
+    "defineProps": false,
+    "defineEmits": false,
+    "withDefaults": false
   },
   "parser": "vue-eslint-parser",
   "parserOptions": {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d24c83bb6..4b49d39bc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## v2.0.11
+- Update linting to understand Vue globals
+- Style the close button in `Modal`s
+- Add new icons for the `Icon` component
+  - `CircleCheck`
+  - `CircleClose`
+  - `CircleExclamation`
+  - `Close`
+
 ## v2.0.10
 
 - Downgrade Vue to 3.2.32
diff --git a/package-lock.json b/package-lock.json
index 763904ad9..69d6e3abb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "2.0.10",
+      "version": "2.0.11",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index b1683921e..970a54d0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index e7d2235ff..6e7a68158 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -13,13 +13,7 @@
 
 <script setup lang="ts">
 import { Size } from '@/types';
-import {
-  computed,
-  defineAsyncComponent,
-  defineProps,
-  watch,
-  withDefaults
-} from 'vue';
+import { computed, defineAsyncComponent, watch } from 'vue';
 
 import { IconName, IconSize } from './types';
 
diff --git a/src/components/Icon/svgs/CircleCheck.svg b/src/components/Icon/svgs/CircleCheck.svg
new file mode 100644
index 000000000..425b93b38
--- /dev/null
+++ b/src/components/Icon/svgs/CircleCheck.svg
@@ -0,0 +1,3 @@
+<svg>
+<path d="M12.2667 7.325L8.69167 10.9083L7.31667 9.53333C7.24197 9.44608 7.15004 9.37525 7.04665 9.32525C6.94326 9.27525 6.83066 9.24708 6.71589 9.24267C6.60112 9.23825 6.48668 9.25758 6.37974 9.2995C6.27281 9.34133 6.17568 9.40492 6.09446 9.48608C6.01326 9.56733 5.94971 9.6645 5.90781 9.77142C5.86591 9.87833 5.84658 9.99275 5.85101 10.1076C5.85545 10.2223 5.88356 10.3349 5.93357 10.4383C5.98359 10.5417 6.05444 10.6337 6.14167 10.7083L8.10001 12.675C8.17787 12.7523 8.27022 12.8133 8.37176 12.8548C8.47326 12.8963 8.58201 12.9173 8.69167 12.9167C8.91026 12.9158 9.11976 12.8289 9.27501 12.675L13.4417 8.50833C13.5198 8.43083 13.5818 8.33867 13.6241 8.23715C13.6664 8.1356 13.6882 8.02668 13.6882 7.91667C13.6882 7.80666 13.6664 7.69773 13.6241 7.59618C13.5818 7.49463 13.5198 7.40247 13.4417 7.325C13.2855 7.16979 13.0743 7.08268 12.8542 7.08268C12.634 7.08268 12.4228 7.16979 12.2667 7.325ZM10 1.66667C8.35184 1.66667 6.74066 2.15541 5.37026 3.07108C3.99985 3.98677 2.93175 5.28825 2.30101 6.81098C1.67028 8.33367 1.50526 10.0093 1.8268 11.6258C2.14834 13.2423 2.94201 14.7271 4.10746 15.8926C5.27289 17.058 6.75775 17.8517 8.37426 18.1733C9.99076 18.4948 11.6663 18.3298 13.189 17.699C14.7118 17.0683 16.0133 16.0002 16.9289 14.6298C17.8446 13.2593 18.3333 11.6482 18.3333 10C18.3333 8.90567 18.1178 7.82202 17.699 6.81098C17.2803 5.79993 16.6664 4.88127 15.8926 4.10744C15.1188 3.33363 14.2001 2.71979 13.189 2.301C12.178 1.88222 11.0943 1.66667 10 1.66667ZM10 16.6667C8.68151 16.6667 7.39254 16.2757 6.29621 15.5432C5.19988 14.8106 4.3454 13.7694 3.84081 12.5513C3.33623 11.3331 3.20421 9.99258 3.46144 8.69942C3.71867 7.40619 4.35361 6.21831 5.28596 5.28596C6.21831 4.35361 7.4062 3.71867 8.69942 3.46143C9.99259 3.2042 11.3331 3.33622 12.5513 3.8408C13.7694 4.34539 14.8106 5.19987 15.5432 6.2962C16.2757 7.39253 16.6667 8.68142 16.6667 10C16.6667 11.7681 15.9643 13.4638 14.7141 14.7141C13.4638 15.9643 11.7681 16.6667 10 16.6667Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Icon/svgs/CircleClose.svg b/src/components/Icon/svgs/CircleClose.svg
new file mode 100644
index 000000000..96e0a4ccb
--- /dev/null
+++ b/src/components/Icon/svgs/CircleClose.svg
@@ -0,0 +1,3 @@
+<svg>
+<path d="M13.0918 6.9084C13.0143 6.83029 12.9221 6.7683 12.8206 6.72599C12.719 6.68368 12.6101 6.6619 12.5001 6.6619C12.3901 6.6619 12.2812 6.68368 12.1796 6.72599C12.078 6.7683 11.9858 6.83029 11.9084 6.9084L10.0001 8.82508L8.09174 6.9084C7.93482 6.75148 7.72199 6.66332 7.50007 6.66332C7.27815 6.66332 7.06532 6.75148 6.9084 6.9084C6.75149 7.06532 6.66333 7.27815 6.66333 7.50007C6.66333 7.72198 6.75149 7.93482 6.9084 8.09173L8.82509 10.0001L6.9084 11.9084C6.8303 11.9858 6.7683 12.078 6.726 12.1796C6.68369 12.2812 6.6619 12.3901 6.6619 12.5001C6.6619 12.6101 6.68369 12.719 6.726 12.8206C6.7683 12.9221 6.8303 13.0143 6.9084 13.0918C6.98587 13.1698 7.07804 13.2318 7.17959 13.2742C7.28114 13.3164 7.39006 13.3382 7.50007 13.3382C7.61008 13.3382 7.719 13.3164 7.82055 13.2742C7.9221 13.2318 8.01427 13.1698 8.09174 13.0918L10.0001 11.1751L11.9084 13.0918C11.9858 13.1698 12.078 13.2318 12.1796 13.2742C12.2812 13.3164 12.3901 13.3382 12.5001 13.3382C12.6101 13.3382 12.719 13.3164 12.8206 13.2742C12.9221 13.2318 13.0143 13.1698 13.0918 13.0918C13.1698 13.0143 13.2318 12.9221 13.2742 12.8206C13.3164 12.719 13.3383 12.6101 13.3383 12.5001C13.3383 12.3901 13.3164 12.2812 13.2742 12.1796C13.2318 12.078 13.1698 11.9858 13.0918 11.9084L11.1751 10.0001L13.0918 8.09173C13.1698 8.01427 13.2318 7.9221 13.2742 7.82055C13.3164 7.719 13.3383 7.61008 13.3383 7.50007C13.3383 7.39006 13.3164 7.28113 13.2742 7.17958C13.2318 7.07803 13.1698 6.98587 13.0918 6.9084ZM15.8918 4.1084C15.123 3.31248 14.2035 2.67763 13.1868 2.24089C12.1701 1.80415 11.0766 1.57426 9.97009 1.56464C8.86359 1.55503 7.76625 1.76587 6.74212 2.18488C5.71799 2.60389 4.78755 3.22267 4.00511 4.00511C3.22267 4.78755 2.6039 5.71798 2.18489 6.74212C1.76588 7.76625 1.55504 8.86358 1.56465 9.97008C1.57426 11.0766 1.80415 12.1701 2.2409 13.1867C2.67764 14.2035 3.31249 15.123 4.1084 15.8918C4.87713 16.6877 5.79666 17.3225 6.81336 17.7593C7.83006 18.196 8.92359 18.4258 10.0301 18.4355C11.1366 18.4451 12.2339 18.2342 13.258 17.8152C14.2822 17.3962 15.2126 16.7775 15.995 15.995C16.7775 15.2126 17.3963 14.2822 17.8153 13.258C18.2343 12.2339 18.4451 11.1366 18.4355 10.0301C18.4258 8.92358 18.196 7.83006 17.7593 6.81336C17.3225 5.79666 16.6877 4.87712 15.8918 4.1084ZM14.7168 14.7168C13.6268 15.8079 12.1922 16.4874 10.6574 16.6395C9.12259 16.7916 7.58257 16.4068 6.29967 15.5508C5.01677 14.6947 4.07037 13.4202 3.62171 11.9447C3.17306 10.469 3.2499 8.8835 3.83916 7.45822C4.42842 6.03292 5.49363 4.85602 6.85331 4.12803C8.213 3.40005 9.783 3.16601 11.2959 3.46579C12.8088 3.76558 14.1709 4.58064 15.1503 5.77212C16.1296 6.96359 16.6655 8.45775 16.6668 10.0001C16.6697 10.8762 16.4989 11.7441 16.1642 12.5537C15.8294 13.3633 15.3375 14.0985 14.7168 14.7168Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Icon/svgs/CircleExclamation.svg b/src/components/Icon/svgs/CircleExclamation.svg
new file mode 100644
index 000000000..a186745f8
--- /dev/null
+++ b/src/components/Icon/svgs/CircleExclamation.svg
@@ -0,0 +1,3 @@
+<svg>
+<path d="M10 5.83333C9.77901 5.83333 9.56701 5.92113 9.41076 6.07741C9.25451 6.23369 9.16667 6.44565 9.16667 6.66667V10C9.16667 10.221 9.25451 10.433 9.41076 10.5893C9.56701 10.7455 9.77901 10.8333 10 10.8333C10.221 10.8333 10.433 10.7455 10.5893 10.5893C10.7455 10.433 10.8333 10.221 10.8333 10V6.66667C10.8333 6.44565 10.7455 6.23369 10.5893 6.07741C10.433 5.92113 10.221 5.83333 10 5.83333ZM10.7667 13.0167C10.7484 12.9636 10.7233 12.9131 10.6917 12.8667L10.5917 12.7417C10.4745 12.626 10.3257 12.5477 10.164 12.5166C10.0023 12.4854 9.83509 12.5028 9.68334 12.5667C9.58234 12.6088 9.48934 12.6681 9.40834 12.7417C9.33109 12.8195 9.27001 12.9119 9.22851 13.0134C9.18709 13.1149 9.16601 13.2237 9.16667 13.3333C9.16801 13.4423 9.19067 13.5498 9.23334 13.65C9.27076 13.7534 9.33051 13.8473 9.40826 13.9251C9.48601 14.0028 9.57992 14.0626 9.68334 14.1C9.78309 14.1441 9.89092 14.1668 10 14.1668C10.1091 14.1668 10.2169 14.1441 10.3167 14.1C10.4201 14.0626 10.514 14.0028 10.5918 13.9251C10.6695 13.8473 10.7293 13.7534 10.7667 13.65C10.8093 13.5498 10.832 13.4423 10.8333 13.3333C10.8374 13.2778 10.8374 13.2222 10.8333 13.1667C10.819 13.1135 10.7965 13.0629 10.7667 13.0167ZM10 1.66667C8.35184 1.66667 6.74066 2.15541 5.37026 3.07108C3.99985 3.98677 2.93175 5.28825 2.30101 6.81098C1.67028 8.33367 1.50526 10.0093 1.8268 11.6258C2.14834 13.2423 2.94201 14.7271 4.10746 15.8926C5.27289 17.058 6.75775 17.8517 8.37426 18.1733C9.99076 18.4948 11.6663 18.3298 13.189 17.699C14.7118 17.0683 16.0133 16.0002 16.9289 14.6298C17.8446 13.2593 18.3333 11.6482 18.3333 10C18.3333 8.90567 18.1178 7.82202 17.699 6.81098C17.2803 5.79993 16.6664 4.88127 15.8926 4.10744C15.1188 3.33363 14.2001 2.71979 13.189 2.301C12.178 1.88222 11.0943 1.66667 10 1.66667ZM10 16.6667C8.68151 16.6667 7.39254 16.2757 6.29621 15.5432C5.19988 14.8106 4.3454 13.7694 3.84081 12.5513C3.33623 11.3331 3.20421 9.99258 3.46144 8.69942C3.71867 7.40619 4.35361 6.21831 5.28596 5.28596C6.21831 4.35361 7.4062 3.71867 8.69942 3.46143C9.99259 3.2042 11.3331 3.33622 12.5513 3.8408C13.7694 4.34539 14.8106 5.19987 15.5432 6.2962C16.2757 7.39253 16.6667 8.68142 16.6667 10C16.6667 11.7681 15.9643 13.4638 14.7141 14.7141C13.4638 15.9643 11.7681 16.6667 10 16.6667Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Icon/svgs/Close.svg b/src/components/Icon/svgs/Close.svg
new file mode 100644
index 000000000..c3085792d
--- /dev/null
+++ b/src/components/Icon/svgs/Close.svg
@@ -0,0 +1,3 @@
+<svg>
+<path d="M11.1749 9.99992L14.7582 6.42495C14.9152 6.26804 15.0033 6.0552 15.0033 5.83329C15.0033 5.61137 14.9152 5.39854 14.7582 5.24162C14.6013 5.0847 14.3885 4.99654 14.1666 4.99654C13.9447 4.99654 13.7318 5.0847 13.5749 5.24162L9.99992 8.82492L6.42495 5.24162C6.26803 5.0847 6.0552 4.99654 5.83328 4.99654C5.61137 4.99654 5.39853 5.0847 5.24162 5.24162C5.0847 5.39854 4.99654 5.61137 4.99654 5.83329C4.99654 6.0552 5.0847 6.26804 5.24162 6.42495L8.82492 9.99992L5.24162 13.5749C5.16351 13.6524 5.10152 13.7446 5.05921 13.8462C5.0169 13.9477 4.99512 14.0566 4.99512 14.1666C4.99512 14.2767 5.0169 14.3856 5.05921 14.4871C5.10152 14.5887 5.16351 14.6808 5.24162 14.7583C5.31908 14.8364 5.41125 14.8984 5.5128 14.9407C5.61435 14.983 5.72328 15.0048 5.83328 15.0048C5.94329 15.0048 6.05222 14.983 6.15377 14.9407C6.25532 14.8984 6.34748 14.8364 6.42495 14.7583L9.99992 11.1749L13.5749 14.7583C13.6524 14.8364 13.7446 14.8984 13.8462 14.9407C13.9477 14.983 14.0566 15.0048 14.1666 15.0048C14.2767 15.0048 14.3856 14.983 14.4871 14.9407C14.5887 14.8984 14.6808 14.8364 14.7582 14.7583C14.8364 14.6808 14.8984 14.5887 14.9407 14.4871C14.983 14.3856 15.0047 14.2767 15.0047 14.1666C15.0047 14.0566 14.983 13.9477 14.9407 13.8462C14.8984 13.7446 14.8364 13.6524 14.7582 13.5749L11.1749 9.99992Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
index e484b9dd6..3b0ae0521 100644
--- a/src/components/Icon/types.ts
+++ b/src/components/Icon/types.ts
@@ -17,9 +17,13 @@ export const IconName = {
   BELL: 'Bell',
   BULLHORN: 'Bullhorn',
   CAR: 'Car',
+  CIRCLE_CHECK: 'CircleCheck',
+  CIRCLE_CLOSE: 'CircleClose',
   CIRCLE_EMPTY: 'CircleEmpty',
+  CIRCLE_EXCLAMATION: 'CircleExclamation',
   CIRCLE_QUESTION: 'CircleQuestion',
   CIRCLE_USER: 'CircleUser',
+  CLOSE: 'Close',
   CLOUD_DATA: 'CloudData',
   CODE: 'Code',
   COIN: 'Coin',
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 3c3efe660..700c2c349 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -3,7 +3,9 @@
     :modal="showMask"
     :closable="closable"
     :pt="{
-      root: { class: `relative bg-white p-10 rounded-xl shadow-large` },
+      root: {
+        class: `relative bg-white p-10 rounded-xl shadow-large text-gray-800`
+      },
       mask: {
         style: 'animation: fadeIn 100ms;', // This is a hack. Without it the styles flash.
         class: 'backdrop-blur-sm backdrop-brightness-[.80]'
@@ -11,7 +13,10 @@
       header: { class: 'flex flex-col items-start justify-center mb-4' },
       content: { class: 'type-base-400' },
       footer: { class: 'flex justify-end mt-8 gap-4' },
-      closeButton: { class: 'absolute top-6 right-6 text-black' },
+      closeButton: {
+        class:
+          'absolute top-4 right-4 hover:bg-gray-50 active:bg-gray-100 p-2 rounded-full transition duration-300'
+      },
       transition: {
         enterFromClass: 'opacity-0 scale-95',
         enterActiveClass: 'transition duration-250 ease-out',
@@ -31,7 +36,7 @@
     @hide="emits('close')"
   >
     <template #closeicon>
-      <XmarkLarge />
+      <Icon icon="Close" size="xxl" />
     </template>
 
     <template #header>
@@ -61,15 +66,8 @@
 <script setup lang="ts">
 import { Icon } from '@/components/Icon';
 import { IconName } from '@/components/Icon/types';
-import XmarkLarge from '@/components/Icons/XmarkLarge.vue';
 import Dialog, { DialogProps } from 'primevue/dialog';
-import {
-  computed,
-  defineEmits,
-  defineProps,
-  useSlots,
-  withDefaults
-} from 'vue';
+import { computed, useSlots } from 'vue';
 
 import { ModalColor, ModalVariant } from './types';