@xfers/design-system 3.0.3 → 3.0.4

package/dist/components/Banner/index.js

@@ -34,14 +34,17 @@ var Tick_1 = require("src/icons/Tick");
 var WarningFilled_1 = require("src/icons/WarningFilled");
 var CrossMini_1 = require("src/icons/CrossMini");
 var InfoFilled_1 = require("src/icons/InfoFilled");
+var theme_1 = require("src/theme/theme");
+var Typography_1 = require("src/constants/Typography/Typography");
 var Banner = function (_a) {
     var _b = _a.withIcon, withIcon = _b === void 0 ? false : _b, children = _a.children, _c = _a.type, type = _c === void 0 ? 'primary' : _c, rest = __rest(_a, ["withIcon", "children", "type"]);
-    var _d = ThemeContext_1.useTheme(), text = _d.text, brand = _d.brand, success = _d.success, warning = _d.warning, error = _d.error, notification = _d.notification, spacing = _d.spacing;
-    var primaryStyle = "\n    color: " + text.default + ";\n    background: " + brand.primary.background + ";\n    ";
-    var successStyle = "\n    color: " + success.text + ";\n    background: " + success.background + ";\n    ";
-    var warningStyle = "\n    color: " + warning.text + ";\n    background: " + warning.background + ";\n    ";
-    var errorStyle = "\n    color: " + error.text + ";\n    background: " + error.background + ";\n    ";
-    var notificationStyle = "\n    color: " + notification.text + "};\n    background: " + notification.background + ";\n    ";
+    var _d = ThemeContext_1.useTheme(), brand = _d.brand, spacing = _d.spacing;
+    var primaryStyle = "\n    color: " + theme_1.straitsXTheme.color.base.primary + ";\n    background: " + brand.primary.background + ";\n    ";
+    var successStyle = "\n    color: " + theme_1.straitsXTheme.color.status.positive + ";\n    background: " + theme_1.straitsXTheme.color.surface.subduePositive + ";\n    ";
+    var warningStyle = "\n    color: " + theme_1.straitsXTheme.color.status.warning + ";\n    background: " + theme_1.straitsXTheme.color.surface.subdueWarning + ";\n    ";
+    var errorStyle = "\n    color: " + theme_1.straitsXTheme.color.status.critical + ";\n    background: " + theme_1.straitsXTheme.color.surface.subdueCritical + ";\n    ";
+    var notificationStyle = "\n    color: " + theme_1.straitsXTheme.color.base.onNeutral + "};\n    background: " + theme_1.straitsXTheme.color.surface.SubdueInfo + ";\n    ";
+    var importantStyle = "\n    color: " + theme_1.straitsXTheme.color.base.onNeutral + "};\n    background: " + theme_1.straitsXTheme.color.surface.SubdueInfo + ";\n  ";
     var getTypeStyle = function () {
         switch (type) {
             case 'primary':
@@ -55,31 +58,42 @@ var Banner = function (_a) {
                 return errorStyle;
             case 'notification':
                 return notificationStyle;
+            case 'important':
+                return importantStyle;
         }
     };
-    var StyledBanner = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-radius: 5px;\n    display: flex;\n    vertical-align: middle;\n    ", "\n  "], ["\n    padding: ", ";\n    border-radius: 5px;\n    display: flex;\n    vertical-align: middle;\n    ", "\n  "])), spacing.sm, getTypeStyle());
+    var StyledBanner = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", ";\n    border-radius: 5px;\n    display: flex;\n    vertical-align: middle;\n    ", "\n\n    ol {\n      padding-left: 20px;\n      margin: 0;\n\n      > li {\n       margin-bottom: 5px;\n      }\n    }\n  "], ["\n    padding: ", ";\n    border-radius: 5px;\n    display: flex;\n    vertical-align: middle;\n    ", "\n\n    ol {\n      padding-left: 20px;\n      margin: 0;\n\n      > li {\n       margin-bottom: 5px;\n      }\n    }\n  "])), spacing.sm, getTypeStyle());
     var svgStyle = emotion_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    margin: auto 6px auto 0;\n  "], ["\n    display: block;\n    margin: auto 6px auto 0;\n  "])));
     var icon = function () {
         if (type === 'primary') {
             return (react_1.default.createElement(InfoFilled_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: brand.primary.emphasis, className: emotion_1.cx(svgStyle) }));
         }
         else if (type === 'success') {
-            return (react_1.default.createElement(Tick_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: success.emphasis, className: emotion_1.cx(svgStyle) }));
+            return (react_1.default.createElement(Tick_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: theme_1.straitsXTheme.color.status.positive, className: emotion_1.cx(svgStyle) }));
         }
         else if (type === 'warning') {
-            return (react_1.default.createElement(WarningFilled_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: warning.emphasis, className: emotion_1.cx(svgStyle) }));
+            return (react_1.default.createElement(WarningFilled_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: theme_1.straitsXTheme.color.status.warning, className: emotion_1.cx(svgStyle) }));
         }
         else if (type === 'error') {
-            return (react_1.default.createElement(CrossMini_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: error.emphasis, className: emotion_1.cx(svgStyle) }));
+            return (react_1.default.createElement(CrossMini_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: theme_1.straitsXTheme.color.status.critical, className: emotion_1.cx(svgStyle) }));
         }
         else if (type === 'notification') {
-            return (react_1.default.createElement(InfoFilled_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: notification.emphasis, className: emotion_1.cx(svgStyle) }));
+            return (react_1.default.createElement(InfoFilled_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: theme_1.straitsXTheme.color.status.info, className: emotion_1.cx(svgStyle) }));
+        }
+        else if (type === 'important') {
+            return (react_1.default.createElement("div", { style: {
+                    display: 'block',
+                    minWidth: '5px',
+                    margin: '0 15px 0 3px',
+                    borderRadius: '10px',
+                    background: theme_1.straitsXTheme.color.status.info
+                } }));
         }
         return react_1.default.createElement(react_1.default.Fragment, null);
     };
     return (react_1.default.createElement(StyledBanner, __assign({}, rest),
         withIcon && icon(),
-        children));
+        react_1.default.createElement(Typography_1.Typography.Body, { size: "md" }, children)));
 };
 exports.default = Banner;
 var templateObject_1, templateObject_2;

