@foxford/ui 2.6.0-beta-3b38ea8-20230704 → 2.6.0-beta-01c6423-20230713
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/components/Alert/Alert.js +1 -1
- package/components/Alert/Alert.js.map +1 -1
- package/components/Alert/CountdownCircle.js +2 -0
- package/components/Alert/CountdownCircle.js.map +1 -0
- package/components/Alert/style.js +1 -1
- package/components/Alert/style.js.map +1 -1
- package/components/Anchor/Anchor.js +1 -1
- package/components/Anchor/Anchor.js.map +1 -1
- package/dts/index.d.ts +27 -16
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/theme/colors.js +1 -1
- package/theme/colors.js.map +1 -1
- package/components/Alert/parts/CountdownCircle.js +0 -2
- package/components/Alert/parts/CountdownCircle.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import o from'@babel/runtime/helpers/objectSpread2';import{forwardRef as e}from'react';import{Close as r,WarningTriangleFill as t,CheckCircleFill as i,NotifFill as n,CloseCirlceFill as s}from'@foxford/icon-pack';import{useClassname as a}from'../../hooks/useClassname.js';import{useConfigPriority as c}from'../../hooks/use-config-priority.js';import{useFallbackTheme as l}from'../../hooks/use-theme.js';import{Icon as m}from'../Icon/Icon.js';import'../Icon/icons.js';import{countdownColor as p}from'./CountdownCircle.js';import{Root as h,IconWrapper as C,Timer as u,ContentWrapper as d,Title as f,Content as k,Link as y,Actions as w,SecondaryAction as b,PrimaryAction as g,CancelTimer as x,CloseIcon as T}from'./style.js';import{jsxs as z,jsx as A}from'react/jsx-runtime';var v=o=>{var{isCompact:e,theme:r,type:a}=o;var c=e?16:24;switch(a){case'error':return A(s,{color:r.colors['alert-bg-error-500'],size:c});case'info':return A(n,{color:r.colors['content-brand-primary'],size:c});case'success':return A(i,{color:r.colors['alert-success'],size:c});case'warning':return A(t,{color:r.colors['alert-warning'],size:c});default:return null}};var I='Alert';var j=e(((e,t)=>{var i;var n=l();var{cancelTimerText:s="Отменить",primaryAction:I,primaryActionProps:j,secondaryAction:W,secondaryActionProps:P,children:N,className:F,clear:E,customIcon:H,image:L,isCompact:M,link:O,linkProps:R,noIcon:S,onClickCancelTimer:B,closeToast:_,size:q="small",style:D,textProps:G,textWrap:J,timer:K,title:Q,titleProps:U,type:V,width:X=['fit-content','fit-content','fit-content','351px','304px','304px']}=c(null===(i=n.components)||void 0===i?void 0:i.Alert,e);var Y=a("Alert",F);var Z=Boolean('big'===q||!!Q||M&&(Q||O||I||W));return z(h,{className:Y,clear:E,column:Z,isCompact:M,noIcon:S,ref:t,size:q,style:D,textWrap:J,type:V,width:X,withAction:!!I||!!W,withCloseIcon:!!_,withImage:!!L,withLink:!!O,withTimer:!!K,withTitle:!!Q,children:[(!S||H)&&z(C,{column:Z,isCompact:M,withImage:!!L,children:[!S&&!K&&!H&&!L&&v({isCompact:M,theme:n,type:V}),H&&A(m,{name:H,size:M?16:24}),L,K&&A(u,{isCompact:M,timer:K,color:p({theme:n,type:V})})]}),z(d,{column:Z,isCompact:M,children:[Q&&A(f,o(o({color:n.colors['content-onmain-primary'],isCompact:M,size:M?14:16,lineHeight:"m"},U),{},{children:Q})),A(k,o(o({color:n.colors['content-onmain-primary'],column:Z,isCompact:M,lineHeight:"s",size:M?14:16,textWrap:J},G),{},{children:N})),O&&A(y,o(o({clear:E,column:Z,isCompact:M,onClick:O.onClick,preset:"brand",pseudo:!0,size:M?'s':'m',withTitle:!!Q},R),{},{children:O.content})),(I||W)&&z(w,{column:Z,isCompact:M,withTitle:!!Q,children:[W&&A(b,o(o({black:!0,column:Z,fontWeight:"normal",onClick:W.onClick,outline:!0,preset:"brand",size:"xs"},P),{},{children:W.content})),I&&A(g,o(o({black:!0,fontWeight:"normal",onClick:I.onClick,preset:"brand",size:"xs"},j),{},{children:I.content}))]})]}),B&&A(x,{black:!0,clear:!0,fontWeight:"normal",isCompact:M,onClick:B,preset:"brand",size:M?'xs':'m',children:s}),!_||K&&M?null:A(T,{"aria-label":"close",onClick:_,type:"button",withTimer:!!K,children:A(r,{color:n.colors['content-onmain-primary'],size:M?18:24})})]})}));j.displayName="Alert";export{j as Alert,I as COMPONENT_NAME};
|
|
2
2
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\n\nimport { ColorValue } from '../../mixins/color'\nimport { BaseProps } from '../../shared/interfaces'\n\nimport { Anchor, AnchorProps } from '../Anchor'\nimport { Button, ButtonProps } from '../Button'\nimport { Icon, IconNames } from '../Icon'\nimport { Text, TextProps } from '../Text'\n\nimport CountdownCircle from './parts/CountdownCircle'\nimport * as Styled from './style'\n\nexport type AlertType = 'warning' | 'error' | 'info' | 'success'\n\nexport interface AlertProps extends BaseProps {\n /**\n * Children react node\n */\n children?: React.ReactNode\n clear?: boolean\n closeToast?(): void\n content?: string | React.ReactNode\n /** Icon name (for inner Icon component) */\n customIcon?: keyof typeof IconNames\n image?: React.ReactNode\n isCompact?: boolean\n link?: { content: string | React.ReactNode; onClick(): void }\n linkProps?: AnchorProps\n noIcon?: boolean\n onClickCancelTimer?(): void\n primaryAction?: { content: string | React.ReactNode; onClick(): void }\n primaryActionProps?: ButtonProps\n secondaryAction?: { content: string | React.ReactNode; onClick(): void }\n secondaryActionProps?: ButtonProps\n textProps?: TextProps\n timer?: number\n title?: string\n titleProps?: TextProps\n type: AlertType\n}\n\nAlert.displayName = 'Alert'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n */\nexport function Alert({\n primaryAction,\n primaryActionProps,\n secondaryAction,\n secondaryActionProps,\n children,\n className,\n clear = false,\n content,\n customIcon,\n image,\n isCompact = false,\n link,\n linkProps,\n noIcon = false,\n onClickCancelTimer,\n closeToast,\n style,\n textProps,\n timer,\n title,\n titleProps,\n type,\n}: AlertProps) {\n const _className = useClassname(Alert.displayName, className)\n const theme = useTheme()\n\n const getDefaultIcon = () => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n }\n\n const countdownColor: ColorValue = useMemo(() => {\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-500']\n case 'info':\n return theme.colors['content-brand-primary']\n case 'success':\n return theme.colors['alert-success']\n case 'warning':\n return theme.colors['alert-warning']\n default:\n return theme.colors['content-brand-primary']\n }\n }, [type])\n\n const column: boolean = useMemo(() => {\n return Boolean(!!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n }, [isCompact, link, primaryAction, secondaryAction, title])\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n style={style}\n type={type}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <div className='iconWrapper'>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon()}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image && image}\n {timer && <CountdownCircle className='timer' color={countdownColor} isCompact={isCompact} timer={timer} />}\n </div>\n )}\n\n <div className='content'>\n {title && (\n <Text\n className='title'\n color={theme.colors['content-onmain-primary']}\n content={title}\n size={isCompact ? 14 : 16}\n lineHeight='m'\n {...titleProps}\n />\n )}\n\n <Text\n className='text'\n color={theme.colors['content-onmain-primary']}\n content={typeof content === 'string' ? content : undefined}\n lineHeight='s'\n size={isCompact ? 14 : 16}\n {...textProps}\n >\n {children || content}\n </Text>\n\n {link && (\n <Anchor className='link' onClick={link.onClick} pseudo size={isCompact ? 's' : 'm'} {...linkProps}>\n {link.content}\n </Anchor>\n )}\n\n {(primaryAction || secondaryAction) && (\n <div className='actions'>\n {secondaryAction && (\n <Button\n black\n className='secondaryAction'\n fontWeight='normal'\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size='xs'\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Button\n black\n className='primaryAction'\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size='xs'\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\n )}\n </div>\n )}\n </div>\n\n {onClickCancelTimer && (\n <Button\n black\n className='cancelTimer'\n fontWeight='normal'\n onClick={onClickCancelTimer}\n clear\n preset='brand'\n size={isCompact ? 'xs' : 'm'}\n >\n Отменить\n </Button>\n )}\n\n {!closeToast || (timer && isCompact) ? null : (\n <div className='closeIconWrapper'>\n <Close color={theme.colors['content-onmain-primary']} size={isCompact ? 18 : 24} onClick={closeToast} />\n </div>\n )}\n </Styled.Root>\n )\n}\n"],"names":["Alert","_ref","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","content","customIcon","image","isCompact","link","linkProps","noIcon","onClickCancelTimer","closeToast","style","textProps","timer","title","titleProps","type","_className","useClassname","displayName","theme","useTheme","countdownColor","useMemo","colors","column","Boolean","_jsxs","Styled.Root","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","size","_jsx","CloseCirlceFill","color","NotifFill","CheckCircleFill","WarningTriangleFill","Icon","name","CountdownCircle","Text","_objectSpread","lineHeight","Anchor","onClick","pseudo","Button","black","fontWeight","outline","preset","Close"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\n\nimport { useConfigPriority } from '../../hooks/use-config-priority'\nimport { useFallbackTheme } from '../../hooks/use-theme'\n\nimport { Icon } from '../Icon'\n\nimport { countdownColor } from './CountdownCircle'\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\n\nconst getDefaultIcon = ({\n isCompact,\n theme,\n type,\n}: Pick<AlertProps, 'isCompact' | 'type'> & { theme: DefaultTheme }) => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n}\n\nconst COMPONENT_NAME = 'Alert'\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const theme = useFallbackTheme()\n\n const {\n cancelTimerText = 'Отменить',\n primaryAction,\n primaryActionProps,\n secondaryAction,\n secondaryActionProps,\n children,\n className,\n clear,\n customIcon,\n image,\n isCompact,\n link,\n linkProps,\n noIcon,\n onClickCancelTimer,\n closeToast,\n size = 'small',\n style,\n textProps,\n textWrap,\n timer,\n title,\n titleProps,\n type,\n width = ['fit-content', 'fit-content', 'fit-content', '351px', '304px', '304px'],\n } = useConfigPriority<AlertProps>(theme.components?.Alert, props)\n const _className = useClassname(COMPONENT_NAME, className)\n\n const column = Boolean(\n size === 'big' || !!title || (isCompact && (title || link || primaryAction || secondaryAction))\n )\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n ref={ref}\n size={size}\n style={style}\n textWrap={textWrap}\n type={type}\n width={width}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <Styled.IconWrapper column={column} isCompact={isCompact} withImage={!!image}>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon({ isCompact, theme, type })}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image}\n {timer && <Styled.Timer isCompact={isCompact} timer={timer} color={countdownColor({ theme, type })} />}\n </Styled.IconWrapper>\n )}\n\n <Styled.ContentWrapper column={column} isCompact={isCompact}>\n {title && (\n <Styled.Title\n color={theme.colors['content-onmain-primary']}\n isCompact={isCompact}\n size={isCompact ? 14 : 16}\n lineHeight='m'\n {...titleProps}\n >\n {title}\n </Styled.Title>\n )}\n\n <Styled.Content\n color={theme.colors['content-onmain-primary']}\n column={column}\n isCompact={isCompact}\n lineHeight='s'\n size={isCompact ? 14 : 16}\n textWrap={textWrap}\n {...textProps}\n >\n {children}\n </Styled.Content>\n\n {link && (\n <Styled.Link\n clear={clear}\n column={column}\n isCompact={isCompact}\n onClick={link.onClick}\n preset='brand'\n pseudo\n size={isCompact ? 's' : 'm'}\n withTitle={!!title}\n {...linkProps}\n >\n {link.content}\n </Styled.Link>\n )}\n\n {(primaryAction || secondaryAction) && (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction && (\n <Styled.SecondaryAction\n black\n column={column}\n fontWeight='normal'\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size='xs'\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Styled.SecondaryAction>\n )}\n\n {primaryAction && (\n <Styled.PrimaryAction\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size='xs'\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Styled.PrimaryAction>\n )}\n </Styled.Actions>\n )}\n </Styled.ContentWrapper>\n\n {onClickCancelTimer && (\n <Styled.CancelTimer\n black\n clear\n fontWeight='normal'\n isCompact={isCompact}\n onClick={onClickCancelTimer}\n preset='brand'\n size={isCompact ? 'xs' : 'm'}\n >\n {cancelTimerText}\n </Styled.CancelTimer>\n )}\n\n {!closeToast || (timer && isCompact) ? null : (\n <Styled.CloseIcon aria-label='close' onClick={closeToast} type='button' withTimer={!!timer}>\n <Close color={theme.colors['content-onmain-primary']} size={isCompact ? 18 : 24} />\n </Styled.CloseIcon>\n )}\n </Styled.Root>\n )\n})\n\nAlert.displayName = COMPONENT_NAME\n\nexport { Alert, COMPONENT_NAME }\n\nexport type { AlertProps }\n"],"names":["getDefaultIcon","_ref","isCompact","theme","type","size","_jsx","CloseCirlceFill","color","colors","NotifFill","CheckCircleFill","WarningTriangleFill","COMPONENT_NAME","Alert","forwardRef","props","ref","_theme$components","useFallbackTheme","cancelTimerText","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","customIcon","image","link","linkProps","noIcon","onClickCancelTimer","closeToast","style","textProps","textWrap","timer","title","titleProps","width","useConfigPriority","components","_className","useClassname","column","Boolean","_jsxs","Styled.Root","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Styled.IconWrapper","Icon","name","Styled.Timer","countdownColor","Styled.ContentWrapper","Styled.Title","_objectSpread","lineHeight","Styled.Content","Styled.Link","onClick","preset","pseudo","content","Styled.Actions","Styled.SecondaryAction","black","fontWeight","outline","Styled.PrimaryAction","Styled.CancelTimer","Styled.CloseIcon","Close","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useState as r,useEffect as e}from'react';import{Progress as s}from'../Progress/Progress.js';import{jsx as t}from'react/jsx-runtime';var a=r=>{var{theme:e,type:s}=r;switch(s){case'error':return e.colors['alert-bg-error-500'];case'info':default:return e.colors['content-brand-primary'];case'success':return e.colors['alert-success'];case'warning':return e.colors['alert-warning']}};var o=a=>{var{className:o,color:n,isCompact:c,timer:l}=a;var[i,u]=r(l);e((()=>{var r=setInterval((()=>{u((e=>e<=.05?(clearInterval(r),e):e-.05))}),50);return()=>{clearInterval(r)}}),[]);var m=i/l*100;return t(s.Circle,{className:o,content:Math.ceil(i),progress:m,progressStartAngle:0,resultColor:n,size:c?16:20,strokeBGColor:"transparent",strokeLineWidth:1.5})};o.displayName='CountdownCircle';export{o as CountdownCircle,a as countdownColor};
|
|
2
|
+
//# sourceMappingURL=CountdownCircle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { DefaultTheme } from 'styled-components'\n\nimport { ColorValue } from '../../mixins/color'\n\nimport { Progress } from '../Progress'\n\nimport { AlertProps, CountdownCircleProps } from './types'\n\nconst countdownColor = ({ theme, type }: Pick<AlertProps, 'type'> & { theme: DefaultTheme }): ColorValue => {\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-500']\n case 'info':\n return theme.colors['content-brand-primary']\n case 'success':\n return theme.colors['alert-success']\n case 'warning':\n return theme.colors['alert-warning']\n default:\n return theme.colors['content-brand-primary']\n }\n}\n\nconst COMPONENT_NAME = 'CountdownCircle'\n\nconst CountdownCircle = ({ className, color, isCompact, timer }: CountdownCircleProps) => {\n const [countdown, setCountdown] = useState(timer)\n\n useEffect(() => {\n const progressRate = 0.05\n const intervalId = setInterval(() => {\n setCountdown((prevCountdown) => {\n if (prevCountdown <= progressRate) {\n clearInterval(intervalId)\n return prevCountdown\n }\n\n return prevCountdown - progressRate\n })\n }, progressRate * 1000)\n\n return () => {\n clearInterval(intervalId)\n }\n }, [])\n\n const progress = (countdown / timer) * 100\n\n return (\n <Progress.Circle\n className={className}\n content={Math.ceil(countdown)}\n progress={progress}\n progressStartAngle={0}\n resultColor={color}\n size={isCompact ? 16 : 20}\n strokeBGColor='transparent'\n strokeLineWidth={1.5}\n />\n )\n}\n\nCountdownCircle.displayName = COMPONENT_NAME\n\nexport { CountdownCircle, countdownColor }\n"],"names":["countdownColor","_ref","theme","type","colors","CountdownCircle","_ref2","className","color","isCompact","timer","countdown","setCountdown","useState","useEffect","intervalId","setInterval","prevCountdown","clearInterval","progressRate","progress","_jsx","Progress","Circle","content","Math","ceil","progressStartAngle","resultColor","size","strokeBGColor","strokeLineWidth","displayName"],"mappings":"2IASMA,IAAAA,EAAiBC,IAAqF,IAApFC,MAAEA,EAAFC,KAASA,GAA2EF,EAC1G,OAAQE,GACN,IAAK,QACH,OAAOD,EAAME,OAAO,sBACtB,IAAK,OAML,QACE,OAAOF,EAAME,OAAO,yBALtB,IAAK,UACH,OAAOF,EAAME,OAAO,iBACtB,IAAK,UACH,OAAOF,EAAME,OAAO,mBAQpBC,IAAAA,EAAkBC,IAAkE,IAAjEC,UAAEA,EAAFC,MAAaA,EAAbC,UAAoBA,EAApBC,MAA+BA,GAAkCJ,EACxF,IAAOK,EAAWC,GAAgBC,EAASH,GAE3CI,GAAU,KAER,IAAMC,EAAaC,kBACjBJ,GAAcK,GACRA,GAHa,KAIfC,cAAcH,GACPE,GAGFA,EARU,QAUlBE,IAEH,MAAO,KACLD,cAAcH,MAEf,IAEH,IAAMK,EAAYT,EAAYD,EAAS,IAEvC,OACEW,EAACC,EAASC,OAAV,CACEhB,UAAWA,EACXiB,QAASC,KAAKC,KAAKf,GACnBS,SAAUA,EACVO,mBAAoB,EACpBC,YAAapB,EACbqB,KAAMpB,EAAY,GAAK,GACvBqB,cAAc,cACdC,gBAAiB,OAKvB1B,EAAgB2B,YAvCO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'
|
|
1
|
+
import n,{css as o}from'styled-components';import{responsiveProperty as t}from'../../mixins/responsive-property.js';import{injectDefaultTheme as c}from'../../shared/utils/inject-theme.js';import{Anchor as i}from'../Anchor/Anchor.js';import{Button as r}from'../Button/Button.js';import{Text as a}from'../Text/Text.js';import{CountdownCircle as e}from'./CountdownCircle.js';var p=n=>{var{column:o,isCompact:t,withImage:c,withTimer:i}=n;return o?'16px':t?i?'5px':'12px':c?'8px':i?'2px':'12px'};var s=n.div.withConfig({shouldForwardProp:n=>['children','className','style'].includes(n)}).attrs(c).withConfig({componentId:"fox-ui__sc-1v79u95-0"})([""," ",""],(n=>"\n display: flex;\n align-items: ".concat(n.column||(n.isCompact?!n.withTimer:n.textWrap)?'flex-start':'center',";\n justify-content: ").concat(n.withTimer?'space-between':'flex-start',";\n padding-top: ").concat(p(n),";\n padding-right: ").concat((n=>{var{isCompact:o,withCloseIcon:t,withTimer:c}=n;return t?o?'12px':'16px':c?'8px':'20px'})(n),";\n padding-bottom: ").concat(p(n),";\n padding-left: ").concat((n=>{var{isCompact:o,noIcon:t,size:c,withAction:i,withImage:r,withTitle:a}=n;return o?a||'big'===c?r||!t?'16px':'20px':r?'12px':i&&t?'20px':'16px':a||'big'===c?r||!t?'16px':'24px':r?'16px':'20px'})(n),";\n height: ").concat(n.isCompact||n.column||n.textWrap?'auto':'48px',";\n min-width: ").concat(n.isCompact?'304px':'auto',";\n max-width: 100%;\n border-radius: ").concat(n.column?n.isCompact?'20px':'12px':'30px',";\n background-color: ").concat(((n,o,t)=>{if(t)return'dark'===o.mode?o.colors['bg-onmain-primary']:o.colors['bg-oncolor-primary'];switch(n){case'error':return o.colors['alert-bg-error-200'];case'info':return o.colors['bg-brand-primary-200'];case'success':return o.colors['alert-bg-success-200'];case'warning':return o.colors['alert-bg-warning-200'];default:return o.colors['bg-oncolor-primary']}})(n.type,n.theme,!!n.clear),";\n box-shadow: ").concat(n.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none',";\n box-sizing: border-box;\n ")),t('width','width'));var m=n=>{var{column:o,isCompact:t}=n;return t?'20px':o?'28px':'32px'};var l=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-1"})([""," ",";"],(n=>"\n display: flex;\n margin-right: ".concat((n=>{var{column:o,isCompact:t,withImage:c}=n;return t?'8px':o?c?'8px':'12px':'8px'})(n),";\n ")),(n=>n.withImage?o(["img,svg{height:",";width:",";}"],(n=>m(n)),(n=>m(n))):null));var x=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-2"})(["",""],(n=>"\n display: flex;\n margin-right: auto;\n flex-direction: ".concat(n.column?'column':'row',";\n align-items: ").concat(n.column?'flex-start':'center',";\n max-width: ").concat(n.column?'260px':'initial',";\n white-space: ").concat(n.column||n.isCompact?'normal':'nowrap',";\n overflow: hidden;\n ")));var u=n(a).withConfig({componentId:"fox-ui__sc-1v79u95-3"})(["",""],(n=>"\n display: inline-block;\n margin-top: ".concat(n.isCompact?'0':'2px',";\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n ")));var d=n(a).withConfig({componentId:"fox-ui__sc-1v79u95-4"})(["",""],(n=>"\n line-height: ".concat(n.isCompact?'18px':'20px',";\n text-overflow: ").concat(n.column||n.isCompact?'clip':'ellipsis',";\n white-space: ").concat(n.column||n.isCompact||n.textWrap?'pre-wrap':'inherit',";\n overflow: hidden;\n ")));var h=n(i).withConfig({componentId:"fox-ui__sc-1v79u95-5"})(["",""],(n=>"\n display: flex;\n margin-top: ".concat(n.column?n.isCompact&&!n.withTitle?'4px':'12px':0,";\n margin-left: ").concat(n.column?0:'60px',";\n color: ").concat(n.clear?n.theme.colors['content-link']:n.theme.colors['content-onmain-primary'],";\n ")));var g=n.div.withConfig({componentId:"fox-ui__sc-1v79u95-6"})(["",""],(n=>"\n margin-top: ".concat((n=>{var{column:o,isCompact:t,withTitle:c}=n;return o?t?c?'16px':'8px':'16px':0})(n),";\n margin-left: ").concat(n.column?0:'60px',";\n ")));var f=n(r).withConfig({componentId:"fox-ui__sc-1v79u95-7"})(["",""],(n=>"\n margin-right: ".concat(n.column?'4px':'8px',";\n ")));var w=n(r).withConfig({componentId:"fox-ui__sc-1v79u95-8"})(["",""],(n=>{return"\n margin-left: 0 !important;\n background-color: ".concat((o=n.theme,'dark'===o.mode?o.colors['bg-onmain-inverse']:o.colors['bg-onmain-contrast']),";\n color: ").concat((n=>'dark'===n.mode?n.colors['content-oncolor-constant']:n.colors['content-oncolor-primary'])(n.theme),";\n ");var o}));var v=n.button.withConfig({componentId:"fox-ui__sc-1v79u95-9"})(["",""],(n=>"\n appearance: none;\n display: flex;\n margin-left: ".concat(n.withTimer?'0':'16px',";\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n outline: none;\n\n &:focus-visible {\n outline: 1px solid ").concat(n.theme.colors.accent,";\n outline-offset: 2px;\n }\n ")));var C=n(r).withConfig({componentId:"fox-ui__sc-1v79u95-10"})(["",""],(n=>"\n margin-left: ".concat(n.isCompact?'28px':'60px',";\n padding-right: ").concat(n.isCompact?'16px':'28px',";\n padding-left: ").concat(n.isCompact?'16px':'28px',";\n ")));var b=n(e).withConfig({componentId:"fox-ui__sc-1v79u95-11"})(["",""],(n=>"\n line-height: ".concat(n.isCompact?'12px':'18px',";\n font-weight: ").concat(n.isCompact?'700':'400',";\n font-size: ").concat(n.isCompact?'11px':'14px',";\n color: ").concat(n.color,";\n\n svg {\n transform: rotateY(180deg);\n }\n ")));export{g as Actions,C as CancelTimer,v as CloseIcon,d as Content,x as ContentWrapper,l as IconWrapper,h as Link,w as PrimaryAction,s as Root,f as SecondaryAction,b as Timer,u as Title};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components'\n\nimport { screenS, screenXs } from '../../mixins/screen'\n\nimport { AlertProps, AlertType } from './Alert'\n\nconst bgColor = (type: AlertType, theme: DefaultTheme, clear: boolean) => {\n if (clear) {\n return theme.mode === 'dark' ? theme.colors['bg-onmain-primary'] : theme.colors['bg-oncolor-primary']\n }\n\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-200']\n case 'info':\n return theme.colors['bg-brand-primary-200']\n case 'success':\n return theme.colors['alert-bg-success-200']\n case 'warning':\n return theme.colors['alert-bg-warning-200']\n default:\n return theme.colors['bg-oncolor-primary']\n }\n}\n\nconst countdownColor = (type: AlertType, theme: DefaultTheme) => {\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-500']\n case 'info':\n return theme.colors['content-brand-primary']\n case 'success':\n return theme.colors['alert-success']\n case 'warning':\n return theme.colors['alert-warning']\n default:\n return theme.colors['content-brand-primary']\n }\n}\n\nconst buttonBgColor = (theme: DefaultTheme) => {\n return theme.mode === 'dark' ? theme.colors['bg-onmain-inverse'] : theme.colors['bg-onmain-contrast']\n}\n\nconst buttonColor = (theme: DefaultTheme) => {\n return theme.mode === 'dark' ? theme.colors['content-oncolor-constant'] : theme.colors['content-oncolor-primary']\n}\n\ntype AdditionalAlertTypes = {\n column: boolean\n isCompact: boolean\n withAction: boolean\n withCloseIcon: boolean\n withImage: boolean\n withLink: boolean\n withTimer: boolean\n withTitle: boolean\n}\n\ntype ExtendedAlertProps = AlertProps & AdditionalAlertTypes\n\nexport const Root = styled.div.withConfig<ExtendedAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n --padding-y: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? props.column\n ? '16px'\n : props.withTimer ? '5px' : '12px'\n : props.column\n ? '16px'\n : props.withImage\n ? '8px'\n : props.withTimer ? '2px' : '12px'};\n\n display: flex;\n align-items: ${(props) => (props.column || (props.isCompact && !props.withTimer) ? 'flex-start' : 'center')};\n justify-content: ${(props) => (props.withTimer ? 'space-between' : 'flex-start')};\n padding-top: var(--padding-y);\n padding-bottom: var(--padding-y);\n padding-left: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? props.withTitle\n ? (props.withImage || !props.noIcon) ? '16px' : '20px'\n : props.withImage\n ? '12px'\n : props.withAction && props.noIcon\n ? '20px'\n : '16px'\n : props.withTitle\n ? (props.withImage || !props.noIcon) ? '16px' : '24px'\n : props.withImage ? '16px' : '20px'};\n padding-right: ${(props) =>\n // prettier-ignore\n props.withCloseIcon\n ? props.isCompact ? '12px' : '16px'\n : props.withTimer ? '8px' : '20px'};\n height: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? 'auto'\n : props.column ? 'auto' : '48px'};\n max-width: 100%;\n width: ${(props) => `${props.isCompact ? '351px' : 'fit-content'}`};\n border-radius: ${(props) => (props.column ? (props.isCompact ? '20px' : '12px') : '30px')};\n background-color: ${(props) => bgColor(props.type, props.theme, !!props.clear)};\n box-shadow: ${(props) => (props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none')};\n box-sizing: border-box;\n\n ${screenS()`\n width: 351px;\n `}\n ${screenXs()`\n width: 304px;\n `}\n\n .iconWrapper {\n display: flex;\n margin-right: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? '8px'\n : props.column\n ? props.withImage ? '8px' : '12px'\n : '8px'};\n\n ${(props) =>\n props.withImage &&\n css`\n img,\n svg {\n height: ${(props: ExtendedAlertProps) =>\n // prettier-ignore\n props.isCompact\n ? '20px'\n : props.column ? '28px' : '32px'};\n width: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? '20px'\n : props.column ? '28px' : '32px'};\n }\n `}\n }\n\n .title {\n display: inline-block;\n margin-top: ${(props) => (props.isCompact ? '0' : '2px')};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n }\n\n .content {\n display: flex;\n margin-right: auto;\n flex-direction: ${(props) => (props.column ? 'column' : 'row')};\n align-items: ${(props) => (props.column ? 'flex-start' : 'center')};\n max-width: ${(props) => (props.column ? '260px' : 'initial')};\n white-space: ${(props) => (props.column || props.isCompact ? 'normal' : 'nowrap')};\n overflow: hidden;\n }\n\n .text {\n line-height: ${(props) => (props.isCompact ? '18px' : '20px')};\n text-overflow: ${(props) => (props.column || props.isCompact ? 'clip' : 'ellipsis')};\n white-space: ${(props) => (props.column || props.isCompact ? 'pre-wrap' : 'inherit')};\n overflow: hidden;\n }\n\n .link {\n display: flex;\n margin-top: ${(props) => (props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0)};\n margin-left: ${(props) => (props.column ? 0 : '60px')};\n color: ${(props) =>\n props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-onmain-primary']};\n }\n\n .actions {\n margin-top: ${(props) =>\n // prettier-ignore\n props.column\n ? props.isCompact\n ? props.withTitle ? '16px' : '8px'\n : '16px'\n : 0};\n margin-left: ${(props) => (props.column ? 0 : '60px')};\n }\n\n .primaryAction {\n margin-left: 0;\n background-color: ${(props) => buttonBgColor(props.theme)};\n color: ${(props) => buttonColor(props.theme)};\n }\n\n .secondaryAction {\n margin-right: ${(props) => (props.column ? '4px' : '8px')};\n }\n\n .timer {\n line-height: ${(props) => (props.isCompact ? '12px' : '18px')};\n font-weight: ${(props) => (props.isCompact ? '700' : '400')};\n font-size: ${(props) => (props.isCompact ? '11px' : '14px')};\n color: ${(props) => countdownColor(props.type, props.theme)};\n\n svg {\n transform: rotateY(180deg);\n }\n }\n\n .cancelTimer {\n margin-left: ${(props) => (props.isCompact ? '28px' : '60px')};\n padding-right: ${(props) => (props.isCompact ? '16px' : '28px')};\n padding-left: ${(props) => (props.isCompact ? '16px' : '28px')};\n }\n\n .closeIconWrapper {\n display: flex;\n margin-left: ${(props) => (props.withTimer ? '0' : '16px')};\n cursor: pointer;\n }\n`\n"],"names":["Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","isCompact","column","withTimer","withImage","withTitle","noIcon","withAction","withCloseIcon","concat","type","theme","clear","mode","colors","screenS","screenXs","_templateObject2","_taggedTemplateLiteral","css","buttonBgColor","buttonColor"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components'\n\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { injectDefaultTheme } from '../../shared/utils/inject-theme'\n\nimport { Anchor } from '../Anchor'\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\nimport { CountdownCircle } from './CountdownCircle'\n\nimport type { AlertType, CountdownCircleProps, RootAlertProps } from './types'\nimport {\n ActionsProps,\n CancelTimerProps,\n CloseIconProps,\n ContentProps,\n ContentWrapperProps,\n IconWrapperProps,\n LinkProps,\n PrimaryActionProps,\n SecondaryActionProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (type: AlertType | undefined, theme: DefaultTheme, clear: boolean) => {\n if (clear) {\n return theme.mode === 'dark' ? theme.colors['bg-onmain-primary'] : theme.colors['bg-oncolor-primary']\n }\n\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-200']\n case 'info':\n return theme.colors['bg-brand-primary-200']\n case 'success':\n return theme.colors['alert-bg-success-200']\n case 'warning':\n return theme.colors['alert-bg-warning-200']\n default:\n return theme.colors['bg-oncolor-primary']\n }\n}\n\nconst buttonBgColor = (theme: DefaultTheme) => {\n return theme.mode === 'dark' ? theme.colors['bg-onmain-inverse'] : theme.colors['bg-onmain-contrast']\n}\n\nconst buttonColor = (theme: DefaultTheme) => {\n return theme.mode === 'dark' ? theme.colors['content-oncolor-constant'] : theme.colors['content-oncolor-primary']\n}\n\nconst getPaddingY = ({\n column,\n isCompact,\n withImage,\n withTimer,\n}: Pick<RootAlertProps, 'column' | 'isCompact' | 'withImage' | 'withTimer'>) => {\n if (column) return '16px'\n\n if (isCompact) {\n return withTimer ? '5px' : '12px'\n } else {\n return withImage ? '8px' : withTimer ? '2px' : '12px'\n }\n}\n\nconst paddingLeft = ({\n isCompact,\n noIcon,\n size,\n withAction,\n withImage,\n withTitle,\n}: Pick<RootAlertProps, 'isCompact' | 'noIcon' | 'size' | 'withAction' | 'withImage' | 'withTitle'>) => {\n if (isCompact) {\n if (withTitle || size === 'big') {\n return withImage || !noIcon ? '16px' : '20px'\n } else {\n return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n }\n } else {\n if (withTitle || size === 'big') {\n return withImage || !noIcon ? '16px' : '24px'\n } else {\n return withImage ? '16px' : '20px'\n }\n }\n}\n\nconst paddingRight = ({\n isCompact,\n withCloseIcon,\n withTimer,\n}: Pick<RootAlertProps, 'isCompact' | 'withCloseIcon' | 'withTimer'>) => {\n if (withCloseIcon) {\n return isCompact ? '12px' : '16px'\n } else {\n return withTimer ? '8px' : '20px'\n }\n}\n\nexport const Root = styled.div\n .withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n })\n .attrs(injectDefaultTheme)`\n ${(props) => `\n display: flex;\n align-items: ${props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n justify-content: ${props.withTimer ? 'space-between' : 'flex-start'};\n padding-top: ${getPaddingY(props)};\n padding-right: ${paddingRight(props)};\n padding-bottom: ${getPaddingY(props)};\n padding-left: ${paddingLeft(props)};\n height: ${props.isCompact || props.column || props.textWrap ? 'auto' : '48px'};\n min-width: ${props.isCompact ? '304px' : 'auto'};\n max-width: 100%;\n border-radius: ${props.column ? (props.isCompact ? '20px' : '12px') : '30px'};\n background-color: ${bgColor(props.type, props.theme, !!props.clear)};\n box-shadow: ${props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none'};\n box-sizing: border-box;\n `}\n ${responsiveProperty('width', 'width')}\n`\n\nconst getMarginRightIconWrapper = ({\n column,\n isCompact,\n withImage,\n}: {\n column: boolean\n isCompact?: boolean\n withImage: boolean\n}) => {\n if (isCompact) return '8px'\n\n return column ? (withImage ? '8px' : '12px') : '8px'\n}\n\nconst getImageSize = ({ column, isCompact }: { column: boolean; isCompact?: boolean }) => {\n if (isCompact) return '20px'\n\n return column ? '28px' : '32px'\n}\n\nexport const IconWrapper = styled.div<IconWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: ${getMarginRightIconWrapper(props)};\n `}\n\n ${(props) =>\n props.withImage\n ? css`\n img,\n svg {\n height: ${(props: { column: boolean; isCompact?: boolean }) => getImageSize(props)};\n width: ${(props: { column: boolean; isCompact?: boolean }) => getImageSize(props)};\n }\n `\n : null};\n`\n\nexport const ContentWrapper = styled.div<ContentWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: auto;\n flex-direction: ${props.column ? 'column' : 'row'};\n align-items: ${props.column ? 'flex-start' : 'center'};\n max-width: ${props.column ? '260px' : 'initial'};\n white-space: ${props.column || props.isCompact ? 'normal' : 'nowrap'};\n overflow: hidden;\n `}\n`\n\nexport const Title = styled(Text)<TitleProps>`\n ${(props) => `\n display: inline-block;\n margin-top: ${props.isCompact ? '0' : '2px'};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n `}\n`\n\nexport const Content = styled(Text)<ContentProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '18px' : '20px'};\n text-overflow: ${props.column || props.isCompact ? 'clip' : 'ellipsis'};\n white-space: ${props.column || props.isCompact || props.textWrap ? 'pre-wrap' : 'inherit'};\n overflow: hidden;\n `}\n`\n\nexport const Link = styled(Anchor)<LinkProps>`\n ${(props) => `\n display: flex;\n margin-top: ${props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0};\n margin-left: ${props.column ? 0 : '60px'};\n color: ${props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-onmain-primary']};\n `}\n`\n\nconst getActionsMarginTop = ({\n column,\n isCompact,\n withTitle,\n}: {\n column: boolean\n isCompact?: boolean\n withTitle: boolean\n}) => {\n if (column) {\n return isCompact ? (withTitle ? '16px' : '8px') : '16px'\n } else {\n return 0\n }\n}\nexport const Actions = styled.div<ActionsProps>`\n ${(props) => `\n margin-top: ${getActionsMarginTop(props)};\n margin-left: ${props.column ? 0 : '60px'};\n `}\n`\n\nexport const SecondaryAction = styled(Button)<SecondaryActionProps>`\n ${(props) => `\n margin-right: ${props.column ? '4px' : '8px'};\n `}\n`\n\nexport const PrimaryAction = styled(Button)<PrimaryActionProps>`\n ${(props) => `\n margin-left: 0 !important;\n background-color: ${buttonBgColor(props.theme)};\n color: ${buttonColor(props.theme)};\n `}\n`\n\nexport const CloseIcon = styled.button<CloseIconProps>`\n ${(props) => `\n appearance: none;\n display: flex;\n margin-left: ${props.withTimer ? '0' : '16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n outline: none;\n\n &:focus-visible {\n outline: 1px solid ${props.theme.colors.accent};\n outline-offset: 2px;\n }\n `}\n`\n\nexport const CancelTimer = styled(Button)<CancelTimerProps>`\n ${(props) => `\n margin-left: ${props.isCompact ? '28px' : '60px'};\n padding-right: ${props.isCompact ? '16px' : '28px'};\n padding-left: ${props.isCompact ? '16px' : '28px'};\n `}\n`\n\nexport const Timer = styled(CountdownCircle)<CountdownCircleProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '12px' : '18px'};\n font-weight: ${props.isCompact ? '700' : '400'};\n font-size: ${props.isCompact ? '11px' : '14px'};\n color: ${props.color};\n\n svg {\n transform: rotateY(180deg);\n }\n `}\n`\n"],"names":["getPaddingY","_ref","column","isCompact","withImage","withTimer","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","props","textWrap","concat","_ref3","withCloseIcon","_ref2","noIcon","size","withAction","withTitle","type","theme","clear","mode","colors","responsiveProperty","getImageSize","_ref5","IconWrapper","_ref4","css","ContentWrapper","Title","Text","Content","Link","Anchor","Actions","_ref6","SecondaryAction","Button","PrimaryAction","buttonBgColor","buttonColor","CloseIcon","button","accent","CancelTimer","Timer","CountdownCircle","color"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useTheme as i}from'styled-components';import{useMemo as l}from'react';import{useClassname as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useTheme as i}from'styled-components';import{useMemo as l}from'react';import{useClassname as a}from'../../hooks/useClassname.js';import{Root as o}from'./style.js';import{jsx as n}from'react/jsx-runtime';var t=["as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","autoRel","tabIndex"];function d(p){var u,z,m;var{as:c,to:y,href:h,wrapper:v,className:f,style:b,children:L,content:S,pseudo:X,underline:w,color:x,display:M,size:N,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,autoRel:D=!0,tabIndex:K=0}=p,R=s(p,t);var A=a(d.displayName,f);var B=i();var P;var T=l((()=>{var e,s;return D&&null!==(e=B.utils)&&void 0!==e&&e.relBuilder?B.utils.relBuilder(null!==(s=p.href)&&void 0!==s?s:p.to,p.target):p.rel}),[D,p.rel,p.href,p.to,p.target]);P='div'!==c||M?M:'block';var _={};S&&(_=e(e({},_),{},{dangerouslySetInnerHTML:{__html:S}}));var E=e=>{var s;'Enter'===e.key&&(null==R||null===(s=R.onClick)||void 0===s||s.call(R))};return n(o,c?e(e(e({as:c,pseudo:X,wrapper:v,underline:w,href:h,className:A,style:b,color:x,size:N,display:P,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,tabIndex:K,onKeyDown:E},R),_),{},{rel:'a'===c?null!==(u=p.rel)&&void 0!==u?u:T:void 0,children:L}):X?e(e(e({as:"div",pseudo:X,wrapper:v,underline:w,href:h,className:A,color:x,style:b,size:N,display:P,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,tabIndex:K,onKeyDown:E},R),_),{},{children:L}):y?e(e(e({as:r,to:y,pseudo:X,wrapper:v,underline:w,className:A,color:x,size:N,style:b,display:P,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,tabIndex:K,onKeyDown:E},R),_),{},{rel:null!==(z=p.rel)&&void 0!==z?z:T,children:L}):e(e(e({as:"a",href:h,pseudo:X,wrapper:v,underline:w,className:A,color:x,size:N,style:b,display:P,sizeXS:I,sizeS:j,sizeM:k,sizeL:g,sizeXL:C,tabIndex:K},_),R),{},{rel:null!==(m=p.rel)&&void 0!==m?m:T,children:L}))}d.displayName='Anchor',d.defaultProps={display:'inline-block'};export{d as Anchor};
|
|
2
2
|
//# sourceMappingURL=Anchor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { useMemo } from 'react'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport * as Styled from './style'\n\nexport interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {\n /**\n * Custom CSS class name\n */\n as?: 'div' | 'span' | 'a' | typeof Link\n /**\n * React router link to\n */\n to?: string\n /**\n * Link href\n */\n href?: string\n /**\n * Is display inline\n * */\n wrapper?: boolean\n /**\n * Pseudo link has dashed bottom border\n * */\n pseudo?: boolean\n /**\n * If link should be underlined\n * */\n underline?: boolean\n /**\n * Primary content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Primary content\n */\n content?: string\n /**\n * Onclick handler\n */\n onClick?: () => void\n target?: string\n rel?: string\n /**\n * Auto-generate rel. You must specify domain inside theme\n */\n autoRel?: boolean\n}\n\nAnchor.displayName = 'Anchor'\nAnchor.defaultProps = {\n display: 'inline-block',\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Anchor(props: typeof Anchor.defaultProps & AnchorProps) {\n const {\n as,\n to,\n href,\n wrapper,\n className,\n style,\n children,\n content,\n pseudo,\n underline,\n color,\n display,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n autoRel = true,\n ...rest\n } = props\n\n const _className = useClassname(Anchor.displayName, className)\n const theme = useTheme()\n\n let _display: Display['display']\n const _rel = useMemo(() => {\n return autoRel && theme.utils?.relBuilder ? theme.utils.relBuilder(props.href ?? props.to, props.target) : props.rel\n }, [autoRel, props.rel, props.href, props.to, props.target])\n\n if (as === 'div' && !display) _display = 'block'\n else _display = display\n\n let contentProps = {}\n\n if (content) {\n contentProps = {\n ...contentProps,\n dangerouslySetInnerHTML: { __html: content },\n }\n }\n\n if (as)\n return (\n <Styled.Root\n as={as}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n style={style}\n color={color}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n rel={as === 'a' ? props.rel ?? _rel : undefined}\n >\n {children}\n </Styled.Root>\n )\n\n if (pseudo)\n return (\n <Styled.Root\n as='div'\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n color={color}\n style={style}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n >\n {children}\n </Styled.Root>\n )\n else if (to)\n return (\n <Styled.Root\n as={Link}\n to={to}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n style={style}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n rel={props.rel ?? _rel}\n >\n {children}\n </Styled.Root>\n )\n else\n return (\n <Styled.Root\n as='a'\n href={href}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n style={style}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...contentProps}\n {...rest}\n rel={props.rel ?? _rel}\n >\n {children}\n </Styled.Root>\n )\n}\n"],"names":["Anchor","props","_props$rel","_props$rel2","_props$rel3","as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","autoRel","rest","_excluded","_className","useClassname","displayName","theme","useTheme","_display","_rel","useMemo","_theme$utils","_props$href","utils","relBuilder","target","rel","contentProps","dangerouslySetInnerHTML","__html","_jsx","Styled.Root","_objectSpread","Link","defaultProps"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { KeyboardEvent, useMemo } from 'react'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport * as Styled from './style'\n\nexport interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {\n /**\n * Custom CSS class name\n */\n as?: 'div' | 'span' | 'a' | typeof Link\n /**\n * React router link to\n */\n to?: string\n /**\n * Link href\n */\n href?: string\n /**\n * Is display inline\n * */\n wrapper?: boolean\n /**\n * Pseudo link has dashed bottom border\n * */\n pseudo?: boolean\n /**\n * If link should be underlined\n * */\n underline?: boolean\n /**\n * Primary content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Primary content\n */\n content?: string\n /**\n * Onclick handler\n */\n onClick?: () => void\n tabIndex?: number\n target?: string\n rel?: string\n /**\n * Auto-generate rel. You must specify domain inside theme\n */\n autoRel?: boolean\n}\n\nAnchor.displayName = 'Anchor'\nAnchor.defaultProps = {\n display: 'inline-block',\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Anchor(props: typeof Anchor.defaultProps & AnchorProps) {\n const {\n as,\n to,\n href,\n wrapper,\n className,\n style,\n children,\n content,\n pseudo,\n underline,\n color,\n display,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n autoRel = true,\n tabIndex = 0,\n ...rest\n } = props\n\n const _className = useClassname(Anchor.displayName, className)\n const theme = useTheme()\n\n let _display: Display['display']\n const _rel = useMemo(() => {\n return autoRel && theme.utils?.relBuilder ? theme.utils.relBuilder(props.href ?? props.to, props.target) : props.rel\n }, [autoRel, props.rel, props.href, props.to, props.target])\n\n if (as === 'div' && !display) _display = 'block'\n else _display = display\n\n let contentProps = {}\n\n if (content) {\n contentProps = {\n ...contentProps,\n dangerouslySetInnerHTML: { __html: content },\n }\n }\n\n const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement | HTMLDivElement | HTMLSpanElement>): void => {\n if (event.key === 'Enter') {\n rest?.onClick?.()\n }\n }\n\n if (as)\n return (\n <Styled.Root\n as={as}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n style={style}\n color={color}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n tabIndex={tabIndex}\n onKeyDown={onKeyDown}\n {...rest}\n {...contentProps}\n rel={as === 'a' ? props.rel ?? _rel : undefined}\n >\n {children}\n </Styled.Root>\n )\n\n if (pseudo)\n return (\n <Styled.Root\n as='div'\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n color={color}\n style={style}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n tabIndex={tabIndex}\n onKeyDown={onKeyDown}\n {...rest}\n {...contentProps}\n >\n {children}\n </Styled.Root>\n )\n else if (to)\n return (\n <Styled.Root\n as={Link}\n to={to}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n style={style}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n tabIndex={tabIndex}\n onKeyDown={onKeyDown}\n {...rest}\n {...contentProps}\n rel={props.rel ?? _rel}\n >\n {children}\n </Styled.Root>\n )\n else\n return (\n <Styled.Root\n as='a'\n href={href}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n style={style}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n tabIndex={tabIndex}\n {...contentProps}\n {...rest}\n rel={props.rel ?? _rel}\n >\n {children}\n </Styled.Root>\n )\n}\n"],"names":["Anchor","props","_props$rel","_props$rel2","_props$rel3","as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","autoRel","tabIndex","rest","_excluded","_className","useClassname","displayName","theme","useTheme","_display","_rel","useMemo","_theme$utils","_props$href","utils","relBuilder","target","rel","contentProps","dangerouslySetInnerHTML","__html","onKeyDown","event","_rest$onClick","key","onClick","call","_jsx","Styled.Root","_objectSpread","Link","defaultProps"],"mappings":"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"}
|
package/dts/index.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import * as styled_components from 'styled-components';
|
|
3
3
|
import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, SimpleInterpolation, css } from 'styled-components';
|
|
4
|
+
import * as react from 'react';
|
|
5
|
+
import { Component, PureComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
|
|
4
6
|
import { Link, NavLink } from 'react-router-dom';
|
|
5
7
|
import { Display as Display$1 } from 'mixins/display';
|
|
6
8
|
import { ResponsiveNamedProperty as ResponsiveNamedProperty$1, ResponsiveProperty as ResponsiveProperty$1 } from 'mixins/responsive-property';
|
|
7
9
|
import { Color as Color$1 } from 'mixins/color';
|
|
8
10
|
import { Anchor as Anchor$1 } from 'components/Anchor';
|
|
9
11
|
import { BaseProps as BaseProps$1, Nullable as Nullable$1, FontWeight as FontWeight$1 } from 'shared/interfaces';
|
|
10
|
-
import * as react from 'react';
|
|
11
|
-
import { Component, PureComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
|
|
12
12
|
import { Classes } from 'react-modal';
|
|
13
13
|
import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
|
|
14
14
|
import * as rc_scrollbars from 'rc-scrollbars';
|
|
@@ -207,7 +207,7 @@ declare enum ColorNames {
|
|
|
207
207
|
darkgrey = "darkgrey",
|
|
208
208
|
lightgrey = "lightgrey",
|
|
209
209
|
superlightgrey = "superlightgrey",
|
|
210
|
-
transparent = "
|
|
210
|
+
transparent = "transparent"
|
|
211
211
|
}
|
|
212
212
|
|
|
213
213
|
declare type ColorPropsProperties = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
|
|
@@ -615,6 +615,7 @@ interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>,
|
|
|
615
615
|
* Onclick handler
|
|
616
616
|
*/
|
|
617
617
|
onClick?: () => void;
|
|
618
|
+
tabIndex?: number;
|
|
618
619
|
target?: string;
|
|
619
620
|
rel?: string;
|
|
620
621
|
/**
|
|
@@ -825,50 +826,60 @@ declare namespace Text {
|
|
|
825
826
|
}
|
|
826
827
|
|
|
827
828
|
declare type AlertType = 'warning' | 'error' | 'info' | 'success';
|
|
829
|
+
declare type AlertSize = 'big' | 'small';
|
|
828
830
|
interface AlertProps extends BaseProps {
|
|
829
|
-
/**
|
|
830
|
-
|
|
831
|
-
|
|
831
|
+
/** Text of the timer cancellation button */
|
|
832
|
+
cancelTimerText: string | React.ReactNode;
|
|
833
|
+
/** Children react node */
|
|
832
834
|
children?: React.ReactNode;
|
|
835
|
+
/** Use a colorless background */
|
|
833
836
|
clear?: boolean;
|
|
837
|
+
/** This method is taken from react-toastify library */
|
|
834
838
|
closeToast?(): void;
|
|
835
|
-
content?: string | React.ReactNode;
|
|
836
839
|
/** Icon name (for inner Icon component) */
|
|
837
840
|
customIcon?: keyof typeof IconNames;
|
|
841
|
+
/** Any custom image (e.g.: img, svg, icon from @foxford/icon-pack) */
|
|
838
842
|
image?: React.ReactNode;
|
|
843
|
+
/** Use for tablet and mobile view */
|
|
839
844
|
isCompact?: boolean;
|
|
845
|
+
/** Display a hyperlink */
|
|
840
846
|
link?: {
|
|
841
847
|
content: string | React.ReactNode;
|
|
842
848
|
onClick(): void;
|
|
843
849
|
};
|
|
844
850
|
linkProps?: AnchorProps;
|
|
851
|
+
/** Use alert without icon */
|
|
845
852
|
noIcon?: boolean;
|
|
853
|
+
/** You can cancel the action if the timer has not expired yet */
|
|
846
854
|
onClickCancelTimer?(): void;
|
|
855
|
+
/** Display the action button */
|
|
847
856
|
primaryAction?: {
|
|
848
857
|
content: string | React.ReactNode;
|
|
849
858
|
onClick(): void;
|
|
850
859
|
};
|
|
851
860
|
primaryActionProps?: ButtonProps;
|
|
861
|
+
/** Display the second action button */
|
|
852
862
|
secondaryAction?: {
|
|
853
863
|
content: string | React.ReactNode;
|
|
854
864
|
onClick(): void;
|
|
855
865
|
};
|
|
856
866
|
secondaryActionProps?: ButtonProps;
|
|
867
|
+
/** Use this to change the appearance of the alert */
|
|
868
|
+
size: AlertSize;
|
|
869
|
+
/** Use it when you need to move text to another line in alerts without a title */
|
|
857
870
|
textProps?: TextProps;
|
|
871
|
+
textWrap?: boolean;
|
|
872
|
+
/** It is used in alerts with a timer. Pass the value in seconds */
|
|
858
873
|
timer?: number;
|
|
874
|
+
/** Display a title */
|
|
859
875
|
title?: string;
|
|
860
876
|
titleProps?: TextProps;
|
|
861
|
-
type
|
|
862
|
-
|
|
863
|
-
/**
|
|
864
|
-
* Расширен:
|
|
865
|
-
* - [`BaseProps`](#/Миксины)
|
|
866
|
-
*/
|
|
867
|
-
declare function Alert({ primaryAction, primaryActionProps, secondaryAction, secondaryActionProps, children, className, clear, content, customIcon, image, isCompact, link, linkProps, noIcon, onClickCancelTimer, closeToast, style, textProps, timer, title, titleProps, type, }: AlertProps): JSX.Element;
|
|
868
|
-
declare namespace Alert {
|
|
869
|
-
var displayName: string;
|
|
877
|
+
type?: AlertType;
|
|
878
|
+
width?: ResponsiveProperty;
|
|
870
879
|
}
|
|
871
880
|
|
|
881
|
+
declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
|
|
882
|
+
|
|
872
883
|
declare enum CurrencyCodes {
|
|
873
884
|
ALL = "ALL",
|
|
874
885
|
AFN = "AFN",
|