this.gui 1.0.16 → 1.0.18

package/src/stories/Molecules/Dropdown/Dropdown.stories.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Dropdown } from './Dropdown';
+
+export default {
+  title: 'Molecules/Menus/Dropdown',
+  component: Dropdown,
+  argTypes: {
+    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',
+      ],
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+    },
+    searchable: { control: 'boolean' },
+    showArrow: { control: 'boolean', defaultValue: true },
+  },
+};
+
+const options = [
+  'Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'
+];
+
+export const BasicDropdown = (args) => <Dropdown {...args} options={options} />;
+BasicDropdown.args = {
+  placeholder: 'Select an option',
+  searchable: false,
+  variant: 'primary',
+  color: 'primary',
+};
+
+export const SearchableDropdown = (args) => <Dropdown {...args} options={options} />;
+SearchableDropdown.args = {
+  placeholder: 'Type to search...',
+  searchable: true,
+  variant: 'primary',
+  color: 'info',
+};

package/src/stories/Molecules/index.js

@@ -1,9 +1,9 @@
 // src/stories/Molecules/index.js
-
 // Import all components as named exports
 import { Navbar } from './Navbar/Navbar';
 import { Sidebar } from './Sidebar/Sidebar';
 import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+import { Dropdown } from './Dropdown/Dropdown';
 import { InputGroup } from './InputGroup/InputGroup';
 import { InputWithLabel } from './InputWithLabel/InputWithLabel';
 import { SearchBar } from './SearchBar/SearchBar';
