@mrshmllw/smores-react 2.19.3 → 3.0.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.
Files changed (276) hide show
  1. package/dist/Accordion/Accordion.d.ts +1 -0
  2. package/dist/Accordion/Accordion.js +16 -12
  3. package/dist/Accordion/Accordion.js.map +1 -1
  4. package/dist/Accordion/Accordion.stories.d.ts +1 -2
  5. package/dist/Accordion/Accordion.stories.js +2 -8
  6. package/dist/Accordion/Accordion.stories.js.map +1 -1
  7. package/dist/Accordion/Collection.d.ts +2 -0
  8. package/dist/Accordion/Collection.js +52 -0
  9. package/dist/Accordion/Collection.js.map +1 -0
  10. package/dist/Accordion/__tests__/Accordion.js +9 -0
  11. package/dist/Accordion/__tests__/Accordion.js.map +1 -0
  12. package/dist/ActionDropdown/ActionDropdown.js +7 -7
  13. package/dist/ActionDropdown/ActionDropdown.js.map +1 -1
  14. package/dist/ActionDropdown/ActionDropdown.stories.js +1 -1
  15. package/dist/ActionDropdown/Container.js +16 -10
  16. package/dist/ActionDropdown/Container.js.map +1 -1
  17. package/dist/ActionDropdown/List.js +3 -3
  18. package/dist/ActionDropdown/List.js.map +1 -1
  19. package/dist/ActionDropdown/__tests__/ActionDropdown.js +3 -3
  20. package/dist/ActionDropdown/__tests__/ActionDropdown.js.map +1 -1
  21. package/dist/Banner/Banner.stories.d.ts +9 -0
  22. package/dist/Banner/Banner.stories.js +86 -0
  23. package/dist/Banner/Banner.stories.js.map +1 -0
  24. package/dist/Banner/BannerContainer.d.ts +7 -0
  25. package/dist/Banner/BannerContainer.js +40 -0
  26. package/dist/Banner/BannerContainer.js.map +1 -0
  27. package/dist/Banner/BannerItem.d.ts +7 -0
  28. package/dist/Banner/BannerItem.js +64 -0
  29. package/dist/Banner/BannerItem.js.map +1 -0
  30. package/dist/Banner/hooks.d.ts +3 -0
  31. package/dist/Banner/hooks.js +6 -0
  32. package/dist/Banner/hooks.js.map +1 -0
  33. package/dist/Banner/index.d.ts +2 -0
  34. package/dist/Banner/index.js +3 -0
  35. package/dist/Banner/index.js.map +1 -0
  36. package/dist/Banner/types.d.ts +18 -0
  37. package/dist/Banner/types.js +2 -0
  38. package/dist/Banner/types.js.map +1 -0
  39. package/dist/Box/Box.stories.js +2 -2
  40. package/dist/Box/Box.stories.js.map +1 -1
  41. package/dist/BrandCard/BrandCard.d.ts +27 -0
  42. package/dist/BrandCard/BrandCard.js +60 -0
  43. package/dist/BrandCard/BrandCard.js.map +1 -0
  44. package/dist/BrandCard/BrandCard.stories.d.ts +11 -0
  45. package/dist/BrandCard/BrandCard.stories.js +54 -0
  46. package/dist/BrandCard/BrandCard.stories.js.map +1 -0
  47. package/dist/BrandCard/__tests__/BrandCard.js +9 -0
  48. package/dist/BrandCard/__tests__/BrandCard.js.map +1 -0
  49. package/dist/BrandCard/index.d.ts +1 -0
  50. package/dist/BrandCard/index.js +2 -0
  51. package/dist/BrandCard/index.js.map +1 -0
  52. package/dist/Button/Button.d.ts +4 -6
  53. package/dist/Button/Button.js +52 -54
  54. package/dist/Button/Button.js.map +1 -1
  55. package/dist/Button/Button.stories.js +1 -1
  56. package/dist/Button/Collection.d.ts +2 -0
  57. package/dist/Button/Collection.js +4 -2
  58. package/dist/Button/Collection.js.map +1 -1
  59. package/dist/Button/LegacyButton.js +6 -6
  60. package/dist/Button/LegacyButton.js.map +1 -1
  61. package/dist/Button/__tests__/Button.js.map +1 -1
  62. package/dist/Card/Card.d.ts +19 -1
  63. package/dist/Card/Card.js +42 -10
  64. package/dist/Card/Card.js.map +1 -1
  65. package/dist/Card/Card.stories.d.ts +8 -4
  66. package/dist/Card/Card.stories.js +74 -18
  67. package/dist/Card/Card.stories.js.map +1 -1
  68. package/dist/CheckBox/CheckBox.js +39 -16
  69. package/dist/CheckBox/CheckBox.js.map +1 -1
  70. package/dist/Chip/Chip.js +15 -9
  71. package/dist/Chip/Chip.js.map +1 -1
  72. package/dist/Datepicker/Datepicker.js +23 -15
  73. package/dist/Datepicker/Datepicker.js.map +1 -1
  74. package/dist/Datepicker/DatesList.js +18 -10
  75. package/dist/Datepicker/DatesList.js.map +1 -1
  76. package/dist/Divider/Divider.js +1 -1
  77. package/dist/Divider/Divider.js.map +1 -1
  78. package/dist/Dropdown/Collection.d.ts +2 -0
  79. package/dist/Dropdown/Collection.js +91 -0
  80. package/dist/Dropdown/Collection.js.map +1 -0
  81. package/dist/Dropdown/Dropdown.d.ts +2 -1
  82. package/dist/Dropdown/Dropdown.js +24 -30
  83. package/dist/Dropdown/Dropdown.js.map +1 -1
  84. package/dist/Dropdown/Dropdown.stories.d.ts +2 -16
  85. package/dist/Dropdown/Dropdown.stories.js +7 -156
  86. package/dist/Dropdown/Dropdown.stories.js.map +1 -1
  87. package/dist/Icon/Icon.js +1 -1
  88. package/dist/Icon/Icon.stories.js +2 -2
  89. package/dist/IconStrict/IconStrict.d.ts +20 -0
  90. package/dist/IconStrict/IconStrict.js +50 -0
  91. package/dist/IconStrict/IconStrict.js.map +1 -0
  92. package/dist/IconStrict/IconStrict.stories.d.ts +11 -0
  93. package/dist/IconStrict/IconStrict.stories.js +33 -0
  94. package/dist/IconStrict/IconStrict.stories.js.map +1 -0
  95. package/dist/IconStrict/__tests__/IconStrict.js +9 -0
  96. package/dist/IconStrict/__tests__/IconStrict.js.map +1 -0
  97. package/dist/IconStrict/index.d.ts +1 -0
  98. package/dist/IconStrict/index.js +2 -0
  99. package/dist/IconStrict/index.js.map +1 -0
  100. package/dist/IconWrapper/IconWrapper.js +2 -2
  101. package/dist/IconWrapper/IconWrapper.js.map +1 -1
  102. package/dist/LabelledText/LabelledText.js +1 -1
  103. package/dist/LabelledText/LabelledText.js.map +1 -1
  104. package/dist/Link/Link.d.ts +3 -0
  105. package/dist/Link/Link.js +10 -13
  106. package/dist/Link/Link.js.map +1 -1
  107. package/dist/Link/Link.stories.d.ts +2 -0
  108. package/dist/Link/Link.stories.js +5 -1
  109. package/dist/Link/Link.stories.js.map +1 -1
  110. package/dist/Loader/Loader.js +1 -1
  111. package/dist/Loader/Loader.js.map +1 -1
  112. package/dist/Loader/Loader.stories.d.ts +1 -1
  113. package/dist/Loader/Loader.stories.js +3 -3
  114. package/dist/Loader/Loader.stories.js.map +1 -1
  115. package/dist/Loader/__tests__/Loader.js +1 -1
  116. package/dist/Loader/__tests__/Loader.js.map +1 -1
  117. package/dist/Modal/Modal.js +6 -23
  118. package/dist/Modal/Modal.js.map +1 -1
  119. package/dist/NumberInput/Collection.d.ts +2 -0
  120. package/dist/NumberInput/Collection.js +97 -0
  121. package/dist/NumberInput/Collection.js.map +1 -0
  122. package/dist/NumberInput/NumberInput.d.ts +1 -6
  123. package/dist/NumberInput/NumberInput.js +13 -89
  124. package/dist/NumberInput/NumberInput.js.map +1 -1
  125. package/dist/NumberInput/NumberInput.stories.d.ts +2 -7
  126. package/dist/NumberInput/NumberInput.stories.js +5 -73
  127. package/dist/NumberInput/NumberInput.stories.js.map +1 -1
  128. package/dist/Pagination/Pagination.js +43 -12
  129. package/dist/Pagination/Pagination.js.map +1 -1
  130. package/dist/Pagination/Pagination.stories.js +8 -1
  131. package/dist/Pagination/Pagination.stories.js.map +1 -1
  132. package/dist/RadioGroup/RadioElement.js +4 -4
  133. package/dist/RadioGroup/RadioElement.js.map +1 -1
  134. package/dist/RadioGroup/RadioGroup.d.ts +4 -0
  135. package/dist/RadioGroup/RadioGroup.js +2 -2
  136. package/dist/RadioGroup/RadioGroup.js.map +1 -1
  137. package/dist/RadioGroup/RadioGroup.stories.d.ts +3 -0
  138. package/dist/RadioGroup/RadioGroup.stories.js +2 -0
  139. package/dist/RadioGroup/RadioGroup.stories.js.map +1 -1
  140. package/dist/RadioGroup/RadioItem.d.ts +2 -0
  141. package/dist/RadioGroup/RadioItem.js +25 -9
  142. package/dist/RadioGroup/RadioItem.js.map +1 -1
  143. package/dist/Row/Row.js +14 -8
  144. package/dist/Row/Row.js.map +1 -1
  145. package/dist/Row/Row.stories.js +1 -1
  146. package/dist/SearchInput/Container.js +2 -2
  147. package/dist/SearchInput/Container.js.map +1 -1
  148. package/dist/SearchInput/SearchInput.d.ts +0 -2
  149. package/dist/SearchInput/SearchInput.js +8 -55
  150. package/dist/SearchInput/SearchInput.js.map +1 -1
  151. package/dist/SearchInput/SearchInput.stories.d.ts +0 -1
  152. package/dist/SearchInput/SearchInput.stories.js +0 -5
  153. package/dist/SearchInput/SearchInput.stories.js.map +1 -1
  154. package/dist/SearchInput/SearchOptions.d.ts +0 -2
  155. package/dist/SearchInput/SearchOptions.js +12 -16
  156. package/dist/SearchInput/SearchOptions.js.map +1 -1
  157. package/dist/Snackbar/SnackbarItem.js +5 -5
  158. package/dist/Snackbar/SnackbarItem.js.map +1 -1
  159. package/dist/SupportMessage/Collection.js +6 -1
  160. package/dist/SupportMessage/Collection.js.map +1 -1
  161. package/dist/SupportMessage/SupportMessage.d.ts +1 -1
  162. package/dist/SupportMessage/SupportMessage.js +27 -26
  163. package/dist/SupportMessage/SupportMessage.js.map +1 -1
  164. package/dist/Tag/Collection.d.ts +2 -0
  165. package/dist/Tag/Collection.js +77 -0
  166. package/dist/Tag/Collection.js.map +1 -0
  167. package/dist/Tag/Tag.d.ts +3 -13
  168. package/dist/Tag/Tag.js +7 -8
  169. package/dist/Tag/Tag.js.map +1 -1
  170. package/dist/Tag/Tag.stories.d.ts +1 -1
  171. package/dist/Tag/Tag.stories.js +5 -9
  172. package/dist/Tag/Tag.stories.js.map +1 -1
  173. package/dist/Tag/__tests__/Tag.js +1 -1
  174. package/dist/Tag/__tests__/Tag.js.map +1 -1
  175. package/dist/Text/Text.js +1 -1
  176. package/dist/Text/Text.stories.js +4 -4
  177. package/dist/Text/Text.stories.js.map +1 -1
  178. package/dist/Text/fontMapping.js +1 -1
  179. package/dist/TextInput/Collection.d.ts +2 -0
  180. package/dist/TextInput/Collection.js +69 -0
  181. package/dist/TextInput/Collection.js.map +1 -0
  182. package/dist/TextInput/TextInput.d.ts +0 -3
  183. package/dist/TextInput/TextInput.js +7 -60
  184. package/dist/TextInput/TextInput.js.map +1 -1
  185. package/dist/TextInput/TextInput.stories.d.ts +2 -10
  186. package/dist/TextInput/TextInput.stories.js +5 -111
  187. package/dist/TextInput/TextInput.stories.js.map +1 -1
  188. package/dist/Textarea/Container.js +1 -1
  189. package/dist/Textarea/Container.js.map +1 -1
  190. package/dist/Textarea/Textarea.d.ts +1 -0
  191. package/dist/Textarea/Textarea.js +10 -16
  192. package/dist/Textarea/Textarea.js.map +1 -1
  193. package/dist/Textarea/Textarea.stories.js +2 -0
  194. package/dist/Textarea/Textarea.stories.js.map +1 -1
  195. package/dist/Toggle/Toggle.js +19 -13
  196. package/dist/Toggle/Toggle.js.map +1 -1
  197. package/dist/Tooltip/Tooltip.d.ts +3 -3
  198. package/dist/Tooltip/Tooltip.js +16 -13
  199. package/dist/Tooltip/Tooltip.js.map +1 -1
  200. package/dist/Tooltip/Tooltip.stories.d.ts +1 -0
  201. package/dist/Tooltip/Tooltip.stories.js +15 -4
  202. package/dist/Tooltip/Tooltip.stories.js.map +1 -1
  203. package/dist/colors.stories.js +37 -11
  204. package/dist/colors.stories.js.map +1 -1
  205. package/dist/fields/Field/Field.d.ts +0 -1
  206. package/dist/fields/Field/Field.js.map +1 -1
  207. package/dist/fields/Fieldset/Fieldset.js +1 -1
  208. package/dist/fields/Fieldset/Fieldset.js.map +1 -1
  209. package/dist/fields/commonFieldTypes.d.ts +4 -3
  210. package/dist/fields/components/CommonInput.d.ts +18 -0
  211. package/dist/fields/components/CommonInput.js +64 -0
  212. package/dist/fields/components/CommonInput.js.map +1 -0
  213. package/dist/fields/components/InternalField.d.ts +3 -3
  214. package/dist/fields/components/InternalField.js +7 -7
  215. package/dist/fields/components/InternalField.js.map +1 -1
  216. package/dist/fields/components/Placeholder.js +3 -3
  217. package/dist/fields/components/Placeholder.js.map +1 -1
  218. package/dist/fontStyle.js +2 -2
  219. package/dist/index.d.ts +0 -3
  220. package/dist/index.js +0 -3
  221. package/dist/index.js.map +1 -1
  222. package/dist/theme.d.ts +58 -28
  223. package/dist/theme.js +34 -18
  224. package/dist/theme.js.map +1 -1
  225. package/dist/utils/focusOutline.d.ts +1 -0
  226. package/dist/utils/focusOutline.js +7 -1
  227. package/dist/utils/focusOutline.js.map +1 -1
  228. package/package.json +2 -1
  229. package/dist/ConfirmationRadioButtons/Confirmation.d.ts +0 -17
  230. package/dist/ConfirmationRadioButtons/Confirmation.js +0 -100
  231. package/dist/ConfirmationRadioButtons/Confirmation.js.map +0 -1
  232. package/dist/ConfirmationRadioButtons/Confirmation.stories.d.ts +0 -21
  233. package/dist/ConfirmationRadioButtons/Confirmation.stories.js +0 -76
  234. package/dist/ConfirmationRadioButtons/Confirmation.stories.js.map +0 -1
  235. package/dist/ConfirmationRadioButtons/Container.d.ts +0 -2
  236. package/dist/ConfirmationRadioButtons/Container.js +0 -8
  237. package/dist/ConfirmationRadioButtons/Container.js.map +0 -1
  238. package/dist/ConfirmationRadioButtons/RadioButtonStyled.d.ts +0 -17
  239. package/dist/ConfirmationRadioButtons/RadioButtonStyled.js +0 -41
  240. package/dist/ConfirmationRadioButtons/RadioButtonStyled.js.map +0 -1
  241. package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js +0 -8
  242. package/dist/ConfirmationRadioButtons/__tests__/Confirmation.js.map +0 -1
  243. package/dist/ConfirmationRadioButtons/index.d.ts +0 -1
  244. package/dist/ConfirmationRadioButtons/index.js +0 -2
  245. package/dist/ConfirmationRadioButtons/index.js.map +0 -1
  246. package/dist/Dropdown/__tests__/Dropdown.js +0 -80
  247. package/dist/Dropdown/__tests__/Dropdown.js.map +0 -1
  248. package/dist/Message/Message.d.ts +0 -21
  249. package/dist/Message/Message.js +0 -45
  250. package/dist/Message/Message.js.map +0 -1
  251. package/dist/Message/Message.stories.d.ts +0 -13
  252. package/dist/Message/Message.stories.js +0 -38
  253. package/dist/Message/Message.stories.js.map +0 -1
  254. package/dist/Message/__tests__/Message.js +0 -26
  255. package/dist/Message/__tests__/Message.js.map +0 -1
  256. package/dist/Message/index.d.ts +0 -1
  257. package/dist/Message/index.js +0 -2
  258. package/dist/Message/index.js.map +0 -1
  259. package/dist/RadioButton/Container.d.ts +0 -2
  260. package/dist/RadioButton/Container.js +0 -9
  261. package/dist/RadioButton/Container.js.map +0 -1
  262. package/dist/RadioButton/RadioButton.d.ts +0 -10
  263. package/dist/RadioButton/RadioButton.js +0 -68
  264. package/dist/RadioButton/RadioButton.js.map +0 -1
  265. package/dist/RadioButton/RadioButton.stories.d.ts +0 -15
  266. package/dist/RadioButton/RadioButton.stories.js +0 -29
  267. package/dist/RadioButton/RadioButton.stories.js.map +0 -1
  268. package/dist/RadioButton/__tests__/RadioButton.d.ts +0 -1
  269. package/dist/RadioButton/__tests__/RadioButton.js +0 -13
  270. package/dist/RadioButton/__tests__/RadioButton.js.map +0 -1
  271. package/dist/RadioButton/index.d.ts +0 -1
  272. package/dist/RadioButton/index.js +0 -2
  273. package/dist/RadioButton/index.js.map +0 -1
  274. /package/dist/{ConfirmationRadioButtons/__tests__/Confirmation.d.ts → Accordion/__tests__/Accordion.d.ts} +0 -0
  275. /package/dist/{Dropdown/__tests__/Dropdown.d.ts → BrandCard/__tests__/BrandCard.d.ts} +0 -0
  276. /package/dist/{Message/__tests__/Message.d.ts → IconStrict/__tests__/IconStrict.d.ts} +0 -0
