@spaced-out/ui-design-system 0.1.76 → 0.1.77

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.1.77](https://github.com/spaced-out/ui-design-system/compare/v0.1.76...v0.1.77) (2024-01-23)
+
+
+### Bug Fixes
+
+* icon badge ([#160](https://github.com/spaced-out/ui-design-system/issues/160)) ([787e97a](https://github.com/spaced-out/ui-design-system/commit/787e97a781f56a1c44d4f384cd5a9a727c2239b8))
+
 ### [0.1.76](https://github.com/spaced-out/ui-design-system/compare/v0.1.75...v0.1.76) (2024-01-19)
 
 

package/lib/components/Badge/Badge.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Badge = exports.BADGE_COLOR = void 0;
+exports.IconBadge = exports.Badge = exports.BADGE_COLOR = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Text = require("../Text/Text");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
 var _BadgeModule = _interopRequireDefault(require("./Badge.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); }
@@ -33,6 +34,7 @@ const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     text,
     fill = 'gray'
   } = _ref;
+  const isDark = fill.includes('Dark');
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "Badge",
     style: {
@@ -43,7 +45,41 @@ const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, classNames?.wrapper),
     ref: ref
   }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, {
-    className: classNames?.text
+    className: (0, _classify.default)({
+      [_BadgeModule.default.dark]: isDark,
+      [_BadgeModule.default.light]: !isDark
+    }, classNames?.text)
   }, text));
 });
-exports.Badge = Badge;
+exports.Badge = Badge;
+const IconBadge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    classNames,
+    fill = 'gray',
+    iconName,
+    iconSize = 'small',
+    iconType = 'solid',
+    ariaLabel,
+    onClick
+  } = _ref2;
+  const isDark = fill.includes('Dark');
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "Badge",
+    style: {
+      '--wrapperBgColor': BADGE_COLOR[fill]
+    },
+    className: (0, _classify.default)(_BadgeModule.default.badgeWrapper, _BadgeModule.default.iconContainer, classNames?.wrapper),
+    ref: ref
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: iconName,
+    type: iconType,
+    size: iconSize,
+    ariaLabel: ariaLabel,
+    onClick: onClick,
+    className: (0, _classify.default)({
+      [_BadgeModule.default.dark]: isDark,
+      [_BadgeModule.default.light]: !isDark
+    }, classNames?.icon)
+  }));
+});
+exports.IconBadge = IconBadge;

package/lib/components/Badge/Badge.js.flow

@@ -16,12 +16,14 @@ import {
   colorWarningLightest,
 } from '../../styles/variables/_color';
 import classify from '../../utils/classify';
