this.gui 1.0.17 → 1.0.18

package/src/stories/Atoms/Container/Container.css

@@ -1,43 +1,306 @@
-/* src/stories/Atoms/Container/Container.css */
-
 /* Base Container Styles */
 .container {
-  padding: var(--spacing-md);
-  background-color: transparent;
-  transition: all var(--transition-speed) ease;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
   box-sizing: border-box;
-  position: var(--position, static);
 }
 
-/* Border Variant */
 .container--border {
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-color, #000); /* Defaults to #000 if --border-color is not defined */
 }
+/* Rounded Corners */
+.container--rounded {
+  border-radius: var(--border-radius, 8px); /* Default to 8px if --border-radius is not defined */
+}
+
+/* Border Color Variants */
 
-/* Size Variants */
-.container--small {
-  width: 25%;
+/* Primary Colors */
+.container--border-primary {
+  border-color: var(--primary-color);
 }
 
-.container--medium {
-  width: 50%;
+.container--border-secondary {
+  border-color: var(--secondary-color);
 }
 
-.container--large {
-  width: 75%;
+.container--border-link {
+  border-color: var(--link-color);
 }
 
-/* Fluid Variant */
-.container--fluid {
-  width: 100%;
+.container--border-focus {
+  border-color: var(--focus-color);
 }
 
-/* Rounded Corners */
-.container--rounded {
-  border-radius: var(--border-radius);
+.container--border-info {
+  border-color: var(--info-color);
+}
+
+.container--border-warning {
+  border-color: var(--warning-color);
+}
+
+.container--border-alert {
+  border-color: var(--alert-color);
+}
+
+.container--border-success {
+  border-color: var(--success-color);
+}
+
+.container--border-neutral {
+  border-color: var(--neutral-color);
+}
+
+.container--border-dark {
+  border-color: var(--dark-color);
+}
+
+/* Classy Palette */
+.container--border-classy-1 {
+  border-color: var(--classy-color-1);
+}
+
+.container--border-classy-2 {
+  border-color: var(--classy-color-2);
+}
+
+.container--border-classy-3 {
+  border-color: var(--classy-color-3);
+}
+
+.container--border-classy-4 {
+  border-color: var(--classy-color-4);
+}
+
+.container--border-classy-5 {
+  border-color: var(--classy-color-5);
+}
+
+/* Small Switch Palette */
+.container--border-small-switch-1 {
+  border-color: var(--small-switch-color-1);
+}
+
+.container--border-small-switch-2 {
+  border-color: var(--small-switch-color-2);
+}
+
+/* Natural Palette */
+.container--border-natural-1 {
+  border-color: var(--natural-color-1);
+}
+
+.container--border-natural-2 {
+  border-color: var(--natural-color-2);
+}
+
+.container--border-natural-3 {
+  border-color: var(--natural-color-3);
+}
+
+/* Grey Friends */
+.container--border-grey-friend-1 {
+  border-color: var(--grey-friend-1);
+}
+
+.container--border-grey-friend-2 {
+  border-color: var(--grey-friend-2);
+}
+
+/* Shades */
+.container--border-shade-1 {
+  border-color: var(--shade-1);
+}
+
+.container--border-shade-2 {
+  border-color: var(--shade-2);
+}
+
+.container--border-shade-3 {
+  border-color: var(--shade-3);
+}
+
+.container--border-shade-4 {
+  border-color: var(--shade-4);
+}
+
+/* No Border Color */
+.container--border-none {
+  border: 1px solid var(--border-color, #000); /* Defaults to #000 if --border-color is not defined */
+}
+
+/* Background Color Variants */
+.container--bg-primary {
+  background-color: var(--primary-color);
+}
+
+.container--bg-secondary {
+  background-color: var(--secondary-color);
+}
+
+.container--bg-link {
+  background-color: var(--link-color);
+}
+
+.container--bg-focus {
+  background-color: var(--focus-color);
+}
+
+.container--bg-info {
+  background-color: var(--info-color);
+}
+
+.container--bg-warning {
+  background-color: var(--warning-color);
+}
+
+.container--bg-alert {
+  background-color: var(--alert-color);
+}
+
+.container--bg-success {
+  background-color: var(--success-color);
+}
+
+.container--bg-neutral {
+  background-color: var(--neutral-color);
+}
+
+.container--bg-dark {
+  background-color: var(--dark-color);
+}
+
+.container--bg-classy-1 {
+  background-color: var(--classy-color-1);
+}
+
+.container--bg-classy-2 {
+  background-color: var(--classy-color-2);
+}
+
+.container--bg-classy-3 {
+  background-color: var(--classy-color-3);
+}
+
+.container--bg-classy-4 {
+  background-color: var(--classy-color-4);
+}
+
+.container--bg-classy-5 {
+  background-color: var(--classy-color-5);
+}
+
+.container--bg-small-switch-1 {
+  background-color: var(--small-switch-color-1);
+}
+
+.container--bg-small-switch-2 {
+  background-color: var(--small-switch-color-2);
+}
+
+.container--bg-natural-1 {
+  background-color: var(--natural-color-1);
+}
+
+.container--bg-natural-2 {
+  background-color: var(--natural-color-2);
+}
+
+.container--bg-natural-3 {
+  background-color: var(--natural-color-3);
+}
+
+.container--bg-grey-friend-1 {
+  background-color: var(--grey-friend-1);
+}
+
+.container--bg-grey-friend-2 {
+  background-color: var(--grey-friend-2);
+}
+
+.container--bg-shade-1 {
+  background-color: var(--shade-1);
+}
+
+.container--bg-shade-2 {
+  background-color: var(--shade-2);
+}
+
+.container--bg-shade-3 {
+  background-color: var(--shade-3);
+}
+
+.container--bg-shade-4 {
+  background-color: var(--shade-4);
+}
+
+.container--bg-none {
+  background-color: transparent;
+}
+
+/* Size Variants for Non-Fluid Containers */
+.container--size-small:not(.container--fluid) {
+  max-width: 100%;
+}
+
+.container--size-medium:not(.container--fluid) {
+  max-width: 100%;
+}
+
+.container--size-large:not(.container--fluid) {
+  max-width: 100%;
+}
+
+/* Media Queries for Responsive Sizes */
+
+/* Small Devices (mobile phones, min-width: 480px) */
+@media (min-width: 480px) {
+  .container--size-small:not(.container--fluid) {
+    max-width: 600px;
+  }
+}
+
+/* Medium Devices (tablets, min-width: 768px) */
+@media (min-width: 768px) {
+  .container--size-medium:not(.container--fluid) {
+    max-width: 960px;
+  }
+}
+
+/* Large Devices (desktops, min-width: 1200px) */
+@media (min-width: 1200px) {
+  .container--size-large:not(.container--fluid) {
+    max-width: 1560px;
+  }
 }
 
-/* Alignment */
+/* Extra Large Devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  .container--size-medium:not(.container--fluid),
+  .container--size-large:not(.container--fluid) {
+    max-width: 1140px;
+  }
+}
+
+/* Extra Extra Large Devices (larger desktops, min-width: 1920px) */
+@media (min-width: 1920px) {
+  .container--size-extra-large:not(.container--fluid) {
+    max-width: 2520px;
+  }
+}
+
+
+/* Fluid Container Adjustments */
+.container--fluid {
+  width: 100% !important;
+  max-width: 100% !important;
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+/* Align Variants */
 .container--align-left {
   margin-left: 0;
   margin-right: auto;
@@ -53,37 +316,155 @@
   margin-right: 0;
 }
 
-/* Positioning */
+/* Position Variants */
+.container--position-relative {
+  position: relative;
+}
+
 .container--position-static {
   position: static;
 }
 
-.container--position-relative {
-  position: relative;
+.container--position-fixed {
+  position: fixed;
 }
 
 .container--position-absolute {
   position: absolute;
 }
 
+.container--position-sticky {
+  position: sticky;
+}
+
+/* Padding Variants */
+.container--padding-sm {
+  padding: var(--spacing-sm);
+}
+
+.container--padding-md {
+  padding: var(--spacing-md);
+}
+
+.container--padding-lg {
+  padding: var(--spacing-lg);
+}
+
+/* Margin Variants */
+.container--mt-sm {
+  margin-top: var(--spacing-sm);
+}
+
+.container--mt-md {
+  margin-top: var(--spacing-md);
+}
+
+.container--mt-lg {
+  margin-top: var(--spacing-lg);
+}
+
+.container--mb-sm {
+  margin-bottom: var(--spacing-sm);
+}
+
+.container--mb-md {
+  margin-bottom: var(--spacing-md);
+}
+
+.container--mb-lg {
+  margin-bottom: var(--spacing-lg);
+}
+
+.container--ml-sm {
+  margin-left: var(--spacing-sm);
+}
+
+.container--ml-md {
+  margin-left: var(--spacing-md);
+}
+
+.container--ml-lg {
+  margin-left: var(--spacing-lg);
+}
+
+.container--mr-sm {
+  margin-right: var(--spacing-sm);
+}
+
+.container--mr-md {
+  margin-right: var(--spacing-md);
+}
+
+.container--mr-lg {
+  margin-right: var(--spacing-lg);
+}
+
+/* Size Variants for Non-Fluid Containers */
+.container--size-small:not(.container--fluid) {
+  max-width: 600px;
+}
+
+.container--size-medium:not(.container--fluid) {
+  max-width: 960px;
+}
+
+.container--size-large:not(.container--fluid) {
+  max-width: 1200px;
+}
+
+/* Fluid Container Adjustments */
+.container--fluid {
+  max-width: 100%;
+}
+
+.container--fluid.container--size-small {
+  padding-left: var(--spacing-sm);
+  padding-right: var(--spacing-sm);
+}
+
+.container--fluid.container--size-medium {
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+
+.container--fluid.container--size-large {
+  padding-left: var(--spacing-lg);
+  padding-right: var(--spacing-lg);
+}
+
+/* Align Variants */
+.container--align-left {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.container--align-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container--align-right {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+/* Position Variants */
+.container--position-relative {
+  position: relative;
+}
+
+.container--position-static {
+  position: static;
+}
+
 .container--position-fixed {
   position: fixed;
 }
 
-.container--position-sticky {
-  position: sticky;
+.container--position-absolute {
+  position: absolute;
 }
 
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-  .container--small,
-  .container--medium,
-  .container--large {
-    width: 100%;
-    padding: var(--spacing-sm);
-  }
-  
-  .container--fluid {
-    padding: var(--spacing-xs);
-  }
+.container--position-sticky {
+  position: sticky;
 }

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

@@ -1,54 +1,116 @@
-// src/stories/Atoms/Container/Container.jsx
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import './Container.css';
 
 export const Container = ({
-  children,
-  border = false,
-  size = 'medium',
-  rounded = false,
+  size = 'small',
+  border = 'on',
+  align = 'center',
   fluid = false,
-  align = 'left',
-  position = 'static',
-  className = '',
-  style = {},
-  ...props
+  padding = 'md',
+  marginTop = 'md',
+  marginBottom = 'md',
+  marginLeft = 'md',
+  marginRight = 'md',
+  position = 'relative',
+  rounded = true, 
+  borderColor,
+  backgroundColor, 
+  children,
 }) => {
-  const containerClasses = classNames('container', className, {
-    'container--border': border,
-    [`container--${size}`]: size,
-    'container--rounded': rounded,
-    'container--fluid': fluid,
-    [`container--align-${align}`]: align,
-    [`container--position-${position}`]: position,
-  });
+  const containerClassNames = [
+    'container',
+    `container--size-${size}`,
+    `container--align-${align}`,
+    `container--position-${position}`,
+    `container--padding-${padding}`,
+    `container--mt-${marginTop}`,
+    `container--mb-${marginBottom}`,
+    `container--ml-${marginLeft}`,
+    `container--mr-${marginRight}`,
+    border === 'on' ? 'container--border' : '',
+    fluid ? 'container--fluid' : '',
+    rounded ? 'container--rounded' : '',
+    backgroundColor ? `container--bg-${backgroundColor}` : '',
+    borderColor ? `container--border-${borderColor}` : '', // Add class if borderColor is set
+  ].join(' ');
 
   return (
-    <div className={containerClasses} style={style} {...props}>
+    <div className={containerClassNames}>
       {children}
     </div>
   );
 };
 
 Container.propTypes = {
-  /** Content to be wrapped inside the container */
-  children: PropTypes.node.isRequired,
-  /** Add a border to the container */
-  border: PropTypes.bool,
-  /** Size of the container */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** Rounded corners */
-  rounded: PropTypes.bool,
-  /** Fluid container (full width) */
-  fluid: PropTypes.bool,
-  /** Text alignment within the container */
+  border: PropTypes.oneOf(['on', 'off']),
   align: PropTypes.oneOf(['left', 'center', 'right']),
-  /** CSS position property */
-  position: PropTypes.oneOf(['static', 'relative', 'absolute', 'fixed', 'sticky']),
-  /** Additional CSS classes */
-  className: PropTypes.string,
-  /** Inline styles */
-  style: PropTypes.object,
+  fluid: PropTypes.bool,
+  padding: PropTypes.oneOf(['sm', 'md', 'lg']),
+  marginTop: PropTypes.oneOf(['sm', 'md', 'lg']),
+  marginBottom: PropTypes.oneOf(['sm', 'md', 'lg']),
+  marginLeft: PropTypes.oneOf(['sm', 'md', 'lg']),
+  marginRight: PropTypes.oneOf(['sm', 'md', 'lg']),
+  position: PropTypes.oneOf(['relative', 'static', 'fixed', 'absolute', 'sticky']),
+  rounded: PropTypes.bool,
+  borderColor: PropTypes.oneOf([
+    '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',
+  ]),
+  backgroundColor: PropTypes.oneOf([
+    'none', // For no background color
+    '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',
+  ]),
+  children: PropTypes.node,
 };