@mrshmllw/smores-react 2.9.2 → 2.10.0

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.
@@ -1,4 +1,4 @@
1
- import { FC } from 'react';
1
+ import { FC, ReactNode } from 'react';
2
2
  import { MarginProps } from '../utils/space';
3
3
  export declare type AccordionProps = {
4
4
  title: string;
@@ -6,5 +6,6 @@ export declare type AccordionProps = {
6
6
  borderTop?: boolean;
7
7
  fullBorder?: boolean;
8
8
  onToggle?: (isOpen: boolean) => void;
9
+ children: ReactNode;
9
10
  } & MarginProps;
10
11
  export declare const Accordion: FC<AccordionProps>;
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
@@ -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 {};
@@ -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(Box, { mb: { custom: outlined ? 4 : 0 } }, renderAsTitle ? (React.createElement(Title, { htmlFor: id }, label)) : (React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id },
23
- label,
24
- required && React.createElement(Asterisk, null, "*"))))),
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(ErrorBox, null, errorMsg)));
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
@@ -1 +1 @@
1
- {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"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"}
@@ -8,4 +8,5 @@ export interface CommonFieldTypes extends MarginProps {
8
8
  renderAsTitle?: boolean;
9
9
  className?: string;
10
10
  outlined?: boolean;
11
+ assistiveText?: string;
11
12
  }
@@ -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(Legend, null, label)),
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;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAGtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAQ5B,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,MAAM,QAAE,KAAK,CAAU,CACpB;QAEL,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;CAI3B,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"}
@@ -1,4 +1,4 @@
1
- import { ReactNode, FC } from 'react';
1
+ import { FC, ReactNode } from 'react';
2
2
  export declare type ModalProps = {
3
3
  title?: string;
4
4
  icon?: string;
@@ -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", ml: "16px" },
54
+ React.createElement(Box, { flex: true, direction: "column", mx: "16px" },
47
55
  title && React.createElement(Title, null, title),
48
- React.createElement(Description, { tag: "p", typo: "base" }, description))));
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
- ${type === 'info-outline' && `border: 1px solid ${theme.colors.secondary}`};
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,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,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;AASvC,MAAM,MAAM,GAA2C;IACrD,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QACxC,IAAI,EAAE,MAAM;KACb;IACD,cAAc,EAAE;QACd,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACnC,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;QACzC,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,IAAI,EAAE,SAAS;KAChB;CACF,CAAA;AAWD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAMvD,EAAE,EAAE;QANmD,EACtD,SAAS,EACT,WAAW,EACX,IAAI,GAAG,MAAM,EACb,KAAK,OAEN,EADI,WAAW,cALwC,6CAMvD,CADe;IACV,OAAA,CACJ,oBAAC,OAAO,kBAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,IAAM,WAAW;QACxD,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,EAAC,IAAI,EAAC,MAAM,IAC7B,WAAW,CACA,CACV,CACE,CACX,CAAA;CAAA,CAAA;AAMD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE9B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAEK,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe;MAC9C,IAAI,KAAK,cAAc,IAAI,qBAAqB,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;GAK3E,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"}
1
+ {"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"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"}
@@ -7,4 +7,5 @@ declare const _default: {
7
7
  export default _default;
8
8
  export declare const Default: any;
9
9
  export declare const WithCustomDescription: any;
10
+ export declare const Clickable: any;
10
11
  export declare const Collection: any;
@@ -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"}
@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
7
7
  step((generator = generator.apply(thisArg, _arguments || [])).next());
8
8
  });
9
9
  };
10
- import { renderHook } from '@testing-library/react-hooks';
10
+ import { renderHook } from '@testing-library/react';
11
11
  import { smoresIdPrefix, useUniqueId } from './id';
