odaptos_design_system 2.0.5 → 2.0.7

package/src/Organisms/Table/rows.tsx

@@ -1,86 +1,86 @@
-import React from 'react';
-import { Checkbox } from '../../';
-import styles from './rows.modules.scss';
-import { TableCell } from './table-cell';
-
-interface HeaderItem {
-  name: string;
-  icon?: JSX.Element;
-  flexWidth?: number;
-  weight?: 'semi-bold' | 'bold' | 'regular';
-  className?: string;
-  tooltip?: string;
-}
-
-interface DataProps {
-  value: any;
-  className?: string;
-}
-
-interface RowsProps {
-  onClickRow: () => void;
-  className: string;
-  id?: string;
-  selected: boolean;
-  onSelect: () => void;
-  data: DataProps[];
-}
-
-interface TableRowsProps {
-  headers: HeaderItem[];
-  rows: RowsProps[];
-  isFooterHidden: boolean;
-  id?: string;
-  selectable?: boolean;
-  rowsClassName?: string;
-}
-
-export const TableRows = ({
-  headers,
-  rows,
-  isFooterHidden,
-  id,
-  selectable = false,
-  rowsClassName,
-}: TableRowsProps) => {
-  return (
-    <div id={id} className={`${styles.rows} ${rowsClassName}`}>
-      {rows.map((row, index) => {
-
-        let rowClassName = `${styles.row} ${row.className}`;
-
-        // Add first and last row classes
-        if (index === 0) {
-          rowClassName += ` ${styles.firstRow}`;
-        } else if (index === rows.length - 1 && isFooterHidden) {
-          rowClassName += ` ${styles.lastRow}`;
-        }
-
-        return (
-          <div
-            key={`row-${index}`}
-            className={rowClassName}
-            onClick={row.onClickRow}
-            id={row.id}
-          >
-            {selectable && (
-              <Checkbox checked={row.selected} onChange={row.onSelect} />
-            )}
-            {row.data.map((cell, index) => {
-              const flexWidth = headers[index].flexWidth ?? 1;
-              return (
-                <TableCell
-                  className={cell.className}
-                  key={`cell-${index}`}
-                  text={cell.value}
-                  flexWidth={flexWidth}
-                  weight="regular"
-                />
-              );
-            })}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+import React from 'react';
+import { Checkbox } from '../../';
+import styles from './rows.modules.scss';
+import { TableCell } from './table-cell';
+
+interface HeaderItem {
+  name: string;
+  icon?: JSX.Element;
+  flexWidth?: number;
+  weight?: 'semi-bold' | 'bold' | 'regular';
+  className?: string;
+  tooltip?: string;
+}
+
+interface DataProps {
+  value: any;
+  className?: string;
+}
+
+interface RowsProps {
+  onClickRow: () => void;
+  className: string;
+  id?: string;
+  selected: boolean;
+  onSelect: () => void;
+  data: DataProps[];
+}
+
+interface TableRowsProps {
+  headers: HeaderItem[];
+  rows: RowsProps[];
+  isFooterHidden: boolean;
+  id?: string;
+  selectable?: boolean;
+  rowsClassName?: string;
+}
+
+export const TableRows = ({
+  headers,
+  rows,
+  isFooterHidden,
+  id,
+  selectable = false,
+  rowsClassName,
+}: TableRowsProps) => {
+  return (
+    <div id={id} className={`${styles.rows} ${rowsClassName}`}>
+      {rows.map((row, index) => {
+
+        let rowClassName = `${styles.row} ${row.className}`;
+
+        // Add first and last row classes
+        if (index === 0) {
+          rowClassName += ` ${styles.firstRow}`;
+        } else if (index === rows.length - 1 && isFooterHidden) {
+          rowClassName += ` ${styles.lastRow}`;
+        }
+
+        return (
+          <div
+            key={`row-${index}`}
+            className={rowClassName}
+            onClick={row.onClickRow}
+            id={row.id}
+          >
+            {selectable && (
+              <Checkbox checked={row.selected} onChange={row.onSelect} />
+            )}
+            {row.data.map((cell, index) => {
+              const flexWidth = headers[index].flexWidth ?? 1;
+              return (
+                <TableCell
+                  className={cell.className}
+                  key={`cell-${index}`}
+                  text={cell.value}
+                  flexWidth={flexWidth}
+                  weight="regular"
+                />
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/Organisms/Table/table-cell.modules.scss

@@ -1,13 +1,13 @@
-.cell {
-  display: flex;
-  padding: 0.5rem;
-  align-items: center;
-  gap: 0.75rem;
-  min-width: 5rem;
-
-  p {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
+.cell {
+  display: flex;
+  padding: 0.5rem;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 5rem;
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/Organisms/Table/table-cell.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import { Checkbox, Text } from '../../';
-import styles from './table-cell.modules.scss';
-
-interface TableCellProps {
-  text: string;
-  weight?: 'semi-bold' | 'bold' | 'regular';
-  flexWidth?: number;
-  className?: string;
-  children?: JSX.Element;
-  isSelected?: boolean;
-  select?: () => void;
-}
-
-export const TableCell = ({
-  text,
-  weight = 'regular',
-  flexWidth = 1,
-  className,
-  children,
-  isSelected = false,
-  select,
-}: TableCellProps) => {
-  return (
-    <div
-      className={`${styles.cell} ${className && className}`}
-      style={{ flex: flexWidth }}
-    >
-      {isSelected && select && (
-        <Checkbox checked={isSelected} onChange={() => select()} />
-      )}
-      {typeof text === 'object' ? (
-        text
-      ) : (
-        <Text weight={weight} text={text} size="sm" key={`${text}`} />
-      )}
-      {children && children}
-    </div>
-  );
-};
+import React from 'react';
+import { Checkbox, Text } from '../../';
+import styles from './table-cell.modules.scss';
+
+interface TableCellProps {
+  text: string;
+  weight?: 'semi-bold' | 'bold' | 'regular';
+  flexWidth?: number;
+  className?: string;
+  children?: JSX.Element;
+  isSelected?: boolean;
+  select?: () => void;
+}
+
+export const TableCell = ({
+  text,
+  weight = 'regular',
+  flexWidth = 1,
+  className,
+  children,
+  isSelected = false,
+  select,
+}: TableCellProps) => {
+  return (
+    <div
+      className={`${styles.cell} ${className && className}`}
+      style={{ flex: flexWidth }}
+    >
+      {isSelected && select && (
+        <Checkbox checked={isSelected} onChange={() => select()} />
+      )}
+      {typeof text === 'object' ? (
+        text
+      ) : (
+        <Text weight={weight} text={text} size="sm" key={`${text}`} />
+      )}
+      {children && children}
+    </div>
+  );
+};

package/src/Organisms/TextInput/TextInput.modules.scss

@@ -1,55 +1,55 @@
-.input {
-  width: 100%;
-  font-family: var(--sdFontFamilyOpenSans);
-  font-style: normal;
-  font-weight: var(--sdFontWeightRegular);
-  font-size: var(--sdTypoTextNoDecorationRegularBase);
-  line-height: var(--sdLineHeight130);
-  letter-spacing: var(--sdLetterSpacingButtons);
-  text-align: left;
-  margin: unset;
-
-  svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-
-input {
-  font-family: var(--sdFontFamilyOpenSans);
-  font-style: normal;
-  font-weight: var(--sdFontWeightRegular);
-  font-size: var(--sdTypoTextNoDecorationRegularBase);
-  line-height: var(--sdLineHeight130);
-  letter-spacing: var(--sdLetterSpacingButtons);
-  text-align: left;
-  margin: unset;
-}
-
-input.input {
-  height: 1rem;
-}
-.MuiInputBase-root-MuiOutlinedInput-root {
-  font-family: var(--sdFontFamilyOpenSans);
-  font-style: normal;
-  font-weight: var(--sdFontWeightRegular);
-  font-size: var(--sdTypoTextNoDecorationRegularBase);
-  line-height: var(--sdLineHeight130);
-  letter-spacing: var(--sdLetterSpacingButtons);
-  text-align: left;
-  margin: unset;
-}
-
-.input_top_label {
-  margin-bottom: 0.625rem;
-}
-.input .MuiInputBase-input {
-  color: var(--gray-black);
-  font-family: 'OpenSans';
-  font-size: 1rem;
-  padding: 0.375rem 0.75rem;
-}
-
-.text_below {
-  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
-}
+.input {
+  width: 100%;
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdTypoTextNoDecorationRegularBase);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingButtons);
+  text-align: left;
+  margin: unset;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+input {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdTypoTextNoDecorationRegularBase);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingButtons);
+  text-align: left;
+  margin: unset;
+}
+
+input.input {
+  height: 1rem;
+}
+.MuiInputBase-root-MuiOutlinedInput-root {
+  font-family: var(--sdFontFamilyOpenSans);
+  font-style: normal;
+  font-weight: var(--sdFontWeightRegular);
+  font-size: var(--sdTypoTextNoDecorationRegularBase);
+  line-height: var(--sdLineHeight130);
+  letter-spacing: var(--sdLetterSpacingButtons);
+  text-align: left;
+  margin: unset;
+}
+
+.input_top_label {
+  margin-bottom: 0.625rem;
+}
+.input .MuiInputBase-input {
+  color: var(--gray-black);
+  font-family: 'OpenSans';
+  font-size: 1rem;
+  padding: 0.375rem 0.75rem;
+}
+
+.text_below {
+  margin: 0.25rem 0.5rem 0.25rem 0.75rem;
+}