sag_components 1.0.285 → 1.0.287
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/.history/package_20231101154501.json +82 -0
- package/.history/package_20231101155811.json +82 -0
- package/dist/stories/components/SegmentedButton.js +2 -5
- package/dist/stories/components/SegmentedButton.style.js +3 -7
- package/dist/stories/components/TotalBenchmarkBarchart.style.js +3 -2
- package/package.json +1 -1
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sag_components",
|
|
3
|
+
"version": "1.0.286",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "react-scripts start",
|
|
8
|
+
"lint": "eslint .",
|
|
9
|
+
"build": "cross-env BABEL_ENV=production babel src -d dist ",
|
|
10
|
+
"storybook": "storybook dev -p 6006",
|
|
11
|
+
"build-storybook": "storybook build"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [],
|
|
14
|
+
"author": "SAG",
|
|
15
|
+
"license": "ISC",
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@babel/cli": "^7.23.0",
|
|
18
|
+
"@babel/preset-env": "^7.23.2",
|
|
19
|
+
"@babel/preset-react": "^7.22.15",
|
|
20
|
+
"@babel/preset-typescript": "^7.23.2",
|
|
21
|
+
"@storybook/addon-a11y": "^7.4.6",
|
|
22
|
+
"@storybook/addon-essentials": "^7.4.6",
|
|
23
|
+
"@storybook/addon-interactions": "^7.4.6",
|
|
24
|
+
"@storybook/addon-links": "^7.4.6",
|
|
25
|
+
"@storybook/addon-storysource": "^7.4.6",
|
|
26
|
+
"@storybook/blocks": "^7.4.6",
|
|
27
|
+
"@storybook/preset-scss": "^1.0.3",
|
|
28
|
+
"@storybook/react": "^7.4.6",
|
|
29
|
+
"@storybook/react-webpack5": "^7.4.6",
|
|
30
|
+
"@storybook/testing-library": "^0.2.2",
|
|
31
|
+
"cross-env": "^7.0.3",
|
|
32
|
+
"css-loader": "^6.8.1",
|
|
33
|
+
"eslint": "^8.52.0",
|
|
34
|
+
"eslint-config-airbnb": "^19.0.4",
|
|
35
|
+
"eslint-plugin-import": "^2.29.0",
|
|
36
|
+
"eslint-plugin-jsx-a11y": "^6.7.1",
|
|
37
|
+
"eslint-plugin-react": "^7.33.2",
|
|
38
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
39
|
+
"react-dom": "^18.2.0",
|
|
40
|
+
"sass": "^1.69.5",
|
|
41
|
+
"sass-loader": "^13.3.2",
|
|
42
|
+
"style-loader": "^3.3.3"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@dnd-kit/core": "^6.0.8",
|
|
46
|
+
"@emotion/react": "^11.11.1",
|
|
47
|
+
"@emotion/styled": "^11.11.0",
|
|
48
|
+
"@fontsource/roboto": "^5.0.8",
|
|
49
|
+
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
|
50
|
+
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
|
51
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
52
|
+
"@mui/icons-material": "^5.14.16",
|
|
53
|
+
"@mui/material": "^5.14.16",
|
|
54
|
+
"@mui/styled-engine-sc": "^5.14.12",
|
|
55
|
+
"@mui/x-date-pickers": "^6.17.0",
|
|
56
|
+
"@storybook/addon-designs": "^7.0.5",
|
|
57
|
+
"babel-plugin-react-css-modules": "^5.2.6",
|
|
58
|
+
"classnames": "^2.3.2",
|
|
59
|
+
"dayjs": "^1.11.10",
|
|
60
|
+
"hoopy": "^0.1.4",
|
|
61
|
+
"prop-types": "^15.8.1",
|
|
62
|
+
"react": "^18.2.0",
|
|
63
|
+
"react-css-modules": "^4.7.11",
|
|
64
|
+
"react-loading-skeleton": "^3.3.1",
|
|
65
|
+
"react-scripts": "5.0.1",
|
|
66
|
+
"recharts": "^2.6.2",
|
|
67
|
+
"storybook": "^7.4.6",
|
|
68
|
+
"styled-components": "^6.1.0"
|
|
69
|
+
},
|
|
70
|
+
"browserslist": {
|
|
71
|
+
"production": [
|
|
72
|
+
">0.2%",
|
|
73
|
+
"not dead",
|
|
74
|
+
"not op_mini all"
|
|
75
|
+
],
|
|
76
|
+
"development": [
|
|
77
|
+
"last 1 chrome version",
|
|
78
|
+
"last 1 firefox version",
|
|
79
|
+
"last 1 safari version"
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sag_components",
|
|
3
|
+
"version": "1.0.287",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "react-scripts start",
|
|
8
|
+
"lint": "eslint .",
|
|
9
|
+
"build": "cross-env BABEL_ENV=production babel src -d dist ",
|
|
10
|
+
"storybook": "storybook dev -p 6006",
|
|
11
|
+
"build-storybook": "storybook build"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [],
|
|
14
|
+
"author": "SAG",
|
|
15
|
+
"license": "ISC",
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@babel/cli": "^7.23.0",
|
|
18
|
+
"@babel/preset-env": "^7.23.2",
|
|
19
|
+
"@babel/preset-react": "^7.22.15",
|
|
20
|
+
"@babel/preset-typescript": "^7.23.2",
|
|
21
|
+
"@storybook/addon-a11y": "^7.4.6",
|
|
22
|
+
"@storybook/addon-essentials": "^7.4.6",
|
|
23
|
+
"@storybook/addon-interactions": "^7.4.6",
|
|
24
|
+
"@storybook/addon-links": "^7.4.6",
|
|
25
|
+
"@storybook/addon-storysource": "^7.4.6",
|
|
26
|
+
"@storybook/blocks": "^7.4.6",
|
|
27
|
+
"@storybook/preset-scss": "^1.0.3",
|
|
28
|
+
"@storybook/react": "^7.4.6",
|
|
29
|
+
"@storybook/react-webpack5": "^7.4.6",
|
|
30
|
+
"@storybook/testing-library": "^0.2.2",
|
|
31
|
+
"cross-env": "^7.0.3",
|
|
32
|
+
"css-loader": "^6.8.1",
|
|
33
|
+
"eslint": "^8.52.0",
|
|
34
|
+
"eslint-config-airbnb": "^19.0.4",
|
|
35
|
+
"eslint-plugin-import": "^2.29.0",
|
|
36
|
+
"eslint-plugin-jsx-a11y": "^6.7.1",
|
|
37
|
+
"eslint-plugin-react": "^7.33.2",
|
|
38
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
39
|
+
"react-dom": "^18.2.0",
|
|
40
|
+
"sass": "^1.69.5",
|
|
41
|
+
"sass-loader": "^13.3.2",
|
|
42
|
+
"style-loader": "^3.3.3"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@dnd-kit/core": "^6.0.8",
|
|
46
|
+
"@emotion/react": "^11.11.1",
|
|
47
|
+
"@emotion/styled": "^11.11.0",
|
|
48
|
+
"@fontsource/roboto": "^5.0.8",
|
|
49
|
+
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
|
50
|
+
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
|
51
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
52
|
+
"@mui/icons-material": "^5.14.16",
|
|
53
|
+
"@mui/material": "^5.14.16",
|
|
54
|
+
"@mui/styled-engine-sc": "^5.14.12",
|
|
55
|
+
"@mui/x-date-pickers": "^6.17.0",
|
|
56
|
+
"@storybook/addon-designs": "^7.0.5",
|
|
57
|
+
"babel-plugin-react-css-modules": "^5.2.6",
|
|
58
|
+
"classnames": "^2.3.2",
|
|
59
|
+
"dayjs": "^1.11.10",
|
|
60
|
+
"hoopy": "^0.1.4",
|
|
61
|
+
"prop-types": "^15.8.1",
|
|
62
|
+
"react": "^18.2.0",
|
|
63
|
+
"react-css-modules": "^4.7.11",
|
|
64
|
+
"react-loading-skeleton": "^3.3.1",
|
|
65
|
+
"react-scripts": "5.0.1",
|
|
66
|
+
"recharts": "^2.6.2",
|
|
67
|
+
"storybook": "^7.4.6",
|
|
68
|
+
"styled-components": "^6.1.0"
|
|
69
|
+
},
|
|
70
|
+
"browserslist": {
|
|
71
|
+
"production": [
|
|
72
|
+
">0.2%",
|
|
73
|
+
"not dead",
|
|
74
|
+
"not op_mini all"
|
|
75
|
+
],
|
|
76
|
+
"development": [
|
|
77
|
+
"last 1 chrome version",
|
|
78
|
+
"last 1 firefox version",
|
|
79
|
+
"last 1 safari version"
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
|
|
|
11
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _SegmentedButton = require("./SegmentedButton.style");
|
|
14
|
-
var _excluded = ["name", "options", "width", "height", "controlradius", "segmentradius", "fontSize", "
|
|
14
|
+
var _excluded = ["name", "options", "width", "height", "controlradius", "segmentradius", "fontSize", "selectedsegmentcolor", "selectedtextcolor", "unselectedtextcolor", "defaultIndex", "onClick"];
|
|
15
15
|
/* eslint-disable react/require-default-props */
|
|
16
16
|
/* SegmentedButton */
|
|
17
17
|
var SegmentedButton = exports.SegmentedButton = function SegmentedButton(_ref) {
|
|
@@ -27,12 +27,10 @@ var SegmentedButton = exports.SegmentedButton = function SegmentedButton(_ref) {
|
|
|
27
27
|
segmentradius = _ref$segmentradius === void 0 ? 8 : _ref$segmentradius,
|
|
28
28
|
_ref$fontSize = _ref.fontSize,
|
|
29
29
|
fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
|
|
30
|
-
_ref$backgroundcolor = _ref.backgroundcolor,
|
|
31
|
-
backgroundcolor = _ref$backgroundcolor === void 0 ? '#ECF0FF' : _ref$backgroundcolor,
|
|
32
30
|
_ref$selectedsegmentc = _ref.selectedsegmentcolor,
|
|
33
31
|
selectedsegmentcolor = _ref$selectedsegmentc === void 0 ? '#3a9df9' : _ref$selectedsegmentc,
|
|
34
32
|
_ref$selectedtextcolo = _ref.selectedtextcolor,
|
|
35
|
-
selectedtextcolor = _ref$selectedtextcolo === void 0 ? '
|
|
33
|
+
selectedtextcolor = _ref$selectedtextcolo === void 0 ? '#212121' : _ref$selectedtextcolo,
|
|
36
34
|
_ref$unselectedtextco = _ref.unselectedtextcolor,
|
|
37
35
|
unselectedtextcolor = _ref$unselectedtextco === void 0 ? 'black' : _ref$unselectedtextco,
|
|
38
36
|
_ref$defaultIndex = _ref.defaultIndex,
|
|
@@ -95,7 +93,6 @@ var SegmentedButton = exports.SegmentedButton = function SegmentedButton(_ref) {
|
|
|
95
93
|
return /*#__PURE__*/_react.default.createElement(_SegmentedButton.Segment, {
|
|
96
94
|
id: "Segment",
|
|
97
95
|
key: item.id,
|
|
98
|
-
backgroundcolor: backgroundcolor,
|
|
99
96
|
selectedsegmentcolor: selectedsegmentcolor,
|
|
100
97
|
controlradius: controlradius,
|
|
101
98
|
segmentwidth: segmentwidth,
|
|
@@ -9,16 +9,12 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
11
11
|
var SegmentedButtonGroup = exports.SegmentedButtonGroup = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 28px;\n @media (max-width: 1536px) {\n gap: 20px;\n }\n @media (max-width: 1366px) {\n gap: 17px;\n }\n"])));
|
|
12
|
-
var ButtonsControlsContainer = exports.ButtonsControlsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n font: ", "; \n margin: 0;\n --highlight-width: auto;\n --highlight-x-pos: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n
|
|
12
|
+
var ButtonsControlsContainer = exports.ButtonsControlsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n font: ", "; \n margin: 0;\n --highlight-width: auto;\n --highlight-x-pos: 0;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n float: left;\n\n &:not(:first-of-type) {\n padding-left: 40px;\n @media (max-width: 1536px) {\n padding-left: 35px;\n }\n @media (max-width: 1366px) {\n padding-left: 24px;\n }\n }\n"])), function (props) {
|
|
13
13
|
var _props$fontSize;
|
|
14
14
|
return (_props$fontSize = props.fontSize) === null || _props$fontSize === void 0 ? void 0 : _props$fontSize.toString().concat('', 'px Poppins, sans-serif');
|
|
15
15
|
});
|
|
16
|
-
var Controls = exports.Controls = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n justify-content: space-between; \n background:
|
|
17
|
-
return props.backgroundcolor;
|
|
18
|
-
}, function (props) {
|
|
16
|
+
var Controls = exports.Controls = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n justify-content: space-between; \n background: #f2f2f2;\n border-radius: ", "; //12px\n // max-width: 500px; //use this to limit max lenght of the control \n padding: 6px;\n overflow: hidden;\n position: relative;\n &.controls::before {\n content: \"\";\n color: #212121;\n background: #FFFFFF;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n border-radius: ", "; //12px\n width: var(--highlight-width);\n transform: translateX(var(--highlight-x-pos));\n position: absolute;\n top: 3px;\n bottom: 3px;\n left: 0; \n z-index: 0;\n }\n &.controls.ready::before {\n transition: transform 0.3s ease, width 0.3s ease;\n }\n"])), function (props) {
|
|
19
17
|
return props.controlradius.toString().concat('', 'px');
|
|
20
|
-
}, function (props) {
|
|
21
|
-
return props.selectedsegmentcolor;
|
|
22
18
|
}, function (props) {
|
|
23
19
|
return props.segmentradius.toString().concat('', 'px');
|
|
24
20
|
});
|
|
@@ -26,7 +22,7 @@ var ControlsInput = exports.ControlsInput = _styledComponents.default.input(_tem
|
|
|
26
22
|
var Segment = exports.Segment = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n /* width: 100%; uncomment for each segment to have matching width */ \n min-width: ", "; //120px;\n position: relative;\n text-align: center;\n z-index: 1; \n"])), function (props) {
|
|
27
23
|
return props.segmentwidth.toString().concat('', 'px');
|
|
28
24
|
});
|
|
29
|
-
var SegmentLabel = exports.SegmentLabel = _styledComponents.default.label(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n cursor: pointer;\n display: block;\n transition: color 0.5s ease;\n &.active {\n color: ", ";\n }\n &.inactive {\n color: ", ";\n }\n"])), function (props) {
|
|
25
|
+
var SegmentLabel = exports.SegmentLabel = _styledComponents.default.label(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n cursor: pointer;\n display: block;\n padding: 0 6px;\n transition: color 0.5s ease;\n &.active {\n color: ", ";\n }\n &.inactive {\n color: ", ";\n }\n"])), function (props) {
|
|
30
26
|
return props.selectedtextcolor;
|
|
31
27
|
}, function (props) {
|
|
32
28
|
return props.unselectedtextcolor;
|
|
@@ -8,6 +8,7 @@ exports.ValueAndBenchmarkContainer = exports.TitleAndValueContainer = exports.Ti
|
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
11
|
+
var scrollableStyles = "\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n border-radius: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #D0D0D0;\n border-radius: 5px;\n }\n";
|
|
11
12
|
var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: #ffffff;\n"])), function (props) {
|
|
12
13
|
return props.textColor;
|
|
13
14
|
}, function (props) {
|
|
@@ -15,9 +16,9 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
|
|
|
15
16
|
}, function (props) {
|
|
16
17
|
return props.height;
|
|
17
18
|
});
|
|
18
|
-
var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n background: #ffffff; \n justify-content: space-between;\n flex-direction: column;\n flex-basis: 100%;\n
|
|
19
|
+
var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n background: #ffffff; \n justify-content: space-between;\n flex-direction: column;\n flex-basis: 100%;\n overflow-y: auto;\n ", "\n"])), scrollableStyles);
|
|
19
20
|
var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0px;\n"])));
|
|
20
|
-
var Title = exports.Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem; \n
|
|
21
|
+
var Title = exports.Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem; \n"])));
|
|
21
22
|
var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: baseline; \n\n"])));
|
|
22
23
|
var CurrencySign = exports.CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n font-weight: 500;\n font-size: 1rem;\n"])));
|
|
23
24
|
var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 2.22222rem;\n"])));
|