sag_components 1.0.285 → 1.0.286

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/.history/package_20231101154501.json +82 -0
  2. package/dist/stories/components/SegmentedButton.js +2 -5
  3. package/dist/stories/components/SegmentedButton.style.js +3 -7
  4. package/package.json +1 -1
package/.history/package_20231101154501.json ADDED
@@ -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
+ }
package/dist/stories/components/SegmentedButton.js CHANGED
@@ -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", "backgroundcolor", "selectedsegmentcolor", "selectedtextcolor", "unselectedtextcolor", "defaultIndex", "onClick"];
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 ? 'white' : _ref$selectedtextcolo,
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,
package/dist/stories/components/SegmentedButton.style.js CHANGED
@@ -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 padding-left: 40px;\n margin-bottom: 20px;\n float: left;\n @media (max-width: 1536px) {\n padding-left: 35px;\n }\n @media (max-width: 1366px) {\n padding-left: 24px;\n }\n"])), function (props) {
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: ", ";\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 background: ", "; /* #3a9df9; #5465ff;*/\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) {
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.285",
3
+ "version": "1.0.286",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {