@mrshmllw/smores-react 2.9.2 → 2.9.3
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/Field/Field.d.ts +2 -1
- package/dist/Field/Field.js +8 -20
- package/dist/Field/Field.js.map +1 -1
- package/dist/Field/types/commonFieldTypes.d.ts +1 -0
- package/dist/Fieldset/Fieldset.js +2 -7
- package/dist/Fieldset/Fieldset.js.map +1 -1
- package/dist/SupportMessage/Collection.js +4 -1
- package/dist/SupportMessage/Collection.js.map +1 -1
- package/dist/SupportMessage/SupportMessage.d.ts +2 -1
- package/dist/SupportMessage/SupportMessage.js +23 -7
- package/dist/SupportMessage/SupportMessage.js.map +1 -1
- package/dist/SupportMessage/SupportMessage.stories.d.ts +1 -0
- package/dist/SupportMessage/SupportMessage.stories.js +7 -0
- package/dist/SupportMessage/SupportMessage.stories.js.map +1 -1
- package/package.json +4 -2
package/dist/Field/Field.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ interface FieldProps extends CommonFieldTypes {
|
|
|
7
7
|
trailingIcon?: string;
|
|
8
8
|
dropdownKey?: string;
|
|
9
9
|
fullHeight?: boolean;
|
|
10
|
+
assistiveText?: string;
|
|
10
11
|
}
|
|
11
|
-
export declare const Field: ({ children, renderAsTitle, className, error, id, label, outlined, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight, ...marginProps }: FieldProps) => JSX.Element;
|
|
12
|
+
export declare const Field: ({ children, renderAsTitle, className, error, id, label, outlined, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight, assistiveText, ...marginProps }: FieldProps) => JSX.Element;
|
|
12
13
|
export {};
|
package/dist/Field/Field.js
CHANGED
|
@@ -17,17 +17,20 @@ import { Text } from '../Text';
|
|
|
17
17
|
import { Box } from '../Box';
|
|
18
18
|
import { theme } from '../theme';
|
|
19
19
|
export const Field = (_a) => {
|
|
20
|
-
var { children, renderAsTitle, className = '', error, id, label, outlined = false, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight = false } = _a, marginProps = __rest(_a, ["children", "renderAsTitle", "className", "error", "id", "label", "outlined", "value", "trailingIcon", "errorMsg", "dropdownKey", "required", "showCaret", "fullHeight"]);
|
|
20
|
+
var { children, renderAsTitle, className = '', error, id, label, outlined = false, value, trailingIcon, errorMsg, dropdownKey, required, showCaret, fullHeight = false, assistiveText } = _a, marginProps = __rest(_a, ["children", "renderAsTitle", "className", "error", "id", "label", "outlined", "value", "trailingIcon", "errorMsg", "dropdownKey", "required", "showCaret", "fullHeight", "assistiveText"]);
|
|
21
21
|
return (React.createElement(Container, Object.assign({ className: className }, marginProps),
|
|
22
|
-
label && (React.createElement(
|
|
23
|
-
label,
|
|
24
|
-
|
|
22
|
+
label && (React.createElement(React.Fragment, null, renderAsTitle ? (React.createElement(Box, { mb: "16px" },
|
|
23
|
+
React.createElement(Text, { tag: "label", typo: "heading-small", htmlFor: id, mb: assistiveText ? { custom: 4 } : undefined }, label),
|
|
24
|
+
assistiveText && (React.createElement(Text, { tag: "p", color: "subtext" }, assistiveText)))) : (React.createElement(Box, { mb: { custom: outlined ? 4 : 0 } },
|
|
25
|
+
React.createElement(Text, { tag: "label", typo: "label", color: "subtext", htmlFor: id },
|
|
26
|
+
label,
|
|
27
|
+
required && (React.createElement(Text, { tag: "span", typo: "body-small", color: "error" }, "*"))))))),
|
|
25
28
|
React.createElement(Content, { fullHeight: fullHeight, value: value, outlined: outlined, error: error, key: dropdownKey !== null && dropdownKey !== void 0 ? dropdownKey : null },
|
|
26
29
|
children,
|
|
27
30
|
showCaret && (React.createElement(Caret, { outlined: outlined },
|
|
28
31
|
React.createElement(Icon, { render: "caret", color: "subtext", size: 24 })))),
|
|
29
32
|
trailingIcon && React.createElement(Icon, { render: trailingIcon, color: "subtext" }),
|
|
30
|
-
error && React.createElement(
|
|
33
|
+
error && (React.createElement(Text, { tag: "span", typo: "caption", color: "error", mt: "8px" }, errorMsg))));
|
|
31
34
|
};
|
|
32
35
|
const Container = styled(Box) `
|
|
33
36
|
display: flex;
|
|
@@ -58,17 +61,6 @@ const Content = styled.div `
|
|
|
58
61
|
border-color: ${theme.colors.outline};
|
|
59
62
|
`}
|
|
60
63
|
`;
|
|
61
|
-
const ErrorBox = styled.span `
|
|
62
|
-
margin-top: 7px;
|
|
63
|
-
color: ${theme.colors.error};
|
|
64
|
-
font-size: 12px;
|
|
65
|
-
`;
|
|
66
|
-
const Title = styled.label `
|
|
67
|
-
font-size: 20px;
|
|
68
|
-
line-height: 26px;
|
|
69
|
-
font-weight: 500;
|
|
70
|
-
padding-bottom: 8px;
|
|
71
|
-
`;
|
|
72
64
|
const Caret = styled.div `
|
|
73
65
|
position: absolute;
|
|
74
66
|
top: 50%;
|
|
@@ -77,8 +69,4 @@ const Caret = styled.div `
|
|
|
77
69
|
pointer-events: none;
|
|
78
70
|
transform: translateY(-50%);
|
|
79
71
|
`;
|
|
80
|
-
const Asterisk = styled.span `
|
|
81
|
-
font-size: 14px;
|
|
82
|
-
color: ${theme.colors.error};
|
|
83
|
-
`;
|
|
84
72
|
//# sourceMappingURL=Field.js.map
|
package/dist/Field/Field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,18 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
|
-
import styled from 'styled-components';
|
|
14
13
|
import { Box } from '../Box';
|
|
14
|
+
import { Text } from '../Text';
|
|
15
15
|
export const Fieldset = (_a) => {
|
|
16
16
|
var { children, label, outlined = false } = _a, marginProps = __rest(_a, ["children", "label", "outlined"]);
|
|
17
17
|
return (React.createElement(Box, Object.assign({ as: "fieldset" }, marginProps),
|
|
18
18
|
React.createElement(Box, { mb: { custom: outlined ? 4 : 0 } },
|
|
19
|
-
React.createElement(
|
|
19
|
+
React.createElement(Text, { tag: "legend", typo: "heading-small", mb: "16px" }, label)),
|
|
20
20
|
children));
|
|
21
21
|
};
|
|
22
|
-
const Legend = styled.legend `
|
|
23
|
-
font-size: 16px;
|
|
24
|
-
font-weight: bold;
|
|
25
|
-
padding-bottom: 8px;
|
|
26
|
-
`;
|
|
27
22
|
//# sourceMappingURL=Fieldset.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../src/Fieldset/Fieldset.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../src/Fieldset/Fieldset.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAQ9B,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAKT,EAAE,EAAE;QALK,EACvB,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,OAEF,EADX,WAAW,cAJS,iCAKxB,CADe;IAEd,OAAO,CACL,oBAAC,GAAG,kBAAC,EAAE,EAAC,UAAU,IAAK,WAAW;QAChC,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YACnC,oBAAC,IAAI,IAAC,GAAG,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,EAAC,EAAE,EAAC,MAAM,IAC9C,KAAK,CACD,CACH;QAEL,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -36,7 +36,10 @@ export const CollectionPage = () => {
|
|
|
36
36
|
React.createElement(SupportMessage, { type: type, description: description })),
|
|
37
37
|
React.createElement(Box, { flex: true, mt: "8px" },
|
|
38
38
|
React.createElement(Label, { tag: "span", typo: "header-small" }, "With title"),
|
|
39
|
-
React.createElement(SupportMessage, { type: type, title: title, description: description }))
|
|
39
|
+
React.createElement(SupportMessage, { type: type, title: title, description: description })),
|
|
40
|
+
React.createElement(Box, { flex: true, mt: "8px" },
|
|
41
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "Clickable"),
|
|
42
|
+
React.createElement(SupportMessage, { type: type, title: title, description: description, onClick: () => alert('Clicked!') }))));
|
|
40
43
|
})));
|
|
41
44
|
};
|
|
42
45
|
const LABEL_WIDTH = '140px';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collection.js","sourceRoot":"","sources":["../../src/SupportMessage/Collection.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,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AAEtE,MAAM,aAAa,GAA0B;IAC3C;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,mDAAmD;KACjE;IACD;QACE,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,mDAAmD;KACjE;IACD;QACE,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,yDAAyD;KACvE;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,2DAA2D;KACzE;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAO,GAAG,EAAE;IACrC,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;QAClD,OAAO,CACL,oBAAC,GAAG,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAC,MAAM;YAC/C,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe;;gBAC7B,IAAI,CACL;YACR,oBAAC,GAAG,IAAC,IAAI;gBACP,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,oBAE7B;gBACR,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,GAAI,CACpD;YACN,oBAAC,GAAG,IAAC,IAAI,QAAC,EAAE,EAAC,KAAK;gBAChB,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,iBAE7B;gBACR,oBAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,GACxB,CACE,CACF,CACP,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,OAAO,CAAA;AAE3B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;iBAIT,WAAW;CAC3B,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;WAGf,WAAW;;CAErB,CAAA"}
|
|
1
|
+
{"version":3,"file":"Collection.js","sourceRoot":"","sources":["../../src/SupportMessage/Collection.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,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AAEtE,MAAM,aAAa,GAA0B;IAC3C;QACE,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,mDAAmD;KACjE;IACD;QACE,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,wBAAwB;QAC/B,WAAW,EAAE,mDAAmD;KACjE;IACD;QACE,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,yDAAyD;KACvE;IACD;QACE,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,2DAA2D;KACzE;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAO,GAAG,EAAE;IACrC,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;QAClD,OAAO,CACL,oBAAC,GAAG,IAAC,GAAG,EAAE,IAAI,EAAE,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAC,MAAM;YAC/C,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe;;gBAC7B,IAAI,CACL;YACR,oBAAC,GAAG,IAAC,IAAI;gBACP,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,oBAE7B;gBACR,oBAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,GAAI,CACpD;YACN,oBAAC,GAAG,IAAC,IAAI,QAAC,EAAE,EAAC,KAAK;gBAChB,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,iBAE7B;gBACR,oBAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,GACxB,CACE;YACN,oBAAC,GAAG,IAAC,IAAI,QAAC,EAAE,EAAC,KAAK;gBAChB,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,gBAE7B;gBACR,oBAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,GAChC,CACE,CACF,CACP,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,OAAO,CAAA;AAE3B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;iBAIT,WAAW;CAC3B,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;WAGf,WAAW;;CAErB,CAAA"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { FC, ReactElement } from 'react';
|
|
1
|
+
import { FC, MouseEventHandler, ReactElement } from 'react';
|
|
2
2
|
import { MarginProps } from '../utils/space';
|
|
3
3
|
declare type SupportMessageType = 'info' | 'info-outline' | 'alert' | 'warning';
|
|
4
4
|
export declare type SupportMessageProps = {
|
|
5
5
|
className?: string;
|
|
6
6
|
description: string | ReactElement;
|
|
7
|
+
onClick?: MouseEventHandler;
|
|
7
8
|
type: SupportMessageType;
|
|
8
9
|
title?: string;
|
|
9
10
|
} & MarginProps;
|
|
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import styled, { css } from 'styled-components';
|
|
14
|
-
import { lighten } from 'polished';
|
|
14
|
+
import { darken, lighten } from 'polished';
|
|
15
15
|
import { Box } from '../Box';
|
|
16
16
|
import { Icon } from '../Icon';
|
|
17
17
|
import { Text } from '../Text';
|
|
@@ -20,44 +20,60 @@ const styles = {
|
|
|
20
20
|
info: {
|
|
21
21
|
iconColor: 'secondary',
|
|
22
22
|
backgroundColor: theme.colors.background,
|
|
23
|
+
borderColor: theme.colors.background,
|
|
24
|
+
hoverBackgroundColor: darken(0.1, theme.colors.background),
|
|
23
25
|
icon: 'info',
|
|
24
26
|
},
|
|
25
27
|
'info-outline': {
|
|
26
28
|
iconColor: 'secondary',
|
|
27
29
|
backgroundColor: theme.colors.white,
|
|
30
|
+
borderColor: theme.colors.outline,
|
|
31
|
+
hoverBackgroundColor: theme.colors.outline,
|
|
28
32
|
icon: 'info',
|
|
29
33
|
},
|
|
30
34
|
alert: {
|
|
31
35
|
iconColor: 'agentWarning',
|
|
32
36
|
backgroundColor: theme.colors.bgSecondary,
|
|
37
|
+
borderColor: theme.colors.agentWarning,
|
|
38
|
+
hoverBackgroundColor: darken(0.1, theme.colors.bgSecondary),
|
|
33
39
|
icon: 'alert',
|
|
34
40
|
},
|
|
35
41
|
warning: {
|
|
36
42
|
iconColor: 'error',
|
|
37
43
|
backgroundColor: lighten(0.45, theme.colors.error),
|
|
44
|
+
borderColor: theme.colors.error,
|
|
45
|
+
hoverBackgroundColor: lighten(0.35, theme.colors.error),
|
|
38
46
|
icon: 'warning',
|
|
39
47
|
},
|
|
40
48
|
};
|
|
41
49
|
export const SupportMessage = (_a) => {
|
|
42
|
-
var { className, description, type = 'info', title } = _a, marginProps = __rest(_a, ["className", "description", "type", "title"]);
|
|
43
|
-
return (React.createElement(Wrapper, Object.assign({ className: className, type: type }, marginProps),
|
|
50
|
+
var { className, description, onClick, type = 'info', title } = _a, marginProps = __rest(_a, ["className", "description", "onClick", "type", "title"]);
|
|
51
|
+
return (React.createElement(Wrapper, Object.assign({ className: className, type: type, onClick: onClick }, marginProps),
|
|
44
52
|
React.createElement(IconWrapper, null,
|
|
45
53
|
React.createElement(Icon, { size: 24, render: styles[type].icon, color: styles[type].iconColor })),
|
|
46
|
-
React.createElement(Box, { flex: true, direction: "column",
|
|
54
|
+
React.createElement(Box, { flex: true, direction: "column", mx: "16px" },
|
|
47
55
|
title && React.createElement(Title, null, title),
|
|
48
|
-
React.createElement(Description, { tag: "p"
|
|
56
|
+
React.createElement(Description, { tag: "p" }, description)),
|
|
57
|
+
onClick && (React.createElement(Box, { ml: { custom: 'auto' } },
|
|
58
|
+
React.createElement(Icon, { size: 16, render: "caret", color: "subtext", rotate: 270 })))));
|
|
49
59
|
};
|
|
50
60
|
const IconWrapper = styled(Box) `
|
|
51
61
|
align-self: flex-start;
|
|
52
62
|
`;
|
|
53
|
-
const Wrapper = styled(Box)(({ type }) => css `
|
|
63
|
+
const Wrapper = styled(Box)(({ type, onClick }) => css `
|
|
54
64
|
align-items: center;
|
|
55
65
|
background-color: ${styles[type].backgroundColor};
|
|
56
|
-
|
|
66
|
+
border: 1px solid ${styles[type].borderColor};
|
|
57
67
|
border-radius: 8px;
|
|
68
|
+
${onClick && `cursor: pointer`};
|
|
58
69
|
padding: 16px;
|
|
59
70
|
display: flex;
|
|
60
71
|
width: 100%;
|
|
72
|
+
|
|
73
|
+
&:hover,
|
|
74
|
+
&:active {
|
|
75
|
+
${onClick && `background-color: ${styles[type].hoverBackgroundColor};`};
|
|
76
|
+
}
|
|
61
77
|
`);
|
|
62
78
|
const Title = styled.p `
|
|
63
79
|
font-size: 16px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAE1C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAS,MAAM,UAAU,CAAA;AAWvC,MAAM,MAAM,GAA2C;IACrD,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QACxC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QACpC,oBAAoB,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;QAC1D,IAAI,EAAE,MAAM;KACb;IACD,cAAc,EAAE;QACd,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACnC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;QACjC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;QAC1C,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;QACzC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY;QACtC,oBAAoB,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC;QAC3D,IAAI,EAAE,OAAO;KACd;IACD,OAAO,EAAE;QACP,SAAS,EAAE,OAAO;QAClB,eAAe,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAClD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QAC/B,oBAAoB,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACvD,IAAI,EAAE,SAAS;KAChB;CACF,CAAA;AAYD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAOvD,EAAE,EAAE;QAPmD,EACtD,SAAS,EACT,WAAW,EACX,OAAO,EACP,IAAI,GAAG,MAAM,EACb,KAAK,OAEN,EADI,WAAW,cANwC,wDAOvD,CADe;IACV,OAAA,CACJ,oBAAC,OAAO,kBAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAM,WAAW;QAC1E,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EACzB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,GAC7B,CACU;QACd,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAC,MAAM;YACnC,KAAK,IAAI,oBAAC,KAAK,QAAE,KAAK,CAAS;YAChC,oBAAC,WAAW,IAAC,GAAG,EAAC,GAAG,IAAE,WAAW,CAAe,CAC5C;QACL,OAAO,IAAI,CACV,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;YACzB,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAE,GAAG,GAAI,CAC1D,CACP,CACO,CACX,CAAA;CAAA,CAAA;AAOD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE9B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAEJ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe;wBAC5B,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW;;MAE1C,OAAO,IAAI,iBAAiB;;;;;;;QAO1B,OAAO,IAAI,qBAAqB,MAAM,CAAC,IAAI,CAAC,CAAC,oBAAoB,GAAG;;GAEzE,CACF,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAA;;iBAEL,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;WAC9B,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAGhC,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;WACrB,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAGhC,CAAA"}
|
|
@@ -22,5 +22,12 @@ WithCustomDescription.args = {
|
|
|
22
22
|
"Some text rendered using a ",
|
|
23
23
|
React.createElement(Link, { href: '' }, "Link"))),
|
|
24
24
|
};
|
|
25
|
+
export const Clickable = Template.bind({});
|
|
26
|
+
Clickable.args = {
|
|
27
|
+
type: 'info',
|
|
28
|
+
title: 'An interactive SupportMessage',
|
|
29
|
+
description: 'Click me!',
|
|
30
|
+
onClick: () => alert('Clicked!'),
|
|
31
|
+
};
|
|
25
32
|
export const Collection = CollectionPage.bind({});
|
|
26
33
|
//# sourceMappingURL=SupportMessage.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SupportMessage.stories.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,cAAc;CAC1B,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,CAC/C,oBAAC,cAAc,oBAAK,KAAK,kCAA+C,CACzE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,kBAAkB,GAAwB;IAC9C,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,uBAAuB;CACrC,CAAA;AAED,OAAO,CAAC,IAAI,GAAG,kBAAkB,CAAA;AAEjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtD,qBAAqB,CAAC,IAAI,GAAG;IAC3B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,2CAA2C;IAClD,WAAW,EAAE,CACX;;QAC6B,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,WAAa,CACrD,CACJ;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
|
1
|
+
{"version":3,"file":"SupportMessage.stories.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,cAAc;CAC1B,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,CAC/C,oBAAC,cAAc,oBAAK,KAAK,kCAA+C,CACzE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,kBAAkB,GAAwB;IAC9C,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,uBAAuB;CACrC,CAAA;AAED,OAAO,CAAC,IAAI,GAAG,kBAAkB,CAAA;AAEjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtD,qBAAqB,CAAC,IAAI,GAAG;IAC3B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,2CAA2C;IAClD,WAAW,EAAE,CACX;;QAC6B,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,WAAa,CACrD,CACJ;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,+BAA+B;IACtC,WAAW,EAAE,WAAW;IACxB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC;CACjC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.3",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"keywords": [
|
|
@@ -36,6 +36,8 @@
|
|
|
36
36
|
"@babel/preset-typescript": "^7.10.4",
|
|
37
37
|
"@snyk/protect": "^1.881.0",
|
|
38
38
|
"@storybook/addon-essentials": "^6.2.6",
|
|
39
|
+
"@storybook/builder-webpack5": "^6.5.13",
|
|
40
|
+
"@storybook/manager-webpack5": "^6.5.13",
|
|
39
41
|
"@storybook/react": "^6.2.6",
|
|
40
42
|
"@storybook/storybook-deployer": "^2.8.7",
|
|
41
43
|
"@testing-library/jest-dom": "^5.11.4",
|
|
@@ -52,7 +54,7 @@
|
|
|
52
54
|
"@typescript-eslint/parser": "^5.31.0",
|
|
53
55
|
"babel-eslint": "^10.1.0",
|
|
54
56
|
"babel-jest": "^29.0.2",
|
|
55
|
-
"babel-loader": "^
|
|
57
|
+
"babel-loader": "^9.1.0",
|
|
56
58
|
"eslint": "^7.9.0",
|
|
57
59
|
"eslint-config-prettier": "^8.2.0",
|
|
58
60
|
"eslint-plugin-jest": "^27.0.1",
|