@spaced-out/ui-design-system 0.0.57 → 0.0.58

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.58](https://github.com/spaced-out/ui-design-system/compare/v0.0.57...v0.0.58) (2023-03-25)
+
+
+### Bug Fixes
+
+* custom icon support in toast ([#83](https://github.com/spaced-out/ui-design-system/issues/83)) ([e6deaf8](https://github.com/spaced-out/ui-design-system/commit/e6deaf82ac3fc284beafb61003efc448bcd5c992))
+
 ### [0.0.57](https://github.com/spaced-out/ui-design-system/compare/v0.0.56...v0.0.57) (2023-03-24)
 
 

package/lib/components/Toast/Toast.js

@@ -13,19 +13,21 @@ var _ToastModule = _interopRequireDefault(require("./Toast.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 const TOAST_SEMANTIC = Object.freeze({
   success: 'success',
   information: 'information',
   warning: 'warning',
-  danger: 'danger'
+  danger: 'danger',
+  primary: 'primary'
 });
 exports.TOAST_SEMANTIC = TOAST_SEMANTIC;
 const TOAST_TITLE_COLOR = {
   success: _Text.TEXT_COLORS.success,
   information: _Text.TEXT_COLORS.information,
   warning: _Text.TEXT_COLORS.warning,
-  danger: _Text.TEXT_COLORS.danger
+  danger: _Text.TEXT_COLORS.danger,
+  primary: _Text.TEXT_COLORS.primary
 };
 const ToastIcon = _ref => {
   let {
@@ -71,17 +73,22 @@ const ToastIcon = _ref => {
 };
 const ToastTitle = _ref2 => {
   let {
-    children
+    children,
+    semantic = '',
+    ...props
   } = _ref2;
-  return children;
+  return /*#__PURE__*/React.createElement(_Text.SubTitleSmall, _extends({
+    color: TOAST_TITLE_COLOR[semantic]
+  }, props), children);
 };
 exports.ToastTitle = ToastTitle;
 ToastTitle.displayName = 'ToastTitle';
 const ToastBody = _ref3 => {
   let {
-    children
+    children,
+    ...props
   } = _ref3;
-  return children;
+  return /*#__PURE__*/React.createElement(_Text.BodyMedium, props, children);
 };
 exports.ToastBody = ToastBody;
 ToastBody.displayName = 'ToastBody';
@@ -132,7 +139,8 @@ const Toast = _ref5 => {
     time,
     semantic = TOAST_SEMANTIC.success,
     onClose,
-    initialFocus = -1
+    initialFocus = -1,
+    customIcon
   } = _ref5;
   const {
     floating,
@@ -144,7 +152,9 @@ const Toast = _ref5 => {
       const nodes = [];
       for (const child of childrenArray) {
         if (child?.type?.displayName === comp) {
-          nodes.push(child);
+          nodes.push( /*#__PURE__*/React.cloneElement(child, {
+            semantic
+          }));
         }
       }
       return nodes.length > 1 ? nodes : nodes[0];
@@ -162,7 +172,7 @@ const Toast = _ref5 => {
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToastModule.default.toastContainer, classNames?.wrapper),
     ref: floating
-  }, /*#__PURE__*/React.createElement(ToastIcon, {
+  }, customIcon || /*#__PURE__*/React.createElement(ToastIcon, {
     semantic: semantic
   }), /*#__PURE__*/React.createElement("div", {
     className: _ToastModule.default.toastMidSection
@@ -170,9 +180,9 @@ const Toast = _ref5 => {
     className: _ToastModule.default.contentWrap
   }, /*#__PURE__*/React.createElement("div", {
     className: _ToastModule.default.titleBodyWrap
-  }, /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
-    color: TOAST_TITLE_COLOR[semantic]
-  }, getComp('ToastTitle')), /*#__PURE__*/React.createElement(_Text.BodyMedium, null, getComp('ToastBody'))), time && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, null, time)), footerWithClose), /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
+  }, getComp('ToastTitle'), getComp('ToastBody')), time && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    className: classNames?.time
+  }, time)), footerWithClose), /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
     className: _ToastModule.default.closeIcon,
     onClick: onClose,
     ariaLabel: "Close Button"

