@mrshmllw/smores-react 2.1.24 → 2.1.27
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 +2 -1
- package/dist/ActionDropdown/ActionDropdown.d.ts +1 -3
- package/dist/ActionDropdown/ActionDropdown.js.map +1 -1
- package/dist/Button/Button.js +12 -4
- package/dist/Button/Button.js.map +1 -1
- package/dist/CheckBox/CheckBox.d.ts +1 -1
- package/dist/CheckBox/CheckBox.js +10 -6
- package/dist/CheckBox/CheckBox.js.map +1 -1
- package/dist/CheckBox/index.d.ts +1 -1
- package/dist/CheckBox/index.js.map +1 -1
- package/dist/ConfirmationRadioButtons/Confirmation.d.ts +2 -1
- package/dist/ConfirmationRadioButtons/Confirmation.js +9 -2
- package/dist/ConfirmationRadioButtons/Confirmation.js.map +1 -1
- package/dist/ConfirmationRadioButtons/Confirmation.stories.d.ts +1 -0
- package/dist/ConfirmationRadioButtons/Confirmation.stories.js +8 -0
- package/dist/ConfirmationRadioButtons/Confirmation.stories.js.map +1 -1
- package/dist/Datepicker/Datepicker.js +2 -3
- package/dist/Datepicker/Datepicker.js.map +1 -1
- package/dist/Dropdown/Dropdown.d.ts +5 -5
- package/dist/Dropdown/Dropdown.js +5 -2
- package/dist/Dropdown/Dropdown.js.map +1 -1
- package/dist/Dropdown/Dropdown.stories.d.ts +7 -4
- package/dist/Dropdown/Dropdown.stories.js +9 -0
- package/dist/Dropdown/Dropdown.stories.js.map +1 -1
- package/dist/Message/Message.d.ts +3 -0
- package/dist/Message/Message.js +14 -5
- package/dist/Message/Message.js.map +1 -1
- package/dist/Message/Message.stories.js +1 -1
- package/dist/Message/Message.stories.js.map +1 -1
- package/dist/NumberInput/NumberInput.d.ts +1 -3
- package/dist/NumberInput/NumberInput.js +3 -1
- package/dist/NumberInput/NumberInput.js.map +1 -1
- package/dist/RadioButton/RadioButton.d.ts +1 -1
- package/dist/RadioButton/RadioButton.js +9 -5
- package/dist/RadioButton/RadioButton.js.map +1 -1
- package/dist/SearchInput/SearchInput.d.ts +1 -2
- package/dist/SearchInput/SearchInput.js +3 -1
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/SupportMessage/Collection.d.ts +2 -0
- package/dist/SupportMessage/Collection.js +40 -0
- package/dist/SupportMessage/Collection.js.map +1 -0
- package/dist/SupportMessage/SupportMessage.d.ts +10 -0
- package/dist/SupportMessage/SupportMessage.js +59 -0
- package/dist/SupportMessage/SupportMessage.js.map +1 -0
- package/dist/SupportMessage/SupportMessage.stories.d.ts +9 -0
- package/dist/SupportMessage/SupportMessage.stories.js +17 -0
- package/dist/SupportMessage/SupportMessage.stories.js.map +1 -0
- package/dist/SupportMessage/SupportMessage.test.d.ts +1 -0
- package/dist/SupportMessage/SupportMessage.test.js +30 -0
- package/dist/SupportMessage/SupportMessage.test.js.map +1 -0
- package/dist/SupportMessage/index.d.ts +1 -0
- package/dist/SupportMessage/index.js +2 -0
- package/dist/SupportMessage/index.js.map +1 -0
- package/dist/Tag/Tag.d.ts +11 -2
- package/dist/Tag/Tag.js +6 -4
- 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/TextInput/TextInput.d.ts +5 -15
- package/dist/TextInput/TextInput.js +5 -2
- package/dist/TextInput/TextInput.js.map +1 -1
- package/dist/TextInput/TextInput.stories.d.ts +3 -37
- package/dist/TextInput/TextInput.stories.js +12 -0
- package/dist/TextInput/TextInput.stories.js.map +1 -1
- package/dist/Textarea/Textarea.d.ts +3 -3
- package/dist/Textarea/Textarea.js +5 -2
- package/dist/Textarea/Textarea.js.map +1 -1
- package/dist/Textarea/Textarea.stories.d.ts +1 -0
- package/dist/Textarea/Textarea.stories.js +10 -0
- package/dist/Textarea/Textarea.stories.js.map +1 -1
- package/dist/Toggle/Toggle.d.ts +1 -1
- package/dist/Toggle/Toggle.stories.d.ts +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/setupTests.d.ts +1 -0
- package/dist/setupTests.js +2 -0
- package/dist/setupTests.js.map +1 -0
- package/dist/utils/deprecated.d.ts +9 -0
- package/dist/utils/deprecated.js +30 -0
- package/dist/utils/deprecated.js.map +1 -0
- package/dist/utils/id.d.ts +2 -0
- package/dist/utils/id.js +13 -0
- package/dist/utils/id.js.map +1 -0
- package/dist/utils/id.test.d.ts +1 -0
- package/dist/utils/id.test.js +30 -0
- package/dist/utils/id.test.js.map +1 -0
- package/package.json +10 -6
- package/dist/ActionDropdown/__tests__/__snapshots__/ActionDropdown.js.snap +0 -167
- package/dist/Box/__tests__/__snapshots__/Box.js.snap +0 -20
- package/dist/Button/__tests__/__snapshots__/Button.js.snap +0 -46
- package/dist/Card/__tests__/__snapshots__/Card.js.snap +0 -24
- package/dist/CheckBox/__tests__/__snapshots__/CheckBox.js.snap +0 -20
- 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/Dropdown/__tests__/__snapshots__/Dropdown.js.snap +0 -167
- package/dist/Emoji/__tests__/__snapshots__/Emoji.js.snap +0 -20
- package/dist/Icon/__tests__/__snapshots__/Icon.js.snap +0 -47
- package/dist/IconWrapper/__tests__/__snapshots__/IconWrapper.js.snap +0 -121
- package/dist/LabelledText/__tests__/__snapshots__/LabelledText.js.snap +0 -57
- package/dist/Loader/__tests__/__snapshots__/Loader.js.snap +0 -53
- package/dist/Message/__tests__/__snapshots__/Message.js.snap +0 -279
- package/dist/Modal/__tests__/__snapshots__/Modal.js.snap +0 -208
- package/dist/NumberInput/__tests__/__snapshots__/NumberInput.js.snap +0 -1398
- package/dist/Pagination/__tests__/__snapshots__/Pagination.js.snap +0 -273
- package/dist/RadioButton/__tests__/__snapshots__/RadioButton.js.snap +0 -146
- package/dist/Row/__tests__/__snapshots__/Row.js.snap +0 -96
- package/dist/SearchInput/__tests__/__snapshots__/SearchInput.js.snap +0 -146
- package/dist/Tag/__tests__/__snapshots__/Tag.js.snap +0 -54
- package/dist/Text/__tests__/__snapshots__/Text.js.snap +0 -34
- package/dist/TextInput/__tests__/__snapshots__/TextInput.js.snap +0 -74
- package/dist/Textarea/__tests__/__snapshots__/Textarea.js.snap +0 -271
- package/dist/Toggle/__tests__/__snapshots__/Toggle.js.snap +0 -70
@@ -3,11 +3,15 @@ import styled from 'styled-components';
|
|
3
3
|
import { focusOutline } from '../utils/focusOutline';
|
4
4
|
import { Box } from '../Box';
|
5
5
|
import { theme } from '../theme';
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
React.createElement(
|
6
|
+
import { useUniqueId } from '../utils/id';
|
7
|
+
export const RadioButton = ({ id: idProp, label, checked, value, onChange, }) => {
|
8
|
+
const id = useUniqueId(idProp);
|
9
|
+
return (React.createElement(Box, { flex: true, alignItems: "center" },
|
10
|
+
React.createElement(RadioInput, { id: id, type: "radio", checked: checked, value: value, onChange: onChange }),
|
11
|
+
React.createElement(RadioLabel, { htmlFor: id },
|
12
|
+
React.createElement(FakeInput, { checked: checked }),
|
13
|
+
React.createElement(Text, null, label))));
|
14
|
+
};
|
11
15
|
const FakeInput = styled.div `
|
12
16
|
width: 24px;
|
13
17
|
height: 24px;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../src/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../src/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAczC,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAChD,EAAE,EAAE,MAAM,EACV,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;QAC3B,oBAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB;QAEF,oBAAC,UAAU,IAAC,OAAO,EAAE,EAAE;YACrB,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,GAAI;YAC/B,oBAAC,IAAI,QAAE,KAAK,CAAQ,CACT,CACT,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAY;;;;sBAIlB,KAAK,CAAC,MAAM,CAAC,KAAK;;YAE5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CACxB,OAAO;IACL,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;CAC1C,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;WAKpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;CAIhC,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;IAM3B,YAAY,CAAC;IACb,QAAQ,EAAE,qBAAqB,UAAU,IAAI,SAAS,EAAE;CACzD,CAAC;CACH,CAAA;AAED,wDAAwD;AACxD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGvB,CAAA"}
|
@@ -5,7 +5,9 @@ import { Text } from '../Text';
|
|
5
5
|
import { Box } from '../Box';
|
6
6
|
import { theme } from '../theme';
|
7
7
|
import { Icon } from '../Icon';
|
8
|
-
|
8
|
+
import { useUniqueId } from '../utils/id';
|
9
|
+
export const SearchInput = ({ id: idProp, name = 'search_input', label, placeholder, searchList, onFound, resultsRelativePosition = false, outlined = false, showIcon = false, }) => {
|
10
|
+
const id = useUniqueId(idProp);
|
9
11
|
const [active, setActive] = useState(false);
|
10
12
|
const [list, setList] = useState([]);
|
11
13
|
const [selectedResult, setSelectedResult] = useState('');
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { Text } from '../Text';
|
4
|
+
import { Box } from '../Box';
|
5
|
+
import { SupportMessage } from './SupportMessage';
|
6
|
+
export const CollectionPage = () => {
|
7
|
+
return (React.createElement(Box, { flex: true, direction: "column" },
|
8
|
+
React.createElement(ContainerBox, null,
|
9
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type info-outline"),
|
10
|
+
React.createElement(SupportMessage, { type: "info-outline", description: "Info support message" })),
|
11
|
+
React.createElement(ContainerBox, null,
|
12
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type info - Default"),
|
13
|
+
React.createElement(SupportMessage, { type: "info", description: "Info support message" })),
|
14
|
+
React.createElement(ContainerBox, null,
|
15
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type info - With title"),
|
16
|
+
React.createElement(SupportMessage, { type: "info", title: "General info title", description: "Info support message" })),
|
17
|
+
React.createElement(ContainerBox, null,
|
18
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type alert - Default"),
|
19
|
+
React.createElement(SupportMessage, { type: "alert", description: "Alert support message" })),
|
20
|
+
React.createElement(ContainerBox, null,
|
21
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type alert - With title"),
|
22
|
+
React.createElement(SupportMessage, { type: "alert", title: "General alert title", description: "Alert support message" })),
|
23
|
+
React.createElement(ContainerBox, null,
|
24
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type warning - Default"),
|
25
|
+
React.createElement(SupportMessage, { type: "warning", description: "Warning support message" })),
|
26
|
+
React.createElement(ContainerBox, null,
|
27
|
+
React.createElement(Label, { tag: "span", typo: "header-small" }, "Type warning - With title"),
|
28
|
+
React.createElement(SupportMessage, { type: "warning", title: "General warning title", description: "Warning support message" }))));
|
29
|
+
};
|
30
|
+
const ContainerBox = styled(Box) `
|
31
|
+
margin-bottom: 16px;
|
32
|
+
display: flex;
|
33
|
+
align-items: center;
|
34
|
+
max-width: 550px;
|
35
|
+
`;
|
36
|
+
const Label = styled(Text) `
|
37
|
+
margin-right: 12px;
|
38
|
+
width: 600px;
|
39
|
+
`;
|
40
|
+
//# sourceMappingURL=Collection.js.map
|
@@ -0,0 +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,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAO,GAAG,EAAE;IACrC,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;QAC1B,oBAAC,YAAY;YACX,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,wBAE7B;YACR,oBAAC,cAAc,IACb,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,sBAAsB,GAClC,CACW;QAEf,oBAAC,YAAY;YACX,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,0BAE7B;YACR,oBAAC,cAAc,IAAC,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,sBAAsB,GAAG,CACpD;QAEf,oBAAC,YAAY;YACX,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,6BAE7B;YACR,oBAAC,cAAc,IACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,oBAAoB,EAC1B,WAAW,EAAC,sBAAsB,GAClC,CACW;QAEf,oBAAC,YAAY;YACX,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,2BAE7B;YACR,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,uBAAuB,GAAG,CACtD;QAEf,oBAAC,YAAY;YACX,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,8BAE7B;YACR,oBAAC,cAAc,IACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,qBAAqB,EAC3B,WAAW,EAAC,uBAAuB,GACnC,CACW;QAEf,oBAAC,YAAY;YACX,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,6BAE7B;YACR,oBAAC,cAAc,IAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,yBAAyB,GAAG,CAC1D;QAEf,oBAAC,YAAY;YACX,oBAAC,KAAK,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,gCAE7B;YACR,oBAAC,cAAc,IACb,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,uBAAuB,EAC7B,WAAW,EAAC,yBAAyB,GACrC,CACW,CACX,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;CAK/B,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGzB,CAAA"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { FC } from 'react';
|
2
|
+
declare type SupportMessageType = 'info' | 'info-outline' | 'alert' | 'warning';
|
3
|
+
export declare type SupportMessageProps = {
|
4
|
+
className?: string;
|
5
|
+
description: string;
|
6
|
+
type: SupportMessageType;
|
7
|
+
title?: string;
|
8
|
+
};
|
9
|
+
export declare const SupportMessage: FC<SupportMessageProps>;
|
10
|
+
export {};
|
@@ -0,0 +1,59 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled, { css } from 'styled-components';
|
3
|
+
import { lighten } from 'polished';
|
4
|
+
import { Box } from '../Box';
|
5
|
+
import { Icon } from '../Icon';
|
6
|
+
import { theme } from '../theme';
|
7
|
+
const styles = {
|
8
|
+
info: {
|
9
|
+
iconColor: 'secondary',
|
10
|
+
backgroundColor: theme.colors.background,
|
11
|
+
icon: 'info',
|
12
|
+
},
|
13
|
+
'info-outline': {
|
14
|
+
iconColor: 'secondary',
|
15
|
+
backgroundColor: theme.colors.white,
|
16
|
+
icon: 'info',
|
17
|
+
},
|
18
|
+
alert: {
|
19
|
+
iconColor: 'agentWarning',
|
20
|
+
backgroundColor: theme.colors.bgSecondary,
|
21
|
+
icon: 'alert',
|
22
|
+
},
|
23
|
+
warning: {
|
24
|
+
iconColor: 'error',
|
25
|
+
backgroundColor: lighten(0.45, theme.colors.error),
|
26
|
+
icon: 'warning',
|
27
|
+
},
|
28
|
+
};
|
29
|
+
export const SupportMessage = ({ className, description, type = 'info', title, }) => (React.createElement(Wrapper, { className: className, type: type },
|
30
|
+
React.createElement(IconWrapper, null,
|
31
|
+
React.createElement(Icon, { size: 24, render: styles[type].icon, color: styles[type].iconColor })),
|
32
|
+
React.createElement(ContentBox, { flex: true, direction: "column" },
|
33
|
+
title && React.createElement(Title, null, title),
|
34
|
+
description)));
|
35
|
+
const IconWrapper = styled(Box) `
|
36
|
+
align-self: flex-start;
|
37
|
+
`;
|
38
|
+
const Wrapper = styled.div(({ type }) => css `
|
39
|
+
align-items: center;
|
40
|
+
background-color: ${styles[type].backgroundColor};
|
41
|
+
${type === 'info-outline' && `border: 1px solid ${theme.colors.secondary}`};
|
42
|
+
border-radius: 8px;
|
43
|
+
padding: 16px;
|
44
|
+
display: flex;
|
45
|
+
width: 100%;
|
46
|
+
`);
|
47
|
+
const ContentBox = styled(Box) `
|
48
|
+
margin-left: 16px;
|
49
|
+
color: ${theme.colors.secondary};
|
50
|
+
font-size: 14px;
|
51
|
+
`;
|
52
|
+
const Title = styled.p `
|
53
|
+
font-size: 16px;
|
54
|
+
font-weight: ${theme.font.weight.medium};
|
55
|
+
color: ${theme.colors.secondary};
|
56
|
+
line-height: 20.8px;
|
57
|
+
margin-bottom: 4px;
|
58
|
+
`;
|
59
|
+
//# sourceMappingURL=SupportMessage.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,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,KAAK,EAAS,MAAM,UAAU,CAAA;AAQvC,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,EACtD,SAAS,EACT,WAAW,EACX,IAAI,GAAG,MAAM,EACb,KAAK,GACN,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI;IACvC,oBAAC,WAAW;QACV,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;IACd,oBAAC,UAAU,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;QAChC,KAAK,IAAI,oBAAC,KAAK,QAAE,KAAK,CAAS;QAC/B,WAAW,CACD,CACL,CACX,CAAA;AAMD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE9B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CACxB,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,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;WAEnB,KAAK,CAAC,MAAM,CAAC,SAAS;;CAEhC,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"}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { SupportMessageProps } from './SupportMessage';
|
3
|
+
declare const _default: {
|
4
|
+
title: string;
|
5
|
+
component: React.FC<SupportMessageProps>;
|
6
|
+
};
|
7
|
+
export default _default;
|
8
|
+
export declare const Default: any;
|
9
|
+
export declare const Collection: any;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { SupportMessage } from './SupportMessage';
|
3
|
+
import { CollectionPage } from './Collection';
|
4
|
+
export default {
|
5
|
+
title: 'SupportMessage',
|
6
|
+
component: SupportMessage,
|
7
|
+
};
|
8
|
+
const Template = (props) => (React.createElement(SupportMessage, Object.assign({}, props), "Support message for customer"));
|
9
|
+
export const Default = Template.bind({});
|
10
|
+
const supportMessageArgs = {
|
11
|
+
type: 'info',
|
12
|
+
title: undefined,
|
13
|
+
description: 'Some description text',
|
14
|
+
};
|
15
|
+
Default.args = supportMessageArgs;
|
16
|
+
export const Collection = CollectionPage.bind({});
|
17
|
+
//# sourceMappingURL=SupportMessage.stories.js.map
|
@@ -0,0 +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,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,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
import 'jest-styled-components';
|
@@ -0,0 +1,30 @@
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
8
|
+
});
|
9
|
+
};
|
10
|
+
import React from 'react';
|
11
|
+
import { render, screen } from '@testing-library/react';
|
12
|
+
import 'jest-styled-components';
|
13
|
+
import { SupportMessage } from './SupportMessage';
|
14
|
+
const supportMessageProps = {
|
15
|
+
description: 'Type info support message',
|
16
|
+
type: 'info',
|
17
|
+
};
|
18
|
+
describe('SupportMessage component', () => {
|
19
|
+
const { findByText } = screen;
|
20
|
+
it('renders the correct content for type info', () => __awaiter(void 0, void 0, void 0, function* () {
|
21
|
+
render(React.createElement(SupportMessage, Object.assign({}, supportMessageProps)));
|
22
|
+
expect(yield findByText('Type info support message')).toBeInTheDocument();
|
23
|
+
}));
|
24
|
+
it('renders the correct content for type info with title', () => __awaiter(void 0, void 0, void 0, function* () {
|
25
|
+
render(React.createElement(SupportMessage, Object.assign({}, supportMessageProps, { title: "Info title" })));
|
26
|
+
expect(yield findByText('Type info support message')).toBeInTheDocument();
|
27
|
+
expect(yield findByText('Info title')).toBeInTheDocument();
|
28
|
+
}));
|
29
|
+
});
|
30
|
+
//# sourceMappingURL=SupportMessage.test.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"SupportMessage.test.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.test.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AAEtE,MAAM,mBAAmB,GAAwB;IAC/C,WAAW,EAAE,2BAA2B;IACxC,IAAI,EAAE,MAAM;CACb,CAAA;AAED,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAA;IAC7B,EAAE,CAAC,2CAA2C,EAAE,GAAS,EAAE;QACzD,MAAM,CAAC,oBAAC,cAAc,oBAAK,mBAAmB,EAAI,CAAC,CAAA;QAEnD,MAAM,CAAC,MAAM,UAAU,CAAC,2BAA2B,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;IAC3E,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,sDAAsD,EAAE,GAAS,EAAE;QACpE,MAAM,CAAC,oBAAC,cAAc,oBAAK,mBAAmB,IAAE,KAAK,EAAC,YAAY,IAAG,CAAC,CAAA;QAEtE,MAAM,CAAC,MAAM,UAAU,CAAC,2BAA2B,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;QACzE,MAAM,CAAC,MAAM,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;IAC5D,CAAC,CAAA,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './SupportMessage';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SupportMessage/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
|
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,15 +2,17 @@ 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
|
-
height: 23px;
|
15
|
+
height: ${({ borderColor }) => (borderColor ? '23px' : '25px')};
|
14
16
|
padding: 5px 12px;
|
15
17
|
`;
|
16
18
|
const TagText = styled(Text) `
|
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;;;YAG/C,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;CAE/D,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"}
|
@@ -1,11 +1,7 @@
|
|
1
|
-
import React, { FormEvent
|
1
|
+
import React, { FormEvent } from 'react';
|
2
2
|
declare type DefaultProps = {
|
3
|
-
|
4
|
-
id: string;
|
5
|
-
/** className attribute to apply classes from props */
|
3
|
+
id?: string;
|
6
4
|
className?: string;
|
7
|
-
/** ref attribute for input */
|
8
|
-
ref?: RefObject<HTMLInputElement>;
|
9
5
|
/** Input type for proper browser support */
|
10
6
|
type?: 'text' | 'email' | 'password' | 'time' | 'date';
|
11
7
|
/** used to render outlined style */
|
@@ -28,6 +24,8 @@ declare type DefaultProps = {
|
|
28
24
|
trailingIcon?: string;
|
29
25
|
/** Disabled flag */
|
30
26
|
disabled?: boolean;
|
27
|
+
/** Required flag */
|
28
|
+
required?: boolean;
|
31
29
|
};
|
32
30
|
/** on change or on input required */
|
33
31
|
declare type TruncateProps = {
|
@@ -40,13 +38,5 @@ declare type TruncateProps = {
|
|
40
38
|
onInputChange: (e: FormEvent<HTMLInputElement>) => void;
|
41
39
|
};
|
42
40
|
export declare type TextInputProps = DefaultProps & TruncateProps;
|
43
|
-
export declare const TextInput: React.ForwardRefExoticComponent<
|
44
|
-
/** on change is required and on input optional */
|
45
|
-
onChange: (e: string) => void;
|
46
|
-
onInputChange?: ((e: FormEvent<HTMLInputElement>) => void) | undefined;
|
47
|
-
}, "type" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "placeholder" | "onBlur" | "onChange" | "outlined" | "errorMsg" | "onInputChange" | "trailingIcon"> | Pick<DefaultProps & {
|
48
|
-
/** on input is required and on change optional */
|
49
|
-
onChange?: ((e: string) => void) | undefined;
|
50
|
-
onInputChange: (e: FormEvent<HTMLInputElement>) => void;
|
51
|
-
}, "type" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "placeholder" | "onBlur" | "onChange" | "outlined" | "errorMsg" | "onInputChange" | "trailingIcon">) & React.RefAttributes<HTMLInputElement>>;
|
41
|
+
export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
|
52
42
|
export {};
|
@@ -5,10 +5,13 @@ import { Box } from '../Box';
|
|
5
5
|
import { Text } from '../Text';
|
6
6
|
import { Icon } from '../Icon';
|
7
7
|
import { theme } from '../theme';
|
8
|
-
|
8
|
+
import { useUniqueId } from '../utils/id';
|
9
|
+
export const TextInput = forwardRef(function TextInput({ id: idProp, className = '', type = 'text', placeholder, label, name, value, outlined = false, error = false, errorMsg, trailingIcon, onBlur, onChange, onInputChange, disabled = false, required = false, }, ref) {
|
10
|
+
const id = useUniqueId(idProp);
|
9
11
|
return (React.createElement(Container, { className: className, hasLabel: !!label, hasError: !!errorMsg },
|
10
12
|
label && (React.createElement(Box, { mb: outlined ? '4px' : '0px' },
|
11
|
-
React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label)
|
13
|
+
React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label),
|
14
|
+
required && (React.createElement(Text, { tag: "label", color: "error", typo: "label" }, "*")))),
|
12
15
|
React.createElement(Content, { value: value, outlined: outlined, error: error },
|
13
16
|
React.createElement(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, placeholder: placeholder, value: value, error: error, outlined: outlined, autoComplete: "off", onChange: (e) => {
|
14
17
|
onChange && onChange(e.currentTarget.value);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
1
|
+
{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}
|
@@ -1,43 +1,8 @@
|
|
1
1
|
import React from 'react';
|
2
|
+
import { TextInputProps } from './TextInput';
|
2
3
|
declare const _default: {
|
3
4
|
title: string;
|
4
|
-
component: React.ForwardRefExoticComponent<
|
5
|
-
id: string;
|
6
|
-
className?: string | undefined;
|
7
|
-
ref?: React.RefObject<HTMLInputElement> | undefined;
|
8
|
-
type?: "password" | "time" | "text" | "email" | "date" | undefined;
|
9
|
-
outlined?: boolean | undefined;
|
10
|
-
placeholder: string;
|
11
|
-
label?: string | undefined;
|
12
|
-
name?: string | undefined;
|
13
|
-
value: string;
|
14
|
-
error?: boolean | undefined;
|
15
|
-
errorMsg?: string | undefined;
|
16
|
-
onBlur?: ((e: React.FormEvent<HTMLInputElement>) => void) | undefined;
|
17
|
-
trailingIcon?: string | undefined;
|
18
|
-
disabled?: boolean | undefined;
|
19
|
-
} & {
|
20
|
-
onChange: (e: string) => void;
|
21
|
-
onInputChange?: ((e: React.FormEvent<HTMLInputElement>) => void) | undefined;
|
22
|
-
}, "type" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "placeholder" | "onBlur" | "onChange" | "outlined" | "errorMsg" | "onInputChange" | "trailingIcon"> | Pick<{
|
23
|
-
id: string;
|
24
|
-
className?: string | undefined;
|
25
|
-
ref?: React.RefObject<HTMLInputElement> | undefined;
|
26
|
-
type?: "password" | "time" | "text" | "email" | "date" | undefined;
|
27
|
-
outlined?: boolean | undefined;
|
28
|
-
placeholder: string;
|
29
|
-
label?: string | undefined;
|
30
|
-
name?: string | undefined;
|
31
|
-
value: string;
|
32
|
-
error?: boolean | undefined;
|
33
|
-
errorMsg?: string | undefined;
|
34
|
-
onBlur?: ((e: React.FormEvent<HTMLInputElement>) => void) | undefined;
|
35
|
-
trailingIcon?: string | undefined;
|
36
|
-
disabled?: boolean | undefined;
|
37
|
-
} & {
|
38
|
-
onChange?: ((e: string) => void) | undefined;
|
39
|
-
onInputChange: (e: React.FormEvent<HTMLInputElement>) => void;
|
40
|
-
}, "type" | "error" | "id" | "name" | "value" | "label" | "className" | "disabled" | "placeholder" | "onBlur" | "onChange" | "outlined" | "errorMsg" | "onInputChange" | "trailingIcon">) & React.RefAttributes<HTMLInputElement>>;
|
5
|
+
component: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
|
41
6
|
argTypes: {
|
42
7
|
onChange: {
|
43
8
|
action: string;
|
@@ -54,4 +19,5 @@ export declare const WithOutlineError: any;
|
|
54
19
|
export declare const WithLabel: any;
|
55
20
|
export declare const WithIcon: any;
|
56
21
|
export declare const Disabled: any;
|
22
|
+
export declare const Required: any;
|
57
23
|
export declare const WorkingExample: any;
|
@@ -105,6 +105,18 @@ Disabled.args = {
|
|
105
105
|
label: 'label',
|
106
106
|
disabled: true,
|
107
107
|
};
|
108
|
+
export const Required = Template.bind({});
|
109
|
+
Required.args = {
|
110
|
+
id: 'textInput',
|
111
|
+
name: 'textInput',
|
112
|
+
placeholder: 'Enter name',
|
113
|
+
onChange: noop,
|
114
|
+
onInputChange: noop,
|
115
|
+
onBlur: noop,
|
116
|
+
label: 'Please enter your name',
|
117
|
+
outlined: true,
|
118
|
+
required: true,
|
119
|
+
};
|
108
120
|
const WorkingExampleTemplate = () => React.createElement(Container, null);
|
109
121
|
export const WorkingExample = WorkingExampleTemplate.bind({});
|
110
122
|
//# sourceMappingURL=TextInput.stories.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextInput.stories.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAA;AAEpE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;CACb,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,OAAO;CACd,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE7C,YAAY,CAAC,IAAI,GAAG;IAClB,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,UAAU;CACjB,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,+BAA+B;CAC1C,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE5C,WAAW,CAAC,IAAI,GAAG;IACjB,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;CACb,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,gBAAgB,CAAC,IAAI,GAAG;IACtB,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,+BAA+B;CAC1C,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,IAAI;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
1
|
+
{"version":3,"file":"TextInput.stories.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"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"}
|
@@ -1,8 +1,6 @@
|
|
1
1
|
import React, { FormEvent } from 'react';
|
2
2
|
declare type BaseProps = {
|
3
|
-
|
4
|
-
id: string;
|
5
|
-
/** className attribute to apply classses from props */
|
3
|
+
id?: string;
|
6
4
|
className?: string;
|
7
5
|
/** Placeholder */
|
8
6
|
placeholder?: string;
|
@@ -26,6 +24,8 @@ declare type BaseProps = {
|
|
26
24
|
onBlur?: (e: FormEvent<HTMLTextAreaElement>) => void;
|
27
25
|
/** number of rows of input */
|
28
26
|
rows?: number;
|
27
|
+
/** Required flag */
|
28
|
+
required?: boolean;
|
29
29
|
};
|
30
30
|
/** on change or on input required */
|
31
31
|
declare type TruncateProps = {
|
@@ -4,10 +4,13 @@ import { darken } from 'polished';
|
|
4
4
|
import { Text } from '../Text';
|
5
5
|
import { Box } from '../Box';
|
6
6
|
import { theme } from '../theme';
|
7
|
-
|
7
|
+
import { useUniqueId } from '../utils/id';
|
8
|
+
export const Textarea = forwardRef(function Textarea({ id: idProp, name, label, value, onChange, onInputChange, className, resize = 'none', error = false, errorMsg, placeholder, disabled = false, maxLength, onBlur, rows = 4, required = false, }, ref) {
|
9
|
+
const id = useUniqueId(idProp);
|
8
10
|
return (React.createElement(Box, { flex: true, direction: "column", className: className },
|
9
11
|
label && (React.createElement(Box, { mb: "4px" },
|
10
|
-
React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label)
|
12
|
+
React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label),
|
13
|
+
required && (React.createElement(Text, { tag: "label", color: "error", typo: "label" }, "*")))),
|
11
14
|
React.createElement(Box, { flex: true, direction: "column" },
|
12
15
|
React.createElement(Field, { error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
|
13
16
|
onChange && onChange(e.currentTarget.value);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2B,UAAU,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"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"}
|
@@ -38,6 +38,16 @@ Error.args = {
|
|
38
38
|
error: true,
|
39
39
|
errorMsg: 'Something really quite terrible has gone wrong here!',
|
40
40
|
};
|
41
|
+
export const Required = Template.bind({});
|
42
|
+
Required.args = {
|
43
|
+
id: 'textarea_id',
|
44
|
+
label: 'Textarea label',
|
45
|
+
value: '',
|
46
|
+
onChange: noop,
|
47
|
+
disabled: false,
|
48
|
+
placeholder: 'Here is some placeholder text.',
|
49
|
+
required: true,
|
50
|
+
};
|
41
51
|
const WorkingExampleTemplate = () => React.createElement(Container, null);
|
42
52
|
export const WorkingExample = WorkingExampleTemplate.bind({});
|
43
53
|
//# sourceMappingURL=Textarea.stories.js.map
|