@cruk/cruk-react-components 5.0.3 → 5.0.5
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/Carousel/Dots.d.ts +1 -3
- package/lib/components/Collapse/styles.d.ts +2 -3
- package/lib/src/components/Carousel/Dots.js +1 -1
- package/lib/src/components/Carousel/Dots.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/package.json +1 -1
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import React
|
|
2
|
-
export declare const CarouselLeftButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
|
|
3
|
-
export declare const CarouselRightButton: (props: ButtonHTMLAttributes<HTMLElement>) => React.JSX.Element;
|
|
1
|
+
import React from "react";
|
|
4
2
|
export declare const Dots: ({ count, currentPosition, scrollToPosition, next, previous, }: {
|
|
5
3
|
count: number;
|
|
6
4
|
currentPosition: number;
|
|
@@ -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,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import{faCaretLeft as
|
|
1
|
+
import e from"react";import{faCaretLeft as n,faCaretRight as t}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as r}from"../IconFa/index.js";import{ButtonWrapper as o,CarouselButton as l,VerticalAlign as c,ScreenReaderOnly as a,DotContainer as i,Dot as s}from"./styles.js";var u=function(u){var m=u.count,d=u.currentPosition,f=void 0===d?0:d,E=u.scrollToPosition,p=u.next,v=u.previous,x=f!==m-1,k=0!==f,b=Array.from({length:m},(function(e,n){return"arrayIndex".concat(n)}));return e.createElement(o,null,e.createElement(l,{disabled:!k,"aria-label":"previous",onClick:function(){v()}},e.createElement(c,null,e.createElement(r,{faIcon:n,size:"1.25em"}),e.createElement(a,null,"Scroll carousel to previous index"))),e.createElement(i,{$count:m},b.map((function(n,t){var r=t===f;return e.createElement(s,{key:n,role:"switch","aria-checked":r,onClick:function(){E(t)},$selected:r},e.createElement(a,null,"Scroll carousel to index ".concat(t)))}))),e.createElement(l,{disabled:!x,"aria-label":"next",onClick:function(){p()}},e.createElement(c,null,e.createElement(r,{faIcon:t,size:"1.25em"}),e.createElement(a,null,"Scroll carousel to previous index"))))};export{u as Dots,u as default};
|
|
2
2
|
//# sourceMappingURL=Dots.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dots.js","sources":["../../../../src/components/Carousel/Dots.tsx"],"sourcesContent":["import React
|
|
1
|
+
{"version":3,"file":"Dots.js","sources":["../../../../src/components/Carousel/Dots.tsx"],"sourcesContent":["import React from \"react\";\nimport { faCaretLeft, faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport {\n DotContainer,\n Dot,\n CarouselButton,\n ButtonWrapper,\n VerticalAlign,\n ScreenReaderOnly,\n} from \"./styles\";\n\nexport const Dots = ({\n count,\n currentPosition = 0,\n scrollToPosition,\n next,\n previous,\n}: {\n count: number;\n currentPosition: number;\n scrollToPosition: (to: number) => void;\n next: () => void;\n previous: () => void;\n}) => {\n const moreOnRight = currentPosition !== count - 1;\n const moreOnLeft = currentPosition !== 0;\n const countArray = Array.from({ length: count }, (e, i) => `arrayIndex${i}`);\n\n return (\n <ButtonWrapper>\n <CarouselButton\n disabled={!moreOnLeft}\n aria-label=\"previous\"\n onClick={() => {\n previous();\n }}\n >\n <VerticalAlign>\n <IconFa faIcon={faCaretLeft} size=\"1.25em\" />\n <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n </VerticalAlign>\n </CarouselButton>\n\n <DotContainer $count={count}>\n {countArray.map((item, index) => {\n const isSelected = index === currentPosition;\n const scrollTo = () => {\n scrollToPosition(index);\n };\n return (\n <Dot\n key={item}\n role=\"switch\"\n aria-checked={isSelected}\n onClick={scrollTo}\n $selected={isSelected}\n >\n <ScreenReaderOnly>{`Scroll carousel to index ${index}`}</ScreenReaderOnly>\n </Dot>\n );\n })}\n </DotContainer>\n\n <CarouselButton\n disabled={!moreOnRight}\n aria-label=\"next\"\n onClick={() => {\n next();\n }}\n >\n <VerticalAlign>\n <IconFa faIcon={faCaretRight} size=\"1.25em\" />\n <ScreenReaderOnly>Scroll carousel to previous index</ScreenReaderOnly>\n </VerticalAlign>\n </CarouselButton>\n </ButtonWrapper>\n );\n};\n\nexport default Dots;\n"],"names":["Dots","_a","count","_b","currentPosition","scrollToPosition","next","previous","moreOnRight","moreOnLeft","countArray","Array","from","length","e","i","concat","React","ButtonWrapper","createElement","CarouselButton","disabled","onClick","VerticalAlign","IconFa","faIcon","faCaretLeft","size","ScreenReaderOnly","DotContainer","$count","map","item","index","isSelected","Dot","key","role","faCaretRight"],"mappings":"sTAcO,IAAMA,EAAO,SAACC,GACnB,IAAAC,UACAC,EAAAF,EAAAG,gBAAAA,aAAkB,EAACD,EACnBE,qBACAC,EAAIL,EAAAK,KACJC,EAAQN,EAAAM,SAQFC,EAAcJ,IAAoBF,EAAQ,EAC1CO,EAAiC,IAApBL,EACbM,EAAaC,MAAMC,KAAK,CAAEC,OAAQX,IAAS,SAACY,EAAGC,GAAM,MAAA,aAAAC,OAAaD,EAAG,IAE3E,OACEE,gBAACC,EAAa,KACZD,EAACE,cAAAC,EACC,CAAAC,UAAWZ,EACA,aAAA,WACXa,QAAS,WACPf,MAGFU,EAAAE,cAACI,EAAa,KACZN,EAACE,cAAAK,GAAOC,OAAQC,EAAaC,KAAK,WAClCV,EAACE,cAAAS,EAAqE,KAAA,uCAI1EX,EAACE,cAAAU,EAAqB,CAAAC,OAAA5B,GACnBQ,EAAWqB,KAAI,SAACC,EAAMC,GACrB,IAAMC,EAAaD,IAAU7B,EAI7B,OACEa,EAACE,cAAAgB,GACCC,IAAKJ,EACLK,KAAK,wBACSH,EACdZ,QARa,WACfjB,EAAiB4B,EACnB,YAOeC,GAEXjB,EAACE,cAAAS,OAAkB,4BAA4BZ,OAAAiB,IAGrD,KAGFhB,EAACE,cAAAC,EACC,CAAAC,UAAWb,EACA,aAAA,OACXc,QAAS,WACPhB,MAGFW,EAAAE,cAACI,EAAa,KACZN,EAACE,cAAAK,GAAOC,OAAQa,EAAcX,KAAK,WACnCV,EAAAE,cAACS,EAAqE,KAAA,uCAKhF"}
|
|
@@ -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"}
|