this.gui 1.0.14 → 1.0.16

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

@@ -1,41 +1,45 @@
-
 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,51 @@
-
+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,38 @@
-
-.video {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+.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);
 }

package/src/stories/Atoms/Video/Video.jsx

@@ -1,41 +1,77 @@
-
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import './Video.css';
 
-/**
- * Video component for user interaction
- */
-export const Video = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'video--primary' : 'video--secondary';
+export const Video = ({
+  src,
+  poster,
+  autoplay = false,
+  loop = false,
+  muted = false,
+  controls = true,
+  width = '100%',
+  height = 'auto',
+  onPlay,
+  onPause,
+  onEnd,
+  showControlsOnHover = true,
+}) => {
+  const videoRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+
+  const handlePlayPause = () => {
+    if (isPlaying) {
+      videoRef.current.pause();
+    } else {
+      videoRef.current.play();
+    }
+    setIsPlaying(!isPlaying);
+  };
+
+  const handleVideoHover = () => setIsHovering(true);
+  const handleVideoLeave = () => setIsHovering(false);
+
   return (
     <div
-      className={['video', `video--${size}`, mode].join(' ')}
-      {...props}
+      className={`video-container ${showControlsOnHover && isHovering ? 'show-controls' : ''}`}
+      onMouseEnter={handleVideoHover}
+      onMouseLeave={handleVideoLeave}
+      style={{ width, height }}
     >
-      {children}
+      <video
+        ref={videoRef}
+        src={src}
+        poster={poster}
+        autoPlay={autoplay}
+        loop={loop}
+        muted={muted}
+        controls={controls}
+        onPlay={onPlay}
+        onPause={onPause}
+        onEnded={onEnd}
+        style={{ width: '100%', height: '100%' }}
+      />
+      <div className="video-controls">
+        <button onClick={handlePlayPause}>
+          {isPlaying ? 'Pause' : 'Play'}
+        </button>
+      </div>
     </div>
   );
 };
 
 Video.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,
+  src: PropTypes.string.isRequired,
+  poster: PropTypes.string,
+  autoplay: PropTypes.bool,
+  loop: PropTypes.bool,
+  muted: PropTypes.bool,
+  controls: PropTypes.bool,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  onPlay: PropTypes.func,
+  onPause: PropTypes.func,
+  onEnd: PropTypes.func,
+  showControlsOnHover: PropTypes.bool,
 };
-
-Video.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Video;

package/src/stories/Atoms/Video/Video.stories.jsx

@@ -1,41 +1,40 @@
-
+import React from 'react';
 import { Video } from './Video';
 
-// Storybook configuration for Video component
 export default {
   title: 'Atoms/Media/Video',
   component: Video,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    children: { control: 'text' },
+    src: { control: 'text', defaultValue: 'https://www.w3schools.com/html/mov_bbb.mp4' },
+    poster: { control: 'text', defaultValue: 'https://www.w3schools.com/html/pic_trulli.jpg' },
+    autoplay: { control: 'boolean', defaultValue: false },
+    loop: { control: 'boolean', defaultValue: false },
+    muted: { control: 'boolean', defaultValue: false },
+    controls: { control: 'boolean', defaultValue: true },
+    width: { control: 'text', defaultValue: '100%' },
+    height: { control: 'text', defaultValue: 'auto' },
+    showControlsOnHover: { control: 'boolean', defaultValue: true },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Video',
-  },
-};
+export const DefaultVideo = (args) => (
+  <Video {...args} />
+);
 
-export const Secondary = {
-  args: {
-    children: 'This is a secondary Video',
-  },
-};
+export const VideoWithCustomDimensions = () => (
+  <Video
+    src="https://www.w3schools.com/html/mov_bbb.mp4"
+    poster="https://www.w3schools.com/html/pic_trulli.jpg"
+    width="640px"
+    height="360px"
+  />
+);
 
