norma-library 0.5.141 → 0.5.143

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.
@@ -14,6 +14,7 @@ var colorMap = {
14
14
  };
15
15
  var RangerSliderStyled = styled(MuiSlider)(function () { return ({
16
16
  height: 8,
17
+ color: colorMap['primary'],
17
18
  '& .MuiSlider-track': {
18
19
  border: 'none',
19
20
  },
@@ -36,16 +37,17 @@ var RangerSliderStyled = styled(MuiSlider)(function () { return ({
36
37
  '& .MuiSlider-valueLabel': {
37
38
  fontSize: 12,
38
39
  fontWeight: 'normal',
39
- top: 40,
40
+ top: 48,
40
41
  position: 'absolute',
41
- backgroundColor: 'unset',
42
+ transition: 'none',
42
43
  color: colorMap['primary'],
43
44
  '&:before': {
44
- display: 'none',
45
+ bottom: 'inherit',
46
+ top: '-8px',
45
47
  },
46
48
  '& *': {
47
49
  background: 'transparent',
48
- color: '#000',
50
+ color: '#FFF',
49
51
  },
50
52
  },
51
53
  '& .MuiSlider-rail': {
@@ -56,6 +58,6 @@ var RangerSliderStyled = styled(MuiSlider)(function () { return ({
56
58
  }); });
57
59
  export var RangerSlider = function (_a) {
58
60
  var _b = _a.defaultValue, defaultValue = _b === void 0 ? 50 : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, props = __rest(_a, ["defaultValue", "color"]);
59
- return (React.createElement(RangerSliderStyled, __assign({ "aria-label": "Default", color: color }, props)));
61
+ return React.createElement(RangerSliderStyled, __assign({ "aria-label": "Default", color: color }, props));
60
62
  };
61
63
  //# sourceMappingURL=RangerSlider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"RangerSlider.js","sourceRoot":"","sources":["../../../src/components/RangerSlider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C,IAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,SAAS,EAAE,OAAO,CAAC,SAAS;IAC5B,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,IAAI,EAAE,OAAO,CAAC,IAAI;IAClB,OAAO,EAAE,OAAO,CAAC,OAAO;CACzB,CAAC;AAEF,IAAM,kBAAkB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,cAAM,OAAA,CAAC;IAClD,MAAM,EAAE,CAAC;IACT,oBAAoB,EAAE;QACpB,MAAM,EAAE,MAAM;KACf;IACD,oBAAoB,EAAE;QACpB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,oBAAa,QAAQ,CAAC,SAAS,CAAC,CAAE;QAC1C,oDAAoD,EAAE;YACpD,SAAS,EAAE,SAAS;SACrB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,OAAO;YAChB,UAAU,EAAE,QAAQ,CAAC,SAAS,CAAC;SAChC;KACF;IACD,yBAAyB,EAAE;QACzB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,OAAO;QACxB,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC;QAC1B,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;SAChB;QACD,KAAK,EAAE;YACL,UAAU,EAAE,aAAa;YACzB,KAAK,EAAE,MAAM;SACd;KACF;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,EAAE;KACX;CACF,CAAC,EAzCiD,CAyCjD,CAAC,CAAC;AAEJ,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,EAAyE;IAAvE,IAAA,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EAAE,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAK,KAAK,cAAhD,yBAAkD,CAAF;IAC3E,OAAO,CACL,oBAAC,kBAAkB,2BAAY,SAAS,EAAC,KAAK,EAAE,KAAK,IAAM,KAAK,EAAI,CACrE,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"RangerSlider.js","sourceRoot":"","sources":["../../../src/components/RangerSlider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C,IAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,SAAS,EAAE,OAAO,CAAC,SAAS;IAC5B,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,IAAI,EAAE,OAAO,CAAC,IAAI;IAClB,OAAO,EAAE,OAAO,CAAC,OAAO;CACzB,CAAC;AAEF,IAAM,kBAAkB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,cAAM,OAAA,CAAC;IAClD,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC1B,oBAAoB,EAAE;QACpB,MAAM,EAAE,MAAM;KACf;IACD,oBAAoB,EAAE;QACpB,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,oBAAa,QAAQ,CAAC,SAAS,CAAC,CAAE;QAC1C,oDAAoD,EAAE;YACpD,SAAS,EAAE,SAAS;SACrB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,OAAO;YAChB,UAAU,EAAE,QAAQ,CAAC,SAAS,CAAC;SAChC;KACF;IACD,yBAAyB,EAAE;QACzB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC;QAC1B,UAAU,EAAE;YACV,MAAM,EAAE,SAAS;YACjB,GAAG,EAAE,MAAM;SACZ;QACD,KAAK,EAAE;YACL,UAAU,EAAE,aAAa;YACzB,KAAK,EAAE,MAAM;SACd;KACF;IACD,mBAAmB,EAAE;QACnB,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,EAAE;KACX;CACF,CAAC,EA3CiD,CA2CjD,CAAC,CAAC;AAEJ,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,EAAyE;IAAvE,IAAA,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EAAE,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAK,KAAK,cAAhD,yBAAkD,CAAF;IAC3E,OAAO,oBAAC,kBAAkB,2BAAY,SAAS,EAAC,KAAK,EAAE,KAAK,IAAM,KAAK,EAAI,CAAC;AAC9E,CAAC,CAAC"}
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { OnAction } from '@/types';
3
+ interface ModalStatusProps {
4
+ title: string;
5
+ text: string;
6
+ type: 'success' | 'info' | 'warning';
7
+ actions: OnAction[];
8
+ }
9
+ export declare const ModalStatus: (props: ModalStatusProps) => React.JSX.Element;
10
+ export {};
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ import { WarningRounded, CheckCircleRounded, InfoRounded } from '@mui/icons-material';
3
+ import * as S from './StatusModal.style';
4
+ import { Button } from '../Button';
5
+ export var ModalStatus = function (props) {
6
+ var title = props.title, text = props.text, type = props.type, actions = props.actions;
7
+ var iconBgColor = {
8
+ warning: '#FFDB9F',
9
+ info: '#D9FCFE',
10
+ success: '#C9F5CB',
11
+ };
12
+ return (React.createElement(S.Container, null,
13
+ React.createElement(S.Modal, null,
14
+ React.createElement(S.ModalHeader, null,
15
+ React.createElement(S.ModalIcon, { "$bg": iconBgColor[type] },
16
+ type === 'warning' && React.createElement(WarningRounded, { sx: { fill: '#B74608' } }),
17
+ type === 'info' && React.createElement(InfoRounded, { sx: { fill: '#154F8C' } }),
18
+ type === 'success' && React.createElement(CheckCircleRounded, { sx: { fill: '#2E7D32' } })),
19
+ React.createElement(S.ModalTitle, null, title)),
20
+ React.createElement(S.ModalBody, null,
21
+ React.createElement(S.ModalText, null, text)),
22
+ React.createElement(S.ModalFooter, null, actions.map(function (action, key) {
23
+ return (React.createElement(Button, { key: key, color: action.color || 'primary', variant: action.variant || 'contained', disabled: action.disabled, onClick: action.action }, action.label));
24
+ })))));
25
+ };
26
+ //# sourceMappingURL=StatusModal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatusModal.js","sourceRoot":"","sources":["../../../../src/components/StatusModal/StatusModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEtF,OAAO,KAAK,CAAC,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAUnC,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAuB;IACzC,IAAA,KAAK,GAA0B,KAAK,MAA/B,EAAE,IAAI,GAAoB,KAAK,KAAzB,EAAE,IAAI,GAAc,KAAK,KAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAE7C,IAAM,WAAW,GAAG;QAClB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,SAAS;KACnB,CAAC;IAEF,OAAO,CACL,oBAAC,CAAC,CAAC,SAAS;QACV,oBAAC,CAAC,CAAC,KAAK;YACN,oBAAC,CAAC,CAAC,WAAW;gBACZ,oBAAC,CAAC,CAAC,SAAS,WAAM,WAAW,CAAC,IAAI,CAAC;oBAChC,IAAI,KAAK,SAAS,IAAI,oBAAC,cAAc,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAI;oBACjE,IAAI,KAAK,MAAM,IAAI,oBAAC,WAAW,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAI;oBAC3D,IAAI,KAAK,SAAS,IAAI,oBAAC,kBAAkB,IAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,GAAI,CAC1D;gBACd,oBAAC,CAAC,CAAC,UAAU,QAAE,KAAK,CAAgB,CACtB;YAChB,oBAAC,CAAC,CAAC,SAAS;gBACV,oBAAC,CAAC,CAAC,SAAS,QAAE,IAAI,CAAe,CACrB;YACd,oBAAC,CAAC,CAAC,WAAW,QACX,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,GAAG;gBACvB,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,SAAS,EAChC,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,WAAW,EACtC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,MAAM,CAAC,MAAM,IAErB,MAAM,CAAC,KAAK,CACN,CACV,CAAC;YACJ,CAAC,CAAC,CACY,CACR,CACE,CACf,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
3
+ export declare const Modal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
4
+ export declare const ModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
5
+ export declare const ModalIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
6
+ $bg: string;
7
+ }>> & string;
8
+ export declare const ModalTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
9
+ export declare const ModalBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
10
+ export declare const ModalText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
11
+ export declare const ModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -0,0 +1,12 @@
1
+ import { __makeTemplateObject } from "tslib";
2
+ import styled from 'styled-components';
3
+ export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(0, 0, 0, 0.6);\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n background: rgba(0, 0, 0, 0.6);\n"])));
4
+ export var Modal = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n width: 430px;\n padding: 24px;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n border-radius: 4px;\n background: #fff;\n"], ["\n display: flex;\n width: 430px;\n padding: 24px;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n border-radius: 4px;\n background: #fff;\n"])));
5
+ export var ModalHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n gap: 16px;\n align-self: stretch;\n align-items: center;\n"], ["\n display: flex;\n gap: 16px;\n align-self: stretch;\n align-items: center;\n"])));
6
+ export var ModalIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n padding: 4px;\n align-items: center;\n border-radius: 4px;\n background-color: ", ";\n"], ["\n display: flex;\n padding: 4px;\n align-items: center;\n border-radius: 4px;\n background-color: ", ";\n"])), function (props) { return props.$bg; });
7
+ export var ModalTitle = styled.h1(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: #1d1d1d;\n font-size: 24px;\n font-style: normal;\n font-weight: 500;\n letter-spacing: 0.25px;\n margin: 0;\n"], ["\n color: #1d1d1d;\n font-size: 24px;\n font-style: normal;\n font-weight: 500;\n letter-spacing: 0.25px;\n margin: 0;\n"])));
8
+ export var ModalBody = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n border-bottom: 2px solid #a3a3a3;\n margin-top: 16px;\n padding-bottom: 32px;\n"], ["\n display: flex;\n width: 100%;\n border-bottom: 2px solid #a3a3a3;\n margin-top: 16px;\n padding-bottom: 32px;\n"])));
9
+ export var ModalText = styled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: rgba(0, 0, 0, 0.87);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.17px;\n margin: 0;\n"], ["\n color: rgba(0, 0, 0, 0.87);\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.17px;\n margin: 0;\n"])));
10
+ export var ModalFooter = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n width: 100%;\n margin-top: 8px;\n gap: 8px;\n"], ["\n display: flex;\n justify-content: flex-end;\n width: 100%;\n margin-top: 8px;\n gap: 8px;\n"])));
11
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
12
+ //# sourceMappingURL=StatusModal.style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatusModal.style.js","sourceRoot":"","sources":["../../../../src/components/StatusModal/StatusModal.style.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,8PAAA,2LAUlC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,2PAAA,wLAS9B,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,uJAAA,oFAKpC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,oLAAiB,0GAK9B,EAAkB,KACvC,KADqB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,EAAT,CAAS,CACvC,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,EAAE,mMAAA,gIAOlC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,4LAAA,yHAMlC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,MAAM,CAAC,CAAC,+MAAA,4IAOhC,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,wKAAA,qGAMpC,IAAA,CAAC"}
@@ -27,4 +27,5 @@ import TextInput from './components/TextInput';
27
27
  import Table from './components/Table';
28
28
  import UncontrolledTable from './components/UncontrolledTable';
29
29
  import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
30
- export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs };
30
+ import { ModalStatus } from './components/StatusModal/StatusModal';
31
+ export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs, ModalStatus, };
package/dist/esm/index.js CHANGED
@@ -27,5 +27,6 @@ import TextInput from './components/TextInput';
27
27
  import Table from './components/Table';
28
28
  import UncontrolledTable from './components/UncontrolledTable';
29
29
  import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
30
- export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs };
30
+ import { ModalStatus } from './components/StatusModal/StatusModal';
31
+ export { Accordion, Button, Card, ChatMessage, ChatMessageBalloon, CheckBox, DatePicker, getPalette, IconButton, Icons, Modal, Paper, ProgressBar, RadioGroup, RangerSlider, Select, Tabs, Tag, TextField, NormaProvider, themes, DateInput, Box, Breadcrumb, SelectInput, MultiSelectInput, Text, Title, TextInput, Table, UncontrolledTable, UncontrolledTabs, ModalStatus, };
31
32
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,GAAG,MAAM,kBAAkB,CAAA;AAClC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,gBAAgB,MAAM,gDAAgD,CAAC;AAI9E,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,WAAW,EACX,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,GAAG,EACH,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EACjB,gBAAgB,EACjB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,GAAG,MAAM,kBAAkB,CAAC;AACnC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,gBAAgB,MAAM,gDAAgD,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,WAAW,EACX,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,GAAG,EACH,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,GACZ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "norma-library",
3
- "version": "0.5.141",
3
+ "version": "0.5.143",
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": {
@@ -17,6 +17,7 @@ const colorMap: Record<ColorVariant, string> = {
17
17
 
18
18
  const RangerSliderStyled = styled(MuiSlider)(() => ({
19
19
  height: 8,
20
+ color: colorMap['primary'],
20
21
  '& .MuiSlider-track': {
21
22
  border: 'none',
22
23
  },
@@ -39,16 +40,17 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
39
40
  '& .MuiSlider-valueLabel': {
40
41
  fontSize: 12,
41
42
  fontWeight: 'normal',
42
- top: 40,
43
+ top: 48,
43
44
  position: 'absolute',
44
- backgroundColor: 'unset',
45
+ transition: 'none',
45
46
  color: colorMap['primary'],
46
47
  '&:before': {
47
- display: 'none',
48
+ bottom: 'inherit',
49
+ top: '-8px',
48
50
  },
49
51
  '& *': {
50
52
  background: 'transparent',
51
- color: '#000',
53
+ color: '#FFF',
52
54
  },
53
55
  },
54
56
  '& .MuiSlider-rail': {
@@ -59,7 +61,5 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
59
61
  }));
60
62
 
61
63
  export const RangerSlider = ({ defaultValue = 50, color = 'primary', ...props }: RangerSliderBaseProps) => {
62
- return (
63
- <RangerSliderStyled aria-label="Default" color={color} {...props} />
64
- );
64
+ return <RangerSliderStyled aria-label="Default" color={color} {...props} />;
65
65
  };
@@ -0,0 +1,73 @@
1
+ import styled from 'styled-components';
2
+
3
+ export const Container = styled.div`
4
+ width: 100vw;
5
+ height: 100vh;
6
+ position: fixed;
7
+ top: 0;
8
+ left: 0;
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ background: rgba(0, 0, 0, 0.6);
13
+ `;
14
+
15
+ export const Modal = styled.div`
16
+ display: flex;
17
+ width: 430px;
18
+ padding: 24px;
19
+ flex-direction: column;
20
+ justify-content: center;
21
+ align-items: flex-start;
22
+ border-radius: 4px;
23
+ background: #fff;
24
+ `;
25
+
26
+ export const ModalHeader = styled.div`
27
+ display: flex;
28
+ gap: 16px;
29
+ align-self: stretch;
30
+ align-items: center;
31
+ `;
32
+
33
+ export const ModalIcon = styled.div<{ $bg: string }>`
34
+ display: flex;
35
+ padding: 4px;
36
+ align-items: center;
37
+ border-radius: 4px;
38
+ background-color: ${props => props.$bg};
39
+ `;
40
+
41
+ export const ModalTitle = styled.h1`
42
+ color: #1d1d1d;
43
+ font-size: 24px;
44
+ font-style: normal;
45
+ font-weight: 500;
46
+ letter-spacing: 0.25px;
47
+ margin: 0;
48
+ `;
49
+
50
+ export const ModalBody = styled.div`
51
+ display: flex;
52
+ width: 100%;
53
+ border-bottom: 2px solid #a3a3a3;
54
+ margin-top: 16px;
55
+ padding-bottom: 32px;
56
+ `;
57
+
58
+ export const ModalText = styled.p`
59
+ color: rgba(0, 0, 0, 0.87);
60
+ font-size: 16px;
61
+ font-style: normal;
62
+ font-weight: 400;
63
+ letter-spacing: 0.17px;
64
+ margin: 0;
65
+ `;
66
+
67
+ export const ModalFooter = styled.div`
68
+ display: flex;
69
+ justify-content: flex-end;
70
+ width: 100%;
71
+ margin-top: 8px;
72
+ gap: 8px;
73
+ `;
@@ -0,0 +1,57 @@
1
+ import React from 'react';
2
+
3
+ import { WarningRounded, CheckCircleRounded, InfoRounded } from '@mui/icons-material';
4
+
5
+ import * as S from './StatusModal.style';
6
+ import { Button } from '../Button';
7
+ import { OnAction } from '@/types';
8
+
9
+ interface ModalStatusProps {
10
+ title: string;
11
+ text: string;
12
+ type: 'success' | 'info' | 'warning';
13
+ actions: OnAction[];
14
+ }
15
+
16
+ export const ModalStatus = (props: ModalStatusProps) => {
17
+ const { title, text, type, actions } = props;
18
+
19
+ const iconBgColor = {
20
+ warning: '#FFDB9F',
21
+ info: '#D9FCFE',
22
+ success: '#C9F5CB',
23
+ };
24
+
25
+ return (
26
+ <S.Container>
27
+ <S.Modal>
28
+ <S.ModalHeader>
29
+ <S.ModalIcon $bg={iconBgColor[type]}>
30
+ {type === 'warning' && <WarningRounded sx={{ fill: '#B74608' }} />}
31
+ {type === 'info' && <InfoRounded sx={{ fill: '#154F8C' }} />}
32
+ {type === 'success' && <CheckCircleRounded sx={{ fill: '#2E7D32' }} />}
33
+ </S.ModalIcon>
34
+ <S.ModalTitle>{title}</S.ModalTitle>
35
+ </S.ModalHeader>
36
+ <S.ModalBody>
37
+ <S.ModalText>{text}</S.ModalText>
38
+ </S.ModalBody>
39
+ <S.ModalFooter>
40
+ {actions.map((action, key) => {
41
+ return (
42
+ <Button
43
+ key={key}
44
+ color={action.color || 'primary'}
45
+ variant={action.variant || 'contained'}
46
+ disabled={action.disabled}
47
+ onClick={action.action}
48
+ >
49
+ {action.label}
50
+ </Button>
51
+ );
52
+ })}
53
+ </S.ModalFooter>
54
+ </S.Modal>
55
+ </S.Container>
56
+ );
57
+ };
package/src/index.ts CHANGED
@@ -18,17 +18,16 @@ import { ChatMessage, ChatMessageBalloon } from './components';
18
18
  import { NormaProvider } from './providers/NormaProvider';
19
19
  import { themes, getPalette } from './helpers';
20
20
  import DateInput from './components/DateInput';
21
- import Box from './components/Box'
21
+ import Box from './components/Box';
22
22
  import Breadcrumb from './components/Breadcrumb';
23
23
  import SelectInput from './components/SelectInput';
24
24
  import MultiSelectInput from './components/MultiSelectInput';
25
- import { Title, Text } from './components/Typography'
25
+ import { Title, Text } from './components/Typography';
26
26
  import TextInput from './components/TextInput';
27
27
  import Table from './components/Table';
28
28
  import UncontrolledTable from './components/UncontrolledTable';
29
29
  import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
30
-
31
-
30
+ import { ModalStatus } from './components/StatusModal/StatusModal';
32
31
 
33
32
  export {
34
33
  Accordion,
@@ -62,5 +61,6 @@ export {
62
61
  TextInput,
63
62
  Table,
64
63
  UncontrolledTable,
65
- UncontrolledTabs
64
+ UncontrolledTabs,
65
+ ModalStatus,
66
66
  };
@@ -0,0 +1,46 @@
1
+ import React from 'react';
2
+
3
+ import type { Meta } from '@storybook/react';
4
+ import { ModalStatus } from '../components/StatusModal/StatusModal';
5
+ import { OnAction } from '../types';
6
+
7
+ const actions: OnAction[] = [
8
+ {
9
+ label: 'Cancelar',
10
+ action: () => {},
11
+ },
12
+ {
13
+ label: 'Entendi',
14
+ action: () => {},
15
+ },
16
+ ];
17
+
18
+ const meta = {
19
+ title: 'Layout/ModalStatus',
20
+ component: ModalStatus,
21
+ parameters: {
22
+ layout: 'centered',
23
+ },
24
+ tags: ['autodocs'],
25
+ argTypes: {},
26
+ } satisfies Meta<typeof ModalStatus>;
27
+
28
+ export default meta;
29
+
30
+ export const ModalSuccess = () => {
31
+ return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="success" />;
32
+ };
33
+
34
+ ModalSuccess.storyName = 'Modal Success';
35
+
36
+ export const ModalWarning = () => {
37
+ return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="warning" />;
38
+ };
39
+
40
+ ModalWarning.storyName = 'Modal Warning';
41
+
42
+ export const ModalInfo = () => {
43
+ return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." type="info" actions={actions} />;
44
+ };
45
+
46
+ ModalInfo.storyName = 'Modal Info';
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
3
  import { RangerSlider } from '../components';
4
4
  import { ColorVariant, TextFieldSizeVariant } from '../types';
5
+ import { TextField } from '@mui/material';
5
6
 
6
7
  const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
7
8
  const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
@@ -65,10 +66,6 @@ export default meta;
65
66
 
66
67
  type Story = StoryObj<typeof meta>;
67
68
 
68
- function valuetext(value: number) {
69
- return `${value}°C`;
70
- }
71
-
72
69
  export const RangerSliderBasic: Story = {
73
70
  args: {
74
71
  value: [20, 37],
@@ -80,21 +77,17 @@ export const RangerSliderBasic: Story = {
80
77
  control: { type: 'array' },
81
78
  },
82
79
  },
83
- render: (args) => {
80
+ render: args => {
84
81
  const [value, setValue] = React.useState<number[]>(args.value);
85
82
 
86
83
  const handleChange = (event: Event, newValue: number | number[]) => {
87
84
  setValue(newValue as number[]);
88
- args.onChange?.(event, newValue, 0);
85
+ args.onChange?.(event, newValue, 0);
89
86
  };
90
87
 
91
88
  return (
92
89
  <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
93
- <RangerSlider
94
- {...args}
95
- value={value}
96
- onChange={handleChange}
97
- />
90
+ <RangerSlider {...args} value={value} onChange={handleChange} />
98
91
  </div>
99
92
  );
100
93
  },
@@ -104,7 +97,7 @@ export const RangerSliderBasic: Story = {
104
97
  export const RangerSliderFormatter: Story = {
105
98
  args: {
106
99
  value: [0, 540],
107
- valueLabelDisplay: 'on',
100
+ valueLabelDisplay: 'auto',
108
101
  getAriaLabel: () => 'Faixa de tempo',
109
102
  valueLabelFormat: (value: number) => {
110
103
  if (value < 60) {
@@ -136,21 +129,19 @@ export const RangerSliderFormatter: Story = {
136
129
  control: { type: 'array' },
137
130
  },
138
131
  },
139
- render: (args) => {
132
+ render: args => {
140
133
  const [value, setValue] = React.useState<number[]>(args.value);
141
134
 
142
135
  const handleChange = (event: Event, newValue: number | number[]) => {
143
136
  setValue(newValue as number[]);
144
- args.onChange?.(event, newValue, 0);
137
+ args.onChange?.(event, newValue, 0);
145
138
  };
146
139
 
147
140
  return (
148
141
  <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
149
- <RangerSlider
150
- {...args}
151
- value={value}
152
- onChange={handleChange}
153
- />
142
+ {/* <TextField size="small" variant='standard' /> */}
143
+ <RangerSlider {...args} value={value} onChange={handleChange} />
144
+ {/* <TextField size="small" variant='standard' /> */}
154
145
  </div>
155
146
  );
156
147
  },