package/lib/components/Toast/Toast.js.flow

@@ -8,6 +8,7 @@ import {
   useFloating,
 } from '@floating-ui/react-dom-interactions';
 
+import type {ColorTypes} from '../../types/typography';
 import classify from '../../utils/classify';
 import {CloseIcon, Icon} from '../Icon';
 import {
@@ -20,13 +21,14 @@ import {
 import css from './Toast.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, time?: string}>;
 
 export const TOAST_SEMANTIC = Object.freeze({
   success: 'success',
   information: 'information',
   warning: 'warning',
   danger: 'danger',
+  primary: 'primary',
 });
 
 const TOAST_TITLE_COLOR = {
@@ -34,6 +36,7 @@ const TOAST_TITLE_COLOR = {
   information: TEXT_COLORS.information,
   warning: TEXT_COLORS.warning,
   danger: TEXT_COLORS.danger,
+  primary: TEXT_COLORS.primary,
 };
 
 export type ToastSemanticType = $Values<typeof TOAST_SEMANTIC>;
@@ -45,6 +48,7 @@ export type ToastProps = {
   semantic?: ToastSemanticType,
   onClose?: () => void,
   initialFocus?: number,
+  customIcon?: React.Node,
 };
 
 const ToastIcon = ({semantic}: {semantic: ToastSemanticType}) => {
@@ -103,17 +107,32 @@ const ToastIcon = ({semantic}: {semantic: ToastSemanticType}) => {
 
 export type ToastTitleProps = {
   children?: React.Node,
+  className?: string,
+  semantic?: ToastSemanticType,
+  color?: ColorTypes,
 };
 
-export const ToastTitle = ({children}: ToastTitleProps): React.Node => children;
+export const ToastTitle = ({
+  children,
+  semantic = '',
+  ...props
+}: ToastTitleProps): React.Node => (
+  <SubTitleSmall color={TOAST_TITLE_COLOR[semantic]} {...props}>
+    {children}
+  </SubTitleSmall>
+);
 
 ToastTitle.displayName = 'ToastTitle';
 
 export type ToastBodyProps = {
   children?: React.Node,
+  className?: string,
+  color?: ColorTypes,
 };
 
-export const ToastBody = ({children}: ToastBodyProps): React.Node => children;
+export const ToastBody = ({children, ...props}: ToastBodyProps): React.Node => (
+  <BodyMedium {...props}>{children}</BodyMedium>
+);
 
 ToastBody.displayName = 'ToastBody';
 
@@ -170,6 +189,7 @@ export const Toast = ({
   semantic = TOAST_SEMANTIC.success,
   onClose,
   initialFocus = -1,
+  customIcon,
 }: ToastProps): React.Node => {
   const {floating, context} = useFloating();
 
@@ -179,7 +199,7 @@ export const Toast = ({
       const nodes: React.Node[] = [];
       for (const child of childrenArray) {
         if (child?.type?.displayName === comp) {
-          nodes.push(child);
+          nodes.push(React.cloneElement(child, {semantic}));
         }
       }
       return nodes.length > 1 ? nodes : nodes[0];
@@ -197,16 +217,18 @@ export const Toast = ({
         className={classify(css.toastContainer, classNames?.wrapper)}
         ref={floating}
       >
-        <ToastIcon semantic={semantic} />
+        {customIcon || <ToastIcon semantic={semantic} />}
         <div className={css.toastMidSection}>
           <div className={css.contentWrap}>
             <div className={css.titleBodyWrap}>
-              <SubTitleSmall color={TOAST_TITLE_COLOR[semantic]}>
-                {getComp('ToastTitle')}
-              </SubTitleSmall>
-              <BodyMedium>{getComp('ToastBody')}</BodyMedium>
+              {getComp('ToastTitle')}
+              {getComp('ToastBody')}
             </div>
-            {time && <SubTitleExtraSmall>{time}</SubTitleExtraSmall>}
+            {time && (
+              <SubTitleExtraSmall className={classNames?.time}>
+                {time}
+              </SubTitleExtraSmall>
+            )}
           </div>
           {footerWithClose}
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {