@mrshmllw/smores-react 12.7.0 → 12.8.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/IconStrict/IconStrict.js +1 -1
- package/dist/IconStrict/IconStrict.js.map +1 -1
- package/dist/theme.d.ts +2 -0
- package/dist/theme.js +1 -0
- package/dist/theme.js.map +1 -1
- package/package.json +12 -12
|
@@ -24,7 +24,7 @@ const iconSizes = {
|
|
|
24
24
|
};
|
|
25
25
|
export const IconStrict = ({ id, className = '', size = 16, render, iconColor, backgroundColor, rotate, handleClick, title, ...otherProps }) => {
|
|
26
26
|
const isButton = !!handleClick;
|
|
27
|
-
const defaultLabel =
|
|
27
|
+
const defaultLabel = title ?? (isButton ? (title ?? 'icon-button') : undefined);
|
|
28
28
|
return (React.createElement(IconContainer, { id: id, as: isButton ? 'button' : 'div', className: className, "$size": size, "$backgroundColor": backgroundColor, onClick: handleClick, title: defaultLabel, ...otherProps },
|
|
29
29
|
React.createElement(Icon, { render: render, size: backgroundColor ? iconSizes[size].smallSize : size, color: iconColor, rotate: rotate })));
|
|
30
30
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAsBzD,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,EAAE,EACF,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,CAAA;IAC9B,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"IconStrict.js","sourceRoot":"","sources":["../../src/IconStrict/IconStrict.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAsBzD,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC9C,EAAE,EACF,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,MAAM,EACN,SAAS,EACT,eAAe,EACf,MAAM,EACN,WAAW,EACX,KAAK,EACL,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,CAAC,CAAC,WAAW,CAAA;IAC9B,MAAM,YAAY,GAChB,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC5D,OAAO,CACL,oBAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC/B,SAAS,EAAE,SAAS,WACb,IAAI,sBACO,eAAe,EACjC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,YAAY,KACf,UAAU;QAEd,oBAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACxD,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAC9B,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;eAEhC,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;;iBAEpD,KAAK;cACR,KAAK;;wBAEK,gBAAgB;IAClC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC;IAChC,CAAC,CAAC,MAAM;cACA,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;;MAEvC,OAAO;IACT;;0BAGI,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,MACnE;;;KAGD;;MAEC,iBAAiB;GACpB,CACF,CAAA","sourcesContent":["import React, { ButtonHTMLAttributes, FC, FormEvent } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { darken } from 'polished'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\n\nimport { Color, theme } from '../theme'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nexport type IconStrictProps = {\n id?: string\n /** className attribute to apply classes from props */\n className?: string\n /** set size of the Icon (including background) */\n size?: 16 | 24 | 36 | 48\n /** specify what Icon to render */\n render: Icons\n /** set icon colour */\n iconColor?: Color\n /** set background colour */\n backgroundColor?: Color\n /** function to handle click */\n handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n /** rotation degrees */\n rotate?: number\n} & MarginProps &\n Partial<ButtonHTMLAttributes<HTMLButtonElement>>\n\nconst iconSizes = {\n 48: {\n smallSize: 28,\n padding: 10,\n },\n 36: {\n smallSize: 20,\n padding: 8,\n },\n 24: {\n smallSize: 12,\n padding: 6,\n },\n 16: {\n smallSize: 10,\n padding: 3,\n },\n}\n\nexport const IconStrict: FC<IconStrictProps> = ({\n id,\n className = '',\n size = 16,\n render,\n iconColor,\n backgroundColor,\n rotate,\n handleClick,\n title,\n ...otherProps\n}) => {\n const isButton = !!handleClick\n const defaultLabel =\n title ?? (isButton ? (title ?? 'icon-button') : undefined)\n return (\n <IconContainer\n id={id}\n as={isButton ? 'button' : 'div'}\n className={className}\n $size={size}\n $backgroundColor={backgroundColor}\n onClick={handleClick}\n title={defaultLabel}\n {...otherProps}\n >\n <Icon\n render={render}\n size={backgroundColor ? iconSizes[size].smallSize : size}\n color={iconColor}\n rotate={rotate}\n />\n </IconContainer>\n )\n}\n\ninterface IIconStrict {\n $size: 16 | 24 | 36 | 48\n $backgroundColor?: Color\n onClick?: (e: FormEvent<HTMLButtonElement>) => void\n}\n\nconst IconContainer = styled.div<IIconStrict>(\n ({ $size, $backgroundColor, onClick }) => css`\n position: relative;\n padding: ${$backgroundColor ? `${iconSizes[$size].padding}px` : 0};\n width: 100%;\n max-width: ${$size}px;\n height: ${$size}px;\n border-radius: 100%;\n background-color: ${$backgroundColor\n ? theme.colors[$backgroundColor]\n : 'none'};\n cursor: ${onClick ? 'pointer' : 'default'};\n\n ${onClick &&\n `\n &:hover {\n background-color: ${\n $backgroundColor ? darken(0.1, theme.colors[$backgroundColor]) : 'none'\n };\n }\n \n `}\n\n ${focusOutlineStyle}\n `,\n)\n"]}
|
package/dist/theme.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ declare const colors: {
|
|
|
21
21
|
peanut: string;
|
|
22
22
|
marzipan: string;
|
|
23
23
|
oatmeal: string;
|
|
24
|
+
satsuma: string;
|
|
24
25
|
strawberry: string;
|
|
25
26
|
watermelon: string;
|
|
26
27
|
apple: string;
|
|
@@ -66,6 +67,7 @@ export declare const theme: {
|
|
|
66
67
|
peanut: string;
|
|
67
68
|
marzipan: string;
|
|
68
69
|
oatmeal: string;
|
|
70
|
+
satsuma: string;
|
|
69
71
|
strawberry: string;
|
|
70
72
|
watermelon: string;
|
|
71
73
|
apple: string;
|
package/dist/theme.js
CHANGED
package/dist/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;IACb,eAAe;IACf,QAAQ,EAAE,SAAS,EAAE,MAAM;IAC3B,eAAe,EAAE,SAAS,EAAE,MAAM;IAClC,SAAS,EAAE,SAAS,EAAE,KAAK;IAC3B,UAAU,EAAE,SAAS,EAAE,KAAK;IAE5B,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,MAAM;IACvB,SAAS,EAAE,SAAS,EAAE,MAAM;IAC5B,MAAM,EAAE,SAAS,EAAE,KAAK;IACxB,IAAI,EAAE,SAAS,EAAE,KAAK;IAEtB,gBAAgB;IAChB,OAAO,EAAE,SAAS,EAAE,MAAM;IAC1B,UAAU,EAAE,SAAS,EAAE,MAAM;IAC7B,OAAO,EAAE,SAAS,EAAE,KAAK;IACzB,KAAK,EAAE,SAAS,EAAE,IAAI;IAEtB,kBAAkB;IAClB,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,QAAQ,EAAE,SAAS,EAAE,OAAO;IAC5B,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ;IAC5B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAC7B,OAAO,EAAE,SAAS,EAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;IACb,eAAe;IACf,QAAQ,EAAE,SAAS,EAAE,MAAM;IAC3B,eAAe,EAAE,SAAS,EAAE,MAAM;IAClC,SAAS,EAAE,SAAS,EAAE,KAAK;IAC3B,UAAU,EAAE,SAAS,EAAE,KAAK;IAE5B,iBAAiB;IACjB,IAAI,EAAE,SAAS,EAAE,MAAM;IACvB,SAAS,EAAE,SAAS,EAAE,MAAM;IAC5B,MAAM,EAAE,SAAS,EAAE,KAAK;IACxB,IAAI,EAAE,SAAS,EAAE,KAAK;IAEtB,gBAAgB;IAChB,OAAO,EAAE,SAAS,EAAE,MAAM;IAC1B,UAAU,EAAE,SAAS,EAAE,MAAM;IAC7B,OAAO,EAAE,SAAS,EAAE,KAAK;IACzB,KAAK,EAAE,SAAS,EAAE,IAAI;IAEtB,kBAAkB;IAClB,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,QAAQ,EAAE,SAAS,EAAE,OAAO;IAC5B,SAAS,EAAE,SAAS,EAAE,QAAQ;IAC9B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ;IAC5B,MAAM,EAAE,SAAS,EAAE,OAAO;IAC1B,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAC7B,OAAO,EAAE,SAAS,EAAE,OAAO;IAC3B,OAAO,EAAE,SAAS;IAElB,gBAAgB;IAChB,UAAU,EAAE,SAAS,EAAE,YAAY;IACnC,UAAU,EAAE,SAAS,EAAE,WAAW;IAClC,KAAK,EAAE,SAAS,EAAE,cAAc;IAChC,IAAI,EAAE,SAAS,EAAE,aAAa;IAC9B,KAAK,EAAE,SAAS,EAAE,cAAc;IAChC,QAAQ,EAAE,SAAS,EAAE,aAAa;IAClC,SAAS,EAAE,SAAS,EAAE,oBAAoB;IAE1C,4BAA4B;IAC5B,gBAAgB,EAAE,SAAS;IAC3B,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,CAAC,EAAE,SAAS;IACZ,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,SAAS;IAClB,GAAG,EAAE,SAAS;IACd,QAAQ,EAAE,SAAS;CACpB,CAAA;AAID,MAAM,IAAI,GAAG;IACX,MAAM,EAAE;QACN,MAAM,EAAE,GAAG;QACX,MAAM,EAAE,GAAG;QACX,IAAI,EAAE,GAAG;KACV;IACD,MAAM,EACJ,+IAA+I;CAClJ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM;IACN,IAAI;CACL,CAAA","sourcesContent":["const colors = {\n // Core Primary\n lollipop: '#FF69B5', // 120\n marshmallowPink: '#FF88C8', // 100\n bubblegum: '#FFB3DA', // 60\n fairyFloss: '#FFCCE7', // 40\n\n // Core Secondary\n boba: '#0E0E0C', // 120\n liquorice: '#292924', // 100\n sesame: '#636768', // 60\n chia: '#D2D2D2', // 40\n\n // Core Tertiary\n custard: '#F1E9DC', // 120\n mascarpone: '#F8F2EA', // 100\n coconut: '#FBF8F5', // 60\n cream: '#FFFFFF', // 0\n\n // Brand Secondary\n spearmint: '#294636', // 1 100\n feijoa: '#3B5848', // 1 60\n blueberry: '#89A2B6', // 2 100\n macaroon: '#BBCFDF', // 2 60\n pistachio: '#838E49', // 3 100\n matcha: '#DBE1B0', // 3 60\n caramel: '#C26B2A', // 4 100\n peanut: '#F8C699', // 4 60\n marzipan: '#A1957C', // 5 100\n oatmeal: '#DAD2C4', // 5 60\n satsuma: '#FFECD5',\n\n // Traffic light\n strawberry: '#DF2929', // Error 100\n watermelon: '#F5CFCC', // Error 20\n apple: '#008933', // Success 100\n mint: '#C9E2CE', // Success 20\n lemon: '#FFD23A', // Warning 100\n sherbert: '#FCF0D0', // Warning 20\n tangerine: '#FF9F2C', // Agent Warning 100\n\n // Third-party brand colours\n compareTheMarket: '#004A8E',\n confused: '#000A8C',\n onfido: '#3640F5',\n x: '#55ACEE',\n premfina: '#F08422',\n checkout: '#56AC88',\n meta: '#3B5998',\n stripe: '#6772E5',\n intercom: '#286EFA',\n ravelin: '#2A4AFC',\n rac: '#EA7D24',\n hometree: '#17171C',\n}\n\nexport type Color = keyof typeof colors\n\nconst font = {\n weight: {\n normal: 400,\n medium: 500,\n bold: 700,\n },\n system:\n '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"',\n}\n\nexport const theme = {\n colors,\n font,\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.8.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -41,28 +41,28 @@
|
|
|
41
41
|
"@semantic-release/git": "^10.0.1",
|
|
42
42
|
"@semantic-release/github": "^11.0.2",
|
|
43
43
|
"@semantic-release/npm": "^12.0.0",
|
|
44
|
-
"@snyk/protect": "^1.
|
|
45
|
-
"@storybook/addon-a11y": "^8.6.
|
|
44
|
+
"@snyk/protect": "^1.1297.1",
|
|
45
|
+
"@storybook/addon-a11y": "^8.6.14",
|
|
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.14",
|
|
48
|
+
"@storybook/addon-interactions": "^8.6.14",
|
|
49
|
+
"@storybook/addon-links": "^8.6.14",
|
|
50
|
+
"@storybook/preview-api": "^8.6.14",
|
|
51
|
+
"@storybook/react": "^8.6.14",
|
|
52
|
+
"@storybook/react-vite": "^8.6.14",
|
|
53
53
|
"@storybook/test": "^8.2.1",
|
|
54
54
|
"@storybook/test-runner": "^0.22.0",
|
|
55
55
|
"@testing-library/react": "^16.3.0",
|
|
56
56
|
"@types/body-scroll-lock": "^3.1.0",
|
|
57
57
|
"@types/dompurify": "^3.2.0",
|
|
58
|
-
"@types/node": "^22.15.
|
|
58
|
+
"@types/node": "^22.15.19",
|
|
59
59
|
"@types/react": "^19.1.4",
|
|
60
60
|
"@types/react-dom": "^19.1.5",
|
|
61
61
|
"@typescript-eslint/eslint-plugin": "^8.32.1",
|
|
62
62
|
"@typescript-eslint/parser": "^8.32.1",
|
|
63
63
|
"axe-playwright": "^2.1.0",
|
|
64
64
|
"conventional-changelog-conventionalcommits": "^8.0.0",
|
|
65
|
-
"eslint": "^9.
|
|
65
|
+
"eslint": "^9.27.0",
|
|
66
66
|
"eslint-config-prettier": "^10.1.5",
|
|
67
67
|
"eslint-plugin-prettier": "^5.4.0",
|
|
68
68
|
"eslint-plugin-react": "^7.37.5",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"react": "^19.0.0",
|
|
76
76
|
"react-dom": "^19.1.0",
|
|
77
77
|
"rimraf": "^6.0.1",
|
|
78
|
-
"semantic-release": "^24.2.
|
|
78
|
+
"semantic-release": "^24.2.4",
|
|
79
79
|
"storybook": "^8.0.4",
|
|
80
80
|
"styled-components": "^6.1.18",
|
|
81
81
|
"typescript": "^5.8.3",
|