@spaced-out/ui-design-system 0.0.47 → 0.0.49

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.49](https://github.com/spaced-out/ui-design-system/compare/v0.0.48...v0.0.49) (2023-03-13)
+
+
+### Bug Fixes
+
+* word wrap fix for ICA ([8caf035](https://github.com/spaced-out/ui-design-system/commit/8caf035eeb343dc9933223b16ff77005b776a0fc))
+
+### [0.0.48](https://github.com/spaced-out/ui-design-system/compare/v0.0.47...v0.0.48) (2023-03-13)
+
+
+### Bug Fixes
+
+* exposed classnames for dialog modal and panel semantic components ([551c7c1](https://github.com/spaced-out/ui-design-system/commit/551c7c1451d70073de5ca8f6a5935e68cd3fefe6))
+
 ### [0.0.47](https://github.com/spaced-out/ui-design-system/compare/v0.0.46...v0.0.47) (2023-03-13)
 
 

package/lib/components/Dialog/Dialog.js

@@ -68,10 +68,11 @@ const DialogIcon = _ref => {
 };
 const DialogHeader = _ref2 => {
   let {
-    children
+    children,
+    className
   } = _ref2;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _DialogModule.default.dialogHeader
+    className: (0, _classify.default)(_DialogModule.default.dialogHeader, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _DialogModule.default.headerContent
   }, children)));
@@ -79,19 +80,21 @@ const DialogHeader = _ref2 => {
 exports.DialogHeader = DialogHeader;
 const DialogBody = _ref3 => {
   let {
-    children
+    children,
+    className
   } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
-    className: _DialogModule.default.dialogBody
+    className: (0, _classify.default)(_DialogModule.default.dialogBody, className)
   }, children);
 };
 exports.DialogBody = DialogBody;
 const DialogFooter = _ref4 => {
   let {
-    children
+    children,
+    className
   } = _ref4;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _DialogModule.default.dialogFooter
+    className: (0, _classify.default)(_DialogModule.default.dialogFooter, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _DialogModule.default.dialogFooterActions
   }, children)));

package/lib/components/Dialog/Dialog.js.flow

@@ -23,14 +23,17 @@ export type DialogSemanticType = $Values<typeof DIALOG_SEMANTIC>;
 
 export type DialogHeaderProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type DialogFooterProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type DialogBodyProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type DialogPropsBase = {
@@ -106,24 +109,33 @@ const DialogIcon = ({
   }
 };
 
-export const DialogHeader = ({children}: DialogHeaderProps): React.Node => (
+export const DialogHeader = ({
+  children,
+  className,
+}: DialogHeaderProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.dialogHeader}>
+      <div className={classify(css.dialogHeader, className)}>
         <div className={css.headerContent}>{children}</div>
       </div>
     )}
   </>
 );
 
-export const DialogBody = ({children}: DialogBodyProps): React.Node => (
-  <div className={css.dialogBody}>{children}</div>
+export const DialogBody = ({
+  children,
+  className,
+}: DialogBodyProps): React.Node => (
+  <div className={classify(css.dialogBody, className)}>{children}</div>
 );
 
-export const DialogFooter = ({children}: DialogFooterProps): React.Node => (
+export const DialogFooter = ({
+  children,
+  className,
+}: DialogFooterProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.dialogFooter}>
+      <div className={classify(css.dialogFooter, className)}>
         <div className={css.dialogFooterActions}>{children}</div>
       </div>
     )}

package/lib/components/InContextAlert/InContextAlert.module.css

@@ -79,4 +79,5 @@
 .actionText {
   cursor: pointer;
   text-decoration: underline;
+  white-space: nowrap;
 }

package/lib/components/Modal/Modal.js

