@mrshmllw/smores-react 12.1.0 → 12.2.1-crumbs-fix-adding-generic-classname-to-field.1
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/Tag/Tag.js +1 -1
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/Tag/Tag.spec.d.ts +1 -0
- package/dist/Tag/Tag.spec.js +59 -0
- package/dist/Tag/Tag.spec.js.map +1 -0
- package/dist/Toggle/Toggle.d.ts +2 -0
- package/dist/Toggle/Toggle.js +3 -3
- package/dist/Toggle/Toggle.js.map +1 -1
- package/dist/fields/components/InternalField.js +1 -1
- package/dist/fields/components/InternalField.js.map +1 -1
- package/package.json +23 -23
package/dist/Tag/Tag.js
CHANGED
|
@@ -5,7 +5,7 @@ import { Text } from '../Text';
|
|
|
5
5
|
import { theme } from '../theme';
|
|
6
6
|
import { Icon } from '../Icon';
|
|
7
7
|
export const Tag = ({ label, color, borderColor, bgColor, className, icon, iconColor, ...marginProps }) => (React.createElement(Wrapper, { "$bgColor": bgColor, className: className, "$borderColor": borderColor, ...marginProps, alignContent: "center", justifyContent: "center" },
|
|
8
|
-
icon && React.createElement(TagIcon, { render: icon, color: iconColor, size: 16 }),
|
|
8
|
+
icon && (React.createElement(TagIcon, { render: icon, color: iconColor, size: 16, "data-testid": `tag-icon-${icon}` })),
|
|
9
9
|
React.createElement(TagText, { tag: "span", typo: "label", color: color }, label)));
|
|
10
10
|
const Wrapper = styled(Box) `
|
|
11
11
|
background-color: ${({ $bgColor }) => $bgColor && theme.colors[$bgColor]};
|
package/dist/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAa9B,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,SAAS,EACT,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,gBACI,OAAO,EACjB,SAAS,EAAE,SAAS,kBACN,WAAW,KACrB,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ;IAEtB,IAAI,IAAI,oBAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAa9B,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,SAAS,EACT,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,gBACI,OAAO,EACjB,SAAS,EAAE,SAAS,kBACN,WAAW,KACrB,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ;IAEtB,IAAI,IAAI,CACP,oBAAC,OAAO,IACN,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,iBACK,YAAY,IAAI,EAAE,GAC/B,CACH;IACD,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,IAC1C,KAAK,CACE,CACF,CACX,CAAA;AAID,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;YAC9D,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAC7B,YAAY,IAAI,aAAa,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;;;;;;;;;CAS5D,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE3B,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { Icon } from '../Icon'\nimport { Icons } from 'Icon/iconsList'\n\nexport type TagProps = {\n label: string\n color: Color\n bgColor: Color\n borderColor?: Color\n className?: string\n icon?: Icons\n iconColor?: Color\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n label,\n color,\n borderColor,\n bgColor,\n className,\n icon,\n iconColor,\n ...marginProps\n}) => (\n <Wrapper\n $bgColor={bgColor}\n className={className}\n $borderColor={borderColor}\n {...marginProps}\n alignContent=\"center\"\n justifyContent=\"center\"\n >\n {icon && (\n <TagIcon\n render={icon}\n color={iconColor}\n size={16}\n data-testid={`tag-icon-${icon}`}\n />\n )}\n <TagText tag=\"span\" typo=\"label\" color={color}>\n {label}\n </TagText>\n </Wrapper>\n)\n\ntype WrapperProps = TransientProps<Pick<TagProps, 'bgColor' | 'borderColor'>>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n background-color: ${({ $bgColor }) => $bgColor && theme.colors[$bgColor]};\n border: ${({ $borderColor }) =>\n $borderColor && `1px solid ${theme.colors[$borderColor]}`};\n\n border-radius: 6px;\n padding: 4px 8px;\n\n height: 22px;\n\n box-sizing: border-box;\n display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n display: flex;\n align-items: center;\n font-size: 10px;\n font-weight: 500;\n line-height: 12px;\n text-transform: uppercase;\n`\n\nconst TagIcon = styled(Icon)`\n padding-right: 4px;\n`\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, screen } from '@testing-library/react';
|
|
3
|
+
import '@testing-library/jest-dom';
|
|
4
|
+
import { Tag } from '../Tag';
|
|
5
|
+
describe('Tag Component', () => {
|
|
6
|
+
testCases.forEach(({ description, props }) => {
|
|
7
|
+
test(description, () => {
|
|
8
|
+
render(React.createElement(Tag, { ...props }));
|
|
9
|
+
expect(screen.getByText(props.label)).toBeInTheDocument();
|
|
10
|
+
if (props.icon) {
|
|
11
|
+
const iconElement = screen.getByTestId(`tag-icon-${props.icon}`);
|
|
12
|
+
expect(iconElement).toBeInTheDocument();
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`);
|
|
16
|
+
expect(iconElement).not.toBeInTheDocument();
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
const testCases = [
|
|
22
|
+
{
|
|
23
|
+
description: 'Renders Tag with label Test Tag 0001',
|
|
24
|
+
props: {
|
|
25
|
+
label: 'Test Tag 0001',
|
|
26
|
+
color: 'apple',
|
|
27
|
+
bgColor: 'chia',
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
description: 'Renders Tag with label Test Tag 0002 and flag icon',
|
|
32
|
+
props: {
|
|
33
|
+
label: 'Test Tag 0002',
|
|
34
|
+
color: 'apple',
|
|
35
|
+
bgColor: 'chia',
|
|
36
|
+
icon: 'flag',
|
|
37
|
+
iconColor: 'blueberry',
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
description: 'Renders Tag with label Test Tag 0003 and no icon if iconColor: blueberry, icon: undefined',
|
|
42
|
+
props: {
|
|
43
|
+
label: 'Test Tag 0003',
|
|
44
|
+
color: 'apple',
|
|
45
|
+
bgColor: 'chia',
|
|
46
|
+
iconColor: 'blueberry',
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
description: 'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',
|
|
51
|
+
props: {
|
|
52
|
+
label: 'Test Tag 0004',
|
|
53
|
+
color: 'apple',
|
|
54
|
+
bgColor: 'chia',
|
|
55
|
+
icon: 'flagFilled',
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
];
|
|
59
|
+
//# sourceMappingURL=Tag.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.spec.js","sourceRoot":"","sources":["../../src/Tag/Tag.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,2BAA2B,CAAA;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAG5B,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;QAC3C,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE;YACrB,MAAM,CAAC,oBAAC,GAAG,OAAK,KAAK,GAAI,CAAC,CAAA;YAE1B,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;YAEzD,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;gBACf,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,YAAY,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;gBAChE,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAA;YACzC,CAAC;iBAAM,CAAC;gBACN,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,YAAY,KAAK,CAAC,IAAI,EAAE,CAAC,CAAA;gBAClE,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAA;YAC7C,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG;IAChB;QACE,WAAW,EAAE,sCAAsC;QACnD,KAAK,EAAE;YACL,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,MAAM;SACJ;KACd;IACD;QACE,WAAW,EAAE,oDAAoD;QACjE,KAAK,EAAE;YACL,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,WAAW;SACX;KACd;IACD;QACE,WAAW,EACT,2FAA2F;QAC7F,KAAK,EAAE;YACL,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,WAAW;SACX;KACd;IACD;QACE,WAAW,EACT,0FAA0F;QAC5F,KAAK,EAAE;YACL,KAAK,EAAE,eAAe;YACtB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,MAAM;YACf,IAAI,EAAE,YAAY;SACP;KACd;CACF,CAAA","sourcesContent":["import React from 'react'\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\nimport { Tag } from '../Tag'\nimport { TagProps } from './Tag'\n\ndescribe('Tag Component', () => {\n testCases.forEach(({ description, props }) => {\n test(description, () => {\n render(<Tag {...props} />)\n\n expect(screen.getByText(props.label)).toBeInTheDocument()\n\n if (props.icon) {\n const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n expect(iconElement).toBeInTheDocument()\n } else {\n const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n expect(iconElement).not.toBeInTheDocument()\n }\n })\n })\n})\n\nconst testCases = [\n {\n description: 'Renders Tag with label Test Tag 0001',\n props: {\n label: 'Test Tag 0001',\n color: 'apple',\n bgColor: 'chia',\n } as TagProps,\n },\n {\n description: 'Renders Tag with label Test Tag 0002 and flag icon',\n props: {\n label: 'Test Tag 0002',\n color: 'apple',\n bgColor: 'chia',\n icon: 'flag',\n iconColor: 'blueberry',\n } as TagProps,\n },\n {\n description:\n 'Renders Tag with label Test Tag 0003 and no icon if iconColor: blueberry, icon: undefined',\n props: {\n label: 'Test Tag 0003',\n color: 'apple',\n bgColor: 'chia',\n iconColor: 'blueberry',\n } as TagProps,\n },\n {\n description:\n 'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n props: {\n label: 'Test Tag 0004',\n color: 'apple',\n bgColor: 'chia',\n icon: 'flagFilled',\n } as TagProps,\n },\n]\n"]}
|
package/dist/Toggle/Toggle.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
+
import { Color } from '../theme';
|
|
2
3
|
import { MarginProps } from '../utils/space';
|
|
3
4
|
export type Props = {
|
|
4
5
|
/** unique ID */
|
|
@@ -8,5 +9,6 @@ export type Props = {
|
|
|
8
9
|
disabled?: boolean;
|
|
9
10
|
/** onToggle listener */
|
|
10
11
|
onToggle: () => void;
|
|
12
|
+
bgColor?: Color;
|
|
11
13
|
} & MarginProps;
|
|
12
14
|
export declare const Toggle: FC<Props>;
|
package/dist/Toggle/Toggle.js
CHANGED
|
@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components';
|
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
import { theme } from '../theme';
|
|
5
5
|
import { focusOutline } from '../utils/focusOutline';
|
|
6
|
-
export const Toggle = ({ id, checked, onToggle, disabled, ...marginProps }) => {
|
|
6
|
+
export const Toggle = ({ id, checked, onToggle, disabled, bgColor, ...marginProps }) => {
|
|
7
7
|
return (React.createElement(Switch, { forwardedAs: "label", htmlFor: id, ...marginProps },
|
|
8
|
-
React.createElement(Checkbox, { id: id, disabled: disabled, type: "checkbox", checked: checked, onChange: onToggle, onKeyDown: (e) => {
|
|
8
|
+
React.createElement(Checkbox, { id: id, disabled: disabled, type: "checkbox", checked: checked, onChange: onToggle, "$bgColor": bgColor, onKeyDown: (e) => {
|
|
9
9
|
if (e.key === 'Enter') {
|
|
10
10
|
onToggle();
|
|
11
11
|
}
|
|
@@ -63,7 +63,7 @@ const Checkbox = styled.input `
|
|
|
63
63
|
${focusOutline({ selector: `&:focus-visible + ${Slider}` })}
|
|
64
64
|
|
|
65
65
|
&:checked + ${Slider} {
|
|
66
|
-
background-color: ${theme.colors.pistachio};
|
|
66
|
+
background-color: ${(props) => props.$bgColor ? theme.colors[props.$bgColor] : theme.colors.pistachio};
|
|
67
67
|
border: none;
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -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,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,
|
|
1
|
+
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAcpD,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,MAAM,IAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAE,EAAE,KAAM,WAAW;QACtD,oBAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,cACR,OAAO,EACjB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,QAAQ,EAAE,CAAA;gBACZ,CAAC;YACH,CAAC,gBACU,QAAQ,GACnB;QACF,oBAAC,MAAM,iBAAY,QAAQ,GAAI,CACxB,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAyB;;;;;;;sBAO7B,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;;;;wBAalB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;IAK3C,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACP,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,GAAG,CAAA;;gCAEqB,KAAK,CAAC,MAAM,CAAC,QAAQ;;SAE5C;CACR,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAsB;IAC/C,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;;;;gBAI5D,MAAM;;;CAGrB,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Color, theme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nexport type Props = {\n /** unique ID */\n id?: string\n /** checked flag */\n checked: boolean\n disabled?: boolean\n /** onToggle listener */\n onToggle: () => void\n bgColor?: Color\n} & MarginProps\n\nexport const Toggle: FC<Props> = ({\n id,\n checked,\n onToggle,\n disabled,\n bgColor,\n ...marginProps\n}) => {\n return (\n <Switch forwardedAs=\"label\" htmlFor={id} {...marginProps}>\n <Checkbox\n id={id}\n disabled={disabled}\n type=\"checkbox\"\n checked={checked}\n onChange={onToggle}\n $bgColor={bgColor}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n onToggle()\n }\n }}\n aria-label=\"toggle\"\n />\n <Slider $disabled={disabled} />\n </Switch>\n )\n}\n\nconst Switch = styled(Box)`\n position: relative;\n display: inline-block;\n width: 56px;\n height: 32px;\n\n input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n`\n\nconst Slider = styled.span<{ $disabled?: boolean }>`\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${theme.colors.oatmeal};\n border: none;\n border-radius: 28px;\n transition: 0.2s background-color;\n outline: none;\n\n &:before {\n position: absolute;\n content: '';\n height: 24px;\n width: 24px;\n left: 4px;\n bottom: 4px;\n background-color: ${theme.colors.mascarpone};\n transition: 0.2s transform;\n border-radius: 50%;\n }\n\n ${({ $disabled }) =>\n $disabled\n ? css`\n cursor: not-allowed;\n `\n : css`\n &:hover {\n background-color: ${theme.colors.marzipan};\n }\n `}\n`\n\nconst Checkbox = styled.input<{ $bgColor?: Color }>`\n ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}\n\n &:checked + ${Slider} {\n background-color: ${(props) =>\n props.$bgColor ? theme.colors[props.$bgColor] : theme.colors.pistachio};\n border: none;\n }\n\n &:checked + ${Slider}:before {\n transform: translateX(24px);\n }\n`\n"]}
|
|
@@ -5,7 +5,7 @@ import { Icon } from '../../Icon';
|
|
|
5
5
|
import { Text } from '../../Text';
|
|
6
6
|
export const InternalField = ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, ...marginProps }) => {
|
|
7
7
|
const labelTag = fieldType === 'field' ? 'label' : 'legend';
|
|
8
|
-
return (React.createElement(Container, { forwardedAs: fieldType === 'field' ? 'div' : 'fieldset', className: className, ...marginProps },
|
|
8
|
+
return (React.createElement(Container, { forwardedAs: fieldType === 'field' ? 'div' : 'fieldset', className: 'SMORES_INTERNAL_FIELD' + ' ' + className, ...marginProps },
|
|
9
9
|
label && (React.createElement(React.Fragment, null, renderAsTitle ? (React.createElement(Box, { mb: "16px" },
|
|
10
10
|
React.createElement(Text, { tag: labelTag, typo: "heading-small", htmlFor: htmlFor }, label),
|
|
11
11
|
assistiveText && (React.createElement(Text, { tag: "p", color: "sesame", mt: { custom: 4 } }, assistiveText)))) : (React.createElement(Text, { tag: labelTag, typo: "label", color: error ? 'strawberry' : 'sesame', htmlFor: htmlFor, mb: { custom: 4 } },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAUjC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,SAAS,EACT,KAAK,EACL,aAAa,EACb,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACK,EAAE,EAAE;IACvB,MAAM,QAAQ,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE3D,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EACvD,SAAS,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { Text } from '../../Text'\nimport { CommonFieldProps } from '../commonFieldTypes'\n\ninterface InternalFieldProps extends CommonFieldProps {\n children: ReactNode\n className?: string\n htmlFor?: string\n fieldType: 'field' | 'fieldset'\n}\n\nexport const InternalField = ({\n children,\n fieldType,\n renderAsTitle,\n htmlFor,\n className,\n label,\n assistiveText,\n error,\n errorMsg,\n required,\n completed,\n ...marginProps\n}: InternalFieldProps) => {\n const labelTag = fieldType === 'field' ? 'label' : 'legend'\n\n return (\n <Container\n forwardedAs={fieldType === 'field' ? 'div' : 'fieldset'}\n className={'SMORES_INTERNAL_FIELD' + ' ' + className}\n {...marginProps}\n >\n {label && (\n <>\n {renderAsTitle ? (\n <Box mb=\"16px\">\n <Text tag={labelTag} typo=\"heading-small\" htmlFor={htmlFor}>\n {label}\n </Text>\n\n {assistiveText && (\n <Text tag=\"p\" color=\"sesame\" mt={{ custom: 4 }}>\n {assistiveText}\n </Text>\n )}\n </Box>\n ) : (\n <Text\n tag={labelTag}\n typo=\"label\"\n color={error ? 'strawberry' : 'sesame'}\n htmlFor={htmlFor}\n mb={{ custom: 4 }}\n >\n {label}\n {required && (\n <Text tag=\"span\" typo=\"body-small\" color=\"strawberry\">\n *\n </Text>\n )}\n </Text>\n )}\n </>\n )}\n\n <Box>{children}</Box>\n {fieldType === 'field' && assistiveText && !renderAsTitle && (\n <Text\n tag={labelTag}\n typo=\"caption\"\n color={error ? 'strawberry' : 'sesame'}\n mt={{ custom: 4 }}\n >\n {assistiveText}\n </Text>\n )}\n\n {error &&\n errorMsg &&\n (typeof errorMsg === 'string' ? (\n <Text tag=\"span\" typo=\"caption\" color=\"strawberry\" mt=\"8px\">\n {errorMsg}\n </Text>\n ) : (\n <Box mt=\"8px\">{errorMsg}</Box>\n ))}\n\n {/* When completed is false, whitespace is rendered */}\n {completed !== undefined && (\n <AnimationWrapper\n $displayStatus={completed}\n $isError={!!(error && errorMsg)}\n >\n <StatusWrapper mt={'8px'}>\n <Icon render=\"included\" size={16} color=\"apple\" />\n <Text typo=\"caption\" color=\"apple\">\n Complete\n </Text>\n </StatusWrapper>\n </AnimationWrapper>\n )}\n </Container>\n )\n}\n\nconst AnimationWrapper = styled(Box)<{\n $displayStatus: boolean\n $isError: boolean\n}>`\n width: 0;\n overflow: hidden;\n\n ${({ $displayStatus }) =>\n $displayStatus &&\n css`\n transition: width 0.6s ease-in;\n width: 100%;\n `}\n\n /* This enables animation to appear when previous state is error */\n ${({ $isError }) =>\n $isError &&\n css`\n height: 0;\n `}\n`\n\nconst StatusWrapper = styled(Box)`\n display: flex;\n align-items: center;\n gap: 4px;\n`\n\nconst Container = styled(Box)`\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n\n // In case, the element is a 'fieldset', we remove the border\n border: 0;\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.1.
|
|
3
|
+
"version": "12.2.1-crumbs-fix-adding-generic-classname-to-field.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -41,56 +41,56 @@
|
|
|
41
41
|
"@semantic-release/git": "^10.0.1",
|
|
42
42
|
"@semantic-release/github": "^11.0.1",
|
|
43
43
|
"@semantic-release/npm": "^12.0.0",
|
|
44
|
-
"@snyk/protect": "^1.
|
|
45
|
-
"@storybook/addon-a11y": "^8.6.
|
|
44
|
+
"@snyk/protect": "^1.1296.0",
|
|
45
|
+
"@storybook/addon-a11y": "^8.6.10",
|
|
46
46
|
"@storybook/addon-coverage": "^1.0.5",
|
|
47
|
-
"@storybook/addon-essentials": "^8.6.
|
|
48
|
-
"@storybook/addon-interactions": "^8.6.
|
|
49
|
-
"@storybook/addon-links": "^8.6.
|
|
50
|
-
"@storybook/preview-api": "^8.6.
|
|
51
|
-
"@storybook/react": "^8.6.
|
|
52
|
-
"@storybook/react-vite": "^8.6.
|
|
47
|
+
"@storybook/addon-essentials": "^8.6.10",
|
|
48
|
+
"@storybook/addon-interactions": "^8.6.10",
|
|
49
|
+
"@storybook/addon-links": "^8.6.10",
|
|
50
|
+
"@storybook/preview-api": "^8.6.10",
|
|
51
|
+
"@storybook/react": "^8.6.10",
|
|
52
|
+
"@storybook/react-vite": "^8.6.10",
|
|
53
53
|
"@storybook/test": "^8.2.1",
|
|
54
54
|
"@storybook/test-runner": "^0.22.0",
|
|
55
55
|
"@testing-library/react": "^16.2.0",
|
|
56
56
|
"@types/body-scroll-lock": "^3.1.0",
|
|
57
57
|
"@types/dompurify": "^3.2.0",
|
|
58
|
-
"@types/node": "^22.13.
|
|
59
|
-
"@types/react": "^19.0.
|
|
58
|
+
"@types/node": "^22.13.14",
|
|
59
|
+
"@types/react": "^19.0.12",
|
|
60
60
|
"@types/react-dom": "^19.0.4",
|
|
61
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
62
|
-
"@typescript-eslint/parser": "^8.
|
|
61
|
+
"@typescript-eslint/eslint-plugin": "^8.28.0",
|
|
62
|
+
"@typescript-eslint/parser": "^8.28.0",
|
|
63
63
|
"axe-playwright": "^2.1.0",
|
|
64
64
|
"conventional-changelog-conventionalcommits": "^8.0.0",
|
|
65
|
-
"eslint": "^9.
|
|
65
|
+
"eslint": "^9.23.0",
|
|
66
66
|
"eslint-config-prettier": "^10.1.1",
|
|
67
|
-
"eslint-plugin-prettier": "^5.2.
|
|
67
|
+
"eslint-plugin-prettier": "^5.2.5",
|
|
68
68
|
"eslint-plugin-react": "^7.37.4",
|
|
69
69
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
70
70
|
"husky": "^9.1.7",
|
|
71
71
|
"jsdom": "^26.0.0",
|
|
72
|
-
"lint-staged": "^15.
|
|
73
|
-
"playwright": "^1.51.
|
|
72
|
+
"lint-staged": "^15.5.0",
|
|
73
|
+
"playwright": "^1.51.1",
|
|
74
74
|
"prettier": "^3.5.3",
|
|
75
75
|
"react": "^19.0.0",
|
|
76
76
|
"react-dom": "^19.0.0",
|
|
77
77
|
"rimraf": "^6.0.1",
|
|
78
78
|
"semantic-release": "^24.2.3",
|
|
79
79
|
"storybook": "^8.0.4",
|
|
80
|
-
"styled-components": "^6.1.
|
|
80
|
+
"styled-components": "^6.1.16",
|
|
81
81
|
"typescript": "^5.8.2",
|
|
82
|
-
"typescript-eslint": "^8.
|
|
83
|
-
"vite": "^6.2.
|
|
84
|
-
"vitest": "^3.0.
|
|
82
|
+
"typescript-eslint": "^8.28.0",
|
|
83
|
+
"vite": "^6.2.3",
|
|
84
|
+
"vitest": "^3.0.9"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
87
|
"@floating-ui/react": "0.27.5",
|
|
88
|
-
"@lexical/react": "^0.
|
|
88
|
+
"@lexical/react": "^0.29.0",
|
|
89
89
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
90
90
|
"date-fns": "^4.1.0",
|
|
91
91
|
"dompurify": "^3.2.4",
|
|
92
92
|
"fuse.js": "^7.1.0",
|
|
93
|
-
"lexical": "^0.
|
|
93
|
+
"lexical": "^0.29.0",
|
|
94
94
|
"polished": "^4.1.3"
|
|
95
95
|
},
|
|
96
96
|
"peerDependencies": {
|