@synerise/ds-empty-states 0.2.62 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-empty-states@0.2.63...@synerise/ds-empty-states@0.3.0) (2024-11-14)
+
+
+### Features
+
+* **empty-states:** added iconPosition and textAlign props ([cbc0c70](https://github.com/Synerise/synerise-design/commit/cbc0c70bc0e7cd4843c10acb4265ae43ec6a1368))
+
+
+
+
+
+## [0.2.63](https://github.com/Synerise/synerise-design/compare/@synerise/ds-empty-states@0.2.62...@synerise/ds-empty-states@0.2.63) (2024-11-12)
+
+**Note:** Version bump only for package @synerise/ds-empty-states
+
+
+
+
+
 ## [0.2.62](https://github.com/Synerise/synerise-design/compare/@synerise/ds-empty-states@0.2.61...@synerise/ds-empty-states@0.2.62) (2024-11-12)
 
 **Note:** Version bump only for package @synerise/ds-empty-states

package/dist/EmptyStates.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { EmptyStatesProps } from './EmptyStates.types';
-declare const EmptyStates: ({ size, label, labelPosition, text, button, fontSize, customIcon, className, mode, }: EmptyStatesProps) => React.JSX.Element;
+declare const EmptyStates: ({ size, label, text, button, fontSize, customIcon, className, mode, iconPosition, textAlign, }: EmptyStatesProps) => React.JSX.Element;
 export default EmptyStates;

package/dist/EmptyStates.js

@@ -10,32 +10,34 @@ var EmptyStates = function EmptyStates(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? EmptyStatesSize.SMALL : _ref$size,
       label = _ref.label,
-      _ref$labelPosition = _ref.labelPosition,
-      labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
       text = _ref.text,
       button = _ref.button,
       fontSize = _ref.fontSize,
       customIcon = _ref.customIcon,
       className = _ref.className,
-      mode = _ref.mode;
+      mode = _ref.mode,
+      _ref$iconPosition = _ref.iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? 'top' : _ref$iconPosition,
+      _ref$textAlign = _ref.textAlign,
+      textAlign = _ref$textAlign === void 0 ? 'center' : _ref$textAlign;
   return /*#__PURE__*/React.createElement(S.EmptyStatesWrapper, {
+    iconPosition: iconPosition,
     mode: mode,
-    className: "ds-empty-states " + className,
-    labelPosition: labelPosition
-  }, customIcon && /*#__PURE__*/React.createElement(S.EmptyStatesIconContainer, {
-    size: size
-  }, /*#__PURE__*/React.createElement(S.StatusIconContainer, null, /*#__PURE__*/React.createElement(Icon, {
+    className: "ds-empty-states " + className
+  }, customIcon && /*#__PURE__*/React.createElement(S.EmptyStatesIconContainer, null, /*#__PURE__*/React.createElement(Icon, {
     "data-testid": "empty-states-custom-icon",
     component: customIcon,
     size: mapSizeToPx[size]
-  }))), text && /*#__PURE__*/React.createElement(S.HeaderWrapper, {
+  })), /*#__PURE__*/React.createElement(S.EmptyStatesContent, {
+    textAlign: textAlign
+  }, text && /*#__PURE__*/React.createElement(S.HeaderWrapper, {
+    hasIcon: Boolean(customIcon),
     "data-testid": "empty-states-header",
     size: size,
     fontSize: fontSize
   }, text), label && /*#__PURE__*/React.createElement(S.TextWrapper, {
-    "data-testid": "empty-states-label",
-    labelPosition: labelPosition
-  }, label), button && /*#__PURE__*/React.createElement(S.ButtonWrapper, null, button));
+    "data-testid": "empty-states-label"
+  }, label), button && /*#__PURE__*/React.createElement(S.ButtonWrapper, null, button)));
 };
 
 export default EmptyStates;

package/dist/EmptyStates.styles.d.ts

@@ -1,17 +1,16 @@
 import { EmptyStatesSize } from './EmptyStates.types';
-export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, {
-    labelPosition: 'bottom' | 'right';
-}, never>;
+export declare const EmptyStatesIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {
     fontSize?: EmptyStatesSize | undefined;
     size?: EmptyStatesSize | undefined;
+    hasIcon?: boolean | undefined;
 }, never>;
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EmptyStatesWrapper: import("styled-components").StyledComponent<"div", any, {
-    labelPosition: 'bottom' | 'right';
+    iconPosition: 'top' | 'left' | 'right';
     mode?: "absolute" | undefined;
 }, never>;
