From 3d041869a7509784d7c26a8042caca8e9ee02a94 Mon Sep 17 00:00:00 2001
From: Jason <mrloureed@gmail.com>
Date: Wed, 14 Feb 2024 14:41:03 -0500
Subject: [PATCH] Design maintenance prime 14 feb 2024 (#483)

---
 packages/core/package.json                                | 2 +-
 .../core/src/lib/button/__tests__/icon-button.spec.ts     | 5 +++++
 packages/core/src/lib/button/icon-button.svelte           | 4 +++-
 packages/core/src/lib/code-snippet.svelte                 | 1 +
 packages/storybook/src/stories/icon-button.mdx            | 4 ++++
 packages/storybook/src/stories/icon-button.stories.svelte | 8 ++++++++
 6 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index e8c516cd..f448a849 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/core/src/lib/button/__tests__/icon-button.spec.ts b/packages/core/src/lib/button/__tests__/icon-button.spec.ts
index d755143f..d9ac7b65 100644
--- a/packages/core/src/lib/button/__tests__/icon-button.spec.ts
+++ b/packages/core/src/lib/button/__tests__/icon-button.spec.ts
@@ -21,6 +21,11 @@ describe('IconButton', () => {
     );
   });
 
+  it('Renders a button in the style of the secondary variant if variant is specified as secondary', () => {
+    render(IconButton, { ...common, variant: 'secondary' });
+    expect(screen.getByRole('button')).toHaveClass('border-light', 'bg-light');
+  });
+
   it('Renders a button in the style of danger if the variant is specified as danger', () => {
     render(IconButton, { ...common, variant: 'danger' });
     expect(screen.getByRole('button')).toHaveClass(
diff --git a/packages/core/src/lib/button/icon-button.svelte b/packages/core/src/lib/button/icon-button.svelte
index e9cebc66..9253f7fa 100644
--- a/packages/core/src/lib/button/icon-button.svelte
+++ b/packages/core/src/lib/button/icon-button.svelte
@@ -27,7 +27,7 @@ export let disabled = false;
 export let type: 'button' | 'submit' | 'reset' = 'button';
 
 /** The communicated action type to the user. */
-export let variant: 'primary' | 'danger' = 'primary';
+export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
 
 /** Additional CSS classes to pass to the button. */
 let extraClasses: cx.Argument = '';
@@ -48,6 +48,8 @@ $: handleDisabled = preventHandler(disabled);
       'cursor-not-allowed text-gray-4': disabled,
       'hover:text-gray-7 active:text-gray-8':
         variant === 'primary' && !disabled,
+      'border-light bg-light hover:border-medium hover:bg-medium active:border-medium active:bg-gray-2':
+        variant === 'secondary' && !disabled,
       'hover:bg-danger-dark hover:bg-opacity-[0.08] hover:text-danger-dark active:bg-[rgba(190,53,54,0.16)] active:text-danger-dark':
         variant === 'danger' && !disabled,
     },
diff --git a/packages/core/src/lib/code-snippet.svelte b/packages/core/src/lib/code-snippet.svelte
index 53e760ce..c4d31c02 100644
--- a/packages/core/src/lib/code-snippet.svelte
+++ b/packages/core/src/lib/code-snippet.svelte
@@ -192,5 +192,6 @@ figure pre[class*='language-'] {
 
 figure pre[class*='language-'] > code[class*='language-'] {
   font-family: 'Roboto Mono Variable', 'Roboto Mono', ui-monospace, monospace;
+  font-size: 1em;
 }
 </style>
diff --git a/packages/storybook/src/stories/icon-button.mdx b/packages/storybook/src/stories/icon-button.mdx
index 3787782a..c6477f0f 100644
--- a/packages/storybook/src/stories/icon-button.mdx
+++ b/packages/storybook/src/stories/icon-button.mdx
@@ -15,6 +15,10 @@ import { IconButton } from '@viamrobotics/prime-core';
   <Story of={IconButtonStories.Primary} />
 </Canvas>
 
+<Canvas>
+  <Story of={IconButtonStories.Secondary} />
+</Canvas>
+
 <Canvas>
   <Story of={IconButtonStories.Danger} />
 </Canvas>
diff --git a/packages/storybook/src/stories/icon-button.stories.svelte b/packages/storybook/src/stories/icon-button.stories.svelte
index b8beefe0..6b4d05cc 100644
--- a/packages/storybook/src/stories/icon-button.stories.svelte
+++ b/packages/storybook/src/stories/icon-button.stories.svelte
@@ -12,6 +12,14 @@ import { IconButton } from '@viamrobotics/prime-core';
   />
 </Story>
 
+<Story name="Secondary">
+  <IconButton
+    icon="plus"
+    label="Add secondary object"
+    variant="secondary"
+  />
+</Story>
+
 <Story name="Danger">
   <IconButton
     icon="trash-can-outline"