Merge pull request #373 from senali-d/senali-d/component/connection-chip

feat(components): Add Connection Chip

packages/components/CHANGELOG.md

@@ -5,36 +5,30 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.12.3](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-12-16)
 
-
 ### Bug Fixes
 
-* **clickaway:** remove extra wrapper ([abfdb95](https://github.com/layer5io/sistent/commit/abfdb956c0952f9053954150d10a8d1c58bd7603))
-* **components:** refactor column to not use forwardRef ([6590d55](https://github.com/layer5io/sistent/commit/6590d55809b1c0f75f364986642d41b88c38235e)), closes [#375](https://github.com/layer5io/sistent/issues/375)
-* **components:** update filter component ([e087dbf](https://github.com/layer5io/sistent/commit/e087dbfcd39ae3cd75d589b5a263cbf27f6eb2ff)), closes [#394](https://github.com/layer5io/sistent/issues/394)
-* **configure:** toolbar components ([45c3664](https://github.com/layer5io/sistent/commit/45c3664612fe26dbb4a756874e83e66f16d8a84a))
-* **div:** wrapper ([e80688a](https://github.com/layer5io/sistent/commit/e80688a4928fcd1c04ab22212f444f00e756196b))
-* **filter:** icon and div wrapper ([21738b0](https://github.com/layer5io/sistent/commit/21738b0fcdeaefa3ec72aae8d0f103ab27ef2c81))
-* formatting issues ([d4f5655](https://github.com/layer5io/sistent/commit/d4f5655379f8db835838b88b6138e34928f09112))
-* **issues:** column ([fddc3c0](https://github.com/layer5io/sistent/commit/fddc3c04baef4e6bfc6f6d3b2e453f81ba77cb3d))
-* lint issues ([04a9a43](https://github.com/layer5io/sistent/commit/04a9a43cd9f1598d2aca8fcd738b448ecb41065c))
-* **pretier:** check ([182c5ed](https://github.com/layer5io/sistent/commit/182c5ed62d659c6050da47fd8bec960e994f937b))
-* **search:** search width when not expanded ([5183dcc](https://github.com/layer5io/sistent/commit/5183dcc77bae6b1ab022960b6ea11b40ca70c439))
-* **table:** null issue for cols ([27c72c1](https://github.com/layer5io/sistent/commit/27c72c1d573c97a20be36f7cab98b3b61eb2fd2d))
-
+- **clickaway:** remove extra wrapper ([abfdb95](https://github.com/layer5io/sistent/commit/abfdb956c0952f9053954150d10a8d1c58bd7603))
+- **components:** refactor column to not use forwardRef ([6590d55](https://github.com/layer5io/sistent/commit/6590d55809b1c0f75f364986642d41b88c38235e)), closes [#375](https://github.com/layer5io/sistent/issues/375)
+- **components:** update filter component ([e087dbf](https://github.com/layer5io/sistent/commit/e087dbfcd39ae3cd75d589b5a263cbf27f6eb2ff)), closes [#394](https://github.com/layer5io/sistent/issues/394)
+- **configure:** toolbar components ([45c3664](https://github.com/layer5io/sistent/commit/45c3664612fe26dbb4a756874e83e66f16d8a84a))
+- **div:** wrapper ([e80688a](https://github.com/layer5io/sistent/commit/e80688a4928fcd1c04ab22212f444f00e756196b))
+- **filter:** icon and div wrapper ([21738b0](https://github.com/layer5io/sistent/commit/21738b0fcdeaefa3ec72aae8d0f103ab27ef2c81))
+- formatting issues ([d4f5655](https://github.com/layer5io/sistent/commit/d4f5655379f8db835838b88b6138e34928f09112))
+- **issues:** column ([fddc3c0](https://github.com/layer5io/sistent/commit/fddc3c04baef4e6bfc6f6d3b2e453f81ba77cb3d))
+- lint issues ([04a9a43](https://github.com/layer5io/sistent/commit/04a9a43cd9f1598d2aca8fcd738b448ecb41065c))
+- **pretier:** check ([182c5ed](https://github.com/layer5io/sistent/commit/182c5ed62d659c6050da47fd8bec960e994f937b))
+- **search:** search width when not expanded ([5183dcc](https://github.com/layer5io/sistent/commit/5183dcc77bae6b1ab022960b6ea11b40ca70c439))
+- **table:** null issue for cols ([27c72c1](https://github.com/layer5io/sistent/commit/27c72c1d573c97a20be36f7cab98b3b61eb2fd2d))
 
 ### Features
 
-* Add flip card component ([031e6bb](https://github.com/layer5io/sistent/commit/031e6bb525e6f904b52fe266ea4ea4f35cae6344))
-* **add:** date formats ([2e70ef8](https://github.com/layer5io/sistent/commit/2e70ef82b0d30f8f5baed4a8076a338de6dfccb2))
-* Change useState import ([2202d4a](https://github.com/layer5io/sistent/commit/2202d4ab691fce8793234d3b793b47fd577efed7))
-* **components:** create PopperListener component ([ad676a6](https://github.com/layer5io/sistent/commit/ad676a6262a9b60e4614efebbe94ebd10d7460b0)), closes [#390](https://github.com/layer5io/sistent/issues/390)
-* **components:** create TooltipIcon ([08bc434](https://github.com/layer5io/sistent/commit/08bc434026963874c94ceda85f02c61ac9d42f71)), closes [#376](https://github.com/layer5io/sistent/issues/376)
-* **components:** update SearchBar ([92486f6](https://github.com/layer5io/sistent/commit/92486f694bc1e340b4de62013f5799354dd6e55d)), closes [#396](https://github.com/layer5io/sistent/issues/396)
-* **prop:** add color prop ([c16c36d](https://github.com/layer5io/sistent/commit/c16c36d040e0e28161efad3263d57b6e1e405e11))
-
-
-
-
+- Add flip card component ([031e6bb](https://github.com/layer5io/sistent/commit/031e6bb525e6f904b52fe266ea4ea4f35cae6344))
+- **add:** date formats ([2e70ef8](https://github.com/layer5io/sistent/commit/2e70ef82b0d30f8f5baed4a8076a338de6dfccb2))
+- Change useState import ([2202d4a](https://github.com/layer5io/sistent/commit/2202d4ab691fce8793234d3b793b47fd577efed7))
+- **components:** create PopperListener component ([ad676a6](https://github.com/layer5io/sistent/commit/ad676a6262a9b60e4614efebbe94ebd10d7460b0)), closes [#390](https://github.com/layer5io/sistent/issues/390)
+- **components:** create TooltipIcon ([08bc434](https://github.com/layer5io/sistent/commit/08bc434026963874c94ceda85f02c61ac9d42f71)), closes [#376](https://github.com/layer5io/sistent/issues/376)
+- **components:** update SearchBar ([92486f6](https://github.com/layer5io/sistent/commit/92486f694bc1e340b4de62013f5799354dd6e55d)), closes [#396](https://github.com/layer5io/sistent/issues/396)
+- **prop:** add color prop ([c16c36d](https://github.com/layer5io/sistent/commit/c16c36d040e0e28161efad3263d57b6e1e405e11))
 
 ## [0.12.2](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-12-12)
 

packages/components/src/custom/ConnectionChip/ConnectionChip.tsx

@@ -0,0 +1,56 @@
+import { ChipProps, TooltipProps } from '@mui/material';
+import React from 'react';
+import { Chip } from '../../base/Chip';
+import { Tooltip } from '../../base/Tooltip';
+
+export interface ConnectionChipProps {
+  tooltip: string;
+  tooltipPlacement?: TooltipProps['placement'];
+  variant?: ChipProps['variant'];
+  label: string;
+  icon?: React.ReactElement;
+  onClick?: () => void;
+  onDelete?: () => void;
+  style?: React.CSSProperties;
+}
+
+function ConnectionChip({
+  tooltip,
+  tooltipPlacement = 'top',
+  variant = 'filled',
+  label,
+  icon,
+  onClick,
+  onDelete,
+  style,
+  ...rest
+}: ConnectionChipProps): JSX.Element {
+  return (
+    <Tooltip title={tooltip} placement={tooltipPlacement}>
+      <Chip
+        sx={{
+          paddingY: '10px',
+          padding: '5px 6px !important',
+          color: 'black',
+          fontSize: '14px',
+          textTransform: 'uppercase',
+          fontWeight: 400,
+          height: 'unset',
+          borderRadius: '100px',
+          border: '0.5px solid #51636B',
+          background: 'white',
+          maxWidth: '230px'
+        }}
+        variant={variant}
+        label={label}
+        onClick={onClick}
+        onDelete={onDelete}
+        icon={icon}
+        style={style}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+export default ConnectionChip;

packages/components/src/custom/ConnectionChip/index.tsx

@@ -0,0 +1,3 @@
+import ConnectionChip from './ConnectionChip';
+
+export { ConnectionChip };

packages/components/src/custom/index.tsx

@@ -1,9 +1,10 @@
 // import { ErrorBoundary, withErrorBoundary, withSuppressedErrorBoundary } from './ErrorBoundary';
+import { ConnectionChip } from './ConnectionChip';
 import { FlipCard } from './FlipCard';
 import { useWindowDimensions } from './Helpers/Dimension';
 import { useNotificationHandler } from './Helpers/Notification';
 import { StyledTooltip } from './Tooltip';
 
 export { StyledChartDialog } from './ChartDialog';
 export { StyledSearchBar } from './StyledSearchBar';
-export { FlipCard, StyledTooltip, useNotificationHandler, useWindowDimensions };
+export { ConnectionChip, FlipCard, StyledTooltip, useNotificationHandler, useWindowDimensions };

packages/svg/CHANGELOG.md

@@ -5,17 +5,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [0.14.3](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-12-16)
 
-
 ### Features
 
-* Added Icons - Left arrow, Right arrow, K8, smp ([14ca4e3](https://github.com/layer5io/sistent/commit/14ca4e339fc4e03e6f9d98488c435a5f6f2c9a23))
-* fix typo ([e97e753](https://github.com/layer5io/sistent/commit/e97e753645d47fbec7117384eec8fe0bfaf612f9))
-* formatting ([86aa4cd](https://github.com/layer5io/sistent/commit/86aa4cdaedbd6d4f1a20100dcf4412d0d6177fab))
-* **svg:** create icons for TypingFilter component ([8217b49](https://github.com/layer5io/sistent/commit/8217b49ce3fb597d2e032db6f5762d22a240fac6)), closes [#400](https://github.com/layer5io/sistent/issues/400) [#341](https://github.com/layer5io/sistent/issues/341)
-
-
-
-
+- Added Icons - Left arrow, Right arrow, K8, smp ([14ca4e3](https://github.com/layer5io/sistent/commit/14ca4e339fc4e03e6f9d98488c435a5f6f2c9a23))
+- fix typo ([e97e753](https://github.com/layer5io/sistent/commit/e97e753645d47fbec7117384eec8fe0bfaf612f9))
+- formatting ([86aa4cd](https://github.com/layer5io/sistent/commit/86aa4cdaedbd6d4f1a20100dcf4412d0d6177fab))
+- **svg:** create icons for TypingFilter component ([8217b49](https://github.com/layer5io/sistent/commit/8217b49ce3fb597d2e032db6f5762d22a240fac6)), closes [#400](https://github.com/layer5io/sistent/issues/400) [#341](https://github.com/layer5io/sistent/issues/341)
 
 ## [0.14.2](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-12-12)