norma-library 0.5.137 → 0.5.139

package/dist/esm/components/ProgressBar.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ProgressBarBaseProps } from '../interfaces';
-export declare const ProgressBar: ({ value, label, variant, total, className, localeString, colorCustom, color, ...props }: ProgressBarBaseProps) => React.JSX.Element;
+export declare const ProgressBar: ({ value, label, variant, total, className, localeString, colorCustom, color, htmlLabel, ...props }: ProgressBarBaseProps) => React.JSX.Element;

package/dist/esm/components/ProgressBar.js

@@ -4,10 +4,10 @@ import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } f
 import { styled } from '@mui/material/styles';
 var ProgressBarStyled = styled(MuiProgressBar)(function (_a) {
     var _b;
-    var colorCustom = _a.colorCustom;
+    var colorCustom = _a.colorCustom, $h = _a.$h;
     return (_b = {
             width: '100%',
-            height: '10px',
+            height: $h ? "".concat($h, "px") : '10px',
             borderRadius: '10px',
             position: 'relative',
             backgroundColor: colorCustom ? colorCustom.root : undefined
@@ -20,19 +20,23 @@ var ProgressBarStyled = styled(MuiProgressBar)(function (_a) {
         },
         _b);
 });
-var ProgressBarLabelStyled = styled(Typography)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: left;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: left;\n"])));
+var ProgressBarLabelStyled = styled(Typography)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: left;\n  font-size: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: left;\n  font-size: ", ";\n"])), function (_a) {
+    var $fSize = _a.$fSize;
+    return $fSize || '1rem';
+});
 export var ProgressBar = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? 0 : _b, label = _a.label, _c = _a.variant, variant = _c === void 0 ? 'determinate' : _c, total = _a.total, className = _a.className, localeString = _a.localeString, colorCustom = _a.colorCustom, _d = _a.color, color = _d === void 0 ? 'primary' : _d, props = __rest(_a, ["value", "label", "variant", "total", "className", "localeString", "colorCustom", "color"]);
+    var _b = _a.value, value = _b === void 0 ? 0 : _b, label = _a.label, _c = _a.variant, variant = _c === void 0 ? 'determinate' : _c, total = _a.total, className = _a.className, localeString = _a.localeString, colorCustom = _a.colorCustom, _d = _a.color, color = _d === void 0 ? 'primary' : _d, htmlLabel = _a.htmlLabel, props = __rest(_a, ["value", "label", "variant", "total", "className", "localeString", "colorCustom", "color", "htmlLabel"]);
     var percentage = value && total ? (value / total) * 100 : 0;
     return (React.createElement("div", { className: className, style: { minWidth: '100px' } },
-        label && (React.createElement(ProgressBarLabelStyled, null,
-            label,
-            React.createElement("span", { style: { right: 0 } },
-                localeString ? value.toLocaleString() : value,
-                " (",
-                percentage.toFixed(2),
-                "%)"))),
-        React.createElement(ProgressBarStyled, __assign({ value: percentage, variant: variant, colorCustom: colorCustom, color: colorCustom ? undefined : color }, props))));
+        label ? (React.createElement(ProgressBarLabelStyled, { "$fSize": props.fSize, className: "ProgressBarLabel" },
+            React.createElement(React.Fragment, null,
+                label,
+                !props.hideValue && (React.createElement("span", { style: { right: 0 } },
+                    localeString ? value.toLocaleString() : value,
+                    " (",
+                    percentage.toFixed(2),
+                    "%)"))))) : (htmlLabel),
+        React.createElement(ProgressBarStyled, __assign({ value: percentage, variant: variant, colorCustom: colorCustom, "$h": props.h, color: colorCustom ? undefined : color }, props))));
 };
 var templateObject_1;
 //# sourceMappingURL=ProgressBar.js.map