@@ -23,10 +23,11 @@ const ModalHeader = _ref => {
   let {
     children,
     hideCloseBtn,
-    onCloseButtonClick
+    onCloseButtonClick,
+    className
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _ModalModule.default.modalHeader
+    className: (0, _classify.default)(_ModalModule.default.modalHeader, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _ModalModule.default.headerContent
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
@@ -39,19 +40,21 @@ const ModalHeader = _ref => {
 exports.ModalHeader = ModalHeader;
 const ModalBody = _ref2 => {
   let {
-    children
+    children,
+    className
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
-    className: _ModalModule.default.modalBody
+    className: (0, _classify.default)(_ModalModule.default.modalBody, className)
   }, children);
 };
 exports.ModalBody = ModalBody;
 const ModalFooter = _ref3 => {
   let {
-    children
+    children,
+    className
   } = _ref3;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _ModalModule.default.modalFooter
+    className: (0, _classify.default)(_ModalModule.default.modalFooter, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _ModalModule.default.modalFooterActions
   }, children)));

package/lib/components/Modal/Modal.js.flow

@@ -40,24 +40,28 @@ export type ModalHeaderProps = {
   children?: React.Node,
   hideCloseBtn?: boolean,
   onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
 };
 
 export type ModalFooterProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type ModalBodyProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export const ModalHeader = ({
   children,
   hideCloseBtn,
   onCloseButtonClick,
+  className,
 }: ModalHeaderProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.modalHeader}>
+      <div className={classify(css.modalHeader, className)}>
         <div className={css.headerContent}>
           <Truncate>{children}</Truncate>
         </div>
@@ -74,14 +78,20 @@ export const ModalHeader = ({
   </>
 );
 
-export const ModalBody = ({children}: ModalBodyProps): React.Node => (
-  <div className={css.modalBody}>{children}</div>
+export const ModalBody = ({
+  children,
+  className,
+}: ModalBodyProps): React.Node => (
+  <div className={classify(css.modalBody, className)}>{children}</div>
 );
 
-export const ModalFooter = ({children}: ModalFooterProps): React.Node => (
+export const ModalFooter = ({
+  children,
+  className,
+}: ModalFooterProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.modalFooter}>
+      <div className={classify(css.modalFooter, className)}>
         <div className={css.modalFooterActions}>{children}</div>
       </div>
     )}

package/lib/components/Panel/Panel.js

@@ -20,10 +20,11 @@ const PanelHeader = _ref => {
   let {
     children,
     hideCloseBtn,
-    onCloseButtonClick
+    onCloseButtonClick,
+    className
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _PanelModule.default.panelHeader
+    className: (0, _classify.default)(_PanelModule.default.panelHeader, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _PanelModule.default.headerContent
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
@@ -36,19 +37,21 @@ const PanelHeader = _ref => {
 exports.PanelHeader = PanelHeader;
 const PanelBody = _ref2 => {
   let {
-    children
+    children,
+    className
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
-    className: _PanelModule.default.panelBody
+    className: (0, _classify.default)(_PanelModule.default.panelBody, className)
   }, children);
 };
 exports.PanelBody = PanelBody;
 const PanelFooter = _ref3 => {
   let {
-    children
+    children,
+    className
   } = _ref3;
   return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
-    className: _PanelModule.default.panelFooter
+    className: (0, _classify.default)(_PanelModule.default.panelFooter, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: _PanelModule.default.panelFooterActions
   }, children)));

package/lib/components/Panel/Panel.js.flow

@@ -20,14 +20,17 @@ export type PanelHeaderProps = {
   children?: React.Node,
   hideCloseBtn?: boolean,
   onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
 };
 
 export type PanelFooterProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type PanelBodyProps = {
   children?: React.Node,
+  className?: string,
 };
 
 export type PanelProps = {
@@ -40,10 +43,11 @@ export const PanelHeader = ({
   children,
   hideCloseBtn,
   onCloseButtonClick,
+  className,
 }: PanelHeaderProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.panelHeader}>
+      <div className={classify(css.panelHeader, className)}>
         <div className={css.headerContent}>
           <Truncate>{children}</Truncate>
         </div>
@@ -60,14 +64,20 @@ export const PanelHeader = ({
   </>
 );
 
-export const PanelBody = ({children}: PanelBodyProps): React.Node => (
-  <div className={css.panelBody}>{children}</div>
+export const PanelBody = ({
+  children,
+  className,
+}: PanelBodyProps): React.Node => (
+  <div className={classify(css.panelBody, className)}>{children}</div>
 );
 
-export const PanelFooter = ({children}: PanelFooterProps): React.Node => (
+export const PanelFooter = ({
+  children,
+  className,
+}: PanelFooterProps): React.Node => (
   <>
     {React.Children.count(children) > 0 && (
-      <div className={css.panelFooter}>
+      <div className={classify(css.panelFooter, className)}>
         <div className={css.panelFooterActions}>{children}</div>
       </div>
     )}

package/package.json

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