odaptos_design_system 2.0.5 → 2.0.6

package/package.json

@@ -1,103 +1,103 @@
-{
-  "version": "2.0.5",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "engines": {
-    "node": ">=10"
-  },
-  "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
-    "storybook": "storybook dev -p 8080",
-    "build-storybook": "storybook build",
-    "deploy:dev": "sh deploy.sh dev",
-    "deploy:stage": "sh deploy.sh stage"
-  },
-  "peerDependencies": {
-    "react": ">=16"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "name": "odaptos_design_system",
-  "author": "Odaptos",
-  "module": "dist/design_system.esm.js",
-  "size-limit": [
-    {
-      "path": "dist/design_system.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/design_system.esm.js",
-      "limit": "10 KB"
-    }
-  ],
-  "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@babel/preset-env": "^7.21.5",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.5",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-essentials": "^7.0.8",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^7.0.10",
-    "@storybook/addons": "^7.0.8",
-    "@storybook/cli": "^7.0.8",
-    "@storybook/react": "^7.0.8",
-    "@storybook/react-webpack5": "^7.0.9",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "babel-loader": "^9.1.2",
-    "husky": "^8.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "size-limit": "^8.2.4",
-    "storybook": "^7.0.8",
-    "storybook-design-token": "^3.0.0-beta.3",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.5.0",
-    "typescript": "^3.9.10"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.15.6",
-    "@mui/x-date-pickers": "^6.19.0",
-    "@storybook/addon-interactions": "^7.0.10",
-    "@storybook/preset-scss": "^1.0.3",
-    "autoprefixer": "^10.4.16",
-    "colord": "^2.9.3",
-    "css-loader": "^6.7.3",
-    "cssnano": "^6.0.1",
-    "date-fns": "^3.3.1",
-    "dayjs": "^1.11.10",
-    "eslint-plugin-mdx": "^2.1.0",
-    "react-colorful": "^5.6.1",
-    "react-fast-marquee": "^1.6.4",
-    "resolve-url-loader": "^5.0.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.2.2",
-    "storybook-css-modules-preset": "^1.1.1",
-    "style-loader": "^3.3.2"
-  }
-}
+{
+  "version": "2.0.6",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
+    "storybook": "storybook dev -p 8080",
+    "build-storybook": "storybook build",
+    "deploy:dev": "sh deploy.sh dev",
+    "deploy:stage": "sh deploy.sh stage"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "odaptos_design_system",
+  "author": "Odaptos",
+  "module": "dist/design_system.esm.js",
+  "size-limit": [
+    {
+      "path": "dist/design_system.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/design_system.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
+    "@size-limit/preset-small-lib": "^8.2.4",
+    "@storybook/addon-essentials": "^7.0.8",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^7.0.10",
+    "@storybook/addons": "^7.0.8",
+    "@storybook/cli": "^7.0.8",
+    "@storybook/react": "^7.0.8",
+    "@storybook/react-webpack5": "^7.0.9",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "babel-loader": "^9.1.2",
+    "husky": "^8.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "size-limit": "^8.2.4",
+    "storybook": "^7.0.8",
+    "storybook-design-token": "^3.0.0-beta.3",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.5.0",
+    "typescript": "^3.9.10"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.6",
+    "@mui/x-date-pickers": "^6.19.0",
+    "@storybook/addon-interactions": "^7.0.10",
+    "@storybook/preset-scss": "^1.0.3",
+    "autoprefixer": "^10.4.16",
+    "colord": "^2.9.3",
+    "css-loader": "^6.7.3",
+    "cssnano": "^6.0.1",
+    "date-fns": "^3.3.1",
+    "dayjs": "^1.11.10",
+    "eslint-plugin-mdx": "^2.1.0",
+    "react-colorful": "^5.6.1",
+    "react-fast-marquee": "^1.6.4",
+    "resolve-url-loader": "^5.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.2.2",
+    "storybook-css-modules-preset": "^1.1.1",
+    "style-loader": "^3.3.2"
+  }
+}

package/src/Atoms/Avatar/Avatar.module.scss

@@ -1,72 +1,72 @@
-.initialAvatar {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 2.5rem;
-  background: #e5f1ff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.imgAvatar {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 2.5rem;
-  background: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 100%;
-  }
-}
-
-.avatar_xs {
-  width: 1.5rem;
-  height: 1.5rem;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  max-width: 1.5rem;
-  max-height: 1.5rem;
-  border-radius: 1.5rem;
-}
-.avatar_sm {
-  width: 2rem;
-  height: 2rem;
-  min-width: 2rem;
-  min-height: 2rem;
-  max-width: 2rem;
-  max-height: 2rem;
-  border-radius: 2rem;
-}
-.avatar_base {
-  width: 2.5rem;
-  height: 2.5rem;
-  min-width: 2.5rem;
-  min-height: 2.5rem;
-  max-height: 2.5rem;
-  border-radius: 2.5rem;
-}
-
-.avatar_lg {
-  width: 3rem;
-  height: 3rem;
-  min-width: 3rem;
-  min-height: 3rem;
-  max-width: 3rem;
-  max-height: 3rem;
-  border-radius: 3rem;
-}
-
-.avatar_xl {
-  width: 3.5rem;
-  height: 3.5rem;
-  min-width: 3.5rem;
-  min-height: 3.5rem;
-  max-width: 3.5rem;
-  max-height: 3.5rem;
-  border-radius: 3.5rem;
-}
+.initialAvatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 2.5rem;
+  background: #e5f1ff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.imgAvatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 2.5rem;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 100%;
+  }
+}
+
+.avatar_xs {
+  width: 1.5rem;
+  height: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+  border-radius: 1.5rem;
+}
+.avatar_sm {
+  width: 2rem;
+  height: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
+  max-width: 2rem;
+  max-height: 2rem;
+  border-radius: 2rem;
+}
+.avatar_base {
+  width: 2.5rem;
+  height: 2.5rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  max-height: 2.5rem;
+  border-radius: 2.5rem;
+}
+
+.avatar_lg {
+  width: 3rem;
+  height: 3rem;
+  min-width: 3rem;
+  min-height: 3rem;
+  max-width: 3rem;
+  max-height: 3rem;
+  border-radius: 3rem;
+}
+
+.avatar_xl {
+  width: 3.5rem;
+  height: 3.5rem;
+  min-width: 3.5rem;
+  min-height: 3.5rem;
+  max-width: 3.5rem;
+  max-height: 3.5rem;
+  border-radius: 3.5rem;
+}

