@synerise/ds-alert 0.3.20 → 0.3.21

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.20...@synerise/ds-alert@0.3.21) (2021-09-21)
+
+
+### Bug Fixes
+
+* **alert:** fix styles ([a24c6a3](https://github.com/Synerise/synerise-design/commit/a24c6a353f6209205794b57ca115f5ebd3c605c1))
+* **alert:** fix styles ([ddce48c](https://github.com/Synerise/synerise-design/commit/ddce48c5e36f9beb2078a123364990a2a6b9e741))
+* **alert:** two new components IconAlert and InlineAlert ([7e28f50](https://github.com/Synerise/synerise-design/commit/7e28f50cb5b5d5c35d10b7c196d3cb36b112df15))
+
+
+
+
+
 ## [0.3.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.19...@synerise/ds-alert@0.3.20) (2021-09-09)
 
 **Note:** Version bump only for package @synerise/ds-alert

package/README.md

@@ -82,4 +82,16 @@ import Alert from '@synerise/ds-alert'
 | ---      | ---                                                         | ---                          | ---       | 
 | type     | Type of AlertSemanticColor, options: `notice`, `negative`, `positive`,`informative`,`neutral`,`supply`,`service`,`entity`                | `string`                    | `positive` |
 | color    | type of colors,options: `red`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`blue`                                                  | `string`                    | -          |
-| mode     | type of modes, options: `background`, `background-outline`,`outline`,`shadow`                                                            | `string`                    | -          |
+| mode     | type of modes, options: `background`, `background-outline`,`outline`,`shadow`                                                            | `string`                    | -          |
+
+### Alert.IconAlert
+
+| Property        | Description                                                                                                            | Type                        | Default    | 
+| ----            | ---                                                                                                                    | ---                         | ---        | 
+| type            | Type of Alert styles, options: `success`, `info`, `warning`, `error`                                                   | `string`                    | `warning`  | 
+| message         | Message of Icon Alert                                                                                                  | `React.ReactNode`           | -          | 
+| disabled        | prop to set disabled icon                                                                                              | `boolean`                   | -          |
+| withEmphasis    | prop to show bolder text                                                                                               | `React.ReactNode`           | -          |
+| withLink        | prop to show highlited text                                                                                            | `React.ReactNode`           | -          |
+| iconAlert       | prop to set custom icon                                                                                                | `boolean`                   | -          |
+| hoverButton     | prop to set hover state button                                                                                         | `boolean`                   | -          |

package/dist/IconAlert/IconAlert.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IconAlertProps } from './IconAlert.types';
+declare const IconAlert: React.FC<IconAlertProps>;
+export default IconAlert;

package/dist/IconAlert/IconAlert.js

@@ -0,0 +1,42 @@
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 { Check2M, WarningFillM, InfoM } from '@synerise/ds-icon/dist/icons';
+import * as React from 'react';
+import Icon from '@synerise/ds-icon';
+import * as S from './IconAlert.styles';
+var ICONS = {
+  success: React.createElement(Check2M, null),
+  alert: React.createElement(WarningFillM, null),
+  warning: React.createElement(WarningFillM, null),
+  info: React.createElement(InfoM, null)
+};
+
+var IconAlert = function IconAlert(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'warning' : _ref$type,
+      iconAlert = _ref.iconAlert,
+      message = _ref.message,
+      withLink = _ref.withLink,
+      withEmphasis = _ref.withEmphasis,
+      hoverButton = _ref.hoverButton,
+      disabled = _ref.disabled,
+      rest = _objectWithoutProperties(_ref, ["type", "iconAlert", "message", "withLink", "withEmphasis", "hoverButton", "disabled"]);
+
+  var icon = React.useMemo(function () {
+    return ICONS[type];
+  }, [type]);
+  return React.createElement(S.IconAlertWrapper, _extends({}, rest, {
+    type: type,
+    disabled: disabled,
+    hoverButton: hoverButton,
+    className: "ds-inline-alert"
+  }), iconAlert && React.createElement(Icon, {
+    component: icon
+  }), message && React.createElement(S.Message, null, message, withLink && React.createElement(S.LinkWrapper, null, withLink), withEmphasis && !withLink && React.createElement(S.EmphasisWrapper, null, withEmphasis)));
+};
+
+export default IconAlert;

package/dist/IconAlert/IconAlert.styles.d.ts

@@ -0,0 +1,9 @@
+import { IconAlertType } from './IconAlert.types';
+export declare const Message: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const IconAlertWrapper: import("styled-components").StyledComponent<"span", any, {
+    type: IconAlertType;
+    hoverButton?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;
+export declare const EmphasisWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LinkWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/IconAlert/IconAlert.styles.js

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+var COLORS = {
+  success: 'green-600',
+  warning: 'yellow-600',
+  alert: 'red-600',
+  info: 'grey-600'
+};
+var COLORS_TEXT = {
+  success: 'green-700',
+  warning: 'yellow-700',
+  alert: 'red-700',
+  info: 'grey-700'
+};
+var COLORS_HOVER = {
+  success: 'green-700',
+  warning: 'yellow-700',
+  alert: 'red-700',
+  info: 'grey-700'
+};
+export var Message = styled.span.withConfig({
+  displayName: "IconAlertstyles__Message",
+  componentId: "sc-1ty06sp-0"
+})(["display:flex;font-size:13px;line-height:18px;font-weight:400;color:inherit;margin-left:4px;"]);
+export var IconAlertWrapper = styled.span.withConfig({
+  displayName: "IconAlertstyles__IconAlertWrapper",
+  componentId: "sc-1ty06sp-1"
+})(["display:flex;align-items:center;justify-content:flex-start;flex-direction:row;&:hover{cursor:", ";svg{color:", ";fill:", ";}}&:active{svg{color:", ";fill:", ";}}svg{color:", ";fill:", ";}", ";", "{color:", ";}"], function (props) {
+  return props.hoverButton ? 'pointer' : 'auto';
+}, function (props) {
+  return props.hoverButton ? props.theme.palette[COLORS_HOVER[props.type]] : props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.hoverButton ? props.theme.palette[COLORS_HOVER[props.type]] : props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return props.theme.palette[COLORS[props.type]];
+}, function (props) {
+  return !!props.disabled && css(["pointer-events:none;opacity:0.4;"]);
+}, Message, function (props) {
+  return props.theme.palette[COLORS_TEXT[props.type]];
+});
+export var EmphasisWrapper = styled.span.withConfig({
+  displayName: "IconAlertstyles__EmphasisWrapper",
+  componentId: "sc-1ty06sp-2"
+})(["display:flex;padding-bottom:1px;font-size:13px;line-height:1.39;padding-left:3px;font-weight:500;color:inherit;"]);
+export var LinkWrapper = styled.span.withConfig({
+  displayName: "IconAlertstyles__LinkWrapper",
+  componentId: "sc-1ty06sp-3"
+})(["display:flex;font-size:13px;line-height:1.39;font-weight:400;margin-left:3px;color:inherit;text-decoration:underline;cursor:pointer;"]);

package/dist/IconAlert/IconAlert.types.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare type IconAlertType = 'success' | 'alert' | 'warning' | 'info';
+export declare type IconAlertProps = {
+    type: IconAlertType;
+    message: string | React.ReactNode;
+    withEmphasis?: React.ReactNode;
+    withLink?: React.ReactNode;
+    iconAlert?: boolean;
+    hoverButton?: boolean;
+    disabled?: boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,17 +32,17 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.13.65",
-    "@synerise/ds-icon": "^0.44.11",
-    "@synerise/ds-typography": "^0.11.8",
-    "@synerise/ds-unordered-list": "^0.1.43"
+    "@synerise/ds-button": "^0.13.66",
+    "@synerise/ds-icon": "^0.45.0",
+    "@synerise/ds-typography": "^0.11.9",
+    "@synerise/ds-unordered-list": "^0.1.44"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^0.18.0"
+    "@synerise/ds-utils": "^0.18.1"
   },
-  "gitHead": "caf34e68324b104ff3665d9383e5aabccdb9d522"
+  "gitHead": "a9b2577e3c7e6b51625ab3ecca84600819ad0eeb"
 }