this.gui 1.0.17 → 1.0.18

package/src/stories/Atoms/Container/Container.stories.jsx

@@ -1,104 +1,145 @@
-// src/stories/Atoms/Container/Container.stories.jsx
 import React from 'react';
 import { Container } from './Container';
-import './Container.css';
 
 export default {
   title: 'Atoms/Layout/Container',
   component: Container,
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
     border: {
-      control: 'boolean',
-      description: 'Add a border to the container.',
+      control: { type: 'select' },
+      options: ['on', 'off'],
     },
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'medium', 'large'],
-      },
-      description: 'Size of the container.',
+    align: {
+      control: { type: 'select' },
+      options: ['left', 'center', 'right'],
     },
-    rounded: {
-      control: 'boolean',
-      description: 'Apply rounded corners to the container.',
+    fluid: { control: 'boolean' },
+    padding: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
     },
-    fluid: {
-      control: 'boolean',
-      description: 'Make the container full-width.',
+    marginTop: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
     },
-    align: {
-      control: {
-        type: 'select',
-        options: ['left', 'center', 'right'],
-      },
-      description: 'Alignment of the container.',
+    marginBottom: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    marginLeft: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    marginRight: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
     },
     position: {
-      control: {
-        type: 'select',
-        options: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
-      },
-      description: 'CSS position property of the container.',
+      control: { type: 'select' },
+      options: ['relative', 'static', 'fixed', 'absolute', 'sticky'],
     },
-    className: {
-      control: 'text',
-      description: 'Additional CSS classes.',
+    rounded: { control: 'boolean' }, // Add control for 'rounded' prop
+    borderColor: {
+      control: { type: 'select' },
+      options: [
+        'none',
+        'primary',
+        'secondary',
+        'link',
+        'focus',
+        'info',
+        'warning',
+        'alert',
+        'success',
+        'neutral',
+        'dark',
+        'classy-1',
+        'classy-2',
+        'classy-3',
+        'classy-4',
+        'classy-5',
+        'small-switch-1',
+        'small-switch-2',
+        'natural-1',
+        'natural-2',
+        'natural-3',
+        'grey-friend-1',
+        'grey-friend-2',
+        'shade-1',
+        'shade-2',
+        'shade-3',
+        'shade-4',
+      ],
     },
-    style: {
-      control: 'object',
-      description: 'Inline styles.',
+    backgroundColor: {
+      control: { type: 'select' }, // Use 'select' control type
+      options: [
+        'none',
+        'primary',
+        'secondary',
+        'link',
+        'focus',
+        'info',
+        'warning',
+        'alert',
+        'success',
+        'neutral',
+        'dark',
+        'classy-1',
+        'classy-2',
+        'classy-3',
+        'classy-4',
+        'classy-5',
+        'small-switch-1',
+        'small-switch-2',
+        'natural-1',
+        'natural-2',
+        'natural-3',
+        'grey-friend-1',
+        'grey-friend-2',
+        'shade-1',
+        'shade-2',
+        'shade-3',
+        'shade-4',
+      ],
     },
   },
 };
 
-/**
- * Small Container with Border and Left Alignment
- */
-export const SmallWithBorderLeft = () => (
-  <Container border size="small" align="left">
-    <p>This is a small container with a border and left alignment.</p>
-  </Container>
-);
+const Template = (args) => <Container {...args}>Content goes here</Container>;
 
-/**
- * Medium Rounded Container with Center Alignment
- */
-export const MediumRoundedCenter = () => (
-  <Container rounded size="medium" align="center">
-    <p>This is a medium-sized container with rounded corners and center alignment.</p>
-  </Container>
-);
-
-/**
- * Large Fluid Container with Right Alignment
- */
-export const LargeFluidRight = () => (
-  <Container fluid size="large" align="right">
-    <p>This is a large, fluid container without a border and right alignment.</p>
-  </Container>
-);
+export const Default = Template.bind({});
+Default.args = {
+  size: 'medium',
+  border: 'on',
+  align: 'left',
+  fluid: false,
+  padding: 'md',
+  marginTop: 'md',
+  marginBottom: 'md',
+  marginLeft: 'md',
+  marginRight: 'md',
+  position: 'relative',
+};
 
