From 5d95c81c66b021cea387eb2c9850686c5f4e82c7 Mon Sep 17 00:00:00 2001
From: Nathaniel Waldschmidt <nathaniel.waldsch@gmail.com>
Date: Thu, 29 Feb 2024 09:53:20 -0600
Subject: [PATCH] feat: add info icon

---
 CHANGELOG.md                            |  3 +++
 package-lock.json                       |  4 ++--
 package.json                            |  2 +-
 src/components/Icon/Icon.mdx            | 19 +++++++++----------
 src/components/Icon/svgs/CircleInfo.svg |  3 +++
 src/components/Icon/types.ts            |  1 +
 6 files changed, 19 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Icon/svgs/CircleInfo.svg

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91a85eb27..b3cea7b14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## v2.0.16
+- Adds `CircleInfo` to the `Icon` component
+
 ## v2.0.15
 
 - Adds `IconColor` options to the `Modal` component of
diff --git a/package-lock.json b/package-lock.json
index af919a40c..a8aca5b2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@lob/ui-components",
-      "version": "2.0.15",
+      "version": "2.0.16",
       "dependencies": {
         "date-fns": "^2.29.3",
         "date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index c32fc739c..a10d35f84 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"
diff --git a/src/components/Icon/Icon.mdx b/src/components/Icon/Icon.mdx
index aef9ce268..e68bf299b 100644
--- a/src/components/Icon/Icon.mdx
+++ b/src/components/Icon/Icon.mdx
@@ -1,16 +1,15 @@
-import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Canvas } from '@storybook/addon-docs';
 import { Primary } from './Icon.stories';
 
-# Modal
+# Icon
 
 <Canvas of={Primary} />
 
-## How to Use
+## Adding Icons
 
-```html
-
-```
-
-## Props
-
-<ArgTypes story={PRIMARY_STORY} />
+- Get the SVG for the new Icon
+- Create a new SVG file with the name of the icon within the `./svgs` directory
+  - Ensure the `<svg>` tag has no attributes
+  - Ensure the various `fill`/ `stroke`/ other colored SVG parts are set to `currentColor`
+- Within `./types.ts` add the new icon to the `IconName` constant ensuring the value matches the name of the SVG file
+- Within Storybook go to the `Icon > All Icons` page and ensure the icon shows up and the sizing matches the other icons
diff --git a/src/components/Icon/svgs/CircleInfo.svg b/src/components/Icon/svgs/CircleInfo.svg
new file mode 100644
index 000000000..b7d740ab5
--- /dev/null
+++ b/src/components/Icon/svgs/CircleInfo.svg
@@ -0,0 +1,3 @@
+<svg>
+  <path d="M9.99999 9.16666C9.77899 9.16666 9.56699 9.2545 9.41074 9.41075C9.25449 9.567 9.16666 9.779 9.16666 10V13.3333C9.16666 13.5543 9.25449 13.7663 9.41074 13.9226C9.56699 14.0788 9.77899 14.1667 9.99999 14.1667C10.221 14.1667 10.433 14.0788 10.5892 13.9226C10.7455 13.7663 10.8333 13.5543 10.8333 13.3333V10C10.8333 9.779 10.7455 9.567 10.5892 9.41075C10.433 9.2545 10.221 9.16666 9.99999 9.16666ZM10.3167 5.9C10.1137 5.81665 9.88624 5.81665 9.68332 5.9C9.58107 5.93966 9.48757 5.99913 9.40832 6.075C9.33474 6.156 9.27549 6.24901 9.23332 6.35C9.18666 6.4489 9.16382 6.55735 9.16666 6.66666C9.16599 6.77634 9.18707 6.88506 9.22849 6.98659C9.26999 7.08811 9.33107 7.18046 9.40832 7.25833C9.48932 7.33194 9.58232 7.39113 9.68332 7.43333C9.80957 7.4852 9.94666 7.50526 10.0825 7.49176C10.2182 7.47826 10.3487 7.4316 10.4622 7.35589C10.5758 7.28018 10.6691 7.17773 10.7337 7.05756C10.7985 6.93738 10.8327 6.80315 10.8333 6.66666C10.8302 6.44602 10.7439 6.23469 10.5917 6.075C10.5124 5.99913 10.419 5.93966 10.3167 5.9ZM9.99999 1.66666C8.35182 1.66666 6.74065 2.15541 5.37024 3.07108C3.99983 3.98676 2.93173 5.28825 2.301 6.81097C1.67027 8.33366 1.50524 10.0092 1.82678 11.6257C2.14832 13.2422 2.942 14.7271 4.10744 15.8926C5.27287 17.058 6.75773 17.8517 8.37424 18.1732C9.99074 18.4947 11.6663 18.3297 13.189 17.699C14.7117 17.0682 16.0132 16.0002 16.9289 14.6297C17.8446 13.2593 18.3333 11.6482 18.3333 10C18.3333 8.90566 18.1177 7.82201 17.699 6.81097C17.2802 5.79992 16.6664 4.88126 15.8926 4.10744C15.1187 3.33362 14.2001 2.71979 13.189 2.301C12.178 1.88221 11.0943 1.66666 9.99999 1.66666ZM9.99999 16.6667C8.68149 16.6667 7.39252 16.2757 6.29619 15.5432C5.19987 14.8106 4.34538 13.7694 3.8408 12.5512C3.33622 11.3331 3.20419 9.99258 3.46142 8.69941C3.71866 7.40619 4.3536 6.21831 5.28595 5.28596C6.2183 4.35361 7.40618 3.71866 8.69941 3.46143C9.99257 3.2042 11.3331 3.33621 12.5512 3.8408C13.7694 4.34539 14.8106 5.19986 15.5432 6.2962C16.2757 7.39252 16.6667 8.68141 16.6667 10C16.6667 11.7681 15.9643 13.4638 14.7141 14.7141C13.4638 15.9642 11.7681 16.6667 9.99999 16.6667Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
index 3b0ae0521..143990e3f 100644
--- a/src/components/Icon/types.ts
+++ b/src/components/Icon/types.ts
@@ -21,6 +21,7 @@ export const IconName = {
   CIRCLE_CLOSE: 'CircleClose',
   CIRCLE_EMPTY: 'CircleEmpty',
   CIRCLE_EXCLAMATION: 'CircleExclamation',
+  CIRCLE_INFO: 'CircleInfo',
   CIRCLE_QUESTION: 'CircleQuestion',
   CIRCLE_USER: 'CircleUser',
   CLOSE: 'Close',