-export const Large = {
-  args: {
-    size: 'large',
-    children: 'This is a large Video',
-  },
-};
-
-export const Small = {
-  args: {
-    size: 'small',
-    children: 'This is a small Video',
-  },
-};
+export const VideoAutoplayLoop = () => (
+  <Video
+    src="https://www.w3schools.com/html/mov_bbb.mp4"
+    autoplay
+    loop
+    muted
+  />
+);

package/src/stories/Atoms/index.js

@@ -1,3 +1,4 @@
+//this.GUI/src/stories/Atoms/index.js
 // Import all components directly
 import { Heading } from './Heading/Heading';
 import { Paragraph } from './Paragraph/Paragraph';
@@ -14,7 +15,7 @@ import { TextInput } from './TextInput/TextInput';
 import { TextArea } from './TextArea/TextArea';
 import { Select } from './Select/Select';
 import { Slider } from './Slider/Slider';
-import { RangeInput } from './RangeInput/RangeInput';
+import { Range } from './Range/Range';
 import { Image } from './Image/Image';
 import { Video } from './Video/Video';
 import { Audio } from './Audio/Audio';
@@ -28,6 +29,7 @@ import { Spinner } from './Spinner/Spinner';
 import { ProgressBar } from './ProgressBar/ProgressBar';
 import { Alert } from './Alert/Alert';
 import { Snackbar } from './Snackbar/Snackbar';
