this.gui 1.0.16 → 1.0.17

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

@@ -1,16 +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;
-  flex-wrap: wrap;
+  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;
-  gap: 8px;
-  border: 1px solid #ddd;
 }
 
-.accordion--primary {
-  background-color: #e3f2fd;
+/* Icon for Expand/Collapse */
+.accordion__icon {
+  transition: transform var(--transition-speed);
 }
 
-.accordion--secondary {
-  background-color: #fff;
+.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

@@ -1,31 +1,74 @@
-
-import React from 'react';
+import React, { useState } 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';
+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={['accordion', mode].join(' ')} {...props}>
-      {children}
+    <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 = {
-  /**
-   * Primary style for the layout
-   */
-  primary: PropTypes.bool,
-  /**
-   * Children components to be rendered inside the layout
-   */
-  children: PropTypes.node.isRequired,
+  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 = {
-  primary: false,
-};
+  allowMultipleOpen: false,
+  color: 'primary',
+  variant: 'primary',
+  showArrow: true,
+  border: false,
+};

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

@@ -1,28 +1,39 @@
-
+import React from 'react';
 import { Accordion } from './Accordion';
 
-// Storybook configuration for Accordion component
 export default {
-  title: 'Layouts/ContentOrganization/Accordion',
+  title: 'Molecules/Organization/Accordion',
   component: Accordion,
-  parameters: {
-    layout: 'fullscreen',
-  },
   argTypes: {
-    children: { control: 'text' },
+    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 },
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    children: 'This is a primary Accordion layout.',
-  },
-};
+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 Secondary = {
-  args: {
-    primary: false,
-    children: 'This is a secondary Accordion layout.',
-  },
-};
+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/index.js

@@ -1,10 +1,7 @@
 // this.GUI/src/stories/Layouts/index.js
-import { Grid } from './Grid/Grid';
-import { Section } from './Section/Section';
 import { Flexbox } from './Flexbox/Flexbox';
 import { Header } from './Header/Header';
 import { Footer } from './Footer/Footer';
-import { DropdownMenu } from './DropdownMenu/DropdownMenu';
 import { Pagination } from './Pagination/Pagination';
 import { Sidebar } from './Sidebar/Sidebar';
 import { Tabs } from './Tabs/Tabs';
@@ -14,12 +11,9 @@ import { HeroImageVideo } from './HeroImageVideo/HeroImageVideo';
 
 // Flattened export of all layout components
 const Layouts = {
-  Grid,
-  Section,
   Flexbox,
   Header,
   Footer,
-  DropdownMenu,
   Pagination,
   Sidebar,
   Tabs,

package/src/stories/Layouts/meta_Layouts.js

@@ -3,19 +3,16 @@ const Layout = {
     "Grid": [
       { name: "Grid", paths: { css: "./Grid/Grid.css", globalCss: "styles/global.css", jsx: "./Layout/Grid/Grid.jsx", stories: "src/stories/Layout/Grid/Grid.stories.jsx" }},
     ],
-    "Section": [
-      { name: "Section", paths: { css: "./Section/Section.css", globalCss: "styles/global.css", jsx: "./Layout/Section/Section.jsx", stories: "src/stories/Layout/Section/Section.stories.jsx" }},
-    ],
     "FlexboxLayout": [
       { name: "Flexbox", paths: { css: "./Flexbox/Flexbox.css", globalCss: "styles/global.css", jsx: "./Layout/Flexbox/Flexbox.jsx", stories: "src/stories/Layout/Flexbox/Flexbox.stories.jsx" }},
     ],
     "NavigationAndMenus": [
       { name: "Header", paths: { css: "./Header/Header.css", globalCss: "styles/global.css", jsx: "./Layout/Header/Header.jsx", stories: "src/stories/Layout/Header/Header.stories.jsx" }},
       { name: "Footer", paths: { css: "./Footer/Footer.css", globalCss: "styles/global.css", jsx: "./Layout/Footer/Footer.jsx", stories: "src/stories/Layout/Footer/Footer.stories.jsx" }},
-      { name: "DropdownMenu", paths: { css: "./DropdownMenu/DropdownMenu.css", globalCss: "styles/global.css", jsx: "./Layout/DropdownMenu/DropdownMenu.jsx", stories: "src/stories/Layout/DropdownMenu/DropdownMenu.stories.jsx" }},
+      { name: "Dropdown", paths: { css: "./Dropdown/Dropdown.css", globalCss: "styles/global.css", jsx: "./Layout/Dropdown/Dropdown.jsx", stories: "src/stories/Layout/Dropdown/Dropdown.stories.jsx" }},
       { name: "Pagination", paths: { css: "./Pagination/Pagination.css", globalCss: "styles/global.css", jsx: "./Layout/Pagination/Pagination.jsx", stories: "src/stories/Layout/Pagination/Pagination.stories.jsx" }},
     ],
-    "ContentOrganization": [
+    "Organization": [
       { name: "Sidebar", paths: { css: "./Sidebar/Sidebar.css", globalCss: "styles/global.css", jsx: "./Layout/Sidebar/Sidebar.jsx", stories: "src/stories/Layout/Sidebar/Sidebar.stories.jsx" }},
       { name: "Tabs", paths: { css: "./Tabs/Tabs.css", globalCss: "styles/global.css", jsx: "./Layout/Tabs/Tabs.jsx", stories: "src/stories/Layout/Tabs/Tabs.stories.jsx" }},
       { name: "Accordion", paths: { css: "./Accordion/Accordion.css", globalCss: "styles/global.css", jsx: "./Layout/Accordion/Accordion.jsx", stories: "src/stories/Layout/Accordion/Accordion.stories.jsx" }},

package/src/stories/Molecules/Accordion/Accordion.css

@@ -1,4 +1,4 @@
-
+/*this.GUI/src/stories/Molecules/Accordion/Accordion.css*/
 .accordion {
   /* Default styles for Accordion */
 }

package/src/stories/Molecules/Accordion/Accordion.jsx

@@ -1,4 +1,4 @@
-
+//this.GUI/src/stories/Molecules/Accordion/Accordion.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Accordion.css';

package/src/stories/Molecules/Accordion/Accordion.stories.jsx

@@ -1,4 +1,4 @@
-
+//this.GUI/src/stories/Molecules/Accordion/Accordion.stories.jsx
 import { Accordion } from './Accordion';
 
 // Storybook configuration for Accordion component

package/src/stories/Molecules/AudioPlayer/AudioPlayer.css

@@ -1,4 +1,97 @@
+/*this.GUI/src/stories/Molecules/AudioPlayer/AudioPlayer.css*/
+.audio-player {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: rgba(245, 245, 245, 0.3); /* Subtle grey with low opacity */
+  padding: var(--spacing-md, 16px);
+  border-radius: var(--border-radius, 6px);
+  gap: var(--spacing-sm, 8px);
+  max-width: 400px;
+  border: 1px solid var(--border-color, #dddddd);
+  transition: background-color var(--transition-speed, 0.3s);
+}
+
+.audio-player__media img {
+  width: 100%;
+  border-radius: var(--border-radius, 6px);
+}
+
+.audio-player__track-name {
+  font-weight: bold;
+  font-size: var(--font-size-medium, 1.1rem);
+  margin-bottom: var(--spacing-xs, 8px);
+  color: var(--icon-color, #344b47);
+}
+
+.audio-player__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 8px);
+}
+
+.audio-player__seek {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  gap: var(--spacing-xs, 4px);
+}
+
+.audio-player__seek-slider {
+  width: 100%;
+  cursor: pointer;
+  appearance: none;
+  height: 4px;
+  background: var(--grey-friend-2, #96b1ac);
+  border-radius: 2px;
+  outline: none;
+  transition: background var(--transition-speed, 0.3s);
+}
 
-.audioplayer {
-  /* Default styles for AudioPlayer */
+.audio-player__seek-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background: var(--icon-color, #344b47);
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: -4px;
+  transition: background var(--transition-speed, 0.3s);
 }
+
+.audio-player__time {
+  font-size: var(--font-size-small, 0.9em);
+  color: var(--icon-color, #344b47);
+}
+
+.audio-player__playlist {
+  width: 100%;
+  margin-top: var(--spacing-sm, 8px);
+  border-top: 1px solid var(--border-color);
+  padding-top: var(--spacing-xs, 8px);
+}
+
+.audio-player__track {
+  padding: var(--spacing-sm, 8px);
+  cursor: pointer;
+  transition: background-color var(--transition-speed, 0.3s);
+  text-align: center;
+}
+
+.audio-player__track:hover {
+  background-color: var(--primary-color-hover, #16655C);
+  color: var(--text-color-inverse, #ffffff);
+}
+
+.audio-player__track.active {
+  background-color: var(--primary-color, #1F877D);
+  color: var(--text-color-inverse, #ffffff);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .audio-player {
+    max-width: 100%;
+  }
+}