this.gui 1.0.14 → 1.0.16

package/src/stories/Atoms/Button/Button.stories.jsx

@@ -1,54 +1,184 @@
+// src/stories/Atoms/Button/Button.stories.jsx
+import React from 'react';
 import { Button } from './Button';
+import './Button.css'; // Ensure styles are imported
 
 export default {
   title: 'Atoms/Interactive/Button',
   component: Button,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A customizable button component for various user interactions.',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary'],
+      },
+      description: 'Variant of the button.',
+      table: {
+        type: { summary: 'primary | secondary' },
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    color: {
+      control: {
+        type: 'select',
+        options: [
+          'info',
+          'warning',
+          'alert',
+          'success',
+          'neutral',
+          'dark',
+        ],
+      },
+      description: 'Semantic color accent of the button.',
+      table: {
+        type: { summary: `'info' | 'warning' | 'alert' | 'success' | 'neutral' | 'dark'` },
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large'],
+      },
+      description: 'Size of the button.',
+      table: {
+        type: { summary: 'small | medium | large' },
+        defaultValue: { summary: 'medium' },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'Text label of the button.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    noBorder: {
+      control: 'boolean',
+      description: 'Removes the border if set to true.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Button click handler.',
+      table: {
+        type: { summary: 'function' },
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Button children elements.',
+      table: {
+        type: { summary: 'node' },
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    style: {
+      control: 'object',
+      description: 'Inline styles.',
+      table: {
+        type: { summary: 'object' },
       },
     },
-  },
-  argTypes: {
-    primary: { control: 'boolean', description: 'Is this the primary button?' },
-    size: { control: { type: 'select', options: ['small', 'medium', 'large'] }, description: 'Size of the button' },
-    noborder: { control: 'boolean', description: 'No border button style' },
-    label: { control: 'text', description: 'Text label for the button' },
-    children: { control: 'text', description: 'Content inside the button' },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'Primary Button',
-  },
-};
+/**
+ * 
+ * Shows the default primary and secondary buttons without any semantic color accent.
+ */
+export const DefaultButtons = () => (
+  <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+    <Button variant="primary" size="medium">
+      Primary Default
+    </Button>
+    <Button variant="secondary" size="medium">
+      Secondary Default
+    </Button>
+    <Button variant="primary" size="medium" noBorder>
+      Primary No Border
+    </Button>
+    <Button variant="secondary" size="medium" noBorder>
+      Secondary No Border
+    </Button>
+  </div>
+);
 
-export const Secondary = {
-  args: {
-    children: 'Secondary Button',
-  },
-};
+/**
+ * 
+ * Demonstrates primary buttons with all semantic colors and sizes.
+ */
+export const PrimaryButtons = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+    <h3>Primary Buttons</h3>
+    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
+      <div key={color} style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
+        <Button variant="primary" color={color} size="small">
+          Primary {color} Small
+        </Button>
+        <Button variant="primary" color={color} size="medium">
+          Primary {color} Medium
+        </Button>
+        <Button variant="primary" color={color} size="large">
+          Primary {color} Large
+        </Button>
+        <Button variant="primary" color={color} size="medium" noBorder>
+          Primary {color} No Border
+        </Button>
+      </div>
+    ))}
+  </div>
+);
 
-export const NoBorder = {
-  args: {
-    noborder: true,
-    children: 'No Border Button',
-  },
-};
+/**
+ * 
+ * Demonstrates secondary buttons with all semantic colors and sizes.
+ */
+export const SecondaryButtons = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+    <h3>Secondary Buttons</h3>
+    {['info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
+      <div key={color} style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
+        <Button variant="secondary" color={color} size="small">
+          Secondary {color} Small
+        </Button>
+        <Button variant="secondary" color={color} size="medium">
+          Secondary {color} Medium
+        </Button>
+        <Button variant="secondary" color={color} size="large">
+          Secondary {color} Large
+        </Button>
+        <Button variant="secondary" color={color} size="medium" noBorder>
+          Secondary {color} No Border
+        </Button>
+      </div>
+    ))}
+  </div>
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'Large Button',
-  },
-};
+/**
+ * ### Interactive Playground
+ * 
+ * Allows dynamic interaction with the button props via Storybook controls.
+ */
+const Template = (args) => <Button {...args} />;
 
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'Small Button',
-  },
-};
+export const Playground = Template.bind({});
+Playground.args = {
+  variant: 'primary',
+  color: 'info',
+  size: 'medium',
+  label: 'Click Me',
+  noBorder: false,
+  children: 'Click Me',
+};
+Playground.storyName = 'Interactive Playground';

package/src/stories/Atoms/Caption/Caption.css

@@ -1,29 +1,169 @@
+/* src/stories/Atoms/Caption/Caption.css */
 
+/* Base Caption Styles */
 .caption {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  font-family: var(--font-family);
+  font-size: var(--font-size-small, 14px);
+  color: var(--text-color);
+  margin-top: var(--spacing-xs, 4px);
+  margin-bottom: var(--spacing-md, 16px);
+  display: block;
 }
 
-.caption--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+/* Size Variants */
+/* Size Variants */
+.caption--small {
+  font-size: var(--font-size-small);
 }
 
-.caption--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.caption--large {
+  font-size: var(--font-size-large);
 }
 
