feat: darkMode as prop

kadena-community · Oct 16, 2023 · a5857ed · a5857ed
1 parent 571f3b0
commit a5857ed
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx b/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.stories.tsx
@@ -5,8 +5,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 type StoryProps = {
-  linked: boolean;
   customSections: INavAccordionSectionProps[];
+  darkMode: boolean;
+  linked: boolean;
 } & INavAccordionProps;
 
 const meta: Meta<StoryProps> = {
@@ -33,6 +34,15 @@ const meta: Meta<StoryProps> = {
         type: { summary: 'boolean' },
       },
     },
+    darkMode: {
+      control: { type: 'boolean' },
+      description:
+        'By default the footer switches colors in dark/light mode. This prop allows you to override that behavior and always show dark mode.',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
+      },
+    },
   },
 };
 
@@ -42,10 +52,11 @@ export const Dynamic: IStory = {
   name: 'NavAccordion',
   args: {
     linked: false,
+    darkMode: false,
   },
-  render: ({ linked }) => {
+  render: ({ linked, darkMode }) => {
     return (
-      <NavAccordion.Root linked={linked}>
+      <NavAccordion.Root linked={linked} darkMode={darkMode}>
         <NavAccordion.Section
           title="Developers"
           onClose={() =>

diff --git a/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.tsx b/packages/libs/react-ui/src/components/NavAccordion/NavAccordion.tsx
@@ -8,6 +8,7 @@ import {
 } from './NavAccordion.context';
 import { navAccordionWrapperClass } from './NavAccordion.css';
 
+import { darkThemeClass } from '@theme/index';
 import type { FC, FunctionComponentElement } from 'react';
 import React, { useState } from 'react';
 
@@ -17,20 +18,32 @@ type Child = FunctionComponentElement<
 export interface INavAccordionRootProps {
   children?: Child[];
   linked?: boolean;
+  darkMode?: boolean;
 }
 
 export const NavAccordionRoot: FC<INavAccordionRootProps> = ({
   children,
   linked = false,
+  darkMode = false,
 }) => {
   const [openSections, setOpenSections] =
     useState<NavAccordionState>(initialOpenSections);
 
+  const NavElement = (): JSX.Element => (
+    <nav className={navAccordionWrapperClass}>{children}</nav>
+  );
+
   return (
     <NavAccordionContext.Provider
       value={{ openSections, setOpenSections, linked }}
     >
-      <nav className={navAccordionWrapperClass}>{children}</nav>
+      {darkMode ? (
+        <div className={darkThemeClass}>
+          <NavElement />
+        </div>
+      ) : (
+        <NavElement />
+      )}
     </NavAccordionContext.Provider>
   );
 };