@coveord/plasma-mantine 59.6.0 → 59.7.0
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/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +94 -87
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/ActionIcon/ActionIcon.js +21 -3
- package/dist/cjs/components/ActionIcon/ActionIcon.js.map +1 -1
- package/dist/cjs/components/Alert/Alert.d.ts.map +1 -1
- package/dist/cjs/components/Alert/Alert.js +6 -8
- package/dist/cjs/components/Alert/Alert.js.map +1 -1
- package/dist/cjs/components/Header/Header.context.d.ts +2 -1
- package/dist/cjs/components/Header/Header.context.d.ts.map +1 -1
- package/dist/cjs/components/Header/Header.context.js.map +1 -1
- package/dist/cjs/components/Header/Header.js +2 -1
- package/dist/cjs/components/Header/Header.js.map +1 -1
- package/dist/cjs/components/Header/Header.module.css +0 -1
- package/dist/cjs/components/Header/HeaderDocAnchor/HeaderDocAnchor.d.ts.map +1 -1
- package/dist/cjs/components/Header/HeaderDocAnchor/HeaderDocAnchor.js +12 -7
- package/dist/cjs/components/Header/HeaderDocAnchor/HeaderDocAnchor.js.map +1 -1
- package/dist/cjs/components/InfoToken/InfoToken.d.ts.map +1 -1
- package/dist/cjs/components/InfoToken/InfoToken.js +8 -6
- package/dist/cjs/components/InfoToken/InfoToken.js.map +1 -1
- package/dist/cjs/components/Input/InputLabelInfo.js +1 -1
- package/dist/cjs/components/Input/InputLabelInfo.js.map +1 -1
- package/dist/esm/components/ActionIcon/ActionIcon.js +15 -3
- package/dist/esm/components/ActionIcon/ActionIcon.js.map +1 -1
- package/dist/esm/components/Alert/Alert.d.ts.map +1 -1
- package/dist/esm/components/Alert/Alert.js +6 -8
- package/dist/esm/components/Alert/Alert.js.map +1 -1
- package/dist/esm/components/Header/Header.context.d.ts +2 -1
- package/dist/esm/components/Header/Header.context.d.ts.map +1 -1
- package/dist/esm/components/Header/Header.context.js.map +1 -1
- package/dist/esm/components/Header/Header.js +2 -1
- package/dist/esm/components/Header/Header.js.map +1 -1
- package/dist/esm/components/Header/Header.module.css +0 -1
- package/dist/esm/components/Header/HeaderDocAnchor/HeaderDocAnchor.d.ts.map +1 -1
- package/dist/esm/components/Header/HeaderDocAnchor/HeaderDocAnchor.js +10 -6
- package/dist/esm/components/Header/HeaderDocAnchor/HeaderDocAnchor.js.map +1 -1
- package/dist/esm/components/InfoToken/InfoToken.d.ts.map +1 -1
- package/dist/esm/components/InfoToken/InfoToken.js +8 -6
- package/dist/esm/components/InfoToken/InfoToken.js.map +1 -1
- package/dist/esm/components/Input/InputLabelInfo.js +1 -1
- package/dist/esm/components/Input/InputLabelInfo.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ActionIcon/ActionIcon.tsx +3 -3
- package/src/components/Alert/Alert.tsx +6 -8
- package/src/components/Header/Header.context.ts +2 -1
- package/src/components/Header/Header.module.css +0 -1
- package/src/components/Header/Header.tsx +3 -3
- package/src/components/Header/HeaderDocAnchor/HeaderDocAnchor.tsx +11 -16
- package/src/components/Header/__tests__/Header.spec.tsx +1 -1
- package/src/components/InfoToken/InfoToken.tsx +8 -6
- package/src/components/Input/InputLabelInfo.tsx +1 -1
- package/src/components/Input/__tests__/Input.spec.tsx +1 -1
- package/src/components/Switch/__tests__/Switch.spec.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import {\n AlertCssVariables,\n AlertProps,\n AlertStylesNames,\n AlertVariant,\n Factory,\n Alert as MantineAlert,\n polymorphicFactory,\n} from '@mantine/core';\nimport {type ComponentType} from 'react';\nimport {InfoToken} from '../InfoToken/InfoToken.js';\n\ntype AlertOverloadFactory = Factory<{\n props: AlertProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: AlertStylesNames;\n vars: AlertCssVariables;\n variant: AlertVariant;\n staticComponents: {\n Information: typeof AlertInformation;\n Advice: typeof AlertAdvice;\n Warning: typeof AlertWarning;\n Critical: typeof AlertCritical;\n Success: typeof AlertSuccess;\n };\n}>;\n\nexport const Alert = polymorphicFactory<AlertOverloadFactory>((props, ref) => <MantineAlert {...props} ref={ref} />);\nAlert.displayName = 'Alert';\n\nconst AlertInformation = Alert.withProps({\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import {\n AlertCssVariables,\n AlertProps,\n AlertStylesNames,\n AlertVariant,\n Factory,\n Alert as MantineAlert,\n polymorphicFactory,\n} from '@mantine/core';\nimport {type ComponentType} from 'react';\nimport {InfoToken} from '../InfoToken/InfoToken.js';\n\ntype AlertOverloadFactory = Factory<{\n props: AlertProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: AlertStylesNames;\n vars: AlertCssVariables;\n variant: AlertVariant;\n staticComponents: {\n Information: typeof AlertInformation;\n Advice: typeof AlertAdvice;\n Warning: typeof AlertWarning;\n Critical: typeof AlertCritical;\n Success: typeof AlertSuccess;\n };\n}>;\n\nexport const Alert = polymorphicFactory<AlertOverloadFactory>((props, ref) => <MantineAlert {...props} ref={ref} />);\nAlert.displayName = 'Alert';\n\nconst AlertInformation = Alert.withProps({\n icon: <InfoToken.Information size=\"md\" />,\n vars: () => ({\n root: {\n '--alert-color': 'var(--mantine-color-blue-filled)',\n '--alert-bg': 'var(--mantine-color-blue-light)',\n '--alert-bd': '2px solid var(--mantine-color-blue-light)',\n '--alert-radius': 'var(--mantine-radius-sm)',\n },\n }),\n});\n(AlertInformation as ComponentType).displayName = 'Alert.Information';\n\nconst AlertAdvice = Alert.withProps({\n icon: <InfoToken.Advice size=\"md\" />,\n vars: () => ({\n root: {\n '--alert-color': 'var(--mantine-color-violet-filled)',\n '--alert-bg': 'var(--mantine-color-violet-light)',\n '--alert-bd': '2px solid var(--mantine-color-violet-light)',\n '--alert-radius': 'var(--mantine-radius-sm)',\n },\n }),\n});\n(AlertAdvice as ComponentType).displayName = 'Alert.Advice';\n\nconst AlertSuccess = Alert.withProps({\n icon: <InfoToken.Success size=\"md\" />,\n vars: () => ({\n root: {\n '--alert-color': 'var(--mantine-color-green-filled)',\n '--alert-bg': 'var(--mantine-color-green-light)',\n '--alert-bd': '2px solid var(--mantine-color-green-light)',\n '--alert-radius': 'var(--mantine-radius-sm)',\n },\n }),\n});\n(AlertSuccess as ComponentType).displayName = 'Alert.Success';\n\nconst AlertWarning = Alert.withProps({\n icon: <InfoToken.Warning size=\"md\" />,\n vars: () => ({\n root: {\n '--alert-color': 'var(--mantine-color-yellow-text)',\n '--alert-bg': 'var(--mantine-color-yellow-light)',\n '--alert-bd': '2px solid var(--mantine-color-yellow-light)',\n '--alert-radius': 'var(--mantine-radius-sm)',\n },\n }),\n});\n(AlertWarning as ComponentType).displayName = 'Alert.Warning';\n\nconst AlertCritical = Alert.withProps({\n icon: <InfoToken.Error size=\"md\" />,\n vars: () => ({\n root: {\n '--alert-color': 'var(--mantine-color-error)',\n '--alert-bg': 'var(--mantine-color-red-light)',\n '--alert-bd': '2px solid var(--mantine-color-red-light)',\n '--alert-radius': 'var(--mantine-radius-sm)',\n },\n }),\n});\n(AlertCritical as ComponentType).displayName = 'Alert.Critical';\n\nAlert.Information = AlertInformation;\nAlert.Advice = AlertAdvice;\nAlert.Warning = AlertWarning;\nAlert.Critical = AlertCritical;\nAlert.Success = AlertSuccess;\n"],"names":["Alert","MantineAlert","polymorphicFactory","InfoToken","props","ref","displayName","AlertInformation","withProps","icon","Information","size","vars","root","AlertAdvice","Advice","AlertSuccess","Success","AlertWarning","Warning","AlertCritical","Error","Critical"],"mappings":";AAAA,SAMIA,SAASC,YAAY,EACrBC,kBAAkB,QACf,gBAAgB;AAEvB,SAAQC,SAAS,QAAO,4BAA4B;AAkBpD,OAAO,MAAMH,QAAQE,mBAAyC,CAACE,OAAOC,oBAAQ,KAACJ;QAAc,GAAGG,KAAK;QAAEC,KAAKA;QAAS;AACrHL,MAAMM,WAAW,GAAG;AAEpB,MAAMC,mBAAmBP,MAAMQ,SAAS,CAAC;IACrCC,oBAAM,KAACN,UAAUO,WAAW;QAACC,MAAK;;IAClCC,MAAM,IAAO,CAAA;YACTC,MAAM;gBACF,iBAAiB;gBACjB,cAAc;gBACd,cAAc;gBACd,kBAAkB;YACtB;QACJ,CAAA;AACJ;AACCN,iBAAmCD,WAAW,GAAG;AAElD,MAAMQ,cAAcd,MAAMQ,SAAS,CAAC;IAChCC,oBAAM,KAACN,UAAUY,MAAM;QAACJ,MAAK;;IAC7BC,MAAM,IAAO,CAAA;YACTC,MAAM;gBACF,iBAAiB;gBACjB,cAAc;gBACd,cAAc;gBACd,kBAAkB;YACtB;QACJ,CAAA;AACJ;AACCC,YAA8BR,WAAW,GAAG;AAE7C,MAAMU,eAAehB,MAAMQ,SAAS,CAAC;IACjCC,oBAAM,KAACN,UAAUc,OAAO;QAACN,MAAK;;IAC9BC,MAAM,IAAO,CAAA;YACTC,MAAM;gBACF,iBAAiB;gBACjB,cAAc;gBACd,cAAc;gBACd,kBAAkB;YACtB;QACJ,CAAA;AACJ;AACCG,aAA+BV,WAAW,GAAG;AAE9C,MAAMY,eAAelB,MAAMQ,SAAS,CAAC;IACjCC,oBAAM,KAACN,UAAUgB,OAAO;QAACR,MAAK;;IAC9BC,MAAM,IAAO,CAAA;YACTC,MAAM;gBACF,iBAAiB;gBACjB,cAAc;gBACd,cAAc;gBACd,kBAAkB;YACtB;QACJ,CAAA;AACJ;AACCK,aAA+BZ,WAAW,GAAG;AAE9C,MAAMc,gBAAgBpB,MAAMQ,SAAS,CAAC;IAClCC,oBAAM,KAACN,UAAUkB,KAAK;QAACV,MAAK;;IAC5BC,MAAM,IAAO,CAAA;YACTC,MAAM;gBACF,iBAAiB;gBACjB,cAAc;gBACd,cAAc;gBACd,kBAAkB;YACtB;QACJ,CAAA;AACJ;AACCO,cAAgCd,WAAW,GAAG;AAE/CN,MAAMU,WAAW,GAAGH;AACpBP,MAAMe,MAAM,GAAGD;AACfd,MAAMmB,OAAO,GAAGD;AAChBlB,MAAMsB,QAAQ,GAAGF;AACjBpB,MAAMiB,OAAO,GAAGD"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { GetStylesApi } from '@mantine/core';
|
|
2
|
-
import type { HeaderFactory } from './Header.js';
|
|
2
|
+
import type { HeaderFactory, HeaderVariant } from './Header.js';
|
|
3
3
|
export interface HeaderContextValue {
|
|
4
4
|
getStyles: GetStylesApi<HeaderFactory>;
|
|
5
|
+
variant: HeaderVariant;
|
|
5
6
|
}
|
|
6
7
|
export declare const HeaderProvider: ({ children, value }: {
|
|
7
8
|
value: HeaderContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.context.d.ts","sourceRoot":"","sources":["../../../../src/components/Header/Header.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Header.context.d.ts","sourceRoot":"","sources":["../../../../src/components/Header/Header.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAoB,MAAM,eAAe,CAAC;AAC9D,OAAO,KAAK,EAAC,aAAa,EAAE,aAAa,EAAC,MAAM,aAAa,CAAC;AAE9D,MAAM,WAAW,kBAAkB;IAC/B,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;IACvC,OAAO,EAAE,aAAa,CAAC;CAC1B;AAED,eAAO,MAAO,cAAc;;;+CAAE,gBAAgB,0BAE7C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Header/Header.context.ts"],"sourcesContent":["import {GetStylesApi, createSafeContext} from '@mantine/core';\nimport type {HeaderFactory} from './Header.js';\n\nexport interface HeaderContextValue {\n getStyles: GetStylesApi<HeaderFactory>;\n}\n\nexport const [HeaderProvider, useHeaderContext] = createSafeContext<HeaderContextValue>(\n 'Header component was not found in tree',\n);\n"],"names":["createSafeContext","HeaderProvider","useHeaderContext"],"mappings":"AAAA,SAAsBA,iBAAiB,QAAO,gBAAgB;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Header/Header.context.ts"],"sourcesContent":["import {GetStylesApi, createSafeContext} from '@mantine/core';\nimport type {HeaderFactory, HeaderVariant} from './Header.js';\n\nexport interface HeaderContextValue {\n getStyles: GetStylesApi<HeaderFactory>;\n variant: HeaderVariant;\n}\n\nexport const [HeaderProvider, useHeaderContext] = createSafeContext<HeaderContextValue>(\n 'Header component was not found in tree',\n);\n"],"names":["createSafeContext","HeaderProvider","useHeaderContext"],"mappings":"AAAA,SAAsBA,iBAAiB,QAAO,gBAAgB;AAQ9D,OAAO,MAAM,CAACC,gBAAgBC,iBAAiB,GAAGF,kBAC9C,0CACF"}
|
|
@@ -39,7 +39,8 @@ export const Header = factory((_props, ref)=>{
|
|
|
39
39
|
const otherChildren = convertedChildren.filter((child)=>child.type !== HeaderBreadcrumbs && child.type !== HeaderRight && child.type !== HeaderDocAnchor);
|
|
40
40
|
return /*#__PURE__*/ _jsxs(HeaderProvider, {
|
|
41
41
|
value: {
|
|
42
|
-
getStyles
|
|
42
|
+
getStyles,
|
|
43
|
+
variant
|
|
43
44
|
},
|
|
44
45
|
children: [
|
|
45
46
|
/*#__PURE__*/ _jsxs(Group, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import {\n Divider,\n Factory,\n Group,\n GroupProps,\n Stack,\n StylesApiProps,\n Text,\n Title,\n factory,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {Children, ElementType, ReactElement, ReactNode} from 'react';\nimport {HeaderProvider} from './Header.context.js';\nimport classes from './Header.module.css';\nimport {\n HeaderBreadcrumbAnchor,\n type HeaderBreadcrumbAnchorStyleNames,\n} from './HeaderBreadcrumbs/HeaderBreadcrumbAnchor.js';\nimport {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs.js';\nimport {HeaderBreadcrumbText, HeaderBreadcrumbTextStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbText.js';\nimport {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor.js';\nimport {HeaderRight, HeaderRightStyleNames} from './HeaderRight/HeaderRight.js';\n\nexport type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs.js';\nexport type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor.js';\nexport type {HeaderRightProps} from './HeaderRight/HeaderRight.js';\n\nexport type HeaderVariant = 'primary' | 'secondary';\nexport type HeaderStyleNames =\n | 'root'\n | 'title'\n | 'description'\n | 'divider'\n | 'body'\n | HeaderDocAnchorStyleNames\n | HeaderBreadcrumbsStyleNames\n | HeaderBreadcrumbAnchorStyleNames\n | HeaderBreadcrumbTextStyleNames\n | HeaderRightStyleNames;\n\nexport interface HeaderProps\n extends\n StylesApiProps<HeaderFactory>,\n Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'variant' | 'attributes'> {\n /**\n * The description text displayed inside the header underneath the title\n */\n description?: ReactNode;\n /**\n * Whether the header should have a border on the bottom\n */\n borderBottom?: boolean;\n /**\n * Use the primary variant for page header and secondary variant elsewhere\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary';\n /**\n * The title of the header.\n */\n children: ReactNode;\n /**\n * The component used to render the title.\n *\n * @default Title\n * @example 'h2'\n */\n titleComponent?: ElementType;\n}\n\nexport type HeaderFactory = Factory<{\n props: HeaderProps;\n ref: HTMLDivElement;\n variant: HeaderVariant;\n stylesNames: HeaderStyleNames;\n staticComponents: {\n Breadcrumbs: typeof HeaderBreadcrumbs;\n BreadcrumbAnchor: typeof HeaderBreadcrumbAnchor;\n BreadcrumbText: typeof HeaderBreadcrumbText;\n Right: typeof HeaderRight;\n DocAnchor: typeof HeaderDocAnchor;\n };\n}>;\n\nconst defaultProps
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import {\n Divider,\n Factory,\n Group,\n GroupProps,\n Stack,\n StylesApiProps,\n Text,\n Title,\n factory,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {Children, ElementType, ReactElement, ReactNode} from 'react';\nimport {HeaderProvider} from './Header.context.js';\nimport classes from './Header.module.css';\nimport {\n HeaderBreadcrumbAnchor,\n type HeaderBreadcrumbAnchorStyleNames,\n} from './HeaderBreadcrumbs/HeaderBreadcrumbAnchor.js';\nimport {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs.js';\nimport {HeaderBreadcrumbText, HeaderBreadcrumbTextStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbText.js';\nimport {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor.js';\nimport {HeaderRight, HeaderRightStyleNames} from './HeaderRight/HeaderRight.js';\n\nexport type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs.js';\nexport type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor.js';\nexport type {HeaderRightProps} from './HeaderRight/HeaderRight.js';\n\nexport type HeaderVariant = 'primary' | 'secondary';\nexport type HeaderStyleNames =\n | 'root'\n | 'title'\n | 'description'\n | 'divider'\n | 'body'\n | HeaderDocAnchorStyleNames\n | HeaderBreadcrumbsStyleNames\n | HeaderBreadcrumbAnchorStyleNames\n | HeaderBreadcrumbTextStyleNames\n | HeaderRightStyleNames;\n\nexport interface HeaderProps\n extends\n StylesApiProps<HeaderFactory>,\n Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'variant' | 'attributes'> {\n /**\n * The description text displayed inside the header underneath the title\n */\n description?: ReactNode;\n /**\n * Whether the header should have a border on the bottom\n */\n borderBottom?: boolean;\n /**\n * Use the primary variant for page header and secondary variant elsewhere\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary';\n /**\n * The title of the header.\n */\n children: ReactNode;\n /**\n * The component used to render the title.\n *\n * @default Title\n * @example 'h2'\n */\n titleComponent?: ElementType;\n}\n\nexport type HeaderFactory = Factory<{\n props: HeaderProps;\n ref: HTMLDivElement;\n variant: HeaderVariant;\n stylesNames: HeaderStyleNames;\n staticComponents: {\n Breadcrumbs: typeof HeaderBreadcrumbs;\n BreadcrumbAnchor: typeof HeaderBreadcrumbAnchor;\n BreadcrumbText: typeof HeaderBreadcrumbText;\n Right: typeof HeaderRight;\n DocAnchor: typeof HeaderDocAnchor;\n };\n}>;\n\nconst defaultProps = {\n variant: 'primary',\n justify: 'space-between',\n wrap: 'nowrap',\n} satisfies Partial<HeaderProps>;\n\nconst getSpacing = (variant: HeaderVariant) => (variant === 'secondary' ? 'xxs' : 'xs');\n\nexport const Header = factory<HeaderFactory>((_props, ref) => {\n const props = useProps('PlasmaHeader', defaultProps, _props);\n const {\n className,\n description,\n borderBottom,\n variant,\n children,\n style,\n classNames,\n unstyled,\n vars,\n styles,\n titleComponent: TitleComponent,\n ...others\n } = props;\n const getStyles = useStyles<HeaderFactory>({\n name: 'PlasmaHeader',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n });\n const stylesApiProps = {classNames, styles};\n\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n const right = convertedChildren.find((child) => child.type === HeaderRight);\n const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n const otherChildren = convertedChildren.filter(\n (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderRight && child.type !== HeaderDocAnchor,\n );\n return (\n <HeaderProvider value={{getStyles, variant}}>\n <Group ref={ref} variant={variant} {...getStyles('root')} {...others}>\n <Stack gap={getSpacing(variant)}>\n {breadcrumbs}\n <Title\n variant={variant}\n component={TitleComponent}\n order={variant === 'primary' ? 1 : 3}\n {...getStyles('title', stylesApiProps)}\n >\n {otherChildren}\n {docAnchor}\n </Title>\n <Text\n component=\"div\"\n {...getStyles('description', stylesApiProps)}\n size={variant === 'primary' ? 'md' : 'sm'}\n >\n {description}\n </Text>\n </Stack>\n {right}\n </Group>\n {borderBottom ? <Divider {...getStyles('divider', stylesApiProps)} size=\"xs\" /> : null}\n </HeaderProvider>\n );\n});\n\nHeader.displayName = 'Header';\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.BreadcrumbAnchor = HeaderBreadcrumbAnchor;\nHeader.BreadcrumbText = HeaderBreadcrumbText;\nHeader.Right = HeaderRight;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["Divider","Group","Stack","Text","Title","factory","useProps","useStyles","Children","HeaderProvider","classes","HeaderBreadcrumbAnchor","HeaderBreadcrumbs","HeaderBreadcrumbText","HeaderDocAnchor","HeaderRight","defaultProps","variant","justify","wrap","getSpacing","Header","_props","ref","props","className","description","borderBottom","children","style","classNames","unstyled","vars","styles","titleComponent","TitleComponent","others","getStyles","name","stylesApiProps","convertedChildren","toArray","breadcrumbs","find","child","type","right","docAnchor","otherChildren","filter","value","gap","component","order","size","displayName","Breadcrumbs","BreadcrumbAnchor","BreadcrumbText","Right","DocAnchor"],"mappings":";AAAA,SACIA,OAAO,EAEPC,KAAK,EAELC,KAAK,EAELC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,SAAQC,QAAQ,QAA6C,QAAQ;AACrE,SAAQC,cAAc,QAAO,sBAAsB;AACnD,OAAOC,aAAa,sBAAsB;AAC1C,SACIC,sBAAsB,QAEnB,gDAAgD;AACvD,SAAQC,iBAAiB,QAAoC,2CAA2C;AACxG,SAAQC,oBAAoB,QAAuC,8CAA8C;AACjH,SAAQC,eAAe,QAAkC,uCAAuC;AAChG,SAAQC,WAAW,QAA8B,+BAA+B;AAgEhF,MAAMC,eAAe;IACjBC,SAAS;IACTC,SAAS;IACTC,MAAM;AACV;AAEA,MAAMC,aAAa,CAACH,UAA4BA,YAAY,cAAc,QAAQ;AAElF,OAAO,MAAMI,SAAShB,QAAuB,CAACiB,QAAQC;IAClD,MAAMC,QAAQlB,SAAS,gBAAgBU,cAAcM;IACrD,MAAM,EACFG,SAAS,EACTC,WAAW,EACXC,YAAY,EACZV,OAAO,EACPW,QAAQ,EACRC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,gBAAgBC,cAAc,EAC9B,GAAGC,QACN,GAAGZ;IACJ,MAAMa,YAAY9B,UAAyB;QACvC+B,MAAM;QACNd;QACAd;QACAe;QACAI;QACAC;QACAG;QACAF;QACAC;IACJ;IACA,MAAMO,iBAAiB;QAACT;QAAYG;IAAM;IAE1C,MAAMO,oBAAoBhC,SAASiC,OAAO,CAACb;IAC3C,MAAMc,cAAcF,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAKjC;IACrE,MAAMkC,QAAQN,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK9B;IAC/D,MAAMgC,YAAYP,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK/B;IACnE,MAAMkC,gBAAgBR,kBAAkBS,MAAM,CAC1C,CAACL,QAAUA,MAAMC,IAAI,KAAKjC,qBAAqBgC,MAAMC,IAAI,KAAK9B,eAAe6B,MAAMC,IAAI,KAAK/B;IAEhG,qBACI,MAACL;QAAeyC,OAAO;YAACb;YAAWpB;QAAO;;0BACtC,MAAChB;gBAAMsB,KAAKA;gBAAKN,SAASA;gBAAU,GAAGoB,UAAU,OAAO;gBAAG,GAAGD,MAAM;;kCAChE,MAAClC;wBAAMiD,KAAK/B,WAAWH;;4BAClByB;0CACD,MAACtC;gCACGa,SAASA;gCACTmC,WAAWjB;gCACXkB,OAAOpC,YAAY,YAAY,IAAI;gCAClC,GAAGoB,UAAU,SAASE,eAAe;;oCAErCS;oCACAD;;;0CAEL,KAAC5C;gCACGiD,WAAU;gCACT,GAAGf,UAAU,eAAeE,eAAe;gCAC5Ce,MAAMrC,YAAY,YAAY,OAAO;0CAEpCS;;;;oBAGRoB;;;YAEJnB,6BAAe,KAAC3B;gBAAS,GAAGqC,UAAU,WAAWE,eAAe;gBAAEe,MAAK;iBAAU;;;AAG9F,GAAG;AAEHjC,OAAOkC,WAAW,GAAG;AACrBlC,OAAOmC,WAAW,GAAG5C;AACrBS,OAAOoC,gBAAgB,GAAG9C;AAC1BU,OAAOqC,cAAc,GAAG7C;AACxBQ,OAAOsC,KAAK,GAAG5C;AACfM,OAAOuC,SAAS,GAAG9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderDocAnchor.d.ts","sourceRoot":"","sources":["../../../../../src/components/Header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderDocAnchor.d.ts","sourceRoot":"","sources":["../../../../../src/components/Header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,sBAAsB,EAAE,OAAO,EAAW,YAAY,EAAoB,MAAM,eAAe,CAAC;AACrH,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIhC,MAAM,MAAM,yBAAyB,GAAG,kBAAkB,GAAG,WAAW,CAAC;AAEzE,MAAM,WAAW,oBACb,SACI,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,EAC9B,sBAAsB,CAAC,sBAAsB,CAAC,EAC9C,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACnE;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC;IACzC,KAAK,EAAE,oBAAoB,CAAC;IAC5B,GAAG,EAAE,iBAAiB,CAAC;IACvB,WAAW,EAAE,yBAAyB,CAAC;IACvC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAOH,eAAO,MAAM,eAAe;WAXjB,oBAAoB;SACtB,iBAAiB;iBACT,yBAAyB;cAC5B,IAAI;EAmChB,CAAC"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { IconExternalLink } from '@coveord/plasma-react-icons';
|
|
3
|
+
import { Tooltip, factory, useProps } from '@mantine/core';
|
|
4
|
+
import { ActionIcon } from '../../ActionIcon/ActionIcon.js';
|
|
4
5
|
import { useHeaderContext } from '../Header.context.js';
|
|
5
6
|
const defaultProps = {
|
|
6
7
|
position: 'right',
|
|
7
|
-
children: /*#__PURE__*/ _jsx(
|
|
8
|
+
children: /*#__PURE__*/ _jsx(IconExternalLink, {})
|
|
8
9
|
};
|
|
9
10
|
export const HeaderDocAnchor = factory((_props, ref)=>{
|
|
10
11
|
const props = useProps('PlasmaHeaderActions', defaultProps, _props);
|
|
11
|
-
const { className, classNames, styles, style, children, label, position, vars, ...others } = props;
|
|
12
|
+
const { className, classNames, styles, style, children, label, position, vars, size, ...others } = props;
|
|
12
13
|
const ctx = useHeaderContext();
|
|
13
14
|
return /*#__PURE__*/ _jsx(Tooltip, {
|
|
14
15
|
label: label,
|
|
@@ -21,10 +22,13 @@ export const HeaderDocAnchor = factory((_props, ref)=>{
|
|
|
21
22
|
props
|
|
22
23
|
}).className
|
|
23
24
|
},
|
|
24
|
-
children: /*#__PURE__*/ _jsx(
|
|
25
|
+
children: /*#__PURE__*/ _jsx(ActionIcon.Tertiary, {
|
|
25
26
|
ref: ref,
|
|
26
|
-
|
|
27
|
+
size: ctx.variant === 'primary' ? 'lg' : 'md',
|
|
28
|
+
component: "a",
|
|
27
29
|
target: "_blank",
|
|
30
|
+
rel: "noopener noreferrer",
|
|
31
|
+
"aria-label": "external",
|
|
28
32
|
...ctx.getStyles('docAnchor', {
|
|
29
33
|
classNames,
|
|
30
34
|
styles,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Header/HeaderDocAnchor/HeaderDocAnchor.tsx"],"sourcesContent":["import {IconExternalLink} from '@coveord/plasma-react-icons';\nimport {AnchorProps, CompoundStylesApiProps, Factory, Tooltip, TooltipProps, factory, useProps} from '@mantine/core';\nimport {ReactNode} from 'react';\nimport {ActionIcon} from '../../ActionIcon/ActionIcon.js';\nimport {useHeaderContext} from '../Header.context.js';\n\nexport type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';\n\nexport interface HeaderDocAnchorProps\n extends\n Pick<TooltipProps, 'position'>,\n CompoundStylesApiProps<HeaderDocAnchorFactory>,\n Omit<AnchorProps, 'classNames' | 'styles' | 'variant' | 'vars'> {\n /**\n * A href pointing to documentation related to the current panel.\n * When provided, an info icon is rendered next to the title as link to this documentation\n */\n href: string;\n /**\n * The tooltip text shown when hovering over the doc link icon\n */\n label?: ReactNode;\n /**\n * React component to add the tooltip and anchor on\n */\n children?: ReactNode;\n}\n\nexport type HeaderDocAnchorFactory = Factory<{\n props: HeaderDocAnchorProps;\n ref: HTMLAnchorElement;\n stylesNames: HeaderDocAnchorStyleNames;\n compound: true;\n}>;\n\nconst defaultProps: Partial<HeaderDocAnchorProps> = {\n position: 'right',\n children: <IconExternalLink />,\n};\n\nexport const HeaderDocAnchor = factory<HeaderDocAnchorFactory>((_props, ref) => {\n const props = useProps('PlasmaHeaderActions', defaultProps, _props);\n const {className, classNames, styles, style, children, label, position, vars, size, ...others} = props;\n\n const ctx = useHeaderContext();\n\n return (\n <Tooltip\n label={label}\n disabled={!label}\n position={position}\n classNames={{tooltip: ctx.getStyles('docAnchorTooltip', {classNames, styles, props}).className}}\n >\n <ActionIcon.Tertiary\n ref={ref}\n size={ctx.variant === 'primary' ? 'lg' : 'md'}\n component=\"a\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n aria-label=\"external\"\n {...ctx.getStyles('docAnchor', {classNames, styles, props, style, className})}\n {...others}\n >\n {children}\n </ActionIcon.Tertiary>\n </Tooltip>\n );\n});\n\nHeaderDocAnchor.displayName = 'Header.DocAnchor';\n"],"names":["IconExternalLink","Tooltip","factory","useProps","ActionIcon","useHeaderContext","defaultProps","position","children","HeaderDocAnchor","_props","ref","props","className","classNames","styles","style","label","vars","size","others","ctx","disabled","tooltip","getStyles","Tertiary","variant","component","target","rel","aria-label","displayName"],"mappings":";AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAsDC,OAAO,EAAgBC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAErH,SAAQC,UAAU,QAAO,iCAAiC;AAC1D,SAAQC,gBAAgB,QAAO,uBAAuB;AA+BtD,MAAMC,eAA8C;IAChDC,UAAU;IACVC,wBAAU,KAACR;AACf;AAEA,OAAO,MAAMS,kBAAkBP,QAAgC,CAACQ,QAAQC;IACpE,MAAMC,QAAQT,SAAS,uBAAuBG,cAAcI;IAC5D,MAAM,EAACG,SAAS,EAAEC,UAAU,EAAEC,MAAM,EAAEC,KAAK,EAAER,QAAQ,EAAES,KAAK,EAAEV,QAAQ,EAAEW,IAAI,EAAEC,IAAI,EAAE,GAAGC,QAAO,GAAGR;IAEjG,MAAMS,MAAMhB;IAEZ,qBACI,KAACJ;QACGgB,OAAOA;QACPK,UAAU,CAACL;QACXV,UAAUA;QACVO,YAAY;YAACS,SAASF,IAAIG,SAAS,CAAC,oBAAoB;gBAACV;gBAAYC;gBAAQH;YAAK,GAAGC,SAAS;QAAA;kBAE9F,cAAA,KAACT,WAAWqB,QAAQ;YAChBd,KAAKA;YACLQ,MAAME,IAAIK,OAAO,KAAK,YAAY,OAAO;YACzCC,WAAU;YACVC,QAAO;YACPC,KAAI;YACJC,cAAW;YACV,GAAGT,IAAIG,SAAS,CAAC,aAAa;gBAACV;gBAAYC;gBAAQH;gBAAOI;gBAAOH;YAAS,EAAE;YAC5E,GAAGO,MAAM;sBAETZ;;;AAIjB,GAAG;AAEHC,gBAAgBsB,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoToken.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoToken/InfoToken.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,QAAQ,EAGR,OAAO,EACP,yBAAyB,EAEzB,cAAc,EAGjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAa,iBAAiB,EAAE,YAAY,EAAC,MAAM,OAAO,CAAC;AAGlE,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACnC,KAAK,EAAE,sBAAsB,CAAC;IAC9B,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,6BAA6B,CAAC;IAC3C,IAAI,EAAE,qBAAqB,CAAC;IAC5B,OAAO,EAAE,gBAAgB,CAAC;CAC7B,CAAC,CAAC;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AACpG,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,EAAE,YAAY,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,UAAU,sBAAuB,SAAQ,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC;IAC/E;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;AAElE,KAAK,0BAA0B,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC,EAAE,cAAc,CAAC,KAAK,YAAY,CAAC,GAChH,IAAI,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"InfoToken.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoToken/InfoToken.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,QAAQ,EAGR,OAAO,EACP,yBAAyB,EAEzB,cAAc,EAGjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAa,iBAAiB,EAAE,YAAY,EAAC,MAAM,OAAO,CAAC;AAGlE,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACnC,KAAK,EAAE,sBAAsB,CAAC;IAC9B,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,6BAA6B,CAAC;IAC3C,IAAI,EAAE,qBAAqB,CAAC;IAC5B,OAAO,EAAE,gBAAgB,CAAC;CAC7B,CAAC,CAAC;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AACpG,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,EAAE,YAAY,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,UAAU,sBAAuB,SAAQ,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC;IAC/E;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;AAElE,KAAK,0BAA0B,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC,EAAE,cAAc,CAAC,KAAK,YAAY,CAAC,GAChH,IAAI,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AA6HnF,eAAO,MAAM,SAAS;;;;;;;CAOZ,CAAC"}
|
|
@@ -12,14 +12,15 @@ const colorResolver = (type)=>{
|
|
|
12
12
|
switch(type){
|
|
13
13
|
case 'error':
|
|
14
14
|
return 'var(--mantine-color-error)';
|
|
15
|
+
case 'information':
|
|
16
|
+
return 'var(--mantine-color-blue-text)';
|
|
15
17
|
case 'advice':
|
|
16
|
-
|
|
17
|
-
return 'var(--coveo-color-text-primary)';
|
|
18
|
+
return 'var(--mantine-color-violet-text)';
|
|
18
19
|
case 'warning':
|
|
19
20
|
return 'var(--mantine-color-yellow-text)';
|
|
20
21
|
case 'success':
|
|
21
22
|
return 'var(--mantine-color-green-text)';
|
|
22
|
-
case '
|
|
23
|
+
case 'question':
|
|
23
24
|
default:
|
|
24
25
|
return 'var(--mantine-color-gray-text)';
|
|
25
26
|
}
|
|
@@ -28,14 +29,15 @@ const bgColorResolver = (type)=>{
|
|
|
28
29
|
switch(type){
|
|
29
30
|
case 'error':
|
|
30
31
|
return 'var(--mantine-color-red-light)';
|
|
32
|
+
case 'information':
|
|
33
|
+
return 'var(--mantine-color-blue-light)';
|
|
31
34
|
case 'advice':
|
|
32
|
-
|
|
33
|
-
return 'var(--mantine-primary-color-light)';
|
|
35
|
+
return 'var(--mantine-color-violet-light)';
|
|
34
36
|
case 'warning':
|
|
35
37
|
return 'var(--mantine-color-yellow-light)';
|
|
36
38
|
case 'success':
|
|
37
39
|
return 'var(--mantine-color-green-light)';
|
|
38
|
-
case '
|
|
40
|
+
case 'question':
|
|
39
41
|
default:
|
|
40
42
|
return 'var(--mantine-color-gray-light)';
|
|
41
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/InfoToken/InfoToken.tsx"],"sourcesContent":["import {\n IconAlertSquare,\n IconAlertTriangle,\n IconBulb,\n IconCheck,\n IconHelpCircle,\n IconInfoCircle,\n TablerIcon,\n} from '@coveord/plasma-react-icons';\nimport {\n Box,\n BoxProps,\n createPolymorphicComponent,\n createVarsResolver,\n Factory,\n PolymorphicComponentProps,\n polymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {forwardRef, FunctionComponent, ReactElement} from 'react';\nimport classes from './InfoToken.module.css';\n\nexport type InfoTokenFactory = Factory<{\n props: InfoTokenInternalProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: InfoTokenComponentStylesNames;\n vars: InfoTokenCssVariables;\n variant: InfoTokenVariant;\n}>;\nexport type InfoTokenComponentStylesNames = 'root';\nexport type InfoTokenType = 'information' | 'advice' | 'warning' | 'error' | 'question' | 'success';\nexport type InfoTokenVariant = 'outline' | 'light';\nexport type InfoTokenSizes = 'xs' | 'sm' | 'md' | 'lg';\nexport type InfoTokenCssVariables = {\n root: '--it-color' | '--it-bg';\n};\n\ninterface InfoTokenInternalProps extends BoxProps, StylesApiProps<InfoTokenFactory> {\n /**\n * The variant of the token.\n *\n * @default 'outline'\n */\n variant?: InfoTokenVariant;\n /**\n * The semantic type of the token\n *\n * @default 'information'\n */\n type?: InfoTokenType;\n /**\n * The size of the info token.\n *\n * @default 'xs'\n */\n size?: InfoTokenSizes;\n}\n\nexport type InfoTokenProps = Omit<InfoTokenInternalProps, 'type'>;\n\ntype InfoTokenCompoundComponent = (<C = 'div'>(props: PolymorphicComponentProps<C, InfoTokenProps>) => ReactElement) &\n Omit<FunctionComponent<PolymorphicComponentProps<any, InfoTokenProps>>, never>;\n\nconst defaultProps: Partial<InfoTokenInternalProps> = {variant: 'outline', type: 'information', size: 'xs'};\n\nconst colorResolver = (type: InfoTokenType): string => {\n switch (type) {\n case 'error':\n return 'var(--mantine-color-error)';\n case '
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/InfoToken/InfoToken.tsx"],"sourcesContent":["import {\n IconAlertSquare,\n IconAlertTriangle,\n IconBulb,\n IconCheck,\n IconHelpCircle,\n IconInfoCircle,\n TablerIcon,\n} from '@coveord/plasma-react-icons';\nimport {\n Box,\n BoxProps,\n createPolymorphicComponent,\n createVarsResolver,\n Factory,\n PolymorphicComponentProps,\n polymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {forwardRef, FunctionComponent, ReactElement} from 'react';\nimport classes from './InfoToken.module.css';\n\nexport type InfoTokenFactory = Factory<{\n props: InfoTokenInternalProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: InfoTokenComponentStylesNames;\n vars: InfoTokenCssVariables;\n variant: InfoTokenVariant;\n}>;\nexport type InfoTokenComponentStylesNames = 'root';\nexport type InfoTokenType = 'information' | 'advice' | 'warning' | 'error' | 'question' | 'success';\nexport type InfoTokenVariant = 'outline' | 'light';\nexport type InfoTokenSizes = 'xs' | 'sm' | 'md' | 'lg';\nexport type InfoTokenCssVariables = {\n root: '--it-color' | '--it-bg';\n};\n\ninterface InfoTokenInternalProps extends BoxProps, StylesApiProps<InfoTokenFactory> {\n /**\n * The variant of the token.\n *\n * @default 'outline'\n */\n variant?: InfoTokenVariant;\n /**\n * The semantic type of the token\n *\n * @default 'information'\n */\n type?: InfoTokenType;\n /**\n * The size of the info token.\n *\n * @default 'xs'\n */\n size?: InfoTokenSizes;\n}\n\nexport type InfoTokenProps = Omit<InfoTokenInternalProps, 'type'>;\n\ntype InfoTokenCompoundComponent = (<C = 'div'>(props: PolymorphicComponentProps<C, InfoTokenProps>) => ReactElement) &\n Omit<FunctionComponent<PolymorphicComponentProps<any, InfoTokenProps>>, never>;\n\nconst defaultProps: Partial<InfoTokenInternalProps> = {variant: 'outline', type: 'information', size: 'xs'};\n\nconst colorResolver = (type: InfoTokenType): string => {\n switch (type) {\n case 'error':\n return 'var(--mantine-color-error)';\n case 'information':\n return 'var(--mantine-color-blue-text)';\n case 'advice':\n return 'var(--mantine-color-violet-text)';\n case 'warning':\n return 'var(--mantine-color-yellow-text)';\n case 'success':\n return 'var(--mantine-color-green-text)';\n case 'question':\n default:\n return 'var(--mantine-color-gray-text)';\n }\n};\n\nconst bgColorResolver = (type: InfoTokenType): string => {\n switch (type) {\n case 'error':\n return 'var(--mantine-color-red-light)';\n case 'information':\n return 'var(--mantine-color-blue-light)';\n case 'advice':\n return 'var(--mantine-color-violet-light)';\n case 'warning':\n return 'var(--mantine-color-yellow-light)';\n case 'success':\n return 'var(--mantine-color-green-light)';\n case 'question':\n default:\n return 'var(--mantine-color-gray-light)';\n }\n};\n\nconst sizeResolver = (size: InfoTokenSizes): number => {\n switch (size) {\n case 'sm':\n return 20;\n case 'md':\n return 24;\n case 'lg':\n return 32;\n case 'xs':\n default:\n return 16;\n }\n};\n\nconst iconResolver = (type: InfoTokenType): TablerIcon => {\n switch (type) {\n case 'error':\n return IconAlertSquare;\n case 'question':\n return IconHelpCircle;\n case 'warning':\n return IconAlertTriangle;\n case 'advice':\n return IconBulb;\n case 'success':\n return IconCheck;\n default:\n return IconInfoCircle;\n }\n};\n\nconst varsResolver = createVarsResolver<InfoTokenFactory>((_theme, {type}) => {\n const color = colorResolver(type);\n const bgColor = bgColorResolver(type);\n return {\n root: {\n '--it-color': color,\n '--it-bg': bgColor,\n },\n };\n});\n\nconst _InfoToken = polymorphicFactory<InfoTokenFactory>((_props, ref) => {\n const props = useProps('InfoToken', defaultProps, _props);\n const {variant, type, vars, className, style, unstyled, styles, classNames, size, ...others} = props;\n const getStyles = useStyles<InfoTokenFactory>({\n name: 'InfoToken',\n classes,\n className,\n props,\n style,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n const IconComponent = iconResolver(type);\n return (\n <Box\n ref={ref}\n variant={variant}\n role=\"img\"\n aria-label={type}\n size={size}\n {...getStyles('root', {\n className,\n style,\n styles,\n classNames,\n })}\n {...others}\n >\n <IconComponent size={sizeResolver(size)} />\n </Box>\n );\n});\n\nconst createInfoTokenCompound = (type: InfoTokenType, displayName: string): InfoTokenCompoundComponent => {\n const Component: InfoTokenCompoundComponent = createPolymorphicComponent<'div', InfoTokenProps>(\n forwardRef<any, InfoTokenProps>((props, ref) => <_InfoToken ref={ref} {...props} type={type} />),\n );\n Component.displayName = displayName;\n return Component;\n};\n\nexport const InfoToken = {\n Information: createInfoTokenCompound('information', 'InfoToken.Information'),\n Advice: createInfoTokenCompound('advice', 'InfoToken.Advice'),\n Warning: createInfoTokenCompound('warning', 'InfoToken.Warning'),\n Error: createInfoTokenCompound('error', 'InfoToken.Error'),\n Question: createInfoTokenCompound('question', 'InfoToken.Question'),\n Success: createInfoTokenCompound('success', 'InfoToken.Success'),\n} as const;\n"],"names":["IconAlertSquare","IconAlertTriangle","IconBulb","IconCheck","IconHelpCircle","IconInfoCircle","Box","createPolymorphicComponent","createVarsResolver","polymorphicFactory","useProps","useStyles","forwardRef","classes","defaultProps","variant","type","size","colorResolver","bgColorResolver","sizeResolver","iconResolver","varsResolver","_theme","color","bgColor","root","_InfoToken","_props","ref","props","vars","className","style","unstyled","styles","classNames","others","getStyles","name","IconComponent","role","aria-label","createInfoTokenCompound","displayName","Component","InfoToken","Information","Advice","Warning","Error","Question","Success"],"mappings":";AAAA,SACIA,eAAe,EACfC,iBAAiB,EACjBC,QAAQ,EACRC,SAAS,EACTC,cAAc,EACdC,cAAc,QAEX,8BAA8B;AACrC,SACIC,GAAG,EAEHC,0BAA0B,EAC1BC,kBAAkB,EAGlBC,kBAAkB,EAElBC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,SAAQC,UAAU,QAAwC,QAAQ;AAClE,OAAOC,aAAa,yBAAyB;AA4C7C,MAAMC,eAAgD;IAACC,SAAS;IAAWC,MAAM;IAAeC,MAAM;AAAI;AAE1G,MAAMC,gBAAgB,CAACF;IACnB,OAAQA;QACJ,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;QACL;YACI,OAAO;IACf;AACJ;AAEA,MAAMG,kBAAkB,CAACH;IACrB,OAAQA;QACJ,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;QACL;YACI,OAAO;IACf;AACJ;AAEA,MAAMI,eAAe,CAACH;IAClB,OAAQA;QACJ,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;QACL;YACI,OAAO;IACf;AACJ;AAEA,MAAMI,eAAe,CAACL;IAClB,OAAQA;QACJ,KAAK;YACD,OAAOhB;QACX,KAAK;YACD,OAAOI;QACX,KAAK;YACD,OAAOH;QACX,KAAK;YACD,OAAOC;QACX,KAAK;YACD,OAAOC;QACX;YACI,OAAOE;IACf;AACJ;AAEA,MAAMiB,eAAed,mBAAqC,CAACe,QAAQ,EAACP,IAAI,EAAC;IACrE,MAAMQ,QAAQN,cAAcF;IAC5B,MAAMS,UAAUN,gBAAgBH;IAChC,OAAO;QACHU,MAAM;YACF,cAAcF;YACd,WAAWC;QACf;IACJ;AACJ;AAEA,MAAME,aAAalB,mBAAqC,CAACmB,QAAQC;IAC7D,MAAMC,QAAQpB,SAAS,aAAaI,cAAcc;IAClD,MAAM,EAACb,OAAO,EAAEC,IAAI,EAAEe,IAAI,EAAEC,SAAS,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,UAAU,EAAEnB,IAAI,EAAE,GAAGoB,QAAO,GAAGP;IAC/F,MAAMQ,YAAY3B,UAA4B;QAC1C4B,MAAM;QACN1B;QACAmB;QACAF;QACAG;QACAE;QACAD;QACAH;QACAT;IACJ;IACA,MAAMkB,gBAAgBnB,aAAaL;IACnC,qBACI,KAACV;QACGuB,KAAKA;QACLd,SAASA;QACT0B,MAAK;QACLC,cAAY1B;QACZC,MAAMA;QACL,GAAGqB,UAAU,QAAQ;YAClBN;YACAC;YACAE;YACAC;QACJ,EAAE;QACD,GAAGC,MAAM;kBAEV,cAAA,KAACG;YAAcvB,MAAMG,aAAaH;;;AAG9C;AAEA,MAAM0B,0BAA0B,CAAC3B,MAAqB4B;IAClD,MAAMC,YAAwCtC,yCAC1CK,WAAgC,CAACkB,OAAOD,oBAAQ,KAACF;YAAWE,KAAKA;YAAM,GAAGC,KAAK;YAAEd,MAAMA;;IAE3F6B,UAAUD,WAAW,GAAGA;IACxB,OAAOC;AACX;AAEA,OAAO,MAAMC,YAAY;IACrBC,aAAaJ,wBAAwB,eAAe;IACpDK,QAAQL,wBAAwB,UAAU;IAC1CM,SAASN,wBAAwB,WAAW;IAC5CO,OAAOP,wBAAwB,SAAS;IACxCQ,UAAUR,wBAAwB,YAAY;IAC9CS,SAAST,wBAAwB,WAAW;AAChD,EAAW"}
|
|
@@ -21,7 +21,7 @@ export const InputLabelInfo = factory((_props, ref)=>{
|
|
|
21
21
|
return /*#__PURE__*/ _jsx(Tooltip, {
|
|
22
22
|
label: children,
|
|
23
23
|
...others,
|
|
24
|
-
children: /*#__PURE__*/ _jsx(InfoToken.
|
|
24
|
+
children: /*#__PURE__*/ _jsx(InfoToken.Question, {
|
|
25
25
|
component: "span",
|
|
26
26
|
...getStyles('labelInfo', {
|
|
27
27
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Input/InputLabelInfo.tsx"],"sourcesContent":["import {factory, StylesApiProps, Tooltip, useProps, useStyles, type Factory, type TooltipProps} from '@mantine/core';\nimport {type MouseEvent, type ReactNode} from 'react';\nimport {InfoToken} from '../InfoToken/InfoToken.js';\nimport classes from './InputLabelInfo.module.css';\n\nexport type InputLabelInfoStylesNames = 'labelInfo';\n\nexport interface InputLabelInfoProps\n extends\n Omit<TooltipProps, 'label' | 'classNames' | 'attributes' | 'styles' | 'vars'>,\n StylesApiProps<InputLabelInfoFactory> {\n children: ReactNode;\n}\n\nexport type InputLabelInfoFactory = Factory<{\n props: InputLabelInfoProps;\n ref: HTMLSpanElement;\n stylesNames: InputLabelInfoStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<InputLabelInfoProps>;\n\nexport const InputLabelInfo = factory<InputLabelInfoFactory>((_props, ref) => {\n const props = useProps('InputLabelInfo', defaultProps, _props);\n const {classNames, className, style, styles, unstyled, vars, children, attributes, ...others} = props;\n const getStyles = useStyles<InputLabelInfoFactory>({\n name: 'InputLabelInfo',\n props,\n style,\n styles,\n unstyled,\n attributes,\n className,\n classes,\n classNames,\n vars,\n });\n return (\n <Tooltip label={children} {...others}>\n <InfoToken.
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Input/InputLabelInfo.tsx"],"sourcesContent":["import {factory, StylesApiProps, Tooltip, useProps, useStyles, type Factory, type TooltipProps} from '@mantine/core';\nimport {type MouseEvent, type ReactNode} from 'react';\nimport {InfoToken} from '../InfoToken/InfoToken.js';\nimport classes from './InputLabelInfo.module.css';\n\nexport type InputLabelInfoStylesNames = 'labelInfo';\n\nexport interface InputLabelInfoProps\n extends\n Omit<TooltipProps, 'label' | 'classNames' | 'attributes' | 'styles' | 'vars'>,\n StylesApiProps<InputLabelInfoFactory> {\n children: ReactNode;\n}\n\nexport type InputLabelInfoFactory = Factory<{\n props: InputLabelInfoProps;\n ref: HTMLSpanElement;\n stylesNames: InputLabelInfoStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<InputLabelInfoProps>;\n\nexport const InputLabelInfo = factory<InputLabelInfoFactory>((_props, ref) => {\n const props = useProps('InputLabelInfo', defaultProps, _props);\n const {classNames, className, style, styles, unstyled, vars, children, attributes, ...others} = props;\n const getStyles = useStyles<InputLabelInfoFactory>({\n name: 'InputLabelInfo',\n props,\n style,\n styles,\n unstyled,\n attributes,\n className,\n classes,\n classNames,\n vars,\n });\n return (\n <Tooltip label={children} {...others}>\n <InfoToken.Question\n component=\"span\"\n {...getStyles('labelInfo', {className, style})}\n ref={ref}\n onClick={(e: MouseEvent) => e.preventDefault()}\n />\n </Tooltip>\n );\n});\n"],"names":["factory","Tooltip","useProps","useStyles","InfoToken","classes","defaultProps","InputLabelInfo","_props","ref","props","classNames","className","style","styles","unstyled","vars","children","attributes","others","getStyles","name","label","Question","component","onClick","e","preventDefault"],"mappings":";AAAA,SAAQA,OAAO,EAAkBC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,QAAwC,gBAAgB;AAErH,SAAQC,SAAS,QAAO,4BAA4B;AACpD,OAAOC,aAAa,8BAA8B;AAiBlD,MAAMC,eAAe,CAAC;AAEtB,OAAO,MAAMC,iBAAiBP,QAA+B,CAACQ,QAAQC;IAClE,MAAMC,QAAQR,SAAS,kBAAkBI,cAAcE;IACvD,MAAM,EAACG,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,UAAU,EAAE,GAAGC,QAAO,GAAGT;IAChG,MAAMU,YAAYjB,UAAiC;QAC/CkB,MAAM;QACNX;QACAG;QACAC;QACAC;QACAG;QACAN;QACAP;QACAM;QACAK;IACJ;IACA,qBACI,KAACf;QAAQqB,OAAOL;QAAW,GAAGE,MAAM;kBAChC,cAAA,KAACf,UAAUmB,QAAQ;YACfC,WAAU;YACT,GAAGJ,UAAU,aAAa;gBAACR;gBAAWC;YAAK,EAAE;YAC9CJ,KAAKA;YACLgB,SAAS,CAACC,IAAkBA,EAAEC,cAAc;;;AAI5D,GAAG"}
|
package/package.json
CHANGED
|
@@ -68,15 +68,15 @@ const ActionIconPrimary = ActionIcon.withProps({
|
|
|
68
68
|
});
|
|
69
69
|
const ActionIconSecondary = ActionIcon.withProps({
|
|
70
70
|
variant: 'light',
|
|
71
|
-
color: 'var(--
|
|
71
|
+
vars: () => ({root: {'--ai-color': 'var(--mantine-primary-color-filled)'}}),
|
|
72
72
|
});
|
|
73
73
|
const ActionIconTertiary = ActionIcon.withProps({
|
|
74
74
|
variant: 'default',
|
|
75
|
-
color: 'var(--
|
|
75
|
+
vars: () => ({root: {'--ai-color': 'var(--mantine-primary-color-filled)'}}),
|
|
76
76
|
});
|
|
77
77
|
const ActionIconQuaternary = ActionIcon.withProps({
|
|
78
78
|
variant: 'subtle',
|
|
79
|
-
color: 'var(--
|
|
79
|
+
vars: () => ({root: {'--ai-color': 'var(--mantine-primary-color-filled)'}}),
|
|
80
80
|
});
|
|
81
81
|
|
|
82
82
|
const ActionIconDestructive = ActionIcon.withProps({variant: 'filled', color: 'var(--mantine-color-error)'});
|
|
@@ -30,13 +30,12 @@ export const Alert = polymorphicFactory<AlertOverloadFactory>((props, ref) => <M
|
|
|
30
30
|
Alert.displayName = 'Alert';
|
|
31
31
|
|
|
32
32
|
const AlertInformation = Alert.withProps({
|
|
33
|
-
color: 'gray',
|
|
34
33
|
icon: <InfoToken.Information size="md" />,
|
|
35
34
|
vars: () => ({
|
|
36
35
|
root: {
|
|
37
|
-
'--alert-color': 'var(--mantine-color-
|
|
38
|
-
'--alert-bg': 'var(--mantine-color-
|
|
39
|
-
'--alert-bd': '2px solid var(--mantine-color-
|
|
36
|
+
'--alert-color': 'var(--mantine-color-blue-filled)',
|
|
37
|
+
'--alert-bg': 'var(--mantine-color-blue-light)',
|
|
38
|
+
'--alert-bd': '2px solid var(--mantine-color-blue-light)',
|
|
40
39
|
'--alert-radius': 'var(--mantine-radius-sm)',
|
|
41
40
|
},
|
|
42
41
|
}),
|
|
@@ -47,9 +46,9 @@ const AlertAdvice = Alert.withProps({
|
|
|
47
46
|
icon: <InfoToken.Advice size="md" />,
|
|
48
47
|
vars: () => ({
|
|
49
48
|
root: {
|
|
50
|
-
'--alert-color': 'var(--mantine-
|
|
51
|
-
'--alert-bg': 'var(--mantine-
|
|
52
|
-
'--alert-bd': '2px solid var(--mantine-
|
|
49
|
+
'--alert-color': 'var(--mantine-color-violet-filled)',
|
|
50
|
+
'--alert-bg': 'var(--mantine-color-violet-light)',
|
|
51
|
+
'--alert-bd': '2px solid var(--mantine-color-violet-light)',
|
|
53
52
|
'--alert-radius': 'var(--mantine-radius-sm)',
|
|
54
53
|
},
|
|
55
54
|
}),
|
|
@@ -70,7 +69,6 @@ const AlertSuccess = Alert.withProps({
|
|
|
70
69
|
(AlertSuccess as ComponentType).displayName = 'Alert.Success';
|
|
71
70
|
|
|
72
71
|
const AlertWarning = Alert.withProps({
|
|
73
|
-
color: 'warning',
|
|
74
72
|
icon: <InfoToken.Warning size="md" />,
|
|
75
73
|
vars: () => ({
|
|
76
74
|
root: {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import {GetStylesApi, createSafeContext} from '@mantine/core';
|
|
2
|
-
import type {HeaderFactory} from './Header.js';
|
|
2
|
+
import type {HeaderFactory, HeaderVariant} from './Header.js';
|
|
3
3
|
|
|
4
4
|
export interface HeaderContextValue {
|
|
5
5
|
getStyles: GetStylesApi<HeaderFactory>;
|
|
6
|
+
variant: HeaderVariant;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
9
|
export const [HeaderProvider, useHeaderContext] = createSafeContext<HeaderContextValue>(
|
|
@@ -85,11 +85,11 @@ export type HeaderFactory = Factory<{
|
|
|
85
85
|
};
|
|
86
86
|
}>;
|
|
87
87
|
|
|
88
|
-
const defaultProps
|
|
88
|
+
const defaultProps = {
|
|
89
89
|
variant: 'primary',
|
|
90
90
|
justify: 'space-between',
|
|
91
91
|
wrap: 'nowrap',
|
|
92
|
-
}
|
|
92
|
+
} satisfies Partial<HeaderProps>;
|
|
93
93
|
|
|
94
94
|
const getSpacing = (variant: HeaderVariant) => (variant === 'secondary' ? 'xxs' : 'xs');
|
|
95
95
|
|
|
@@ -130,7 +130,7 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
|
|
|
130
130
|
(child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderRight && child.type !== HeaderDocAnchor,
|
|
131
131
|
);
|
|
132
132
|
return (
|
|
133
|
-
<HeaderProvider value={{getStyles}}>
|
|
133
|
+
<HeaderProvider value={{getStyles, variant}}>
|
|
134
134
|
<Group ref={ref} variant={variant} {...getStyles('root')} {...others}>
|
|
135
135
|
<Stack gap={getSpacing(variant)}>
|
|
136
136
|
{breadcrumbs}
|
|
@@ -1,15 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
AnchorProps,
|
|
4
|
-
CompoundStylesApiProps,
|
|
5
|
-
Factory,
|
|
6
|
-
Tooltip,
|
|
7
|
-
TooltipProps,
|
|
8
|
-
factory,
|
|
9
|
-
useProps,
|
|
10
|
-
} from '@mantine/core';
|
|
1
|
+
import {IconExternalLink} from '@coveord/plasma-react-icons';
|
|
2
|
+
import {AnchorProps, CompoundStylesApiProps, Factory, Tooltip, TooltipProps, factory, useProps} from '@mantine/core';
|
|
11
3
|
import {ReactNode} from 'react';
|
|
12
|
-
import {
|
|
4
|
+
import {ActionIcon} from '../../ActionIcon/ActionIcon.js';
|
|
13
5
|
import {useHeaderContext} from '../Header.context.js';
|
|
14
6
|
|
|
15
7
|
export type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';
|
|
@@ -43,12 +35,12 @@ export type HeaderDocAnchorFactory = Factory<{
|
|
|
43
35
|
|
|
44
36
|
const defaultProps: Partial<HeaderDocAnchorProps> = {
|
|
45
37
|
position: 'right',
|
|
46
|
-
children: <
|
|
38
|
+
children: <IconExternalLink />,
|
|
47
39
|
};
|
|
48
40
|
|
|
49
41
|
export const HeaderDocAnchor = factory<HeaderDocAnchorFactory>((_props, ref) => {
|
|
50
42
|
const props = useProps('PlasmaHeaderActions', defaultProps, _props);
|
|
51
|
-
const {className, classNames, styles, style, children, label, position, vars, ...others} = props;
|
|
43
|
+
const {className, classNames, styles, style, children, label, position, vars, size, ...others} = props;
|
|
52
44
|
|
|
53
45
|
const ctx = useHeaderContext();
|
|
54
46
|
|
|
@@ -59,15 +51,18 @@ export const HeaderDocAnchor = factory<HeaderDocAnchorFactory>((_props, ref) =>
|
|
|
59
51
|
position={position}
|
|
60
52
|
classNames={{tooltip: ctx.getStyles('docAnchorTooltip', {classNames, styles, props}).className}}
|
|
61
53
|
>
|
|
62
|
-
<
|
|
54
|
+
<ActionIcon.Tertiary
|
|
63
55
|
ref={ref}
|
|
64
|
-
|
|
56
|
+
size={ctx.variant === 'primary' ? 'lg' : 'md'}
|
|
57
|
+
component="a"
|
|
65
58
|
target="_blank"
|
|
59
|
+
rel="noopener noreferrer"
|
|
60
|
+
aria-label="external"
|
|
66
61
|
{...ctx.getStyles('docAnchor', {classNames, styles, props, style, className})}
|
|
67
62
|
{...others}
|
|
68
63
|
>
|
|
69
64
|
{children}
|
|
70
|
-
</
|
|
65
|
+
</ActionIcon.Tertiary>
|
|
71
66
|
</Tooltip>
|
|
72
67
|
);
|
|
73
68
|
});
|
|
@@ -83,7 +83,7 @@ describe('Header', () => {
|
|
|
83
83
|
</Header>,
|
|
84
84
|
);
|
|
85
85
|
|
|
86
|
-
const docLink = await screen.findByRole('link', {name: /
|
|
86
|
+
const docLink = await screen.findByRole('link', {name: /external/i});
|
|
87
87
|
expect(docLink).toHaveAttribute('href', '/some/path');
|
|
88
88
|
});
|
|
89
89
|
|
|
@@ -70,14 +70,15 @@ const colorResolver = (type: InfoTokenType): string => {
|
|
|
70
70
|
switch (type) {
|
|
71
71
|
case 'error':
|
|
72
72
|
return 'var(--mantine-color-error)';
|
|
73
|
+
case 'information':
|
|
74
|
+
return 'var(--mantine-color-blue-text)';
|
|
73
75
|
case 'advice':
|
|
74
|
-
|
|
75
|
-
return 'var(--coveo-color-text-primary)';
|
|
76
|
+
return 'var(--mantine-color-violet-text)';
|
|
76
77
|
case 'warning':
|
|
77
78
|
return 'var(--mantine-color-yellow-text)';
|
|
78
79
|
case 'success':
|
|
79
80
|
return 'var(--mantine-color-green-text)';
|
|
80
|
-
case '
|
|
81
|
+
case 'question':
|
|
81
82
|
default:
|
|
82
83
|
return 'var(--mantine-color-gray-text)';
|
|
83
84
|
}
|
|
@@ -87,14 +88,15 @@ const bgColorResolver = (type: InfoTokenType): string => {
|
|
|
87
88
|
switch (type) {
|
|
88
89
|
case 'error':
|
|
89
90
|
return 'var(--mantine-color-red-light)';
|
|
91
|
+
case 'information':
|
|
92
|
+
return 'var(--mantine-color-blue-light)';
|
|
90
93
|
case 'advice':
|
|
91
|
-
|
|
92
|
-
return 'var(--mantine-primary-color-light)';
|
|
94
|
+
return 'var(--mantine-color-violet-light)';
|
|
93
95
|
case 'warning':
|
|
94
96
|
return 'var(--mantine-color-yellow-light)';
|
|
95
97
|
case 'success':
|
|
96
98
|
return 'var(--mantine-color-green-light)';
|
|
97
|
-
case '
|
|
99
|
+
case 'question':
|
|
98
100
|
default:
|
|
99
101
|
return 'var(--mantine-color-gray-light)';
|
|
100
102
|
}
|
|
@@ -37,7 +37,7 @@ export const InputLabelInfo = factory<InputLabelInfoFactory>((_props, ref) => {
|
|
|
37
37
|
});
|
|
38
38
|
return (
|
|
39
39
|
<Tooltip label={children} {...others}>
|
|
40
|
-
<InfoToken.
|
|
40
|
+
<InfoToken.Question
|
|
41
41
|
component="span"
|
|
42
42
|
{...getStyles('labelInfo', {className, style})}
|
|
43
43
|
ref={ref}
|
|
@@ -23,7 +23,7 @@ describe('Input', () => {
|
|
|
23
23
|
);
|
|
24
24
|
|
|
25
25
|
expect(screen.getByText('Field label')).toBeVisible();
|
|
26
|
-
const infoToken = screen.getByRole('img', {name: '
|
|
26
|
+
const infoToken = screen.getByRole('img', {name: 'question'});
|
|
27
27
|
expect(infoToken).toBeVisible();
|
|
28
28
|
|
|
29
29
|
await user.hover(infoToken);
|