package/dist/Text/Text.js CHANGED
@@ -16,7 +16,7 @@ import { linkStyleOverride } from '../Link/Link';
16
16
  import { Box } from '../Box';
17
17
  import { fontStyleMapping } from './fontMapping';
18
18
  export const Text = forwardRef((_a, ref) => {
19
- var { children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'secondary', cursor = 'inherit', title = '' } = _a, props = __rest(_a, ["children", "typo", "className", "tag", "align", "color", "cursor", "title"]);
19
+ var { children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'liquorice', cursor = 'inherit', title = '' } = _a, props = __rest(_a, ["children", "typo", "className", "tag", "align", "color", "cursor", "title"]);
20
20
  return (React.createElement(Container, Object.assign({ as: tag, className: className, typo: typo, align: align, color: color, cursor: cursor, title: title }, props, { ref: ref }), children));
21
21
  });
22
22
  Text.displayName = 'Text';
@@ -28,9 +28,9 @@ const TypoCollection = ({ typos, }) => {
28
28
  React.createElement(Text, { tag: "p", typo: "base" }, "Single Line"),
29
29
  React.createElement(Text, { tag: "p", typo: "base" }, "Paragraph")),
30
30
  typos.map((typo) => (React.createElement(Grid, { key: typo },
31
- React.createElement(Text, { tag: "p", typo: "base", color: "subtext" }, typo),
32
- React.createElement(Text, { tag: "p", typo: typo, color: "secondary" }, "They waited patiently for what seemed a very long time."),
33
- !['hero-alternate', 'hero', 'label'].includes(typo) && (React.createElement(Text, { tag: "p", typo: typo, color: "secondary" }, "They waited patiently for what seemed a very long time. They waited patiently for what seemed a very long time.")))))));
31
+ React.createElement(Text, { tag: "p", typo: "base", color: "sesame" }, typo),
32
+ React.createElement(Text, { tag: "p", typo: typo, color: "liquorice" }, "They waited patiently for what seemed a very long time."),
33
+ !['hero-alternate', 'hero', 'label'].includes(typo) && (React.createElement(Text, { tag: "p", typo: typo, color: "liquorice" }, "They waited patiently for what seemed a very long time. They waited patiently for what seemed a very long time.")))))));
34
34
  };