12
12
  describe('useUniqueId', () => {
13
13
  it('should persist the same id across render', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -1 +1 @@
1
- {"version":3,"file":"id.test.js","sourceRoot":"","sources":["../../src/utils/id.test.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AAEzD,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAElD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,0CAA0C,EAAE,GAAS,EAAE;QACxD,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAE5C,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,cAAc,IAAI,CAAC,CAAA;QACvD,IAAI,CAAC,QAAQ,EAAE,CAAA;QACf,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,cAAc,IAAI,CAAC,CAAA;IACzD,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,4DAA4D,EAAE,GAAS,EAAE;QAC1E,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAC7C,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAE7C,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC7D,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,GAAS,EAAE;QACrD,MAAM,YAAY,GAAG,cAAc,CAAA;QACnC,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;QAExD,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAChD,CAAC,CAAA,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
1
+ {"version":3,"file":"id.test.js","sourceRoot":"","sources":["../../src/utils/id.test.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAEnD,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAElD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,0CAA0C,EAAE,GAAS,EAAE;QACxD,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAE5C,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,cAAc,IAAI,CAAC,CAAA;QACvD,IAAI,CAAC,QAAQ,EAAE,CAAA;QACf,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,cAAc,IAAI,CAAC,CAAA;IACzD,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,4DAA4D,EAAE,GAAS,EAAE;QAC1E,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAC7C,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAE7C,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC7D,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,GAAS,EAAE;QACrD,MAAM,YAAY,GAAG,cAAc,CAAA;QACnC,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;QAExD,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAChD,CAAC,CAAA,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mrshmllw/smores-react",
3
- "version": "2.9.2",
3
+ "version": "2.10.0",
4
4
  "main": "./dist/index.js",
5
5
  "description": "Collection of React components used by Marshmallow Technology",
6
6
  "keywords": [
@@ -36,15 +36,16 @@
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",
42
- "@testing-library/react": "^12.0.0",
43
- "@testing-library/react-hooks": "^8.0.0",
44
+ "@testing-library/react": "^13.4.0",
44
45
  "@types/jest": "^29.0.0",
45
46
  "@types/node": "^18.0.0",
46
- "@types/react": "^17.0.0",
47
- "@types/react-dom": "^17.0.9",
47
+ "@types/react": "^18.0.24",
48
+ "@types/react-dom": "^18.0.8",
48
49
  "@types/styled-components": "^5.1.3",
49
50
  "@types/testing-library__jest-dom": "^5.14.3",
50
51
  "@types/testing-library__react": "^10.2.0",
@@ -52,7 +53,7 @@
52
53
  "@typescript-eslint/parser": "^5.31.0",
53
54
  "babel-eslint": "^10.1.0",
54
55
  "babel-jest": "^29.0.2",
55
- "babel-loader": "^8.1.0",
56
+ "babel-loader": "^9.1.0",
56
57
  "eslint": "^7.9.0",
57
58
  "eslint-config-prettier": "^8.2.0",
58
59
  "eslint-plugin-jest": "^27.0.1",
@@ -64,15 +65,18 @@
64
65
  "jest-styled-components": "^7.0.3",
65
66
  "lint-staged": "^13.0.0",
66
67
  "prettier": "^2.1.2",
67
- "storybook-addon-performance": "^0.16.1"
68
+ "react": "^18.2.0",
69
+ "react-dom": "^18.2.0",
70
+ "styled-components": "^5.2.1",
71
+ "typescript": "^4.4.2"
68
72
  },
69
73
  "dependencies": {
70
74
  "date-fns": "^2.16.1",
71
- "polished": "^4.1.3",
72
- "react": "^16.8.0",
73
- "react-dom": "^16.8.0",
74
- "styled-components": "^5.2.1",
75
- "typescript": "^4.4.2"
75
+ "polished": "^4.1.3"
76
+ },
77
+ "peerDependencies": {
78
+ "react": "^16.8.0 || ^17 || ^18",
79
+ "react-dom": "^16.8.0 || ^17 || ^18"
76
80
  },
77
81
  "repository": {
78
82
  "type": "git",