@@ -30,6 +30,7 @@ import { SelectTheme } from './SelectTheme/SelectTheme';
 const Molecules = {
   Navbar,
   Sidebar,
+  Dropdown,
   Breadcrumbs,
   InputGroup,
   InputWithLabel,

package/src/stories/Molecules/meta_Molecules.js

@@ -5,6 +5,9 @@ const Molecules = {
       { name: "Sidebar", paths: { css: "./Sidebar/Sidebar.css", globalCss: "styles/global.css", jsx: "./Sidebar/Sidebar.jsx", stories: "./Sidebar/Sidebar.stories.jsx" }},
       { name: "Breadcrumbs", paths: { css: "./Breadcrumbs/Breadcrumbs.css", globalCss: "styles/global.css", jsx: "./Breadcrumbs/Breadcrumbs.jsx", stories: "./Breadcrumbs/Breadcrumbs.stories.jsx" }},
     ],
+    "Menus": [
+      { name: "Dropdown", paths: { css: "./Dropdown/Dropdown.css", globalCss: "styles/global.css", jsx: "./Layout/Dropdown/Dropdown.jsx", stories: "src/stories/Layout/Dropdown/Dropdown.stories.jsx" }},
+    ],
     "FormElements": [
       { name: "InputGroup ", paths: { css: "./InputGroup/InputGroup.css", globalCss: "styles/global.css", jsx: "./InputGroup/InputGroup.jsx", stories: "src/stories/Molecules/InputGroup/InputGroup.stories.jsx" }},
       { name: "InputWithLabel", paths: { css: "./InputWithLabel/InputWithLabel.css", globalCss: "styles/global.css", jsx: "./InputWithLabel/InputWithLabel.jsx", stories: "src/stories/Molecules/InputWithLabel/InputWithLabel.stories.jsx" }},
@@ -16,18 +19,18 @@ const Molecules = {
       { name: "IconButton", paths: { css: "./IconButton/IconButton.css", globalCss: "styles/global.css", jsx: "./IconButton/IconButton.jsx", stories: "src/stories/Molecules/IconButton/IconButton.stories.jsx" }},
       { name: "ButtonGroup", paths: { css: "./ButtonGroup/ButtonGroup.css", globalCss: "styles/global.css", jsx: "./ButtonGroup/ButtonGroup.jsx", stories: "src/stories/Molecules/ButtonGroup/ButtonGroup.stories.jsx" }},
     ],
-    "MediaMolecules": [
+    "Media": [
       { name: "ImageWithCaption", paths: { css: "./ImageWithCaption/ImageWithCaption.css", globalCss: "styles/global.css", jsx: "./ImageWithCaption/ImageWithCaption.jsx", stories: "src/stories/Molecules/ImageWithCaption/ImageWithCaption.stories.jsx" }},
       { name: "VideoWithDescription", paths: { css: "./VideoWithDescription/VideoWithDescription.css", globalCss: "styles/global.css", jsx: "./VideoWithDescription/VideoWithDescription.jsx", stories: "src/stories/Molecules/VideoWithDescription/VideoWithDescription.stories.jsx" }},
-      { name: "AvatarWithName", paths: { css: "./AvatarWithName/AvatarWithName.css", globalCss: "styles/global.css", jsx: "./AvatarWithName/AvatarWithName.jsx", stories: "src/stories/Molecules/AvatarWithName/AvatarWithName.stories.jsx" }},
       { name: "AudioPlayer", paths: { css: "./AudioPlayer/AudioPlayer.css", globalCss: "styles/global.css", jsx: "./AudioPlayer/AudioPlayer.jsx", stories: "src/stories/Molecules/AudioPlayer/AudioPlayer.stories.jsx" }},
     ],
-    "ContentDisplay": [
+    "Display": [
       { name: "SelectTheme", paths: { css: "./SelectTheme/SelectTheme.css", globalCss: "styles/global.css", jsx: "./SelectTheme/SelectTheme.jsx", stories: "src/stories/Molecules/SelectTheme/SelectTheme.stories.jsx" }},
       { name: "Card", paths: { css: "./Card/Card.css", globalCss: "styles/global.css", jsx: "./Card/Card.jsx", stories: "./Card/Card.stories.jsx" }},
       { name: "MediaCard", paths: { css: "./MediaCard/MediaCard.css", globalCss: "styles/global.css", jsx: "./MediaCard/MediaCard.jsx", stories: "./MediaCard/MediaCard.stories.jsx" }},
       { name: "List", paths: { css: "./List/List.css", globalCss: "styles/global.css", jsx: "./List/List.jsx", stories: "./List/List.stories.jsx" }},
       { name: "Accordion", paths: { css: "./Accordion/Accordion.css", globalCss: "styles/global.css", jsx: "./Accordion/Accordion.jsx", stories: "./Accordion/Accordion.stories.jsx" }},
+      { name: "AvatarWithName", paths: { css: "./AvatarWithName/AvatarWithName.css", globalCss: "styles/global.css", jsx: "./AvatarWithName/AvatarWithName.jsx", stories: "src/stories/Molecules/AvatarWithName/AvatarWithName.stories.jsx" }},
     ],
     "FeedbackMolecules": [
       { name: "Notification", paths: { css: "./Notification/Notification.css", globalCss: "styles/global.css", jsx: "./Notification/Notification.jsx", stories: "src/stories/Molecules/Notification/Notification.stories.jsx" }},

package/src/themes/styles/neurons/light.css

@@ -1,124 +1,86 @@
 /* src/themes/styles/neurons/light.css */
 /* Design Tokens (CSS Variables) */
 :root {
-  /* Primary Colors */
-  --primary-color: #1F877D; /* Neurons teal */
-  --primary-color-hover: #16655C; /* Darker teal for hover effects */
-
-  /* Secondary Colors */
-  --secondary-color: #39a182; /* Bright teal */
-  --secondary-color-hover: #00877A; /* Darker teal for hover effects */
-
-  /* Semantic Colors */
-  --info-color: #008699; /* Light teal */
-  --info-color-hover: #008799d; /* Adjusted color for hover */
-
-  --warning-color: #FF6F61; /* Soft coral (Orange) */
-  --warning-color-hover: #e65b54; /* Adjusted color for hover */
-
-  --alert-color: #ffcc00; /* Yellow */
-  --alert-color-hover: #F1C40F; /* Adjusted color for hover */
-
-  --success-color: #00B4B8; /* Deep gray (Blueish) */
-  --success-color-hover: #0095991; /* Darker blueish for hover */
-
-  --neutral-color: #a4a4a4; /* Light gray */
-  --neutral-color-hover: #CCCCCC; /* Medium gray for hover */
-
-  --dark-color: #2C2C2C; /* Deep gray */
-  --dark-color-hover: #1A1A1A; /* Darker gray for hover */
-
-  /* Classy Palette */
-  --classy-color-1: #16655c;
-  --classy-color-2: #96b1ac;
-  --classy-color-3: #637c78;
-  --classy-color-4: #405b83;
-  --classy-color-5: #738db8;
-
-  /* Small Switch Palette */
-  --small-switch-color-1: #deefe6;
-  --small-switch-color-2: #4e8a6e;
-
-  /* Natural Palette */
-  --natural-color-1: #00aa96;
-  --natural-color-2: #e8fefa;
-  --natural-color-3: #e7fefe;
-
-  /* Grey Friends */
-  --grey-friend-1: #344b47;
-  --grey-friend-2: #96b1ac;
-
-  /* Shades */
-  --shade-1: #3b847a;
-  --shade-2: #5da59a;
-  --shade-3: #7ec7bc;
-  --shade-4: #a0eade;
-
-
-  /* Text Colors */
-  --text-color: #2C2C2C; /* Dark text color for contrast */
-  --text-color-inverse: #FFFFFF; /* For buttons with dark backgrounds */
-
-  /* Border Colors */
-  --border-color: #DDDDDD; /* Light border color */
-  --secondary-border-color: var(--secondary-color); /* For secondary buttons */
-
-  /* Button Sizes */
-  --button-font-size: 14px; /* Base button font size */
-  --button-padding-vertical: 11px;
-  --button-padding-horizontal: 21px;
-  --button-padding: var(--button-padding-vertical) var(--button-padding-horizontal);
-
-  /* Large and Small Sizes */
-  --button-font-size-large: calc(var(--button-font-size) * 1.1); /* 10% larger */
-  --button-font-size-small: calc(var(--button-font-size) * 0.9); /* 10% smaller */
-
-  --button-padding-vertical-large: calc(var(--button-padding-vertical) * 1.1);
-  --button-padding-horizontal-large: calc(var(--button-padding-horizontal) * 1.1);
-  --button-padding-large: var(--button-padding-vertical-large) var(--button-padding-horizontal-large);
-
-  --button-padding-vertical-small: calc(var(--button-padding-vertical) * 0.9);
-  --button-padding-horizontal-small: calc(var(--button-padding-horizontal) * 0.9);
-  --button-padding-small: var(--button-padding-vertical-small) var(--button-padding-horizontal-small);
-
-  /* Background and Text */
-  --background-color: #FFFFFF; /* Pure white background */
-  --muted-text-color: #555555; /* Muted text color */
-
-  /* Link Colors */
-  --link-color: #1F877D; /* Neurons teal */
-  --link-hover-color: #555555; /* Greyish color on hover */
-
-  /* Typography */
-  --font-family: 'Roboto', sans-serif;
-  --font-size-base: 17px; /* Slightly larger base font size */
-  --font-size-small: 15px;
-  --font-size-large: 19px;
-  --line-height: 1.6;
-  --font-weight-regular: 400; /* Normal font weight */
-  --font-weight-medium: 500; /* Medium font weight */
-  --font-weight-bold: 600; /* Less heavy bold weight */
-  --font-weight-heavy: 700; /* For headings */
-
-  /* Spacing */
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 32px;
-
-  /* Borders */
-  --border-radius: 6px; /* Slightly more rounded corners */
-  --border-width: 1px;
-
-  /* Shadows */
-  --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-
-  /* Transitions */
-  --transition-speed: 0.3s;
-
-  /* Z-index */
-  --z-index-modal: 1000;
-  --z-index-tooltip: 1050;
+/* Primary Colors */
+--primary-color: #1F877D; /* Neurons teal */
+--primary-color-hover: #16655C; /* Darker teal for hover effects */
+/* Secondary Colors */
+--secondary-color: #39a182; /* Bright teal */
+--secondary-color-hover: #00877A; /* Darker teal for hover effects */
+/* Link Colors */
+--link-color: #1F877D; /* Neurons teal */
+--link-hover-color: #008699; /* Greyish color on hover */
+--link-visited-color: #555555; /* Optional: custom color for visited links */
+/* onFocus Color */
+--focus-color: #1E90FF; /* Dodger Blue */
+/* Semantic Colors */
+--info-color: #008699; /* Light teal */
+--info-color-hover: #008799d; /* Adjusted color for hover */
+--warning-color: #FF6F61; /* Soft coral (Orange) */
+--warning-color-hover: #e65b54; /* Adjusted color for hover */
+--alert-color: #ffcc00; /* Yellow */
+--alert-color-hover: #F1C40F; /* Adjusted color for hover */
+--success-color: #00B4B8; /* Deep gray (Blueish) */
+--success-color-hover: #0095991; /* Darker blueish for hover */
+--neutral-color: #a4a4a4; /* Light gray */
+--neutral-color-hover: #CCCCCC; /* Medium gray for hover */
+--dark-color: #2C2C2C; /* Deep gray */
+--dark-color-hover: #1A1A1A; /* Darker gray for hover */
+/* Classy Palette */
+--classy-color-1: #16655c;
+--classy-color-2: #96b1ac;
+--classy-color-3: #637c78;
+--classy-color-4: #405b83;
+--classy-color-5: #738db8;
+/* Small Switch Palette */
+--small-switch-color-1: #deefe6;
+--small-switch-color-2: #4e8a6e;
+/* Natural Palette */
+--natural-color-1: #00aa96;
+--natural-color-2: #e8fefa;
+--natural-color-3: #e7fefe;
+/* Grey Friends */
+--grey-friend-1: #344b47;
+--grey-friend-2: #96b1ac;
+/* Shades */
+--shade-1: #3b847a;
+--shade-2: #5da59a;
+--shade-3: #7ec7bc;
+--shade-4: #a0eade;
+/* Typography */
+--font-family: 'Roboto', sans-serif;
+--font-size-base: 16px; /* Slightly larger base font size */
+--font-size-small: 14px;
+--font-size-large: 19px;
+--line-height: 1.6;
+--font-weight-regular: 400; /* Normal font weight */
+--font-weight-medium: 500; /* Medium font weight */
+--font-weight-bold: 600; /* Less heavy bold weight */
+--font-weight-heavy: 700; /* For headings */
+/* Text Colors */
+--text-color: #2C2C2C; /* Dark text color for contrast */
+--text-color-inverse: #FFFFFF; /* For buttons with dark backgrounds */
+/* Background and Text */
+--background-color: #FFFFFF; /* Pure white background */
+--muted-text-color: #555555; /* Muted text color */
+/* Spacing */
+--spacing-xs: 6px;
+--spacing-sm: 16px;
+--spacing-md: 34px;
+--spacing-lg: 55px;
+/* Borders */
+--border-radius: 8px; /* Slightly more rounded corners */
+--border-width: 1px;
+/* Border Colors */
+--border-color: #DDDDDD; /* Light border color */
+--secondary-border-color: var(--secondary-color); /* For secondary buttons */
+/* Shadows */
+--box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+/* Transitions */
+--transition-speed: 0.3s;
+/* Z-index */
+--z-index-modal: 1000;
+--z-index-tooltip: 1050;
 }
 
 /* Global Reset */
@@ -156,92 +118,23 @@ p {
   color: var(--text-color);
 }
 
-/* Links */
-a {
+/* Base link styles */
+a, .link {
   color: var(--link-color);
-  text-decoration: none;
-  transition: color var(--transition-speed) ease;
-}
-
-a:hover {
-  color: var(--link-hover-color);
-  text-decoration: underline;
-}
-
-
-/* Forms */
-input, textarea, select {
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius);
-  border: var(--border-width) solid var(--border-color);
   font-size: var(--font-size-base);
   font-family: var(--font-family);
-  background-color: #FFFFFF;
-  color: var(--text-color);
-  transition: border-color var(--transition-speed) ease;
-}
-
-input:focus, textarea:focus, select:focus {
-  border-color: var(--primary-color);
-  outline: none;
-}
-
-/* Layout */
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: var(--spacing-md);
-}
-
-.grid {
-  display: flex;
-  gap: var(--spacing-md);
-  flex-wrap: wrap;
+  transition: color var(--transition-speed) ease, text-decoration var(--transition-speed) ease;
 }
 
-.grid__item {
-  flex: 1;
-  min-width: 200px;
-}
-
-/* Sidebar */
-.sidebar {
-  background-color: #F8F8F8; /* Very light gray */
-  padding: var(--spacing-md);
-  border-right: var(--border-width) solid var(--border-color); /* Consistent border */
-}
-
-.sidebar__link {
-  display: block;
-  padding: var(--spacing-sm);
-  color: var(--text-color);
-  text-decoration: none;
-  font-weight: var(--font-weight-medium);
-  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
-}
-
-.sidebar__link:hover {
-  background-color: #EEEEEE; /* Slightly darker on hover */
-  color: var(--text-color);
-}
-
-/* Navbar */
-.navbar {
-  background-color: #FFFFFF;
-  padding: var(--spacing-md);
-  border-bottom: var(--border-width) solid var(--border-color); /* Consistent border */
-}
-
-.navbar__link {
-  color: var(--link-color);
-  text-decoration: none;
-  margin-right: var(--spacing-md);
-  font-weight: var(--font-weight-medium);
-  transition: color var(--transition-speed) ease;
+a:hover, .link:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline;
 }
 
-.navbar__link:hover {
-  color: var(--link-hover-color);
+/* Accessibility - global */
+a:focus, button:focus, .link:focus {
+  outline: 2px solid var(--focus-color);
+  outline-offset: 2px;
 }
 
 /* Utility Classes */
@@ -251,12 +144,6 @@ input:focus, textarea:focus, select:focus {
 .d-flex { display: flex; }
 .flex-column { flex-direction: column; }
 
-/* Accessibility */
-a:focus, button:focus {
-  outline: 2px solid var(--primary-color);
-  outline-offset: 2px;
-}
-
 @media (prefers-reduced-motion: reduce) {
   * {
     animation: none;
@@ -277,4 +164,7 @@ a:focus, button:focus {
   .navbar {
     padding: var(--spacing-sm);
   }
-}
+}
+
+
+