impact-ui 0.1.13 → 0.1.14
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/README.md +6 -6
- package/dist/index.js +32 -19
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +25 -13
- package/dist/index.modern.js.map +1 -1
- package/package.json +20 -5
- package/dist/index.css +0 -9
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
# impact-ui
|
|
1
|
+
# impact-ui
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Impact analytics UI library
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/impact-ui) [](https://standardjs.com)
|
|
6
6
|
|
|
7
7
|
## Install
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm install --save impact-ui
|
|
10
|
+
npm install --save impact-ui
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
@@ -15,8 +15,8 @@ npm install --save impact-ui-poc
|
|
|
15
15
|
```jsx
|
|
16
16
|
import React, { Component } from 'react'
|
|
17
17
|
|
|
18
|
-
import MyComponent from 'impact-ui
|
|
19
|
-
import 'impact-ui
|
|
18
|
+
import MyComponent from 'impact-ui'
|
|
19
|
+
import 'impact-ui/dist/index.css'
|
|
20
20
|
|
|
21
21
|
class Example extends Component {
|
|
22
22
|
render() {
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
2
2
|
|
|
3
|
-
var styled =
|
|
3
|
+
var styled = require('styled-components');
|
|
4
|
+
var styled__default = _interopDefault(styled);
|
|
4
5
|
|
|
5
6
|
function _taggedTemplateLiteralLoose(strings, raw) {
|
|
6
7
|
if (!raw) {
|
|
@@ -10,25 +11,37 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
10
11
|
return strings;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var StyledDisabledButton = styled(StyledButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n background: #AFAFAF;\n cursor: default;\n"])));
|
|
19
|
-
var StyledURLButton = styled(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n background: #fff;\n color: #0055AF;\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n &:hover{\n color: #033162;\n }\n"])));
|
|
20
|
-
var StyledDisabledURLButton = styled(StyledButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n background: #fff;\n color: #afafaf;\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n cursor: default;\n"])));
|
|
14
|
+
var PrimaryBlueColor = "#0055AF";
|
|
15
|
+
var SecondaryBlueColor = "#033162";
|
|
16
|
+
var DefaultColorButton = "#ACACAC";
|
|
17
|
+
var LightBgColorButton = "#E5EDF7";
|
|
18
|
+
var WhiteColor = "#ffffff";
|
|
21
19
|
|
|
22
|
-
var _templateObject
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
|
|
20
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
21
|
+
var StyledButton = styled__default.button(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n background: #1d1d1d;\n color: ", ";\n border: none;\n cursor: pointer;\n border-radius: 3px;\n box-sizing: border-box;\n padding: 8px 20px;\n font-size: 14px;\n transition: all 300ms ease-in-out 0s;\n line-height: 21px;\n\n ", "\n"])), WhiteColor, function (props) {
|
|
22
|
+
return props.smallBtn && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: 4px 12px;\n line-height: 18px;\n font-size: 12px;\n "])));
|
|
23
|
+
});
|
|
24
|
+
var StyledPrimaryButton = styled__default(StyledButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n background: ", ";\n &:hover {\n background: ", ";\n }\n"])), PrimaryBlueColor, SecondaryBlueColor);
|
|
25
|
+
var StyledSecondaryDiasabledButton = styled__default(StyledButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: default;\n"])), WhiteColor, DefaultColorButton, DefaultColorButton);
|
|
26
|
+
var StyledSecondaryButton = styled__default(StyledButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n &:hover {\n border: 1px solid ", ";\n color: ", ";\n background: ", ";\n }\n"])), WhiteColor, PrimaryBlueColor, PrimaryBlueColor, SecondaryBlueColor, SecondaryBlueColor, LightBgColorButton);
|
|
27
|
+
var StyledDisabledButton = styled__default(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n background: ", ";\n cursor: default;\n"])), DefaultColorButton);
|
|
28
|
+
var StyledURLButton = styled__default(StyledButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n &:hover {\n color: ", ";\n }\n\n ", "\n"])), WhiteColor, PrimaryBlueColor, SecondaryBlueColor, function (props) {
|
|
29
|
+
return props.smallUrl && styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n line-height: 18px;\n "])));
|
|
30
|
+
});
|
|
31
|
+
var StyledDisabledURLButton = styled__default(StyledButton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n cursor: default;\n ", "\n"])), WhiteColor, DefaultColorButton, function (props) {
|
|
32
|
+
return props.smallUrl && styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n line-height: 18px;\n "])));
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1;
|
|
36
|
+
var StyledInputBoxContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
37
|
+
var StyledInputLabelContainer = styled__default.label(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n color: #758490;\n margin-bottom: 5px;\n text-align: left;\n"])));
|
|
38
|
+
var StyledInputBox = styled__default.input(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n border: 1px solid #ACACAC;\n\n border-radius: 3px;\n padding: 0px 15px;\n box-sizing: border-box;\n height: 35px;\n font-size: 14px;\n color: #1d1d1d;\n &:focus{\n border: 1px solid #0055AF;\n }\n"])));
|
|
39
|
+
var StyledInputBoxError = styled__default(StyledInputBox)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n border: 1px solid #DA1E28;\n &:focus{\n border: 1px solid #DA1E28;\n }\n"])));
|
|
40
|
+
var StyledInputBoxSuccess = styled__default(StyledInputBox)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n border: 1px solid #24A148;\n &:focus{\n border: 1px solid #24A148;\n }\n"])));
|
|
41
|
+
var StyledInputBoxDisabled = styled__default(StyledInputBox)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n background: #EFEFEF;\n border: none;\n cursor: no-drop;\n pointer-events: none;\n &:focus{\n border: none;\n }\n"])));
|
|
42
|
+
var StyledHelperText = styled__default.span(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n color: #758498;\n font-size: 12px;\n text-align: left;\n margin-top: 2px;\n position: absolute;\n bottom: -15px;\n left: 15px;\n font-style: italic;\n"])));
|
|
43
|
+
var StyledErrorText = styled__default(StyledHelperText)(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n color: #DA1E28;\n font-style: normal;\n"])));
|
|
44
|
+
var StyledSuccessText = styled__default(StyledHelperText)(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n color: #24A148;\n font-style: normal;\n"])));
|
|
32
45
|
|
|
33
46
|
exports.StyledButton = StyledButton;
|
|
34
47
|
exports.StyledDisabledButton = StyledDisabledButton;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/components/global-components/button/button-style.js","../src/components/global-components/inputbox/inputbox-style.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/color.js","../src/components/global-components/button/button-style.js","../src/components/global-components/inputbox/inputbox-style.js"],"sourcesContent":["export const PrimaryBlueColor = \"#0055AF\";\nexport const SecondaryBlueColor = \"#033162\";\nexport const DefaultColorButton = \"#ACACAC\";\nexport const LightBgColorButton = \"#E5EDF7\";\nexport const CheckBoxBorder = \"#394960\";\nexport const AlertGreenSuccessStroke = \"#24A148\";\nexport const AlertGreenSucessBackground = \"#E8F5EC\";\nexport const AlertRedErrorStroke = \"#DA1E28\";\nexport const AlertRedErrorBackground = \"#FCE9EA\";\nexport const DefaultButtonText = \"#AFAFAF\";\nexport const AlertOrangeWarningStroke = \"#DA1E28\";\nexport const AlertOrangeWarningBackground = \"#FCE9EA\";\nexport const AlertBlueInfoStroke = \"#0055AF\";\nexport const WhiteColor = \"#ffffff\";\n","import styled, { css } from \"styled-components\";\nimport {\n PrimaryBlueColor,\n SecondaryBlueColor,\n WhiteColor,\n LightBgColorButton,\n DefaultColorButton,\n} from \"../../color\";\n\nexport const StyledButton = styled.button`\n background: #1d1d1d;\n color: ${WhiteColor};\n border: none;\n cursor: pointer;\n border-radius: 3px;\n box-sizing: border-box;\n padding: 8px 20px;\n font-size: 14px;\n transition: all 300ms ease-in-out 0s;\n line-height: 21px;\n\n ${(props) =>\n props.smallBtn &&\n css`\n padding: 4px 12px;\n line-height: 18px;\n font-size: 12px;\n `}\n`;\n\nexport const StyledPrimaryButton = styled(StyledButton)`\n background: ${PrimaryBlueColor};\n &:hover {\n background: ${SecondaryBlueColor};\n }\n`;\n\nexport const StyledSecondaryDiasabledButton = styled(StyledButton)`\n background: ${WhiteColor};\n border: 1px solid ${DefaultColorButton};\n color: ${DefaultColorButton};\n cursor: default;\n`;\n\nexport const StyledSecondaryButton = styled(StyledButton)`\n background: ${WhiteColor};\n border: 1px solid ${PrimaryBlueColor};\n color: ${PrimaryBlueColor};\n &:hover {\n border: 1px solid ${SecondaryBlueColor};\n color: ${SecondaryBlueColor};\n background: ${LightBgColorButton};\n }\n`;\n\nexport const StyledDisabledButton = styled(StyledButton)`\n background: ${DefaultColorButton};\n cursor: default;\n`;\n\nexport const StyledURLButton = styled(StyledButton)`\n background: ${WhiteColor};\n color: ${PrimaryBlueColor};\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n &:hover {\n color: ${SecondaryBlueColor};\n }\n\n ${(props) =>\n props.smallUrl &&\n css`\n font-size: 12px;\n line-height: 18px;\n `}\n`;\n\nexport const StyledDisabledURLButton = styled(StyledButton)`\n background: ${WhiteColor};\n color: ${DefaultColorButton};\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n cursor: default;\n ${(props) =>\n props.smallUrl &&\n css`\n font-size: 12px;\n line-height: 18px;\n `}\n`;\n","import styled from 'styled-components';\n// import { PrimaryBlueColor } from './../colors/color';\n\nexport const StyledInputBoxContainer = styled.div`\n display: flex;\n flex-direction: column;\n position: relative;\n`;\nexport const StyledInputLabelContainer = styled.label`\n font-size: 12px;\n color: #758490;\n margin-bottom: 5px;\n text-align: left;\n`;\n\nexport const StyledInputBox = styled.input`\n border: 1px solid #ACACAC;\n\n border-radius: 3px;\n padding: 0px 15px;\n box-sizing: border-box;\n height: 35px;\n font-size: 14px;\n color: #1d1d1d;\n &:focus{\n border: 1px solid #0055AF;\n }\n`;\nexport const StyledInputBoxError = styled(StyledInputBox)`\n border: 1px solid #DA1E28;\n &:focus{\n border: 1px solid #DA1E28;\n }\n`;\n\nexport const StyledInputBoxSuccess = styled(StyledInputBox)`\n border: 1px solid #24A148;\n &:focus{\n border: 1px solid #24A148;\n }\n`;\n\nexport const StyledInputBoxDisabled = styled(StyledInputBox)`\n background: #EFEFEF;\n border: none;\n cursor: no-drop;\n pointer-events: none;\n &:focus{\n border: none;\n }\n`;\n\nexport const StyledHelperText = styled.span`\n color: #758498;\n font-size: 12px;\n text-align: left;\n margin-top: 2px;\n position: absolute;\n bottom: -15px;\n left: 15px;\n font-style: italic;\n`;\n\nexport const StyledErrorText = styled(StyledHelperText)`\n color: #DA1E28;\n font-style: normal;\n`;\n\nexport const StyledSuccessText = styled(StyledHelperText)`\n color: #24A148;\n font-style: normal;\n`;"],"names":["PrimaryBlueColor","SecondaryBlueColor","DefaultColorButton","LightBgColorButton","WhiteColor","StyledButton","styled","button","props","smallBtn","css","StyledPrimaryButton","StyledSecondaryDiasabledButton","StyledSecondaryButton","StyledDisabledButton","StyledURLButton","smallUrl","StyledDisabledURLButton","StyledInputBoxContainer","div","StyledInputLabelContainer","label","StyledInputBox","input","StyledInputBoxError","StyledInputBoxSuccess","StyledInputBoxDisabled","StyledHelperText","span","StyledErrorText","StyledSuccessText"],"mappings":";;;;;;;;;;;;;AAAO,IAAMA,gBAAgB,GAAG,SAAS;AAClC,IAAMC,kBAAkB,GAAG,SAAS;AACpC,IAAMC,kBAAkB,GAAG,SAAS;AACpC,IAAMC,kBAAkB,GAAG,SAAS;AAUpC,IAAMC,UAAU,GAAG,SAAS;;;ACbnC,IASaC,YAAY,GAAGC,eAAM,CAACC,MAAM,+TAE9BH,UAAU,EAUjB,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,IACdC,UAAG,8JAIF;AAAA,EACJ;AAED,IAAaC,mBAAmB,GAAGL,eAAM,CAACD,YAAY,CAAC,6IACvCL,gBAAgB,EAEdC,kBAAkB,CAEnC;AAED,IAAaW,8BAA8B,GAAGN,eAAM,CAACD,YAAY,CAAC,mKAClDD,UAAU,EACJF,kBAAkB,EAC7BA,kBAAkB,CAE5B;AAED,IAAaW,qBAAqB,GAAGP,eAAM,CAACD,YAAY,CAAC,uOACzCD,UAAU,EACJJ,gBAAgB,EAC3BA,gBAAgB,EAEHC,kBAAkB,EAC7BA,kBAAkB,EACbE,kBAAkB,CAEnC;AAED,IAAaW,oBAAoB,GAAGR,eAAM,CAACD,YAAY,CAAC,wHACxCH,kBAAkB,CAEjC;AAED,IAAaa,eAAe,GAAGT,eAAM,CAACD,YAAY,CAAC,6OACnCD,UAAU,EACfJ,gBAAgB,EAMdC,kBAAkB,EAG3B,UAACO,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdN,UAAG,oIAGF;AAAA,EACJ;AAED,IAAaO,uBAAuB,GAAGX,eAAM,CAACD,YAAY,CAAC,2NAC3CD,UAAU,EACfF,kBAAkB,EAMzB,UAACM,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdN,UAAG,sIAGF;AAAA,EACJ;;;AC7FD,IAGaQ,uBAAuB,GAAGZ,eAAM,CAACa,GAAG,0JAIhD;AACD,IAAaC,yBAAyB,GAAGd,eAAM,CAACe,KAAK,6KAKpD;AAED,IAAaC,cAAc,GAAGhB,eAAM,CAACiB,KAAK,yTAYzC;AACD,IAAaC,mBAAmB,GAAGlB,eAAM,CAACgB,cAAc,CAAC,2KAKxD;AAED,IAAaG,qBAAqB,GAAGnB,eAAM,CAACgB,cAAc,CAAC,4KAK1D;AAED,IAAaI,sBAAsB,GAAGpB,eAAM,CAACgB,cAAc,CAAC,4NAQ3D;AAED,IAAaK,gBAAgB,GAAGrB,eAAM,CAACsB,IAAI,iQAS1C;AAED,IAAaC,eAAe,GAAGvB,eAAM,CAACqB,gBAAgB,CAAC,gIAGtD;AAED,IAAaG,iBAAiB,GAAGxB,eAAM,CAACqB,gBAAgB,CAAC,gIAGxD;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.modern.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
2
|
|
|
3
3
|
function _taggedTemplateLiteralLoose(strings, raw) {
|
|
4
4
|
if (!raw) {
|
|
@@ -8,25 +8,37 @@ function _taggedTemplateLiteralLoose(strings, raw) {
|
|
|
8
8
|
return strings;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var StyledDisabledButton = styled(StyledButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n background: #AFAFAF;\n cursor: default;\n"])));
|
|
17
|
-
var StyledURLButton = styled(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n background: #fff;\n color: #0055AF;\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n &:hover{\n color: #033162;\n }\n"])));
|
|
18
|
-
var StyledDisabledURLButton = styled(StyledButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n background: #fff;\n color: #afafaf;\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n cursor: default;\n"])));
|
|
11
|
+
var PrimaryBlueColor = "#0055AF";
|
|
12
|
+
var SecondaryBlueColor = "#033162";
|
|
13
|
+
var DefaultColorButton = "#ACACAC";
|
|
14
|
+
var LightBgColorButton = "#E5EDF7";
|
|
15
|
+
var WhiteColor = "#ffffff";
|
|
19
16
|
|
|
20
|
-
var _templateObject
|
|
17
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
18
|
+
var StyledButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n background: #1d1d1d;\n color: ", ";\n border: none;\n cursor: pointer;\n border-radius: 3px;\n box-sizing: border-box;\n padding: 8px 20px;\n font-size: 14px;\n transition: all 300ms ease-in-out 0s;\n line-height: 21px;\n\n ", "\n"])), WhiteColor, function (props) {
|
|
19
|
+
return props.smallBtn && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n padding: 4px 12px;\n line-height: 18px;\n font-size: 12px;\n "])));
|
|
20
|
+
});
|
|
21
|
+
var StyledPrimaryButton = styled(StyledButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n background: ", ";\n &:hover {\n background: ", ";\n }\n"])), PrimaryBlueColor, SecondaryBlueColor);
|
|
22
|
+
var StyledSecondaryDiasabledButton = styled(StyledButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: default;\n"])), WhiteColor, DefaultColorButton, DefaultColorButton);
|
|
23
|
+
var StyledSecondaryButton = styled(StyledButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n &:hover {\n border: 1px solid ", ";\n color: ", ";\n background: ", ";\n }\n"])), WhiteColor, PrimaryBlueColor, PrimaryBlueColor, SecondaryBlueColor, SecondaryBlueColor, LightBgColorButton);
|
|
24
|
+
var StyledDisabledButton = styled(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n background: ", ";\n cursor: default;\n"])), DefaultColorButton);
|
|
25
|
+
var StyledURLButton = styled(StyledButton)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n &:hover {\n color: ", ";\n }\n\n ", "\n"])), WhiteColor, PrimaryBlueColor, SecondaryBlueColor, function (props) {
|
|
26
|
+
return props.smallUrl && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n line-height: 18px;\n "])));
|
|
27
|
+
});
|
|
28
|
+
var StyledDisabledURLButton = styled(StyledButton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n cursor: default;\n ", "\n"])), WhiteColor, DefaultColorButton, function (props) {
|
|
29
|
+
return props.smallUrl && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n line-height: 18px;\n "])));
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1;
|
|
21
33
|
var StyledInputBoxContainer = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
22
34
|
var StyledInputLabelContainer = styled.label(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n color: #758490;\n margin-bottom: 5px;\n text-align: left;\n"])));
|
|
23
|
-
var StyledInputBox = styled.input(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n border: 1px solid #ACACAC;\n border-radius: 3px;\n padding: 0px 15px;\n box-sizing: border-box;\n height: 35px;\n font-size: 14px;\n color: #1d1d1d;\n &:focus{\n border: 1px solid #0055AF;\n }\n"])));
|
|
35
|
+
var StyledInputBox = styled.input(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n border: 1px solid #ACACAC;\n\n border-radius: 3px;\n padding: 0px 15px;\n box-sizing: border-box;\n height: 35px;\n font-size: 14px;\n color: #1d1d1d;\n &:focus{\n border: 1px solid #0055AF;\n }\n"])));
|
|
24
36
|
var StyledInputBoxError = styled(StyledInputBox)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n border: 1px solid #DA1E28;\n &:focus{\n border: 1px solid #DA1E28;\n }\n"])));
|
|
25
37
|
var StyledInputBoxSuccess = styled(StyledInputBox)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n border: 1px solid #24A148;\n &:focus{\n border: 1px solid #24A148;\n }\n"])));
|
|
26
38
|
var StyledInputBoxDisabled = styled(StyledInputBox)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n background: #EFEFEF;\n border: none;\n cursor: no-drop;\n pointer-events: none;\n &:focus{\n border: none;\n }\n"])));
|
|
27
39
|
var StyledHelperText = styled.span(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n color: #758498;\n font-size: 12px;\n text-align: left;\n margin-top: 2px;\n position: absolute;\n bottom: -15px;\n left: 15px;\n font-style: italic;\n"])));
|
|
28
|
-
var StyledErrorText = styled(StyledHelperText)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n color: #DA1E28;\n font-style: normal;\n"])));
|
|
29
|
-
var StyledSuccessText = styled(StyledHelperText)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n color: #24A148;\n font-style: normal;\n"])));
|
|
40
|
+
var StyledErrorText = styled(StyledHelperText)(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n color: #DA1E28;\n font-style: normal;\n"])));
|
|
41
|
+
var StyledSuccessText = styled(StyledHelperText)(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n color: #24A148;\n font-style: normal;\n"])));
|
|
30
42
|
|
|
31
43
|
export { StyledButton, StyledDisabledButton, StyledDisabledURLButton, StyledErrorText, StyledHelperText, StyledInputBox, StyledInputBoxContainer, StyledInputBoxDisabled, StyledInputBoxError, StyledInputBoxSuccess, StyledInputLabelContainer, StyledPrimaryButton, StyledSecondaryButton, StyledSecondaryDiasabledButton, StyledSuccessText, StyledURLButton };
|
|
32
44
|
//# sourceMappingURL=index.modern.js.map
|
package/dist/index.modern.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.modern.js","sources":["../src/components/global-components/button/button-style.js","../src/components/global-components/inputbox/inputbox-style.js"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.modern.js","sources":["../src/components/color.js","../src/components/global-components/button/button-style.js","../src/components/global-components/inputbox/inputbox-style.js"],"sourcesContent":["export const PrimaryBlueColor = \"#0055AF\";\nexport const SecondaryBlueColor = \"#033162\";\nexport const DefaultColorButton = \"#ACACAC\";\nexport const LightBgColorButton = \"#E5EDF7\";\nexport const CheckBoxBorder = \"#394960\";\nexport const AlertGreenSuccessStroke = \"#24A148\";\nexport const AlertGreenSucessBackground = \"#E8F5EC\";\nexport const AlertRedErrorStroke = \"#DA1E28\";\nexport const AlertRedErrorBackground = \"#FCE9EA\";\nexport const DefaultButtonText = \"#AFAFAF\";\nexport const AlertOrangeWarningStroke = \"#DA1E28\";\nexport const AlertOrangeWarningBackground = \"#FCE9EA\";\nexport const AlertBlueInfoStroke = \"#0055AF\";\nexport const WhiteColor = \"#ffffff\";\n","import styled, { css } from \"styled-components\";\nimport {\n PrimaryBlueColor,\n SecondaryBlueColor,\n WhiteColor,\n LightBgColorButton,\n DefaultColorButton,\n} from \"../../color\";\n\nexport const StyledButton = styled.button`\n background: #1d1d1d;\n color: ${WhiteColor};\n border: none;\n cursor: pointer;\n border-radius: 3px;\n box-sizing: border-box;\n padding: 8px 20px;\n font-size: 14px;\n transition: all 300ms ease-in-out 0s;\n line-height: 21px;\n\n ${(props) =>\n props.smallBtn &&\n css`\n padding: 4px 12px;\n line-height: 18px;\n font-size: 12px;\n `}\n`;\n\nexport const StyledPrimaryButton = styled(StyledButton)`\n background: ${PrimaryBlueColor};\n &:hover {\n background: ${SecondaryBlueColor};\n }\n`;\n\nexport const StyledSecondaryDiasabledButton = styled(StyledButton)`\n background: ${WhiteColor};\n border: 1px solid ${DefaultColorButton};\n color: ${DefaultColorButton};\n cursor: default;\n`;\n\nexport const StyledSecondaryButton = styled(StyledButton)`\n background: ${WhiteColor};\n border: 1px solid ${PrimaryBlueColor};\n color: ${PrimaryBlueColor};\n &:hover {\n border: 1px solid ${SecondaryBlueColor};\n color: ${SecondaryBlueColor};\n background: ${LightBgColorButton};\n }\n`;\n\nexport const StyledDisabledButton = styled(StyledButton)`\n background: ${DefaultColorButton};\n cursor: default;\n`;\n\nexport const StyledURLButton = styled(StyledButton)`\n background: ${WhiteColor};\n color: ${PrimaryBlueColor};\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n &:hover {\n color: ${SecondaryBlueColor};\n }\n\n ${(props) =>\n props.smallUrl &&\n css`\n font-size: 12px;\n line-height: 18px;\n `}\n`;\n\nexport const StyledDisabledURLButton = styled(StyledButton)`\n background: ${WhiteColor};\n color: ${DefaultColorButton};\n font-size: 16px;\n font-weight: 500;\n padding: 0px;\n height: auto;\n cursor: default;\n ${(props) =>\n props.smallUrl &&\n css`\n font-size: 12px;\n line-height: 18px;\n `}\n`;\n","import styled from 'styled-components';\n// import { PrimaryBlueColor } from './../colors/color';\n\nexport const StyledInputBoxContainer = styled.div`\n display: flex;\n flex-direction: column;\n position: relative;\n`;\nexport const StyledInputLabelContainer = styled.label`\n font-size: 12px;\n color: #758490;\n margin-bottom: 5px;\n text-align: left;\n`;\n\nexport const StyledInputBox = styled.input`\n border: 1px solid #ACACAC;\n\n border-radius: 3px;\n padding: 0px 15px;\n box-sizing: border-box;\n height: 35px;\n font-size: 14px;\n color: #1d1d1d;\n &:focus{\n border: 1px solid #0055AF;\n }\n`;\nexport const StyledInputBoxError = styled(StyledInputBox)`\n border: 1px solid #DA1E28;\n &:focus{\n border: 1px solid #DA1E28;\n }\n`;\n\nexport const StyledInputBoxSuccess = styled(StyledInputBox)`\n border: 1px solid #24A148;\n &:focus{\n border: 1px solid #24A148;\n }\n`;\n\nexport const StyledInputBoxDisabled = styled(StyledInputBox)`\n background: #EFEFEF;\n border: none;\n cursor: no-drop;\n pointer-events: none;\n &:focus{\n border: none;\n }\n`;\n\nexport const StyledHelperText = styled.span`\n color: #758498;\n font-size: 12px;\n text-align: left;\n margin-top: 2px;\n position: absolute;\n bottom: -15px;\n left: 15px;\n font-style: italic;\n`;\n\nexport const StyledErrorText = styled(StyledHelperText)`\n color: #DA1E28;\n font-style: normal;\n`;\n\nexport const StyledSuccessText = styled(StyledHelperText)`\n color: #24A148;\n font-style: normal;\n`;"],"names":["PrimaryBlueColor","SecondaryBlueColor","DefaultColorButton","LightBgColorButton","WhiteColor","StyledButton","styled","button","props","smallBtn","css","StyledPrimaryButton","StyledSecondaryDiasabledButton","StyledSecondaryButton","StyledDisabledButton","StyledURLButton","smallUrl","StyledDisabledURLButton","StyledInputBoxContainer","div","StyledInputLabelContainer","label","StyledInputBox","input","StyledInputBoxError","StyledInputBoxSuccess","StyledInputBoxDisabled","StyledHelperText","span","StyledErrorText","StyledSuccessText"],"mappings":";;;;;;;;;;AAAO,IAAMA,gBAAgB,GAAG,SAAS;AAClC,IAAMC,kBAAkB,GAAG,SAAS;AACpC,IAAMC,kBAAkB,GAAG,SAAS;AACpC,IAAMC,kBAAkB,GAAG,SAAS;AAUpC,IAAMC,UAAU,GAAG,SAAS;;;ACbnC,IASaC,YAAY,GAAGC,MAAM,CAACC,MAAM,+TAE9BH,UAAU,EAUjB,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,IACdC,GAAG,8JAIF;AAAA,EACJ;AAED,IAAaC,mBAAmB,GAAGL,MAAM,CAACD,YAAY,CAAC,6IACvCL,gBAAgB,EAEdC,kBAAkB,CAEnC;AAED,IAAaW,8BAA8B,GAAGN,MAAM,CAACD,YAAY,CAAC,mKAClDD,UAAU,EACJF,kBAAkB,EAC7BA,kBAAkB,CAE5B;AAED,IAAaW,qBAAqB,GAAGP,MAAM,CAACD,YAAY,CAAC,uOACzCD,UAAU,EACJJ,gBAAgB,EAC3BA,gBAAgB,EAEHC,kBAAkB,EAC7BA,kBAAkB,EACbE,kBAAkB,CAEnC;AAED,IAAaW,oBAAoB,GAAGR,MAAM,CAACD,YAAY,CAAC,wHACxCH,kBAAkB,CAEjC;AAED,IAAaa,eAAe,GAAGT,MAAM,CAACD,YAAY,CAAC,6OACnCD,UAAU,EACfJ,gBAAgB,EAMdC,kBAAkB,EAG3B,UAACO,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdN,GAAG,oIAGF;AAAA,EACJ;AAED,IAAaO,uBAAuB,GAAGX,MAAM,CAACD,YAAY,CAAC,2NAC3CD,UAAU,EACfF,kBAAkB,EAMzB,UAACM,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdN,GAAG,sIAGF;AAAA,EACJ;;;AC7FD,IAGaQ,uBAAuB,GAAGZ,MAAM,CAACa,GAAG,0JAIhD;AACD,IAAaC,yBAAyB,GAAGd,MAAM,CAACe,KAAK,6KAKpD;AAED,IAAaC,cAAc,GAAGhB,MAAM,CAACiB,KAAK,yTAYzC;AACD,IAAaC,mBAAmB,GAAGlB,MAAM,CAACgB,cAAc,CAAC,2KAKxD;AAED,IAAaG,qBAAqB,GAAGnB,MAAM,CAACgB,cAAc,CAAC,4KAK1D;AAED,IAAaI,sBAAsB,GAAGpB,MAAM,CAACgB,cAAc,CAAC,4NAQ3D;AAED,IAAaK,gBAAgB,GAAGrB,MAAM,CAACsB,IAAI,iQAS1C;AAED,IAAaC,eAAe,GAAGvB,MAAM,CAACqB,gBAAgB,CAAC,gIAGtD;AAED,IAAaG,iBAAiB,GAAGxB,MAAM,CAACqB,gBAAgB,CAAC,gIAGxD;;;;"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "impact-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.14",
|
|
4
|
+
"description": "Impact analytics UI library",
|
|
4
5
|
"author": "",
|
|
5
6
|
"license": "MIT",
|
|
6
7
|
"repository": "/impact-ui",
|
|
7
8
|
"main": "dist/index.js",
|
|
8
9
|
"module": "dist/index.modern.js",
|
|
9
|
-
"source": "src/index.js",
|
|
10
|
+
"source": "src/components/index.js",
|
|
10
11
|
"engines": {
|
|
11
12
|
"node": ">=10"
|
|
12
13
|
},
|
|
13
14
|
"scripts": {
|
|
14
15
|
"build": "microbundle-crl --no-compress --format modern,cjs",
|
|
15
16
|
"start": "microbundle-crl watch --no-compress --format modern,cjs",
|
|
17
|
+
"start:docs": "react-scripts start",
|
|
16
18
|
"prepare": "run-s build",
|
|
17
19
|
"test": "run-s test:unit test:lint test:build",
|
|
18
20
|
"test:build": "run-s build",
|
|
@@ -23,7 +25,7 @@
|
|
|
23
25
|
"deploy": "gh-pages -d example/build"
|
|
24
26
|
},
|
|
25
27
|
"peerDependencies": {
|
|
26
|
-
"react": "^
|
|
28
|
+
"react": "^16.0.0"
|
|
27
29
|
},
|
|
28
30
|
"devDependencies": {
|
|
29
31
|
"babel-eslint": "^10.0.3",
|
|
@@ -42,12 +44,25 @@
|
|
|
42
44
|
"microbundle-crl": "^0.13.10",
|
|
43
45
|
"npm-run-all": "^4.1.5",
|
|
44
46
|
"prettier": "^2.0.4",
|
|
45
|
-
"react": "^
|
|
46
|
-
"react-dom": "^
|
|
47
|
+
"react": "^16.13.1",
|
|
48
|
+
"react-dom": "^16.13.1",
|
|
49
|
+
"react-scripts": "^3.4.1"
|
|
47
50
|
},
|
|
48
51
|
"files": [
|
|
49
52
|
"dist"
|
|
50
53
|
],
|
|
54
|
+
"browserslist": {
|
|
55
|
+
"production": [
|
|
56
|
+
">0.2%",
|
|
57
|
+
"not dead",
|
|
58
|
+
"not op_mini all"
|
|
59
|
+
],
|
|
60
|
+
"development": [
|
|
61
|
+
"last 1 chrome version",
|
|
62
|
+
"last 1 firefox version",
|
|
63
|
+
"last 1 safari version"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
51
66
|
"dependencies": {
|
|
52
67
|
"styled-components": "^5.3.6"
|
|
53
68
|
}
|