this.gui 1.0.14 → 1.0.16

package/src/stories/Layouts/Tabs/Tabs.stories.jsx

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

package/src/stories/Layouts/index.js

@@ -0,0 +1,31 @@
+// 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';
+import { Accordion } from './Accordion/Accordion';
+import { HeroBanner } from './HeroBanner/HeroBanner';
+import { HeroImageVideo } from './HeroImageVideo/HeroImageVideo';
+
+// Flattened export of all layout components
+const Layouts = {
+  Grid,
+  Section,
+  Flexbox,
+  Header,
+  Footer,
+  DropdownMenu,
+  Pagination,
+  Sidebar,
+  Tabs,
+  Accordion,
+  HeroBanner,
+  HeroImageVideo,
+};
+
+export default Layouts;

package/src/stories/Layouts/meta_Layouts.js

@@ -0,0 +1,31 @@
+const Layout = {
+  "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: "Pagination", paths: { css: "./Pagination/Pagination.css", globalCss: "styles/global.css", jsx: "./Layout/Pagination/Pagination.jsx", stories: "src/stories/Layout/Pagination/Pagination.stories.jsx" }},
+    ],
+    "ContentOrganization": [
+      { 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" }},
+    ],
+    "HeroSections": [
+      { name: "HeroBanner", paths: { css: "./HeroBanner/HeroBanner.css", globalCss: "styles/global.css", jsx: "./Layout/HeroBanner/HeroBanner.jsx", stories: "src/stories/Layout/HeroBanner/HeroBanner.stories.jsx" }},
+      { name: "HeroImageVideo", paths: { css: "./HeroImageVideo/HeroImageVideo.css", globalCss: "styles/global.css", jsx: "./Layout/HeroImageVideo/HeroImageVideo.jsx", stories: "src/stories/Layout/HeroImageVideo/HeroImageVideo.stories.jsx" }},
+    ]
+  }
+};
+
+// Export the Layout object
+export default Layout;

package/src/stories/Molecules/Navbar/Navbar.css

@@ -1,87 +1,91 @@
 /* src/stories/Molecules/Navigation/Navbar/Navbar.css */
 
-/* CSS variables for dynamic styling */
+/* Root variables for theming */
 .navbar {
-  --navbar-background-color: rgba(34, 139, 34, 0); /* Light greenish background with low opacity */
-  --navbar-border-color: rgba(34, 139, 34, 0.235); /* Light border with dark greenish color and low opacity */
-  --navbar-padding: 8px 16px;
-  --navbar-margin: 16px;
-  --navbar-border-radius: 4px;
-
+  --navbar-background-color: var(--background-color);
+  --navbar-border-color: var(--border-color);
+  --navbar-height: 60px;
+  --navbar-link-color: var(--text-color);
+  --navbar-link-hover-background: rgba(255, 255, 255, 0.1);
+  --navbar-link-padding: 0 16px;
+  --navbar-fixed: fixed;
+  --navbar-z-index: 1000;
+
+  position: var(--navbar-fixed);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--navbar-height);
+  background-color: var(--navbar-background-color);
+  border-bottom: 1px solid var(--navbar-border-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--navbar-background-color);
-  border: 1px solid var(--navbar-border-color);
-  padding: var(--navbar-padding);
-  margin: var(--navbar-margin);
-  border-radius: var(--navbar-border-radius);
+  z-index: var(--navbar-z-index);
+  padding: 0 16px;
+  box-sizing: border-box;
 }
 
