@spaced-out/ui-design-system 0.1.103 → 0.1.105

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.1.105](https://github.com/spaced-out/ui-design-system/compare/v0.1.104...v0.1.105) (2024-07-08)
+
+
+### Bug Fixes
+
+* 🔘 added optional props for KPI Shimmer ([#235](https://github.com/spaced-out/ui-design-system/issues/235)) ([5cbdba8](https://github.com/spaced-out/ui-design-system/commit/5cbdba80a2e80985c8f68360b293d1a1e73159d4))
+
+### [0.1.104](https://github.com/spaced-out/ui-design-system/compare/v0.1.103...v0.1.104) (2024-07-04)
+
+
+### Bug Fixes
+
+* 🪛 text wrap fix for text based shimmer ([#234](https://github.com/spaced-out/ui-design-system/issues/234)) ([50d4e6c](https://github.com/spaced-out/ui-design-system/commit/50d4e6c424b0675d1e761553cd8f2f652dd0f48e))
+
 ### [0.1.103](https://github.com/spaced-out/ui-design-system/compare/v0.1.102...v0.1.103) (2024-07-03)
 
 

package/lib/components/Shimmer/Shimmer.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Shimmer = exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = exports.SHIMMER_TYPES = exports.KPIShimmer = void 0;
+exports.ShimmerWrapper = exports.Shimmer = exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = exports.SHIMMER_TYPES = exports.KPIShimmer = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _border = require("../../styles/variables/_border");
 var _size = require("../../styles/variables/_size");
@@ -28,7 +28,23 @@ const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = Object.freeze({
   rectangular: _border.borderRadiusNone
 });
 exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = SHIMMER_TYPE_TO_BORDER_RADIUS_MAP;
-const Shimmer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+/**
+ * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
+ * This solves a very annoying problem with out text components where the display prop is set to flex.
+ * Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
+ * where text wraps across multiple lines, we need to wrap the shimmer in a span element.
+ * to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
+ * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
+ * @param {React.Node} children - The children to be rendered
+ */
+const ShimmerWrapper = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", null, children);
+};
+exports.ShimmerWrapper = ShimmerWrapper;
+const Shimmer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     classNames,
     show = true,
@@ -37,7 +53,7 @@ const Shimmer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     width = _size.size40,
     height = _size.sizeFluid,
     borderRadius
-  } = _ref;
+  } = _ref2;
   if (!show) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
@@ -54,13 +70,18 @@ const Shimmer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 exports.Shimmer = Shimmer;
-const KPIShimmer = _ref2 => {
+const KPIShimmer = _ref3 => {
   let {
-    textWidth = 150
-  } = _ref2;
+    textWidth = 150,
+    hasBottomContent = true,
+    hasIcon = true,
+    hasTopContent = true,
+    hasMiddleContent = true,
+    classNames
+  } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
-    className: _ShimmerModule.default.kpiBox
-  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ShimmerModule.default.kpiBox, classNames?.wrapper)
+  }, hasIcon && /*#__PURE__*/React.createElement("div", {
     className: _ShimmerModule.default.section
   }, /*#__PURE__*/React.createElement(Shimmer, {
     type: "rounded",
@@ -68,15 +89,15 @@ const KPIShimmer = _ref2 => {
     height: 60
   })), /*#__PURE__*/React.createElement("div", {
     className: _ShimmerModule.default.section
-  }, /*#__PURE__*/React.createElement(Shimmer, {
+  }, hasTopContent && /*#__PURE__*/React.createElement(Shimmer, {
     type: "text",
     width: textWidth,
     height: 15
-  }), /*#__PURE__*/React.createElement(Shimmer, {
+  }), hasMiddleContent && /*#__PURE__*/React.createElement(Shimmer, {
     type: "text",
     width: textWidth,
     height: 25
-  }), /*#__PURE__*/React.createElement(Shimmer, {
+  }), hasBottomContent && /*#__PURE__*/React.createElement(Shimmer, {
     type: "text",
     width: textWidth,
     height: 15

package/lib/components/Shimmer/Shimmer.js.flow

@@ -43,6 +43,23 @@ export type ShimmerProps = {
   children?: React.Node,
 };
 
+export type ShimmerWrapperProps = {
+  children?: React.Node,
+};
+
+/**
+ * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
+ * This solves a very annoying problem with out text components where the display prop is set to flex.
+ * Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
+ * where text wraps across multiple lines, we need to wrap the shimmer in a span element.
+ * to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
+ * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
+ * @param {React.Node} children - The children to be rendered
+ */
+export const ShimmerWrapper = ({
+  children,
+}: ShimmerWrapperProps): React$Element<'span'> => <span>{children}</span>;
+
 export const Shimmer: React$AbstractComponent<ShimmerProps, HTMLSpanElement> =
   React.forwardRef<ShimmerProps, HTMLSpanElement>(
     (
@@ -79,19 +96,42 @@ export const Shimmer: React$AbstractComponent<ShimmerProps, HTMLSpanElement> =
     },
   );
 
+type KPIShimmerClassNames = $ReadOnly<{wrapper?: string}>;
+
 export type KPIShimmerProps = {
   textWidth?: number | string,
+  hasTopContent?: boolean,
+  hasMiddleContent?: boolean,
+  hasBottomContent?: boolean,
+  hasIcon?: boolean,
+  classNames?: KPIShimmerClassNames,
 };
 
-export const KPIShimmer = ({textWidth = 150}: KPIShimmerProps): React.Node => (
-  <div className={css.kpiBox}>
-    <div className={css.section}>
-      <Shimmer type="rounded" width={60} height={60}></Shimmer>
-    </div>
+export const KPIShimmer = ({
+  textWidth = 150,
+  hasBottomContent = true,
+  hasIcon = true,
+  hasTopContent = true,
+  hasMiddleContent = true,
+  classNames,
+}: KPIShimmerProps): React.Node => (
+  <div className={classify(css.kpiBox, classNames?.wrapper)}>
+    {hasIcon && (
+      <div className={css.section}>
+        <Shimmer type="rounded" width={60} height={60}></Shimmer>
+      </div>
+    )}
+
     <div className={css.section}>
-      <Shimmer type="text" width={textWidth} height={15}></Shimmer>
-      <Shimmer type="text" width={textWidth} height={25}></Shimmer>
-      <Shimmer type="text" width={textWidth} height={15}></Shimmer>
+      {hasTopContent && (
+        <Shimmer type="text" width={textWidth} height={15}></Shimmer>
+      )}
+      {hasMiddleContent && (
+        <Shimmer type="text" width={textWidth} height={25}></Shimmer>
+      )}
+      {hasBottomContent && (
+        <Shimmer type="text" width={textWidth} height={15}></Shimmer>
+      )}
     </div>
   </div>
 );

package/lib/components/Shimmer/Shimmer.module.css

@@ -1,5 +1,5 @@
 @value (colorFillPrimary, colorNeutralLightest, colorNeutralLight, colorBackgroundTertiary) from '../../styles/variables/_color.css';
-@value (spaceXSmall, spaceNone, spaceLarge, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';
+@value (spaceXSmall,spaceXXSmall, spaceNone, spaceLarge, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';
 @value (sizeFluid, size40, size252) from '../../styles/variables/_size.css';
 @value (borderRadiusXSmall, borderRadiusMedium) from '../../styles/variables/_border.css';
 @value (opacity20, opacity40, opacity60) from '../../styles/variables/_opacity.css';
@@ -13,7 +13,6 @@
   --width: size40;
   --border-radius: borderRadiusXSmall;
   --height: sizeFluid;
-  display: flex;
   height: var(--height);
   width: var(--width);
   border-radius: var(--border-radius);
@@ -26,10 +25,12 @@
   background-size: backgroundSizeInitial sizeFluid;
   animation: shimmer motionDuration infinite linear;
   vertical-align: middle;
-}
 
-.text {
-  margin: spaceNone spaceXSmall;
+  &.text {
+    margin-right: spaceXXSmall;
+    width: initial;
+    padding-left: var(--width);
+  }
 }
 
 .kpiBox {

package/package.json

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