@react5/ui 1.0.15 → 1.0.17

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

@@ -2,4 +2,27 @@
   max-width: 768px;
   width: 100%;
   margin: 1rem;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    text-align: center;
+    background-color: $secondary_bg_color;
+    color: $secondary_text_color;
+    border: $border_size solid $primary_border_color;
+    border-radius: $border_radius $border_radius 0 0;
+    border-bottom: 0;
+    padding: 0.5rem;
+    font-weight: 500;
+    font-size: 1.2em;
+  }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    background-color: $page_bg_color;
+    color: $page_text_color;
+    border: $border_size solid $primary_border_color;
+  }
 }

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/components/TextField/TextField.tsx

@@ -21,7 +21,7 @@ interface ITextFieldProps {
   placeholder?: string;
   noLabel?: boolean;
   step?: number;
-  
+  align?: "left" | "center" | "right";
 }
 
 interface ITextFieldWrapperProps {
@@ -52,7 +52,7 @@ export const TextFieldWrapper = ({id, name, className, label, align = "right", c
 
 export const TextField = forwardRef<HTMLInputElement, ITextFieldProps>(({isPassword, value,
   onChange, onEnter, noLabel = false, onBlur, type = 'text', name, className, autoFocus = false,
-  readonly = false, label, error, placeholder, step }: ITextFieldProps, ref) => {
+  readonly = false, label, error, placeholder, step, align = "right" }: ITextFieldProps, ref) => {
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && onEnter) {
@@ -64,7 +64,7 @@ export const TextField = forwardRef<HTMLInputElement, ITextFieldProps>(({isPassw
   return (<div className={clsx(b(), className)}>
     <div className={b("wrapper")}>
       {!noLabel && <label
-        htmlFor={name} className={b("label")}>{label}:</label>}
+        htmlFor={name} className={clsx(b("label"), b("label", align))}>{label}:</label>}
       <div className={b("input-wrapper")}>
         <input
             id={name}

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);