norma-library 0.5.130 → 0.5.132
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.
- package/dist/esm/components/Box/styles.d.ts +1 -1
- package/dist/esm/components/Breadcrumb/styles.d.ts +4 -4
- package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.d.ts +1 -1
- package/dist/esm/components/DateInput/styles.d.ts +2 -2
- package/dist/esm/components/Icons.d.ts +1 -1
- package/dist/esm/components/MultiSelectInput/components/Option/styles.d.ts +1 -1
- package/dist/esm/components/MultiSelectInput/styles.d.ts +2 -2
- package/dist/esm/components/ProgressBar.d.ts +1 -1
- package/dist/esm/components/ProgressBar.js +19 -8
- package/dist/esm/components/ProgressBar.js.map +1 -1
- package/dist/esm/components/RadioGroup.js +1 -1
- package/dist/esm/components/RadioGroup.js.map +1 -1
- package/dist/esm/components/SelectInput/components/Option/styles.d.ts +1 -1
- package/dist/esm/components/SelectInput/styles.d.ts +2 -2
- package/dist/esm/components/Table/components/header/styles.d.ts +8 -8
- package/dist/esm/components/Table/components/pagination/styles.d.ts +1 -1
- package/dist/esm/components/Table/components/tbody/styles.d.ts +1 -1
- package/dist/esm/components/Table/styles.d.ts +10 -10
- package/dist/esm/components/TextInput/styles.d.ts +3 -3
- package/dist/esm/components/Typography/Text/styles.d.ts +1 -1
- package/dist/esm/components/Typography/Title/styles.d.ts +1 -1
- package/dist/esm/components/UncontrolledTable/components/header/styles.d.ts +8 -8
- package/dist/esm/components/UncontrolledTable/components/pagination/styles.d.ts +1 -1
- package/dist/esm/components/UncontrolledTable/components/tbody/styles.d.ts +1 -1
- package/dist/esm/components/UncontrolledTable/styles.d.ts +10 -10
- package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.style.d.ts +1 -1
- package/dist/esm/interfaces/ProgressBar.d.ts +5 -1
- package/package.json +1 -1
- package/src/components/ProgressBar.tsx +25 -12
- package/src/components/RadioGroup.tsx +1 -1
- package/src/interfaces/ProgressBar.ts +7 -1
- package/src/stories/ProgressBar.stories.tsx +45 -27
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { BoxProps } from "./interfaces";
|
|
3
|
-
export declare const Container: import("styled-components
|
|
3
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps>>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Container: import("styled-components
|
|
3
|
-
export declare const ListLinks: import("styled-components
|
|
4
|
-
export declare const Link: import("styled-components
|
|
5
|
-
export declare const Arrow: import("styled-components
|
|
2
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
3
|
+
export declare const ListLinks: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
4
|
+
export declare const Link: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
|
|
5
|
+
export declare const Arrow: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -10,7 +10,7 @@ export declare const ChatMessageBalloonStyle: import("@emotion/styled").StyledCo
|
|
|
10
10
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
11
11
|
export declare const ChatMessageDateStyle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
12
12
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
13
|
-
}, "
|
|
13
|
+
}, "p" | "style" | "className" | "classes" | "children" | "sx" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
14
14
|
export declare const ChatMessageChildrenStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
15
15
|
direction: string;
|
|
16
16
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import "react-datepicker/dist/react-datepicker.css";
|
|
3
3
|
import { ContainerStyles } from './interface';
|
|
4
|
-
export declare const Container: import("styled-components
|
|
5
|
-
export declare const Label: import("styled-components
|
|
4
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerStyles>>;
|
|
5
|
+
export declare const Label: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
|
|
@@ -2,6 +2,6 @@ import React, { FunctionComponent } from 'react';
|
|
|
2
2
|
import { IconsProps, SvgProps } from '../interfaces/Icons';
|
|
3
3
|
export declare const Svg: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
|
-
as?: React.ElementType<any
|
|
5
|
+
as?: React.ElementType<any> | undefined;
|
|
6
6
|
} & SvgProps, React.SVGProps<SVGSVGElement>, {}>;
|
|
7
7
|
export declare const Icons: FunctionComponent<IconsProps>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Container: import("styled-components
|
|
2
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Container: import("styled-components
|
|
3
|
-
export declare const Label: import("styled-components
|
|
2
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
3
|
+
export declare const Label: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ProgressBarBaseProps } from '../interfaces';
|
|
3
|
-
export declare const ProgressBar: ({ value, label, variant, total, className, localeString, ...props }: ProgressBarBaseProps) => React.JSX.Element;
|
|
3
|
+
export declare const ProgressBar: ({ value, label, variant, total, className, localeString, colorCustom, color, ...props }: ProgressBarBaseProps) => React.JSX.Element;
|
|
@@ -2,16 +2,27 @@ import { __assign, __makeTemplateObject, __rest } from "tslib";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
|
-
var ProgressBarStyled = styled(MuiProgressBar)({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
var ProgressBarStyled = styled(MuiProgressBar)(function (_a) {
|
|
6
|
+
var _b;
|
|
7
|
+
var colorCustom = _a.colorCustom;
|
|
8
|
+
return (_b = {
|
|
9
|
+
width: '100%',
|
|
10
|
+
height: '10px',
|
|
11
|
+
borderRadius: '10px',
|
|
12
|
+
position: 'relative',
|
|
13
|
+
backgroundColor: colorCustom ? colorCustom.root : undefined
|
|
14
|
+
},
|
|
15
|
+
_b["&.".concat(linearProgressClasses.determinate)] = {
|
|
16
|
+
backgroundColor: colorCustom ? colorCustom.root : undefined,
|
|
17
|
+
},
|
|
18
|
+
_b["& .".concat(linearProgressClasses.bar)] = {
|
|
19
|
+
backgroundColor: colorCustom ? colorCustom.bar : undefined,
|
|
20
|
+
},
|
|
21
|
+
_b);
|
|
11
22
|
});
|
|
12
23
|
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"])));
|
|
13
24
|
export var ProgressBar = function (_a) {
|
|
14
|
-
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, props = __rest(_a, ["value", "label", "variant", "total", "className", "localeString"]);
|
|
25
|
+
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"]);
|
|
15
26
|
var percentage = value && total ? (value / total) * 100 : 0;
|
|
16
27
|
return (React.createElement("div", { className: className, style: { minWidth: '100px' } },
|
|
17
28
|
label && (React.createElement(ProgressBarLabelStyled, null,
|
|
@@ -21,7 +32,7 @@ export var ProgressBar = function (_a) {
|
|
|
21
32
|
" (",
|
|
22
33
|
percentage.toFixed(2),
|
|
23
34
|
"%)"))),
|
|
24
|
-
React.createElement(ProgressBarStyled, __assign({ value: percentage, variant: variant }, props))));
|
|
35
|
+
React.createElement(ProgressBarStyled, __assign({ value: percentage, variant: variant, colorCustom: colorCustom, color: colorCustom ? undefined : color }, props))));
|
|
25
36
|
};
|
|
26
37
|
var templateObject_1;
|
|
27
38
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +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;
|
|
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"}
|
|
@@ -7,7 +7,7 @@ var sizes = ['small', 'medium'];
|
|
|
7
7
|
export var RadioGroup = function (_a) {
|
|
8
8
|
var props = __rest(_a, []);
|
|
9
9
|
var onChange = props.onChange;
|
|
10
|
-
return (React.createElement(FormControl,
|
|
10
|
+
return (React.createElement(FormControl, { disabled: props.disabled },
|
|
11
11
|
React.createElement(FormLabel, { id: props.id }, props.label),
|
|
12
12
|
React.createElement(MuiRadioGroup, { "aria-labelledby": props.id, defaultValue: props.checked, name: "radio-buttons-group", row: props.direction === 'horizontal' ? true : false, onChange: !!onChange ? function (event, value) { return onChange(event, value); } : undefined }, props.options &&
|
|
13
13
|
props.options.map(function (item, key) { return (React.createElement(FormControlLabel, { value: item.value, control: React.createElement(RadioStyled, { color: props.color, size: item.size ? item.size : sizes[1] }), label: item.label, key: key, sx: { alignItems: "start" } })); }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,KAAK,IAAI,QAAQ,EACjB,UAAU,IAAI,aAAa,GAC5B,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,IAAM,KAAK,GAA2B,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAE1D,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAA4B;QAAvB,KAAK,cAAV,EAAY,CAAF;IAC3B,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE3B,OAAO,CACL,oBAAC,WAAW;
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../src/components/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,KAAK,IAAI,QAAQ,EACjB,UAAU,IAAI,aAAa,GAC5B,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,IAAM,KAAK,GAA2B,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAE1D,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAA4B;QAAvB,KAAK,cAAV,EAAY,CAAF;IAC3B,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE3B,OAAO,CACL,oBAAC,WAAW,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACnC,oBAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,EAAE,IAAG,KAAK,CAAC,KAAK,CAAa;QAClD,oBAAC,aAAa,uBACK,KAAK,CAAC,EAAE,EACzB,YAAY,EAAE,KAAK,CAAC,OAAO,EAC3B,IAAI,EAAC,qBAAqB,EAC1B,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACpD,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,EAAtB,CAAsB,CAAC,CAAC,CAAC,SAAS,IAE1E,KAAK,CAAC,OAAO;YACZ,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CAC/B,oBAAC,gBAAgB,IACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,EACpF,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAC,UAAU,EAAE,OAAO,EAAC,GACzB,CACH,EARgC,CAQhC,CAAC,CACU,CACJ,CACf,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Container: import("styled-components
|
|
2
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Container: import("styled-components
|
|
3
|
-
export declare const Label: import("styled-components
|
|
2
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
3
|
+
export declare const Label: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Header: import("styled-components
|
|
3
|
-
export declare const Results: import("styled-components
|
|
4
|
-
export declare const Tools: import("styled-components
|
|
5
|
-
export declare const TextResult: import("styled-components
|
|
6
|
-
export declare const TextClearSearchContent: import("styled-components
|
|
7
|
-
export declare const TextClearSearch: import("styled-components
|
|
8
|
-
export declare const IconTools: import("styled-components
|
|
9
|
-
export declare const ListTools: import("styled-components
|
|
2
|
+
export declare const Header: import("styled-components").IStyledComponent<"web", any>;
|
|
3
|
+
export declare const Results: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
4
|
+
export declare const Tools: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
5
|
+
export declare const TextResult: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
6
|
+
export declare const TextClearSearchContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
7
|
+
export declare const TextClearSearch: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
|
|
8
|
+
export declare const IconTools: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
9
|
+
export declare const ListTools: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Pagination: import("styled-components
|
|
2
|
+
export declare const Pagination: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const Tr: import("styled-components
|
|
1
|
+
export declare const Tr: import("styled-components").IStyledComponent<"web", any>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Container: import("styled-components
|
|
3
|
-
export declare const Content: import("styled-components
|
|
4
|
-
export declare const Table: import("styled-components
|
|
5
|
-
export declare const TextColumn: import("styled-components
|
|
6
|
-
export declare const ColumnContent: import("styled-components
|
|
7
|
-
export declare const IconFilterDialog: import("styled-components
|
|
8
|
-
export declare const backgroundDialog: import("styled-components
|
|
9
|
-
export declare const FilterDialog: import("styled-components
|
|
10
|
-
export declare const ListFilterDialog: import("styled-components
|
|
11
|
-
export declare const OptionFilterDialog: import("styled-components
|
|
2
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
3
|
+
export declare const Content: import("styled-components").IStyledComponent<"web", any>;
|
|
4
|
+
export declare const Table: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>;
|
|
5
|
+
export declare const TextColumn: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
|
|
6
|
+
export declare const ColumnContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
7
|
+
export declare const IconFilterDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
8
|
+
export declare const backgroundDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
9
|
+
export declare const FilterDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
10
|
+
export declare const ListFilterDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
11
|
+
export declare const OptionFilterDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Container: import("styled-components
|
|
3
|
-
export declare const Label: import("styled-components
|
|
4
|
-
export declare const Input: import("styled-components
|
|
2
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
3
|
+
export declare const Label: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
|
|
4
|
+
export declare const Input: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TextProps } from "./interfaces";
|
|
3
|
-
export declare const Container: import("styled-components
|
|
3
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TextProps>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TextProps } from "./interfaces";
|
|
3
|
-
export declare const Container: import("styled-components
|
|
3
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, TextProps>>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Header: import("styled-components
|
|
3
|
-
export declare const Results: import("styled-components
|
|
4
|
-
export declare const Tools: import("styled-components
|
|
5
|
-
export declare const TextResult: import("styled-components
|
|
6
|
-
export declare const TextClearSearchContent: import("styled-components
|
|
7
|
-
export declare const TextClearSearch: import("styled-components
|
|
8
|
-
export declare const IconTools: import("styled-components
|
|
9
|
-
export declare const ListTools: import("styled-components
|
|
2
|
+
export declare const Header: import("styled-components").IStyledComponent<"web", any>;
|
|
3
|
+
export declare const Results: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
4
|
+
export declare const Tools: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
5
|
+
export declare const TextResult: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
6
|
+
export declare const TextClearSearchContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
7
|
+
export declare const TextClearSearch: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>;
|
|
8
|
+
export declare const IconTools: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
9
|
+
export declare const ListTools: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Pagination: import("styled-components
|
|
2
|
+
export declare const Pagination: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const Tr: import("styled-components
|
|
1
|
+
export declare const Tr: import("styled-components").IStyledComponent<"web", any>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Container: import("styled-components
|
|
3
|
-
export declare const Content: import("styled-components
|
|
4
|
-
export declare const Table: import("styled-components
|
|
5
|
-
export declare const TextColumn: import("styled-components
|
|
6
|
-
export declare const ColumnContent: import("styled-components
|
|
7
|
-
export declare const IconFilterDialog: import("styled-components
|
|
8
|
-
export declare const backgroundDialog: import("styled-components
|
|
9
|
-
export declare const FilterDialog: import("styled-components
|
|
10
|
-
export declare const ListFilterDialog: import("styled-components
|
|
11
|
-
export declare const OptionFilterDialog: import("styled-components
|
|
2
|
+
export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
3
|
+
export declare const Content: import("styled-components").IStyledComponent<"web", any>;
|
|
4
|
+
export declare const Table: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>;
|
|
5
|
+
export declare const TextColumn: import("styled-components").IStyledComponent<"web", any>;
|
|
6
|
+
export declare const ColumnContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
7
|
+
export declare const IconFilterDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
8
|
+
export declare const backgroundDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
9
|
+
export declare const FilterDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
10
|
+
export declare const ListFilterDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
11
|
+
export declare const OptionFilterDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -6,7 +6,7 @@ interface StyledTabProps {
|
|
|
6
6
|
}
|
|
7
7
|
export declare const NormaTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
8
8
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
9
|
-
}, "
|
|
9
|
+
}, "style" | "className" | "classes" | "action" | "children" | "sx" | "variant" | "value" | "aria-label" | "aria-labelledby" | "onChange" | "slots" | "slotProps" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
10
10
|
color: ColorVariant;
|
|
11
11
|
}, {}, {}>;
|
|
12
12
|
export declare const NormaTab: import("@emotion/styled").StyledComponent<StyledTabProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -5,12 +5,16 @@ import { ColorVariant, MuiProgressBarBaseProps, ProgressVariant } from '../types
|
|
|
5
5
|
import { ProgressBar } from '..';
|
|
6
6
|
export interface LinearProgressPropsColorOverrides {
|
|
7
7
|
}
|
|
8
|
+
export interface CustomColor {
|
|
9
|
+
root: string;
|
|
10
|
+
bar: string;
|
|
11
|
+
}
|
|
8
12
|
export interface ProgressBarBaseProps extends MuiProgressBarBaseProps {
|
|
9
13
|
sx?: SxProps<Theme>;
|
|
10
14
|
value?: number;
|
|
11
15
|
total?: number;
|
|
12
16
|
label?: string;
|
|
13
|
-
colorCustom?:
|
|
17
|
+
colorCustom?: CustomColor;
|
|
14
18
|
variant?: ProgressVariant;
|
|
15
19
|
localeString?: boolean;
|
|
16
20
|
color?: OverridableStringUnion<ColorVariant, LinearProgressPropsColorOverrides>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "norma-library",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.132",
|
|
4
4
|
"private": false,
|
|
5
5
|
"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.",
|
|
6
6
|
"scripts": {
|
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material';
|
|
3
|
-
|
|
4
|
-
import { ProgressBarBaseProps } from '../interfaces';
|
|
5
3
|
import { styled } from '@mui/material/styles';
|
|
4
|
+
import { ProgressBarBaseProps, CustomColor } from '../interfaces';
|
|
6
5
|
|
|
7
|
-
const ProgressBarStyled = styled(MuiProgressBar)(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
const ProgressBarStyled = styled(MuiProgressBar)<{ colorCustom?: CustomColor }>(
|
|
7
|
+
({ colorCustom }) => ({
|
|
8
|
+
width: '100%',
|
|
9
|
+
height: '10px',
|
|
10
|
+
borderRadius: '10px',
|
|
11
|
+
position: 'relative',
|
|
12
|
+
backgroundColor: colorCustom ? colorCustom.root : undefined,
|
|
13
|
+
[`&.${linearProgressClasses.determinate}`]: {
|
|
14
|
+
backgroundColor: colorCustom ? colorCustom.root : undefined,
|
|
15
|
+
},
|
|
16
|
+
[`& .${linearProgressClasses.bar}`]: {
|
|
17
|
+
backgroundColor: colorCustom ? colorCustom.bar : undefined,
|
|
18
|
+
},
|
|
19
|
+
})
|
|
20
|
+
);
|
|
16
21
|
|
|
17
22
|
const ProgressBarLabelStyled = styled(Typography)`
|
|
18
23
|
display: flex;
|
|
@@ -30,6 +35,8 @@ export const ProgressBar = ({
|
|
|
30
35
|
total,
|
|
31
36
|
className,
|
|
32
37
|
localeString,
|
|
38
|
+
colorCustom,
|
|
39
|
+
color = 'primary',
|
|
33
40
|
...props
|
|
34
41
|
}: ProgressBarBaseProps) => {
|
|
35
42
|
const percentage = value && total ? (value / total) * 100 : 0;
|
|
@@ -44,7 +51,13 @@ export const ProgressBar = ({
|
|
|
44
51
|
</span>
|
|
45
52
|
</ProgressBarLabelStyled>
|
|
46
53
|
)}
|
|
47
|
-
<ProgressBarStyled
|
|
54
|
+
<ProgressBarStyled
|
|
55
|
+
value={percentage}
|
|
56
|
+
variant={variant}
|
|
57
|
+
colorCustom={colorCustom}
|
|
58
|
+
color={colorCustom ? undefined : color}
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
48
61
|
</div>
|
|
49
62
|
);
|
|
50
63
|
};
|
|
@@ -18,7 +18,7 @@ export const RadioGroup = ({ ...props }: RadioBaseProps) => {
|
|
|
18
18
|
const { onChange } = props;
|
|
19
19
|
|
|
20
20
|
return (
|
|
21
|
-
<FormControl>
|
|
21
|
+
<FormControl disabled={props.disabled}>
|
|
22
22
|
<FormLabel id={props.id}>{props.label}</FormLabel>
|
|
23
23
|
<MuiRadioGroup
|
|
24
24
|
aria-labelledby={props.id}
|
|
@@ -3,14 +3,20 @@ import { Theme } from '@emotion/react';
|
|
|
3
3
|
import { OverridableStringUnion } from '@mui/types';
|
|
4
4
|
import { ColorVariant, MuiProgressBarBaseProps, ProgressVariant } from '../types';
|
|
5
5
|
import { ProgressBar } from '..';
|
|
6
|
+
|
|
6
7
|
export interface LinearProgressPropsColorOverrides {}
|
|
7
8
|
|
|
9
|
+
export interface CustomColor {
|
|
10
|
+
root: string;
|
|
11
|
+
bar: string;
|
|
12
|
+
}
|
|
13
|
+
|
|
8
14
|
export interface ProgressBarBaseProps extends MuiProgressBarBaseProps {
|
|
9
15
|
sx?: SxProps<Theme>;
|
|
10
16
|
value?: number;
|
|
11
17
|
total?: number;
|
|
12
18
|
label?: string;
|
|
13
|
-
colorCustom?:
|
|
19
|
+
colorCustom?: CustomColor;
|
|
14
20
|
variant?: ProgressVariant;
|
|
15
21
|
localeString?: boolean;
|
|
16
22
|
color?: OverridableStringUnion<ColorVariant, LinearProgressPropsColorOverrides>;
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
3
|
import { ProgressBar } from '../components';
|
|
5
|
-
import { ColorVariant
|
|
4
|
+
import { ColorVariant } from '../types';
|
|
6
5
|
|
|
7
6
|
const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
|
|
8
7
|
|
|
9
|
-
const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
|
|
10
|
-
|
|
11
8
|
const meta = {
|
|
12
9
|
title: 'Display/ProgressBar',
|
|
13
10
|
component: ProgressBar,
|
|
@@ -58,38 +55,59 @@ ProgressBarTitle.storyName = 'ProgressBar With Title';
|
|
|
58
55
|
export const ProgressBarColors: Story = () => (
|
|
59
56
|
<>
|
|
60
57
|
<div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
|
|
61
|
-
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
58
|
+
<div style={{ position: 'relative', flex: 1, width: '230px' }}>
|
|
59
|
+
<ProgressBar value={100} total={300} color="inherit" label="Progress Inherit" />
|
|
60
|
+
</div>
|
|
61
|
+
<div style={{ position: 'relative', flex: 1, width: '230px' }}>
|
|
62
|
+
<ProgressBar value={125} total={1000} color="secondary" label="Progress secondary" />
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
|
|
66
|
+
<div style={{ position: 'relative', flex: 1, width: '230px' }}>
|
|
67
|
+
<ProgressBar value={22} total={100} color="error" label="Progress error" />
|
|
68
|
+
</div>
|
|
69
|
+
<div style={{ position: 'relative', flex: 1, width: '230px' }}>
|
|
70
|
+
<ProgressBar value={24} total={100} color="info" label="Progress info" />
|
|
71
|
+
</div>
|
|
69
72
|
</div>
|
|
70
73
|
<div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
|
|
71
|
-
|
|
74
|
+
<div style={{ display: 'flex', gap: '1rem', marginBottom: 15 }}>
|
|
72
75
|
<div style={{ position: 'relative', flex: 1, width: '230px' }}>
|
|
73
|
-
<ProgressBar value={
|
|
76
|
+
<ProgressBar value={45} total={100} color="success" label="Progress success" />
|
|
74
77
|
</div>
|
|
75
78
|
<div style={{ position: 'relative', flex: 1, width: '230px' }}>
|
|
76
|
-
<ProgressBar value={
|
|
79
|
+
<ProgressBar value={86} total={100} color="warning" label="Progress warning" />
|
|
77
80
|
</div>
|
|
78
|
-
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</>
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
ProgressBarColors.storyName = 'ProgressBar Colors';
|
|
87
|
+
|
|
88
|
+
export const ProgressBarCustomColors: Story = () => (
|
|
89
|
+
<>
|
|
90
|
+
<div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
|
|
91
|
+
<div style={{ position: 'relative', flex: 1, width: '230px' }}>
|
|
92
|
+
<ProgressBar
|
|
93
|
+
value={50}
|
|
94
|
+
total={100}
|
|
95
|
+
colorCustom={{ root: 'rgba(179, 222, 105, 0.2)', bar: '#b3de69' }}
|
|
96
|
+
label="Custom Color"
|
|
97
|
+
/>
|
|
98
|
+
</div>
|
|
79
99
|
</div>
|
|
80
100
|
<div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
</div>
|
|
90
|
-
</>
|
|
101
|
+
<div style={{ position: 'relative', flex: 1, width: '230px' }}>
|
|
102
|
+
<ProgressBar
|
|
103
|
+
value={75}
|
|
104
|
+
total={100}
|
|
105
|
+
colorCustom={{ root: 'rgba(0, 191, 255, 0.2)', bar: '#00bfff' }}
|
|
106
|
+
label="Custom Color Blue"
|
|
107
|
+
/>
|
|
108
|
+
</div>
|
|
91
109
|
</div>
|
|
92
110
|
</>
|
|
93
111
|
);
|
|
94
112
|
|
|
95
|
-
|
|
113
|
+
ProgressBarCustomColors.storyName = 'ProgressBar Custom Colors';
|