package/dist/esm/components/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,IAAI,cAAc,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,IAAM,iBAAiB,GAAG,MAAM,CAAC,cAAc,CAAC,CAC9C,UAAC,EAAe;;QAAb,WAAW,iBAAA;IAAO,OAAA;YACnB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,UAAU;YACpB,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;;QAC3D,GAAC,YAAK,qBAAqB,CAAC,WAAW,CAAE,IAAG;YAC1C,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SAC5D;QACD,GAAC,aAAM,qBAAqB,CAAC,GAAG,CAAE,IAAG;YACnC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;SAC3D;WACD;AAZmB,CAYnB,CACH,CAAC;AAEF,IAAM,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC,uNAAA,oJAOhD,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAUL;IATrB,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,KAAK,WAAA,EACL,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,KAAK,WAAA,EACL,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EACd,KAAK,cATkB,2FAU3B,CADS;IAER,IAAM,UAAU,GAAG,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;QACpD,KAAK,IAAI,CACR,oBAAC,sBAAsB;YACpB,KAAK;YACN,8BAAM,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;gBACtB,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,KAAK;;gBAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;qBAClE,CACgB,CAC1B;QACD,oBAAC,iBAAiB,aAChB,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,IAClC,KAAK,EACT,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,IAAI,cAAc,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,IAAM,iBAAiB,GAAG,MAAM,CAAC,cAAc,CAAC,CAA6C,UAAC,EAAmB;;QAAjB,WAAW,iBAAA,EAAE,EAAE,QAAA;IAAO,OAAA;YACpH,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,UAAG,EAAE,OAAI,CAAC,CAAC,CAAC,MAAM;YAC/B,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,UAAU;YACpB,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;;QAC3D,GAAC,YAAK,qBAAqB,CAAC,WAAW,CAAE,IAAG;YAC1C,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SAC5D;QACD,GAAC,aAAM,qBAAqB,CAAC,GAAG,CAAE,IAAG;YACnC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS;SAC3D;WACD;AAZoH,CAYpH,CAAC,CAAC;AAEJ,IAAM,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC,2OAAqB,iKAOvD,EAAgC,KAC9C,KADc,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,MAAM,IAAI,MAAM;AAAhB,CAAgB,CAC9C,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,EAWL;IAVrB,IAAA,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,KAAK,WAAA,EACL,eAAuB,EAAvB,OAAO,mBAAG,aAAa,KAAA,EACvB,KAAK,WAAA,EACL,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,WAAW,iBAAA,EACX,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EACjB,SAAS,eAAA,EACN,KAAK,cAVkB,wGAW3B,CADS;IAER,IAAM,UAAU,GAAG,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;QACpD,KAAK,CAAC,CAAC,CAAC,CACP,oBAAC,sBAAsB,cAAS,KAAK,CAAC,KAAK,EAAE,SAAS,EAAC,kBAAkB;YACvE;gBACG,KAAK;gBACL,CAAC,KAAK,CAAC,SAAS,IAAI,CACnB,8BAAM,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE;oBACtB,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,KAAK;;oBAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;yBAClE,CACR,CACA,CACoB,CAC1B,CAAC,CAAC,CAAC,CACF,SAAS,CACV;QAED,oBAAC,iBAAiB,aAChB,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,QACpB,KAAK,CAAC,CAAC,EACX,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,IAClC,KAAK,EACT,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/UncontrolledTable/components/tbody/styles.js

