@spaced-out/ui-design-system 0.0.34 → 0.0.35

package/.storybook/manager-head.html

@@ -45,6 +45,7 @@
   }
 
   .sidebar-item {
+    cursor: pointer;
     color: #efebfa !important;
   }
 

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.35](https://github.com/spaced-out/ui-design-system/compare/v0.0.34...v0.0.35) (2023-03-02)
+
+
+### Features
+
+* create component template script enhancements ([93b080c](https://github.com/spaced-out/ui-design-system/commit/93b080c8aa28cc0bd882be8f8572d13c60d7fcb4))
+
+
+### Bug Fixes
+
+* card collapse ([#73](https://github.com/spaced-out/ui-design-system/issues/73)) ([9c03cd8](https://github.com/spaced-out/ui-design-system/commit/9c03cd88bd07b0cd0f5e13de11cd08ef8f8a3d84))
+* handling for internal and external refs in tab anatomy ([#74](https://github.com/spaced-out/ui-design-system/issues/74)) ([bcdce79](https://github.com/spaced-out/ui-design-system/commit/bcdce791da04c0f0ec3e04524e97fc08116c1d41))
+
 ### [0.0.34](https://github.com/spaced-out/ui-design-system/compare/v0.0.33...v0.0.34) (2023-02-28)
 
 

package/design-tokens/size/base-size.json

@@ -51,6 +51,9 @@
     "42": {
       "value": "42px"
     },
+    "58": {
+      "value": "58px"
+    },
     "60": {
       "value": "60px"
     },

package/lib/components/CollapsibleCard/CollapsibleCard.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapsibleCardContent = exports.CollapsibleCardAction = exports.CollapsibleCard = exports.COLLAPSIBLE_CARD_SEMANTIC = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Truncate = require("../Truncate");
+var _CollapsibleCardModule = _interopRequireDefault(require("./CollapsibleCard.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; }
+
+const COLLAPSIBLE_CARD_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger'
+});
+exports.COLLAPSIBLE_CARD_SEMANTIC = COLLAPSIBLE_CARD_SEMANTIC;
+const CollapsibleCardAction = _ref => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_CollapsibleCardModule.default.actionContainer, className)
+  }, children);
+};
+exports.CollapsibleCardAction = CollapsibleCardAction;
+const CollapsibleCardContent = _ref2 => {
+  let {
+    children,
+    className
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_CollapsibleCardModule.default.contentContainer, className)
+  }, children);
+};
+exports.CollapsibleCardContent = CollapsibleCardContent;
+const CollapsibleCard = _ref3 => {
+  let {
+    id,
+    isOpen,
+    onChange,
+    classNames,
+    title,
+    children,
+    semantic = 'neutral',
+    headerIconName,
+    headerIconType = 'solid'
+  } = _ref3;
+  const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(Boolean(isOpen));
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "CollapsibleCard",
+    className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
+    className: (0, _classify.default)(_CollapsibleCardModule.default.header, {
+      [_CollapsibleCardModule.default.isOpen]: collapsibleCardIsOpen
+    }, classNames?.title),
+    onClick: e => {
+      onChange?.(e, !collapsibleCardIsOpen, id);
+      setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _CollapsibleCardModule.default.headerContent
+  }, !!headerIconName && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_CollapsibleCardModule.default.iconContainer, _CollapsibleCardModule.default[semantic])
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: headerIconName,
+    type: headerIconType,
+    size: "small",
+    className: _CollapsibleCardModule.default[semantic]
+  })), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, title)), collapsibleCardIsOpen ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: "chevron-up",
+    color: "secondary",
+    size: "small"
+  }) : /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: "chevron-down",
+    color: "secondary",
+    size: "small"
+  })), collapsibleCardIsOpen && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_CollapsibleCardModule.default.content, classNames?.content)
+  }, children));
+};
+exports.CollapsibleCard = CollapsibleCard;

package/lib/components/CollapsibleCard/CollapsibleCard.js.flow