package/src/Atoms/Avatar/Avatar.tsx

@@ -1,43 +1,43 @@
-import { Title, colors } from '../../';
-import React, { HTMLAttributes } from 'react';
-import styles from './Avatar.module.scss';
-
-interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
-  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
-  userName: string;
-  userColor?: string;
-}
-export const Avatar = ({ size = 'base', userName, userColor }: AvatarProps) => {
-  const nameArray = userName.split(' ');
-
-  // First letter of first and last name
-  const name = nameArray[1]
-    ? nameArray[0][0] + nameArray[1][0]
-    : nameArray[0].length >= 2
-    ? nameArray[0][0] + nameArray[0][1]
-    : nameArray[0][0];
-  const getSize = () => {
-    if (size === 'xs') return styles.avatar_xs;
-    else if (size === 'sm') return styles.avatar_sm;
-    else if (size === 'base') return styles.avatar_base;
-    else if (size === 'lg') return styles.avatar_lg;
-    else if (size === 'xl') return styles.avatar_xl;
-    else return styles.avatar_base;
-  };
-
-  return (
-    <div
-      className={`${styles.initialAvatar} ${getSize()}`}
-      style={{ backgroundColor: userColor ?? '#E5F1FF' }}
-    >
-      {userName && (
-        <Title
-          text={name.toUpperCase()}
-          weight="bold"
-          size={size}
-          color={userColor ? colors.neutral_950 : '#003066'}
-        />
-      )}
-    </div>
-  );
-};
+import { Title, colors } from '../../';
+import React, { HTMLAttributes } from 'react';
+import styles from './Avatar.module.scss';
+
+interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl';
+  userName: string;
+  userColor?: string;
+}
+export const Avatar = ({ size = 'base', userName, userColor }: AvatarProps) => {
+  const nameArray = userName.split(' ');
+
+  // First letter of first and last name
+  const name = nameArray[1]
+    ? nameArray[0][0] + nameArray[1][0]
+    : nameArray[0].length >= 2
+    ? nameArray[0][0] + nameArray[0][1]
+    : nameArray[0][0];
+  const getSize = () => {
+    if (size === 'xs') return styles.avatar_xs;
+    else if (size === 'sm') return styles.avatar_sm;
+    else if (size === 'base') return styles.avatar_base;
+    else if (size === 'lg') return styles.avatar_lg;
+    else if (size === 'xl') return styles.avatar_xl;
+    else return styles.avatar_base;
+  };
+
+  return (
+    <div
+      className={`${styles.initialAvatar} ${getSize()}`}
+      style={{ backgroundColor: userColor ?? '#E5F1FF' }}
+    >
+      {userName && (
+        <Title
+          text={name.toUpperCase()}
+          weight="bold"
+          size={size}
+          color={userColor ? colors.neutral_950 : '#003066'}
+        />
+      )}
+    </div>
+  );
+};

