this.gui 1.0.14 → 1.0.16

package/src/stories/Atoms/Toggle/Toggle.css

@@ -1,29 +1,117 @@
-
+/* Base Toggle Styles */
 .toggle {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.toggle__switch {
+  position: relative;
+  width: 40px;
+  height: 20px;
+  border-radius: var(--border-radius);
+  background-color: var(--off-color, var(--neutral-color));
+  transition: background-color var(--transition-speed);
+}
+
+.toggle__knob {
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--knob-color, var(--text-color-inverse));
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition: left var(--transition-speed);
+}
+
+.toggle--checked .toggle__switch {
+  background-color: var(--on-color, var(--primary-color));
+}
+
+.toggle--checked .toggle__knob {
+  left: calc(100% - 18px);
+}
+
+/* Disabled state */
+.toggle--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Size Variants */
+.toggle--small .toggle__switch {
+  width: 30px;
+  height: 16px;
+}
+
+.toggle--small .toggle__knob {
+  width: 12px;
+  height: 12px;
 }
 
-.toggle--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+.toggle--large .toggle__switch {
+  width: 60px;
+  height: 30px;
 }
 
-.toggle--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.toggle--large .toggle__knob {
+  width: 26px;
+  height: 26px;
 }
 
-.toggle--small {
-  padding: 8px;
+/* Color Variants */
+.toggle--primary .toggle__switch {
+  background-color: var(--primary-color);
 }
 
-.toggle--medium {
-  padding: 16px;
+.toggle--secondary .toggle__switch {
+  background-color: var(--secondary-color);
 }
 
-.toggle--large {
-  padding: 32px;
+.toggle--info .toggle__switch {
+  background-color: var(--info-color);
 }
+
+.toggle--warning .toggle__switch {
+  background-color: var(--warning-color);
+}
+
+.toggle--alert .toggle__switch {
+  background-color: var(--alert-color);
+}
+
+.toggle--success .toggle__switch {
+  background-color: var(--success-color);
+}
+
+.toggle--neutral .toggle__switch {
+  background-color: var(--neutral-color);
+}
+
+.toggle--dark .toggle__switch {
+  background-color: var(--dark-color);
+}
+
+/* Additional colors from design tokens */
+.toggle--classy-color-1 { background-color: var(--classy-color-1); }
+.toggle--classy-color-2 { background-color: var(--classy-color-2); }
+.toggle--classy-color-3 { background-color: var(--classy-color-3); }
+.toggle--classy-color-4 { background-color: var(--classy-color-4); }
+.toggle--classy-color-5 { background-color: var(--classy-color-5); }
+
+.toggle--small-switch-color-1 { background-color: var(--small-switch-color-1); }
+.toggle--small-switch-color-2 { background-color: var(--small-switch-color-2); }
+
+.toggle--natural-color-1 { background-color: var(--natural-color-1); }
+.toggle--natural-color-2 { background-color: var(--natural-color-2); }
+.toggle--natural-color-3 { background-color: var(--natural-color-3); }
+
+.toggle--grey-friend-1 { background-color: var(--grey-friend-1); }
+.toggle--grey-friend-2 { background-color: var(--grey-friend-2); }
+
+.toggle--shade-1 { background-color: var(--shade-1); }
+.toggle--shade-2 { background-color: var(--shade-2); }
+.toggle--shade-3 { background-color: var(--shade-3); }
+.toggle--shade-4 { background-color: var(--shade-4); }

package/src/stories/Atoms/Toggle/Toggle.jsx

@@ -1,41 +1,68 @@
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Toggle.css';
 
-/**
- * Toggle component for user interaction
- */
-export const Toggle = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'toggle--primary' : 'toggle--secondary';
+export const Toggle = ({
+  checked = false,
+  onChange,
+  disabled = false,
+  size = 'medium',
+  color = 'primary', // Color variant from the theme
+  label = '',
+  labelPosition = 'right', // 'left', 'right', 'top', 'bottom'
+  className = '',
+  ...props
+}) => {
+  const toggleClasses = `
+    toggle 
+    toggle--${size} 
+    toggle--${color} 
+    ${checked ? 'toggle--checked' : ''} 
+    ${disabled ? 'toggle--disabled' : ''} 
+    ${className}
+  `.trim();
+
+  const handleChange = () => {
+    if (!disabled && onChange) {
+      onChange(!checked);
+    }
+  };
+
   return (
-    <div
-      className={['toggle', `toggle--${size}`, mode].join(' ')}
-      {...props}
-    >
-      {children}
-    </div>
+    <label className={`toggle__label toggle__label--${labelPosition}`}>
+      {label && labelPosition === 'left' && <span>{label}</span>}
+      <div className={toggleClasses} onClick={handleChange} {...props}>
+        <div className="toggle__switch">
+          <div className="toggle__knob" />
+        </div>
+      </div>
+      {label && labelPosition !== 'left' && <span>{label}</span>}
+    </label>
   );
 };
 
 Toggle.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
+  /** Whether the toggle is checked (on/off state) */
+  checked: PropTypes.bool,
+  /** Callback when the toggle changes */
+  onChange: PropTypes.func.isRequired,
+  /** Whether the toggle is disabled */
+  disabled: PropTypes.bool,
+  /** Size of the toggle */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
-  children: PropTypes.node.isRequired,
-};
-
-Toggle.defaultProps = {
-  primary: false,
-  size: 'medium',
+  /** Color variant for the toggle */
+  color: PropTypes.oneOf([
+    'primary', 'secondary', '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',
+  ]),
+  /** Label for the toggle */
+  label: PropTypes.string,
+  /** Position of the label relative to the toggle */
+  labelPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+  /** Additional custom CSS classes */
+  className: PropTypes.string,
 };
 
 export default Toggle;

package/src/stories/Atoms/Toggle/Toggle.stories.jsx

@@ -1,41 +1,34 @@
-
+import React, { useState } from 'react';
 import { Toggle } from './Toggle';
 
-// Storybook configuration for Toggle component
 export default {
   title: 'Atoms/Interactive/Toggle',
   component: Toggle,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    checked: { control: 'boolean', defaultValue: false },
+    size: {
+      control: { type: 'select', options: ['small', 'medium', 'large'] },
+      defaultValue: 'medium',
+    },
+    color: {
+      control: { type: 'select', options: [
+        'primary', 'secondary', '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',
+      ]},
+      defaultValue: 'primary',
+    },
+    label: { control: 'text', defaultValue: 'Toggle label' },
+    labelPosition: {
+      control: { type: 'select', options: ['left', 'right', 'top', 'bottom'] },
+      defaultValue: 'right',
+    },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Toggle',
-  },
-};
+export const InteractiveToggle = (args) => {
+  const [checked, setChecked] = useState(args.checked);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Toggle',
-  },
-};
-
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Toggle',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Toggle',
-  },
+  return <Toggle {...args} checked={checked} onChange={setChecked} />;
 };

