@spaced-out/ui-design-system 0.1.104 → 0.1.106

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/lib/components/Shimmer/Shimmer.js +13 -8
  3. package/lib/components/Shimmer/Shimmer.js.flow +36 -9
  4. package/lib/components/Shimmer/Shimmer.module.css +4 -0
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  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.
4
4
 
5
+ ### [0.1.106](https://github.com/spaced-out/ui-design-system/compare/v0.1.105...v0.1.106) (2024-07-08)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * 🔘 kpi shimmer css change ([9c847f5](https://github.com/spaced-out/ui-design-system/commit/9c847f51637956b33758f97c3e0f97b09e26f4a4))
11
+
12
+ ### [0.1.105](https://github.com/spaced-out/ui-design-system/compare/v0.1.104...v0.1.105) (2024-07-08)
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * 🔘 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))
18
+
5
19
  ### [0.1.104](https://github.com/spaced-out/ui-design-system/compare/v0.1.103...v0.1.104) (2024-07-04)
6
20
 
7
21
 
package/lib/components/Shimmer/Shimmer.js CHANGED
@@ -72,27 +72,32 @@ const Shimmer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
72
72
  exports.Shimmer = Shimmer;
73
73
  const KPIShimmer = _ref3 => {
74
74
  let {
75
- textWidth = 150
75
+ textWidth = 150,
76
+ hasBottomContent = true,
77
+ hasIcon = true,
78
+ hasTopContent = true,
79
+ hasMiddleContent = true,
80
+ classNames
76
81
  } = _ref3;
77
82
  return /*#__PURE__*/React.createElement("div", {
78
- className: _ShimmerModule.default.kpiBox
79
- }, /*#__PURE__*/React.createElement("div", {
80
- className: _ShimmerModule.default.section
83
+ className: (0, _classify.default)(_ShimmerModule.default.kpiBox, classNames?.wrapper)
84
+ }, hasIcon && /*#__PURE__*/React.createElement("div", {
85
+ className: (0, _classify.default)(_ShimmerModule.default.section, _ShimmerModule.default.iconSection, classNames?.icon)
81
86
  }, /*#__PURE__*/React.createElement(Shimmer, {
82
87
  type: "rounded",
83
88
  width: 60,
84
89
  height: 60
85
90
  })), /*#__PURE__*/React.createElement("div", {
86
- className: _ShimmerModule.default.section
87
- }, /*#__PURE__*/React.createElement(Shimmer, {
91
+ className: (0, _classify.default)(_ShimmerModule.default.section, classNames?.text)
92
+ }, hasTopContent && /*#__PURE__*/React.createElement(Shimmer, {
88
93
  type: "text",
89
94
  width: textWidth,
90
95
  height: 15
91
- }), /*#__PURE__*/React.createElement(Shimmer, {
96
+ }), hasMiddleContent && /*#__PURE__*/React.createElement(Shimmer, {
92
97
  type: "text",
93
98
  width: textWidth,
94
99
  height: 25
95
- }), /*#__PURE__*/React.createElement(Shimmer, {
100
+ }), hasBottomContent && /*#__PURE__*/React.createElement(Shimmer, {
96
101
  type: "text",
97
102
  width: textWidth,
98
103
  height: 15
package/lib/components/Shimmer/Shimmer.js.flow CHANGED
@@ -96,19 +96,46 @@ export const Shimmer: React$AbstractComponent<ShimmerProps, HTMLSpanElement> =
96
96
  },
97
97
  );
98
98
 
99
+ type KPIShimmerClassNames = $ReadOnly<{
100
+ wrapper?: string,
101
+ icon?: string,
102
+ text?: string,
103
+ }>;
104
+
99
105
  export type KPIShimmerProps = {
100
106
  textWidth?: number | string,
107
+ hasTopContent?: boolean,
108
+ hasMiddleContent?: boolean,
109
+ hasBottomContent?: boolean,
110
+ hasIcon?: boolean,
111
+ classNames?: KPIShimmerClassNames,
101
112
  };
102
113
 
103
- export const KPIShimmer = ({textWidth = 150}: KPIShimmerProps): React.Node => (
104
- <div className={css.kpiBox}>
105
- <div className={css.section}>
106
- <Shimmer type="rounded" width={60} height={60}></Shimmer>
107
- </div>
108
- <div className={css.section}>
109
- <Shimmer type="text" width={textWidth} height={15}></Shimmer>
110
- <Shimmer type="text" width={textWidth} height={25}></Shimmer>
111
- <Shimmer type="text" width={textWidth} height={15}></Shimmer>
114
+ export const KPIShimmer = ({
115
+ textWidth = 150,
116
+ hasBottomContent = true,
117
+ hasIcon = true,
118
+ hasTopContent = true,
119
+ hasMiddleContent = true,
120
+ classNames,
121
+ }: KPIShimmerProps): React.Node => (
122
+ <div className={classify(css.kpiBox, classNames?.wrapper)}>
123
+ {hasIcon && (
124
+ <div className={classify(css.section, css.iconSection, classNames?.icon)}>
125
+ <Shimmer type="rounded" width={60} height={60}></Shimmer>
126
+ </div>
127
+ )}
128
+
129
+ <div className={classify(css.section, classNames?.text)}>
130
+ {hasTopContent && (
131
+ <Shimmer type="text" width={textWidth} height={15}></Shimmer>
132
+ )}
133
+ {hasMiddleContent && (
134
+ <Shimmer type="text" width={textWidth} height={25}></Shimmer>
135
+ )}
136
+ {hasBottomContent && (
137
+ <Shimmer type="text" width={textWidth} height={15}></Shimmer>
138
+ )}
112
139
  </div>
113
140
  </div>
114
141
  );
package/lib/components/Shimmer/Shimmer.module.css CHANGED
@@ -54,6 +54,10 @@
54
54
  align-items: center;
55
55
  }
56
56
 
57
+ .iconSection {
58
+ width: initial;
59
+ }
60
+
57
61
  @keyframes shimmer {
58
62
  from {
59
63
  background-position: backgroundSizeInitial spaceNone;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.1.104",
3
+ "version": "0.1.106",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {