Restore CSS rules and update stories

paranext · Mar 29, 2023 · 453d309 · 453d309
1 parent 71bd5f4
commit 453d309
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -16,34 +16,41 @@ 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',
   },
 };
 
 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
@@ -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 },
 };