this.gui 1.0.17 → 1.1.0

package/src/stories/Atoms/Button/Button.css

@@ -1,131 +0,0 @@
-/* src/stories/Atoms/Button/Button.css */
-
-/* Base styles */
-.button {
-  display: inline-block;
-  padding: var(--button-padding);
-  border-radius: var(--border-radius);
-  font-family: var(--font-family);
-  font-size: var(--button-font-size);
-  cursor: pointer;
-  transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
-  text-align: center;
-  border: 1px solid transparent;
-  box-shadow: var(--box-shadow);
-  margin-right: 10px;
-  background-color: var(--button-bg-color, transparent);
-  color: var(--button-text-color, var(--text-color));
-  border-color: var(--button-border-color, transparent);
-}
-
-/* Hover Effects */
-.button:hover {
-  background-color: var(--button-bg-hover-color, var(--button-bg-color));
-  color: var(--button-text-hover-color, var(--button-text-color));
-  border-color: var(--button-border-hover-color, var(--button-border-color));
-}
-
-/* Primary Variant */
-.button--primary {
-  --button-bg-color: var(--primary-color);
-  --button-text-color: var(--text-color-inverse);
-  --button-border-color: var(--primary-color);
-  --button-bg-hover-color: var(--primary-color-hover);
-}
-
-/* Secondary Variant */
-.button--secondary {
-  --button-bg-color: transparent;
-  --button-text-color: var(--secondary-color);
-  --button-border-color: var(--secondary-border-color);
-  --button-text-hover-color: var(--primary-color-hover);
-  --button-border-hover-color: var(--primary-color);
-}
-
-/* Semantic Color Modifiers */
-
-/* For Primary Variant: Set background colors based on semantic colors */
-.button--primary.button--info {
-  --button-bg-color: var(--info-color);
-  --button-border-color: var(--info-color);
-  --button-bg-hover-color: var(--info-color-hover);
-}
-
-.button--primary.button--warning {
-  --button-bg-color: var(--warning-color);
-  --button-border-color: var(--warning-color);
-  --button-bg-hover-color: var(--warning-color-hover);
-}
-
-.button--primary.button--alert {
-  --button-bg-color: var(--alert-color);
-  --button-border-color: var(--alert-color);
-  --button-bg-hover-color: var(--alert-color-hover);
-  --button-text-color: #2C2C2C; /* Dark text for better readability */
-}
-
-.button--primary.button--success {
-  --button-bg-color: var(--success-color);
-  --button-border-color: var(--success-color);
-  --button-bg-hover-color: var(--success-color-hover);
-}
-
-.button--primary.button--neutral {
-  --button-bg-color: var(--neutral-color);
-  --button-border-color: var(--neutral-color);
-  --button-bg-hover-color: var(--neutral-color-hover);
-}
-
-.button--primary.button--dark {
-  --button-bg-color: var(--dark-color);
-  --button-border-color: var(--dark-color);
-  --button-bg-hover-color: var(--dark-color-hover);
-}
-
-/* For Secondary Variant: Set text and border colors based on semantic colors */
-.button--secondary.button--info {
-  --button-text-color: var(--info-color);
-  --button-border-color: var(--info-color);
-  --button-text-hover-color: var(--info-color-hover);
-  --button-border-hover-color: var(--info-color-hover);
-}
-
-.button--secondary.button--warning {
-  --button-text-color: var(--warning-color);
-  --button-border-color: var(--warning-color);
-  --button-text-hover-color: var(--warning-color-hover);
-  --button-border-hover-color: var(--warning-color-hover);
-}
-
-.button--secondary.button--alert {
-  --button-text-color: var(--alert-color);
-  --button-border-color: var(--alert-color);
-  --button-text-hover-color: var(--alert-color-hover);
-  --button-border-hover-color: var(--alert-color-hover);
-}
-
-.button--secondary.button--success {
-  --button-text-color: var(--success-color);
-  --button-border-color: var(--success-color);
-  --button-text-hover-color: var(--success-color-hover);
-  --button-border-hover-color: var(--success-color-hover);
-}
-
-.button--secondary.button--neutral {
-  --button-text-color: var(--neutral-color);
-  --button-border-color: var(--neutral-color);
-  --button-text-hover-color: var(--neutral-color-hover);
-  --button-border-hover-color: var(--neutral-color-hover);
-}
-
-.button--secondary.button--dark {
-  --button-text-color: var(--dark-color);
-  --button-border-color: var(--dark-color);
-  --button-text-hover-color: var(--dark-color-hover);
-  --button-border-hover-color: var(--dark-color-hover);
-}
-
-/* No Border Modifier */
-.button--no-border {
-  border: none;
-}

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

@@ -1,47 +0,0 @@
-// src/stories/Atoms/Button/Button.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Button.css'; // Ensure styles are imported
-
-export const Button = ({
-  variant = 'primary', // 'primary', 'secondary'
-  color, // 'info', 'warning', 'alert', 'success', 'neutral', 'dark'
-  size = 'medium',
-  label = '',
-  noBorder = false,
-  children,
-  className = '',
-  style = {},
-  ...props
-}) => {
-  const variantClass = `button--${variant}`;
-  const colorClass = color ? `button--${color}` : '';
-  const sizeClass = `button--${size}`;
-  const borderClass = noBorder ? 'button--no-border' : '';
-
-  const combinedClassName = `button ${variantClass} ${colorClass} ${sizeClass} ${borderClass} ${className}`.trim();
-
-  return (
-    <button type="button" className={combinedClassName} style={style} {...props}>
-      {children || label}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-  color: PropTypes.oneOf([
-    'info',
-    'warning',
-    'alert',
-    'success',
-    'neutral',
-    'dark',
-  ]),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  label: PropTypes.string,
-  noBorder: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  style: PropTypes.object,
-};

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

@@ -1,184 +0,0 @@
-// 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,
-  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' },
-      },
-    },
-  },
-};
-
-/**
- * 
- * 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>
-);
-
-/**
- * 
- * 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>
-);
-
-/**
- * 
- * 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>
-);
-
-/**
- * ### Interactive Playground
- * 
- * Allows dynamic interaction with the button props via Storybook controls.
- */
-const Template = (args) => <Button {...args} />;
-
-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,169 +0,0 @@
-/* src/stories/Atoms/Caption/Caption.css */
-
-/* Base Caption Styles */
-.caption {
-  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;
-}
-
-/* Size Variants */
-/* Size Variants */
-.caption--small {
-  font-size: var(--font-size-small);
-}
-
-.caption--large {
-  font-size: var(--font-size-large);
-}
-
-/* Type Variants */
-
-/* 1. Image or Video Captions */
-.caption--image {
-  font-style: italic;
-  text-align: center;
-}
-
-/* 2. Table Captions */
-.caption--table {
-  caption-side: top; /* Ensures the caption appears above the table */
-  font-weight: var(--font-weight-medium, 500);
-}
-
-/* 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,72 +0,0 @@
-// src/stories/Atoms/Caption/Caption.jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './Caption.css';
-
-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 (
-    <span className={captionClasses} style={style}>
-      {text}
-    </span>
-  );
-};
-
-Caption.propTypes = {
-  /** 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,
-};