@mrshmllw/smores-react 2.1.25 → 2.1.28
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/dist/Tag/Tag.d.ts +11 -2
- package/dist/Tag/Tag.js +5 -3
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/Tag.stories.d.ts +1 -0
- package/dist/Tag/Tag.stories.js +6 -0
- package/dist/Tag/Tag.stories.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
- package/dist/CheckBoxGroup/CheckBox.d.ts +0 -9
- package/dist/CheckBoxGroup/CheckBox.js +0 -67
- package/dist/CheckBoxGroup/CheckBox.js.map +0 -1
package/dist/Tag/Tag.d.ts
CHANGED
@@ -1,11 +1,20 @@
|
|
1
1
|
import { FC } from 'react';
|
2
2
|
import { Color } from '../theme';
|
3
|
-
export declare type
|
3
|
+
export declare type DefaultProps = {
|
4
4
|
label: string;
|
5
5
|
className?: string;
|
6
6
|
color: Color;
|
7
|
+
typo?: string;
|
8
|
+
};
|
9
|
+
declare type GradientProps = {
|
7
10
|
bgColor: Color;
|
8
11
|
borderColor: Color;
|
9
|
-
|
12
|
+
bgGradient?: boolean;
|
13
|
+
} | {
|
14
|
+
bgColor?: Color;
|
15
|
+
borderColor?: Color;
|
16
|
+
bgGradient: boolean;
|
10
17
|
};
|
18
|
+
export declare type TagProps = DefaultProps & GradientProps;
|
11
19
|
export declare const Tag: FC<TagProps>;
|
20
|
+
export {};
|
package/dist/Tag/Tag.js
CHANGED
@@ -2,12 +2,14 @@ import React from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
3
3
|
import { Text } from '../Text';
|
4
4
|
import { theme } from '../theme';
|
5
|
-
export const Tag = ({ label, color, borderColor, bgColor, className, typo, }) => (React.createElement(Wrapper, { bgColor: bgColor, className: className, borderColor: borderColor },
|
5
|
+
export const Tag = ({ label, color, borderColor, bgColor, className, typo, bgGradient = false, }) => (React.createElement(Wrapper, { bgColor: bgColor, className: className, borderColor: borderColor, bgGradient: bgGradient },
|
6
6
|
React.createElement(TagText, { tag: "span", typo: typo !== null && typo !== void 0 ? typo : 'label', color: color }, label)));
|
7
7
|
const Wrapper = styled.div `
|
8
|
-
background-color: ${({ bgColor }) => theme.colors[bgColor]};
|
8
|
+
background-color: ${({ bgColor }) => bgColor && theme.colors[bgColor]};
|
9
|
+
background: ${({ bgGradient }) => bgGradient &&
|
10
|
+
`linear-gradient(90deg, rgba(247, 46, 73, 1) 0%, rgba(246, 148, 210, 1) 100%)`};
|
9
11
|
border-radius: 8px;
|
10
|
-
border:
|
12
|
+
border: ${({ borderColor }) => borderColor && `1px solid ${theme.colors[borderColor]}`};
|
11
13
|
box-sizing: border-box;
|
12
14
|
display: inline-flex;
|
13
15
|
height: 23px;
|
package/dist/Tag/Tag.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAyBvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,UAAU,GAAG,KAAK,GACnB,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU;IAEtB,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,OAAO,EAAE,KAAK,EAAE,KAAK,IACpD,KAAK,CACE,CACF,CACX,CAAA;AAID,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAc;sBAClB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;gBACvD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAC/B,UAAU;IACV,8EAA8E;;YAEtE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5B,WAAW,IAAI,aAAa,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE;;;;;CAK1D,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK3B,CAAA"}
|
package/dist/Tag/Tag.stories.js
CHANGED
@@ -17,4 +17,10 @@ Default.argTypes = {
|
|
17
17
|
as: { table: { disable: true } },
|
18
18
|
forwardedAs: { table: { disable: true } },
|
19
19
|
};
|
20
|
+
export const BgGradient = Template.bind({});
|
21
|
+
BgGradient.args = {
|
22
|
+
label: 'This is a gradient background tag',
|
23
|
+
bgGradient: true,
|
24
|
+
color: 'white',
|
25
|
+
};
|
20
26
|
//# sourceMappingURL=Tag.stories.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../src/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAA;AAErC,eAAe;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,oBAAC,GAAG,oBAAK,KAAK,EAAI,CAAA;AAExD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,eAAe;IACtB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,SAAS;IACtB,KAAK,EAAE,OAAO;CACf,CAAA;AAED,OAAO,CAAC,QAAQ,GAAG;IACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAA"}
|
1
|
+
{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../src/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAA;AAErC,eAAe;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,oBAAC,GAAG,oBAAK,KAAK,EAAI,CAAA;AAExD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,eAAe;IACtB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,SAAS;IACtB,KAAK,EAAE,OAAO;CACf,CAAA;AAED,OAAO,CAAC,QAAQ,GAAG;IACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,mCAAmC;IAC1C,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,OAAO;CACf,CAAA"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA"}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@mrshmllw/smores-react",
|
3
|
-
"version": "2.1.
|
3
|
+
"version": "2.1.28",
|
4
4
|
"main": "./dist/index.js",
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
6
6
|
"keywords": [
|
@@ -41,20 +41,20 @@
|
|
41
41
|
"@testing-library/react": "^12.0.0",
|
42
42
|
"@testing-library/react-hooks": "^8.0.0",
|
43
43
|
"@types/jest": "^28.1.1",
|
44
|
-
"@types/node": "^
|
44
|
+
"@types/node": "^18.0.0",
|
45
45
|
"@types/react": "^17.0.0",
|
46
46
|
"@types/react-dom": "^17.0.9",
|
47
47
|
"@types/styled-components": "^5.1.3",
|
48
48
|
"@types/testing-library__jest-dom": "^5.14.3",
|
49
49
|
"@types/testing-library__react": "^10.2.0",
|
50
|
-
"@typescript-eslint/eslint-plugin": "^
|
51
|
-
"@typescript-eslint/parser": "^
|
50
|
+
"@typescript-eslint/eslint-plugin": "^5.28.0",
|
51
|
+
"@typescript-eslint/parser": "^5.28.0",
|
52
52
|
"babel-eslint": "^10.1.0",
|
53
53
|
"babel-jest": "^28.0.3",
|
54
54
|
"babel-loader": "^8.1.0",
|
55
55
|
"eslint": "^7.9.0",
|
56
56
|
"eslint-config-prettier": "^8.2.0",
|
57
|
-
"eslint-plugin-jest": "^26.
|
57
|
+
"eslint-plugin-jest": "^26.5.3",
|
58
58
|
"eslint-plugin-react": "^7.29.2",
|
59
59
|
"eslint-plugin-react-hooks": "^4.1.2",
|
60
60
|
"husky": "^8.0.1",
|
@@ -1,67 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import styled from 'styled-components';
|
3
|
-
import { Text } from '../Text';
|
4
|
-
import { theme } from '../theme';
|
5
|
-
export const CheckBox = ({ id, checked, children, toggle }) => (React.createElement(BoxContainer, { id: id },
|
6
|
-
React.createElement(Text, { tag: "span", typo: "base" }, children),
|
7
|
-
React.createElement("input", { type: "checkbox", checked: checked, onChange: toggle }),
|
8
|
-
React.createElement(Checkmark, null)));
|
9
|
-
const Checkmark = styled.span `
|
10
|
-
position: absolute;
|
11
|
-
left: 0;
|
12
|
-
width: 24px;
|
13
|
-
height: 24px;
|
14
|
-
border: solid 1px ${theme.colors.secondary};
|
15
|
-
box-sizing: border-box;
|
16
|
-
border-radius: 1px;
|
17
|
-
|
18
|
-
&:after {
|
19
|
-
content: '';
|
20
|
-
position: absolute;
|
21
|
-
display: none;
|
22
|
-
top: 3px;
|
23
|
-
left: 7px;
|
24
|
-
width: 5px;
|
25
|
-
height: 12px;
|
26
|
-
border: solid white;
|
27
|
-
border-width: 0 2px 2px 0;
|
28
|
-
-webkit-transform: rotate(45deg);
|
29
|
-
-ms-transform: rotate(45deg);
|
30
|
-
transform: rotate(45deg);
|
31
|
-
}
|
32
|
-
`;
|
33
|
-
const BoxContainer = styled.label `
|
34
|
-
position: relative;
|
35
|
-
display: flex;
|
36
|
-
align-items: center;
|
37
|
-
padding-left: 32px;
|
38
|
-
user-select: none;
|
39
|
-
cursor: pointer;
|
40
|
-
|
41
|
-
input {
|
42
|
-
position: absolute;
|
43
|
-
opacity: 0;
|
44
|
-
cursor: pointer;
|
45
|
-
|
46
|
-
&:checked ~ ${Checkmark} {
|
47
|
-
background-color: ${theme.colors.secondary};
|
48
|
-
border: solid 1px ${theme.colors.secondary};
|
49
|
-
}
|
50
|
-
|
51
|
-
&:checked ~ ${Checkmark}:after {
|
52
|
-
display: block;
|
53
|
-
}
|
54
|
-
}
|
55
|
-
|
56
|
-
&:hover {
|
57
|
-
${Checkmark} {
|
58
|
-
background-color: ${theme.colors.background};
|
59
|
-
border: solid 1px ${theme.colors.secondary};
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
|
-
@media (min-width: 768px) {
|
64
|
-
padding-left: 32px;
|
65
|
-
}
|
66
|
-
`;
|
67
|
-
//# sourceMappingURL=CheckBox.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sourceRoot":"","sources":["../../src/CheckBoxGroup/CheckBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAShC,MAAM,CAAC,MAAM,QAAQ,GAAc,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CACxE,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAE;IAClB,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IACzB,QAAQ,CACJ;IAEP,+BAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAI;IAC7D,oBAAC,SAAS,OAAG,CACA,CAChB,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;sBAKP,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;CAkB3C,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;;;kBAaf,SAAS;0BACD,KAAK,CAAC,MAAM,CAAC,SAAS;0BACtB,KAAK,CAAC,MAAM,CAAC,SAAS;;;kBAG9B,SAAS;;;;;;MAMrB,SAAS;0BACW,KAAK,CAAC,MAAM,CAAC,UAAU;0BACvB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;CAO/C,CAAA"}
|