@@ -1,6 +1,6 @@
 import { __makeTemplateObject } from "tslib";
 import styled from 'styled-components';
 export var Tr = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: inherit;\n  display: table-row;\n  vertical-align: middle;\n  outline: 0;\n  &:nth-of-type(even) {\n    background-color: #fafafa;\n  }\n"], ["\n  color: inherit;\n  display: table-row;\n  vertical-align: middle;\n  outline: 0;\n  &:nth-of-type(even) {\n    background-color: #fafafa;\n  }\n"])));
-export var Td = styled.td(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgba(224, 224, 224, 1);\n  text-align: left;\n  padding: 16px;\n  color: rgba(0, 0, 0, 0.87);\n  color: #666666;\n  font-size: 0.875rem;\n  font-weight: 700;\n"], ["\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgba(224, 224, 224, 1);\n  text-align: left;\n  padding: 16px;\n  color: rgba(0, 0, 0, 0.87);\n  color: #666666;\n  font-size: 0.875rem;\n  font-weight: 700;\n"])));
+export var Td = styled.td(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgba(224, 224, 224, 1);\n  text-align: left;\n  padding: 16px;\n  color: #666666;\n  font-size: 0.875rem;\n"], ["\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgba(224, 224, 224, 1);\n  text-align: left;\n  padding: 16px;\n  color: #666666;\n  font-size: 0.875rem;\n"])));
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/UncontrolledTable/components/tbody/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/tbody/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,yNAAK,sJAQ/B,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,wZAAA,qVAc1B,IAAA,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/tbody/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,yNAAK,sJAQ/B,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,oWAAA,iSAY1B,IAAA,CAAC"}

package/dist/esm/interfaces/ProgressBar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
 import { Theme } from '@emotion/react';
 import { OverridableStringUnion } from '@mui/types';
@@ -18,5 +19,9 @@ export interface ProgressBarBaseProps extends MuiProgressBarBaseProps {
     variant?: ProgressVariant;
     localeString?: boolean;
     color?: OverridableStringUnion<ColorVariant, LinearProgressPropsColorOverrides>;
+    h?: number;
+    hideValue?: boolean;
+    fSize?: string;
+    htmlLabel?: React.ReactNode;
 }
 export type ProgressBarType = keyof typeof ProgressBar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.137",
+  "version": "0.5.139",
   "private": false,
   "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {

package/src/components/ProgressBar.tsx

@@ -3,29 +3,28 @@ import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } f
 import { styled } from '@mui/material/styles';
 import { ProgressBarBaseProps, CustomColor } from '../interfaces';
 
-const ProgressBarStyled = styled(MuiProgressBar)<{ colorCustom?: CustomColor }>(
-  ({ colorCustom }) => ({
-    width: '100%',
-    height: '10px',
-    borderRadius: '10px',
-    position: 'relative',
+const ProgressBarStyled = styled(MuiProgressBar)<{ colorCustom?: CustomColor; $h?: number }>(({ colorCustom, $h }) => ({
+  width: '100%',
+  height: $h ? `${$h}px` : '10px',
+  borderRadius: '10px',
+  position: 'relative',
+  backgroundColor: colorCustom ? colorCustom.root : undefined,
+  [`&.${linearProgressClasses.determinate}`]: {
     backgroundColor: colorCustom ? colorCustom.root : undefined,
-    [`&.${linearProgressClasses.determinate}`]: {
-      backgroundColor: colorCustom ? colorCustom.root : undefined,
-    },
-    [`& .${linearProgressClasses.bar}`]: {
-      backgroundColor: colorCustom ? colorCustom.bar : undefined,
-    },
-  })
-);
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    backgroundColor: colorCustom ? colorCustom.bar : undefined,
+  },
+}));
 
-const ProgressBarLabelStyled = styled(Typography)`
+const ProgressBarLabelStyled = styled(Typography)<{ $fSize?: string }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
   position: relative;
   text-align: left;
+  font-size: ${({ $fSize }) => $fSize || '1rem'};
 `;
 
 export const ProgressBar = ({
@@ -37,24 +36,33 @@ export const ProgressBar = ({
   localeString,
   colorCustom,
   color = 'primary',
+  htmlLabel,
   ...props
 }: ProgressBarBaseProps) => {
   const percentage = value && total ? (value / total) * 100 : 0;
 
   return (
     <div className={className} style={{ minWidth: '100px' }}>
-      {label && (
-        <ProgressBarLabelStyled>
-          {label}
-          <span style={{ right: 0 }}>
-            {localeString ? value.toLocaleString() : value} ({percentage.toFixed(2)}%)
-          </span>
+      {label ? (
+        <ProgressBarLabelStyled $fSize={props.fSize} className="ProgressBarLabel">
+          <>
+            {label}
+            {!props.hideValue && (
+              <span style={{ right: 0 }}>
+                {localeString ? value.toLocaleString() : value} ({percentage.toFixed(2)}%)
+              </span>
+            )}
+          </>
         </ProgressBarLabelStyled>
+      ) : (
+        htmlLabel
       )}
+
       <ProgressBarStyled
         value={percentage}
         variant={variant}
         colorCustom={colorCustom}
+        $h={props.h}
         color={colorCustom ? undefined : color}
         {...props}
       />

package/src/components/UncontrolledTable/components/tbody/styles.tsx

@@ -20,8 +20,6 @@ export const Td = styled.td`
   border-bottom: 1px solid rgba(224, 224, 224, 1);
   text-align: left;
   padding: 16px;
-  color: rgba(0, 0, 0, 0.87);
   color: #666666;
   font-size: 0.875rem;
-  font-weight: 700;
 `;

package/src/interfaces/ProgressBar.ts

@@ -20,6 +20,10 @@ export interface ProgressBarBaseProps extends MuiProgressBarBaseProps {
   variant?: ProgressVariant;
   localeString?: boolean;
   color?: OverridableStringUnion<ColorVariant, LinearProgressPropsColorOverrides>;
+  h?: number;
+  hideValue?: boolean;
+  fSize?: string;
+  htmlLabel?: React.ReactNode;
 }
 
 export type ProgressBarType = keyof typeof ProgressBar;

package/src/stories/ProgressBar.stories.tsx

@@ -93,7 +93,7 @@ export const ProgressBarCustomColors: Story = () => (
           value={50}
           total={100}
           colorCustom={{ root: 'rgba(179, 222, 105, 0.2)', bar: '#b3de69' }}
-          label="Custom Color"
+          htmlLabel={<div>Custom Color Green</div>}
         />
       </div>
     </div>
@@ -104,6 +104,9 @@ export const ProgressBarCustomColors: Story = () => (
           total={100}
           colorCustom={{ root: 'rgba(0, 191, 255, 0.2)', bar: '#00bfff' }}
           label="Custom Color Blue"
+          h={5}
+          hideValue
+          fSize='12px'
         />
       </div>
     </div>