odaptos_design_system 2.0.5 → 2.0.7

package/src/Atoms/Checkbox/Checkbox.module.scss

@@ -1,5 +1,5 @@
-.checkboxContainer {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
+.checkboxContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}

package/src/Atoms/Checkbox/Checkbox.tsx

@@ -1,121 +1,121 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import { Checkbox as MuiCheckbox } from '@mui/material';
-import styles from './Checkbox.module.scss';
-import { Text } from '../../';
-
-const BpIcon = styled('span')(() => ({
-  borderRadius: '0.25rem',
-  border: `1px solid #8A8B8E`,
-  width: '1rem',
-  height: '1rem',
-  margin: 0,
-  padding: 0,
-  backgroundColor: '#f5f8fa',
-  backgroundImage:
-    'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
-  '.Mui-focusVisible &': {
-    outline: '2px auto #0077FF !important',
-    outlineOffset: 2,
-  },
-  'input:disabled ~ &': {
-    border: `1px solid #E1E1E2`,
-    background: '#FFFFFF',
-    cursor: 'not-allowed',
-  },
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#0077FF',
-  backgroundImage:
-    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  border: `1px solid #0077FF`,
-  '&:before': {
-    display: 'block',
-    height: '1rem',
-    backgroundImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-    content: '""',
-  },
-  'input:disabled ~ &': {
-    border: `1px solid #96989A`,
-    background: '#96989A',
-    cursor: 'not-allowed',
-  },
-});
-
-interface BpCheckboxProps {
-  checked: boolean;
-  disabled?: boolean;
-  onChange: () => void;
-  required?: boolean;
-  onBlur?: () => void;
-}
-
-function BpCheckbox({
-  checked,
-  disabled = false,
-  onChange,
-  required,
-  onBlur,
-}: BpCheckboxProps) {
-  return (
-    <MuiCheckbox
-      sx={{
-        '&:hover': { bgcolor: 'transparent' },
-        padding: 0,
-      }}
-      disableRipple
-      color="default"
-      checkedIcon={<BpCheckedIcon />}
-      icon={<BpIcon />}
-      inputProps={{ 'aria-label': 'Checkbox demo' }}
-      checked={checked}
-      disabled={disabled}
-      required={required}
-      onChange={onChange}
-      onBlur={onBlur}
-    />
-  );
-}
-
-interface CheckboxProps {
-  label?: string;
-  leftLabel?: string;
-  onChange: () => void;
-  onBlur?: () => void;
-  checked: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  className?: string;
-}
-
-export const Checkbox = ({
-  label,
-  leftLabel,
-  onBlur,
-  checked,
-  disabled,
-  onChange,
-  required,
-  className,
-}: CheckboxProps) => {
-  return (
-    <div
-      className={`${styles.checkboxContainer} ${className}`}
-      style={{ cursor: disabled ? 'not-allowed' : 'auto' }}
-    >
-      {leftLabel && <Text text={leftLabel} size="sm" color="#26292E" />}
-      <BpCheckbox
-        checked={checked}
-        disabled={disabled}
-        onChange={onChange}
-        required={required}
-        onBlur={onBlur}
-      />
-      {label && <Text text={label} size="sm" />}
-    </div>
-  );
-};
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { Checkbox as MuiCheckbox } from '@mui/material';
+import styles from './Checkbox.module.scss';
+import { Text } from '../../';
+
+const BpIcon = styled('span')(() => ({
+  borderRadius: '0.25rem',
+  border: `1px solid #8A8B8E`,
+  width: '1rem',
+  height: '1rem',
+  margin: 0,
+  padding: 0,
+  backgroundColor: '#f5f8fa',
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
+  '.Mui-focusVisible &': {
+    outline: '2px auto #0077FF !important',
+    outlineOffset: 2,
+  },
+  'input:disabled ~ &': {
+    border: `1px solid #E1E1E2`,
+    background: '#FFFFFF',
+    cursor: 'not-allowed',
+  },
+}));
+
+const BpCheckedIcon = styled(BpIcon)({
+  backgroundColor: '#0077FF',
+  backgroundImage:
+    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  border: `1px solid #0077FF`,
+  '&:before': {
+    display: 'block',
+    height: '1rem',
+    backgroundImage:
+      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
+      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
+      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
+    content: '""',
+  },
+  'input:disabled ~ &': {
+    border: `1px solid #96989A`,
+    background: '#96989A',
+    cursor: 'not-allowed',
+  },
+});
+
+interface BpCheckboxProps {
+  checked: boolean;
+  disabled?: boolean;
+  onChange: () => void;
+  required?: boolean;
+  onBlur?: () => void;
+}
+
+function BpCheckbox({
+  checked,
+  disabled = false,
+  onChange,
+  required,
+  onBlur,
+}: BpCheckboxProps) {
+  return (
+    <MuiCheckbox
+      sx={{
+        '&:hover': { bgcolor: 'transparent' },
+        padding: 0,
+      }}
+      disableRipple
+      color="default"
+      checkedIcon={<BpCheckedIcon />}
+      icon={<BpIcon />}
+      inputProps={{ 'aria-label': 'Checkbox demo' }}
+      checked={checked}
+      disabled={disabled}
+      required={required}
+      onChange={onChange}
+      onBlur={onBlur}
+    />
+  );
+}
+
+interface CheckboxProps {
+  label?: string;
+  leftLabel?: string;
+  onChange: () => void;
+  onBlur?: () => void;
+  checked: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  className?: string;
+}
+
+export const Checkbox = ({
+  label,
+  leftLabel,
+  onBlur,
+  checked,
+  disabled,
+  onChange,
+  required,
+  className,
+}: CheckboxProps) => {
+  return (
+    <div
+      className={`${styles.checkboxContainer} ${className}`}
+      style={{ cursor: disabled ? 'not-allowed' : 'auto' }}
+    >
+      {leftLabel && <Text text={leftLabel} size="sm" color="#26292E" />}
+      <BpCheckbox
+        checked={checked}
+        disabled={disabled}
+        onChange={onChange}
+        required={required}
+        onBlur={onBlur}
+      />
+      {label && <Text text={label} size="sm" />}
+    </div>
+  );
+};

package/src/Atoms/ColorPicker/ColorPicker.modules.scss

@@ -1,47 +1,47 @@
-.colorPicker {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: fit-content;
-    gap: 1rem;
-
-    &__bottom {
-        display: flex;
-        gap: 1rem;
-        align-items: center;
-        width: 100%;
-        justify-content: space-between;
-
-        &__color {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-        }
-
-        &__input {
-            display: flex;
-            width: 152px;
-
-            .colorTextInput {
-                width: 100%;
-                display: flex;
-                border-radius: 1.5rem;
-                border: 1px solid #d5d5d6;
-                padding: 0.5rem;
-                text-align: center;
-                /* Typo/Title/Regular/sm */
-                font-family: Poppins;
-                font-size: 14px;
-                font-style: normal;
-                font-weight: 500;
-                line-height: 140%;
-                /* 19.6px */
-
-                //Removed selected state styles
-                &:focus {
-                    outline: none;
-                }
-            }
-        }
-    }
+.colorPicker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: fit-content;
+    gap: 1rem;
+
+    &__bottom {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        width: 100%;
+        justify-content: space-between;
+
+        &__color {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+        }
+
+        &__input {
+            display: flex;
+            width: 152px;
+
+            .colorTextInput {
+                width: 100%;
+                display: flex;
+                border-radius: 1.5rem;
+                border: 1px solid #d5d5d6;
+                padding: 0.5rem;
+                text-align: center;
+                /* Typo/Title/Regular/sm */
+                font-family: Poppins;
+                font-size: 14px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: 140%;
+                /* 19.6px */
+
+                //Removed selected state styles
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+    }
 }

package/src/Atoms/ColorPicker/ColorPicker.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-import styles from './ColorPicker.modules.scss';
-import { HexAlphaColorPicker } from 'react-colorful';
-
-interface ColorPickerProps {
-  color: string;
-  onChange: (color: string) => void;
-}
-
-export const ColorPicker = ({ color, onChange }: ColorPickerProps) => {
-  const handleChange = (color: string) => {
-    //TODO Add color validation afterwards
-    onChange(color);
-  };
-
-  return (
-    <div className={styles.colorPicker}>
-      <HexAlphaColorPicker color={color} onChange={onChange} />
-      <div className={styles.colorPicker__bottom}>
-        <div
-          className={styles.colorPicker__bottom__color}
-          style={{ backgroundColor: color }}
-        ></div>
-        <div className={styles.colorPicker__bottom__input}>
-          <input
-            type="text"
-            value={color}
-            onChange={(e) => handleChange(e.target.value)}
-            className={styles.colorTextInput}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
+import React from 'react';
+import styles from './ColorPicker.modules.scss';
+import { HexAlphaColorPicker } from 'react-colorful';
+
+interface ColorPickerProps {
+  color: string;
+  onChange: (color: string) => void;
+}
+
+export const ColorPicker = ({ color, onChange }: ColorPickerProps) => {
+  const handleChange = (color: string) => {
+    //TODO Add color validation afterwards
+    onChange(color);
+  };
+
+  return (
+    <div className={styles.colorPicker}>
+      <HexAlphaColorPicker color={color} onChange={onChange} />
+      <div className={styles.colorPicker__bottom}>
+        <div
+          className={styles.colorPicker__bottom__color}
+          style={{ backgroundColor: color }}
+        ></div>
+        <div className={styles.colorPicker__bottom__input}>
+          <input
+            type="text"
+            value={color}
+            onChange={(e) => handleChange(e.target.value)}
+            className={styles.colorTextInput}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Atoms/DataProtectionDisclaimer/DataProtectionDisclaimer.tsx

@@ -1,23 +1,23 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './data-protection-disclaimer.module.scss';
-
-interface DataProtectionDisclaimerProps extends HTMLAttributes<HTMLDivElement> {
-  content: string;
-  className?: string;
-  contentClassName?: string;
-}
-
-export const DataProtectionDisclaimer = ({
-  content,
-  className,
-  contentClassName,
-}: DataProtectionDisclaimerProps) => {
-  return (
-    <footer className={`${styles.data_protection_disclaimer} ${className}`}>
-      <div
-        dangerouslySetInnerHTML={{ __html: content }}
-        className={`${styles.data_protection_disclaimer_content} ${contentClassName}`}
-      />
-    </footer>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './data-protection-disclaimer.module.scss';
+
+interface DataProtectionDisclaimerProps extends HTMLAttributes<HTMLDivElement> {
+  content: string;
+  className?: string;
+  contentClassName?: string;
+}
+
+export const DataProtectionDisclaimer = ({
+  content,
+  className,
+  contentClassName,
+}: DataProtectionDisclaimerProps) => {
+  return (
+    <footer className={`${styles.data_protection_disclaimer} ${className}`}>
+      <div
+        dangerouslySetInnerHTML={{ __html: content }}
+        className={`${styles.data_protection_disclaimer_content} ${contentClassName}`}
+      />
+    </footer>
+  );
+};

package/src/Atoms/DataProtectionDisclaimer/data-protection-disclaimer.module.scss

@@ -1,14 +1,14 @@
-.data_protection_disclaimer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-
-  .data_protection_disclaimer_content {
-    font-size: 0.8rem;
-    font-family: OpenSans;
-
-    a {
-      color: var(--blue-normal);
-    }
-  }
-}
+.data_protection_disclaimer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  .data_protection_disclaimer_content {
+    font-size: 0.8rem;
+    font-family: OpenSans;
+
+    a {
+      color: var(--blue-normal);
+    }
+  }
+}

package/src/Atoms/NumbersCode/NumbersCode.modules.scss

@@ -1,5 +1,5 @@
-.blockList {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
+.blockList {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
 }