From 453d309a9d3de805b191034f7b01419ee771e629 Mon Sep 17 00:00:00 2001
From: rolfheij-sil <rolf_heij@sil.org>
Date: Wed, 29 Mar 2023 10:31:34 +0200
Subject: [PATCH] Restore CSS rules and update stories

---
 .../components/papi-components/Button.tsx     |  9 ++-----
 .../components/papi-components/button.css     |  8 +++++-
 .../components/papi-components/switch.css     |  7 +++++-
 src/stories/Button.stories.tsx                | 25 ++++++++++++-------
 src/stories/Switch.stories.ts                 |  8 ++++++
 5 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/papi-components/Button.tsx b/src/renderer/components/papi-components/Button.tsx
index f01feda12c..2c1e62981c 100644
--- a/src/renderer/components/papi-components/Button.tsx
+++ b/src/renderer/components/papi-components/Button.tsx
@@ -5,6 +5,7 @@ import '@renderer/components/papi-components/button.css';
 export type ButtonProps = PropsWithChildren<{
   /**
    * Enabled status of button
+   * @default false
    */
   isDisabled?: boolean;
   /**
@@ -24,13 +25,7 @@ export type ButtonProps = PropsWithChildren<{
 /**
  * Primary UI component for user interaction
  */
-function Button({
-  isDisabled,
-  className,
-  onClick,
-  onContextMenu,
-  children,
-}: ButtonProps) {
+function Button({ isDisabled = false, className, onClick, onContextMenu, children }: ButtonProps) {
   return (
     <MuiButton
       disabled={isDisabled}
diff --git a/src/renderer/components/papi-components/button.css b/src/renderer/components/papi-components/button.css
index 37711d8851..4676044120 100644
--- a/src/renderer/components/papi-components/button.css
+++ b/src/renderer/components/papi-components/button.css
@@ -6,11 +6,17 @@
   cursor: pointer;
   display: inline-block;
   line-height: 1;
+}
+
+.papi-button.primary {
   color: white;
   background-color: #1ea7fd;
+}
+.papi-button.secondary {
+  color: #333;
+  background-color: transparent;
   box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
 }
-
 .papi-button.paratext {
   background-color: darkgreen;
   color: greenyellow;
diff --git a/src/renderer/components/papi-components/switch.css b/src/renderer/components/papi-components/switch.css
index d295a14dff..97142e665e 100644
--- a/src/renderer/components/papi-components/switch.css
+++ b/src/renderer/components/papi-components/switch.css
@@ -1,8 +1,13 @@
 .papi-switch {
-  background-color: #1ea7fd;
   background-color: transparent;
 }
 
+.papi-switch.primary {
+  background-color: #1ea7fd;
+}
+.papi-switch.secondary {
+  background-color: #6fc8ff;
+}
 .papi-switch.error {
   background-color: #ff0000;
 }
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 0ef410f218..b192140780 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -16,26 +16,34 @@ type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
   args: {
-    isDisabled: false,
+    className: 'primary',
     children: 'Primary Button',
   },
 };
 
+export const Secondary: Story = {
+  args: {
+    className: 'secondary',
+    children: 'Secondary Button',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+    children: 'Disabled Button',
+  },
+};
+
 export const CustomJSXContents: Story = {
   args: {
-    isDisabled: false,
     className: 'video',
-    children: (
-      <a href="https://www.youtube.com/watch?v=z_lgjFAxP6c">
-        Funny Meeting Video
-      </a>
-    ),
+    children: <a href="https://www.youtube.com/watch?v=z_lgjFAxP6c">Funny Meeting Video</a>,
   },
 };
 
 export const Paratext: Story = {
   args: {
-    isDisabled: false,
     className: 'paratext',
     children: 'Paratext Button',
   },
@@ -43,7 +51,6 @@ export const Paratext: Story = {
 
 export const ParatextBright: Story = {
   args: {
-    isDisabled: false,
     className: 'paratext bright',
     children: 'Paratext Button',
   },
diff --git a/src/stories/Switch.stories.ts b/src/stories/Switch.stories.ts
index 65cf0aed25..0fa051d1d5 100644
--- a/src/stories/Switch.stories.ts
+++ b/src/stories/Switch.stories.ts
@@ -19,6 +19,14 @@ export const Default: Story = {
   args: {},
 };
 
+export const Primary: Story = {
+  args: { className: 'primary' },
+};
+
+export const Secondary: Story = {
+  args: { className: 'secondary' },
+};
+
 export const Disabled: Story = {
   args: { isDisabled: true },
 };