@cruk/cruk-react-components 5.0.2 → 5.0.3
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/lib/components/Badge/Badge.stories.d.ts +0 -1
- package/lib/components/Badge/index.d.ts +3 -3
- package/lib/components/Badge/styles.d.ts +4 -4
- package/lib/components/Box/index.d.ts +0 -1
- package/lib/components/IconFa/styles.d.ts +4 -5
- package/lib/src/components/Badge/index.js +1 -1
- package/lib/src/components/Badge/index.js.map +1 -1
- package/lib/src/components/Badge/styles.js +1 -1
- package/lib/src/components/Badge/styles.js.map +1 -1
- package/lib/src/components/Box/index.js +1 -1
- package/lib/src/components/Box/index.js.map +1 -1
- package/lib/src/components/Box/styles.js +1 -1
- package/lib/src/components/Box/styles.js.map +1 -1
- package/lib/src/components/IconFa/index.js +1 -1
- package/lib/src/components/IconFa/index.js.map +1 -1
- package/lib/src/components/IconFa/styles.js +1 -1
- package/lib/src/components/IconFa/styles.js.map +1 -1
- package/lib/src/utils/themeUtils.js +2 -0
- package/lib/src/utils/themeUtils.js.map +1 -0
- package/lib/utils/themeUtils.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, { type
|
|
1
|
+
import React, { type ReactNode } from "react";
|
|
2
2
|
import { type SpaceType } from "../../types";
|
|
3
|
-
export type BadgeProps =
|
|
3
|
+
export type BadgeProps = {
|
|
4
4
|
/** background colour of badge */
|
|
5
5
|
backgroundColor?: string;
|
|
6
6
|
/** border colour of badge */
|
|
@@ -25,5 +25,5 @@ at the end of a sentence, link, or button. Unless the context is clear,
|
|
|
25
25
|
consider including additional context with a visually hidden piece of
|
|
26
26
|
additional text.
|
|
27
27
|
*/
|
|
28
|
-
export declare function Badge({ children, size, backgroundColor, borderColor, textColor,
|
|
28
|
+
export declare function Badge({ children, size, backgroundColor, borderColor, textColor, }: BadgeProps): React.JSX.Element;
|
|
29
29
|
export default Badge;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { type SpaceType, type ThemeType } from "../../types";
|
|
2
2
|
export declare const StyledBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
|
|
3
|
-
$backgroundColor
|
|
4
|
-
$borderColor
|
|
5
|
-
$textColor
|
|
6
|
-
$isText
|
|
3
|
+
$backgroundColor: string;
|
|
4
|
+
$borderColor: string;
|
|
5
|
+
$textColor: string;
|
|
6
|
+
$isText: boolean;
|
|
7
7
|
$size: SpaceType;
|
|
8
8
|
theme: ThemeType;
|
|
9
9
|
}>> & string;
|
|
@@ -3,7 +3,6 @@ import { type SpacingProps } from "../Spacing";
|
|
|
3
3
|
export type BoxProps = SpacingProps & HTMLAttributes<HTMLElement> & {
|
|
4
4
|
/** background color of box, this will add default padding */
|
|
5
5
|
backgroundColor?: string;
|
|
6
|
-
css?: string;
|
|
7
6
|
ref?: Ref<HTMLDivElement>;
|
|
8
7
|
children?: ReactNode;
|
|
9
8
|
/** styled-component polymorphic feature so you take the styling of a box and cast the component to be a "span" for example */
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { type ThemeType } from "../../types";
|
|
2
|
-
|
|
2
|
+
export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, {
|
|
3
3
|
theme: ThemeType;
|
|
4
|
-
color?: string;
|
|
5
|
-
size: string;
|
|
6
|
-
};
|
|
7
|
-
export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, StyledIconProp>> & string;
|
|
4
|
+
$color?: string;
|
|
5
|
+
$size: string;
|
|
6
|
+
}>> & string;
|
|
8
7
|
export default StyledIcon;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as t}from"styled-components";import{crukTheme as e}from"../../themes/cruk.js";import{StyledBadge as i}from"./styles.js";import{themeColorOrString as s}from"../../utils/themeUtils.js";function m(m){var l=m.children,n=m.size,d=void 0===n?"xs":n,a=m.backgroundColor,p=void 0===a?"primary":a,f=m.borderColor,c=void 0===f?"transparent":f,u=m.textColor,b=void 0===u?"textOnPrimary":u,x=t(),C=o(o({},e),x),v="string"==typeof l;return r.createElement(i,{theme:C,$isText:v,$size:d,$backgroundColor:s(p,C),$borderColor:s(c,C),$textColor:s(b,C)},l)}export{m as Badge,m as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { type SpaceType } from \"../../types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledBadge } from \"./styles\";\nimport { themeColorOrString } from \"../../utils/themeUtils\";\n\nexport type BadgeProps = {\n /** background colour of badge */\n backgroundColor?: string;\n /** border colour of badge */\n borderColor?: string;\n /** text colour of badge */\n textColor?: string;\n /** size of badge */\n size?: SpaceType;\n /** contents of badge */\n children?: ReactNode;\n};\n\n/**\n * Displays a numeric or icon indicator. You can use the icon prop to\nindicate the importance of the badge to the user.\n\nNote that depending on how they are used, badges may be confusing for users\nof screen readers and similar assistive technologies. While the styling of\nbadges provides a visual cue as to their purpose, these users will simply\nbe presented with the content of the badge. Depending on the specific\nsituation, these badges may seem like random additional words or numbers\nat the end of a sentence, link, or button. Unless the context is clear,\nconsider including additional context with a visually hidden piece of\nadditional text.\n */\nexport function Badge({\n children,\n size = \"xs\",\n backgroundColor = \"primary\",\n borderColor = \"transparent\",\n textColor = \"textOnPrimary\",\n}: BadgeProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n const isText = typeof children === \"string\";\n return (\n <StyledBadge\n theme={theme}\n $isText={isText}\n $size={size}\n $backgroundColor={themeColorOrString(backgroundColor, theme)}\n $borderColor={themeColorOrString(borderColor, theme)}\n $textColor={themeColorOrString(textColor, theme)}\n >\n {children}\n </StyledBadge>\n );\n}\n\nexport default Badge;\n"],"names":["Badge","_a","children","_b","size","_c","backgroundColor","_d","borderColor","_e","textColor","foundTheme","useTheme","theme","__assign","defaultTheme","isText","React","createElement","StyledBadge","$isText","$size","$backgroundColor","themeColorOrString","$borderColor"],"mappings":"gSAmCM,SAAUA,EAAMC,GACpB,IAAAC,EAAQD,EAAAC,SACRC,EAAWF,EAAAG,KAAXA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAAJ,EAAAK,gBAAAA,OAAkB,IAAAD,EAAA,UAASA,EAC3BE,EAA2BN,EAAAO,YAA3BA,OAAW,IAAAD,EAAG,cAAaA,EAC3BE,EAAAR,EAAAS,UAAAA,OAAY,IAAAD,EAAA,gBAAeA,EAErBE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAA6B,iBAAbd,EACtB,OACEe,EAACC,cAAAC,EACC,CAAAN,MAAOA,EAAKO,QACHJ,EAAMK,MACRjB,EACWkB,iBAAAC,EAAmBjB,EAAiBO,GACxCW,aAAAD,EAAmBf,EAAaK,cAClCU,EAAmBb,EAAWG,IAEzCX,EAGP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import
|
|
1
|
+
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";var e,r=t.span(e||(e=n(["\n display: inline-block;\n border-width: 1px;\n border-style: solid;\n text-align: center;\n font-size: ",";\n padding: ",";\n border-radius: ",";\n height: ",";\n width: ",";\n line-height: ",";\n min-width: ",";\n\n background-color: ",";\n border-color: ",";\n color: ",";\n"],["\n display: inline-block;\n border-width: 1px;\n border-style: solid;\n text-align: center;\n font-size: ",";\n padding: ",";\n border-radius: ",";\n height: ",";\n width: ",";\n line-height: ",";\n min-width: ",";\n\n background-color: ",";\n border-color: ",";\n color: ",";\n"])),(function(n){return n.theme.fontSizes.m}),(function(n){var t=n.theme;return n.$isText?t.spacing.xxs:0}),(function(n){return n.$isText?" 1.5rem":"50%"}),(function(n){var t=n.$isText,e=n.$size,r=n.theme;return t?"auto":"calc(".concat(r.spacing[e]," + ").concat(r.spacing.xs,")")}),(function(n){var t=n.$isText,e=n.$size,r=n.theme;return t?"auto":"calc(".concat(r.spacing[e]," + ").concat(r.spacing.xs,")")}),(function(n){var t=n.$isText,e=n.$size,r=n.theme;return t?" 1rem":"calc(".concat(r.spacing[e]," + ").concat(r.spacing.xs,")")}),(function(n){var t=n.$size,e=n.theme;return"calc(".concat(e.spacing[t]," + ").concat(e.spacing.xs,")")}),(function(n){return n.$backgroundColor}),(function(n){return n.$borderColor}),(function(n){return n.$textColor}));export{r as StyledBadge,r as default};
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/Badge/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { type SpaceType, type ThemeType } from \"../../types\";\n\nexport const StyledBadge = styled.span<{\n $backgroundColor: string;\n $borderColor: string;\n $textColor: string;\n $isText: boolean;\n $size: SpaceType;\n theme: ThemeType;\n}>`\n display: inline-block;\n border-width: 1px;\n border-style: solid;\n text-align: center;\n font-size: ${({ theme }) => theme.fontSizes.m};\n padding: ${({ theme, $isText }) => ($isText ? theme.spacing.xxs : 0)};\n border-radius: ${({ $isText }) => ($isText ? ` 1.5rem` : \"50%\")};\n height: ${({ $isText, $size, theme }) =>\n $isText ? `auto` : `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n width: ${({ $isText, $size, theme }) =>\n $isText ? `auto` : `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n line-height: ${({ $isText, $size, theme }) =>\n $isText ? ` 1rem` : `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n min-width: ${({ $size, theme }) =>\n `calc(${theme.spacing[$size]} + ${theme.spacing.xs})`};\n\n background-color: ${({ $backgroundColor }) => $backgroundColor};\n border-color: ${({ $borderColor }) => $borderColor};\n color: ${({ $textColor }) => $textColor};\n`;\n\nexport default StyledBadge;\n"],"names":["StyledBadge","styled","span","templateObject_1","__makeTemplateObject","_a","theme","fontSizes","m","$isText","spacing","xxs","$size","concat","xs","$backgroundColor","$borderColor","$textColor"],"mappings":"iHAIO,MAAMA,EAAcC,EAAOC,KAAIC,IAAAA,EAAAC,EAAA,CAAA,iHAAA,iBAAA,uBAAA,gBAAA,eAAA,qBAAA,mBAAA,4BAAA,sBAAA,eAAA,OAAA,CAOpC,iHAK6C,iBACuB,uBACL,gBAEW,eAEA,qBAEC,mBAEpB,4BAEO,sBACZ,eACX,UAd1B,SAACC,GAAc,OAAPA,EAAAC,MAAaC,UAAUC,CAAhB,IACjB,SAACH,OAAEC,EAAKD,EAAAC,MAAgB,OAAPD,EAAAI,QAAkBH,EAAMI,QAAQC,IAAM,CAA/B,IAClB,SAACN,GAAgB,OAAPA,EAAAI,QAAkB,UAAY,KAAvB,IACxB,SAACJ,GAAE,IAAAI,YAASG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAChC,OAAAG,EAAU,OAAS,QAAQI,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAAxE,IACO,SAACT,GAAE,IAAAI,YAASG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAC/B,OAAAG,EAAU,OAAS,QAAQI,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAAxE,IACa,SAACT,GAAE,IAAAI,YAASG,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MACrC,OAAAG,EAAU,QAAU,QAAQI,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAAzE,IACW,SAACT,OAAEO,EAAKP,EAAAO,MAAEN,EAAKD,EAAAC,MAC1B,MAAA,QAAQO,OAAAP,EAAMI,QAAQE,GAAM,OAAAC,OAAMP,EAAMI,QAAQI,GAAK,IAArD,IAEkB,SAACT,GAAyB,OAAPA,EAAAU,gBAAO,IAC9B,SAACV,GAAqB,OAAPA,EAAAW,YAAO,IAC7B,SAACX,GAAmB,OAAPA,EAAAY,UAAO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as r,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import e,{forwardRef as
|
|
1
|
+
import{__rest as r,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import e,{forwardRef as t}from"react";import{useTheme as m}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as s}from"../Spacing/index.js";import{StyledBox as i}from"./styles.js";var l=t((function(t,l){var c=r(t,[]),a=c.children,d=c.backgroundColor,f=r(c,["children","backgroundColor"]),p=m(),u=o(o({},n),p),b=s(f);return e.createElement(i,o({theme:u,$backgroundColor:d},b,{ref:l}),a)}));export{l as Box,l as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n type HTMLAttributes,\n type Ref,\n forwardRef,\n type ReactNode,\n type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n spacingPropsToSpacingPropsInternal,\n type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nexport type BoxProps = SpacingProps &\n HTMLAttributes<HTMLElement> & {\n /** background color of box, this will add default padding */\n backgroundColor?: string;\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Box/index.tsx"],"sourcesContent":["import React, {\n type HTMLAttributes,\n type Ref,\n forwardRef,\n type ReactNode,\n type ElementType,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n spacingPropsToSpacingPropsInternal,\n type SpacingProps,\n} from \"../Spacing\";\nimport { StyledBox } from \"./styles\";\n\nexport type BoxProps = SpacingProps &\n HTMLAttributes<HTMLElement> & {\n /** background color of box, this will add default padding */\n backgroundColor?: string;\n ref?: Ref<HTMLDivElement>;\n children?: ReactNode;\n /** styled-component polymorphic feature so you take the styling of a box and cast the component to be a \"span\" for example */\n as?: ElementType;\n };\n\n/**\n * Box is used to wrap other components to add margin and padding.\n * The values will be in the t-shirt sizes specified in the theme sizes.\n * The more specific the the target the higher priority the css will have.\n * For example `margin` will be overridden by the `marginVertical` or `marginHorizontal` props. `marginTop`, `marginBottom`, `marginLeft`, `marginRight` will override the the `marginVertical` and `marginHorizontal` props.\n */\nexport const Box = forwardRef(\n ({ ...props }: BoxProps, ref?: Ref<HTMLDivElement>) => {\n const { children, backgroundColor, ...rest } = props;\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const restWithInternalSpacingProps =\n spacingPropsToSpacingPropsInternal(rest);\n\n return (\n <StyledBox\n theme={theme}\n $backgroundColor={backgroundColor}\n {...restWithInternalSpacingProps}\n ref={ref}\n >\n {children}\n </StyledBox>\n );\n },\n);\n\nexport default Box;\n"],"names":["Box","forwardRef","_a","ref","props","__rest","children","backgroundColor","rest","foundTheme","useTheme","theme","__assign","defaultTheme","restWithInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","StyledBox","$backgroundColor"],"mappings":"yUAiCaA,EAAMC,GACjB,SAACC,EAAwBC,OAAnBC,EAAKC,EAAAH,EAAV,IACSI,EAAuCF,EAA/BE,SAAEC,EAA6BH,EAAdG,gBAAKC,EAASH,EAAAD,EAAzC,CAAA,WAAA,oBACAK,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EACJC,EAAmCP,GAErC,OACEQ,EAACC,cAAAC,KACCP,MAAOA,EACWQ,iBAAAZ,GACdO,EAA4B,CAChCX,IAAKA,IAEJG,EAGP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o
|
|
1
|
+
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{spacing as r}from"../Spacing/index.js";var t,a=o.div(t||(t=n(["\n background-color: ",";\n padding: ",";\n margin: 0 0 "," 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n background-color: ",";\n\n ","\n"],["\n background-color: ",";\n padding: ",";\n margin: 0 0 "," 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n background-color: ",";\n\n ","\n"])),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme;return n.$backgroundColor?o.spacing.s:0}),(function(n){return n.theme.spacing.m}),(function(n){var o=n.theme,r=n.$backgroundColor;return r&&void 0!==o.colors[r]?o.colors[r]:r||"transparent"}),(function(n){return r(n,n.theme)}));export{a as StyledBox,a as default};
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/components/Box/styles.ts"],"sourcesContent":["import styled
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/Box/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport { type ColorKeyType, type ThemeType } from \"../../types\";\n\ntype StyledBoxProps = SpacingPropsInternal & {\n $backgroundColor?: string;\n $css?: string;\n theme: ThemeType;\n};\n\nexport const StyledBox = styled.div<StyledBoxProps>`\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n padding: ${({ theme, $backgroundColor }) =>\n $backgroundColor ? theme.spacing.s : 0};\n margin: 0 0 ${({ theme }) => theme.spacing.m} 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n background-color: ${({ theme, $backgroundColor }) =>\n $backgroundColor &&\n typeof theme.colors[$backgroundColor as ColorKeyType] !== \"undefined\"\n ? theme.colors[$backgroundColor as ColorKeyType]\n : $backgroundColor || \"transparent\"};\n\n ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n\nexport default StyledBox;\n"],"names":["StyledBox","styled","div","_a","theme","colors","backgroundLight","$backgroundColor","spacing","s","m","props"],"mappings":"qKAWaA,EAAYC,EAAOC,0KAAmB,yBACc,iBAEvB,oBACI,8EAUL,UAEc,SAfjC,SAACC,GAAc,OAAPA,EAAAC,MAAaC,OAAOC,eAAb,IACxB,SAACH,OAAEC,EAAKD,EAAAC,MACjB,OADmCD,EAAAI,iBAChBH,EAAMI,QAAQC,EAAI,CAArC,IACY,SAACN,GAAc,OAAPA,EAAAC,MAAaI,QAAQE,CAAd,IAMT,SAACP,OAAEC,EAAKD,EAAAC,MAAEG,EAAgBJ,EAAAI,iBAC5C,OAAAA,QAC0D,IAAnDH,EAAMC,OAAOE,GAChBH,EAAMC,OAAOE,GACbA,GAAoB,aAHxB,IAKA,SAACI,GAAU,OAAAH,EAAQG,EAAOA,EAAMP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as t}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{StyledIcon as m}from"./styles.js";function
|
|
1
|
+
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o from"react";import{useTheme as t}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{StyledIcon as m}from"./styles.js";import{themeSizeOrString as s,themeColorOrString as i}from"../../utils/themeUtils.js";function c(c){var n=c.faIcon,l=c.color,a=c.size,p=void 0===a?"1.1rem":a,f=t(),d=e(e({},r),f),u=n.icon,h=u[0],j=u[1],v=u[4];return o.createElement(m,{theme:d,role:"presentation",viewBox:"0 0 ".concat(h," ").concat(j),$size:s(p,d),$color:i(l,d)},v&&o.createElement("path",{d:v}))}export{c as IconFa,c as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/IconFa/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { type IconDefinition } from \"@fortawesome/fontawesome-common-types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledIcon } from \"./styles\";\n\nexport type IconFaProps = {\n /** imported icon definition from \"@fortawesome/free-solid-svg-icons\" or \"@fortawesome/free-brands-svg-icons\" */\n faIcon: IconDefinition;\n /** color of icon, inherits current text colour by default */\n color?: string;\n /** size of ion 1.1em by default */\n size?: string;\n};\n\n/**\n * The IconFa component (Icon Font Awesome) displays an icon glyph as an `<svg>` element.\n *\n * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size\n * */\nexport function IconFa({ faIcon, color, size = \"1.1rem\" }: IconFaProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/IconFa/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { type IconDefinition } from \"@fortawesome/fontawesome-common-types\";\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StyledIcon } from \"./styles\";\nimport { themeColorOrString, themeSizeOrString } from \"../../utils/themeUtils\";\n\nexport type IconFaProps = {\n /** imported icon definition from \"@fortawesome/free-solid-svg-icons\" or \"@fortawesome/free-brands-svg-icons\" */\n faIcon: IconDefinition;\n /** color of icon, inherits current text colour by default */\n color?: string;\n /** size of ion 1.1em by default */\n size?: string;\n};\n\n/**\n * The IconFa component (Icon Font Awesome) displays an icon glyph as an `<svg>` element.\n *\n * This is an svg icon wrapper where a font awesome icon definition can be passed in a long with colour and size\n * */\nexport function IconFa({ faIcon, color, size = \"1.1rem\" }: IconFaProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const [width, height, , , svgPathData] = faIcon.icon;\n\n return (\n <StyledIcon\n theme={theme}\n role=\"presentation\"\n viewBox={`0 0 ${width} ${height}`}\n $size={themeSizeOrString(size, theme)}\n $color={themeColorOrString(color, theme)}\n >\n {svgPathData && <path d={svgPathData as string} />}\n </StyledIcon>\n );\n}\n\nexport default IconFa;\n"],"names":["IconFa","_a","faIcon","color","_b","size","foundTheme","useTheme","theme","__assign","defaultTheme","_c","icon","width","height","svgPathData","React","createElement","StyledIcon","role","viewBox","concat","$size","themeSizeOrString","$color","themeColorOrString","d"],"mappings":"sTAsBM,SAAUA,EAAOC,OAAEC,EAAMD,EAAAC,OAAEC,EAAKF,EAAAE,MAAEC,SAAAC,OAAO,IAAAD,EAAA,SAAQA,EAC/CE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAmCT,EAAOU,KAAzCC,EAAKF,EAAA,GAAEG,EAAMH,EAAA,GAAMI,OAE1B,OACEC,EAACC,cAAAC,GACCV,MAAOA,EACPW,KAAK,eACLC,QAAS,OAAAC,OAAOR,EAAS,KAAAQ,OAAAP,GAClBQ,MAAAC,EAAkBlB,EAAMG,GAAMgB,OAC7BC,EAAmBtB,EAAOK,IAEjCO,GAAeC,wBAAMU,EAAGX,IAG/B"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";var t,e=i.svg(t||(t=n(["\n display: inline-block;\n height: ",";\n margin-top: -0.2em;\n vertical-align: middle;\n width: ",";\n path {\n fill: ",";\n }\n"],["\n display: inline-block;\n height: ",";\n margin-top: -0.2em;\n vertical-align: middle;\n width: ",";\n path {\n fill: ",";\n }\n"])),(function(n){return n
|
|
1
|
+
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import i from"styled-components";var t,e=i.svg(t||(t=n(["\n display: inline-block;\n height: ",";\n margin-top: -0.2em;\n vertical-align: middle;\n width: ",";\n path {\n fill: ",";\n }\n"],["\n display: inline-block;\n height: ",";\n margin-top: -0.2em;\n vertical-align: middle;\n width: ",";\n path {\n fill: ",";\n }\n"])),(function(n){return n.$size}),(function(n){return n.$size}),(function(n){return n.$color}));export{e as StyledIcon,e as default};
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/components/IconFa/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/IconFa/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StyledIcon = styled.svg<{\n theme: ThemeType;\n $color?: string;\n $size: string;\n}>`\n display: inline-block;\n height: ${({ $size }) => $size};\n margin-top: -0.2em;\n vertical-align: middle;\n width: ${({ $size }) => $size};\n path {\n fill: ${({ $color }) => $color};\n }\n`;\n\nexport default StyledIcon;\n"],"names":["StyledIcon","styled","svg","templateObject_1","__makeTemplateObject","_a","$size","$color"],"mappings":"iHAGa,MAAAA,EAAaC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yCAAA,iEAAA,0BAAA,YAAA,CAIlC,yCAE8B,iEAGD,0BAEG,eALtB,SAACC,GAAc,OAAPA,EAAAC,KAAO,IAGhB,SAACD,GAAc,OAAPA,EAAAC,KAAO,IAEd,SAACD,GAAe,OAAPA,EAAAE,MAAO"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"themeUtils.js","sources":["../../../src/utils/themeUtils.ts"],"sourcesContent":["import { type ThemeType, type SpacingType, type ColorsType } from \"src/types\";\n\nexport const themeSizeOrString = (\n spaceString: string,\n theme: ThemeType,\n): string =>\n typeof theme.spacing[spaceString as keyof SpacingType] === \"undefined\"\n ? spaceString\n : theme.spacing[spaceString as keyof SpacingType];\n\nexport const themeColorOrString = (\n colorString: string | undefined,\n theme: ThemeType,\n): string =>\n typeof theme.colors[colorString as keyof ColorsType] === \"undefined\"\n ? colorString || \"currentColor\"\n : theme.colors[colorString as keyof ColorsType];\n"],"names":["themeSizeOrString","spaceString","theme","spacing","themeColorOrString","colorString","colors"],"mappings":"AAEa,IAAAA,EAAoB,SAC/BC,EACAC,GAEA,YAA2D,IAApDA,EAAMC,QAAQF,GACjBA,EACAC,EAAMC,QAAQF,EAFlB,EAIWG,EAAqB,SAChCC,EACAH,GAEA,YAAyD,IAAlDA,EAAMI,OAAOD,GAChBA,GAAe,eACfH,EAAMI,OAAOD,EAFjB"}
|