@@ -0,0 +1,133 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {Truncate} from '../Truncate';
+
+import css from './CollapsibleCard.module.css';
+
+
+export const COLLAPSIBLE_CARD_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+});
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  title?: string,
+  content?: string,
+}>;
+
+export type CollapsibleCardSemanticType = $Values<
+  typeof COLLAPSIBLE_CARD_SEMANTIC,
+>;
+
+export type CollapsibleCardProps = {
+  id?: string,
+  title: React.Node,
+  children: React.Node,
+  classNames?: ClassNames,
+  isOpen?: boolean,
+  headerIconName?: string,
+  headerIconType?: IconType,
+  semantic?: CollapsibleCardSemanticType,
+  onChange?: ?(
+    e: SyntheticEvent<HTMLElement>,
+    isOpen: boolean,
+    id?: string,
+  ) => mixed,
+};
+
+export type CollapsibleCardActionProps = {
+  children: React.Node,
+  className?: string,
+};
+
+export const CollapsibleCardAction = ({
+  children,
+  className,
+}: CollapsibleCardActionProps): React.Node => (
+  <div className={classify(css.actionContainer, className)}>{children}</div>
+);
+
+export type CollapsibleCardContentProps = {
+  children: React.Node,
+  className?: string,
+};
+
+export const CollapsibleCardContent = ({
+  children,
+  className,
+}: CollapsibleCardActionProps): React.Node => (
+  <div className={classify(css.contentContainer, className)}>{children}</div>
+);
+
+export const CollapsibleCard = ({
+  id,
+  isOpen,
+  onChange,
+  classNames,
+  title,
+  children,
+  semantic = 'neutral',
+  headerIconName,
+  headerIconType = 'solid',
+}: CollapsibleCardProps): React.Node => {
+  const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(
+    Boolean(isOpen),
+  );
+
+  return (
+    <div
+      data-testid="CollapsibleCard"
+      className={classify(css.wrapper, classNames?.wrapper)}
+    >
+      <UnstyledButton
+        className={classify(
+          css.header,
+          {
+            [css.isOpen]: collapsibleCardIsOpen,
+          },
+          classNames?.title,
+        )}
+        onClick={(e) => {
+          onChange?.(e, !collapsibleCardIsOpen, id);
+          setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
+        }}
+      >
+        <div className={css.headerContent}>
+          {!!headerIconName && (
+            <div className={classify(css.iconContainer, css[semantic])}>
+              <Icon
+                name={headerIconName}
+                type={headerIconType}
+                size="small"
+                className={css[semantic]}
+              />
+            </div>
+          )}
+
+          <Truncate>{title}</Truncate>
+        </div>
+
+        {collapsibleCardIsOpen ? (
+          <Icon name="chevron-up" color="secondary" size="small" />
+        ) : (
+          <Icon name="chevron-down" color="secondary" size="small" />
+        )}
+      </UnstyledButton>
+      {collapsibleCardIsOpen && (
+        <div className={classify(css.content, classNames?.content)}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};

package/lib/components/CollapsibleCard/CollapsibleCard.module.css

@@ -0,0 +1,139 @@
+@value (colorBorderPrimary,
+colorBackgroundPrimary,
+colorBackgroundTertiary,
+colorNeutralLightest,
+colorNeutral,
+colorInformationLightest,
+colorInformation,
+colorSuccessLightest,
+colorSuccess,
+colorDangerLightest,
+colorDanger,
+colorWarningLightest,
+colorWarning,
+colorFocusPrimary
+) from '../../styles/variables/_color.css';
+@value (sizeFluid, size58, size34) from '../../styles/variables/_size.css';
+@value (spaceSmall, spaceXSmall) from '../../styles/variables/_space.css';
+@value (elevationCard) from '../../styles/variables/_elevation.css';
+@value (borderWidthNone,
+borderWidthPrimary,
+borderRadiusSmall,
+borderRadiusNone,
+borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
+.wrapper {
+  display: flex;
+  flex-flow: column;
+  width: sizeFluid;
+}
+
+.header {
+  composes: subTitleSmall from '../../styles/typography.module.css';
+  composes: borderPrimary from '../../styles/border.module.css';
+  /* composes: motionEaseInEaseOut from '../../styles/animation.module.css'; */
+  min-height: size58;
+  border-radius: borderRadiusSmall;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  width: sizeFluid;
+  justify-content: space-between;
+  gap: spaceSmall;
+  padding: spaceSmall;
+  background-color: colorBackgroundTertiary;
+  z-index: elevationCard;
+}
+
+.header:focus {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.header.isOpen {
+  border-radius: borderRadiusSmall borderRadiusSmall borderRadiusNone
+    borderRadiusNone;
+}
+
+.headerContent {
+  display: flex;
+  gap: spaceXSmall;
+  align-items: center;
+  text-align: left;
+}
+
+.iconContainer {
+  display: flex;
+  min-width: size34;
+  min-height: size34;
+  border-radius: borderRadiusSmall;
+  align-items: center;
+  justify-content: center;
+}
+
+.iconContainer.neutral {
+  background-color: colorNeutralLightest;
+}
+
+.iconContainer .neutral {
+  color: colorNeutral;
+}
+
+.iconContainer.success {
+  background-color: colorSuccessLightest;
+}
+
+.iconContainer .success {
+  color: colorSuccess;
+}
+
+.iconContainer.information {
+  background-color: colorInformationLightest;
+}
+
+.iconContainer .information {
+  color: colorInformation;
+}
+
+.iconContainer.warning {
+  background-color: colorWarningLightest;
+}
+
+.iconContainer .warning {
+  color: colorWarning;
+}
+
+.iconContainer.danger {
+  background-color: colorDangerLightest;
+}
+
+.iconContainer .danger {
+  color: colorDanger;
+}
+
+.content {
+  display: flex;
+  flex-flow: column;
+  background-color: colorBackgroundPrimary;
+  border-left: borderWidthPrimary solid colorBorderPrimary;
+  border-right: borderWidthPrimary solid colorBorderPrimary;
+  border-bottom: borderWidthPrimary solid colorBorderPrimary;
+  border-radius: borderRadiusNone borderRadiusNone borderRadiusSmall
+    borderRadiusSmall;
+}
+
+.contentContainer {
+  display: flex;
+  padding: spaceSmall;
+}
+
+.actionContainer {
+  display: flex;
+  border-top: borderWidthPrimary solid colorBorderPrimary;
+  border-radius: borderRadiusNone borderRadiusNone borderRadiusSmall
+    borderRadiusSmall;
+  background-color: colorBackgroundTertiary;
+  padding: spaceSmall;
+  gap: spaceXSmall;
+}

package/lib/components/CollapsibleCard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _CollapsibleCard = require("./CollapsibleCard");
+Object.keys(_CollapsibleCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CollapsibleCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CollapsibleCard[key];
+    }
+  });
+});

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './CollapsibleCard';

package/lib/components/Dialog/Dialog.js

@@ -36,32 +36,32 @@ const DialogIcon = _ref => {
       });
     case DIALOG_SEMANTIC.success:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "circle-check",
