@mrshmllw/smores-react 13.8.0 → 13.9.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/Icon/Icon.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { MarginProps } from '../utils/space';
|
|
3
|
-
import { Color } from '../theme';
|
|
4
3
|
import { Icons } from './iconsList';
|
|
4
|
+
import { ColorTypes } from '../ThemeProvider/utils/colourMap';
|
|
5
5
|
export type IconProps = {
|
|
6
6
|
/** className attribute to apply classes from props */
|
|
7
7
|
className?: string;
|
|
@@ -10,7 +10,7 @@ export type IconProps = {
|
|
|
10
10
|
/** set size of the Icon */
|
|
11
11
|
size?: number;
|
|
12
12
|
/** set color of the Icon */
|
|
13
|
-
color?:
|
|
13
|
+
color?: ColorTypes;
|
|
14
14
|
/** rotation degrees */
|
|
15
15
|
rotate?: number;
|
|
16
16
|
} & MarginProps;
|
package/dist/Icon/Icon.js
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
2
|
+
import styled, { css, useTheme } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
|
-
import { theme } from '../theme';
|
|
5
4
|
import { iconList } from './iconsList';
|
|
6
|
-
|
|
5
|
+
import { resolveToThemeColor, } from '../ThemeProvider/utils/colourMap';
|
|
6
|
+
export const Icon = ({ className = '', render, size = 24, color = 'color.icon.base', rotate = 0, ...marginProps }) => {
|
|
7
|
+
const theme = useTheme();
|
|
7
8
|
if (!render || !iconList[render] || render.length === 0)
|
|
8
9
|
return null;
|
|
10
|
+
const resolvedColor = resolveToThemeColor(color, theme);
|
|
9
11
|
const IconComponent = iconList[render];
|
|
10
|
-
return (React.createElement(Container, { forwardedAs: "span", "data-testid": `${render}-container`, className: className, size: size, rotate: rotate, color:
|
|
12
|
+
return (React.createElement(Container, { forwardedAs: "span", "data-testid": `${render}-container`, className: className, "$size": size, "$rotate": rotate, "$color": resolvedColor, ...marginProps },
|
|
11
13
|
React.createElement(IconComponent, null)));
|
|
12
14
|
};
|
|
13
|
-
const Container = styled(Box)(({ size, rotate, color }) => css `
|
|
15
|
+
const Container = styled(Box)(({ $size, $rotate, $color }) => css `
|
|
14
16
|
display: flex;
|
|
15
17
|
align-items: center;
|
|
16
18
|
justify-content: center;
|
|
17
19
|
flex-shrink: 0;
|
|
18
|
-
width: ${size}px;
|
|
19
|
-
height: ${size}px;
|
|
20
|
-
transform: rotate(${rotate}deg);
|
|
20
|
+
width: ${$size}px;
|
|
21
|
+
height: ${$size}px;
|
|
22
|
+
transform: rotate(${$rotate}deg);
|
|
21
23
|
svg {
|
|
22
|
-
color: ${
|
|
24
|
+
color: ${$color} !important;
|
|
23
25
|
}
|
|
24
26
|
`);
|
|
25
27
|
//# sourceMappingURL=Icon.js.map
|
package/dist/Icon/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAGzD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAEL,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AAezC,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,iBAAiB,EACzB,MAAM,GAAG,CAAC,EACV,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IACpE,MAAM,aAAa,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAEvD,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEtC,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAC,MAAM,iBACL,GAAG,MAAM,YAAY,EAClC,SAAS,EAAE,SAAS,WACb,IAAI,aACF,MAAM,YACP,aAAa,KACjB,WAAW;QAEf,oBAAC,aAAa,OAAG,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;aAKxB,KAAK;cACJ,KAAK;wBACK,OAAO;;eAEhB,MAAM;;GAElB,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css, useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { Box } from '../Box'\nimport { Icons, iconList } from './iconsList'\nimport {\n ColorTypes,\n resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\n\nexport type IconProps = {\n /** className attribute to apply classes from props */\n className?: string\n /** specify what Icon to render */\n render: Icons\n /** set size of the Icon */\n size?: number\n /** set color of the Icon */\n color?: ColorTypes\n /** rotation degrees */\n rotate?: number\n} & MarginProps\n\nexport const Icon: FC<IconProps> = ({\n className = '',\n render,\n size = 24,\n color = 'color.icon.base',\n rotate = 0,\n ...marginProps\n}) => {\n const theme = useTheme()\n if (!render || !iconList[render] || render.length === 0) return null\n const resolvedColor = resolveToThemeColor(color, theme)\n\n const IconComponent = iconList[render]\n\n return (\n <Container\n forwardedAs=\"span\"\n data-testid={`${render}-container`}\n className={className}\n $size={size}\n $rotate={rotate}\n $color={resolvedColor}\n {...marginProps}\n >\n <IconComponent />\n </Container>\n )\n}\n\ninterface IIcon extends MarginProps {\n $size: number\n $color: string\n $rotate: number\n}\n\nconst Container = styled(Box)<IIcon>(\n ({ $size, $rotate, $color }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: ${$size}px;\n height: ${$size}px;\n transform: rotate(${$rotate}deg);\n svg {\n color: ${$color} !important;\n }\n `,\n)\n"]}
|
|
@@ -10,7 +10,7 @@ type Prettify<T> = {
|
|
|
10
10
|
export type NewColor = Prettify<Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>>;
|
|
11
11
|
export type ColorTypes = Color | NewColor;
|
|
12
12
|
export declare const resolveToThemeColor: (color: ColorTypes, theme: Theme) => string;
|
|
13
|
-
export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "
|
|
13
|
+
export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.on-dark" | "color.text.nonEssential" | "color.interactive.primary.base" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.primary.active" | "color.interactive.secondary.base" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.secondary.active" | "color.interactive.tertiary.base" | "color.interactive.tertiary.hover" | "color.interactive.tertiary.pressed" | "color.interactive.tertiary.active" | "color.background.100" | "color.background.200" | "color.background.000" | "color.icon.base" | "color.icon.subtle" | "color.icon.contrast" | "color.icon.on-dark" | "color.icon.nonEssential" | "color.surface.base.400" | "color.surface.base.100" | "color.surface.base.200" | "color.surface.base.000" | "color.surface.base.300" | "color.surface.base.900" | "color.surface.brand.400" | "color.surface.brand.100" | "color.surface.brand.200" | "color.surface.brand.300" | "color.surface.brand.accent1" | "color.surface.brand.accent2" | "color.surface.brand.accent3" | "color.surface.brand.accent4" | "color.feedback.negative.100" | "color.feedback.negative.200" | "color.feedback.positive.100" | "color.feedback.positive.200" | "color.feedback.notice.100" | "color.feedback.notice.200" | "color.feedback.informative.100" | "color.feedback.informative.200" | "color.feedback.inactive.100" | "color.focus.onLight" | "color.focus.onDark" | "color.border.base" | "color.border.subtle" | "color.border.contrast" | "color.illustration.accent1.100" | "color.illustration.accent1.200" | "color.illustration.accent2.100" | "color.illustration.accent2.200" | "color.illustration.accent3.100" | "color.illustration.accent3.200" | "color.illustration.accent4.100" | "color.illustration.accent4.200" | "color.illustration.neutral.400" | "color.illustration.neutral.100" | "color.illustration.neutral.200" | "color.illustration.neutral.000" | "color.illustration.neutral.300" | "color.illustration.neutral.900" | "extended1.100" | "extended1.20" | "compareTheMarket" | "ravelin" | "stripe" | "intercom" | "checkout" | "hometree" | "premfina" | "thirdParty.onfido" | "thirdParty.rac" | "thirdParty.compareTheMarket" | "thirdParty.facebook" | "thirdParty.ravelin" | "thirdParty.confusedCom" | "thirdParty.stripe" | "thirdParty.intercom" | "thirdParty.twitter" | "thirdParty.checkout" | "thirdParty.hometree" | "thirdParty.premfina" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "sesame" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "satsuma" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "confused" | "x";
|
|
14
14
|
export declare const formatDesignTokenColor: () => string;
|
|
15
15
|
export declare const legacyColorMap: Record<Color, NewColor>;
|
|
16
16
|
export {};
|
|
@@ -17,14 +17,14 @@ export declare const StyledFrontIcon: import("styled-components/dist/types").ISt
|
|
|
17
17
|
className?: string;
|
|
18
18
|
render: Icons;
|
|
19
19
|
size?: number;
|
|
20
|
-
color?: import("
|
|
20
|
+
color?: import("../../ThemeProvider/utils/colourMap").ColorTypes;
|
|
21
21
|
rotate?: number;
|
|
22
22
|
} & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
|
|
23
23
|
export declare const StyledTrailingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
|
|
24
24
|
className?: string;
|
|
25
25
|
render: Icons;
|
|
26
26
|
size?: number;
|
|
27
|
-
color?: import("
|
|
27
|
+
color?: import("../../ThemeProvider/utils/colourMap").ColorTypes;
|
|
28
28
|
rotate?: number;
|
|
29
29
|
} & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
|
|
30
30
|
export {};
|