@mrshmllw/smores-react 2.6.0 → 2.7.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.
- package/dist/Accordion/Accordion.d.ts +1 -0
- package/dist/Accordion/Accordion.js +13 -19
- package/dist/Accordion/Accordion.js.map +1 -1
- package/dist/ConfirmationRadioButtons/Confirmation.d.ts +2 -2
- package/dist/ConfirmationRadioButtons/Confirmation.js.map +1 -1
- package/dist/ConfirmationRadioButtons/RadioButtonStyled.d.ts +2 -2
- package/dist/ConfirmationRadioButtons/RadioButtonStyled.js +1 -3
- package/dist/ConfirmationRadioButtons/RadioButtonStyled.js.map +1 -1
- package/dist/Dropdown/Dropdown.d.ts +6 -12
- package/dist/Dropdown/Dropdown.js +19 -10
- package/dist/Dropdown/Dropdown.js.map +1 -1
- package/dist/Dropdown/Dropdown.stories.d.ts +2 -7
- package/dist/Field/Field.js +18 -3
- package/dist/Field/Field.js.map +1 -1
- package/dist/Fieldset/Fieldset.js +7 -2
- package/dist/Fieldset/Fieldset.js.map +1 -1
- package/dist/NumberInput/NumberInput.d.ts +5 -4
- package/dist/NumberInput/NumberInput.js +4 -6
- package/dist/NumberInput/NumberInput.js.map +1 -1
- package/dist/RadioGroup/RadioElement.d.ts +13 -0
- package/dist/RadioGroup/RadioElement.js +50 -0
- package/dist/RadioGroup/RadioElement.js.map +1 -0
- package/dist/RadioGroup/RadioGroup.d.ts +13 -0
- package/dist/RadioGroup/RadioGroup.js +38 -0
- package/dist/RadioGroup/RadioGroup.js.map +1 -0
- package/dist/RadioGroup/RadioGroup.stories.d.ts +17 -0
- package/dist/RadioGroup/RadioGroup.stories.js +39 -0
- package/dist/RadioGroup/RadioGroup.stories.js.map +1 -0
- package/dist/RadioGroup/RadioItem.d.ts +13 -0
- package/dist/RadioGroup/RadioItem.js +48 -0
- package/dist/RadioGroup/RadioItem.js.map +1 -0
- package/dist/RadioGroup/constants.d.ts +1 -0
- package/dist/RadioGroup/constants.js +2 -0
- package/dist/RadioGroup/constants.js.map +1 -0
- package/dist/RadioGroup/index.d.ts +1 -0
- package/dist/RadioGroup/index.js +2 -0
- package/dist/RadioGroup/index.js.map +1 -0
- package/dist/RadioGroup/types.d.ts +2 -0
- package/dist/RadioGroup/types.js +2 -0
- package/dist/RadioGroup/types.js.map +1 -0
- package/dist/SearchInput/SearchInput.d.ts +5 -3
- package/dist/SearchInput/SearchInput.js +5 -4
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/Text/Text.d.ts +1 -1
- package/dist/TextInput/TextInput.d.ts +5 -4
- package/dist/TextInput/TextInput.js +4 -5
- package/dist/TextInput/TextInput.js.map +1 -1
- package/dist/TextInput/TextInput.stories.d.ts +1 -0
- package/dist/TextInput/TextInput.stories.js +14 -0
- package/dist/TextInput/TextInput.stories.js.map +1 -1
- package/dist/Textarea/Textarea.d.ts +4 -4
- package/dist/Textarea/Textarea.js +2 -2
- package/dist/Textarea/Textarea.js.map +1 -1
- package/dist/fields/Field/Field.d.ts +9 -0
- package/dist/fields/Field/Field.js +18 -0
- package/dist/fields/Field/Field.js.map +1 -0
- package/dist/fields/Field/index.d.ts +3 -0
- package/dist/fields/Field/index.js +2 -0
- package/dist/fields/Field/index.js.map +1 -0
- package/dist/fields/Fieldset/Fieldset.d.ts +5 -0
- package/dist/fields/Fieldset/Fieldset.js +18 -0
- package/dist/fields/Fieldset/Fieldset.js.map +1 -0
- package/dist/fields/Fieldset/Fieldset.stories.d.ts +10 -0
- package/dist/fields/Fieldset/Fieldset.stories.js +22 -0
- package/dist/fields/Fieldset/Fieldset.stories.js.map +1 -0
- package/dist/fields/Fieldset/index.d.ts +1 -0
- package/dist/fields/Fieldset/index.js +2 -0
- package/dist/fields/Fieldset/index.js.map +1 -0
- package/dist/fields/commonFieldTypes.d.ts +16 -0
- package/dist/fields/commonFieldTypes.js +2 -0
- package/dist/fields/commonFieldTypes.js.map +1 -0
- package/dist/fields/components/InternalField.d.ts +11 -0
- package/dist/fields/components/InternalField.js +37 -0
- package/dist/fields/components/InternalField.js.map +1 -0
- package/dist/fields/components/Placeholder.d.ts +2 -0
- package/dist/fields/components/Placeholder.js +25 -0
- package/dist/fields/components/Placeholder.js.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/utils/visuallyHidden.d.ts +5 -0
- package/dist/utils/visuallyHidden.js +14 -0
- package/dist/utils/visuallyHidden.js.map +1 -0
- package/package.json +1 -1
@@ -0,0 +1,17 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { RadioGroupProps } from './RadioGroup';
|
3
|
+
declare const _default: {
|
4
|
+
title: string;
|
5
|
+
component: <Value extends import("./types").BaseValueType>({ options, onChange, value, displayType, renderAsTitle, error, ...fieldProps }: RadioGroupProps<Value>) => JSX.Element;
|
6
|
+
argTypes: {
|
7
|
+
onChange: {
|
8
|
+
action: string;
|
9
|
+
};
|
10
|
+
};
|
11
|
+
};
|
12
|
+
export default _default;
|
13
|
+
export declare const Default: any;
|
14
|
+
export declare const Vertical: any;
|
15
|
+
export declare const Horizontal: any;
|
16
|
+
export declare const WithError: any;
|
17
|
+
export declare const Interactive: any;
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import { RadioGroup } from './RadioGroup';
|
3
|
+
export default {
|
4
|
+
title: 'RadioGroup',
|
5
|
+
component: RadioGroup,
|
6
|
+
argTypes: { onChange: { action: 'clicked' } },
|
7
|
+
};
|
8
|
+
const options = [
|
9
|
+
{ label: 'Social', value: 'social' },
|
10
|
+
{ label: 'Social and commuting', value: 'social/commuting' },
|
11
|
+
{
|
12
|
+
label: 'All the above, and I drive for work',
|
13
|
+
value: 'social/commuting/work',
|
14
|
+
},
|
15
|
+
{ label: 'It’s a commercial vehicle', value: 'commercial' },
|
16
|
+
];
|
17
|
+
const defaultArgs = {
|
18
|
+
label: 'What do you use it for?',
|
19
|
+
onChange: (value) => console.log(value),
|
20
|
+
value: options[0].value,
|
21
|
+
options,
|
22
|
+
displayType: 'normal',
|
23
|
+
};
|
24
|
+
const Template = (props) => React.createElement(RadioGroup, Object.assign({}, props));
|
25
|
+
export const Default = Template.bind({});
|
26
|
+
Default.args = defaultArgs;
|
27
|
+
export const Vertical = Template.bind({});
|
28
|
+
Vertical.args = Object.assign(Object.assign({}, defaultArgs), { displayType: 'vertical-card' });
|
29
|
+
export const Horizontal = Template.bind({});
|
30
|
+
Horizontal.args = Object.assign(Object.assign({}, defaultArgs), { displayType: 'horizontal-card' });
|
31
|
+
export const WithError = Template.bind({});
|
32
|
+
WithError.args = Object.assign(Object.assign({}, defaultArgs), { error: true, errorMsg: 'something', displayType: 'horizontal-card' });
|
33
|
+
const InteractiveStory = (props) => {
|
34
|
+
const [value, setValue] = useState('');
|
35
|
+
return (React.createElement(RadioGroup, Object.assign({}, props, { onChange: (nextValue) => setValue(nextValue), value: value })));
|
36
|
+
};
|
37
|
+
export const Interactive = InteractiveStory.bind({});
|
38
|
+
Interactive.args = defaultArgs;
|
39
|
+
//# sourceMappingURL=RadioGroup.stories.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"RadioGroup.stories.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAE1D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC5D;QACE,KAAK,EAAE,qCAAqC;QAC5C,KAAK,EAAE,uBAAuB;KAC/B;IACD,EAAE,KAAK,EAAE,2BAA2B,EAAE,KAAK,EAAE,YAAY,EAAE;CAC5D,CAAA;AAED,MAAM,WAAW,GAAoB;IACnC,KAAK,EAAE,yBAAyB;IAChC,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;IAC/C,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;IACvB,OAAO;IACP,WAAW,EAAE,QAAQ;CACtB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,EAAI,CAAA;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG,WAAW,CAAA;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,mCACR,WAAW,KACd,WAAW,EAAE,eAAe,GAC7B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,mCACV,WAAW,KACd,WAAW,EAAE,iBAAiB,GAC/B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,mCACT,WAAW,KACd,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,iBAAiB,GAC/B,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,KAA8B,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL,oBAAC,UAAU,oBACL,KAAK,IACT,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAC5C,KAAK,EAAE,KAAK,IACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEpD,WAAW,CAAC,IAAI,GAAG,WAAW,CAAA"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { BaseValueType, DisplayType } from './types';
|
3
|
+
declare type RadioItemProps<Value extends BaseValueType = BaseValueType> = {
|
4
|
+
name: string;
|
5
|
+
value: Value;
|
6
|
+
label: string;
|
7
|
+
checked: boolean;
|
8
|
+
onChange: (value: Value) => void;
|
9
|
+
displayType: DisplayType;
|
10
|
+
isError: boolean;
|
11
|
+
};
|
12
|
+
export declare const RadioItem: <Value extends BaseValueType>({ name, label, value, checked, onChange, displayType, isError, }: RadioItemProps<Value>) => JSX.Element;
|
13
|
+
export {};
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled, { css } from 'styled-components';
|
3
|
+
import { useUniqueId } from '../utils/id';
|
4
|
+
import { theme } from '../theme';
|
5
|
+
import { RadioElement } from './RadioElement';
|
6
|
+
import { ITEM_GAP } from './constants';
|
7
|
+
export const RadioItem = ({ name, label, value, checked, onChange, displayType, isError, }) => {
|
8
|
+
const id = useUniqueId();
|
9
|
+
return (React.createElement(Wrapper, { htmlFor: id, checked: checked, displayType: displayType },
|
10
|
+
React.createElement(RadioElement, { name: name, id: id, value: value, checked: checked, onChange: onChange, isError: isError, mr: "8px" }),
|
11
|
+
React.createElement(RadioText, { isError: isError }, label)));
|
12
|
+
};
|
13
|
+
const Wrapper = styled.label `
|
14
|
+
display: flex;
|
15
|
+
flex-direction: row;
|
16
|
+
align-items: flex-start;
|
17
|
+
|
18
|
+
${({ displayType, checked }) => css `
|
19
|
+
${(displayType === 'horizontal-card' ||
|
20
|
+
displayType === 'vertical-card') &&
|
21
|
+
css `
|
22
|
+
border-radius: 8px;
|
23
|
+
background-color: ${theme.colors[checked ? 'white' : 'background']};
|
24
|
+
padding: ${checked ? '10px' : '12px'};
|
25
|
+
${checked && `border: 2px solid ${theme.colors.secondary};`}
|
26
|
+
`}
|
27
|
+
${displayType === 'horizontal-card' &&
|
28
|
+
css `
|
29
|
+
width: 100%;
|
30
|
+
|
31
|
+
@media (min-width: 420px) {
|
32
|
+
width: calc(50% - ${ITEM_GAP / 2}px);
|
33
|
+
}
|
34
|
+
|
35
|
+
@media (min-width: 768px) {
|
36
|
+
width: 240px;
|
37
|
+
}
|
38
|
+
`}
|
39
|
+
`}
|
40
|
+
`;
|
41
|
+
const RadioText = styled.span `
|
42
|
+
line-height: 16px;
|
43
|
+
font-size: 16px;
|
44
|
+
font-weight: ${theme.font.weight.medium};
|
45
|
+
color: ${({ isError }) => isError ? theme.colors.error : theme.colors.secondary};
|
46
|
+
margin-top: 4px;
|
47
|
+
`;
|
48
|
+
//# sourceMappingURL=RadioItem.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAYtC,MAAM,CAAC,MAAM,SAAS,GAAG,CAA8B,EACrD,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,OAAO,GACe,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACxB,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW;QAC9D,oBAAC,YAAY,IACX,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAC,KAAK,GACR;QACF,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,IAAG,KAAK,CAAa,CACxC,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAiD;;;;;IAKzE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,CAC7B,GAAG,CAAA;QACC,CAAC,WAAW,KAAK,iBAAiB;IAClC,WAAW,KAAK,eAAe,CAAC;IAClC,GAAG,CAAA;;4BAEmB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;mBACvD,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;UAClC,OAAO,IAAI,qBAAqB,KAAK,CAAC,MAAM,CAAC,SAAS,GAAG;OAC5D;QACC,WAAW,KAAK,iBAAiB;IACnC,GAAG,CAAA;;;;8BAIqB,QAAQ,GAAG,CAAC;;;;;;OAMnC;KACF;CACJ,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAsB;;;iBAGlC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;WAC9B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CACvB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;;CAExD,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const ITEM_GAP = 12;
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/RadioGroup/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,EAAE,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './RadioGroup';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/RadioGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/RadioGroup/types.ts"],"names":[],"mappings":""}
|
@@ -1,15 +1,17 @@
|
|
1
|
-
import { FC } from 'react';
|
2
|
-
import {
|
1
|
+
import { FC, FocusEvent } from 'react';
|
2
|
+
import { CommonFieldProps } from '../fields/Field';
|
3
3
|
export declare type SearchInputItem = {
|
4
4
|
label: string;
|
5
5
|
value: string;
|
6
6
|
};
|
7
|
-
export interface SearchInputProps extends
|
7
|
+
export interface SearchInputProps extends CommonFieldProps {
|
8
8
|
name?: string;
|
9
9
|
placeholder?: string;
|
10
10
|
searchList: SearchInputItem[];
|
11
11
|
onFound: (element: string) => void;
|
12
12
|
resultsRelativePosition?: boolean;
|
13
13
|
showIcon?: boolean;
|
14
|
+
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
15
|
+
outlined?: boolean;
|
14
16
|
}
|
15
17
|
export declare const SearchInput: FC<SearchInputProps>;
|
@@ -14,10 +14,10 @@ import styled from 'styled-components';
|
|
14
14
|
import { darken } from 'polished';
|
15
15
|
import { theme } from '../theme';
|
16
16
|
import { Icon } from '../Icon';
|
17
|
-
import { Field } from '../Field';
|
17
|
+
import { Field } from '../fields/Field';
|
18
18
|
import { useUniqueId } from '../utils/id';
|
19
19
|
export const SearchInput = (_a) => {
|
20
|
-
var { id: idProp, name = 'search_input', className = '', placeholder, searchList, onFound, resultsRelativePosition = false, outlined = false, showIcon = false, renderAsTitle = false } = _a, otherProps = __rest(_a, ["id", "name", "className", "placeholder", "searchList", "onFound", "resultsRelativePosition", "outlined", "showIcon", "renderAsTitle"]);
|
20
|
+
var { id: idProp, name = 'search_input', className = '', placeholder, searchList, onFound, resultsRelativePosition = false, outlined = false, showIcon = false, renderAsTitle = false, onBlur } = _a, otherProps = __rest(_a, ["id", "name", "className", "placeholder", "searchList", "onFound", "resultsRelativePosition", "outlined", "showIcon", "renderAsTitle", "onBlur"]);
|
21
21
|
const id = useUniqueId(idProp);
|
22
22
|
const [active, setActive] = useState(false);
|
23
23
|
const [list, setList] = useState([]);
|
@@ -46,11 +46,11 @@ export const SearchInput = (_a) => {
|
|
46
46
|
onFound(selectedItem.value);
|
47
47
|
setSelected(true);
|
48
48
|
};
|
49
|
-
return (React.createElement(Field, Object.assign({ className: className, renderAsTitle: renderAsTitle, id: id, outlined: outlined
|
49
|
+
return (React.createElement(Field, Object.assign({ className: className, renderAsTitle: renderAsTitle, id: id, outlined: outlined }, otherProps),
|
50
50
|
React.createElement(React.Fragment, null,
|
51
51
|
React.createElement(StyledInputBox, { outlined: outlined, selected: selected },
|
52
52
|
showIcon && React.createElement(SearchIcon, { size: 24, render: "search", color: "subtext" }),
|
53
|
-
React.createElement(StyledInput, { id: id, type: "text", name: name, placeholder: placeholder, autoComplete: "off", value: selectedResult, onKeyUp: search, onChange: updateInputState, outlined: outlined, selected: selected })),
|
53
|
+
React.createElement(StyledInput, { id: id, type: "text", name: name, placeholder: placeholder, autoComplete: "off", value: selectedResult, onKeyUp: search, onChange: updateInputState, outlined: outlined, selected: selected, onBlur: onBlur })),
|
54
54
|
React.createElement(StyledResultsContainer, { show: active, absolutePosition: !resultsRelativePosition, outlined: outlined },
|
55
55
|
React.createElement(ResultsList, { outlined: outlined }, list.length ? (list.map((el, i) => (React.createElement("li", { key: i, onClick: () => select(el) }, el.label)))) : (React.createElement("li", null, "No results")))))));
|
56
56
|
};
|
@@ -60,6 +60,7 @@ const StyledInputBox = styled.div `
|
|
60
60
|
border-bottom: ${({ outlined }) => outlined ? 'none' : `1px solid ${theme.colors.outline}`};
|
61
61
|
${({ outlined }) => outlined &&
|
62
62
|
`
|
63
|
+
background-color: ${theme.colors.white};
|
63
64
|
border: 2px solid ${theme.colors.outline};
|
64
65
|
border-radius: 8px;
|
65
66
|
height: auto;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}
|
package/dist/Text/Text.d.ts
CHANGED
@@ -8,7 +8,7 @@ export declare type DeprecatedTypo = 'header-large' | 'header-medium' | 'header-
|
|
8
8
|
export declare type Typo = 'hero-alternate' | 'hero' | 'heading-large' | 'heading-medium' | 'heading-small' | 'headline-regular' | 'headline-small' | 'body-standfirst' | 'body-regular' | 'body-small' | 'caption' | 'label';
|
9
9
|
declare type Props = {
|
10
10
|
children: ReactNode;
|
11
|
-
tag
|
11
|
+
tag?: any;
|
12
12
|
className?: string;
|
13
13
|
typo?: Typo | (string & Record<never, never>);
|
14
14
|
align?: string;
|
@@ -1,13 +1,14 @@
|
|
1
|
-
import React, { FormEvent } from 'react';
|
2
|
-
import {
|
3
|
-
interface Props extends
|
1
|
+
import React, { FocusEvent, FormEvent } from 'react';
|
2
|
+
import { CommonFieldProps } from '../fields/Field';
|
3
|
+
interface Props extends CommonFieldProps {
|
4
4
|
type?: 'text' | 'email' | 'password' | 'time' | 'date';
|
5
5
|
placeholder: string;
|
6
6
|
name?: string;
|
7
7
|
value: string;
|
8
|
-
onBlur?: (e:
|
8
|
+
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
9
9
|
trailingIcon?: string;
|
10
10
|
disabled?: boolean;
|
11
|
+
outlined?: boolean;
|
11
12
|
}
|
12
13
|
/** on change or on input required */
|
13
14
|
declare type InputProps = {
|
@@ -13,21 +13,19 @@ import React, { forwardRef } from 'react';
|
|
13
13
|
import styled from 'styled-components';
|
14
14
|
import { darken } from 'polished';
|
15
15
|
import { theme } from '../theme';
|
16
|
-
import { Field } from '../Field';
|
16
|
+
import { Field } from '../fields/Field';
|
17
17
|
import { Box } from '../Box';
|
18
18
|
import { Icon } from '../Icon';
|
19
19
|
import { useUniqueId } from '../utils/id';
|
20
20
|
export const TextInput = forwardRef(function TextInput(_a, ref) {
|
21
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"]);
|
22
22
|
const id = useUniqueId(idProp);
|
23
|
-
return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, outlined: outlined
|
23
|
+
return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, outlined: outlined }),
|
24
24
|
React.createElement(Box, { flex: true },
|
25
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) => {
|
26
26
|
onChange && onChange(e.currentTarget.value);
|
27
27
|
onInputChange && onInputChange(e);
|
28
|
-
}, onBlur:
|
29
|
-
onBlur && onBlur(e);
|
30
|
-
} }),
|
28
|
+
}, onBlur: onBlur }),
|
31
29
|
trailingIcon && React.createElement(StyledIcon, { render: trailingIcon, color: "subtext" }))));
|
32
30
|
});
|
33
31
|
const StyledInput = styled.input `
|
@@ -49,6 +47,7 @@ const StyledInput = styled.input `
|
|
49
47
|
|
50
48
|
${({ outlined, error }) => outlined &&
|
51
49
|
`
|
50
|
+
background-color: ${theme.colors.white};
|
52
51
|
border: 2px solid ${error ? theme.colors.error : theme.colors.outline};
|
53
52
|
border-radius: 8px;
|
54
53
|
height: auto;
|
@@ -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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"}
|
@@ -117,6 +117,20 @@ Required.args = {
|
|
117
117
|
outlined: true,
|
118
118
|
required: true,
|
119
119
|
};
|
120
|
+
export const AssistiveText = Template.bind({});
|
121
|
+
AssistiveText.args = {
|
122
|
+
id: 'textInput',
|
123
|
+
name: 'textInput',
|
124
|
+
placeholder: 'Enter name',
|
125
|
+
onChange: noop,
|
126
|
+
onInputChange: noop,
|
127
|
+
onBlur: noop,
|
128
|
+
label: 'Please enter your name',
|
129
|
+
outlined: true,
|
130
|
+
required: true,
|
131
|
+
assistiveText: 'Some more information...',
|
132
|
+
renderAsTitle: true,
|
133
|
+
};
|
120
134
|
const WorkingExampleTemplate = () => React.createElement(Container, null);
|
121
135
|
export const WorkingExample = WorkingExampleTemplate.bind({});
|
122
136
|
//# sourceMappingURL=TextInput.stories.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextInput.stories.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"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"}
|
1
|
+
{"version":3,"file":"TextInput.stories.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"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"}
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import React, { FormEvent } from 'react';
|
2
|
-
import {
|
1
|
+
import React, { FocusEvent, FormEvent } from 'react';
|
2
|
+
import { CommonFieldProps } from '../fields/Field';
|
3
3
|
import { MarginProps } from '../utils/space';
|
4
4
|
declare type BaseProps = {
|
5
5
|
id?: string;
|
@@ -11,9 +11,9 @@ declare type BaseProps = {
|
|
11
11
|
resize?: 'none' | 'both';
|
12
12
|
disabled?: boolean;
|
13
13
|
maxLength?: number;
|
14
|
-
onBlur?: (e:
|
14
|
+
onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
|
15
15
|
rows?: number;
|
16
|
-
} &
|
16
|
+
} & CommonFieldProps & MarginProps;
|
17
17
|
declare type TruncateProps = {
|
18
18
|
onChange: (e: string) => void;
|
19
19
|
onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void;
|
@@ -14,11 +14,11 @@ import styled from 'styled-components';
|
|
14
14
|
import { darken } from 'polished';
|
15
15
|
import { theme } from '../theme';
|
16
16
|
import { useUniqueId } from '../utils/id';
|
17
|
-
import { Field } from '../Field';
|
17
|
+
import { Field } from '../fields/Field';
|
18
18
|
export const Textarea = forwardRef(function Textarea(_a, ref) {
|
19
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"]);
|
20
20
|
const id = useUniqueId(idProp);
|
21
|
-
return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error
|
21
|
+
return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error }),
|
22
22
|
React.createElement(StyledTextArea, { ref: ref, error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
|
23
23
|
onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
|
24
24
|
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,
|
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,EAAoB,KAAK,EAAE,MAAM,iBAAiB,CAAA;AA8BzD,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,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QACzC,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"}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import { CommonFieldProps } from '../commonFieldTypes';
|
3
|
+
interface FieldProps extends CommonFieldProps {
|
4
|
+
children: ReactNode;
|
5
|
+
assistiveText?: string;
|
6
|
+
outlined?: boolean;
|
7
|
+
}
|
8
|
+
export declare const Field: ({ children, ...fieldProps }: FieldProps) => JSX.Element;
|
9
|
+
export {};
|
@@ -0,0 +1,18 @@
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
+
var t = {};
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
+
t[p] = s[p];
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
+
t[p[i]] = s[p[i]];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
12
|
+
import React from 'react';
|
13
|
+
import { InternalField } from '../components/InternalField';
|
14
|
+
export const Field = (_a) => {
|
15
|
+
var { children } = _a, fieldProps = __rest(_a, ["children"]);
|
16
|
+
return React.createElement(InternalField, Object.assign({}, fieldProps), children);
|
17
|
+
};
|
18
|
+
//# sourceMappingURL=Field.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/fields/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAQ3D,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,OAA6B,EAAxB,UAAU,cAAzB,YAA2B,CAAF;IAC7C,OAAO,oBAAC,aAAa,oBAAK,UAAU,GAAG,QAAQ,CAAiB,CAAA;AAClE,CAAC,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/fields/Field/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { MarginProps } from '../../utils/space';
|
3
|
+
import { CommonFieldProps } from '../commonFieldTypes';
|
4
|
+
export declare type FieldsetProps = CommonFieldProps & MarginProps;
|
5
|
+
export declare const Fieldset: ({ children, renderAsTitle, ...fieldProps }: FieldsetProps) => JSX.Element;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
2
|
+
var t = {};
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
4
|
+
t[p] = s[p];
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
8
|
+
t[p[i]] = s[p[i]];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
12
|
+
import React from 'react';
|
13
|
+
import { InternalField } from '../components/InternalField';
|
14
|
+
export const Fieldset = (_a) => {
|
15
|
+
var { children, renderAsTitle = true } = _a, fieldProps = __rest(_a, ["children", "renderAsTitle"]);
|
16
|
+
return (React.createElement(InternalField, Object.assign({ renderAsTitle: renderAsTitle, outlined: true }, fieldProps), children));
|
17
|
+
};
|
18
|
+
//# sourceMappingURL=Fieldset.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../../src/fields/Fieldset/Fieldset.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAI3D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAIT,EAAE,EAAE;QAJK,EACvB,QAAQ,EACR,aAAa,GAAG,IAAI,OAEN,EADX,UAAU,cAHU,6BAIxB,CADc;IAEb,OAAO,CACL,oBAAC,aAAa,kBAAC,aAAa,EAAE,aAAa,EAAE,QAAQ,UAAK,UAAU,GACjE,QAAQ,CACK,CACjB,CAAA;AACH,CAAC,CAAA"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { FieldsetProps } from './Fieldset';
|
3
|
+
declare const _default: {
|
4
|
+
title: string;
|
5
|
+
component: ({ children, renderAsTitle, ...fieldProps }: FieldsetProps) => JSX.Element;
|
6
|
+
};
|
7
|
+
export default _default;
|
8
|
+
export declare const Default: any;
|
9
|
+
export declare const WithError: any;
|
10
|
+
export declare const WithSmallLabel: any;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Placeholder } from '../components/Placeholder';
|
3
|
+
import { Fieldset } from './Fieldset';
|
4
|
+
export default {
|
5
|
+
title: 'Fieldset',
|
6
|
+
component: Fieldset,
|
7
|
+
};
|
8
|
+
const defaultArgs = {
|
9
|
+
label: 'Fieldset label',
|
10
|
+
assistiveText: 'Some assistive text to help the user',
|
11
|
+
renderAsTitle: true,
|
12
|
+
required: false,
|
13
|
+
};
|
14
|
+
const Template = (props) => (React.createElement(Fieldset, Object.assign({}, props),
|
15
|
+
React.createElement(Placeholder, null)));
|
16
|
+
export const Default = Template.bind({});
|
17
|
+
Default.args = defaultArgs;
|
18
|
+
export const WithError = Template.bind({});
|
19
|
+
WithError.args = Object.assign(Object.assign({}, defaultArgs), { error: true, errorMsg: 'This is an error message describing what is wrong' });
|
20
|
+
export const WithSmallLabel = Template.bind({});
|
21
|
+
WithSmallLabel.args = Object.assign(Object.assign({}, defaultArgs), { renderAsTitle: false });
|
22
|
+
//# sourceMappingURL=Fieldset.stories.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Fieldset.stories.js","sourceRoot":"","sources":["../../../src/fields/Fieldset/Fieldset.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,WAAW,GAAkB;IACjC,KAAK,EAAE,gBAAgB;IACvB,aAAa,EAAE,sCAAsC;IACrD,aAAa,EAAE,IAAI;IACnB,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,CACzC,oBAAC,QAAQ,oBAAK,KAAK;IACjB,oBAAC,WAAW,OAAG,CACN,CACZ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG,WAAW,CAAA;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,mCACT,WAAW,KACd,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,mDAAmD,GAC9D,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/C,cAAc,CAAC,IAAI,mCACd,WAAW,KACd,aAAa,EAAE,KAAK,GACrB,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { Fieldset, FieldsetProps } from './Fieldset';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/fields/Fieldset/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import { MarginProps } from '../utils/space';
|
3
|
+
export interface CommonFieldProps extends MarginProps {
|
4
|
+
id?: string;
|
5
|
+
className?: string;
|
6
|
+
children?: ReactNode;
|
7
|
+
label?: string;
|
8
|
+
renderAsTitle?: boolean;
|
9
|
+
assistiveText?: string;
|
10
|
+
required?: boolean;
|
11
|
+
error?: boolean;
|
12
|
+
errorMsg?: string;
|
13
|
+
}
|
14
|
+
export interface InternalCommonFieldProps extends CommonFieldProps {
|
15
|
+
outlined?: boolean;
|
16
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"commonFieldTypes.js","sourceRoot":"","sources":["../../src/fields/commonFieldTypes.ts"],"names":[],"mappings":""}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import { InternalCommonFieldProps } from '../commonFieldTypes';
|
3
|
+
interface InternalFieldProps extends InternalCommonFieldProps {
|
4
|
+
children: ReactNode;
|
5
|
+
className?: string;
|
6
|
+
assistiveText?: string;
|
7
|
+
htmlFor?: string;
|
8
|
+
fieldType?: 'field' | 'fieldset';
|
9
|
+
}
|
10
|
+
export declare const InternalField: ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, outlined, error, errorMsg, required, ...marginProps }: InternalFieldProps) => JSX.Element;
|
11
|
+
export {};
|