@synerise/ds-badge 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@0.7.1...@synerise/ds-badge@0.8.0) (2024-07-05)
+
+
+### Features
+
+* **badge:** added IconBadge ([4f44b60](https://github.com/Synerise/synerise-design/commit/4f44b60b3eff77eb6c21b9ba0ec0cdf745100eff))
+
+
+
+
+
 ## [0.7.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@0.7.0...@synerise/ds-badge@0.7.1) (2024-05-29)
 
 **Note:** Version bump only for package @synerise/ds-badge

package/README.md

@@ -93,3 +93,17 @@ import Badge from '@synerise/ds-badge'
 | Values                                                                                                                                                                                                                                                                                                                                                                                                      | 
 | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 
 | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` / `blue-600` / `green-600` / `mars-600` / `purple-600` / `cyan-600` / `yellow-600` / `violet-600` / `blue-700` / `green-700` / `mars-700` / `purple-700` / `cyan-700` / `yellow-700` / `violet-700` / `blue-500` / `green-500` / `mars-500` / `purple-500` / `cyan-500` / `yellow-500` / `violet-500`  | 
+
+
+### IconBadge
+
+Displays a predefined (depending on status) or custom icon as badge
+
+
+| Property | Description               | Type                                                         | Default |
+|----------|---------------------------|--------------------------------------------------------------|---------|
+| status   | Set badge as a status dot | `active` / `inactive` / `blocked` / `processing` / `warning` | -       |
+| icon     | Custom icon to display    | `ReactNode`                                                  | -       |
+
+
+Either icon or status is mandatory.

package/dist/IconBadge/IconBadge.constants.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '@synerise/ds-icon';
+import { Status } from '../Badge.types';
+export declare const STATUS_ICONS: Record<Exclude<Status, undefined | 'inactive'>, Partial<IconProps>>;

package/dist/IconBadge/IconBadge.constants.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Check3S, ErrorFillS, SpinnerS, WarningFillS } from '@synerise/ds-icon';
+import { theme } from '@synerise/ds-core';
+export var STATUS_ICONS = {
+  active: {
+    component: /*#__PURE__*/React.createElement(Check3S, null),
+    color: theme.palette['fern-600']
+  },
+  blocked: {
+    component: /*#__PURE__*/React.createElement(ErrorFillS, null),
+    color: theme.palette['red-600']
+  },
+  processing: {
+    component: /*#__PURE__*/React.createElement(SpinnerS, null),
+    color: theme.palette['blue-600']
+  },
+  warning: {
+    component: /*#__PURE__*/React.createElement(WarningFillS, null),
+    color: theme.palette['yellow-600']
+  }
+};

package/dist/IconBadge/IconBadge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IconBadgeProps } from './IconBadge.types';
+export declare const IconBadge: ({ children, ...props }: IconBadgeProps) => React.JSX.Element;

package/dist/IconBadge/IconBadge.js

@@ -0,0 +1,23 @@
+var _excluded = ["children"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { omitKeys } from '@synerise/ds-utils';
+import * as S from './IconBadge.styles';
+import { hasCustomIcon, renderStatusIcon } from './IconBadge.utils';
+export var IconBadge = function IconBadge(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  // eslint-disable-next-line react/destructuring-assignment
+  var iconComponent = hasCustomIcon(props) ? props.icon : renderStatusIcon(props.status);
+  var rest = omitKeys(['icon', 'status'], props);
+  return /*#__PURE__*/React.createElement(S.IconBadgeWrapper, _extends({
+    "data-testid": "ds-badge-icon-badge"
+  }, rest), children, /*#__PURE__*/React.createElement(S.IconBadgeIcon, {
+    className: "ds-icon-badge"
+  }, iconComponent));
+};

package/dist/IconBadge/IconBadge.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/IconBadge/IconBadge.styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const IconBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconBadgeIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Icon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {
+    status?: string | undefined;
+}, never>;

package/dist/IconBadge/IconBadge.styles.js

@@ -0,0 +1,17 @@
+import styled, { css, keyframes } from 'styled-components';
+import DSIcon from '@synerise/ds-icon';
+var spinnerAnimation = keyframes(["0%{transform:rotate(0deg);}100%{transform:rotate(720deg);}"]);
+export var IconBadgeWrapper = styled.div.withConfig({
+  displayName: "IconBadgestyles__IconBadgeWrapper",
+  componentId: "dio7h6-0"
+})(["position:relative;display:inline-block;"]);
+export var IconBadgeIcon = styled.div.withConfig({
+  displayName: "IconBadgestyles__IconBadgeIcon",
+  componentId: "dio7h6-1"
+})(["position:absolute;top:0;right:0;z-index:10;"]);
+export var Icon = styled(DSIcon).withConfig({
+  displayName: "IconBadgestyles__Icon",
+  componentId: "dio7h6-2"
+})(["", ""], function (props) {
+  return props.status === 'processing' && css(["animation:", " 2s linear infinite;"], spinnerAnimation);
+});

package/dist/IconBadge/IconBadge.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement, ReactNode, HTMLAttributes } from 'react';
+import { Status } from '../Badge.types';
+export type CustomIconBadgeProps = {
+    icon: ReactElement;
+};
+export type StatusIconBadgeProps = {
+    status: Exclude<Status, undefined>;
+};
+export type IconBadgeProps = (CustomIconBadgeProps | StatusIconBadgeProps) & {
+    children?: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/IconBadge/IconBadge.types.js

@@ -0,0 +1 @@
+export {};

package/dist/IconBadge/IconBadge.utils.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CustomIconBadgeProps, StatusIconBadgeProps } from './IconBadge.types';
+export declare const hasCustomIcon: (props: CustomIconBadgeProps | StatusIconBadgeProps) => props is CustomIconBadgeProps;
+export declare const renderStatusIcon: (status: StatusIconBadgeProps['status']) => React.JSX.Element | null;

package/dist/IconBadge/IconBadge.utils.js

@@ -0,0 +1,13 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { STATUS_ICONS } from './IconBadge.constants';
+import * as S from './IconBadge.styles';
+export var hasCustomIcon = function hasCustomIcon(props) {
+  return 'icon' in props;
+};
+export var renderStatusIcon = function renderStatusIcon(status) {
+  return STATUS_ICONS[status] ? /*#__PURE__*/React.createElement(S.Icon, _extends({
+    status: status
+  }, STATUS_ICONS[status])) : null;
+};

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from './Badge';
 export type { Status as BadgeStatus, BadgeProps, Color as BadgeColor, ColorHue as BadgeColorHue } from './Badge.types';
+export * from './IconBadge/IconBadge';
+export type { IconBadgeProps, StatusIconBadgeProps, CustomIconBadgeProps } from './IconBadge/IconBadge.types';

package/dist/index.js

@@ -1 +1,2 @@
-export { default } from './Badge';
+export { default } from './Badge';
+export * from './IconBadge/IconBadge';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-badge",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Badge UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,17 +33,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-typography": "^0.15.0"
+    "@synerise/ds-icon": "^0.64.0",
+    "@synerise/ds-typography": "^0.15.1",
+    "@synerise/ds-utils": "^0.28.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "antd": "4.7.0",
-    "react": ">=16.9.0 < 17.0.0",
+    "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "devDependencies": {
-    "@synerise/ds-utils": "^0.27.0",
-    "@testing-library/jest-dom": "5.1.1"
-  },
-  "gitHead": "6bd94c78745df68ee3b853120a863ab24fc233ef"
+  "gitHead": "6e5e5202d6c6f1c2caf6bfef799009813b437b3d"
 }