@spaced-out/ui-design-system 0.0.2-beta.2 → 0.0.3-beta.0

package/.storybook/SenseTheme.js

@@ -3,8 +3,7 @@ import {create} from '@storybook/theming';
 export default create({
   base: 'light',
   brandTitle: 'Genesis',
-  brandImage:
-    'https://assets-global.website-files.com/613f2494a7d5cd1817022b81/618cffd78219af09f95a7446_Group%204.svg',
+  brandImage: 'images/Logo.png',
 
   fontBase: '"Centra No 2", "proxima-nova", "Helvetica Neue"',
   textColor: '#17172A',

package/.storybook/manager-head.html

@@ -37,5 +37,30 @@
   body {
     /* This will target all of the children */
     font-family: 'Centra No 2' !important;
+    background: #17172a;
+  }
+
+  .sidebar-container {
+    background: #17172a !important;
+  }
+
+  .sidebar-item {
+    color: #efebfa !important;
+  }
+
+  .search-result-item--label {
+    color: #efebfa !important;
+  }
+
+  .sidebar-item[data-selected='true'] {
+    background: #5c34cd !important;
+  }
+
+  .search-field input {
+    border-color: #efebfa !important;
+  }
+
+  #root > div:first-child {
+    background: #17172a;
   }
 </style>

package/.storybook/preview.js

@@ -62,8 +62,8 @@ export const parameters = {
       method: 'alphabetical',
       order: [
         'Introduction',
-        'Changelog',
         'Design Tokens',
+        'Changelog',
         'Tokens',
         'Components',
         [

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.3-beta.0 (2022-11-21)
+
+
+### Bug Fixes
+
+* documentation fixes and modal semantics ([45770ab](https://github.com/Spaced-Out/ui-design-system/commit/45770ab7e7a04ffa78c962fdef7bfc8971b54b3e))
+
+### 0.0.2 (2022-11-16)
+
+
+### Features
+
+* documentation changes, storybook sidepanel redesign ([eb93ac3](https://github.com/Spaced-Out/ui-design-system/commit/eb93ac3ff1ffce7ab163f382633997a5c9999f6d))
+
 ### 0.0.2-beta.2 (2022-11-16)
 
 

package/README.md

@@ -124,17 +124,6 @@ in `consumer`
   yarn upgrade @spaced-out/ui-design-system@file:../../ui-design-system
 ```
 
-## Publishing
-
-### Hosting via NPM
-
-First, make sure you have an NPM account and are [logged into NPM using the `npm login` command.](https://docs.npmjs.com/creating-a-new-npm-user-account)
-
-```
-yarn prepublishOnly
-yarn publish
-```
-
 ## Usage
 
 Let's say you created a public NPM package called `@spaced-out/ui-design-system` with the `Button` component created in this repository.

package/cspell.json

@@ -6,7 +6,8 @@
     "lib",
     "storybook-static",
     ".vscode",
-    "CHANGELOG.md"
+    "CHANGELOG.md",
+    ".storybook/public"
   ],
   // Enable your dictionary by adding it to the list of `dictionaries`
   "dictionaries": ["custom-words"],

package/lib/components/Button/Button.js

@@ -32,9 +32,12 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled,
     onClick,
     className,
+    ariaLabel,
     ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
+  return /*#__PURE__*/React.createElement("button", _extends({}, props, ariaLabel ? {
+    'aria-label': ariaLabel
+  } : {}, {
     className: className,
     ref: ref,
     role: "button",

package/lib/components/Button/Button.js.flow

@@ -16,6 +16,7 @@ export type UnstyledButtonProps = {
   disabled?: mixed,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string,
+  ariaLabel?: string,
   ...
 };
 
@@ -41,6 +42,7 @@ export type ButtonProps = {
   isFluid?: boolean,
   disabled?: boolean,
   size?: 'medium' | 'small',
+  ariaLabel?: string,
   ...
 };
 
@@ -57,11 +59,12 @@ export const UnstyledButton: React$AbstractComponent<
   HTMLButtonElement,
 > = React.forwardRef<UnstyledButtonProps, HTMLButtonElement>(
   (
-    {disabled, onClick, className, ...props}: UnstyledButtonProps,
+    {disabled, onClick, className, ariaLabel, ...props}: UnstyledButtonProps,
     ref: React.Ref<'button'>,
   ) => (
     <button
       {...props}
+      {...(ariaLabel ? {'aria-label': ariaLabel} : {})}
       className={className}
       ref={ref}
       role="button"

package/lib/components/{CodeBlock.js → CodeBlock/CodeBlock.js}

@@ -16,7 +16,8 @@ const CodeBlock = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement(_reactCodeBlocks.CodeBlock, _extends({
     text: children,
-    showLineNumbers: false
+    showLineNumbers: false,
+    theme: _reactCodeBlocks.dracula
   }, props));
 };
 exports.CodeBlock = CodeBlock;

package/lib/components/{CodeBlock.js.flow → CodeBlock/CodeBlock.js.flow}

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 // $FlowFixMe[untyped-import]
-import {CodeBlock as ReactCodeBlock} from 'react-code-blocks';
+import {CodeBlock as ReactCodeBlock, dracula} from 'react-code-blocks';
 
 
 type CodeBlockProps = {
@@ -14,6 +14,7 @@ export const CodeBlock = ({children, ...props}: CodeBlockProps): React.Node => (
   <ReactCodeBlock
     text={children}
     showLineNumbers={false}
+    theme={dracula}
     {...props}
   ></ReactCodeBlock>
 );

package/lib/components/CodeBlock/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CodeBlock", {
+  enumerable: true,
+  get: function () {
+    return _CodeBlock.CodeBlock;
+  }
+});
+var _CodeBlock = require("./CodeBlock");

package/lib/components/CodeBlock/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export {CodeBlock} from './CodeBlock';

package/lib/components/Icon/ClickableIcon.js

@@ -17,13 +17,16 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const ClickableIcon = _ref => {
   let {
     size = 'medium',
+    className,
+    ariaLabel,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
+    ariaLabel: ariaLabel,
     className: (0, _classify.default)(_ClickableIconModule.default.button, {
       [_ClickableIconModule.default.small]: size === 'small',
       [_ClickableIconModule.default.medium]: size === 'medium'
-    })
+    }, className)
   }), /*#__PURE__*/React.createElement(_.Icon, _extends({
     size: size
   }, props)));
@@ -34,14 +37,13 @@ const CloseIcon = _ref2 => {
     size = 'medium',
     type = 'regular',
     color = _Text.TEXT_COLORS.primary,
-    onClick
+    ...props
   } = _ref2;
-  return /*#__PURE__*/React.createElement(ClickableIcon, {
+  return /*#__PURE__*/React.createElement(ClickableIcon, _extends({
     name: "close",
     size: size,
     type: type,
-    color: color,
-    onClick: onClick
-  });
+    color: color
+  }, props));
 };
 exports.CloseIcon = CloseIcon;

package/lib/components/Icon/ClickableIcon.js.flow

@@ -15,14 +15,21 @@ import css from './ClickableIcon.module.css';
 
 export const ClickableIcon = ({
   size = 'medium',
+  className,
+  ariaLabel,
   ...props
 }: IconProps): React.Node => (
   <UnstyledButton
     {...props}
-    className={classify(css.button, {
-      [css.small]: size === 'small',
-      [css.medium]: size === 'medium',
-    })}
+    ariaLabel={ariaLabel}
+    className={classify(
+      css.button,
+      {
+        [css.small]: size === 'small',
+        [css.medium]: size === 'medium',
+      },
+      className,
+    )}
   >
     <Icon size={size} {...props} />
   </UnstyledButton>
@@ -33,19 +40,21 @@ export type CloseIconProps = {
   type?: IconType,
   color?: ColorTypes,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
+  ariaLabel?: string,
 };
 
 export const CloseIcon = ({
   size = 'medium',
   type = 'regular',
   color = TEXT_COLORS.primary,
-  onClick,
+  ...props
 }: CloseIconProps): React.Node => (
   <ClickableIcon
     name="close"
     size={size}
     type={type}
     color={color}
-    onClick={onClick}
+    {...props}
   />
 );

package/lib/components/Icon/Icon.js.flow

@@ -23,6 +23,7 @@ export type IconProps = {
   color?: ColorTypes,
   className?: string,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  ariaLabel?: string,
 };
 
 export const Icon = ({

package/lib/components/Modal/Modal.js

@@ -3,13 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Modal = void 0;
+exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Modal = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
 var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button/Button.js");
+var _Truncate = require("../Truncate/Truncate.js");
 var _ModalModule = _interopRequireDefault(require("./Modal.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); }
@@ -17,12 +19,50 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // $FlowFixMe[untyped-import]
 
+const ModalHeader = _ref => {
+  let {
+    children,
+    hideCloseBtn,
+    onCloseButtonClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.modalHeader
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.headerContent
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
+    iconLeftName: "xmark",
+    type: "ghost",
+    onClick: onCloseButtonClick,
+    ariaLabel: "Close Button"
+  })));
+};
+exports.ModalHeader = ModalHeader;
+const ModalBody = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.modalBody
+  }, children);
+};
+exports.ModalBody = ModalBody;
+const ModalFooter = _ref3 => {
+  let {
+    children
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.modalFooter
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _ModalModule.default.modalFooterActions
+  }, children)));
+};
+exports.ModalFooter = ModalFooter;
 const createPortalRoot = () => {
   const modalRoot = document.createElement('div');
   modalRoot.setAttribute('id', 'modal-root');
   return modalRoot;
 };
-const Modal = _ref => {
+const Modal = _ref4 => {
   let {
     classNames,
     children,
@@ -32,7 +72,7 @@ const Modal = _ref => {
     removeWhenClosed = true,
     tapOutsideToClose = true,
     initialFocus = -1
-  } = _ref;
+  } = _ref4;
   const {
     floating,
     context

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

@@ -13,6 +13,8 @@ import {
 import useMountTransition from '../../hooks/useMountTransition';
 import {motionDurationNormal} from '../../styles/variables/_motion';
 import classify from '../../utils/classify';
+import {Button} from '../Button/Button.js';
+import {Truncate} from '../Truncate/Truncate.js';
 
 import css from './Modal.module.css';
 
@@ -34,6 +36,58 @@ export type ModalProps = {
   initialFocus?: number,
 };
 
+export type ModalHeaderProps = {
+  children?: React.Node,
+  hideCloseBtn?: boolean,
+  onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export type ModalFooterProps = {
+  children?: React.Node,
+};
+
+export type ModalBodyProps = {
+  children?: React.Node,
+};
+
+export const ModalHeader = ({
+  children,
+  hideCloseBtn,
+  onCloseButtonClick,
+}: ModalHeaderProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={css.modalHeader}>
+        <div className={css.headerContent}>
+          <Truncate>{children}</Truncate>
+        </div>
+        {!hideCloseBtn && (
+          <Button
+            iconLeftName="xmark"
+            type="ghost"
+            onClick={onCloseButtonClick}
+            ariaLabel="Close Button"
+          ></Button>
+        )}
+      </div>
+    )}
+  </>
+);
+
+export const ModalBody = ({children}: ModalBodyProps): React.Node => (
+  <div className={css.modalBody}>{children}</div>
+);
+
+export const ModalFooter = ({children}: ModalFooterProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={css.modalFooter}>
+        <div className={css.modalFooterActions}>{children}</div>
+      </div>
+    )}
+  </>
+);
+
 const createPortalRoot = () => {
   const modalRoot = document.createElement('div');
   modalRoot.setAttribute('id', 'modal-root');

package/lib/components/Modal/Modal.module.css

@@ -1,9 +1,10 @@
-@value (colorBackgroundTertiary, colorBackdropFill) from '../../styles/variables/_color.css';
-@value (spaceNone, spaceXXSmall, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
-@value (sizeFluid) from '../../styles/variables/_size.css';
+@value (colorBackgroundTertiary, colorBackgroundPrimary, colorBackdropFill) from '../../styles/variables/_color.css';
+@value (spaceNone, spaceSmall, spaceMedium, spaceXXSmall, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
+@value (sizeFluid, size60) from '../../styles/variables/_size.css';
 @value (elevationNone, elevationModal, elevationBackdrop) from '../../styles/variables/_elevation.css';
 @value (opacity100, opacity0) from '../../styles/variables/_opacity.css';
 @value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
 
 .modalContainer {
   display: flex;
@@ -24,6 +25,7 @@
   overflow: auto;
   z-index: elevationModal;
   transition: opacity motionDurationNormal, transform motionDurationNormal;
+  border-radius: borderRadiusMedium;
 }
 
 .modalContainer.open.in .modal {
@@ -60,3 +62,40 @@
   backdrop-filter: blur(spaceXXSmall);
   background-color: colorBackdropFill;
 }
+
+.modalHeader {
+  composes: borderBottomPrimary from '../../styles/border.module.css';
+  composes: subTitleLarge from '../../styles/typography.module.css';
+  padding: spaceNone spaceSmall spaceNone spaceMedium;
+  min-height: size60;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: spaceMedium;
+}
+
+.headerContent {
+  display: flex;
+}
+
+.modalBody {
+  padding: spaceMedium;
+  height: sizeFluid;
+  overflow: auto;
+}
+
+.modalFooter {
+  composes: borderTopPrimary from '../../styles/border.module.css';
+  background-color: colorBackgroundPrimary;
+  margin-top: auto;
+  padding: spaceMedium;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: spaceMedium;
+}
+
+.modalFooterActions {
+  display: flex;
+  gap: spaceSmall;
+}

package/lib/components/Notification/Notification.js

@@ -36,7 +36,8 @@ const BaseNotification = props => {
     className: (0, _classify.classify)(_NotificationModule.default.baseContainer, {
       [_NotificationModule.default.success]: semantic === NOTIFICATION_SEMANTIC.success,
       [_NotificationModule.default.information]: semantic === NOTIFICATION_SEMANTIC.information,
-      [_NotificationModule.default.danger]: semantic === NOTIFICATION_SEMANTIC.danger
+      [_NotificationModule.default.danger]: semantic === NOTIFICATION_SEMANTIC.danger,
+      [_NotificationModule.default.dismissable]: dismissable
     }, classNames?.wrapper)
   }, iconLeftName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName,

package/lib/components/Notification/Notification.js.flow

@@ -51,6 +51,7 @@ const BaseNotification = (props: BaseNotificationProps): React.Node => {
           [css.success]: semantic === NOTIFICATION_SEMANTIC.success,
           [css.information]: semantic === NOTIFICATION_SEMANTIC.information,
           [css.danger]: semantic === NOTIFICATION_SEMANTIC.danger,
+          [css.dismissable]: dismissable,
         },
         classNames?.wrapper,
       )}

package/lib/components/Notification/Notification.module.css

@@ -26,11 +26,15 @@
   width: sizeFluid;
   min-height: size34;
   position: relative;
-  padding: spaceXSmall spaceLarge spaceXSmall spaceSmall;
+  padding: spaceXSmall spaceSmall;
   word-break: normal;
   overflow-wrap: anywhere;
 }
 
+.baseContainer.dismissable {
+  padding-right: spaceLarge;
+}
+
 .content {
   display: flex;
 }

package/lib/components/Panel/Panel.js

@@ -29,7 +29,8 @@ const PanelHeader = _ref => {
   }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), !hideCloseBtn && /*#__PURE__*/React.createElement(_Button.Button, {
     iconLeftName: "xmark",
     type: "ghost",
-    onClick: onCloseButtonClick
+    onClick: onCloseButtonClick,
+    ariaLabel: "Close Button"
   })));
 };
 exports.PanelHeader = PanelHeader;

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

@@ -52,6 +52,7 @@ export const PanelHeader = ({
             iconLeftName="xmark"
             type="ghost"
             onClick={onCloseButtonClick}
+            ariaLabel="Close Button"
           ></Button>
         )}
       </div>

package/lib/components/Panel/Panel.module.css

@@ -2,12 +2,14 @@
 @value (size4, size60, size480, size580, size720, sizeFluid) from '../../styles/variables/_size.css';
 @value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
 @value (colorBackgroundTertiary, colorBackgroundPrimary) from '../../styles/variables/_color.css';
+@value (borderRadiusNone) from '../../styles/variables/_border.css';
 
 .panel {
   opacity: initial;
   height: sizeFluid;
   transition: transform motionDurationNormal motionEaseInEaseOut;
   background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusNone;
 }
 
 .panel.small {

package/lib/components/Text/Text.js

@@ -11,169 +11,184 @@ var _typographyModule = _interopRequireDefault(require("../../styles/typography.
 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 JumboMedium = _ref => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.JumboMedium = JumboMedium;
 const TitleMedium = _ref2 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref2;
-  return /*#__PURE__*/React.createElement("h1", {
+  return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.TitleMedium = TitleMedium;
 const SubTitleLarge = _ref3 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement("h2", {
+  return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.SubTitleLarge = SubTitleLarge;
 const SubTitleMedium = _ref4 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref4;
-  return /*#__PURE__*/React.createElement("h3", {
+  return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.SubTitleMedium = SubTitleMedium;
 const SubTitleSmall = _ref5 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref5;
-  return /*#__PURE__*/React.createElement("h4", {
+  return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.SubTitleSmall = SubTitleSmall;
 const SubTitleExtraSmall = _ref6 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref6;
-  return /*#__PURE__*/React.createElement("h5", {
+  return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.SubTitleExtraSmall = SubTitleExtraSmall;
 const ButtonTextMedium = _ref7 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref7;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.ButtonTextMedium = ButtonTextMedium;
 const ButtonTextSmall = _ref8 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref8;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.ButtonTextSmall = ButtonTextSmall;
 const FormInputMedium = _ref9 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref9;
-  return /*#__PURE__*/React.createElement("p", {
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.FormInputMedium = FormInputMedium;
 const FormInputSmall = _ref10 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref10;
-  return /*#__PURE__*/React.createElement("p", {
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.FormInputSmall = FormInputSmall;
 const BodyLarge = _ref11 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref11;
-  return /*#__PURE__*/React.createElement("p", {
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.BodyLarge = BodyLarge;
 const BodyMedium = _ref12 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref12;
-  return /*#__PURE__*/React.createElement("p", {
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.BodyMedium = BodyMedium;
 const BodySmall = _ref13 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref13;
-  return /*#__PURE__*/React.createElement("p", {
+  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.BodySmall = BodySmall;
 const FormLabelMedium = _ref14 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref14;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.FormLabelMedium = FormLabelMedium;
 const FormLabelSmall = _ref15 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
-    className
+    className,
+    ...props
   } = _ref15;
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className)
-  }, children);
+  }), children);
 };
 exports.FormLabelSmall = FormLabelSmall;

package/lib/components/Text/Text.js.flow

@@ -13,14 +13,16 @@ export type TextProps = {
   color?: ColorTypes,
   children?: React.Node,
   className?: string,
+  ...
 };
 
 export const JumboMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <span className={classify(css.jumboMedium, css[color], className)}>
+  <span {...props} className={classify(css.jumboMedium, css[color], className)}>
     {children}
   </span>
 );
@@ -29,8 +31,9 @@ export const TitleMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <h1 className={classify(css.titleMedium, css[color], className)}>
+  <h1 {...props} className={classify(css.titleMedium, css[color], className)}>
     {children}
   </h1>
 );
@@ -39,8 +42,9 @@ export const SubTitleLarge = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <h2 className={classify(css.subTitleLarge, css[color], className)}>
+  <h2 {...props} className={classify(css.subTitleLarge, css[color], className)}>
     {children}
   </h2>
 );
@@ -49,8 +53,12 @@ export const SubTitleMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <h3 className={classify(css.subTitleMedium, css[color], className)}>
+  <h3
+    {...props}
+    className={classify(css.subTitleMedium, css[color], className)}
+  >
     {children}
   </h3>
 );
@@ -59,8 +67,9 @@ export const SubTitleSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <h4 className={classify(css.subTitleSmall, css[color], className)}>
+  <h4 {...props} className={classify(css.subTitleSmall, css[color], className)}>
     {children}
   </h4>
 );
@@ -69,8 +78,12 @@ export const SubTitleExtraSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <h5 className={classify(css.subTitleExtraSmall, css[color], className)}>
+  <h5
+    {...props}
+    className={classify(css.subTitleExtraSmall, css[color], className)}
+  >
     {children}
   </h5>
 );
@@ -79,8 +92,12 @@ export const ButtonTextMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <span className={classify(css.buttonTextMedium, css[color], className)}>
+  <span
+    {...props}
+    className={classify(css.buttonTextMedium, css[color], className)}
+  >
     {children}
   </span>
 );
@@ -89,8 +106,12 @@ export const ButtonTextSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <span className={classify(css.buttonTextSmall, css[color], className)}>
+  <span
+    {...props}
+    className={classify(css.buttonTextSmall, css[color], className)}
+  >
     {children}
   </span>
 );
@@ -99,8 +120,12 @@ export const FormInputMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <p className={classify(css.formInputMedium, css[color], className)}>
+  <p
+    {...props}
+    className={classify(css.formInputMedium, css[color], className)}
+  >
     {children}
   </p>
 );
@@ -109,8 +134,9 @@ export const FormInputSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <p className={classify(css.formInputSmall, css[color], className)}>
+  <p {...props} className={classify(css.formInputSmall, css[color], className)}>
     {children}
   </p>
 );
@@ -119,32 +145,45 @@ export const BodyLarge = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <p className={classify(css.bodyLarge, css[color], className)}>{children}</p>
+  <p {...props} className={classify(css.bodyLarge, css[color], className)}>
+    {children}
+  </p>
 );
 
 export const BodyMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <p className={classify(css.bodyMedium, css[color], className)}>{children}</p>
+  <p {...props} className={classify(css.bodyMedium, css[color], className)}>
+    {children}
+  </p>
 );
 
 export const BodySmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <p className={classify(css.bodySmall, css[color], className)}>{children}</p>
+  <p {...props} className={classify(css.bodySmall, css[color], className)}>
+    {children}
+  </p>
 );
 
 export const FormLabelMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <span className={classify(css.formLabelMedium, css[color], className)}>
+  <span
+    {...props}
+    className={classify(css.formLabelMedium, css[color], className)}
+  >
     {children}
   </span>
 );
@@ -153,8 +192,12 @@ export const FormLabelSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  ...props
 }: TextProps): React.Node => (
-  <span className={classify(css.formLabelSmall, css[color], className)}>
+  <span
+    {...props}
+    className={classify(css.formLabelSmall, css[color], className)}
+  >
     {children}
   </span>
 );

package/lib/components/Toast/Toast.js

@@ -136,9 +136,10 @@ const Toast = _ref5 => {
     context
   } = (0, _reactDomInteractions.useFloating)();
   const getComp = comp => {
-    if (children instanceof Array) {
+    const childrenArray = React.Children.toArray(children);
+    if (childrenArray.length) {
       const nodes = [];
-      for (const child of children) {
+      for (const child of childrenArray) {
         if (child?.type?.name === comp) {
           nodes.push(child);
         }
@@ -169,7 +170,9 @@ const Toast = _ref5 => {
   }, /*#__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, {
-    onClick: onClose
+    className: _ToastModule.default.closeIcon,
+    onClick: onClose,
+    ariaLabel: "Close Button"
   })));
 };
 exports.Toast = Toast;

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

@@ -168,9 +168,10 @@ export const Toast = ({
   const {floating, context} = useFloating();
 
   const getComp = (comp: string) => {
-    if (children instanceof Array) {
+    const childrenArray = React.Children.toArray(children);
+    if (childrenArray.length) {
       const nodes: React.Node[] = [];
-      for (const child of children) {
+      for (const child of childrenArray) {
         if (child?.type?.name === comp) {
           nodes.push(child);
         }
@@ -203,7 +204,11 @@ export const Toast = ({
           </div>
           {footerWithClose}
         </div>
-        <CloseIcon onClick={onClose} />
+        <CloseIcon
+          className={css.closeIcon}
+          onClick={onClose}
+          ariaLabel="Close Button"
+        />
       </div>
     </FloatingFocusManager>
   );

package/lib/components/Toast/Toast.module.css

@@ -50,3 +50,7 @@
   align-items: flex-start;
   gap: spaceSmall;
 }
+
+.closeIcon {
+  margin-left: auto;
+}

package/lib/components/Toggle/Toggle.module.css

@@ -84,8 +84,6 @@
 }
 
 .toggle::before {
-  box-shadow: shadowBoxShadow1X shadowBoxShadow1Y shadowBoxShadow1Blur
-    shadowBoxShadow1Spread shadowBoxShadow1Color;
   position: absolute;
   content: '';
   height: size10;

package/lib/components/Truncate/Truncate.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Truncate = void 0;
+exports.Truncate = exports.BaseTruncate = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _TruncateModule = _interopRequireDefault(require("./Truncate.module.css"));
@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 
-const Truncate = _ref => {
+const BaseTruncate = _ref => {
   let {
     children,
     line = 1
@@ -23,4 +23,30 @@ const Truncate = _ref => {
     }
   }, children);
 };
+exports.BaseTruncate = BaseTruncate;
+const Truncate = _ref2 => {
+  let {
+    children,
+    line = 1
+  } = _ref2;
+  const arrayChildren = React.Children.toArray(children);
+  if (arrayChildren.length) {
+    const child = arrayChildren[0];
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      const {
+        className
+      } = child.props;
+      return /*#__PURE__*/React.cloneElement(child, {
+        className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className),
+        style: {
+          WebkitLineClamp: `${line}`
+        }
+      });
+    }
+    return /*#__PURE__*/React.createElement(BaseTruncate, {
+      line: line
+    }, children);
+  }
+  return null;
+};
 exports.Truncate = Truncate;

package/lib/components/Truncate/Truncate.js.flow

@@ -12,7 +12,10 @@ export type TruncateProps = {
   line?: number,
 };
 
-export const Truncate = ({children, line = 1}: TruncateProps): React.Node => (
+export const BaseTruncate = ({
+  children,
+  line = 1,
+}: TruncateProps): React.Node => (
   <span
     className={classify(css.truncateLineClamp)}
     style={{WebkitLineClamp: `${line}`}}
@@ -20,3 +23,20 @@ export const Truncate = ({children, line = 1}: TruncateProps): React.Node => (
     {children}
   </span>
 );
+
+export const Truncate = ({children, line = 1}: TruncateProps): React.Node => {
+  const arrayChildren = React.Children.toArray(children);
+  if (arrayChildren.length) {
+    const child = arrayChildren[0];
+    if (React.isValidElement(child)) {
+      const {className} = child.props;
+
+      return React.cloneElement(child, {
+        className: classify(css.truncateLineClamp, className),
+        style: {WebkitLineClamp: `${line}`},
+      });
+    }
+    return <BaseTruncate line={line}>{children}</BaseTruncate>;
+  }
+  return null;
+};

package/lib/components/Truncate/Truncate.module.css

@@ -2,5 +2,4 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  font: inherit;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.2-beta.2",
+  "version": "0.0.3-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {