this.gui 1.0.15 → 1.0.17

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

@@ -1,41 +1,78 @@
-
-import React from 'react';
+//this.GUI/src/stories/Atoms/Video/Video.jsx
+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,41 @@
-
+//this.GUI/src/stories/Atoms/Video/Video.stories.jsx
+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,9 @@ 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'; 
+import { Section } from './Section/Section';
+import { Grid } from './Grid/Grid';
 
 // Flattened export of all components
 const Atoms = {
@@ -46,7 +50,7 @@ const Atoms = {
   TextArea,
   Select,
   Slider,
-  RangeInput,
+  Range,
   Image,
   Video,
   Audio,
@@ -56,10 +60,13 @@ const Atoms = {
   Badge,
   Tag,
   Loader,
+  Logo,
   Spinner,
   ProgressBar,
   Alert,
   Snackbar,
+  Section,
+  Grid
 };
 
 export default Atoms;

package/src/stories/Atoms/meta_Atoms.js

@@ -6,8 +6,13 @@ 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" }},
     ],
+    "Layout": [
+      { name: "Container", paths: { css: "./Container/Container.css", globalCss: "styles/global.css", jsx: "./Container/Container.jsx", stories: "./Container/Container.stories.jsx" }},
+      { name: "Grid", paths: { css: "./Grid/Grid.css", globalCss: "styles/Grid.css", jsx: "./Grid/Grid.jsx", stories: "./Grid/Grid.stories.jsx" }},
+      { name: "Section", paths: { css: "./Section/Section.css", globalCss: "styles/Section.css", jsx: "./Section/Section.jsx", stories: "./Section/Grid.stories.jsx" }},
+
+    ],
     "Interactive": [
-      { name: " Container", paths: { css: "./Container/Container.css", globalCss: "styles/global.css", jsx: "./Container/Container.jsx", stories: "./Container/Container.stories.jsx" }},
       { 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,293 @@
+/* Base Accordion Styles */
+.accordion {
+  border-radius: var(--border-radius);
+  transition: var(--transition-speed) ease;
+}
+
+/* Accordion Item Styles */
+.accordion__item {
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Accordion Header */
+.accordion__header {
+  padding: 16px;
+  width: 100%;
+  text-align: left;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background-color var(--transition-speed), color var(--transition-speed);
+}
+
+/* PRIMARY VARIANT (Full Background Color) */
+.accordion--primary .accordion__header {
+  background-color: var(--primary-color);
+  color: var(--text-color-inverse);
+}
+
+/* Ensure the secondary variant starts with no background */
+.accordion--secondary .accordion__header {
+  background-color: transparent;
+}
+
+/* Background color variants for Primary */
+.accordion--primary.accordion--secondary .accordion__header {
+  background-color: var(--secondary-color);
+}
+
+.accordion--primary.accordion--info .accordion__header {
+  background-color: var(--info-color);
+}
+
+.accordion--primary.accordion--warning .accordion__header {
+  background-color: var(--warning-color);
+}
+
+.accordion--primary.accordion--alert .accordion__header {
+  background-color: var(--alert-color);
+}
+
+.accordion--primary.accordion--success .accordion__header {
+  background-color: var(--success-color);
+}
+
+.accordion--primary.accordion--neutral .accordion__header {
+  background-color: var(--neutral-color);
+}
+
+.accordion--primary.accordion--dark .accordion__header {
+  background-color: var(--dark-color);
+}
+
+/* Classy Palette */
+.accordion--primary.accordion--classy-color-1 .accordion__header {
+  background-color: var(--classy-color-1);
+}
+
+.accordion--primary.accordion--classy-color-2 .accordion__header {
+  background-color: var(--classy-color-2);
+}
+
+.accordion--primary.accordion--classy-color-3 .accordion__header {
+  background-color: var(--classy-color-3);
+}
+
+.accordion--primary.accordion--classy-color-4 .accordion__header {
+  background-color: var(--classy-color-4);
+}
+
+.accordion--primary.accordion--classy-color-5 .accordion__header {
+  background-color: var(--classy-color-5);
+}
+
+/* Small Switch Palette */
+.accordion--primary.accordion--small-switch-color-1 .accordion__header {
+  background-color: var(--small-switch-color-1);
+}
+
+.accordion--primary.accordion--small-switch-color-2 .accordion__header {
+  background-color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.accordion--primary.accordion--natural-color-1 .accordion__header {
+  background-color: var(--natural-color-1);
+}
+
+.accordion--primary.accordion--natural-color-2 .accordion__header {
+  background-color: var(--natural-color-2);
+}
+
+.accordion--primary.accordion--natural-color-3 .accordion__header {
+  background-color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.accordion--primary.accordion--grey-friend-1 .accordion__header {
+  background-color: var(--grey-friend-1);
+}
+
+.accordion--primary.accordion--grey-friend-2 .accordion__header {
+  background-color: var(--grey-friend-2);
+}
+
+/* Shades */
+.accordion--primary.accordion--shade-1 .accordion__header {
+  background-color: var(--shade-1);
+}
+
+.accordion--primary.accordion--shade-2 .accordion__header {
+  background-color: var(--shade-2);
+}
+
+.accordion--primary.accordion--shade-3 .accordion__header {
+  background-color: var(--shade-3);
+}
+
+.accordion--primary.accordion--shade-4 .accordion__header {
+  background-color: var(--shade-4);
+}
+
+/* SECONDARY VARIANT (Border Only) */
+.accordion--secondary .accordion__header {
+  background-color: transparent; /* Ensure transparent background */
+  border: 2px solid var(--primary-color); /* Default border color */
+  color: var(--primary-color); /* Default text color */
+}
+
+.accordion--secondary.accordion--secondary .accordion__header {
+  border-color: var(--secondary-color);
+  color: var(--secondary-color);
+}
+
+.accordion--secondary.accordion--info .accordion__header {
+  border-color: var(--info-color);
+  color: var(--info-color);
+}
+
+.accordion--secondary.accordion--warning .accordion__header {
+  border-color: var(--warning-color);
+  color: var(--warning-color);
+}
+
+.accordion--secondary.accordion--alert .accordion__header {
+  border-color: var(--alert-color);
+  color: var(--alert-color);
+}
+
+.accordion--secondary.accordion--success .accordion__header {
+  border-color: var(--success-color);
+  color: var(--success-color);
+}
+
+.accordion--secondary.accordion--neutral .accordion__header {
+  border-color: var(--neutral-color);
+  color: var(--neutral-color);
+}
+
+.accordion--secondary.accordion--dark .accordion__header {
+  border-color: var(--dark-color);
+  color: var(--dark-color);
+}
+
+/* Classy Palette */
+.accordion--secondary.accordion--classy-color-1 .accordion__header {
+  border-color: var(--classy-color-1);
+  color: var(--classy-color-1);
+}
+
+.accordion--secondary.accordion--classy-color-2 .accordion__header {
+  border-color: var(--classy-color-2);
+  color: var(--classy-color-2);
+}
+
+.accordion--secondary.accordion--classy-color-3 .accordion__header {
+  border-color: var(--classy-color-3);
+  color: var(--classy-color-3);
+}
+
+.accordion--secondary.accordion--classy-color-4 .accordion__header {
+  border-color: var(--classy-color-4);
+  color: var(--classy-color-4);
+}
+
+.accordion--secondary.accordion--classy-color-5 .accordion__header {
+  border-color: var(--classy-color-5);
+  color: var(--classy-color-5);
+}
+
+/* Small Switch Palette */
+.accordion--secondary.accordion--small-switch-color-1 .accordion__header {
+  border-color: var(--small-switch-color-1);
+  color: var(--small-switch-color-1);
+}
+
+.accordion--secondary.accordion--small-switch-color-2 .accordion__header {
+  border-color: var(--small-switch-color-2);
+  color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.accordion--secondary.accordion--natural-color-1 .accordion__header {
+  border-color: var(--natural-color-1);
+  color: var(--natural-color-1);
+}
+
+.accordion--secondary.accordion--natural-color-2 .accordion__header {
+  border-color: var(--natural-color-2);
+  color: var(--natural-color-2);
+}
+
+.accordion--secondary.accordion--natural-color-3 .accordion__header {
+  border-color: var(--natural-color-3);
+  color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.accordion--secondary.accordion--grey-friend-1 .accordion__header {
+  border-color: var(--grey-friend-1);
+  color: var(--grey-friend-1);
+}
+
+.accordion--secondary.accordion--grey-friend-2 .accordion__header {
+  border-color: var(--grey-friend-2);
+  color: var(--grey-friend-2);
+}
+
+/* Shades */
+.accordion--secondary.accordion--shade-1 .accordion__header {
+  border-color: var(--shade-1);
+  color: var(--shade-1);
+}
+
+.accordion--secondary.accordion--shade-2 .accordion__header {
+  border-color: var(--shade-2);
+  color: var(--shade-2);
+}
+
+.accordion--secondary.accordion--shade-3 .accordion__header {
+  border-color: var(--shade-3);
+  color: var(--shade-3);
+}
+
+.accordion--secondary.accordion--shade-4 .accordion__header {
+  border-color: var(--shade-4);
+  color: var(--shade-4);
+}
+/* Accordion Content */
+.accordion__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  padding: 0 16px;
+  background-color: inherit;
+}
+
+/* Border Option for Accordion Content */
+.accordion--border .accordion__content {
+  border: 1px solid var(--border-color);
+}
+
+.accordion__content--open {
+  max-height: 200px;
+  padding: 16px;
+}
+
+/* Icon for Expand/Collapse */
+.accordion__icon {
+  transition: transform var(--transition-speed);
+}
+
+.accordion__icon--open {
+  transform: rotate(180deg);
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .accordion__header {
+    font-size: var(--font-size-small);
+  }
+}

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

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './Accordion.css';
+
+export const Accordion = ({ allowMultipleOpen, items, color, variant, showArrow, border }) => {
+  const [openIndexes, setOpenIndexes] = useState([]);
+
+  const handleToggle = (index) => {
+    if (openIndexes.includes(index)) {
+      setOpenIndexes(openIndexes.filter((i) => i !== index));
+    } else {
+      setOpenIndexes(allowMultipleOpen ? [...openIndexes, index] : [index]);
+    }
+  };
+
+  const accordionClass = `accordion accordion--${variant} accordion--${color} ${border ? 'accordion--border' : ''}`;
+
+  return (
+    <div className={accordionClass}>
+      {items.map((item, index) => (
+        <div key={index} className="accordion__item">
+          <button
+            className={`accordion__header`}
+            onClick={() => handleToggle(index)}
+            aria-expanded={openIndexes.includes(index)}
+            aria-controls={`accordion__content-${index}`}
+          >
+            {item.title}
+            {showArrow && (
+              <span className={`accordion__icon ${openIndexes.includes(index) ? 'accordion__icon--open' : ''}`}>
+                &#9662;
+              </span>
+            )}
+          </button>
+          <div
+            id={`accordion__content-${index}`}
+            className={`accordion__content ${openIndexes.includes(index) ? 'accordion__content--open' : ''}`}
+          >
+            {item.content}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+Accordion.propTypes = {
+  allowMultipleOpen: PropTypes.bool,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      content: PropTypes.node.isRequired,
+    })
+  ).isRequired,
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  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'
+  ]),
+  showArrow: PropTypes.bool,
+  border: PropTypes.bool,
+};
+
+Accordion.defaultProps = {
+  allowMultipleOpen: false,
+  color: 'primary',
+  variant: 'primary',
+  showArrow: true,
+  border: false,
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Accordion } from './Accordion';
+
+export default {
+  title: 'Molecules/Organization/Accordion',
+  component: Accordion,
+  argTypes: {
+    allowMultipleOpen: { control: 'boolean', defaultValue: false },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+      defaultValue: 'primary',
+    },
+    color: {
+      control: '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',
+    },
+    showArrow: { control: 'boolean', defaultValue: true },
+    border: { control: 'boolean', defaultValue: false },
+  },
+};
+
+const items = [
+  { title: 'Section 1', content: 'Content for section 1' },
+  { title: 'Section 2', content: 'Content for section 2' },
+  { title: 'Section 3', content: 'Content for section 3' },
+];
+
+export const DefaultAccordion = (args) => <Accordion {...args} items={items} />;
+export const MultipleOpenAccordion = (args) => <Accordion {...args} allowMultipleOpen={true} items={items} />;
+export const AccordionWithBorder = (args) => <Accordion {...args} border={true} items={items} />;

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>
+  );
+};