@spaced-out/ui-design-system 0.0.14 → 0.0.16-beta.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.16-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.15...v0.0.16-beta.0) (2023-01-18)
+
+
+### Features
+
+* changed to displayName from name ([#49](https://github.com/spaced-out/ui-design-system/issues/49)) ([b91af6e](https://github.com/spaced-out/ui-design-system/commit/b91af6ecea5a93af6a857dab68dfb75e3c8d81b5))
+
+
+### Bug Fixes
+
+* secondary label story fix ([64a33c4](https://github.com/spaced-out/ui-design-system/commit/64a33c48778a725389ce7aacba305619e2a84e39))
+
+### [0.0.15](https://github.com/spaced-out/ui-design-system/compare/v0.0.14...v0.0.15) (2023-01-17)
+
+
+### Bug Fixes
+
+* type prop conflict between button and icon ([#48](https://github.com/spaced-out/ui-design-system/issues/48)) ([726b747](https://github.com/spaced-out/ui-design-system/commit/726b747722751444b7eef76c29bf84f12f77f657))
+
 ### [0.0.14](https://github.com/spaced-out/ui-design-system/compare/v0.0.13...v0.0.14) (2023-01-17)
 
 

package/lib/components/Button/Button.js

@@ -39,6 +39,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onClick,
     className,
     ariaLabel,
+    actionType,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("button", _extends({}, props, ariaLabel ? {
@@ -48,6 +49,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref,
     role: "button",
     disabled: disabled,
+    type: actionType,
     onClick: event => {
       if (disabled) {
         event.preventDefault();
@@ -74,7 +76,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...props
   } = _ref2;
   return /*#__PURE__*/React.createElement(UnstyledButton, _extends({}, props, {
-    type: actionType,
+    actionType: actionType,
     className: (0, _classify.classify)(_ButtonModule.default.button, {
       [_ButtonModule.default.primary]: type === 'primary',
       [_ButtonModule.default.secondary]: type === 'secondary',

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

@@ -31,7 +31,7 @@ export type ButtonActionType = $Values<typeof BUTTON_ACTION_TYPE>;
 export type UnstyledButtonProps = {
   children?: React.Node,
   disabled?: mixed,
-  type?: ButtonActionType,
+  actionType?: ButtonActionType,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string,
   ariaLabel?: string,
@@ -68,7 +68,14 @@ export const UnstyledButton: React$AbstractComponent<
   HTMLButtonElement,
 > = React.forwardRef<UnstyledButtonProps, HTMLButtonElement>(
   (
-    {disabled, onClick, className, ariaLabel, ...props}: UnstyledButtonProps,
+    {
+      disabled,
+      onClick,
+      className,
+      ariaLabel,
+      actionType,
+      ...props
+    }: UnstyledButtonProps,
     ref: React.Ref<'button'>,
   ) => (
     <button
@@ -78,6 +85,7 @@ export const UnstyledButton: React$AbstractComponent<
       ref={ref}
       role="button"
       disabled={disabled}
+      type={actionType}
       onClick={(event) => {
         if (disabled) {
           event.preventDefault();
@@ -110,7 +118,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
     ) => (
       <UnstyledButton
         {...props}
-        type={actionType}
+        actionType={actionType}
         className={classify(
           css.button,
           {

package/lib/components/PageTitle/PageTitle.js

@@ -123,6 +123,7 @@ const TabSlot = _ref => {
   }), children);
 };
 exports.TabSlot = TabSlot;
+TabSlot.displayName = 'TabSlot';
 const RightSlot = _ref2 => {
   let {
     children,
@@ -131,6 +132,7 @@ const RightSlot = _ref2 => {
   return /*#__PURE__*/React.createElement("div", props, children);
 };
 exports.RightSlot = RightSlot;
+RightSlot.displayName = 'RightSlot';
 const PageName = _ref3 => {
   let {
     children,
@@ -141,6 +143,7 @@ const PageName = _ref3 => {
   }), children);
 };
 exports.PageName = PageName;
+PageName.displayName = 'PageName';
 const PageTitle = _ref4 => {
   let {
     classNames,
@@ -152,7 +155,7 @@ const PageTitle = _ref4 => {
     if (childrenArray.length) {
       const nodes = [];
       for (const child of childrenArray) {
-        if (child?.type?.name === comp) {
+        if (child?.type?.displayName === comp) {
           nodes.push(child);
         }
       }

package/lib/components/PageTitle/PageTitle.js.flow

@@ -136,6 +136,8 @@ export const TabSlot = ({
   </div>
 );
 
+TabSlot.displayName = 'TabSlot';
+
 export type RightSlotProps = {
   children?: React.Node,
   ...
@@ -145,6 +147,8 @@ export const RightSlot = ({children, ...props}: RightSlotProps): React.Node => (
   <div {...props}>{children}</div>
 );
 
+RightSlot.displayName = 'RightSlot';
+
 export type PageNameProps = {
   children?: React.Node,
   ...
@@ -155,6 +159,7 @@ export const PageName = ({children, ...props}: PageNameProps): React.Node => (
     {children}
   </div>
 );
+PageName.displayName = 'PageName';
 
 export const PageTitle = ({
   classNames,
@@ -166,7 +171,7 @@ export const PageTitle = ({
     if (childrenArray.length) {
       const nodes: React.Node[] = [];
       for (const child of childrenArray) {
-        if (child?.type?.name === comp) {
+        if (child?.type?.displayName === comp) {
           nodes.push(child);
         }
       }

package/lib/components/Toast/Toast.js

@@ -76,6 +76,7 @@ const ToastTitle = _ref2 => {
   return children;
 };
 exports.ToastTitle = ToastTitle;
+ToastTitle.displayName = 'ToastTitle';
 const ToastBody = _ref3 => {
   let {
     children
@@ -83,6 +84,7 @@ const ToastBody = _ref3 => {
   return children;
 };
 exports.ToastBody = ToastBody;
+ToastBody.displayName = 'ToastBody';
 const ToastFooter = _ref4 => {
   let {
     children,
@@ -99,14 +101,14 @@ const ToastFooter = _ref4 => {
         onClose && onClose();
         onClick && onClick(e);
       };
-      if (child?.type?.name === 'Button' && isLast) {
+      if (child?.type?.displayName === 'Button' && isLast) {
         return /*#__PURE__*/React.cloneElement(child, {
           size: 'small',
           type: 'primary',
           ...child.props,
           onClick: buttonClickHandler
         });
-      } else if (child?.type?.name === 'Button') {
+      } else if (child?.type?.displayName === 'Button') {
         return /*#__PURE__*/React.cloneElement(child, {
           size: 'small',
           type: 'tertiary',
@@ -122,6 +124,7 @@ const ToastFooter = _ref4 => {
   }, footerActions) : null;
 };
 exports.ToastFooter = ToastFooter;
+ToastFooter.displayName = 'ToastFooter';
 const Toast = _ref5 => {
   let {
     classNames,
@@ -140,7 +143,7 @@ const Toast = _ref5 => {
     if (childrenArray.length) {
       const nodes = [];
       for (const child of childrenArray) {
-        if (child?.type?.name === comp) {
+        if (child?.type?.displayName === comp) {
           nodes.push(child);
         }
       }

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

@@ -107,12 +107,16 @@ export type ToastTitleProps = {
 
 export const ToastTitle = ({children}: ToastTitleProps): React.Node => children;
 
+ToastTitle.displayName = 'ToastTitle';
+
 export type ToastBodyProps = {
   children?: React.Node,
 };
 
 export const ToastBody = ({children}: ToastBodyProps): React.Node => children;
 
+ToastBody.displayName = 'ToastBody';
+
 export type ToastFooterProps = {
   children?: React.Node,
   onClose?: () => void,
@@ -133,14 +137,14 @@ export const ToastFooter = ({
         onClick && onClick(e);
       };
 
-      if (child?.type?.name === 'Button' && isLast) {
+      if (child?.type?.displayName === 'Button' && isLast) {
         return React.cloneElement(child, {
           size: 'small',
           type: 'primary',
           ...child.props,
           onClick: buttonClickHandler,
         });
-      } else if (child?.type?.name === 'Button') {
+      } else if (child?.type?.displayName === 'Button') {
         return React.cloneElement(child, {
           size: 'small',
           type: 'tertiary',
@@ -157,6 +161,8 @@ export const ToastFooter = ({
   ) : null;
 };
 
+ToastFooter.displayName = 'ToastFooter';
+
 export const Toast = ({
   classNames,
   children,
@@ -172,7 +178,7 @@ export const Toast = ({
     if (childrenArray.length) {
       const nodes: React.Node[] = [];
       for (const child of childrenArray) {
-        if (child?.type?.name === comp) {
+        if (child?.type?.displayName === comp) {
           nodes.push(child);
         }
       }

package/package.json

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