35
35
  const Grid = styled(Box) `
36
36
  display: grid;
@@ -48,7 +48,7 @@ export const Label = Template.bind({});
48
48
  Label.args = {
49
49
  tag: 'label',
50
50
  typo: 'label',
51
- color: 'secondary',
51
+ color: 'liquorice',
52
52
  };
53
53
  export const WithTitle = Template.bind({});
54
54
  WithTitle.args = {
@@ -1 +1 @@
1
- {"version":3,"file":"Text.stories.js","sourceRoot":"","sources":["../../src/Text/Text.stories.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Text.stories.js","sourceRoot":"","sources":["../../src/Text/Text.stories.tsx"],"names":[],"mappings":"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"}
@@ -2,7 +2,7 @@ import { theme } from '../theme';
2
2
  export const fontStyleMapping = {
3
3
  'hero-alternate': `
4
4
  font-size: 40px;
5
- font-family: 'ClearfaceITC';
5
+ font-family: 'MarshmallowYouth';
6
6
  font-weight: ${theme.font.weight.bold};
7
7
  line-height: 44px;
8
8
 
@@ -0,0 +1,2 @@
1
+ import { FC } from 'react';
2
+ export declare const CollectionPage: FC;
@@ -0,0 +1,69 @@
1
+ import React, { useState } from 'react';
2
+ import styled from 'styled-components';
3
+ import { Text } from '../Text';
4
+ import { Box } from '../Box';
5
+ import { TextInput } from './TextInput';
6
+ import { noop } from '../utils/noop';
7
+ import { SupportMessage } from '../SupportMessage';
8
+ const variationList = [
9
+ {
10
+ id: 'days',
11
+ placeholder: 'Enter name...',
12
+ errorMsg: 'This field is required',
13
+ label: 'First name',
14
+ onChange: noop,
15
+ onInputChange: noop,
16
+ onBlur: noop,
17
+ value: '',
18
+ },
19
+ ];
20
+ export const CollectionPage = () => {
21
+ const [, setValue] = useState('');
22
+ return (React.createElement(Box, { flex: true, direction: "column" }, variationList.map(({ id, placeholder, errorMsg, label }) => {
23
+ return (React.createElement(Box, { key: id, flex: true, direction: "column", mb: "32px" },
24
+ React.createElement(Title, { tag: "span", typo: "header-medium" }, "TextInput variations"),
25
+ React.createElement(Row, { label: "Generic" },
26
+ React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
27
+ React.createElement(Row, { label: "Fallback" },
28
+ React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, fallback: true, error: false, errorMsg: errorMsg, onChange: setValue })),
29
+ React.createElement(Row, { label: "Disabled" },
30
+ React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, disabled: true, error: false, errorMsg: errorMsg, onChange: setValue })),
31
+ React.createElement(Row, { label: "Required" },
32
+ React.createElement(TextInput, { id: id, label: label, value: "", required: true, placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
33
+ React.createElement(Row, { label: "Leading Icon" },
34
+ React.createElement(TextInput, { id: id, label: label, frontIcon: "search", value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
35
+ React.createElement(Row, { label: "Trailing Icon" },
36
+ React.createElement(TextInput, { id: id, label: label, trailingIcon: "car", value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
37
+ React.createElement(Row, { label: "Assistive text" },
38
+ React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, assistiveText: "Some assistive text", error: false, errorMsg: errorMsg, onChange: setValue })),
39
+ React.createElement(Row, { label: "Completed" },
40
+ React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, error: false, completed: true, errorMsg: errorMsg, onChange: setValue })),
41
+ React.createElement(Row, { label: "As title" },
42
+ React.createElement(TextInput, { id: id, label: label, value: "", renderAsTitle: true, placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
43
+ React.createElement(Row, { label: "Error" },
44
+ React.createElement(TextInput, { id: id, label: label, value: "", required: true, placeholder: placeholder, assistiveText: "Some assistive text", error: true, errorMsg: errorMsg, onChange: setValue })),
45
+ React.createElement(Row, { label: "React element error" },
46
+ React.createElement(TextInput, { id: id, label: label, required: true, value: "", placeholder: placeholder, error: true, errorMsg: React.createElement(SupportMessage, { type: "warning", description: "error!!" }), onChange: setValue })),
47
+ React.createElement(Row, { label: "Fallback Error" },
48
+ React.createElement(TextInput, { id: id, label: label, required: true, value: "", placeholder: placeholder, fallback: true, error: true, errorMsg: errorMsg, onChange: setValue }))));
49
+ })));
50
+ };
51
+ const Row = ({ label, children, }) => {
52
+ return (React.createElement(RowWrapper, { mt: "32px" },
53
+ React.createElement(Box, { width: "140px" },
54
+ React.createElement(Text, { tag: "span", typo: "label-large" }, label)),
55
+ children));
56
+ };
57
+ const RowWrapper = styled(Box) `
58
+ display: flex;
59
+ flex-direction: row;
60
+ gap: 16px;
61
+ `;
62
+ const LABEL_WIDTH = '140px';
63
+ const Title = styled(Text) `
64
+ margin-bottom: 12px;
65
+ font-size: 18px;
66
+ line-height: 20px;
67
+ margin-left: ${LABEL_WIDTH};
68
+ `;
69
+ //# sourceMappingURL=Collection.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Collection.js","sourceRoot":"","sources":["../../src/TextInput/Collection.tsx"],"names":[],"mappings":"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"}
@@ -6,9 +6,6 @@ interface Props extends CommonFieldProps {
6
6
  name?: string;
7
7
  value: string;
8
8
  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
9
- trailingIcon?: string;
10
- disabled?: boolean;
11
- outlined?: boolean;
12
9
  }
13
10
  /** on change or on input required */
14
11
  type InputProps = {
@@ -10,73 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import React, { forwardRef } from 'react';
13
- import styled from 'styled-components';
14
- import { darken } from 'polished';
15
- import { theme } from '../theme';
16
13
  import { Field } from '../fields/Field';
17
14
  import { Box } from '../Box';
18
- import { Icon } from '../Icon';
19
15
  import { useUniqueId } from '../utils/id';
16
+ import { Input, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
20
17
  export const TextInput = forwardRef(function TextInput(_a, ref) {
21
- var { id: idProp, type = 'text', placeholder, name, value, outlined = false, error = false, onBlur, onChange, onInputChange, disabled = false, trailingIcon } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "outlined", "error", "onBlur", "onChange", "onInputChange", "disabled", "trailingIcon"]);
18
+ var { id: idProp, type = 'text', placeholder, name, value, error = false, onBlur, onChange, onInputChange, disabled = false, frontIcon, trailingIcon, fallback } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "error", "onBlur", "onChange", "onInputChange", "disabled", "frontIcon", "trailingIcon", "fallback"]);
22
19
  const id = useUniqueId(idProp);
23
- return (React.createElement(Field, Object.assign({}, fieldProps, { htmlFor: id, error: error, outlined: outlined }),
24
- React.createElement(Box, { flex: true },
25
- React.createElement(StyledInput, { disabled: disabled, type: type, id: id, name: name, ref: ref, placeholder: placeholder, value: value, error: error, outlined: outlined, autoComplete: "off", onChange: (e) => {
20
+ return (React.createElement(Field, Object.assign({}, fieldProps, { htmlFor: id, error: error }),
21
+ React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
22
+ frontIcon && (React.createElement(StyledFrontIcon, { disabled: disabled, render: frontIcon, color: "sesame" })),
23
+ React.createElement(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, placeholder: placeholder, value: value, error: error, frontIcon: frontIcon, fallback: fallback, autoComplete: "off", onChange: (e) => {
26
24
  onChange && onChange(e.currentTarget.value);
27
25
  onInputChange && onInputChange(e);
28
26
  }, onBlur: onBlur }),
29
- trailingIcon && React.createElement(StyledIcon, { render: trailingIcon, color: "subtext" }))));
27
+ trailingIcon && (React.createElement(StyledTrailingIcon, { disabled: disabled, render: trailingIcon, color: "sesame" })))));
30
28
  });
31
- const StyledInput = styled.input `
32
- border: none;
33
- border-bottom: 1px solid;
34
- border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
35
- background-color: transparent;
36
- color: ${({ error }) => theme.colors[`${error ? 'error' : 'secondary'}`]};
37
- font-size: 16px;
38
- width: 100%;
39
- outline: none;
40
- cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};
41
- opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
42
- padding: ${({ outlined }) => (outlined ? '17px 14px' : '1px 2px')};
43
- &:hover,
44
- &:focus-within {
45
- border-color: ${({ error }) => error ? theme.colors.error : darken(0.1, theme.colors.outline)};
46
- }
47
-
48
- ${({ outlined, error }) => outlined &&
49
- `
50
- background-color: ${theme.colors.white};
51
- border: 2px solid ${error ? theme.colors.error : theme.colors.outline};
52
- border-radius: 8px;
53
- height: auto;
54
- `}
55
-
56
- ${({ value }) => value &&
57
- value != '' &&
58
- `
59
- border-color: ${theme.colors.outline};
60
- `}
61
-
62
- ${({ trailingIcon }) => trailingIcon &&
63
- trailingIcon != '' &&
64
- `
65
- padding-right: 24px;
66
- `}
67
-
68
- ${({ outlined }) => outlined &&
69
- `
70
- border-radius: 8px;
71
- height: auto;
72
- `}
73
-
74
- &::placeholder {
75
- color: ${theme.colors.subtext};
76
- }
77
- `;
78
- const StyledIcon = styled(Icon) `
79
- position: relative;
80
- left: -24px;
81
- `;
82
29
  //# sourceMappingURL=TextInput.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAyB,UAAU,EAAgB,MAAM,OAAO,CAAA;AAE9E,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EACL,KAAK,EACL,eAAe,EACf,kBAAkB,GACnB,MAAM,kCAAkC,CAAA;AAyBzC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,SAAS,CACpD,EAeiB,EACjB,GAAmC;QAhBnC,EACE,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,MAAM,EACb,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,KAAK,EACb,MAAM,EACN,QAAQ,EACR,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,QAAQ,OAEO,EADZ,UAAU,cAdf,mJAeC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,OAAO,CACL,oBAAC,KAAK,oBAAK,UAAU,IAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY;YACtD,SAAS,IAAI,CACZ,oBAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,SAAS,EACjB,KAAK,EAAC,QAAQ,GACd,CACH;YACD,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAA8B,EAAE,EAAE;oBAC3C,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;oBAC3C,aAAa,IAAI,aAAa,CAAC,CAAC,CAAC,CAAA;gBACnC,CAAC,EACD,MAAM,EAAE,MAAM,GACd;YACD,YAAY,IAAI,CACf,oBAAC,kBAAkB,IACjB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAC,QAAQ,GACd,CACH,CACG,CACA,CACT,CAAA;AACH,CAAC,CAAC,CAAA"}
@@ -11,15 +11,7 @@ declare const _default: {
11
11
  };
12
12
  export default _default;
13
13
  export declare const Default: any;
14
- export declare const TypeEmail: any;
14
+ export declare const DefaultFallback: any;
15
15
  export declare const TypePassword: any;
16
- export declare const Error: any;
17
- export declare const WithOutline: any;
18
- export declare const WithOutlineError: any;
19
- export declare const WithLabel: any;
20
- export declare const WithIcon: any;
21
- export declare const Disabled: any;
22
- export declare const Required: any;
23
- export declare const AssistiveText: any;
24
- export declare const WithReactElementError: any;
16
+ export declare const Collection: any;
25
17
  export declare const WorkingExample: any;
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import { TextInput } from './TextInput';
3
- import { SupportMessage } from '../SupportMessage';
4
3
  import { Container } from './Container';
5
4
  import { noop } from '../utils/noop';
5
+ import { CollectionPage } from './Collection';
6
6
  export default {
7
7
  title: 'Text Input',
8
8
  component: TextInput,
@@ -18,15 +18,15 @@ Default.args = {
18
18
  onInputChange: noop,
19
19
  onBlur: noop,
20
20
  };
21
- export const TypeEmail = Template.bind({});
22
- TypeEmail.args = {
21
+ export const DefaultFallback = Template.bind({});
22
+ DefaultFallback.args = {
23
23
  id: 'textInput',
24
24
  name: 'textInput',
25
25
  placeholder: 'Placeholder text',
26
+ fallback: true,
26
27
  onChange: noop,
27
28
  onInputChange: noop,
28
29
  onBlur: noop,
29
- type: 'email',
30
30
  };
31
31
  export const TypePassword = Template.bind({});
32
32
  TypePassword.args = {
@@ -38,113 +38,7 @@ TypePassword.args = {
38
38
  onBlur: noop,
39
39
  type: 'password',
40
40
  };
41
- export const Error = Template.bind({});
42
- Error.args = {
43
- id: 'textInput',
44
- name: 'textInput',
45
- placeholder: 'Placeholder text',
46
- onChange: noop,
47
- onInputChange: noop,
48
- onBlur: noop,
49
- error: true,
50
- errorMsg: 'Oh boy, something went wrong!',
51
- };
52
- export const WithOutline = Template.bind({});
53
- WithOutline.args = {
54
- id: 'textInput',
55
- name: 'textInput',
56
- outlined: true,
57
- label: 'with outline',
58
- placeholder: 'Placeholder text',
59
- onChange: noop,
60
- onInputChange: noop,
61
- onBlur: noop,
62
- };
63
- export const WithOutlineError = Template.bind({});
64
- WithOutlineError.args = {
65
- id: 'textInput',
66
- name: 'textInput',
67
- outlined: true,
68
- label: 'with outline',
69
- placeholder: 'Placeholder text',
70
- onChange: noop,
71
- onInputChange: noop,
72
- onBlur: noop,
73
- error: true,
74
- errorMsg: 'Oh boy, something went wrong!',
75
- };
76
- export const WithLabel = Template.bind({});
77
- WithLabel.args = {
78
- id: 'textInput',
79
- name: 'textInput',
80
- placeholder: 'Placeholder text',
81
- onChange: noop,
82
- onInputChange: noop,
83
- onBlur: noop,
84
- label: 'label',
85
- outlined: false,
86
- };
87
- export const WithIcon = Template.bind({});
88
- WithIcon.args = {
89
- id: 'textInput',
90
- name: 'textInput',
91
- placeholder: 'Placeholder text',
92
- onChange: noop,
93
- onInputChange: noop,
94
- onBlur: noop,
95
- label: 'label',
96
- trailingIcon: 'at',
97
- };
98
- export const Disabled = Template.bind({});
99
- Disabled.args = {
100
- id: 'textInput',
101
- name: 'textInput',
102
- placeholder: 'Placeholder text',
103
- onChange: noop,
104
- onInputChange: noop,
105
- onBlur: noop,
106
- label: 'label',
107
- disabled: true,
108
- };
109
- export const Required = Template.bind({});
110
- Required.args = {
111
- id: 'textInput',
112
- name: 'textInput',
113
- placeholder: 'Enter name',
114
- onChange: noop,
115
- onInputChange: noop,
116
- onBlur: noop,
117
- label: 'Please enter your name',
118
- outlined: true,
119
- required: true,
120
- };
121
- export const AssistiveText = Template.bind({});
122
- AssistiveText.args = {
123
- id: 'textInput',
124
- name: 'textInput',
125
- placeholder: 'Enter name',
126
- onChange: noop,
127
- onInputChange: noop,
128
- onBlur: noop,
129
- label: 'Please enter your name',
130
- outlined: true,
131
- required: true,
132
- assistiveText: 'Some more information...',
133
- renderAsTitle: true,
134
- };
135
- export const WithReactElementError = Template.bind({});
136
- WithReactElementError.args = {
137
- id: 'textInput',
138
- name: 'textInput',
139
- outlined: true,
140
- label: 'with Support Message as Error',
141
- placeholder: 'Placeholder text',
142
- onChange: noop,
143
- onInputChange: noop,
144
- onBlur: noop,
145
- error: true,
146
- errorMsg: React.createElement(SupportMessage, { type: "warning", description: "error!!" }),
147
- };
41
+ export const Collection = CollectionPage.bind({});
148
42
  const WorkingExampleTemplate = () => React.createElement(Container, null);
149
43
  export const WorkingExample = WorkingExampleTemplate.bind({});
150
44
  //# 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,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,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,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,YAAY;IACzB,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,wBAAwB;IAC/B,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE9C,aAAa,CAAC,IAAI,GAAG;IACnB,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,wBAAwB;IAC/B,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,0BAA0B;IACzC,aAAa,EAAE,IAAI;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtD,qBAAqB,CAAC,IAAI,GAAG;IAC3B,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,+BAA+B;IACtC,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,oBAAC,cAAc,IAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,SAAS,GAAG;CAClE,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":"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;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,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,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEhD,eAAe,CAAC,IAAI,GAAG;IACrB,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;CACb,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,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
@@ -3,6 +3,6 @@ import { Textarea } from './Textarea';
3
3
  export const Container = () => {
4
4
  const [value, setValue] = useState('');
5
5
  return (React.createElement("form", null,
6
- React.createElement(Textarea, { id: "textarea_id", label: "Textarea label", value: value, resize: "both", onChange: setValue, disabled: false, error: value.length > 255, errorMsg: `Your text is ${value.length} characters long. The maximum is 255 characters. Please make it shorter`, placeholder: "Here is some placeholder text." })));
6
+ React.createElement(Textarea, { id: "textarea_id", label: "Textarea label", value: value, resize: "both", onChange: setValue, assistiveText: "This is some assistive text", disabled: false, error: value.length > 255, errorMsg: `Your text is ${value.length} characters long. The maximum is 255 characters. Please make it shorter`, placeholder: "Here is some placeholder text." })));
7
7
  };
8
8
  //# sourceMappingURL=Container.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/Textarea/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,oBAAC,QAAQ,IACP,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,EACzB,QAAQ,EAAE,gBAAgB,KAAK,CAAC,MAAM,yEAAyE,EAC/G,WAAW,EAAC,gCAAgC,GAC5C,CACG,CACR,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/Textarea/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,oBAAC,QAAQ,IACP,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAC,6BAA6B,EAC3C,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,EACzB,QAAQ,EAAE,gBAAgB,KAAK,CAAC,MAAM,yEAAyE,EAC/G,WAAW,EAAC,gCAAgC,GAC5C,CACG,CACR,CAAA;AACH,CAAC,CAAA"}
@@ -13,6 +13,7 @@ type BaseProps = {
13
13
  maxLength?: number;
14
14
  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
15
15
  rows?: number;
16
+ fallback?: boolean;
16
17
  } & CommonFieldProps & MarginProps;
17
18
  type TruncateProps = {
18
19
  onChange: (e: string) => void;
@@ -11,45 +11,39 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  };
12
12
  import React, { forwardRef } from 'react';
13
13
  import styled from 'styled-components';
14
- import { darken } from 'polished';
15
14
  import { theme } from '../theme';
16
15
  import { useUniqueId } from '../utils/id';
17
16
  import { Field } from '../fields/Field';
18
17
  export const Textarea = forwardRef(function Textarea(_a, ref) {
19
- var { id: idProp, name, value, onChange, onInputChange, resize = 'none', error = false, placeholder, disabled = false, maxLength, onBlur, rows = 4 } = _a, fieldProps = __rest(_a, ["id", "name", "value", "onChange", "onInputChange", "resize", "error", "placeholder", "disabled", "maxLength", "onBlur", "rows"]);
18
+ var { id: idProp, name, value, onChange, onInputChange, resize = 'none', error = false, placeholder, disabled = false, maxLength, onBlur, rows = 4, fallback } = _a, fieldProps = __rest(_a, ["id", "name", "value", "onChange", "onInputChange", "resize", "error", "placeholder", "disabled", "maxLength", "onBlur", "rows", "fallback"]);
20
19
  const id = useUniqueId(idProp);
21
20
  return (React.createElement(Field, Object.assign({}, fieldProps, { htmlFor: id, error: error }),
22
- React.createElement(StyledTextArea, { ref: ref, error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
21
+ React.createElement(StyledTextArea, { ref: ref, error: error, id: id, name: name, disabled: disabled, resize: resize, fallback: fallback, placeholder: placeholder, value: value, onChange: (e) => {
23
22
  onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
24
23
  onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
25
24
  }, maxLength: maxLength, onBlur: onBlur, rows: rows })));
26
25
  });
27
26
  const StyledTextArea = styled.textarea `
28
27
  font-size: 16px;
28
+ font: inherit;
29
29
  line-height: 20px;
30
- background: ${theme.colors.white};
31
- border: 2px solid ${theme.colors.outline};
30
+ background: ${({ fallback }) => fallback ? theme.colors.custard : theme.colors.cream};
31
+ border: 2px solid ${theme.colors.oatmeal};
32
32
  box-sizing: border-box;
33
- border-radius: 8px;
33
+ border-radius: 12px;
34
34
  width: 100%;
35
- padding: 16px;
36
- color: ${theme.colors.secondary};
35
+ padding: 18px 14px;
36
+ color: ${theme.colors.liquorice};
37
37
  resize: ${({ resize }) => resize};
38
38
  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};
39
39
  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
40
- border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
40
+ border-color: ${({ error }) => theme.colors[`${error ? 'strawberry' : 'oatmeal'}`]};
41
41
  outline: none;
42
42
 
43
43
  &:hover,
44
44
  &:focus,
45
45
  &:focus-visible {
46
- border-color: ${({ error }) => error ? theme.colors.error : darken(0.1, theme.colors.outline)};
46
+ border-color: ${({ error }) => error ? theme.colors.strawberry : theme.colors.marzipan};
47
47
  }
48
-
49
- ${({ value }) => value &&
50
- value != '' &&
51
- `
52
- border-color: ${theme.colors.outline};
53
- `}
54
48
  `;
55
49
  //# sourceMappingURL=Textarea.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AA+BvC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAcgB,EAChB,GAAsC;QAftC,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,OAEM,EADX,UAAU,cAbf,iIAcC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,KAAK,oBAAK,UAAU,IAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC9C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,CACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;gBAGhC,KAAK,CAAC,MAAM,CAAC,KAAK;sBACZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;WAK/B,KAAK,CAAC,MAAM,CAAC,SAAS;YACrB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;YACtB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;;;;;;oBAM9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;IAGhE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAK;IACL,KAAK,IAAI,EAAE;IACX;sBACkB,KAAK,CAAC,MAAM,CAAC,OAAO;KACrC;CACJ,CAAA"}
1
+ {"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAgCvC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAegB,EAChB,GAAsC;QAhBtC,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,EACR,QAAQ,OAEM,EADX,UAAU,cAdf,6IAeC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,KAAK,oBAAK,UAAU,IAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC9C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,CACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAUF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;;gBAIhC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7B,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;sBAClC,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;WAK/B,KAAK,CAAC,MAAM,CAAC,SAAS;YACrB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;YACtB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;;;;;;oBAMnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;CAE5D,CAAA"}
@@ -45,6 +45,8 @@ Required.args = {
45
45
  value: '',
46
46
  onChange: noop,
47
47
  disabled: false,
48
+ maxLength: 200,
49
+ showCharacterCount: true,
48
50
  placeholder: 'Here is some placeholder text.',
49
51
  required: true,
50
52
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.stories.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,KAAK,EAAI,CAAA;AAElE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,sDAAsD;CACjE,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,gBAAgB,CAAC,IAAI,GAAG;IACtB,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,IAAI;CACpB,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":"Textarea.stories.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,KAAK,EAAI,CAAA;AAElE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,sDAAsD;CACjE,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,GAAG;IACd,kBAAkB,EAAE,IAAI;IACxB,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,gBAAgB,CAAC,IAAI,GAAG;IACtB,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,IAAI;CACpB,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"}
@@ -17,13 +17,17 @@ import { Box } from '../Box';
17
17
  export const Toggle = (_a) => {
18
18
  var { id, checked, onToggle } = _a, marginProps = __rest(_a, ["id", "checked", "onToggle"]);
19
19
  return (React.createElement(Switch, Object.assign({ as: "label", id: id }, marginProps),
20
- React.createElement(Checkbox, { type: "checkbox", checked: checked, onChange: onToggle }),
20
+ React.createElement(Checkbox, { type: "checkbox", checked: checked, onChange: onToggle, onKeyDown: (e) => {
21
+ if (e.key === 'Enter') {
22
+ onToggle();
23
+ }
24
+ } }),
21
25
  React.createElement(Slider, null)));
22
26
  };
23
27
  const Switch = styled(Box) `
24
28
  position: relative;
25
29
  display: inline-block;
26
- width: 50px;
30
+ width: 56px;
27
31
  height: 32px;
28
32
 
29
33
  input {
@@ -39,21 +43,24 @@ const Slider = styled.span `
39
43
  left: 0;
40
44
  right: 0;
41
45
  bottom: 0;
42
- background-color: ${theme.colors.bgPrimary};
43
- border: 1px solid;
44
- border-color: ${theme.colors.bgPrimary};
46
+ background-color: ${theme.colors.oatmeal};
47
+ border: none;
45
48
  border-radius: 28px;
46
- transition: 0.2s background-color border-color;
49
+ transition: 0.2s background-color;
47
50
  outline: none;
48
51
 
52
+ &:hover {
53
+ background-color: ${theme.colors.marzipan};
54
+ }
55
+
49
56
  &:before {
50
57
  position: absolute;
51
58
  content: '';
52
59
  height: 24px;
53
60
  width: 24px;
54
- left: 3px;
55
- bottom: 3px;
56
- background-color: ${theme.colors.white};
61
+ left: 4px;
62
+ bottom: 4px;
63
+ background-color: ${theme.colors.mascarpone};
57
64
  transition: 0.2s transform;
58
65
  border-radius: 50%;
59
66
  }
@@ -62,13 +69,12 @@ const Checkbox = styled.input `
62
69
  ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}
63
70
 
64
71
  &:checked + ${Slider} {
65
- background-color: ${theme.colors.success};
66
- border: 1px solid;
67
- border-color: ${theme.colors.success};
72
+ background-color: ${theme.colors.liquorice};
73
+ border: none;
68
74
  }
69
75
 
70
76
  &:checked + ${Slider}:before {
71
- transform: translateX(18px);
77
+ transform: translateX(24px);
72
78
  }
73
79
  `;
74
80
  //# sourceMappingURL=Toggle.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAKjC,EAAE,EAAE;QAL6B,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,OAET,EADI,WAAW,cAJkB,6BAKjC,CADe;IAEd,OAAO,CACL,oBAAC,MAAM,kBAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,IAAM,WAAW;QACxC,oBAAC,QAAQ,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI;QAClE,oBAAC,MAAM,OAAG,CACH,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;sBAOJ,KAAK,CAAC,MAAM,CAAC,SAAS;;kBAE1B,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;;;;;;wBAYhB,KAAK,CAAC,MAAM,CAAC,KAAK;;;;CAIzC,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAA;IACzB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,KAAK,CAAC,MAAM,CAAC,OAAO;;oBAExB,KAAK,CAAC,MAAM,CAAC,OAAO;;;gBAGxB,MAAM;;;CAGrB,CAAA"}
1
+ {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAKjC,EAAE,EAAE;QAL6B,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,OAET,EADI,WAAW,cAJkB,6BAKjC,CADe;IAEd,OAAO,CACL,oBAAC,MAAM,kBAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,IAAM,WAAW;QACxC,oBAAC,QAAQ,IACP,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACrB,QAAQ,EAAE,CAAA;iBACX;YACH,CAAC,GACD;QACF,oBAAC,MAAM,OAAG,CACH,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;sBAOJ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;wBAOlB,KAAK,CAAC,MAAM,CAAC,QAAQ;;;;;;;;;;wBAUrB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;CAI9C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAA;IACzB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,KAAK,CAAC,MAAM,CAAC,SAAS;;;;gBAI9B,MAAM;;;CAGrB,CAAA"}