+import { Logo } from './Logo/Logo'; 
 
 // Flattened export of all components
 const Atoms = {
@@ -46,7 +48,7 @@ const Atoms = {
   TextArea,
   Select,
   Slider,
-  RangeInput,
+  Range,
   Image,
   Video,
   Audio,
@@ -56,6 +58,7 @@ const Atoms = {
   Badge,
   Tag,
   Loader,
+  Logo,
   Spinner,
   ProgressBar,
   Alert,

package/src/stories/Atoms/meta_Atoms.js

@@ -6,8 +6,10 @@ const Atomic = {
       { name: "Label", paths: { css: "./Label/Label.css", globalCss: "styles/global.css", jsx: "./Label/Label.jsx", stories: "./Label/Label.stories.jsx" }},
       { name: "Caption", paths: { css: "./Caption/Caption.css", globalCss: "styles/global.css", jsx: "./Caption/Caption.jsx", stories: "./Caption/Caption.stories.jsx" }},
     ],
-    "Interactive": [
+    "Layout": [
       { name: " Container", paths: { css: "./Container/Container.css", globalCss: "styles/global.css", jsx: "./Container/Container.jsx", stories: "./Container/Container.stories.jsx" }},
+    ],
+    "Interactive": [
       { name: "Button", paths: { css: "/Button/Button.css", globalCss: "styles/global.css", jsx: "./Button/Button.jsx", stories: "./Button/Button.stories.jsx" }},
       { name: "Link", paths: { css: "Atomic/Link/Link.css", globalCss: "styles/global.css", jsx: "./Link/Link.jsx", stories: "./Link/Link.stories.jsx" }},
       { name: "Icon", paths: { css: "/Atomic/Icon/Icon.css", globalCss: "styles/global.css", jsx: "./Icon/Icon.jsx", stories: "./Icon/Icon.stories.jsx" }},

package/src/stories/Layouts/Accordion/Accordion.css

@@ -0,0 +1,16 @@
+
+.accordion {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 16px;
+  gap: 8px;
+  border: 1px solid #ddd;
+}
+
+.accordion--primary {
+  background-color: #e3f2fd;
+}
+
+.accordion--secondary {
+  background-color: #fff;
+}

package/src/stories/Layouts/Accordion/Accordion.jsx

@@ -0,0 +1,31 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Accordion.css';
+
+/**
+ * Accordion layout component
+ */
+export const Accordion = ({ children, primary, ...props }) => {
+  const mode = primary ? 'accordion--primary' : 'accordion--secondary';
+  return (
+    <div className={['accordion', mode].join(' ')} {...props}>
+      {children}
+    </div>
+  );
+};
+
+Accordion.propTypes = {
+  /**
+   * Primary style for the layout
+   */
+  primary: PropTypes.bool,
+  /**
+   * Children components to be rendered inside the layout
+   */
+  children: PropTypes.node.isRequired,
+};
+
+Accordion.defaultProps = {
+  primary: false,
+};

package/src/stories/Layouts/Accordion/Accordion.stories.jsx

@@ -0,0 +1,28 @@
+
+import { Accordion } from './Accordion';
+
+// Storybook configuration for Accordion component
+export default {
+  title: 'Layouts/ContentOrganization/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'This is a primary Accordion layout.',
+  },
+};
+
+export const Secondary = {
+  args: {
+    primary: false,
+    children: 'This is a secondary Accordion layout.',
+  },
+};

package/src/stories/Layouts/DropdownMenu/DropdownMenu.css

@@ -0,0 +1,16 @@
+
+.dropdownmenu {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 16px;
+  gap: 8px;
+  border: 1px solid #ddd;
+}
+
+.dropdownmenu--primary {
+  background-color: #e3f2fd;
+}
+
+.dropdownmenu--secondary {
+  background-color: #fff;
+}

package/src/stories/Layouts/DropdownMenu/DropdownMenu.jsx

@@ -0,0 +1,31 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import './DropdownMenu.css';
+
+/**
+ * DropdownMenu layout component
+ */
+export const DropdownMenu = ({ children, primary, ...props }) => {
+  const mode = primary ? 'dropdownmenu--primary' : 'dropdownmenu--secondary';
+  return (
+    <div className={['dropdownmenu', mode].join(' ')} {...props}>
+      {children}
+    </div>
+  );
+};
+
+DropdownMenu.propTypes = {
+  /**
+   * Primary style for the layout
+   */
+  primary: PropTypes.bool,
+  /**
+   * Children components to be rendered inside the layout
+   */
+  children: PropTypes.node.isRequired,
+};
+
+DropdownMenu.defaultProps = {
+  primary: false,
+};

package/src/stories/Layouts/DropdownMenu/DropdownMenu.stories.jsx

@@ -0,0 +1,28 @@
+
+import { DropdownMenu } from './DropdownMenu';
+
+// Storybook configuration for DropdownMenu component
+export default {
+  title: 'Layouts/NavigationAndMenus/DropdownMenu',
+  component: DropdownMenu,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'This is a primary DropdownMenu layout.',
+  },
+};
+
+export const Secondary = {
+  args: {
+    primary: false,
+    children: 'This is a secondary DropdownMenu layout.',
+  },
+};

package/src/stories/Layouts/Flexbox/Flexbox.css

@@ -0,0 +1,16 @@
+
+.flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 16px;
+  gap: 8px;
+  border: 1px solid #ddd;
+}
+
+.flexbox--primary {
+  background-color: #e3f2fd;
+}
+
+.flexbox--secondary {
+  background-color: #fff;
+}

package/src/stories/Layouts/Flexbox/Flexbox.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Flexbox.css'; 
+
+export const Flexbox = ({ children, primary, ...props }) => {
+  const mode = primary ? 'flexbox--primary' : 'flexbox--secondary';
+  return (
+    <div className={['flexbox', mode].join(' ')} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/stories/Layouts/Flexbox/Flexbox.stories.jsx

@@ -0,0 +1,28 @@
+
+import { Flexbox } from './Flexbox';
+
+// Storybook configuration for Flexbox component
+export default {
+  title: 'Layouts/FlexboxLayout/Flexbox',
+  component: Flexbox,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    children: 'This is a primary Flexbox layout.',
+  },
+};
+
+export const Secondary = {
+  args: {
+    primary: false,
+    children: 'This is a secondary Flexbox layout.',
+  },
+};

package/src/stories/Layouts/Footer/Footer.css

@@ -0,0 +1,16 @@
+
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 16px;
+  gap: 8px;
+  border: 1px solid #ddd;
+}
+
+.footer--primary {
+  background-color: #e3f2fd;
+}
+
+.footer--secondary {
+  background-color: #fff;
+}