@react5/ui 1.0.16 → 1.0.17

package/packages/lib/src/components/Panel/Panel.stories.tsx

@@ -15,3 +15,7 @@ type Story = StoryObj<typeof Panel>;
 export const TextPanel: Story = {
   render: () => <Panel>Test</Panel>,
 };
+
+export const PanelWithHeader: Story = {
+  render: () => <Panel title="the header">Test</Panel>,
+};

package/packages/lib/src/components/Panel/Panel.tsx

@@ -6,13 +6,17 @@ import { bem } from '../../utils/bem';
 interface PanelProps {
   disabled?: boolean;
   className?: string;
+  title?: string;
   children: ReactNode;
 }
 const b = bem("panel");
-export const Panel = ({children, className}: PanelProps) => {
+export const Panel = ({children, className, title}: PanelProps) => {
   return (
     <div className={clsx(b(), className)}>
-      {children}
+      {title && <div className={b('header')}>{title}</div>}
+      <div className={b('content')}>
+        {children}
+      </div>
     </div>
   )
 }

package/packages/lib/src/styles/1-color-vars.scss

@@ -15,7 +15,7 @@ $primary_text_color_highlight: var(--primary_text_color_highlight, #F06060);
 $primary_text_color_disabled:  var(--primary_text_color_disabled,  rgba(#ffffff, 0.5));
 
 // Secondary Colors
-$secondary_bg_color:           var(--secondary_bg_color,           #f6f6f2);
+$secondary_bg_color:           var(--secondary_bg_color,           #e7ddd0);
 $secondary_bg_color_highlight: var(--secondary_bg_color_highlight, #D2CBAF);
 $secondary_text_color:         var(--secondary_text_color,         #5C4B51);
 $secondary_text_color_highlight: var(--secondary_text_color_highlight, #5C4B51);
@@ -33,8 +33,6 @@ $menu_text_color_highlight: var(--menu_text_color_highlight, #fff);
 // Additional Main Colors (Overrides)
 $primary_color:   var(--primary_color,   #402c17);
 $secondary_color: var(--secondary_color, #546970);
-$page_bg_color:   var(--page_bg_color,   #ead8d8);
-$page_text_color: var(--page_text_color, #342a1f);
 
 // Status Colors
 $success_color:             var(--success_color,             #b3d1b3);