-import {ButtonTextSmall} from '../Text/Text';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {ButtonTextSmall} from '../Text';
 
 import css from './Badge.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string, text?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, text?: string, icon?: string}>;
 
 export const BADGE_COLOR = Object.freeze({
   gray: colorGrayLightest,
@@ -39,15 +41,80 @@ export const BADGE_COLOR = Object.freeze({
 
 export type BadgeColorType = $Keys<typeof BADGE_COLOR>;
 
-export type BadgeProps = {
+export type BaseBadgeProps = {
   classNames?: ClassNames,
-  text: string,
   fill?: BadgeColorType,
 };
 
+export type BadgeProps = {
+  ...BaseBadgeProps,
+  text: string,
+};
+
+export type IconBadgeProps = {
+  ...BaseBadgeProps,
+  iconName: string,
+  iconType?: IconType,
+  iconSize?: IconSize,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  ariaLabel?: string,
+};
+
 export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
   React.forwardRef<BadgeProps, HTMLDivElement>(
-    ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.Node => (
+    ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.Node => {
+      const isDark = fill.includes('Dark');
+
+      return (
+        <div
+          data-testid="Badge"
+          style={{
+            '--wrapperBgColor': BADGE_COLOR[fill],
+          }}
+          className={classify(
+            css.badgeWrapper,
+            {
+              [css.fixedWidth]: text.length <= 2,
+            },
+            classNames?.wrapper,
+          )}
+          ref={ref}
+        >
+          <ButtonTextSmall
+            className={classify(
+              {
+                [css.dark]: isDark,
+                [css.light]: !isDark,
+              },
+              classNames?.text,
+            )}
+          >
+            {text}
+          </ButtonTextSmall>
+        </div>
+      );
+    },
+  );
+
+export const IconBadge: React$AbstractComponent<
+  IconBadgeProps,
+  HTMLDivElement,
+> = React.forwardRef<IconBadgeProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      fill = 'gray',
+      iconName,
+      iconSize = 'small',
+      iconType = 'solid',
+      ariaLabel,
+      onClick,
+    }: IconBadgeProps,
+    ref,
+  ): React.Node => {
+    const isDark = fill.includes('Dark');
+
+    return (
       <div
         data-testid="Badge"
         style={{
@@ -55,14 +122,26 @@ export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
         }}
         className={classify(
           css.badgeWrapper,
-          {
-            [css.fixedWidth]: text.length <= 2,
-          },
+          css.iconContainer,
           classNames?.wrapper,
         )}
         ref={ref}
       >
-        <ButtonTextSmall className={classNames?.text}>{text}</ButtonTextSmall>
+        <Icon
+          name={iconName}
+          type={iconType}
+          size={iconSize}
+          ariaLabel={ariaLabel}
+          onClick={onClick}
+          className={classify(
+            {
+              [css.dark]: isDark,
+              [css.light]: !isDark,
+            },
+            classNames?.icon,
+          )}
+        />
       </div>
-    ),
-  );
+    );
+  },
+);

package/lib/components/Badge/Badge.module.css

@@ -1,6 +1,6 @@
-@value (size22, size100) from '../../styles/variables/_size.css';
+@value (size12, size22, size100) from '../../styles/variables/_size.css';
 @value (spaceXSmall, spaceNone) from '../../styles/variables/_space.css';
-@value (colorGrayLightest) from '../../styles/variables/_color.css';
+@value (colorGrayLightest, colorTextInversePrimary, colorTextPrimary) from '../../styles/variables/_color.css';
 
 .badgeWrapper {
   --wrapperBgColor: colorGrayLightest;
@@ -13,6 +13,20 @@
   min-width: fit-content;
   width: fit-content;
   background-color: var(--wrapperBgColor);
+  color: colorTextInversePrimary;
+}
+
+.iconContainer {
+  height: initial;
+  padding: calc(size12 / 4);
+}
+
+.dark {
+  color: colorTextInversePrimary;
+}
+
+.light {
+  color: colorTextPrimary;
 }
 
 .fixedWidth {

package/lib/components/Modal/Modal.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Modal = void 0;
+exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Modal = exports.FullScreenModal = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _react2 = require("@floating-ui/react");
@@ -18,9 +18,7 @@ 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); }
 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; }
-
-// $FlowFixMe[untyped-import]
-
+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 DEFAULT_MODAL_ANIMATION = {
   duration: {
     open: parseInt(_motion.motionDurationSlow),
@@ -228,4 +226,19 @@ const Modal = _ref4 => {
     }
   }, children))), portalRootRef.current);
 };
-exports.Modal = Modal;
+
+// FullScreen modal that just calls the Modal component with a wrapper className set which sets the width and height to sizeFluid
+exports.Modal = Modal;
+const FullScreenModal = _ref5 => {
+  let {
+    classNames,
+    ...props
+  } = _ref5;
+  return /*#__PURE__*/React.createElement(Modal, _extends({
+    classNames: {
+      ...classNames,
+      content: (0, _classify.default)(_ModalModule.default.fullscreenModalContainer, classNames?.content)
+    }
+  }, props));
+};
+exports.FullScreenModal = FullScreenModal;

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

@@ -336,3 +336,17 @@ export const Modal = ({
     portalRootRef.current,
   );
 };
+
+// FullScreen modal that just calls the Modal component with a wrapper className set which sets the width and height to sizeFluid
+export const FullScreenModal = ({
+  classNames,
+  ...props
+}: ModalProps): React.Node => (
+  <Modal
+    classNames={{
+      ...classNames,
+      content: classify(css.fullscreenModalContainer, classNames?.content),
+    }}
+    {...props}
+  />
+);

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

@@ -39,6 +39,12 @@
   width: size640;
 }
 
+.fullscreenModalContainer {
+  width: sizeFluid;
+  height: sizeFluid;
+  border-radius: initial;
+}
+
 .modalContainer.open.in .modal {
   opacity: opacity100;
   transform: translate(spaceNegHalfFluid, spaceNegHalfFluid) scale(1);

package/package.json

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