@cruk/cruk-react-components 5.0.2 → 5.0.4
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/Collapse/styles.d.ts +2 -3
- 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/Collapse/index.js +1 -1
- package/lib/src/components/Collapse/index.js.map +1 -1
- package/lib/src/components/Collapse/styles.js +1 -1
- package/lib/src/components/Collapse/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,9 +1,8 @@
|
|
|
1
1
|
import { type FontSizeType, type ThemeType } from "../../types";
|
|
2
|
-
import IconFa from "../IconFa";
|
|
3
2
|
export declare const transitionDurationSeconds = 0.5;
|
|
4
|
-
export declare const FlippingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("
|
|
3
|
+
export declare const FlippingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
|
|
5
4
|
$open: boolean;
|
|
6
|
-
}>> & string
|
|
5
|
+
}>> & string;
|
|
7
6
|
export declare const DefaultHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
|
|
8
7
|
ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
|
|
9
8
|
}, {
|
|
@@ -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 t,{useState as n,useRef as r,useEffect as o}from"react";import{useTheme as a}from"styled-components";import{faChevronDown as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{CustomHeader as
|
|
1
|
+
import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t,{useState as n,useRef as r,useEffect as o}from"react";import{useTheme as a}from"styled-components";import{faChevronDown as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{crukTheme as l}from"../../themes/cruk.js";import{IconFa as c}from"../IconFa/index.js";import{CustomHeader as d,DefaultHeader as m,FlippingIcon as u,CollapseContent as s,transitionDurationSeconds as p}from"./styles.js";function f(f){var h=f.id,x=f.headerTitleText,y=f.headerTitleTextColor,T=f.headerTitleTextSize,b=f.headerTitleTextFontFamily,v=f.headerComponent,E=f.startOpen,k=f.onOpenChange,C=f.children,$=n(E||!1),g=$[0],j=$[1],F=n(E?"initial":"0"),S=F[0],I=F[1],w=r(null),z=r(null),D=a(),H=e(e({},l),D),O=function(){var e=w.current;(null==z?void 0:z.current)&&clearTimeout(null==z?void 0:z.current);var t=!g;j(t),null!==e&&I("".concat(e.scrollHeight,"px")),!1===t?setTimeout((function(){return I("0")}),10):z.current=setTimeout((function(){return I("initial")}),1e3*p),void 0!==k&&k(t)};return o((function(){j(E||!1),I(E?"initial":"0")}),[E]),t.createElement("div",{id:h},v?t.createElement(d,{theme:H,"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:O,"aria-disabled":!1,"aria-label":x,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),O())},role:"button",tabIndex:0},v):t.createElement(m,{"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:O,theme:H,type:"button",appearance:"tertiary",$textColor:y,$textSize:T,$textFontFamily:b},x,t.createElement(u,{$open:g},t.createElement(c,{faIcon:i}))),t.createElement(s,{theme:H,id:"".concat(h,"-content"),ref:w,role:"region","aria-hidden":!g,"aria-labelledby":"".concat(h,"-header"),$contentHeight:S,$openStatus:g},C))}export{f as Collapse,f as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n useState,\n useRef,\n type KeyboardEvent,\n type ReactNode,\n useEffect,\n type HTMLAttributes,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { type FontSizeType, type ThemeType } from \"../../types\";\nimport {\n CustomHeader,\n DefaultHeader,\n FlippingIcon,\n CollapseContent,\n transitionDurationSeconds,\n} from \"./styles\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n /** id is required for a11y reasons as we use aria attributes which depends on an id */\n id: string;\n /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n headerTitleText: string;\n /** collapse header text colour */\n headerTitleTextColor?: string;\n /** collapse header text size */\n headerTitleTextSize?: FontSizeType;\n /** collapse header font family */\n headerTitleTextFontFamily?: string;\n /** custom collapse header component */\n headerComponent?: ReactNode;\n /** flag to indicate */\n startOpen?: boolean;\n /** callback function that is passed isOpen flag */\n onOpenChange?: (isOpen: boolean) => void;\n /** children */\n children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n id,\n headerTitleText,\n headerTitleTextColor,\n headerTitleTextSize,\n headerTitleTextFontFamily,\n headerComponent,\n startOpen,\n onOpenChange,\n children,\n}: CollapseProps) {\n const [openStatus, setOpenStatus] = useState(startOpen || false);\n const [contentHeight, setContentHeight] = useState(\n startOpen ? \"initial\" : \"0\",\n );\n const content = useRef<HTMLDivElement>(null);\n const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n const foundTheme = useTheme();\n const theme: ThemeType = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n const toggleCollapse = () => {\n const { current } = content;\n if (transitionTimer?.current) clearTimeout(transitionTimer?.current);\n const newOpenState = !openStatus;\n setOpenStatus(newOpenState);\n\n if (current !== null) {\n setContentHeight(`${current.scrollHeight}px`);\n }\n\n if (newOpenState === false) {\n // Allow height to be rendered before setting to 0 for animation.\n setTimeout(() => setContentHeight(\"0\"), 10);\n } else {\n transitionTimer.current = setTimeout(\n () => setContentHeight(\"initial\"),\n transitionDurationSeconds * 1000,\n );\n }\n if (onOpenChange !== undefined) {\n onOpenChange(newOpenState);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === \"Enter\" ||\n event.key === \" \" ||\n event.key === \"Spacebar\"\n ) {\n event.preventDefault();\n toggleCollapse();\n }\n };\n\n useEffect(() => {\n setOpenStatus(startOpen || false);\n // if start open changes then we want to set the height without animation\n startOpen ? setContentHeight(\"initial\") : setContentHeight(\"0\");\n }, [startOpen]);\n\n return (\n <div id={id}>\n {headerComponent ? (\n <CustomHeader\n theme={theme}\n aria-controls={`${id}-header`}\n aria-expanded={openStatus}\n id={`${id}-header`}\n onClick={toggleCollapse}\n aria-disabled={false}\n aria-label={headerTitleText}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {headerComponent}\n </CustomHeader>\n ) : (\n <DefaultHeader\n aria-controls={`${id}-header`}\n aria-expanded={openStatus}\n id={`${id}-header`}\n onClick={toggleCollapse}\n theme={theme}\n type=\"button\"\n appearance=\"tertiary\"\n $textColor={headerTitleTextColor}\n $textSize={headerTitleTextSize}\n $textFontFamily={headerTitleTextFontFamily}\n >\n {headerTitleText}\n <FlippingIcon
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Collapse/index.tsx"],"sourcesContent":["import React, {\n useState,\n useRef,\n type KeyboardEvent,\n type ReactNode,\n useEffect,\n type HTMLAttributes,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { faChevronDown } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { IconFa } from \"../IconFa\";\n\nimport { type FontSizeType, type ThemeType } from \"../../types\";\nimport {\n CustomHeader,\n DefaultHeader,\n FlippingIcon,\n CollapseContent,\n transitionDurationSeconds,\n} from \"./styles\";\n\nexport type CollapseProps = HTMLAttributes<HTMLElement> & {\n /** id is required for a11y reasons as we use aria attributes which depends on an id */\n id: string;\n /** text of collapse header, even if there is a custom header component this prop is still used for aria attributes */\n headerTitleText: string;\n /** collapse header text colour */\n headerTitleTextColor?: string;\n /** collapse header text size */\n headerTitleTextSize?: FontSizeType;\n /** collapse header font family */\n headerTitleTextFontFamily?: string;\n /** custom collapse header component */\n headerComponent?: ReactNode;\n /** flag to indicate */\n startOpen?: boolean;\n /** callback function that is passed isOpen flag */\n onOpenChange?: (isOpen: boolean) => void;\n /** children */\n children?: ReactNode;\n};\n\n/**\n *\n * Use a collapse component to show and hide content. It has a default view; however, it can be overwritten by passing a custom component as a prop.\n *\n */\nexport function Collapse({\n id,\n headerTitleText,\n headerTitleTextColor,\n headerTitleTextSize,\n headerTitleTextFontFamily,\n headerComponent,\n startOpen,\n onOpenChange,\n children,\n}: CollapseProps) {\n const [openStatus, setOpenStatus] = useState(startOpen || false);\n const [contentHeight, setContentHeight] = useState(\n startOpen ? \"initial\" : \"0\",\n );\n const content = useRef<HTMLDivElement>(null);\n const transitionTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n const foundTheme = useTheme();\n const theme: ThemeType = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n const toggleCollapse = () => {\n const { current } = content;\n if (transitionTimer?.current) clearTimeout(transitionTimer?.current);\n const newOpenState = !openStatus;\n setOpenStatus(newOpenState);\n\n if (current !== null) {\n setContentHeight(`${current.scrollHeight}px`);\n }\n\n if (newOpenState === false) {\n // Allow height to be rendered before setting to 0 for animation.\n setTimeout(() => setContentHeight(\"0\"), 10);\n } else {\n transitionTimer.current = setTimeout(\n () => setContentHeight(\"initial\"),\n transitionDurationSeconds * 1000,\n );\n }\n if (onOpenChange !== undefined) {\n onOpenChange(newOpenState);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === \"Enter\" ||\n event.key === \" \" ||\n event.key === \"Spacebar\"\n ) {\n event.preventDefault();\n toggleCollapse();\n }\n };\n\n useEffect(() => {\n setOpenStatus(startOpen || false);\n // if start open changes then we want to set the height without animation\n startOpen ? setContentHeight(\"initial\") : setContentHeight(\"0\");\n }, [startOpen]);\n\n return (\n <div id={id}>\n {headerComponent ? (\n <CustomHeader\n theme={theme}\n aria-controls={`${id}-header`}\n aria-expanded={openStatus}\n id={`${id}-header`}\n onClick={toggleCollapse}\n aria-disabled={false}\n aria-label={headerTitleText}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {headerComponent}\n </CustomHeader>\n ) : (\n <DefaultHeader\n aria-controls={`${id}-header`}\n aria-expanded={openStatus}\n id={`${id}-header`}\n onClick={toggleCollapse}\n theme={theme}\n type=\"button\"\n appearance=\"tertiary\"\n $textColor={headerTitleTextColor}\n $textSize={headerTitleTextSize}\n $textFontFamily={headerTitleTextFontFamily}\n >\n {headerTitleText}\n <FlippingIcon $open={openStatus}>\n <IconFa faIcon={faChevronDown} />\n </FlippingIcon>\n </DefaultHeader>\n )}\n <CollapseContent\n theme={theme}\n id={`${id}-content`}\n ref={content}\n role=\"region\"\n aria-hidden={!openStatus}\n aria-labelledby={`${id}-header`}\n $contentHeight={contentHeight}\n $openStatus={openStatus}\n >\n {children}\n </CollapseContent>\n </div>\n );\n}\n\nexport default Collapse;\n"],"names":["Collapse","_a","id","headerTitleText","headerTitleTextColor","headerTitleTextSize","headerTitleTextFontFamily","headerComponent","startOpen","onOpenChange","children","_b","useState","openStatus","setOpenStatus","_c","contentHeight","setContentHeight","content","useRef","transitionTimer","foundTheme","useTheme","theme","__assign","defaultTheme","toggleCollapse","current","clearTimeout","newOpenState","concat","scrollHeight","setTimeout","transitionDurationSeconds","undefined","useEffect","React","createElement","CustomHeader","onClick","onKeyDown","event","key","preventDefault","role","tabIndex","DefaultHeader","type","appearance","$textColor","$textSize","FlippingIcon","IconFa","faIcon","faChevronDown","CollapseContent","ref","$contentHeight","$openStatus"],"mappings":"kfAiDM,SAAUA,EAASC,OACvBC,EAAED,EAAAC,GACFC,EAAeF,EAAAE,gBACfC,EAAoBH,EAAAG,qBACpBC,EAAmBJ,EAAAI,oBACnBC,8BACAC,EAAeN,EAAAM,gBACfC,EAASP,EAAAO,UACTC,EAAYR,EAAAQ,aACZC,EAAQT,EAAAS,SAEFC,EAA8BC,EAASJ,IAAa,GAAnDK,EAAUF,EAAA,GAAEG,OACbC,EAAoCH,EACxCJ,EAAY,UAAY,KADnBQ,OAAeC,OAGhBC,EAAUC,EAAuB,MACjCC,EAAkBD,EAA6C,MAC/DE,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EAAiB,WACb,IAAAC,EAAYT,EAAOS,SACvBP,aAAA,EAAAA,EAAiBO,UAASC,aAAaR,eAAAA,EAAiBO,SAC5D,IAAME,GAAgBhB,EACtBC,EAAce,GAEE,OAAZF,GACFV,EAAiB,GAAGa,OAAAH,EAAQI,aAAY,QAGrB,IAAjBF,EAEFG,YAAW,WAAM,OAAAf,EAAiB,IAAI,GAAE,IAExCG,EAAgBO,QAAUK,YACxB,WAAM,OAAAf,EAAiB,UAAU,GACL,IAA5BgB,QAGiBC,IAAjBzB,GACFA,EAAaoB,EAEjB,EAmBA,OANAM,GAAU,WACRrB,EAAcN,IAAa,GAEfS,EAAZT,EAA6B,UAA8B,IAC7D,GAAG,CAACA,IAGF4B,EAAAC,cAAA,MAAA,CAAKnC,GAAIA,GACNK,EACC6B,EAACC,cAAAC,GACCf,MAAOA,EAAK,gBACG,UAAGrB,EAAE,2BACLW,EACfX,GAAI,GAAA4B,OAAG5B,EAAE,WACTqC,QAASb,EACM,iBAAA,eACHvB,EACZqC,UA5Bc,SAACC,GAEL,UAAdA,EAAMC,KACQ,MAAdD,EAAMC,KACQ,aAAdD,EAAMC,MAEND,EAAME,iBACNjB,IAEJ,EAoBQkB,KAAK,SACLC,SAAU,GAETtC,GAGH6B,gBAACU,EAAa,CAAA,gBACG,GAAGhB,OAAA5B,aACH,gBAAAW,EACfX,GAAI,UAAGA,EAAE,WACTqC,QAASb,EACTH,MAAOA,EACPwB,KAAK,SACLC,WAAW,WAAUC,WACT7C,EACD8C,UAAA7C,kBACMC,GAEhBH,EACDiC,EAACC,cAAAc,SAAoBtC,GACnBuB,EAACC,cAAAe,GAAOC,OAAQC,MAItBlB,EAAAC,cAACkB,EAAe,CACdhC,MAAOA,EACPrB,GAAI,GAAA4B,OAAG5B,EAAY,YACnBsD,IAAKtC,EACL0B,KAAK,wBACS/B,EACG,kBAAA,GAAAiB,OAAG5B,EAAW,WAAAuD,eACfzC,EAAa0C,YAChB7C,GAEZH,GAIT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{Button as t}from"../Button/index.js";
|
|
1
|
+
import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o from"styled-components";import{Button as t}from"../Button/index.js";var i,e,r,a,l=.5,s=o.span(i||(i=n(["\n display: inline-block;\n transform: ",";\n transition-duration: ","s;\n"],["\n display: inline-block;\n transform: ",";\n transition-duration: ","s;\n"])),(function(n){return n.$open?"translateY(0.1em) scaleY(-1)":"initial"}),.5),f=o(t)(e||(e=n(["\n display: flex;\n color: ",";\n font-size: ",";\n font-family: ",";\n font-weight: normal;\n margin-bottom: 0;\n height: initial;\n text-decoration: none;\n text-align: left;\n border-radius: 0;\n &:hover,\n &:focus {\n color: ",";\n }\n"],["\n display: flex;\n color: ",";\n font-size: ",";\n font-family: ",";\n font-weight: normal;\n margin-bottom: 0;\n height: initial;\n text-decoration: none;\n text-align: left;\n border-radius: 0;\n &:hover,\n &:focus {\n color: ",";\n }\n"])),(function(n){var o=n.theme,t=n.$textColor;return t&&void 0!==o.colors[t]?o.colors[t]:t||o.colors.collapseHeaderColor}),(function(n){var o=n.theme,t=o.fontSizes,i=o.fontSizes.m,e=n.$textSize;return e?t[e]:i}),(function(n){var o=n.theme;return n.$textFontFamily||o.typography.fontFamilyBase}),(function(n){var o=n.theme.colors,t=n.$textColor;return t&&void 0!==o[t]?o[t]:t||o.collapseHeaderColor})),m=o.div(r||(r=n(["\n margin: 0;\n transition: ","s ease;\n height: ",";\n visibility: ",";\n overflow: hidden;\n & > p {\n margin-top: 0;\n }\n"],["\n margin: 0;\n transition: ","s ease;\n height: ",";\n visibility: ",";\n overflow: hidden;\n & > p {\n margin-top: 0;\n }\n"])),.5,(function(n){return n.$contentHeight}),(function(n){return n.$openStatus?"visible":"hidden"})),c=o.div(a||(a=n(["\n cursor: pointer;\n"],["\n cursor: pointer;\n"])));export{m as CollapseContent,c as CustomHeader,f as DefaultHeader,s as FlippingIcon,l as transitionDurationSeconds};
|
|
2
2
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../src/components/Collapse/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n type FontSizeType,\n type ThemeType,\n type ColorKeyType,\n} from \"../../types\";\nimport Button from \"../Button\";\
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/Collapse/styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n type FontSizeType,\n type ThemeType,\n type ColorKeyType,\n} from \"../../types\";\nimport Button from \"../Button\";\n\nexport const transitionDurationSeconds = 0.5;\n\nexport const FlippingIcon = styled.span<{ $open: boolean }>`\n display: inline-block;\n transform: ${({ $open }) =>\n $open ? \"translateY(0.1em) scaleY(-1)\" : \"initial\"};\n transition-duration: ${transitionDurationSeconds}s;\n`;\n\nexport const DefaultHeader = styled(Button)<{\n theme: ThemeType;\n $textColor?: string;\n $textSize?: FontSizeType;\n $textFontFamily?: string;\n}>`\n display: flex;\n color: ${({ theme, $textColor }) =>\n !!$textColor &&\n typeof theme.colors[$textColor as ColorKeyType] !== \"undefined\"\n ? theme.colors[$textColor as ColorKeyType]\n : $textColor || theme.colors.collapseHeaderColor};\n font-size: ${({\n theme: {\n fontSizes,\n fontSizes: { m },\n },\n $textSize,\n }) => ($textSize ? fontSizes[$textSize] : m)};\n font-family: ${({ theme, $textFontFamily }) =>\n $textFontFamily || theme.typography.fontFamilyBase};\n font-weight: normal;\n margin-bottom: 0;\n height: initial;\n text-decoration: none;\n text-align: left;\n border-radius: 0;\n &:hover,\n &:focus {\n color: ${({ theme: { colors }, $textColor }) =>\n $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n ? colors[$textColor as ColorKeyType]\n : $textColor || colors.collapseHeaderColor};\n }\n`;\n\nexport const CollapseContent = styled.div<{\n $contentHeight: string;\n $openStatus: boolean;\n}>`\n margin: 0;\n transition: ${transitionDurationSeconds}s ease;\n height: ${({ $contentHeight }: { $contentHeight: string }) => $contentHeight};\n visibility: ${({ $openStatus }: { $openStatus: boolean }) =>\n $openStatus ? \"visible\" : \"hidden\"};\n overflow: hidden;\n & > p {\n margin-top: 0;\n }\n`;\n\nexport const CustomHeader = styled.div`\n cursor: pointer;\n`;\n"],"names":["transitionDurationSeconds","FlippingIcon","styled","span","templateObject_1","__makeTemplateObject","_a","$open","DefaultHeader","Button","templateObject_2","theme","$textColor","colors","collapseHeaderColor","_b","fontSizes","m","$textSize","$textFontFamily","typography","fontFamilyBase","CollapseContent","div","templateObject_3","$contentHeight","$openStatus","CustomHeader","templateObject_4"],"mappings":"6JASO,YAAMA,EAA4B,GAE5BC,EAAeC,EAAOC,KAAwBC,IAAAA,EAAAC,EAAA,CAAA,4CAAA,6BAAA,QAAA,CAAA,4CAGL,6BACJ,WAFnC,SAACC,GACZ,OADmBA,EAAAC,MACX,+BAAiC,SAAzC,GALqC,IAS5BC,EAAgBN,EAAOO,EAAPP,CAK3BQ,IAAAA,EAAAL,EAAA,CAAA,gCAAA,mBAAA,qBAAA,+KAAA,YAAA,CAAA,gCAMoD,mBAOR,qBAEQ,+KAYJ,eAzBvC,SAACC,OAAEK,EAAKL,EAAAK,MAAEC,EAAUN,EAAAM,WAC3B,OAAEA,QACkD,IAA7CD,EAAME,OAAOD,GAChBD,EAAME,OAAOD,GACbA,GAAcD,EAAME,OAAOC,mBAH/B,IAIW,SAACR,OACZS,EAGCT,EAAAK,MAFCK,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAASZ,EAAAY,UACL,OAACA,EAAYF,EAAUE,GAAaD,CAApC,IACS,SAACX,OAAEK,EAAKL,EAAAK,MACrB,OADsCL,EAAAa,iBACnBR,EAAMS,WAAWC,cAApC,IASS,SAACf,OAAWO,EAAMP,EAAAK,MAAAE,OAAID,EAAUN,EAAAM,WACvC,OAAAA,QAA4D,IAAvCC,EAAOD,GACxBC,EAAOD,GACPA,GAAcC,EAAOC,mBAFzB,IAMOQ,EAAkBpB,EAAOqB,IAGpCC,IAAAA,EAAAnB,EAAA,CAAA,iCAAA,sBAAA,oBAAA,gEAAA,CAAA,iCAEuC,sBACqC,oBAExC,kEArDG,IAmD7B,SAACC,GAAmD,OAAnCA,EAAAmB,cAAmC,IAChD,SAACnB,GACb,OAD0BA,EAAAoB,YACZ,UAAY,QAA1B,IAOSC,EAAezB,EAAOqB,IAAGK,IAAAA,EAAAvB,EAAA,CAAA,0BAAA,CAAA"}
|
|
@@ -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"}
|