-export declare const EmptyStatesIconContainer: import("styled-components").StyledComponent<"div", any, {
-    size?: EmptyStatesSize | undefined;
+export declare const EmptyStatesContent: import("styled-components").StyledComponent<"div", any, {
+    textAlign: 'left' | 'right' | 'center' | 'justify';
 }, never>;
-export declare const StatusIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/EmptyStates.styles.js

@@ -1,20 +1,36 @@
 import styled, { css } from 'styled-components';
 import { EmptyStatesSize, FontSize } from './EmptyStates.types';
 var FONT_SIZE_DEFAULT = 14;
-var mapElementsPosition = {
-  right: 'row',
-  bottom: 'column'
+
+var getFlexStyle = function getFlexStyle(iconPosition) {
+  return iconPosition === 'top' ? css(["flex-direction:", ";align-items:center;"], mapIconPosition[iconPosition]) : css(["flex-direction:", ";gap:16px;align-items:flex-start;"], mapIconPosition[iconPosition]);
 };
+
+var mapIconPosition = {
+  right: 'row-reverse',
+  top: 'column',
+  left: 'row'
+};
+var mapTextAlign = {
+  right: 'flex-end',
+  left: 'flex-start',
+  center: 'center',
+  justify: 'center'
+};
+export var EmptyStatesIconContainer = styled.div.withConfig({
+  displayName: "EmptyStatesstyles__EmptyStatesIconContainer",
+  componentId: "sc-7sb4gr-0"
+})([""]);
 export var TextWrapper = styled.div.withConfig({
   displayName: "EmptyStatesstyles__TextWrapper",
-  componentId: "sc-7sb4gr-0"
-})(["display:flex;line-height:16px;max-width:440px;word-wrap:break-word;justify-content:", ";text-align:center;padding-bottom:8px;"], function (props) {
-  return props.labelPosition === 'bottom' ? 'center' : 'flex-start';
-});
+  componentId: "sc-7sb4gr-1"
+})(["display:flex;line-height:16px;max-width:440px;word-wrap:break-word;padding-bottom:8px;"]);
 export var HeaderWrapper = styled.div.withConfig({
   displayName: "EmptyStatesstyles__HeaderWrapper",
-  componentId: "sc-7sb4gr-1"
-})(["display:flex;line-height:16px;color:", ";font-size:", "px;font-weight:500;padding-bottom:", ";"], function (props) {
+  componentId: "sc-7sb4gr-2"
+})(["display:flex;line-height:16px;margin-top:", ";color:", ";font-size:", "px;font-weight:500;padding-bottom:", ";"], function (props) {
+  return props.hasIcon && props.size === EmptyStatesSize.SMALL ? '12px' : '';
+}, function (props) {
   return props.theme.palette['grey-800'];
 }, function (props) {
   return FontSize[props.fontSize] || FONT_SIZE_DEFAULT;
@@ -23,23 +39,21 @@ export var HeaderWrapper = styled.div.withConfig({
 });
 export var ButtonWrapper = styled.div.withConfig({
   displayName: "EmptyStatesstyles__ButtonWrapper",
-  componentId: "sc-7sb4gr-2"
+  componentId: "sc-7sb4gr-3"
 })(["padding-top:12px;display:flex;"]);
 export var EmptyStatesWrapper = styled.div.withConfig({
   displayName: "EmptyStatesstyles__EmptyStatesWrapper",
-  componentId: "sc-7sb4gr-3"
-})(["display:flex;flex-direction:", ";align-items:center;justify-content:center;", ";"], function (props) {
-  return mapElementsPosition[props.labelPosition];
+  componentId: "sc-7sb4gr-4"
+})(["display:flex;", " ", ";"], function (props) {
+  return getFlexStyle(props.iconPosition);
 }, function (props) {
   return props.mode === 'absolute' && css(["position:absolute;top:50%;left:50%;"]);
 });
-export var EmptyStatesIconContainer = styled.div.withConfig({
-  displayName: "EmptyStatesstyles__EmptyStatesIconContainer",
-  componentId: "sc-7sb4gr-4"
-})(["margin-bottom:", ";"], function (props) {
-  return props.size === EmptyStatesSize.SMALL ? '8px' : '40px';
-});
-export var StatusIconContainer = styled.div.withConfig({
-  displayName: "EmptyStatesstyles__StatusIconContainer",
+export var EmptyStatesContent = styled.div.withConfig({
+  displayName: "EmptyStatesstyles__EmptyStatesContent",
   componentId: "sc-7sb4gr-5"
-})(["width:40px;height:40px;border-radius:20px;text-align:center;display:flex;align-items:center;justify-content:center;margin:0 auto;"]);
+})(["display:flex;flex-direction:column;text-align:", ";> *{justify-content:", ";}"], function (props) {
+  return props.textAlign;
+}, function (props) {
+  return mapTextAlign[props.textAlign];
+});

package/dist/EmptyStates.types.d.ts

@@ -5,10 +5,15 @@ export type EmptyStatesProps = {
     text?: ReactNode;
     button?: ReactNode;
     label?: ReactNode;
+    /**
+     * @deprecated
+     */
     labelPosition?: 'bottom' | 'right';
     mode?: 'absolute';
     customIcon?: ReactElement;
     className?: string;
+    iconPosition?: 'top' | 'left' | 'right';
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
 };
 export declare enum EmptyStatesSize {
     SMALL = "small",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-empty-states",
-  "version": "0.2.62",
+  "version": "0.3.0",
   "description": "EmptyStates UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,13 +34,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^0.66.3",
-    "@synerise/ds-utils": "^0.31.0"
+    "@synerise/ds-icon": "^0.66.4",
+    "@synerise/ds-utils": "^0.31.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "1bb66dcc360a650e81b9bd195d5b77aa8ae2d308"
+  "gitHead": "abbf0e58631e5b86de967e0ce108ae582a441174"
 }