@foxford/ui 2.4.3-beta-7227108-20230620 → 2.4.3-beta-f7c0390-20230703
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/Text/style.js +1 -1
- package/components/Text/style.js.map +1 -1
- package/components/Text.Heading/Text.Heading.js +1 -1
- package/components/Text.Heading/Text.Heading.js.map +1 -1
- package/components/Textarea/style.js +1 -1
- package/components/Textarea/style.js.map +1 -1
- package/dts/index.d.ts +4 -9
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/components/Text/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e
|
|
1
|
+
import e from'styled-components';import{injectDefaultTheme as i}from'../../shared/utils/inject-theme.js';import{display as t}from'../../mixins/display.js';import{color as o}from'../../mixins/color.js';import{property as n,responsiveNamedProperty as s}from'../../mixins/responsive-property.js';var r={lighter:100,normal:400,bold:600,bolder:800};var l={l:1.5,m:1.3,s:1.15,xs:1};var a=e.div.withConfig({shouldForwardProp:e=>['children','className','style','title','dangerouslySetInnerHTML'].includes(e)}).attrs(i).withConfig({componentId:"fox-ui__sc-s2fogy-0"})(["line-height:inherit;margin:initial;"," "," "," "," "," "," a{text-decoration:",";&:hover{text-decoration:none;}}"," "," ",""],(e=>e.display&&t(e.display)),(e=>o(e.color?e.color:e.theme.textColor)),(e=>e.fontStyle&&"font-style: ".concat(e.fontStyle,";")),(e=>e.fontFamily&&"font-family: ".concat(e.fontFamily,";")),(e=>e.lineHeight&&"line-height: ".concat('string'==typeof e.lineHeight&&l[e.lineHeight]?l[e.lineHeight]:e.lineHeight,";")),(e=>e.weight&&"font-weight: ".concat('string'==typeof e.lineHeight&&r[e.weight]?r[e.weight]:e.weight,";")),(e=>{var{underlineLinks:i}=e;return i?'underline':'none'}),(e=>e.textAlign&&" text-align: ".concat(e.textAlign,";")),(e=>e.size&&n(e.size,'font-size')),(e=>{var{sizeXS:i,sizeS:t,sizeM:o,sizeL:n,sizeXL:r}=e;return s({sizes:{sizeXS:i,sizeS:t,sizeM:o,sizeL:n,sizeXL:r},cssProperty:'font-size'})}));export{a as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Text/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { display } from '../../mixins/display'\nimport { color, ColorValue } from '../../mixins/color'\nimport { responsiveNamedProperty, property } from '../../mixins/responsive-property'\nimport { TextProps } from './types'\n\nconst WEIGHT_MAP = {\n lighter: 100,\n normal: 400,\n bold: 600,\n bolder: 800,\n}\n\nconst LINE_HEIGHT_MAP: Record<Exclude<TextProps['lineHeight'], undefined>, number> = {\n l: 1.5,\n m: 1.3,\n s: 1.15,\n xs: 1,\n}\n\nexport const Root = styled.div\n .withConfig({\n shouldForwardProp: (prop) => ['children', 'className', 'style', 'title', 'dangerouslySetInnerHTML'].includes(prop),\n })\n .attrs(injectDefaultTheme)<TextProps>`\n line-height: inherit;\n margin: initial;\n ${(props) => props.display && display(props.display)}\n ${(props) => (props.color ? color(props.color) : color(props.theme.textColor as ColorValue))}\n ${(props) => props.fontStyle && `font-style: ${props.fontStyle};`}\n ${(props) => props.fontFamily && `font-family: ${props.fontFamily};`}\n ${(props) =>\n props.lineHeight &&\n `line-height: ${\n typeof props.lineHeight === 'string' && LINE_HEIGHT_MAP[props.lineHeight]\n ? LINE_HEIGHT_MAP[props.lineHeight]\n : props.lineHeight\n };`}\n ${(props) =>\n props.weight &&\n `font-weight: ${\n typeof props.lineHeight === 'string' && WEIGHT_MAP[props.weight] ? WEIGHT_MAP[props.weight] : props.weight\n };`}\n\n a {\n text-decoration: ${({ underlineLinks }) => (underlineLinks ? 'underline' : 'none')};\n &:hover {\n text-decoration: none;\n }\n }\n\n ${(props) => props.textAlign && ` text-align: ${props.textAlign};`}\n ${(props) => props.size && property(props.size, 'font-size')}\n ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) =>\n responsiveNamedProperty({ sizes: { sizeXS, sizeS, sizeM, sizeL, sizeXL }, cssProperty: 'font-size' })}\n`\n"],"names":["WEIGHT_MAP","lighter","normal","bold","bolder","LINE_HEIGHT_MAP","l","m","s","xs","Root","styled","div","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","props","display","color","theme","textColor","fontStyle","fontFamily","concat","lineHeight","weight","_ref","underlineLinks","textAlign","size","property","_ref2","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty"],"mappings":"qSAOA,IAAMA,EAAa,CACjBC,QAAS,IACTC,OAAQ,IACRC,KAAM,IACNC,OAAQ,KAGV,IAAMC,EAA+E,CACnFC,EAAG,IACHC,EAAG,IACHC,EAAG,KACHC,GAAI,GAGC,IAAMC,EAAOC,EAAOC,IACxBC,WAAW,CACVC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,QAAS,QAAS,2BAA2BC,SAASD,KAE9GE,MAAMC,GAJQL,WAAA,CAAAM,YAAA,uBAAGR,CAOfS,CAAAA,sCAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,sBAAAA,mCAAAA,IAAAA,IAAAA,KAAAA,GAAUA,EAAMC,SAAWA,EAAQD,EAAMC,WACzCD,GAAyBE,EAAdF,EAAME,MAAcF,EAAME,MAAeF,EAAMG,MAAMC,aAChEJ,GAAUA,EAAMK,WAA4BL,eAAAA,OAAAA,EAAMK,UATtC,OAUZL,GAAUA,EAAMM,YAAN,gBAAAC,OAAoCP,EAAMM,WAA1C,OACVN,GACDA,EAAMQ,YAAN,gBAAAD,OAE8B,iBAArBP,EAAMQ,YAA2BvB,EAAgBe,EAAMQ,YAC1DvB,EAAgBe,EAAMQ,YACtBR,EAAMQ,WAhBC,OAkBZR,GACDA,EAAMS,QAEJ,gBAAAF,OAA4B,iBAArBP,EAAMQ,YAA2B5B,EAAWoB,EAAMS,QAAU7B,EAAWoB,EAAMS,QAAUT,EAAMS,OAFtG,OAMmBC,IAAA,IAACC,eAAEA,GAAHD,EAAA,OAAyBC,EAAiB,YAAc,UAM1EX,GAAUA,EAAMY,WAAN,gBAAAL,OAAmCP,EAAMY,UAAzC,OACVZ,GAAUA,EAAMa,MAAQC,EAASd,EAAMa,KAAM,eAC9CE,IAAA,IAACC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAhCL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,OAAAA,EAAQC,MAAAA,EAAOC,MAAAA,EAAOC,MAAAA,EAAOC,OAAAA,GAAUG,YAAa"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{useFallbackTheme as t}from'../../hooks/use-theme.js';import{useConfigPriority as o}from'../../hooks/use-config-priority.js';import{Text as r}from'../Text/Text.js';import{jsx as s}from'react/jsx-runtime';var a=["h"
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import i from'@babel/runtime/helpers/objectWithoutProperties';import{useFallbackTheme as t}from'../../hooks/use-theme.js';import{useConfigPriority as o}from'../../hooks/use-config-priority.js';import{Text as r}from'../Text/Text.js';import{jsx as s}from'react/jsx-runtime';var a=["h","fontFamily"];var h={h1:{size:44,sizeM:32,lineHeight:'s',weight:'bold'},h2:{size:32,sizeM:28,lineHeight:'s',weight:'bold'},h3:{size:28,lineHeight:'s',weight:'bold'},h4:{size:24,lineHeight:'s',weight:'bold'}};var m='Text.Heading';var l=m=>{var l;var n=t();var g=o(null===(l=n.components)||void 0===l?void 0:l["Text.Heading"],m),{h:p="h1",fontFamily:d=""}=g,b=i(g,a);return s(r,e(e({as:p,fontFamily:d},h[p]),b))};l.displayName="Text.Heading";export{m as COMPONENT_NAME,l as TextHeading};
|
|
2
2
|
//# sourceMappingURL=Text.Heading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.Heading.js","sources":["../../../../src/components/Text.Heading/Text.Heading.tsx"],"sourcesContent":["import { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { Text } from '../Text'\nimport { TextHeadingProps, H } from './types'\n\nconst PARAMS: Record<
|
|
1
|
+
{"version":3,"file":"Text.Heading.js","sources":["../../../../src/components/Text.Heading/Text.Heading.tsx"],"sourcesContent":["import { useFallbackTheme } from 'hooks/use-theme'\nimport { useConfigPriority } from 'hooks/use-config-priority'\nimport { Text } from '../Text'\nimport { TextHeadingProps, H } from './types'\n\nconst PARAMS: Record<H, Partial<TextHeadingProps>> = {\n h1: {\n size: 44,\n sizeM: 32,\n lineHeight: 's',\n weight: 'bold',\n },\n h2: {\n size: 32,\n sizeM: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h3: {\n size: 28,\n lineHeight: 's',\n weight: 'bold',\n },\n h4: {\n size: 24,\n lineHeight: 's',\n weight: 'bold',\n },\n}\n\nconst COMPONENT_NAME = 'Text.Heading'\n\n/**\n * @visibleName Text.Heading\n */\nconst TextHeading = (props: TextHeadingProps) => {\n const theme = useFallbackTheme()\n\n const {\n h = 'h1',\n fontFamily = '',\n ...configProps\n } = useConfigPriority<TextHeadingProps>(theme.components?.[COMPONENT_NAME], props)\n\n const predefinedParams = PARAMS[h]\n\n return <Text as={h} fontFamily={fontFamily} {...predefinedParams} {...configProps} />\n}\n\nTextHeading.displayName = COMPONENT_NAME\n\nexport { TextHeading, COMPONENT_NAME }\n"],"names":["PARAMS","h1","size","sizeM","lineHeight","weight","h2","h3","h4","COMPONENT_NAME","TextHeading","props","_theme$components","theme","useFallbackTheme","useConfigPriority","components","h","fontFamily","_useConfigPriority","configProps","_objectWithoutProperties","_excluded","_jsx","Text","_objectSpread","as","displayName"],"mappings":"6VAKA,IAAMA,EAA+C,CACnDC,GAAI,CACFC,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVC,GAAI,CACFJ,KAAM,GACNC,MAAO,GACPC,WAAY,IACZC,OAAQ,QAEVE,GAAI,CACFL,KAAM,GACNE,WAAY,IACZC,OAAQ,QAEVG,GAAI,CACFN,KAAM,GACNE,WAAY,IACZC,OAAQ,SAINI,IAAAA,EAAiB,eAKjBC,IAAAA,EAAeC,IAA4B,IAAAC,EAC/C,IAAMC,EAAQC,IAEd,IAIIC,EAAAA,EAAoC,QAAAF,EAAAA,EAAMG,kBAAAA,IAANJ,OAAA,EAAAA,EAZnB,gBAYuDD,IAJtEM,EACJA,EAAI,KADAC,WAEJA,EAAa,IAFfC,EAGKC,EAHLC,EAAAF,EAAAG,GAQA,OAAOC,EAACC,EAADC,EAAAA,EAAA,CAAMC,GAAIT,EAAGC,WAAYA,GAFPlB,EAAOiB,IAEsCG,KAGxEV,EAAYiB,YAnBW"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r,{css as
|
|
1
|
+
import r,{css as o}from'styled-components';import{injectDefaultTheme as e}from'../../shared/utils/inject-theme.js';import{property as t,responsiveNamedProperty as d}from'../../mixins/responsive-property.js';import{chooseWidthValue as i}from'../Input/helpers.js';import{baseInputStyle as a}from'../Input/style.js';var s=o(["",";"," "," "," ",""],(r=>{var{theme:e}=r;return o(["display:block;box-sizing:border-box;appearance:none;width:auto;resize:vertical;background:",";border:1px solid ",";border-radius:12px;padding:12px 16px;font-style:normal;font-weight:400;font-size:18px;line-height:24px;color:",";&::placeholder{color:",";}&:focus{border:1px solid ",";caret-color:",";outline:none;}&:disabled{background-color:",";border-color:",";color:",";cursor:not-allowed;}"],e.colors['bg-onmain-secondary'],e.colors['border-onmain-default-large'],e.colors['content-onmain-primary'],e.colors['content-onmain-secondary'],e.colors['border-brand-primary'],e.colors['border-brand-primary'],e.colors['bg-disabled-large'],e.colors['border-disabled'],e.colors['content-disabled'])}),(r=>r.width?t(i(r.width),r.fluid&&'auto'!==r.width?'max-width':'width'):null),(r=>d({sizes:{widthXS:r.widthXS,widthS:r.widthS,widthM:r.widthM,widthL:r.widthL,widthXL:r.widthXL},cssProperty:r.fluid&&'auto'!==r.width?'max-width':'width',customSizeHandler:i})),(r=>{var{fluid:o}=r;return o&&'width: 100%;'}),(r=>{var{error:e}=r;return e&&o(["background-color:",";border:1px solid ",";"],(r=>{var{theme:o}=r;return o.colors['alert-bg-error-100']}),(r=>{var{theme:o}=r;return o.colors['alert-bg-error-500']}))}));var n=o(["resize:none;line-height:23px;padding:16px 20px 11px;",""],a);var l=r.textarea.withConfig({shouldForwardProp:r=>!['color','placeholderColor','rounded','fluid','error','brandPresetUsed'].includes(r)&&!r.includes('width')}).attrs(e).withConfig({componentId:"fox-ui__sc-a4hfy5-0"})(["",""],(r=>{var{brandPresetUsed:o}=r;return o?s:n}));export{l as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from '../../components/Input/helpers'\nimport { baseInputStyle } from '../../components/Input/style'\nimport type { TextareaRootProps } from './types'\n\n
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Textarea/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { injectDefaultTheme } from 'shared/utils/inject-theme'\nimport { property, responsiveNamedProperty } from 'mixins/responsive-property'\nimport { chooseWidthValue } from '../../components/Input/helpers'\nimport { baseInputStyle } from '../../components/Input/style'\nimport type { TextareaRootProps } from './types'\n\n/**\n * TODO: combine following styles durnig Input component rebranding and remove it from here\n * https://jira.netology-group.ru/browse/STOEGE-20514\n */\nconst brandTextareaStyle = css<TextareaRootProps>`\n ${({ theme }) => css`\n display: block;\n box-sizing: border-box;\n appearance: none;\n width: auto;\n resize: vertical;\n\n background: ${theme.colors['bg-onmain-secondary']};\n border: 1px solid ${theme.colors['border-onmain-default-large']};\n border-radius: 12px;\n padding: 12px 16px;\n\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 24px;\n color: ${theme.colors['content-onmain-primary']};\n\n &::placeholder {\n color: ${theme.colors['content-onmain-secondary']};\n }\n\n &:focus {\n border: 1px solid ${theme.colors['border-brand-primary']};\n caret-color: ${theme.colors['border-brand-primary']};\n outline: none;\n }\n\n &:disabled {\n background-color: ${theme.colors['bg-disabled-large']};\n border-color: ${theme.colors['border-disabled']};\n color: ${theme.colors['content-disabled']};\n cursor: not-allowed;\n }\n `};\n\n ${(props) =>\n props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n\n ${(props) =>\n responsiveNamedProperty({\n sizes: {\n widthXS: props.widthXS,\n widthS: props.widthS,\n widthM: props.widthM,\n widthL: props.widthL,\n widthXL: props.widthXL,\n },\n cssProperty: props.fluid && props.width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n\n ${({ fluid }) => fluid && 'width: 100%;'}\n\n ${({ error }) =>\n error &&\n css`\n background-color: ${({ theme }) => theme.colors['alert-bg-error-100']};\n border: 1px solid ${({ theme }) => theme.colors['alert-bg-error-500']};\n `}\n`\n\nconst baseTextareaStyle = css`\n resize: none;\n line-height: 23px;\n padding: 16px 20px 11px;\n ${baseInputStyle}\n`\n\nexport const Root = styled.textarea\n .withConfig({\n shouldForwardProp: (prop) =>\n !['color', 'placeholderColor', 'rounded', 'fluid', 'error', 'brandPresetUsed'].includes(prop) &&\n !prop.includes('width'),\n })\n .attrs(injectDefaultTheme)<TextareaRootProps>`\n ${({ brandPresetUsed }) => (brandPresetUsed ? brandTextareaStyle : baseTextareaStyle)}\n`\n"],"names":["brandTextareaStyle","css","_ref","theme","colors","props","width","property","chooseWidthValue","fluid","responsiveNamedProperty","sizes","widthXS","widthS","widthM","widthL","widthXL","cssProperty","customSizeHandler","_ref2","_ref3","error","_ref4","_ref5","baseTextareaStyle","baseInputStyle","Root","styled","textarea","withConfig","shouldForwardProp","prop","includes","attrs","injectDefaultTheme","componentId","_ref6","brandPresetUsed"],"mappings":"yTAWA,IAAMA,EAAqBC,EACvB,CAAA,GAAA,IAAA,IAAA,IAAA,IAAA,KAAAC,IAAA,IAACC,MAAEA,GAAHD,EAAA,OAAeD,EAAf,CAAA,6FAAA,qBAAA,iHAAA,yBAAA,8BAAA,gBAAA,8CAAA,iBAAA,UAAA,yBAOcE,EAAMC,OAAO,uBACPD,EAAMC,OAAO,+BAQxBD,EAAMC,OAAO,0BAGXD,EAAMC,OAAO,4BAIFD,EAAMC,OAAO,wBAClBD,EAAMC,OAAO,wBAKRD,EAAMC,OAAO,qBACjBD,EAAMC,OAAO,mBACpBD,EAAMC,OAAO,wBAKvBC,GACDA,EAAMC,MACFC,EAASC,EAAiBH,EAAMC,OAAQD,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,SAC9F,OAEHD,GACDK,EAAwB,CACtBC,MAAO,CACLC,QAASP,EAAMO,QACfC,OAAQR,EAAMQ,OACdC,OAAQT,EAAMS,OACdC,OAAQV,EAAMU,OACdC,QAASX,EAAMW,SAEjBC,YAAaZ,EAAMI,OAAyB,SAAhBJ,EAAMC,MAAmB,YAAc,QACnEY,kBAAmBV,MAGrBW,IAAA,IAACV,MAAEA,GAAHU,EAAA,OAAeV,GAAS,kBAExBW,IAAA,IAACC,MAAEA,GAAHD,EAAA,OACAC,GACApB,EACsB,CAAA,oBAAA,qBAAA,MAAAqB,IAAA,IAACnB,MAAEA,GAAHmB,EAAA,OAAenB,EAAMC,OAAO,yBAC5BmB,IAAA,IAACpB,MAAEA,GAAHoB,EAAA,OAAepB,EAAMC,OAAO,4BAItD,IAAMoB,EAAoBvB,EAAH,CAAA,uDAAA,IAInBwB,GAGG,IAAMC,EAAOC,EAAOC,SACxBC,WAAW,CACVC,kBAAoBC,IACjB,CAAC,QAAS,mBAAoB,UAAW,QAAS,QAAS,mBAAmBC,SAASD,KACvFA,EAAKC,SAAS,WAElBC,MAAMC,GANQL,WAAA,CAAAM,YAAA,uBAAGR,CAOhB,CAAA,GAAA,KAAAS,IAAA,IAACC,gBAAEA,GAAHD,EAAA,OAA0BC,EAAkBrC,EAAqBwB"}
|
package/dts/index.d.ts
CHANGED
|
@@ -332,7 +332,7 @@ interface InputField extends Color, Color<'placeholderColor'>, ResponsiveNamedPr
|
|
|
332
332
|
*/
|
|
333
333
|
children?: React.ReactNode;
|
|
334
334
|
/**
|
|
335
|
-
* Rounded style
|
|
335
|
+
* @preset {Default} Rounded style
|
|
336
336
|
*/
|
|
337
337
|
rounded?: boolean;
|
|
338
338
|
/**
|
|
@@ -881,15 +881,10 @@ declare class Avatar extends PureComponent<AvatarProps> {
|
|
|
881
881
|
render(): JSX.Element;
|
|
882
882
|
}
|
|
883
883
|
|
|
884
|
-
declare
|
|
885
|
-
h1 = 0,
|
|
886
|
-
h2 = 1,
|
|
887
|
-
h3 = 2,
|
|
888
|
-
h4 = 3
|
|
889
|
-
}
|
|
884
|
+
declare type H = 'h1' | 'h2' | 'h3' | 'h4';
|
|
890
885
|
interface TextHeadingProps extends Omit<TextProps, 'content' | 'as'> {
|
|
891
886
|
/** Default set of size, lineHeight and weight props */
|
|
892
|
-
h?:
|
|
887
|
+
h?: H;
|
|
893
888
|
/** Children react node */
|
|
894
889
|
children?: React.ReactNode;
|
|
895
890
|
}
|
|
@@ -961,7 +956,7 @@ interface TextProps extends BaseProps$1, Color$1, ResponsiveNamedProperty$1<'siz
|
|
|
961
956
|
declare const Text: {
|
|
962
957
|
(props: TextProps): JSX.Element;
|
|
963
958
|
Heading: {
|
|
964
|
-
(
|
|
959
|
+
(props: TextHeadingProps): JSX.Element;
|
|
965
960
|
displayName: string;
|
|
966
961
|
};
|
|
967
962
|
Ellipse: typeof TextEllipse;
|