package/src/Atoms/Badge/Badge.modules.scss

@@ -1,108 +1,108 @@
-.badge {
-  display: flex;
-  padding: 0rem 0.75rem;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 62.4375rem;
-  max-width: 10rem;
-  width: fit-content;
-
-  p {
-    white-space: nowrap;
-  }
-}
-
-.badge_idle {
-  background: var(--Color-Neutral-Clear-Shades-150, #eee);
-  svg {
-    stroke: #64666a !important;
-    fill: #64666a !important;
-  }
-}
-.badge_info {
-  background: var(--color-primary-100, #e5f1ff);
-  svg {
-    stroke: #004799 !important;
-    fill: #004799 !important;
-  }
-}
-.badge_violet {
-  background: var(--Color-Extended-Purple-100, #e9d3fd);
-  svg {
-    stroke: #5c1994 !important;
-    fill: #5c1994 !important;
-  }
-}
-.badge_light {
-  background: var(--Color-Neutral-Clear-Shades-150, #eee);
-  svg {
-    stroke: #32353a !important;
-    fill: #32353a !important;
-  }
-}
-.badge_success {
-  background: var(--color-extended-green-100, #e8f5ea);
-  svg {
-    stroke: #3c743d !important;
-    fill: #3c743d !important;
-  }
-}
-.badge_warning {
-  background: var(--color-extended-yellow-100, #fff3d6);
-  svg {
-    stroke: #6e4f00 !important;
-    fill: #6e4f00 !important;
-  }
-}
-.badge_critical {
-  background: var(--color-extended-red-100, #fddbdb);
-  svg {
-    stroke: #98312e !important;
-    fill: #98312e !important;
-  }
-}
-.badge_alt {
-  background: var(--Color-Extended-Purple-100, #e9d3fd);
-  svg {
-    stroke: #5c1994 !important;
-    fill: #5c1994 !important;
-  }
-}
-
-.badge_sm {
-  padding: 0rem 0.75rem;
-  justify-content: center;
-  height: 1.25rem;
-  align-items: center;
-  gap: 0.25rem;
-  svg {
-    height: 0.75rem;
-    width: 0.75rem;
-  }
-}
-
-.badge_lg {
-  height: 2.25rem;
-  padding: 0rem 0.75rem;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-
-  svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-.badge_base {
-  padding: 0rem 0.75rem;
-  height: 1.75rem;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-
-  svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
+.badge {
+  display: flex;
+  padding: 0rem 0.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 62.4375rem;
+  max-width: 10rem;
+  width: fit-content;
+
+  p {
+    white-space: nowrap;
+  }
+}
+
+.badge_idle {
+  background: var(--Color-Neutral-Clear-Shades-150, #eee);
+  svg {
+    stroke: #64666a !important;
+    fill: #64666a !important;
+  }
+}
+.badge_info {
+  background: var(--color-primary-100, #e5f1ff);
+  svg {
+    stroke: #004799 !important;
+    fill: #004799 !important;
+  }
+}
+.badge_violet {
+  background: var(--Color-Extended-Purple-100, #e9d3fd);
+  svg {
+    stroke: #5c1994 !important;
+    fill: #5c1994 !important;
+  }
+}
+.badge_light {
+  background: var(--Color-Neutral-Clear-Shades-150, #eee);
+  svg {
+    stroke: #32353a !important;
+    fill: #32353a !important;
+  }
+}
+.badge_success {
+  background: var(--color-extended-green-100, #e8f5ea);
+  svg {
+    stroke: #3c743d !important;
+    fill: #3c743d !important;
+  }
+}
+.badge_warning {
+  background: var(--color-extended-yellow-100, #fff3d6);
+  svg {
+    stroke: #6e4f00 !important;
+    fill: #6e4f00 !important;
+  }
+}
+.badge_critical {
+  background: var(--color-extended-red-100, #fddbdb);
+  svg {
+    stroke: #98312e !important;
+    fill: #98312e !important;
+  }
+}
+.badge_alt {
+  background: var(--Color-Extended-Purple-100, #e9d3fd);
+  svg {
+    stroke: #5c1994 !important;
+    fill: #5c1994 !important;
+  }
+}
+
+.badge_sm {
+  padding: 0rem 0.75rem;
+  justify-content: center;
+  height: 1.25rem;
+  align-items: center;
+  gap: 0.25rem;
+  svg {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+
+.badge_lg {
+  height: 2.25rem;
+  padding: 0rem 0.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+.badge_base {
+  padding: 0rem 0.75rem;
+  height: 1.75rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}