+        name: iconName ? iconName : 'circle-check',
         color: _typography.TEXT_COLORS.success,
         type: "solid"
       });
     case DIALOG_SEMANTIC.information:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "circle-info",
+        name: iconName ? iconName : 'circle-info',
         color: _typography.TEXT_COLORS.information,
         type: "solid"
       });
     case DIALOG_SEMANTIC.warning:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "circle-exclamation",
+        name: iconName ? iconName : 'circle-exclamation',
         color: _typography.TEXT_COLORS.warning,
         type: "solid"
       });
     case DIALOG_SEMANTIC.danger:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "shield-exclamation",
+        name: iconName ? iconName : 'shield-exclamation',
         color: _typography.TEXT_COLORS.danger,
         type: "solid"
       });
     default:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         color: _typography.TEXT_COLORS.neutral,
-        name: "face-smile",
+        name: iconName ? iconName : 'face-smile',
         type: "solid"
       });
   }

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

@@ -37,21 +37,12 @@ export type DialogPropsBase = {
   ...ModalProps,
 };
 
-export type DialogPropsWithFixedIcon = {
+export type DialogProps = {
   ...DialogPropsBase,
   semantic?: DialogSemanticType,
-};
-
-export type DialogPropsWithVariableIcon = {
-  ...DialogPropsBase,
-  semantic?: 'neutral',
   iconName?: string,
 };
 
-export type DialogProps =
-  | DialogPropsWithFixedIcon
-  | DialogPropsWithVariableIcon;
-
 const DialogIcon = ({
   semantic,
   iconName,
@@ -70,18 +61,26 @@ const DialogIcon = ({
     );
   case DIALOG_SEMANTIC.success:
     return (
-      <Icon name="circle-check" color={TEXT_COLORS.success} type="solid" />
+      <Icon
+        name={iconName ? iconName : 'circle-check'}
+        color={TEXT_COLORS.success}
+        type="solid"
+      />
     );
 
   case DIALOG_SEMANTIC.information:
     return (
-      <Icon name="circle-info" color={TEXT_COLORS.information} type="solid" />
+      <Icon
+        name={iconName ? iconName : 'circle-info'}
+        color={TEXT_COLORS.information}
+        type="solid"
+      />
     );
 
   case DIALOG_SEMANTIC.warning:
     return (
       <Icon
-        name="circle-exclamation"
+        name={iconName ? iconName : 'circle-exclamation'}
         color={TEXT_COLORS.warning}
         type="solid"
       />
@@ -90,7 +89,7 @@ const DialogIcon = ({
   case DIALOG_SEMANTIC.danger:
     return (
       <Icon
-        name="shield-exclamation"
+        name={iconName ? iconName : 'shield-exclamation'}
         color={TEXT_COLORS.danger}
         type="solid"
       />
@@ -98,7 +97,11 @@ const DialogIcon = ({
 
   default:
     return (
-      <Icon color={TEXT_COLORS.neutral} name="face-smile" type="solid" />
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name={iconName ? iconName : 'face-smile'}
+        type="solid"
+      />
     );
   }
 };

package/lib/components/InContextAlert/InContextAlert.js

@@ -38,28 +38,28 @@ const AlertIcon = _ref => {
       });
     case ALERT_SEMANTIC.success:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "circle-check",
+        name: leftIconName ? leftIconName : 'circle-check',
         size: "small",
         color: _typography.TEXT_COLORS.success,
         type: "regular"
       });
     case ALERT_SEMANTIC.information:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "circle-info",
+        name: leftIconName ? leftIconName : 'circle-info',
         size: "small",
         color: _typography.TEXT_COLORS.information,
         type: "regular"
       });
     case ALERT_SEMANTIC.warning:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "circle-exclamation",
+        name: leftIconName ? leftIconName : 'circle-exclamation',
         size: "small",
         color: _typography.TEXT_COLORS.warning,
         type: "regular"
       });
     case ALERT_SEMANTIC.danger:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
-        name: "shield-exclamation",
+        name: leftIconName ? leftIconName : 'shield-exclamation',
         size: "small",
         color: _typography.TEXT_COLORS.danger,
         type: "regular"
@@ -67,7 +67,7 @@ const AlertIcon = _ref => {
     default:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         color: _typography.TEXT_COLORS.neutral,
-        name: "face-smile",
+        name: leftIconName ? leftIconName : 'face-smile',
         size: "small",
         type: "regular"
       });

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -36,21 +36,12 @@ type InContextAlertBaseProps = {
   onAction?: ?(SyntheticEvent<HTMLElement>) => mixed,
 };
 