package/dist/components/Banner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Banner/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Banner/index.tsx"],"names":[],"mappings":"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"}

package/dist/constants/colors.js

@@ -71,10 +71,10 @@ var SURFACE;
     SURFACE["DISABLED_SURFACE"] = "#F2F4F5";
     SURFACE["DISABLED_ON_SURFACE"] = "#9D9E9F";
     SURFACE["DARK"] = "#051513";
-    SURFACE["SUBDUE_INFO"] = "#E7ECFC";
+    SURFACE["SUBDUE_INFO"] = "#EBF5FF";
     SURFACE["SUBDUE_POSITIVE"] = "#E5F8F3";
-    SURFACE["SUBDUE_WARNING"] = "#FEF3E7";
-    SURFACE["SUBDUE_CRITICAL"] = "#FBEAE9";
+    SURFACE["SUBDUE_WARNING"] = "#FFFBE9";
+    SURFACE["SUBDUE_CRITICAL"] = "#FFF0F0";
 })(SURFACE = exports.SURFACE || (exports.SURFACE = {}));
 var BASE;
 (function (BASE) {
@@ -102,10 +102,10 @@ var INTERACTIVE;
 })(INTERACTIVE = exports.INTERACTIVE || (exports.INTERACTIVE = {}));
 var STATUS;
 (function (STATUS) {
-    STATUS["INFO"] = "#0C45E1";
+    STATUS["INFO"] = "#2F8DEE";
     STATUS["POSITIVE"] = "#00B583";
-    STATUS["WARNING"] = "#F18813";
-    STATUS["CRITICAL"] = "#E22726";
+    STATUS["WARNING"] = "#E5C412";
+    STATUS["CRITICAL"] = "#B71515";
 })(STATUS = exports.STATUS || (exports.STATUS = {}));
 var COMPONENT;
 (function (COMPONENT) {

package/dist/types/components/Banner/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare type BannerProps = {
-    type?: 'primary' | 'success' | 'warning' | 'error' | 'notification';
+    type?: 'primary' | 'success' | 'warning' | 'error' | 'notification' | 'important';
     withIcon?: boolean;
     children: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>;

package/dist/types/constants/colors.d.ts

@@ -57,10 +57,10 @@ export declare enum SURFACE {
     DISABLED_SURFACE = "#F2F4F5",
     DISABLED_ON_SURFACE = "#9D9E9F",
     DARK = "#051513",
-    SUBDUE_INFO = "#E7ECFC",
+    SUBDUE_INFO = "#EBF5FF",
     SUBDUE_POSITIVE = "#E5F8F3",
-    SUBDUE_WARNING = "#FEF3E7",
-    SUBDUE_CRITICAL = "#FBEAE9"
+    SUBDUE_WARNING = "#FFFBE9",
+    SUBDUE_CRITICAL = "#FFF0F0"
 }
 export declare enum BASE {
     PRIMARY = "#00A965",
@@ -85,10 +85,10 @@ export declare enum INTERACTIVE {
     PRESSED_CRITICAL = "#A92920"
 }
 export declare enum STATUS {
-    INFO = "#0C45E1",
+    INFO = "#2F8DEE",
     POSITIVE = "#00B583",
-    WARNING = "#F18813",
-    CRITICAL = "#E22726"
+    WARNING = "#E5C412",
+    CRITICAL = "#B71515"
 }
 export declare enum COMPONENT {
     BUTTON_DISABLED = "#BDBDBD",