@mrshmllw/smores-react 16.2.17 → 16.3.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.
Files changed (4) hide show
  1. package/dist/Button/Button.d.ts +3 -0
  2. package/dist/Button/Button.js +25 -4
  3. package/dist/Button/Button.js.map +1 -1
  4. package/package.json +14 -14
package/dist/Button/Button.d.ts CHANGED
@@ -10,7 +10,10 @@ type Props = {
10
10
  loading?: boolean;
11
11
  primary?: boolean;
12
12
  secondary?: boolean;
13
+ /** Low-emphasis, text-only action, e.g. "Skip" or "Cancel" */
14
+ tertiary?: boolean;
13
15
  fallbackStyle?: boolean;
16
+ /** Legacy underlined text style. Prefer `tertiary` for new low-emphasis actions */
14
17
  textBtn?: boolean;
15
18
  smallButton?: boolean;
16
19
  icon?: Icons;
package/dist/Button/Button.js CHANGED
@@ -7,12 +7,14 @@ import { Icon as IconComponent } from '../Icon';
7
7
  import { Loader } from '../Loader';
8
8
  import { focusOutlineStyle } from '../utils/focusOutline';
9
9
  export const Button = forwardRef((props, ref) => {
10
- const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon, iconComponent, trailingIcon = false, forcedWidth = '', form, type, ...otherProps } = props;
11
- const iconToRender = iconComponent ? (_jsx(CommonIconContainer, { $size: smallButton ? 16 : 24, children: iconComponent })) : icon ? (_jsx(IconContainer, { $trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24, color: "color.icon.base" })) : null;
12
- return (_jsxs(Container, { forwardedAs: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, $loading: loading, $primary: primary, $secondary: secondary, $fallbackStyle: fallbackStyle, $textBtn: textBtn, $smallButton: smallButton, $trailingIcon: trailingIcon, $forcedWidth: forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref, children: [loading && (_jsx(LoaderContainer, { children: _jsx(Loader, { color: "color.icon.base", height: "16" }) })), _jsxs(ContentContainer, { $hasIcon: !!iconToRender, $loading: loading, children: [!trailingIcon && iconToRender ? iconToRender : null, _jsx(ChildrenContainer, { className: "childrenContainer", children: children }), trailingIcon && iconToRender && textBtn ? iconToRender : null] })] }));
10
+ const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, tertiary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon, iconComponent, trailingIcon = false, forcedWidth = '', form, type, ...otherProps } = props;
11
+ const iconToRender = iconComponent ? (_jsx(CommonIconContainer, { $size: smallButton ? 16 : 24, children: iconComponent })) : icon ? (_jsx(IconContainer, { $trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24,
12
+ // Tertiary dims by colour rather than opacity when disabled
13
+ color: tertiary && disabled ? 'color.icon.nonEssential' : 'color.icon.base' })) : null;
14
+ return (_jsxs(Container, { forwardedAs: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, $loading: loading, $primary: primary, $secondary: secondary, $tertiary: tertiary, $fallbackStyle: fallbackStyle, $textBtn: textBtn, $smallButton: smallButton, $trailingIcon: trailingIcon, $forcedWidth: forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref, children: [loading && (_jsx(LoaderContainer, { children: _jsx(Loader, { color: "color.icon.base", height: "16" }) })), _jsxs(ContentContainer, { $hasIcon: !!iconToRender, $loading: loading, children: [!trailingIcon && iconToRender ? iconToRender : null, _jsx(ChildrenContainer, { className: "childrenContainer", children: children }), trailingIcon && iconToRender && textBtn ? iconToRender : null] })] }));
13
15
  });
14
16
  Button.displayName = 'Button';
15
- const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forcedWidth, $fallbackStyle, $textBtn, $smallButton, }) => css `
17
+ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $tertiary, $forcedWidth, $fallbackStyle, $textBtn, $smallButton, }) => css `
16
18
  position: relative;
17
19
  background-color: ${({ theme }) => theme.color.interactive.primary.base};
18
20
  box-shadow: none;
@@ -50,6 +52,25 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forc
50
52
  background-color: ${({ theme }) => theme.color.interactive.secondary.selected};
51
53
  }
52
54
  `}
55
+ ${$tertiary &&
56
+ css `
57
+ background-color: transparent;
58
+ opacity: 1;
59
+
60
+ &:hover {
61
+ background-color: ${({ theme }) => !(disabled || $loading) &&
62
+ theme.color.interactive.neutral.subtle.hover};
63
+ }
64
+ &:active {
65
+ background-color: ${({ theme }) => !(disabled || $loading) &&
66
+ theme.color.interactive.neutral.subtle.pressed};
67
+ }
68
+
69
+ ${disabled &&
70
+ css `
71
+ color: ${({ theme }) => theme.color.text.nonEssential};
72
+ `}
73
+ `}
53
74
  ${$fallbackStyle &&
54
75
  css `