-/**
- * Container with Absolute Positioning
- */
-export const AbsolutePositioned = () => (
-  <Container position="absolute" style={{ top: '20px', left: '20px' }}>
-    <p>This container is absolutely positioned.</p>
-  </Container>
-);
+export const Fluid = Template.bind({});
+Fluid.args = {
+  ...Default.args,
+  fluid: true,
+};
 
-/**
- * Interactive Playground
- */
-const Template = (args) => <Container {...args}>This is an interactive container.</Container>;
+export const Centered = Template.bind({});
+Centered.args = {
+  ...Default.args,
+  align: 'center',
+};
 
-export const InteractiveContainer = Template.bind({});
-InteractiveContainer.args = {
-  border: false,
-  size: 'medium',
-  rounded: false,
-  fluid: false,
-  align: 'left',
-  position: 'static',
+export const LargePadding = Template.bind({});
+LargePadding.args = {
+  ...Default.args,
+  padding: 'lg',
 };
-InteractiveContainer.storyName = 'Interactive Container';

package/src/stories/Atoms/Link/Link.css

@@ -1,5 +1,3 @@
-/* src/stories/Atoms/Link/Link.css */
-
 .link {
   color: var(--link-color);
   font-size: var(--font-size-base);
@@ -7,36 +5,18 @@
   transition: color var(--transition-speed) ease, text-decoration var(--transition-speed) ease;
 }
 
-.link--underline {
-  text-decoration: underline;
-}
-
-.link--no-underline {
-  text-decoration: none;
-}
-
-.link--bold {
-  font-weight: var(--font-weight-bold);
-}
-
-.link--external {
-  display: inline-flex;
-  align-items: center;
+/* Hover states */
+.link:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline; /* Default hover behavior */
 }
 
+/* External link icon styling */
 .link__external-icon {
   margin-left: 0.25em;
   font-size: 0.8em;
 }
 
-.link:hover {
-  color: var(--link-hover-color);
-}
-
-.link:hover.text-decoration {
-  text-decoration: underline;
-}
-
 /* Experimental Preview Styles */
 .link__preview {
   position: fixed;
@@ -68,4 +48,4 @@
     max-width: 90%;
     max-height: 400px;
   }
-}
+}

package/src/stories/Atoms/Link/Link.jsx

@@ -1,14 +1,12 @@
-// src/stories/Atoms/Link/Link.jsx
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import './Link.css';
 
 export const Link = ({
   text,
   href,
-  underline = true,
-  bold = false,
+  underline = true, // Controls underline
+  bold = false,      // Controls bold text
   newWindow = false,
   external = false,
   experimentalPreview = false,
@@ -30,18 +28,19 @@ export const Link = ({
     }
   };
 
-  const linkClasses = classNames('link', className, {
-    'link--underline': underline,
-    'link--no-underline': !underline,
-    'link--bold': bold,
-    'link--external': external,
-  });
+  // Build dynamic inline styles based on props
+  const dynamicStyles = {
+    textDecoration: underline ? 'underline' : 'none',
+    fontWeight: bold ? 'bold' : 'normal',
+    ...style, // Include any additional styles passed via props
+  };
 
   return (
     <>
       <a
         href={href}
-        className={linkClasses}
+        className={`link ${className}`} // Keep the base 'link' class for consistent styling
+        style={dynamicStyles} // Apply dynamic styles here
         target={newWindow ? '_blank' : '_self'}
         rel={newWindow ? 'noopener noreferrer' : undefined}
         onMouseDown={handleMouseDown}
@@ -61,22 +60,13 @@ export const Link = ({
 };
 
 Link.propTypes = {
-  /** Text content of the link */
   text: PropTypes.string.isRequired,
-  /** URL the link points to */
   href: PropTypes.string.isRequired,
-  /** Whether the link is underlined */
   underline: PropTypes.bool,
-  /** Whether the link text is bold */
   bold: PropTypes.bool,
-  /** Whether the link opens in a new window */
   newWindow: PropTypes.bool,
-  /** Whether the link is external */
   external: PropTypes.bool,
-  /** Enable experimental preview on press */
   experimentalPreview: PropTypes.bool,
-  /** Additional CSS classes */
   className: PropTypes.string,
-  /** Inline styles */
   style: PropTypes.object,
-};
+};

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