this.gui 1.0.15 → 1.0.17

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

@@ -1,29 +1,383 @@
+/*this.GUI/src/stories/Atoms/Tooltip/Tooltip.css*/
+/* 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;
 }

package/src/stories/Atoms/Tooltip/Tooltip.jsx

@@ -1,41 +1,46 @@
-
+//this.GUI/src/stories/Atoms/Tooltip/Tooltip.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Tooltip.css';
 
-/**
- * Tooltip component for user interaction
- */
-export const Tooltip = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'tooltip--primary' : 'tooltip--secondary';
+export const Tooltip = ({
+  content,
+  position = 'top',
+  variant = 'primary',
+  color = 'primary',  // Ensure default color is "primary"
+  showArrow = true,
+  children,
+  ...props
+}) => {
+  const tooltipClasses = `
+    tooltip
+    tooltip--${position}
+    tooltip--${variant}
+    tooltip--primary-${color}
+    ${variant === 'secondary' ? `tooltip--secondary-${color}` : ''}
+  `.trim(); // Ensuring the correct color class is applied
+
   return (
-    <div
-      className={['tooltip', `tooltip--${size}`, mode].join(' ')}
-      {...props}
-    >
+    <div className="tooltip-wrapper" {...props}>
       {children}
+      <div className={tooltipClasses}>
+        {content}
+        {showArrow && <div className="tooltip__arrow"></div>}
+      </div>
     </div>
   );
 };
 
 Tooltip.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
-   */
+  content: PropTypes.node.isRequired,
+  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right', 'north', 'south', 'east', 'west']),
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  color: PropTypes.oneOf([
+    'primary', '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'
+  ]),
+  showArrow: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
-
-Tooltip.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Tooltip;

package/src/stories/Atoms/Tooltip/Tooltip.stories.jsx

@@ -1,41 +1,52 @@
-
+//this.GUI/src/stories/Atoms/Tooltip/Tooltip.stories.jsx
+import React from 'react';
 import { Tooltip } from './Tooltip';
 
-// Storybook configuration for Tooltip component
 export default {
-  title: 'Atoms/Visual/Tooltip',
+  title: 'Atoms/Interactive/Tooltip',
   component: Tooltip,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    content: { control: 'text', defaultValue: 'Tooltip Content' },
+    position: {
+      control: { type: 'select', options: ['top', 'bottom', 'left', 'right', 'north', 'south', 'east', 'west'] },
+      defaultValue: 'top'
+    },
+    color: {
+      control: { type: 'select', options: [
+        'primary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark',
+        'classy-color-1', 'classy-color-2', 'classy-color-3', 'classy-color-4', 'classy-color-5'
+      ]},
+      defaultValue: 'primary'
+    },
+    variant: { control: { type: 'select', options: ['primary', 'secondary'] }, defaultValue: 'primary' },
+    showArrow: { control: 'boolean', defaultValue: true },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Tooltip',
-  },
-};
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Tooltip',
-  },
-};
+export const ColorVariants = () => (
+  <div style={{ padding: '50px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '20px' }}>
+    {['primary', 'info', 'warning', 'alert', 'success', 'neutral', 'dark'].map((color) => (
+      <Tooltip key={color} content={`This is ${color}`} color={color}>
+        <button>Hover for {color}</button>
+      </Tooltip>
+    ))}
+  </div>
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Tooltip',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Tooltip',
-  },
-};
+export const InteractiveTooltip = (args) => (
+  <div style={{ padding: '100px', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
+    <Tooltip {...args} position="top">
+      <button>Hover Top</button>
+    </Tooltip>
+    <Tooltip {...args} position="bottom">
+      <button>Hover Bottom</button>
+    </Tooltip>
+    <Tooltip {...args} position="left">
+      <button>Hover Left</button>
+    </Tooltip>
+    <Tooltip {...args} position="right">
+      <button>Hover Right</button>
+    </Tooltip>
+  </div>
+);

package/src/stories/Atoms/Video/Video.css

@@ -1,29 +1,39 @@
-
-.video {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+/*this.GUI/src/stories/Atoms/Video/Video.css */
+.video-container {
+  position: relative;
+  overflow: hidden;
+  background-color: #000;
+  display: inline-block;
 }
 
-.video--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
+video {
+  width: 100%;
+  height: 100%;
 }
 
-.video--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.video-controls {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 10;
+  display: none;
+  transition: opacity 0.3s ease;
 }
 
-.video--small {
-  padding: 8px;
+.video-container.show-controls .video-controls {
+  display: block;
 }
 
-.video--medium {
-  padding: 16px;
+.video-controls button {
+  background-color: rgba(0, 0, 0, 0.6);
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
 }
 
-.video--large {
-  padding: 32px;
+.video-controls button:hover {
+  background-color: rgba(0, 0, 0, 0.8);
 }