-.navbar__logo {
-  --navbar-logo-margin-right: 24px;
-
+.navbar__group {
   display: flex;
   align-items: center;
-  margin-right: var(--navbar-logo-margin-right);
 }
 
-.navbar__links {
-  list-style: none;
-  display: flex;
-  margin: 0;
-  padding: 0;
+.navbar__group--left {
+  flex: 1;
 }
 
-.navbar__item {
-  --navbar-item-margin: 0 12px;
-
-  margin: var(--navbar-item-margin);
+.navbar__group--center {
+  flex: 1;
+  justify-content: center;
 }
 
-.navbar__link {
-  --navbar-link-color: #006400;
-  --navbar-link-padding: 8px;
-
-  color: var(--navbar-link-color);
-  text-decoration: none;
-  padding: var(--navbar-link-padding);
+.navbar__group--right {
+  flex: 1;
+  justify-content: flex-end;
 }
 
-.navbar__link:hover,
-.navbar__link--active {
-  --navbar-link-hover-background-color: rgba(34, 139, 34, 0.1);
-  --navbar-link-hover-border-radius: 4px;
-
-  background-color: var(--navbar-link-hover-background-color);
-  border-radius: var(--navbar-link-hover-border-radius);
+.navbar__logo {
+  margin-right: 16px;
 }
 
-.navbar__controls {
-  --navbar-controls-margin-left: 24px;
+.navbar__search {
+  margin-right: 16px;
+}
 
+.navbar__link {
+  color: var(--navbar-link-color);
+  text-decoration: none;
+  padding: var(--navbar-link-padding);
   display: flex;
   align-items: center;
-  margin-left: var(--navbar-controls-margin-left);
-}
-
-.navbar__controls > * {
-  --navbar-control-item-margin-left: 12px;
-
-  margin-left: var(--navbar-control-item-margin-left);
+  height: 100%;
+  box-sizing: border-box;
+  transition: background-color 0.3s ease;
 }
 
-/* Button styles */
-.button {
-  --button-background-color: #228B22;
-  --button-text-color: #fff;
-
-  background-color: var(--button-background-color);
-  color: var(--button-text-color);
+.navbar__link:hover {
+  background-color: var(--navbar-link-hover-background);
 }
 
-.button:hover {
-  --button-hover-background-color: #1e7a1e;
-
-  background-color: var(--button-hover-background-color);
+@media (max-width: 768px) {
+  .navbar {
+    flex-wrap: wrap;
+    height: auto;
+  }
+
+  .navbar__group {
+    width: 100%;
+    justify-content: center;
+    margin: 8px 0;
+  }
+
+  .navbar__group--left,
+  .navbar__group--right {
+    justify-content: center;
+  }
+
+  .navbar__link {
+    padding: 8px;
+  }
 }

package/src/stories/Molecules/Navbar/Navbar.jsx

@@ -1,36 +1,23 @@
-// src/stories/Molecules/Navigation/Navbar/Navbar.jsx
-
+//this.GUI/src/stories/Molecules/Navbar/Navbar.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
 import './Navbar.css';
 
 export const Navbar = ({
-  links,
-  logo,
-  userControls,
+  leftItems = [],
+  centerItems = [],
+  rightItems = [],
+  logo = null,
+  searchComponent = null,
   styleOverrides = {},
 }) => {
-  // Build the style object for CSS variable overrides
   const style = {};
 
   // Map of styleOverrides keys to CSS variable names
   const cssVariableMap = {
     navbarBackgroundColor: '--navbar-background-color',
     navbarBorderColor: '--navbar-border-color',
-    navbarPadding: '--navbar-padding',
-    navbarMargin: '--navbar-margin',
-    navbarBorderRadius: '--navbar-border-radius',
-    logoMarginRight: '--navbar-logo-margin-right',
-    itemMargin: '--navbar-item-margin',
-    linkColor: '--navbar-link-color',
-    linkPadding: '--navbar-link-padding',
-    linkHoverBackgroundColor: '--navbar-link-hover-background-color',
-    linkHoverBorderRadius: '--navbar-link-hover-border-radius',
-    controlsMarginLeft: '--navbar-controls-margin-left',
-    controlItemMarginLeft: '--navbar-control-item-margin-left',
-    buttonBackgroundColor: '--button-background-color',
-    buttonTextColor: '--button-text-color',
-    buttonHoverBackgroundColor: '--button-hover-background-color',
+    navbarHeight: '--navbar-height',
   };
 
   // Set CSS variables based on styleOverrides
@@ -43,45 +30,53 @@ export const Navbar = ({
 
   return (
     <nav className="navbar" style={style}>
-      <div className="navbar__logo">
-        {logo}
+      <div className="navbar__group navbar__group--left">
+        {logo && <div className="navbar__logo">{logo}</div>}
+        {searchComponent && <div className="navbar__search">{searchComponent}</div>}
+        {leftItems.map((item, index) => (
+          <a key={index} href={item.url} className="navbar__link">
+            {item.label}
+          </a>
+        ))}
+      </div>
+      <div className="navbar__group navbar__group--center">
+        {centerItems.map((item, index) => (
+          <a key={index} href={item.url} className="navbar__link">
+            {item.label}
+          </a>
+        ))}
       </div>
-      <ul className="navbar__links">
-        {links.map((link, index) => (
-          <li key={index} className="navbar__item">
-            <a
-              href={link.url}
-              className={`navbar__link ${link.isActive ? 'navbar__link--active' : ''}`}
-            >
-              {link.label}
-            </a>
-          </li>
+      <div className="navbar__group navbar__group--right">
+        {rightItems.map((item, index) => (
+          <a key={index} href={item.url} className="navbar__link">
+            {item.label}
+          </a>
         ))}
-      </ul>
-      <div className="navbar__controls">
-        {userControls}
       </div>
     </nav>
   );
 };
 
 Navbar.propTypes = {
-  links: PropTypes.arrayOf(
+  leftItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ),
+  centerItems: PropTypes.arrayOf(
     PropTypes.shape({
       url: PropTypes.string.isRequired,
       label: PropTypes.string.isRequired,
-      isActive: PropTypes.bool,
     })
-  ).isRequired,
+  ),
+  rightItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      url: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ),
   logo: PropTypes.node,
-  userControls: PropTypes.node,
+  searchComponent: PropTypes.node,
   styleOverrides: PropTypes.object,
-};
-
-Navbar.defaultProps = {
-  logo: null,
-  userControls: null,
-  styleOverrides: {},
-};
-
-export default Navbar;
+};

package/src/stories/Molecules/Navbar/Navbar.stories.jsx

@@ -1,20 +1,70 @@
-
+import React from 'react';
 import { Navbar } from './Navbar';
+import { SearchBar } from '../SearchBar/SearchBar';
+import { Logo } from '../../Atoms/Logo/Logo'; // Importing the Logo component
 
-// Storybook configuration for Navbar component
 export default {
   title: 'Molecules/Navigation/Navbar',
   component: Navbar,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
   },
   argTypes: {
-    // Define argTypes here
+    logo: {
+      control: false, // We use a React node, so control is not applicable
+      description: 'Logo component or element to display in the navbar',
+    },
+    searchComponent: {
+      control: false, // We use a React node, so control is not applicable
+      description: 'Search component to display in the navbar',
+    },
+    leftItems: {
+      control: 'object',
+      description: 'Array of navigation items for the left side',
+    },
+    centerItems: {
+      control: 'object',
+      description: 'Array of navigation items for the center',
+    },
+    rightItems: {
+      control: 'object',
+      description: 'Array of navigation items for the right side',
+    },
+    styleOverrides: {
+      control: 'object',
+      description: 'Override default styles with CSS variables',
+    },
   },
 };
 
-export const Default = {
-  args: {
-    // Define default args here
-  },
+const Template = (args) => <Navbar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  logo: <Logo />,  // Using the Logo component here
+  searchComponent: <SearchBar placeholder="Search..." />,
+  leftItems: [
+    { url: '#home', label: 'Home' },
+    { url: '#about', label: 'About' },
+  ],
+  centerItems: [
+    { url: '#services', label: 'Services' },
+    { url: '#portfolio', label: 'Portfolio' },
+  ],
+  rightItems: [
+    { url: '#login', label: 'Login' },
+    { url: '#signup', label: 'Sign Up' },
+  ],
 };
+
+export const CustomizedNavbar = Template.bind({});
+CustomizedNavbar.args = {
+  ...Default.args,
+  styleOverrides: {
+    navbarBackgroundColor: '#1F1F1F',
+    navbarBorderColor: '#444444',
+    navbarHeight: '70px',
+    navbarLinkColor: '#FFFFFF',
+    navbarLinkHoverBackground: 'rgba(255, 255, 255, 0.2)',
+  },
+};

package/src/stories/Molecules/SearchBar/SearchBar.css

@@ -1,4 +1,69 @@
+/* src/stories/Molecules/FormElements/SearchBar/SearchBar.css */
 
 .searchbar {
-  /* Default styles for SearchBar */
+  display: flex;
+  align-items: center;
+  position: relative;
 }
+
+.searchbar__toggle {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  color: var(--text-color);
+  display: flex;
+  align-items: center;
+}
+
+.searchbar__icon {
+  width: 24px;
+  height: 24px;
+}
+
+.searchbar__input {
+  padding: 8px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--text-color);
+  margin-left: 8px;
+  transition: width 0.3s ease, opacity 0.3s ease;
+}
+
+@media (max-width: 768px) {
+  .searchbar__input {
+    width: 0;
+    opacity: 0;
+    visibility: hidden;
+    margin-left: 0;
+    pointer-events: none;
+  }
+
+  .searchbar--expanded .searchbar__input {
+    width: 150px; /* Adjust as needed */
+    opacity: 1;
+    visibility: visible;
+    margin-left: 8px;
+    pointer-events: auto;
+  }
+}
+
+@media (min-width: 769px) {
+  .searchbar__toggle {
+    display: none;
+  }
+
+  .searchbar__input {
+    width: 200px; /* Adjust as needed */
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+}
+
+/* Optional: Style the input when focused */
+.searchbar__input:focus {
+  border-color: var(--primary-color);
+  outline: none;
+}

package/src/stories/Molecules/SearchBar/SearchBar.jsx

@@ -1,25 +1,73 @@
+// src/stories/Molecules/SearchBar/SearchBar.jsx
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './SearchBar.css';
 
-/**
- * SearchBar component
- */
-export const SearchBar = (props) => {
+export const SearchBar = ({ placeholder, onSearch }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const handleToggle = () => {
+    setIsExpanded((prev) => !prev);
+  };
+
+  const handleInputChange = (e) => {
+    setQuery(e.target.value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSearch(query);
+  };
+
   return (
-    <div className="searchbar" {...props}>
-      {/* Component implementation */}
-    </div>
+    <form
+      className={`searchbar ${isExpanded ? 'searchbar--expanded' : ''}`}
+      onSubmit={handleSubmit}
+    >
+      <button
+        type="button"
+        className="searchbar__toggle"
+        onClick={handleToggle}
+        aria-label="Search"
+      >
+        {/* Magnifying glass icon */}
+        <svg
+          className="searchbar__icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            fill="currentColor"
+            d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5
+            6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79l5
+            5 1.5-1.5-5-5zM9.5 14C7.01 14 5 11.99 5
+            9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+          />
+        </svg>
+      </button>
+      <input
+        type="text"
+        className="searchbar__input"
+        placeholder={placeholder}
+        value={query}
+        onChange={handleInputChange}
+        aria-label="Search input"
+      />
+    </form>
   );
 };
 
 SearchBar.propTypes = {
-  // Define prop types here
+  placeholder: PropTypes.string,
+  onSearch: PropTypes.func,
 };
 
 SearchBar.defaultProps = {
-  // Define default props here
+  placeholder: 'Search...',
+  onSearch: () => {},
 };
 
-export default SearchBar;
+export default SearchBar;

package/src/stories/Molecules/SearchBar/SearchBar.stories.jsx

@@ -1,7 +1,8 @@
+// src/stories/Molecules/FormElements/SearchBar/SearchBar.stories.jsx
 
+import React from 'react';
 import { SearchBar } from './SearchBar';
 
-// Storybook configuration for SearchBar component
 export default {
   title: 'Molecules/FormElements/SearchBar',
   component: SearchBar,
@@ -9,12 +10,20 @@ export default {
     layout: 'centered',
   },
   argTypes: {
-    // Define argTypes here
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the search input',
+    },
+    onSearch: {
+      action: 'searched',
+      description: 'Function to call when the search form is submitted',
+    },
   },
 };
 
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};
+const Template = (args) => <SearchBar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Search...',
+};