feat: add info icon (#450)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.16
+
+- Adds `CircleInfo` to the `Icon` component
+
 ## v2.0.15
 
 - Adds `IconColor` options to the `Modal` component of

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"

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

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',