sag_components 1.0.4 → 1.0.6

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 (9) hide show
  1. package/dist/stories/SegmentedButton.stories.js +9 -9
  2. package/dist/stories/components/InfoIcon.js +34 -0
  3. package/dist/stories/components/OneColumnContainer.js +1 -1
  4. package/dist/stories/components/SegmentedButton.js +4 -6
  5. package/package.json +1 -1
  6. package/src/stories/SegmentedButton.stories.js +9 -9
  7. package/src/stories/components/OneColumnContainer.jsx +4 -3
  8. package/src/stories/components/SegmentedButton.jsx +6 -8
  9. /package/src/stories/{InfoIcon.jsx → components/InfoIcon.jsx} +0 -0
package/dist/stories/SegmentedButton.stories.js CHANGED
@@ -146,9 +146,9 @@ SegmentedFilter.args = {
146
146
  segmentWidth: 120,
147
147
  controlRadius: 8,
148
148
  segmentRadius: 8,
149
- segmentHeigth: 30,
150
- fontSize: 16,
151
- backgroundColor: "rgb(232, 237, 247)",
149
+ segmentHeigth: 40,
150
+ fontSize: 14,
151
+ backgroundColor: "#ECF0FF",
152
152
  selectedSegmentColor: '#fcfcfc',
153
153
  selectedTextColor: '#000000',
154
154
  unselectedTextColor: '#000000'
@@ -162,9 +162,9 @@ DollarsOrUnits.args = {
162
162
  segmentWidth: 100,
163
163
  controlRadius: 8,
164
164
  segmentRadius: 8,
165
- segmentHeigth: 30,
166
- fontSize: 16,
167
- backgroundColor: "rgb(232, 237, 247)",
165
+ segmentHeigth: 40,
166
+ fontSize: 14,
167
+ backgroundColor: "#ECF0FF",
168
168
  selectedSegmentColor: 'rgba(61, 154, 242, 0.83)',
169
169
  selectedTextColor: '#ffffff',
170
170
  unselectedTextColor: '#000000'
@@ -178,9 +178,9 @@ Period.args = {
178
178
  segmentWidth: 60,
179
179
  controlRadius: 8,
180
180
  segmentRadius: 8,
181
- segmentHeigth: 30,
182
- fontSize: 16,
183
- backgroundColor: "rgb(232, 237, 247)",
181
+ segmentHeigth: 41,
182
+ fontSize: 14,
183
+ backgroundColor: "#ECF0FF",
184
184
  selectedSegmentColor: 'rgba(61, 154, 242, 0.83)',
185
185
  selectedTextColor: '#ffffff',
186
186
  unselectedTextColor: '#000000'
package/dist/stories/components/InfoIcon.js ADDED
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.InfoIcon = void 0;
7
+ var InfoIcon = function InfoIcon(_ref) {
8
+ var clicked = _ref.clicked;
9
+ return /*#__PURE__*/React.createElement("svg", {
10
+ xmlns: "http://www.w3.org/2000/svg",
11
+ viewBox: "0 0 24 24",
12
+ fill: "none",
13
+ stroke: clicked ? "white" : "black",
14
+ strokeWidth: "2",
15
+ strokeLinecap: "round",
16
+ strokeLinejoin: "round",
17
+ className: "feather feather-info"
18
+ }, /*#__PURE__*/React.createElement("circle", {
19
+ cx: "12",
20
+ cy: "12",
21
+ r: "10"
22
+ }), /*#__PURE__*/React.createElement("line", {
23
+ x1: "12",
24
+ y1: "16",
25
+ x2: "12",
26
+ y2: "12"
27
+ }), /*#__PURE__*/React.createElement("line", {
28
+ x1: "12",
29
+ y1: "8",
30
+ x2: "12",
31
+ y2: "8"
32
+ }));
33
+ };
34
+ exports.InfoIcon = InfoIcon;
package/dist/stories/components/OneColumnContainer.js CHANGED
@@ -10,7 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _OneColumnContainer = require("../OneColumnContainer.style");
13
- var _InfoIcon = require("../InfoIcon");
13
+ var _InfoIcon = require("./InfoIcon");
14
14
  var _excluded = ["width", "height", "infoText"];
15
15
  /**
16
16
  * Primary UI component for user interaction
package/dist/stories/components/SegmentedButton.js CHANGED
@@ -18,15 +18,15 @@ var SegmentedButton = function SegmentedButton(_ref) {
18
18
  _ref$segmentWidth = _ref.segmentWidth,
19
19
  segmentWidth = _ref$segmentWidth === void 0 ? 120 : _ref$segmentWidth,
20
20
  _ref$segmentHeigth = _ref.segmentHeigth,
21
- segmentHeigth = _ref$segmentHeigth === void 0 ? 40 : _ref$segmentHeigth,
21
+ segmentHeigth = _ref$segmentHeigth === void 0 ? 41 : _ref$segmentHeigth,
22
22
  _ref$controlRadius = _ref.controlRadius,
23
23
  controlRadius = _ref$controlRadius === void 0 ? 8 : _ref$controlRadius,
24
24
  _ref$segmentRadius = _ref.segmentRadius,
25
25
  segmentRadius = _ref$segmentRadius === void 0 ? 8 : _ref$segmentRadius,
26
26
  _ref$fontSize = _ref.fontSize,
27
- fontSize = _ref$fontSize === void 0 ? 16 : _ref$fontSize,
27
+ fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
28
28
  _ref$backgroundColor = _ref.backgroundColor,
29
- backgroundColor = _ref$backgroundColor === void 0 ? "rgb(232, 237, 247)" : _ref$backgroundColor,
29
+ backgroundColor = _ref$backgroundColor === void 0 ? "#ECF0FF" : _ref$backgroundColor,
30
30
  _ref$selectedSegmentC = _ref.selectedSegmentColor,
31
31
  selectedSegmentColor = _ref$selectedSegmentC === void 0 ? "#3a9df9" : _ref$selectedSegmentC,
32
32
  _ref$selectedTextColo = _ref.selectedTextColor,
@@ -83,7 +83,6 @@ var SegmentedButton = function SegmentedButton(_ref) {
83
83
  selectedSegmentColor: selectedSegmentColor,
84
84
  segmentRadius: segmentRadius,
85
85
  controlRadius: controlRadius,
86
- segmentHeigth: segmentHeigth / 4,
87
86
  segmentWidth: segmentWidth,
88
87
  className: "controls ".concat(componentReady.current ? "ready" : "idle")
89
88
  }, optionsRef === null || optionsRef === void 0 ? void 0 : optionsRef.map(function (item, i) {
@@ -93,7 +92,6 @@ var SegmentedButton = function SegmentedButton(_ref) {
93
92
  selectedSegmentColor: selectedSegmentColor,
94
93
  segmentRadius: segmentRadius,
95
94
  controlRadius: controlRadius,
96
- segmentHeigth: segmentHeigth / 4,
97
95
  segmentWidth: segmentWidth,
98
96
  className: "".concat(activeIndex === i ? "active" : "inactive"),
99
97
  ref: item.ref
@@ -109,7 +107,7 @@ var SegmentedButton = function SegmentedButton(_ref) {
109
107
  }), /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.SegmentLabel, {
110
108
  selectedTextColor: selectedTextColor,
111
109
  unselectedTextColor: unselectedTextColor,
112
- segmentHeigth: segmentHeigth / 4,
110
+ segmentHeigth: segmentHeigth / 5,
113
111
  className: "".concat(activeIndex === i ? "active" : "inactive", " "),
114
112
  htmlFor: item.value
115
113
  }, item.value));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/stories/SegmentedButton.stories.js CHANGED
@@ -156,9 +156,9 @@ SegmentedFilter.args = {
156
156
  segmentWidth: 120,
157
157
  controlRadius: 8,
158
158
  segmentRadius: 8,
159
- segmentHeigth: 30,
160
- fontSize: 16,
161
- backgroundColor: "rgb(232, 237, 247)",
159
+ segmentHeigth: 40,
160
+ fontSize: 14,
161
+ backgroundColor: "#ECF0FF",
162
162
  selectedSegmentColor: '#fcfcfc',
163
163
  selectedTextColor: '#000000',
164
164
  unselectedTextColor: '#000000',
@@ -176,9 +176,9 @@ DollarsOrUnits.args = {
176
176
  segmentWidth: 100,
177
177
  controlRadius: 8,
178
178
  segmentRadius: 8,
179
- segmentHeigth: 30,
180
- fontSize: 16,
181
- backgroundColor: "rgb(232, 237, 247)",
179
+ segmentHeigth: 40,
180
+ fontSize: 14,
181
+ backgroundColor: "#ECF0FF",
182
182
  selectedSegmentColor: 'rgba(61, 154, 242, 0.83)',
183
183
  selectedTextColor: '#ffffff',
184
184
  unselectedTextColor: '#000000',
@@ -195,9 +195,9 @@ Period.args = {
195
195
  segmentWidth: 60,
196
196
  controlRadius: 8,
197
197
  segmentRadius: 8,
198
- segmentHeigth: 30,
199
- fontSize: 16,
200
- backgroundColor: "rgb(232, 237, 247)",
198
+ segmentHeigth: 41,
199
+ fontSize: 14,
200
+ backgroundColor: "#ECF0FF",
201
201
  selectedSegmentColor: 'rgba(61, 154, 242, 0.83)',
202
202
  selectedTextColor: '#ffffff',
203
203
  unselectedTextColor: '#000000',
package/src/stories/components/OneColumnContainer.jsx CHANGED
@@ -1,6 +1,7 @@
1
- import React,{useState} from 'react';
2
- import { InfoTextLabel,InfoTextContainer,IconContainer, StyledContainer } from '../OneColumnContainer.style'
3
- import { InfoIcon } from "../InfoIcon";
1
+ import React from 'react';
2
+ import { useState } from "react";
3
+ import { InfoTextLabel,InfoTextContainer,IconContainer, StyledContainer } from '../OneColumnContainer.style';
4
+ import { InfoIcon } from "./InfoIcon";
4
5
 
5
6
  /**
6
7
  * Primary UI component for user interaction
package/src/stories/components/SegmentedButton.jsx CHANGED
@@ -13,11 +13,11 @@ export const SegmentedButton = ({
13
13
  name,
14
14
  options,
15
15
  segmentWidth = 120,
16
- segmentHeigth = 40,
16
+ segmentHeigth = 41,
17
17
  controlRadius = 8,
18
18
  segmentRadius = 8,
19
- fontSize = 16,
20
- backgroundColor = "rgb(232, 237, 247)",
19
+ fontSize = 14,
20
+ backgroundColor = "#ECF0FF",
21
21
  selectedSegmentColor = "#3a9df9",
22
22
  selectedTextColor = "white",
23
23
  unselectedTextColor = "black",
@@ -67,8 +67,7 @@ export const SegmentedButton = ({
67
67
  backgroundColor={backgroundColor}
68
68
  selectedSegmentColor={selectedSegmentColor}
69
69
  segmentRadius={segmentRadius}
70
- controlRadius={controlRadius}
71
- segmentHeigth={segmentHeigth/4}
70
+ controlRadius={controlRadius}
72
71
  segmentWidth={segmentWidth}
73
72
  className={`controls ${componentReady.current ? "ready" : "idle"}`}
74
73
  >
@@ -78,8 +77,7 @@ export const SegmentedButton = ({
78
77
  backgroundColor={backgroundColor}
79
78
  selectedSegmentColor={selectedSegmentColor}
80
79
  segmentRadius={segmentRadius}
81
- controlRadius={controlRadius}
82
- segmentHeigth={segmentHeigth/4}
80
+ controlRadius={controlRadius}
83
81
  segmentWidth={segmentWidth}
84
82
  className={`${activeIndex === i ? "active" : "inactive"}`}
85
83
  ref={item.ref}
@@ -95,7 +93,7 @@ export const SegmentedButton = ({
95
93
  <SegmentLabel
96
94
  selectedTextColor={selectedTextColor}
97
95
  unselectedTextColor={unselectedTextColor}
98
- segmentHeigth={segmentHeigth/4}
96
+ segmentHeigth={segmentHeigth/5}
99
97
  className={`${activeIndex === i ? "active" : "inactive"} `}
100
98
  htmlFor={item.value}
101
99
  >