-.caption--small {
-  padding: 8px;
+/* Type Variants */
+
+/* 1. Image or Video Captions */
+.caption--image {
+  font-style: italic;
+  text-align: center;
 }
 
-.caption--medium {
-  padding: 16px;
+/* 2. Table Captions */
+.caption--table {
+  caption-side: top; /* Ensures the caption appears above the table */
+  font-weight: var(--font-weight-medium, 500);
 }
 
-.caption--large {
-  padding: 32px;
+/* 3. Form Element Captions */
+.caption--form {
+  font-size: var(--font-size-small, 14px);
+  color: var(--text-color);
+  margin-top: var(--spacing-xs, 4px);
+}
+
+/* 4. Chart or Graph Captions */
+.caption--chart {
+  font-weight: var(--font-weight-bold, 600);
+  margin-top: var(--spacing-sm, 8px);
+}
+
+/* 5. Audio or Video Transcriptions (Subtitles or Captions) */
+.caption--transcription {
+  font-size: var(--font-size-small, 14px);
+  color: var(--text-color);
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
+  border-radius: var(--border-radius, 4px);
+  position: absolute;
+  bottom: var(--spacing-xs, 4px);
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 90%;
+  text-align: center;
+}
+
+/* 6. Content Descriptions or Explanations */
+.caption--description {
+  font-size: var(--font-size-small, 14px);
+  color: var(--text-color);
+  margin-top: var(--spacing-xs, 4px);
+}
+
+/* 7. Captions for Interactive Elements */
+.caption--interactive {
+  font-size: var(--font-size-small, 14px);
+  color: var(--text-color);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+}
+
+/* Color Classes */
+.caption--info {
+  color: var(--info-color);
+}
+
+.caption--warning {
+  color: var(--warning-color);
+}
+
+.caption--alert {
+  color: var(--alert-color);
+}
+
+.caption--success {
+  color: var(--success-color);
+}
+
+.caption--neutral {
+  color: var(--neutral-color);
+}
+
+.caption--dark {
+  color: var(--dark-color);
+}
+
+.caption--classy-color-1 {
+  color: var(--classy-color-1);
+}
+
+.caption--classy-color-2 {
+  color: var(--classy-color-2);
+}
+
+.caption--classy-color-3 {
+  color: var(--classy-color-3);
+}
+
+.caption--classy-color-4 {
+  color: var(--classy-color-4);
+}
+
+.caption--classy-color-5 {
+  color: var(--classy-color-5);
+}
+
+.caption--small-switch-color-1 {
+  color: var(--small-switch-color-1);
+}
+
+.caption--small-switch-color-2 {
+  color: var(--small-switch-color-2);
+}
+
+.caption--natural-color-1 {
+  color: var(--natural-color-1);
+}
+
+.caption--natural-color-2 {
+  color: var(--natural-color-2);
+}
+
+.caption--natural-color-3 {
+  color: var(--natural-color-3);
+}
+
+.caption--grey-friend-1 {
+  color: var(--grey-friend-1);
+}
+
+.caption--grey-friend-2 {
+  color: var(--grey-friend-2);
+}
+
+.caption--shade-1 {
+  color: var(--shade-1);
+}
+
+.caption--shade-2 {
+  color: var(--shade-2);
+}
+
+.caption--shade-3 {
+  color: var(--shade-3);
+}
+
+.caption--shade-4 {
+  color: var(--shade-4);
 }

package/src/stories/Atoms/Caption/Caption.jsx

@@ -1,41 +1,72 @@
-
+// src/stories/Atoms/Caption/Caption.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './Caption.css';
 
-/**
- * Caption component for user interaction
- */
-export const Caption = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'caption--primary' : 'caption--secondary';
+export const Caption = ({
+  text,
+  variant = 'image', // 'image', 'table', 'form', 'chart', 'transcription', 'description', 'interactive'
+  size = 'normal', // 'small', 'normal', 'large'
+  color,
+  className = '',
+  style = {},
+}) => {
+  const captionClasses = classNames('caption', {
+    [`caption--${variant}`]: variant,
+    [`caption--${size}`]: size !== 'normal',
+    [`caption--${color}`]: color, // Apply color class if provided
+  }, className);
+
   return (
-    <div
-      className={['caption', `caption--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
+    <span className={captionClasses} style={style}>
+      {text}
+    </span>
   );
 };
 
 Caption.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
-  children: PropTypes.node.isRequired,
+  /** Text content of the caption */
+  text: PropTypes.string.isRequired,
+  /** Variant/type of the caption */
+  variant: PropTypes.oneOf([
+    'image',
+    'table',
+    'form',
+    'chart',
+    'transcription',
+    'description',
+    'interactive',
+  ]),
+  /** Size of the caption */
+  size: PropTypes.oneOf(['small', 'normal', 'large']),
+  /** Color of the caption (matches global theme colors) */
+  color: PropTypes.oneOf([
+    'info',
+    'warning',
+    'alert',
+    'success',
+    'neutral',
+    'dark',
+    'classy-color-1',
+    'classy-color-2',
+    'classy-color-3',
+    'classy-color-4',
+    'classy-color-5',
+    'small-switch-color-1',
+    'small-switch-color-2',
+    'natural-color-1',
+    'natural-color-2',
+    'natural-color-3',
+    'grey-friend-1',
+    'grey-friend-2',
+    'shade-1',
+    'shade-2',
+    'shade-3',
+    'shade-4',
+  ]),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
 };
-
-Caption.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Caption;