55
76
  background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};
package/dist/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonHTMLAttributes,\n FC,\n FormEvent,\n ReactNode,\n forwardRef,\n} from 'react'\nimport styled, { css } from 'styled-components'\nimport { IconContainer as CommonIconContainer } from '../sharedStyles/shared.styles'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n children: ReactNode\n id?: string\n className?: string\n disabled?: boolean\n handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n loading?: boolean\n primary?: boolean\n secondary?: boolean\n fallbackStyle?: boolean\n textBtn?: boolean\n smallButton?: boolean\n icon?: Icons\n iconComponent?: ReactNode\n trailingIcon?: boolean\n forcedWidth?: string\n form?: string\n}\n\nexport type ButtonProps = Props &\n MarginProps &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>((props, ref) => {\n const {\n children,\n id,\n className = '',\n disabled = false,\n handleClick,\n loading = false,\n primary = false,\n secondary = false,\n fallbackStyle = false,\n textBtn = false,\n smallButton = false,\n icon,\n iconComponent,\n trailingIcon = false,\n forcedWidth = '',\n form,\n type,\n ...otherProps\n } = props\n\n const iconToRender = iconComponent ? (\n <CommonIconContainer $size={smallButton ? 16 : 24}>\n {iconComponent}\n </CommonIconContainer>\n ) : icon ? (\n <IconContainer\n $trailingIcon={trailingIcon}\n render={icon}\n size={smallButton ? 16 : 24}\n color=\"color.icon.base\"\n />\n ) : null\n\n return (\n <Container\n forwardedAs=\"button\"\n id={id}\n className={className}\n disabled={disabled || loading}\n onClick={handleClick}\n $loading={loading}\n $primary={primary}\n $secondary={secondary}\n $fallbackStyle={fallbackStyle}\n $textBtn={textBtn}\n $smallButton={smallButton}\n $trailingIcon={trailingIcon}\n $forcedWidth={forcedWidth}\n {...(form ? { form } : {})}\n type={type}\n {...otherProps}\n ref={ref}\n >\n {loading && (\n <LoaderContainer>\n <Loader color=\"color.icon.base\" height=\"16\" />\n </LoaderContainer>\n )}\n <ContentContainer $hasIcon={!!iconToRender} $loading={loading}>\n {!trailingIcon && iconToRender ? iconToRender : null}\n <ChildrenContainer className=\"childrenContainer\">\n {children}\n </ChildrenContainer>\n {trailingIcon && iconToRender && textBtn ? iconToRender : null}\n </ContentContainer>\n </Container>\n )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n Required<\n Pick<\n ButtonProps,\n | 'primary'\n | 'secondary'\n | 'forcedWidth'\n | 'fallbackStyle'\n | 'textBtn'\n | 'trailingIcon'\n | 'smallButton'\n >\n >\n> & {\n $loading: NonNullable<ButtonProps['loading']>\n disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n ({\n disabled,\n $loading,\n $primary,\n $secondary,\n $forcedWidth,\n $fallbackStyle,\n $textBtn,\n $smallButton,\n }) => css`\n position: relative;\n background-color: ${({ theme }) => theme.color.interactive.primary.base};\n box-shadow: none;\n color: ${({ theme }) => theme.color.text.base};\n padding: 0 20px;\n outline: none;\n border-radius: 10000px;\n font-weight: ${({ theme }) => theme.fontWeight[500]};\n cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n line-height: 100%;\n font-size: 16px;\n opacity: ${disabled ? '0.5' : '1'};\n width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n ${focusOutlineStyle}\n\n ${\n $primary &&\n css`\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.primary.selected};\n }\n `\n }\n\n ${\n $secondary &&\n css`\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.secondary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.selected};\n }\n `\n }\n ${\n $fallbackStyle &&\n css`\n background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.neutral.subtle.selected};\n }\n `\n }\n ${\n $smallButton &&\n css`\n padding: 0 10px;\n min-width: 54px;\n font-size: 14px;\n\n .childrenContainer {\n padding: 9px 0;\n }\n\n span {\n margin: 0 5px 0 0;\n }\n `\n }\n ${\n $textBtn &&\n css`\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n text-decoration: underline;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: transparent;\n color: ${({ theme }) => theme.color.text.subtle};\n }\n `\n }\n `,\n)\n\nconst LoaderContainer = styled.div`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $hasIcon?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: ${({ $hasIcon }) => ($hasIcon ? 'space-evenly' : 'center')};\n opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n ({ $trailingIcon }) => css`\n margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n `,\n)\n\nconst ChildrenContainer = styled.div`\n padding: 16px 0;\n flex-grow: 1;\n`\n"]}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonHTMLAttributes,\n FC,\n FormEvent,\n ReactNode,\n forwardRef,\n} from 'react'\nimport styled, { css } from 'styled-components'\nimport { IconContainer as CommonIconContainer } from '../sharedStyles/shared.styles'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n children: ReactNode\n id?: string\n className?: string\n disabled?: boolean\n handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n loading?: boolean\n primary?: boolean\n secondary?: boolean\n /** Low-emphasis, text-only action, e.g. \"Skip\" or \"Cancel\" */\n tertiary?: boolean\n fallbackStyle?: boolean\n /** Legacy underlined text style. Prefer `tertiary` for new low-emphasis actions */\n textBtn?: boolean\n smallButton?: boolean\n icon?: Icons\n iconComponent?: ReactNode\n trailingIcon?: boolean\n forcedWidth?: string\n form?: string\n}\n\nexport type ButtonProps = Props &\n MarginProps &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>((props, ref) => {\n const {\n children,\n id,\n className = '',\n disabled = false,\n handleClick,\n loading = false,\n primary = false,\n secondary = false,\n tertiary = false,\n fallbackStyle = false,\n textBtn = false,\n smallButton = false,\n icon,\n iconComponent,\n trailingIcon = false,\n forcedWidth = '',\n form,\n type,\n ...otherProps\n } = props\n\n const iconToRender = iconComponent ? (\n <CommonIconContainer $size={smallButton ? 16 : 24}>\n {iconComponent}\n </CommonIconContainer>\n ) : icon ? (\n <IconContainer\n $trailingIcon={trailingIcon}\n render={icon}\n size={smallButton ? 16 : 24}\n // Tertiary dims by colour rather than opacity when disabled\n color={\n tertiary && disabled ? 'color.icon.nonEssential' : 'color.icon.base'\n }\n />\n ) : null\n\n return (\n <Container\n forwardedAs=\"button\"\n id={id}\n className={className}\n disabled={disabled || loading}\n onClick={handleClick}\n $loading={loading}\n $primary={primary}\n $secondary={secondary}\n $tertiary={tertiary}\n $fallbackStyle={fallbackStyle}\n $textBtn={textBtn}\n $smallButton={smallButton}\n $trailingIcon={trailingIcon}\n $forcedWidth={forcedWidth}\n {...(form ? { form } : {})}\n type={type}\n {...otherProps}\n ref={ref}\n >\n {loading && (\n <LoaderContainer>\n <Loader color=\"color.icon.base\" height=\"16\" />\n </LoaderContainer>\n )}\n <ContentContainer $hasIcon={!!iconToRender} $loading={loading}>\n {!trailingIcon && iconToRender ? iconToRender : null}\n <ChildrenContainer className=\"childrenContainer\">\n {children}\n </ChildrenContainer>\n {trailingIcon && iconToRender && textBtn ? iconToRender : null}\n </ContentContainer>\n </Container>\n )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n Required<\n Pick<\n ButtonProps,\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'forcedWidth'\n | 'fallbackStyle'\n | 'textBtn'\n | 'trailingIcon'\n | 'smallButton'\n >\n >\n> & {\n $loading: NonNullable<ButtonProps['loading']>\n disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n ({\n disabled,\n $loading,\n $primary,\n $secondary,\n $tertiary,\n $forcedWidth,\n $fallbackStyle,\n $textBtn,\n $smallButton,\n }) => css`\n position: relative;\n background-color: ${({ theme }) => theme.color.interactive.primary.base};\n box-shadow: none;\n color: ${({ theme }) => theme.color.text.base};\n padding: 0 20px;\n outline: none;\n border-radius: 10000px;\n font-weight: ${({ theme }) => theme.fontWeight[500]};\n cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n line-height: 100%;\n font-size: 16px;\n opacity: ${disabled ? '0.5' : '1'};\n width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n ${focusOutlineStyle}\n\n ${\n $primary &&\n css`\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.primary.selected};\n }\n `\n }\n\n ${\n $secondary &&\n css`\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.secondary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.selected};\n }\n `\n }\n ${\n $tertiary &&\n css`\n background-color: transparent;\n opacity: 1;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n !(disabled || $loading) &&\n theme.color.interactive.neutral.subtle.pressed};\n }\n\n ${\n disabled &&\n css`\n color: ${({ theme }) => theme.color.text.nonEssential};\n `\n }\n `\n }\n ${\n $fallbackStyle &&\n css`\n background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.neutral.subtle.selected};\n }\n `\n }\n ${\n $smallButton &&\n css`\n padding: 0 10px;\n min-width: 54px;\n font-size: 14px;\n\n .childrenContainer {\n padding: 9px 0;\n }\n\n span {\n margin: 0 5px 0 0;\n }\n `\n }\n ${\n $textBtn &&\n css`\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n text-decoration: underline;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: transparent;\n color: ${({ theme }) => theme.color.text.subtle};\n }\n `\n }\n `,\n)\n\nconst LoaderContainer = styled.div`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $hasIcon?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: ${({ $hasIcon }) => ($hasIcon ? 'space-evenly' : 'center')};\n opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n ({ $trailingIcon }) => css`\n margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n `,\n)\n\nconst ChildrenContainer = styled.div`\n padding: 16px 0;\n flex-grow: 1;\n`\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mrshmllw/smores-react",
3
- "version": "16.2.17",
3
+ "version": "16.3.1",
4
4
  "description": "Collection of React components used by Marshmallow Technology",
5
5
  "main": "./dist/index.js",
6
6
  "type": "module",
@@ -52,33 +52,33 @@
52
52
  "@floating-ui/react": "0.27.20",
53
53
  "@fortawesome/fontawesome-svg-core": "^7.1.0",
54
54
  "@fortawesome/react-fontawesome": "^3.1.1",
55
- "@lexical/code-core": "^0.51.0",
56
- "@lexical/code-shiki": "^0.51.0",
57
- "@lexical/react": "^0.51.0",
58
- "@lexical/selection": "^0.51.0",
59
- "@lexical/utils": "^0.51.0",
55
+ "@lexical/code-core": "^0.52.0",
56
+ "@lexical/code-shiki": "^0.52.0",
57
+ "@lexical/react": "^0.52.0",
58
+ "@lexical/selection": "^0.52.0",
59
+ "@lexical/utils": "^0.52.0",
60
60
  "@mrshmllw/smores-foundations": "^1.2.0",
61
61
  "body-scroll-lock": "^4.0.0-beta.0",
62
62
  "date-fns": "^4.4.0",
63
63
  "dompurify": "^3.4.16",
64
64
  "fuse.js": "^7.5.0",
65
- "lexical": "^0.51.0",
65
+ "lexical": "^0.52.0",
66
66
  "polished": "^4.3.1"
67
67
  },
68
68
  "devDependencies": {
69
69
  "@commitlint/cli": "^21.2.3",
70
70
  "@mrshmllw/campfire": "^7.1.0",
71
71
  "@snyk/protect": "^1.1307.4",
72
- "@storybook/addon-a11y": "^10.6.0",
72
+ "@storybook/addon-a11y": "^10.6.1",
73
73
  "@storybook/addon-coverage": "^3.0.2",
74
- "@storybook/addon-docs": "^10.6.0",
75
- "@storybook/addon-links": "^10.6.0",
76
- "@storybook/react-vite": "^10.6.0",
74
+ "@storybook/addon-docs": "^10.6.1",
75
+ "@storybook/addon-links": "^10.6.1",
76
+ "@storybook/react-vite": "^10.6.1",
77
77
  "@storybook/test-runner": "^0.24.5",
78
78
  "@testing-library/jest-dom": "^7.0.1",
79
79
  "@testing-library/react": "^16.3.3",
80
80
  "@types/body-scroll-lock": "^3.1.2",
81
- "@types/node": "^26.6.2",
81
+ "@types/node": "^26.6.3",
82
82
  "@types/react": "^19.3.0",
83
83
  "@types/react-dom": "^19.3.0",
84
84
  "axe-playwright": "^2.2.2",
@@ -87,9 +87,9 @@
87
87
  "husky": "^9.1.7",
88
88
  "jest-styled-components": "^7.4.0",
89
89
  "jsdom": "^30.1.1",
90
- "lint-staged": "^17.5.1",
90
+ "lint-staged": "^17.6.0",
91
91
  "oxlint": "^1.78.0",
92
- "oxlint-tsgolint": "^7.0.2002",
92
+ "oxlint-tsgolint": "^7.0.2003",
93
93
  "playwright": "^1.62.1",
94
94
  "prettier": "^3.9.6",
95
95
  "react": "^19.3.0",