odaptos_design_system 2.0.5 → 2.0.7

package/src/Atoms/Buttons/IconButton.modules.scss

@@ -1,195 +1,195 @@
-.icon_button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.icon_button_primary {
-  background: var(--color-neutral-basics-black, #00040a);
-  border: 1px solid var(--color-neutral-basics-black, #00040a);
-
-  &:hover {
-    background: var(--color-neutral-dark-shades-900, #32353a);
-    border: 1px solid var(--color-neutral-dark-shades-900, #32353a);
-  }
-  &:active {
-    background: var(--color-neutral-dark-shades-800, #4b4e52);
-    border: 1px solidvar(--color-neutral-dark-shades-800, #4b4e52);
-  }
-  &:disabled {
-    background: var(--color-neutral-clear-shades-300, #d5d5d6);
-    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
-  }
-  svg {
-    stroke: white !important;
-    fill: white !important;
-  }
-}
-
-.icon_button_secondary {
-  background: transparent;
-  border: 1px solid var(--color-neutral-basics-black, #00040a);
-  &:hover {
-    border: 1px solid var(--color-neutral-basics-black, #00040a);
-    background: var(--color-neutral-clear-shades-200, #e1e1e2);
-  }
-  &:active {
-    border: 1px solid var(--color-neutral-basics-black, #00040a);
-    background: var(--color-neutral-clear-shades-300, #d5d5d6);
-  }
-  &:disabled {
-    background: var(--color-neutral-clear-shades-300, #d5d5d6);
-    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
-    svg {
-      stroke: #96989a !important;
-      fill: #96989a !important;
-    }
-  }
-  svg {
-    stroke: var(--color-neutral-basics-black, #00040a) !important;
-    fill: var(--color-neutral-basics-black, #00040a) !important;
-  }
-}
-
-.icon_button_tertiary {
-  background: transparent;
-  border: 1px solid transparent;
-  &:hover {
-    border: 1px solid var(--color-neutral-clear-shades-200, #e1e1e2);
-    background: var(--color-neutral-clear-shades-200, #e1e1e2);
-  }
-  &:active {
-    background: var(--color-neutral-clear-shades-300, #d5d5d6);
-    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
-  }
-  &:disabled {
-    background: transparent;
-    border: 1px solid transparent;
-
-    svg {
-      stroke: #96989a !important;
-      fill: #96989a !important;
-    }
-  }
-
-  svg {
-    stroke: var(--color-neutral-basics-black, #00040a) !important;
-    fill: var(--color-neutral-basics-black, #00040a) !important;
-  }
-}
-
-.icon_button_tertiary_alt {
-  background: transparent;
-  border: 1px solid transparent;
-  &:hover {
-    background: var(--color-neutral-clear-shades-150, #eee);
-    border: 1px solid var(--color-neutral-clear-shades-150, #eee);
-  }
-  &:active {
-    background: var(--color-neutral-clear-shades-100, #fafafa);
-    border: 1px solid var(--color-neutral-clear-shades-100, #fafafa);
-  }
-  &:disabled {
-    background: transparent;
-    border: 1px solid transparent;
-    svg {
-      stroke: #99c9ff !important;
-      fill: #99c9ff !important;
-    }
-  }
-  svg {
-    stroke: #0077ff !important;
-    fill: #0077ff !important;
-  }
-}
-
-.icon_button_alert {
-  background: transparent;
-  border: 1px solid transparent;
-  &:hover {
-    border: 1px solid var(--color-extended-red-50, #fff6f6);
-    background: var(--color-extended-red-50, #fff6f6);
-  }
-  &:active {
-    background: var(--color-extended-red-100, #fddbdb);
-    border: 1px solid var(--color-extended-red-100, #fddbdb);
-  }
-  &:disabled {
-    background: transparent;
-    border: 1px solid transparent;
-    svg {
-      stroke: #fbb7b7 !important;
-      fill: #fbb7b7 !important;
-    }
-  }
-  svg {
-    stroke: #f54c4c !important;
-    fill: #f54c4c !important;
-  }
-}
-
-.icon_button_success {
-  background: var(--color-extended-green-400, #7dc984);
-  border: 1px solid var(--color-extended-green-400, #7dc984);
-  &:hover {
-    border: 1px solid var(--color-extended-green-300, #9dd6a3);
-    background: var(--color-extended-green-300, #9dd6a3);
-  }
-  &:active {
-    background: var(--color-extended-green-500, #5cbb65);
-    border: 1px solid var(--color-extended-green-500, #5cbb65);
-  }
-  &:disabled {
-    background: var(--color-extended-green-200, #d5edd8);
-    border: 1px solid var(--color-extended-green-200, #d5edd8);
-  }
-  svg {
-    stroke: #ffffff !important;
-    fill: #ffffff !important;
-  }
-}
-
-.icon_button_xxs {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0.25rem;
-  height: 1.25rem;
-  width: 1.25rem;
-  svg {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-}
-.icon_button_xs {
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  height: 1.5rem;
-  width: 1.5rem;
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-.icon_button_base {
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  height: 2.25rem;
-  width: 2.25rem;
-  svg {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-}
-.icon_button_lg {
-  padding: 0.625rem;
-  border-radius: 0.5rem;
-  height: 2.75rem;
-  width: 2.75rem;
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-}
+.icon_button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.icon_button_primary {
+  background: var(--color-neutral-basics-black, #00040a);
+  border: 1px solid var(--color-neutral-basics-black, #00040a);
+
+  &:hover {
+    background: var(--color-neutral-dark-shades-900, #32353a);
+    border: 1px solid var(--color-neutral-dark-shades-900, #32353a);
+  }
+  &:active {
+    background: var(--color-neutral-dark-shades-800, #4b4e52);
+    border: 1px solidvar(--color-neutral-dark-shades-800, #4b4e52);
+  }
+  &:disabled {
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  svg {
+    stroke: white !important;
+    fill: white !important;
+  }
+}
+
+.icon_button_secondary {
+  background: transparent;
+  border: 1px solid var(--color-neutral-basics-black, #00040a);
+  &:hover {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--color-neutral-clear-shades-200, #e1e1e2);
+  }
+  &:active {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  &:disabled {
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+    svg {
+      stroke: #96989a !important;
+      fill: #96989a !important;
+    }
+  }
+  svg {
+    stroke: var(--color-neutral-basics-black, #00040a) !important;
+    fill: var(--color-neutral-basics-black, #00040a) !important;
+  }
+}
+
+.icon_button_tertiary {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid var(--color-neutral-clear-shades-200, #e1e1e2);
+    background: var(--color-neutral-clear-shades-200, #e1e1e2);
+  }
+  &:active {
+    background: var(--color-neutral-clear-shades-300, #d5d5d6);
+    border: 1px solid var(--color-neutral-clear-shades-300, #d5d5d6);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+
+    svg {
+      stroke: #96989a !important;
+      fill: #96989a !important;
+    }
+  }
+
+  svg {
+    stroke: var(--color-neutral-basics-black, #00040a) !important;
+    fill: var(--color-neutral-basics-black, #00040a) !important;
+  }
+}
+
+.icon_button_tertiary_alt {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    background: var(--color-neutral-clear-shades-150, #eee);
+    border: 1px solid var(--color-neutral-clear-shades-150, #eee);
+  }
+  &:active {
+    background: var(--color-neutral-clear-shades-100, #fafafa);
+    border: 1px solid var(--color-neutral-clear-shades-100, #fafafa);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+    svg {
+      stroke: #99c9ff !important;
+      fill: #99c9ff !important;
+    }
+  }
+  svg {
+    stroke: #0077ff !important;
+    fill: #0077ff !important;
+  }
+}
+
+.icon_button_alert {
+  background: transparent;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid var(--color-extended-red-50, #fff6f6);
+    background: var(--color-extended-red-50, #fff6f6);
+  }
+  &:active {
+    background: var(--color-extended-red-100, #fddbdb);
+    border: 1px solid var(--color-extended-red-100, #fddbdb);
+  }
+  &:disabled {
+    background: transparent;
+    border: 1px solid transparent;
+    svg {
+      stroke: #fbb7b7 !important;
+      fill: #fbb7b7 !important;
+    }
+  }
+  svg {
+    stroke: #f54c4c !important;
+    fill: #f54c4c !important;
+  }
+}
+
+.icon_button_success {
+  background: var(--color-extended-green-400, #7dc984);
+  border: 1px solid var(--color-extended-green-400, #7dc984);
+  &:hover {
+    border: 1px solid var(--color-extended-green-300, #9dd6a3);
+    background: var(--color-extended-green-300, #9dd6a3);
+  }
+  &:active {
+    background: var(--color-extended-green-500, #5cbb65);
+    border: 1px solid var(--color-extended-green-500, #5cbb65);
+  }
+  &:disabled {
+    background: var(--color-extended-green-200, #d5edd8);
+    border: 1px solid var(--color-extended-green-200, #d5edd8);
+  }
+  svg {
+    stroke: #ffffff !important;
+    fill: #ffffff !important;
+  }
+}
+
+.icon_button_xxs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.25rem;
+  height: 1.25rem;
+  width: 1.25rem;
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}
+.icon_button_xs {
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+.icon_button_base {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  height: 2.25rem;
+  width: 2.25rem;
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+.icon_button_lg {
+  padding: 0.625rem;
+  border-radius: 0.5rem;
+  height: 2.75rem;
+  width: 2.75rem;
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}

package/src/Atoms/Buttons/IconButton.tsx

@@ -1,65 +1,65 @@
-import React, { HTMLAttributes, forwardRef } from 'react';
-import styles from './IconButton.modules.scss';
-import { MinusCircledIcon } from '../../';
-
-export interface IconButtonProps extends HTMLAttributes<HTMLButtonElement> {
-  variant?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'tertiary-alt'
-    | 'alert'
-    | 'success';
-  size?: 'xxs' | 'xs' | 'base' | 'lg';
-  icon?: JSX.Element;
-  disabled?: boolean;
-  className?: string;
-}
-
-/** Figma link: https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=422-2878&mode=dev */
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    {
-      variant = 'primary',
-      size = 'base',
-      icon,
-      className,
-      disabled,
-      onClick,
-      ...props
-    },
-    ref
-  ) => {
-    const getStylesByVariant = (): string => {
-      if (variant === 'primary') return styles.icon_button_primary;
-      else if (variant === 'secondary') return styles.icon_button_secondary;
-      else if (variant === 'tertiary') return styles.icon_button_tertiary;
-      else if (variant === 'tertiary-alt')
-        return styles.icon_button_tertiary_alt;
-      else if (variant === 'alert') return styles.icon_button_alert;
-      else if (variant === 'success') return styles.icon_button_success;
-      else return styles.icon_button_primary;
-    };
-    const getStylesBySize = (): string => {
-      if (size === 'xxs') return styles.icon_button_xxs;
-      if (size === 'xs') return styles.icon_button_xs;
-      else if (size === 'base') return styles.icon_button_base;
-      else if (size === 'lg') return styles.icon_button_lg;
-      else return styles.icon_button_base;
-    };
-
-    return (
-      <button
-        ref={ref}
-        className={`${
-          styles.icon_button
-        } ${getStylesByVariant()} ${getStylesBySize()} ${className ?? ''}`}
-        onClick={onClick}
-        disabled={disabled}
-        {...props}
-      >
-        {icon ?? <MinusCircledIcon />}
-      </button>
-    );
-  }
-);
+import React, { HTMLAttributes, forwardRef } from 'react';
+import styles from './IconButton.modules.scss';
+import { MinusCircledIcon } from '../../';
+
+export interface IconButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'tertiary-alt'
+    | 'alert'
+    | 'success';
+  size?: 'xxs' | 'xs' | 'base' | 'lg';
+  icon?: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+}
+
+/** Figma link: https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=422-2878&mode=dev */
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'base',
+      icon,
+      className,
+      disabled,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const getStylesByVariant = (): string => {
+      if (variant === 'primary') return styles.icon_button_primary;
+      else if (variant === 'secondary') return styles.icon_button_secondary;
+      else if (variant === 'tertiary') return styles.icon_button_tertiary;
+      else if (variant === 'tertiary-alt')
+        return styles.icon_button_tertiary_alt;
+      else if (variant === 'alert') return styles.icon_button_alert;
+      else if (variant === 'success') return styles.icon_button_success;
+      else return styles.icon_button_primary;
+    };
+    const getStylesBySize = (): string => {
+      if (size === 'xxs') return styles.icon_button_xxs;
+      if (size === 'xs') return styles.icon_button_xs;
+      else if (size === 'base') return styles.icon_button_base;
+      else if (size === 'lg') return styles.icon_button_lg;
+      else return styles.icon_button_base;
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={`${
+          styles.icon_button
+        } ${getStylesByVariant()} ${getStylesBySize()} ${className ?? ''}`}
+        onClick={onClick}
+        disabled={disabled}
+        {...props}
+      >
+        {icon ?? <MinusCircledIcon />}
+      </button>
+    );
+  }
+);

package/src/Atoms/Cards/Card.modules.scss

@@ -1,12 +1,12 @@
-.card {
-  width: 100%;
-  padding: 1rem 1.5rem 1.5rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-  border-radius: 0.25rem;
-  background: var(--color-neutral-basics-white, #fff);
-  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.08),
-    0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-}
+.card {
+  width: 100%;
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  background: var(--color-neutral-basics-white, #fff);
+  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.08),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+}

package/src/Atoms/Cards/Card.tsx

@@ -1,24 +1,24 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './Card.modules.scss';
-
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element;
-  className: string;
-  onMouseEnter: () => void;
-  onMouseLeave: () => void;
-}
-
-export const Card = ({
-  children,
-  onMouseEnter,
-  onMouseLeave,
-  className,
-}: CardProps) => (
-  <div
-    className={`${styles.card} ${className}`}
-    onMouseEnter={onMouseEnter}
-    onMouseLeave={onMouseLeave}
-  >
-    {children}
-  </div>
-);
+import React, { HTMLAttributes } from 'react';
+import styles from './Card.modules.scss';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+  className: string;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+}
+
+export const Card = ({
+  children,
+  onMouseEnter,
+  onMouseLeave,
+  className,
+}: CardProps) => (
+  <div
+    className={`${styles.card} ${className}`}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+  >
+    {children}
+  </div>
+);

package/src/Atoms/Cards/CardButton.modules.scss

@@ -1,23 +1,23 @@
-.card_button {
-  display: flex;
-  width: 16.5rem;
-  height: 14.25rem;
-  padding: 1rem;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-  border-radius: 1rem;
-  background: var(--color-neutral-basics-white, #fff);
-  cursor: pointer;
-  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.08),
-    0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-}
-.card_button:hover {
-  transform: translate(0, -0.5rem);
-  outline: 0px solid transparent;
-  padding: 1rem;
-  border: 1px solid var(--sdColorPrimary500);
-  -webkit-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-}
+.card_button {
+  display: flex;
+  width: 16.5rem;
+  height: 14.25rem;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  border-radius: 1rem;
+  background: var(--color-neutral-basics-white, #fff);
+  cursor: pointer;
+  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.08),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.15);
+}
+.card_button:hover {
+  transform: translate(0, -0.5rem);
+  outline: 0px solid transparent;
+  padding: 1rem;
+  border: 1px solid var(--sdColorPrimary500);
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}

package/src/Atoms/Cards/CardButton.tsx

@@ -1,14 +1,14 @@
-import React, { HTMLAttributes } from 'react';
-import { Title } from '../../';
-import styles from './CardButton.modules.scss';
-
-export interface CardButtonProps extends HTMLAttributes<HTMLButtonElement> {
-  children: string;
-  className: string;
-}
-
-export const CardButton = ({ children, className }: CardButtonProps) => (
-  <div className={`${styles.card_button} ${className}`}>
-    <Title text={children} />
-  </div>
-);
+import React, { HTMLAttributes } from 'react';
+import { Title } from '../../';
+import styles from './CardButton.modules.scss';
+
+export interface CardButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  children: string;
+  className: string;
+}
+
+export const CardButton = ({ children, className }: CardButtonProps) => (
+  <div className={`${styles.card_button} ${className}`}>
+    <Title text={children} />
+  </div>
+);