package/src/stories/Atoms/Tooltip/Tooltip.css

@@ -1,29 +1,382 @@
+/* Base Tooltip Styles */
+.tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
 
 .tooltip {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  background-color: var(--tooltip-background-color, #333);
+  color: var(--tooltip-text-color, #fff);
+  text-align: center;
+  padding: 8px;
+  border-radius: 4px;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  z-index: 999;
+  font-size: var(--font-size-base, 14px);
+}
+
+.tooltip--visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Arrow */
+.tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* Tooltip Position Variants */
+.tooltip--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip--top .tooltip__arrow {
+  top: 100%;
+  left: 50%;
+  border-width: 6px 6px 0 6px;
+  border-color: var(--tooltip-background-color) transparent transparent transparent;
+}
+
+.tooltip--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip--bottom .tooltip__arrow {
+  bottom: 100%;
+  left: 50%;
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent var(--tooltip-background-color) transparent;
+}
+
+.tooltip--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
+.tooltip--left .tooltip__arrow {
+  right: -6px;
+  top: 50%;
+  border-width: 6px 6px 6px 0;
+  border-color: transparent var(--tooltip-background-color) transparent transparent;
+}
+
+.tooltip--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tooltip--right .tooltip__arrow {
+  left: -6px;
+  top: 50%;
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent var(--tooltip-background-color);
+}
+
+/* Custom Variants: North, South, East, West */
+.tooltip--north {
+  top: -120%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip--south {
+  bottom: -120%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip--east {
+  left: 120%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tooltip--west {
+  right: 120%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Colors for Primary and Secondary Variants */
 .tooltip--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+  background-color: var(--primary-color, #1F877D);
+  color: #fff;
 }
 
 .tooltip--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+  background-color: transparent;
+  border: 2px solid var(--primary-color, #1F877D);
+  color: var(--primary-color, #1F877D);
 }
 
-.tooltip--small {
-  padding: 8px;
+/* Primary Colors (Background) */
+.tooltip--primary-primary {
+  background-color: var(--primary-color, #1F877D);
+  color: #fff;
+}
+
+.tooltip--primary-secondary {
+  background-color: var(--secondary-color, #39a182);
+  color: #fff;
+}
+
+.tooltip--primary-info {
+  background-color: var(--info-color, #008699);
+  color: #fff;
+}
+
+.tooltip--primary-warning {
+  background-color: var(--warning-color, #FF6F61);
+  color: #fff;
+}
+
+.tooltip--primary-alert {
+  background-color: var(--alert-color, #ffcc00);
+  color: #fff;
+}
+
+.tooltip--primary-success {
+  background-color: var(--success-color, #00B4B8);
+  color: #fff;
+}
+
+.tooltip--primary-neutral {
+  background-color: var(--neutral-color, #a4a4a4);
+  color: #fff;
+}
+
+.tooltip--primary-dark {
+  background-color: var(--dark-color, #2C2C2C);
+  color: #fff;
+}
+
+/* Classy Palette */
+.tooltip--primary-classy-color-1 {
+  background-color: var(--classy-color-1, #16655c);
+  color: #fff;
+}
+
+.tooltip--primary-classy-color-2 {
+  background-color: var(--classy-color-2, #96b1ac);
+  color: #fff;
+}
+
+.tooltip--primary-classy-color-3 {
+  background-color: var(--classy-color-3, #637c78);
+  color: #fff;
+}
+
+.tooltip--primary-classy-color-4 {
+  background-color: var(--classy-color-4, #405b83);
+  color: #fff;
+}
+
+.tooltip--primary-classy-color-5 {
+  background-color: var(--classy-color-5, #738db8);
+  color: #fff;
+}
+
+/* Small Switch Colors */
+.tooltip--primary-small-switch-color-1 {
+  background-color: var(--small-switch-color-1, #deefe6);
+  color: #000;
+}
+
+.tooltip--primary-small-switch-color-2 {
+  background-color: var(--small-switch-color-2, #4e8a6e);
+  color: #fff;
+}
+
+/* Natural Palette */
+.tooltip--primary-natural-color-1 {
+  background-color: var(--natural-color-1, #00aa96);
+  color: #fff;
+}
+
+.tooltip--primary-natural-color-2 {
+  background-color: var(--natural-color-2, #e8fefa);
+  color: #000;
 }
 
-.tooltip--medium {
-  padding: 16px;
+.tooltip--primary-natural-color-3 {
+  background-color: var(--natural-color-3, #e7fefe);
+  color: #000;
 }
 
-.tooltip--large {
-  padding: 32px;
+/* Grey Friends */
+.tooltip--primary-grey-friend-1 {
+  background-color: var(--grey-friend-1, #344b47);
+  color: #fff;
+}
+
+.tooltip--primary-grey-friend-2 {
+  background-color: var(--grey-friend-2, #96b1ac);
+  color: #fff;
+}
+
+/* Shades */
+.tooltip--primary-shade-1 {
+  background-color: var(--shade-1, #3b847a);
+  color: #fff;
+}
+
+.tooltip--primary-shade-2 {
+  background-color: var(--shade-2, #5da59a);
+  color: #fff;
+}
+
+.tooltip--primary-shade-3 {
+  background-color: var(--shade-3, #7ec7bc);
+  color: #fff;
+}
+
+.tooltip--primary-shade-4 {
+  background-color: var(--shade-4, #a0eade);
+  color: #fff;
+}
+
+/* Secondary Colors (Outlined with Text Colored) */
+.tooltip--secondary {
+  background-color: transparent;
+  border: 2px solid var(--primary-color, #1F877D);
+  color: var(--primary-color, #1F877D);
+}
+
+.tooltip--secondary-secondary {
+  border-color: var(--secondary-color, #39a182);
+  color: var(--secondary-color, #39a182);
+}
+
+.tooltip--secondary-info {
+  border-color: var(--info-color, #008699);
+  color: var(--info-color, #008699);
+}
+
+.tooltip--secondary-warning {
+  border-color: var(--warning-color, #FF6F61);
+  color: var(--warning-color, #FF6F61);
+}
+
+.tooltip--secondary-alert {
+  border-color: var(--alert-color, #ffcc00);
+  color: var(--alert-color, #ffcc00);
+}
+
+.tooltip--secondary-success {
+  border-color: var(--success-color, #00B4B8);
+  color: var(--success-color, #00B4B8);
+}
+
+.tooltip--secondary-neutral {
+  border-color: var(--neutral-color, #a4a4a4);
+  color: var(--neutral-color, #a4a4a4);
+}
+
+.tooltip--secondary-dark {
+  border-color: var(--dark-color, #2C2C2C);
+  color: var(--dark-color, #2C2C2C);
+}
+
+/* Classy Palette (Outlined) */
+.tooltip--secondary-classy-color-1 {
+  border-color: var(--classy-color-1, #16655c);
+  color: var(--classy-color-1, #16655c);
+}
+
+.tooltip--secondary-classy-color-2 {
+  border-color: var(--classy-color-2, #96b1ac);
+  color: var(--classy-color-2, #96b1ac);
+}
+
+.tooltip--secondary-classy-color-3 {
+  border-color: var(--classy-color-3, #637c78);
+  color: var(--classy-color-3, #637c78);
+}
+
+.tooltip--secondary-classy-color-4 {
+  border-color: var(--classy-color-4, #405b83);
+  color: var(--classy-color-4, #405b83);
+}
+
+.tooltip--secondary-classy-color-5 {
+  border-color: var(--classy-color-5, #738db8);
+  color: var(--classy-color-5, #738db8);
+}
+
+/* Small Switch Palette (Outlined) */
+.tooltip--secondary-small-switch-color-1 {
+  border-color: var(--small-switch-color-1, #deefe6);
+  color: var(--small-switch-color-1, #deefe6);
+}
+
+.tooltip--secondary-small-switch-color-2 {
+  border-color: var(--small-switch-color-2, #4e8a6e);
+  color: var(--small-switch-color-2, #4e8a6e);
+}
+
+/* Natural Palette (Outlined) */
+.tooltip--secondary-natural-color-1 {
+  border-color: var(--natural-color-1, #00aa96);
+  color: var(--natural-color-1, #00aa96);
+}
+
+.tooltip--secondary-natural-color-2 {
+  border-color: var(--natural-color-2, #e8fefa);
+  color: var(--natural-color-2, #e8fefa);
+}
+
+.tooltip--secondary-natural-color-3 {
+  border-color: var(--natural-color-3, #e7fefe);
+  color: var(--natural-color-3, #e7fefe);
+}
+
+/* Grey Friends (Outlined) */
+.tooltip--secondary-grey-friend-1 {
+  border-color: var(--grey-friend-1, #344b47);
+  color: var(--grey-friend-1, #344b47);
+}
+
+.tooltip--secondary-grey-friend-2 {
+  border-color: var(--grey-friend-2, #96b1ac);
+  color: var(--grey-friend-2, #96b1ac);
+}
+
+/* Shades (Outlined) */
+.tooltip--secondary-shade-1 {
+  border-color: var(--shade-1, #3b847a);
+  color: var(--shade-1, #3b847a);
+}
+
+.tooltip--secondary-shade-2 {
+  border-color: var(--shade-2, #5da59a);
+  color: var(--shade-2, #5da59a);
+}
+
+.tooltip--secondary-shade-3 {
+  border-color: var(--shade-3, #7ec7bc);
+  color: var(--shade-3, #7ec7bc);
+}
+
+.tooltip--secondary-shade-4 {
+  border-color: var(--shade-4, #a0eade);
+  color: var(--shade-4, #a0eade);
+}
+
+
+/* Hover Behavior */
+.tooltip-wrapper:hover .tooltip {
+  visibility: visible;
+  opacity: 1;
 }