-type InContextAlertPropsFixedIcon = {
+export type InContextAlertProps = {
   ...InContextAlertBaseProps,
   semantic: AlertSemanticType,
-};
-
-type InContextAlertPropsNeutral = {
-  ...InContextAlertBaseProps,
-  semantic?: 'neutral',
   leftIconName?: string,
 };
 
-export type InContextAlertProps =
-  | InContextAlertPropsFixedIcon
-  | InContextAlertPropsNeutral;
-
 const AlertIcon = ({
   semantic,
   leftIconName,
@@ -71,7 +62,7 @@ const AlertIcon = ({
   case ALERT_SEMANTIC.success:
     return (
       <Icon
-        name="circle-check"
+        name={leftIconName ? leftIconName : 'circle-check'}
         size="small"
         color={TEXT_COLORS.success}
         type="regular"
@@ -81,7 +72,7 @@ const AlertIcon = ({
   case ALERT_SEMANTIC.information:
     return (
       <Icon
-        name="circle-info"
+        name={leftIconName ? leftIconName : 'circle-info'}
         size="small"
         color={TEXT_COLORS.information}
         type="regular"
@@ -91,7 +82,7 @@ const AlertIcon = ({
   case ALERT_SEMANTIC.warning:
     return (
       <Icon
-        name="circle-exclamation"
+        name={leftIconName ? leftIconName : 'circle-exclamation'}
         size="small"
         color={TEXT_COLORS.warning}
         type="regular"
@@ -101,7 +92,7 @@ const AlertIcon = ({
   case ALERT_SEMANTIC.danger:
     return (
       <Icon
-        name="shield-exclamation"
+        name={leftIconName ? leftIconName : 'shield-exclamation'}
         size="small"
         color={TEXT_COLORS.danger}
         type="regular"
@@ -112,7 +103,7 @@ const AlertIcon = ({
     return (
       <Icon
         color={TEXT_COLORS.neutral}
-        name="face-smile"
+        name={leftIconName ? leftIconName : 'face-smile'}
         size="small"
         type="regular"
       />

package/lib/components/Tabs/Tab/Tab.js

@@ -22,7 +22,7 @@ const TAB_SIZE = Object.freeze({
 exports.TAB_SIZE = TAB_SIZE;
 const tabSizeOptions = [...Object.keys(TAB_SIZE)];
 exports.tabSizeOptions = tabSizeOptions;
-const Tab = _ref => {
+const Tab = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     classNames,
     onSelect,
@@ -37,7 +37,8 @@ const Tab = _ref => {
     width,
     ...props
   } = _ref;
-  const ref = React.useRef(null);
+  const tabRef = React.useRef(null);
+  React.useImperativeHandle(forwardRef, () => tabRef.current);
   const selected = tabId && tabId === selectedTab?.tabId;
   const onClickHandler = e => {
     if (!disabled) {
@@ -47,7 +48,7 @@ const Tab = _ref => {
         label
       });
       onClick && onClick(e);
-      ref.current?.blur();
+      tabRef.current?.blur();
     }
   };
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
@@ -63,7 +64,7 @@ const Tab = _ref => {
       width
     },
     tabIndex: disabled ? '-1' : 0,
-    ref: ref
+    ref: tabRef
   }), /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.classify)(_TabModule.default.iconTextWrap, {
       [_TabModule.default.selected]: selected === true,
@@ -88,6 +89,6 @@ const Tab = _ref => {
       [_TabModule.default.disabled]: disabled === true
     })
   }, label))));
-};
+});
 exports.Tab = Tab;
 Tab.displayName = 'Tab';

package/lib/components/Tabs/Tab/Tab.js.flow

@@ -37,97 +37,104 @@ export type TabProps = {
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
 };
 
-export const Tab = ({
-  classNames,
-  onSelect,
-  size = 'medium',
-  selectedTab,
-  disabled = false,
-  tabId,
-  label,
-  iconName,
-  iconType,
-  onClick,
-  width,
-  ...props
-}: TabProps): React.Node => {
-  const ref = React.useRef(null);
-  const selected = tabId && tabId === selectedTab?.tabId;
-  const onClickHandler = (e) => {
-    if (!disabled) {
-      e.preventDefault();
-      onSelect && onSelect({tabId, label});
-      onClick && onClick(e);
-      ref.current?.blur();
-    }
-  };
-  return (
-    <UnstyledButton
-      {...props}
-      disabled={disabled}
-      className={classify(
-        css.button,
-        {
-          [css.selected]: selected === true,
-          [css.disabled]: disabled === true,
-          [css.mediumSize]: size === 'medium',
-          [css.smallSize]: size === 'small',
-        },
-        classNames?.wrapper,
-      )}
-      onClick={onClickHandler}
-      style={{width}}
-      tabIndex={disabled ? '-1' : 0}
-      ref={ref}
-    >
-      <span
-        className={classify(
-          css.iconTextWrap,
-          {
-            [css.selected]: selected === true,
-            [css.disabled]: disabled === true,
-          },
-          classNames?.iconTextWrap,
-        )}
-      >
-        {iconName ? (
-          <Icon
-            name={iconName}
-            type={iconType}
-            size={size}
-            className={classify(css.icon, {
+export const Tab: React$AbstractComponent<TabProps, HTMLButtonElement> =
+  React.forwardRef<TabProps, HTMLButtonElement>(
+    (
+      {
+        classNames,
+        onSelect,
+        size = 'medium',
+        selectedTab,
+        disabled = false,
+        tabId,
+        label,
+        iconName,
+        iconType,
+        onClick,
+        width,
+        ...props
+      }: TabProps,
+      forwardRef,
+    ) => {
+      const tabRef = React.useRef(null);
+      React.useImperativeHandle(forwardRef, () => tabRef.current);
+      const selected = tabId && tabId === selectedTab?.tabId;
+      const onClickHandler = (e) => {
+        if (!disabled) {
+          e.preventDefault();
+          onSelect && onSelect({tabId, label});
+          onClick && onClick(e);
+          tabRef.current?.blur();
+        }
+      };
+      return (
+        <UnstyledButton
+          {...props}
+          disabled={disabled}
+          className={classify(
+            css.button,
+            {
+              [css.selected]: selected === true,
               [css.disabled]: disabled === true,
-            })}
-          />
-        ) : null}
-
-        {label && (
-          <>
-            {size === TAB_SIZE.medium ? (
-              <ButtonTextMedium
-                color={TEXT_COLORS.secondary}
-                className={classify(css.tabContainer, {
-                  [css.disabled]: disabled === true,
-                })}
-              >
-                {label}
-              </ButtonTextMedium>
-            ) : (
-              <ButtonTextSmall
-                color={TEXT_COLORS.secondary}
-                className={classify(css.tabContainer, {
-                  [css.selected]: selected === true,
+              [css.mediumSize]: size === 'medium',
+              [css.smallSize]: size === 'small',
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onClickHandler}
+          style={{width}}
+          tabIndex={disabled ? '-1' : 0}
+          ref={tabRef}
+        >
+          <span
+            className={classify(
+              css.iconTextWrap,
+              {
+                [css.selected]: selected === true,
+                [css.disabled]: disabled === true,
+              },
+              classNames?.iconTextWrap,
+            )}
+          >
+            {iconName ? (
+              <Icon
+                name={iconName}
+                type={iconType}
+                size={size}
+                className={classify(css.icon, {
                   [css.disabled]: disabled === true,
                 })}
-              >
-                {label}
-              </ButtonTextSmall>
+              />
+            ) : null}
+
+            {label && (
+              <>
+                {size === TAB_SIZE.medium ? (
+                  <ButtonTextMedium
+                    color={TEXT_COLORS.secondary}
+                    className={classify(css.tabContainer, {
+                      [css.disabled]: disabled === true,
+                    })}
+                  >
+                    {label}
+                  </ButtonTextMedium>
+                ) : (
+                  <ButtonTextSmall
+                    color={TEXT_COLORS.secondary}
+                    className={classify(css.tabContainer, {
+                      [css.selected]: selected === true,
+                      [css.disabled]: disabled === true,
+                    })}
+                  >
+                    {label}
+                  </ButtonTextSmall>
+                )}
+              </>
             )}
-          </>
-        )}
-      </span>
-    </UnstyledButton>
+          </span>
+        </UnstyledButton>
+      );
+    },
   );
-};
 
 Tab.displayName = 'Tab';

package/lib/styles/variables/_size.css

@@ -32,6 +32,8 @@
 
 @value size42: 42px;
 
+@value size58: 58px;
+
 @value size60: 60px;
 
 @value size100: 100px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -39,6 +39,8 @@ const size40 = '40px';
 exports.size40 = size40;
 const size42 = '42px';
 exports.size42 = size42;
+const size58 = '58px';
+exports.size58 = size58;
 const size60 = '60px';
 exports.size60 = size60;
 const size100 = '100px';

package/lib/styles/variables/_size.js.flow

@@ -34,6 +34,8 @@ export const size40 = '40px';
 
 export const size42 = '42px';
 
+export const size58 = '58px';
+
 export const size60 = '60px';
 
 export const size100 = '100px';

package/package.json

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