@coveord/plasma-mantine 52.15.0 → 52.16.0

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.d.ts

@@ -0,0 +1,11 @@
+export interface HeaderDocAnchorStylesParams {
+}
+export declare const useStyles: (params: HeaderDocAnchorStylesParams, options?: import("@mantine/core").UseStylesOptions<string>) => {
+    classes: {
+        tooltip: string;
+        anchor: string;
+    };
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+//# sourceMappingURL=HeaderDocAnchor.styles.d.ts.map

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderDocAnchor.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,2BAA2B;CAAG;AAE/C,eAAO,MAAM,SAAS;;;;;;;CAMnB,CAAC"}

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.js

@@ -0,0 +1,14 @@
+import { _ as _object_destructuring_empty } from "@swc/helpers/_/_object_destructuring_empty";
+import { createStyles } from "@mantine/core";
+export var useStyles = createStyles(function(theme, param) {
+    var ref = _object_destructuring_empty(param);
+    return {
+        tooltip: {},
+        anchor: {
+            marginLeft: theme.spacing.xs,
+            verticalAlign: "middle"
+        }
+    };
+});
+
+//# sourceMappingURL=HeaderDocAnchor.styles.js.map

package/dist/esm/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface HeaderDocAnchorStylesParams {}\n\nexport const useStyles = createStyles((theme, {}: HeaderDocAnchorStylesParams) => ({\n    tooltip: {},\n    anchor: {\n        marginLeft: theme.spacing.xs,\n        verticalAlign: 'middle',\n    },\n}));\n"],"names":["createStyles","useStyles","theme","tooltip","anchor","marginLeft","spacing","xs","verticalAlign"],"mappings":";AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAI3C,OAAO,IAAMC,YAAYD,aAAa,SAACE;QAAO;WAAqC;QAC/EC,SAAS,CAAC;QACVC,QAAQ;YACJC,YAAYH,MAAMI,OAAO,CAACC,EAAE;YAC5BC,eAAe;QACnB;IACJ;GAAI"}

package/dist/esm/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
   <div
-    class="mantine-Group-root mantine-1arn2xu"
+    class="mantine-Group-root mantine-PlasmaHeader-root mantine-15aa8um"
   >
     <div
       class="mantine-Stack-root mantine-1178y6y"
@@ -12,38 +12,38 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         class="mantine-Breadcrumbs-root mantine-1ujbd2v"
       >
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1yycs9g"
+          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
         >
           One
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-c5usyo"
+          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1yycs9g"
+          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
         >
           Two
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-c5usyo"
+          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1yycs9g"
+          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
         >
           Three
         </a>
       </div>
       <h1
-        class="mantine-Text-root mantine-Title-root mantine-m67b81"
+        class="mantine-Text-root mantine-Title-root mantine-PlasmaHeader-title mantine-1o7jx33"
       >
         Title
       </h1>
       <div
-        class="mantine-Text-root mantine-1w25z6f"
+        class="mantine-Text-root mantine-PlasmaHeader-description mantine-52dv7d"
       />
     </div>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.15.0",
+  "version": "52.16.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -41,8 +41,8 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.41.0",
-    "@coveord/plasma-react-icons": "52.15.0",
-    "@coveord/plasma-tokens": "52.15.0"
+    "@coveord/plasma-react-icons": "52.16.0",
+    "@coveord/plasma-tokens": "52.16.0"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
@@ -75,14 +75,14 @@
     "jest-environment-jsdom": "29.6.3",
     "jest-junit": "16.0.0",
     "npm-run-all": "4.1.5",
-    "publint": "0.2.1",
+    "publint": "0.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.1",
     "tslib": "2.6.2",
     "typescript": "5.1.6",
     "vitest": "0.34.2",
-    "eslint-config-plasma": "52.15.0"
+    "eslint-config-plasma": "52.16.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.0",

package/src/components/header/Header.styles.ts

@@ -0,0 +1,20 @@
+import {createStyles} from '@mantine/core';
+
+export interface HeaderStylesParams {
+    variant?: 'page' | 'modal';
+}
+
+export const useStyles = createStyles((theme, {variant}: HeaderStylesParams) => ({
+    root: {
+        padding: variant === 'page' ? theme.spacing.xl : undefined,
+        paddingBottom: variant === 'page' ? theme.spacing.lg : undefined,
+    },
+    title: {
+        wordBreak: 'break-word',
+        color: variant === 'page' ? theme.colors.gray[5] : undefined,
+    },
+    description: {
+        color: theme.colors.gray[6],
+    },
+    divider: {},
+}));

package/src/components/header/Header.tsx

@@ -1,8 +1,24 @@
-import {QuestionSize16Px} from '@coveord/plasma-react-icons';
-import {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';
-import {Children, FunctionComponent, ReactElement, ReactNode} from 'react';
+import {
+    DefaultProps,
+    Divider,
+    Group,
+    GroupProps,
+    Selectors,
+    Stack,
+    Text,
+    Title,
+    useComponentDefaultProps,
+} from '@mantine/core';
+import {Children, ReactElement, ReactNode} from 'react';
 
-export interface HeaderProps extends DefaultProps {
+import {HeaderStylesParams, useStyles} from './Header.styles';
+import {HeaderActions} from './HeaderActions/HeaderActions';
+import {HeaderBreadcrumbs} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+import {HeaderDocAnchor} from './HeaderDocAnchor/HeaderDocAnchor';
+
+type HeaderStylesNames = Selectors<typeof useStyles>;
+
+export interface HeaderProps extends Omit<GroupProps, 'styles'>, DefaultProps<HeaderStylesNames, HeaderStylesParams> {
     /**
      * The description text displayed inside the header underneath the title
      */
@@ -30,7 +46,17 @@ interface HeaderType {
     DocAnchor: typeof HeaderDocAnchor;
 }
 
-export const Header: HeaderType = ({description, borderBottom, children, variant = 'page', ...others}) => {
+const defaultProps: Partial<HeaderProps> = {
+    variant: 'page',
+    position: 'apart',
+    noWrap: true,
+};
+
+export const Header: HeaderType = (props: HeaderProps) => {
+    const {classNames, styles, unstyled, className, description, borderBottom, variant, children, ...others} =
+        useComponentDefaultProps('PlasmaHeader', defaultProps, props);
+    const {classes, cx} = useStyles({variant}, {name: 'PlasmaHeader', classNames, styles, unstyled});
+
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);
     const actions = convertedChildren.find((child) => child.type === HeaderActions);
@@ -40,67 +66,24 @@ export const Header: HeaderType = ({description, borderBottom, children, variant
     );
     return (
         <>
-            <Group
-                position="apart"
-                p={variant === 'page' ? 'xl' : undefined}
-                pb={variant === 'page' ? 'lg' : undefined}
-                noWrap
-                {...others}
-            >
+            <Group className={cx(className, classes.root)} {...others}>
                 <Stack spacing={0}>
                     {breadcrumbs}
-                    <Title
-                        order={variant === 'page' ? 1 : 3}
-                        color={variant === 'page' ? 'gray.5' : undefined}
-                        sx={{wordBreak: 'break-word'}}
-                    >
+                    <Title order={variant === 'page' ? 1 : 3} className={classes.title}>
                         {otherChildren}
                         {docAnchor}
                     </Title>
-                    <Text size={variant === 'page' ? 'md' : 'sm'} color="gray.6">
+                    <Text className={classes.description} size={variant === 'page' ? 'md' : 'sm'}>
                         {description}
                     </Text>
                 </Stack>
                 {actions}
             </Group>
-            {borderBottom ? <Divider size="xs" /> : null}
+            {borderBottom ? <Divider className={classes.divider} size="xs" /> : null}
         </>
     );
 };
 
-const HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (
-    <Breadcrumbs
-        styles={(theme) => ({
-            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},
-            separator: {color: theme.colors.gray[5]},
-        })}
-    >
-        {children}
-    </Breadcrumbs>
-);
-
-const HeaderActions: FunctionComponent<{children: ReactNode}> = ({children}) => <Group spacing="sm">{children}</Group>;
-
-export interface HeaderDocAnchorProps {
-    /**
-     * A href pointing to documentation related to the current panel.
-     * When provided, an info icon is rendered next to the title as link to this documentation
-     */
-    href: string;
-    /**
-     * The tooltip text shown when hovering over the doc link icon
-     */
-    label?: string;
-}
-
-const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (
-    <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position="right">
-        <Anchor inline href={docLink} target="_blank" ml="xs" style={{verticalAlign: 'middle'}}>
-            <QuestionSize16Px height={16} />
-        </Anchor>
-    </Tooltip>
-);
-
 Header.Breadcrumbs = HeaderBreadcrumbs;
 Header.Actions = HeaderActions;
 Header.DocAnchor = HeaderDocAnchor;

package/src/components/header/HeaderActions/HeaderActions.styles.ts

@@ -0,0 +1,7 @@
+import {createStyles} from '@mantine/core';
+
+export interface HeaderActionsStylesParams {}
+
+export const useStyles = createStyles((theme, {}: HeaderActionsStylesParams) => ({
+    root: {},
+}));

package/src/components/header/HeaderActions/HeaderActions.tsx

@@ -0,0 +1,26 @@
+import {DefaultProps, Group, GroupProps, Selectors, useComponentDefaultProps} from '@mantine/core';
+import {FunctionComponent} from 'react';
+import {HeaderActionsStylesParams, useStyles} from './HeaderActions.styles';
+
+type HeaderActionsStylesNames = Selectors<typeof useStyles>;
+
+export type HeaderActionsProps = GroupProps & DefaultProps<HeaderActionsStylesNames, HeaderActionsStylesParams>;
+
+const defaultProps: Partial<HeaderActionsProps> = {
+    spacing: 'sm',
+};
+
+export const HeaderActions: FunctionComponent<HeaderActionsProps> = (props: HeaderActionsProps) => {
+    const {classNames, styles, unstyled, className, children, ...others} = useComponentDefaultProps(
+        'PlasmaHeaderActions',
+        defaultProps,
+        props,
+    );
+    const {classes, cx} = useStyles({}, {name: 'PlasmaHeaderActions', classNames, styles, unstyled});
+
+    return (
+        <Group className={cx(className, classes.root)} {...others}>
+            {children}
+        </Group>
+    );
+};

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.styles.ts

@@ -0,0 +1,8 @@
+import {createStyles} from '@mantine/core';
+
+export interface HeaderBreadcrumbsStylesParams {}
+
+export const useStyles = createStyles((theme, {}: HeaderBreadcrumbsStylesParams) => ({
+    breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},
+    separator: {color: theme.colors.gray[5]},
+}));

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx

@@ -0,0 +1,31 @@
+import {Breadcrumbs, BreadcrumbsProps, DefaultProps, Selectors} from '@mantine/core';
+import {FunctionComponent} from 'react';
+import {HeaderBreadcrumbsStylesParams, useStyles} from './HeaderBreadcrumbs.styles';
+
+type HeaderBreadcrumbsStylesNames = Selectors<typeof useStyles>;
+
+export type HeaderBreadcrumbsProps = BreadcrumbsProps &
+    DefaultProps<HeaderBreadcrumbsStylesNames, HeaderBreadcrumbsStylesParams>;
+
+export const HeaderBreadcrumbs: FunctionComponent<HeaderBreadcrumbsProps> = ({
+    classNames,
+    styles,
+    unstyled,
+    children,
+    ...others
+}) => {
+    const {classes} = useStyles(
+        {},
+        {
+            name: 'PlasmaHeaderBreadcrumbs',
+            classNames,
+            styles,
+            unstyled,
+        },
+    );
+    return (
+        <Breadcrumbs classNames={{breadcrumb: classes.breadcrumb, separator: classes.separator}} {...others}>
+            {children}
+        </Breadcrumbs>
+    );
+};

package/src/components/header/HeaderDocAnchor/HeaderDocAnchor.styles.ts

@@ -0,0 +1,11 @@
+import {createStyles} from '@mantine/core';
+
+export interface HeaderDocAnchorStylesParams {}
+
+export const useStyles = createStyles((theme, {}: HeaderDocAnchorStylesParams) => ({
+    tooltip: {},
+    anchor: {
+        marginLeft: theme.spacing.xs,
+        verticalAlign: 'middle',
+    },
+}));

package/src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx

@@ -0,0 +1,55 @@
+import {QuestionSize16Px} from '@coveord/plasma-react-icons';
+import {Anchor, DefaultProps, Selectors, Tooltip, TooltipProps, useComponentDefaultProps} from '@mantine/core';
+import {FunctionComponent, ReactNode} from 'react';
+import {HeaderDocAnchorStylesParams, useStyles} from './HeaderDocAnchor.styles';
+
+type HeaderDocAnchorStylesNames = Selectors<typeof useStyles>;
+
+const defaultProps: Partial<HeaderDocAnchorProps> = {
+    position: 'right',
+    children: <QuestionSize16Px height={16} />,
+};
+
+export interface HeaderDocAnchorProps
+    extends Pick<TooltipProps, 'position'>,
+        DefaultProps<HeaderDocAnchorStylesNames, HeaderDocAnchorStylesParams> {
+    /**
+     * A href pointing to documentation related to the current panel.
+     * When provided, an info icon is rendered next to the title as link to this documentation
+     */
+    href: string;
+    /**
+     * The tooltip text shown when hovering over the doc link icon
+     */
+    label?: string;
+    /**
+     * React component to add the tooltip and anchor on
+     */
+    children?: ReactNode;
+}
+
+export const HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = (props: HeaderDocAnchorProps) => {
+    const {
+        classNames,
+        styles,
+        unstyled,
+        className,
+        children,
+        href: docLink,
+        label: docLinkTooltipLabel,
+        ...others
+    } = useComponentDefaultProps('PlasmaHeaderActions', defaultProps, props);
+    const {classes, cx} = useStyles({}, {name: 'PlasmaHeaderActions', classNames, styles, unstyled});
+    return (
+        <Tooltip
+            className={cx(className, classes.tooltip)}
+            label={docLinkTooltipLabel}
+            disabled={!docLinkTooltipLabel}
+            {...others}
+        >
+            <Anchor className={classes.anchor} inline href={docLink} target="_blank">
+                {children}
+            </Anchor>
+        </Tooltip>
+    );
+};

package/src/components/header/__tests__/Header.spec.tsx

@@ -10,7 +10,7 @@ describe('Header', () => {
         const header = screen.getByRole('heading');
         expect(header).toMatchInlineSnapshot(`
           <h1
-            class="mantine-Text-root mantine-Title-root mantine-m67b81"
+            class="mantine-Text-root mantine-Title-root mantine-PlasmaHeader-title mantine-1o7jx33"
           >
             child
           </h1>

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
   <div
-    class="mantine-Group-root mantine-1arn2xu"
+    class="mantine-Group-root mantine-PlasmaHeader-root mantine-15aa8um"
   >
     <div
       class="mantine-Stack-root mantine-1178y6y"
@@ -12,38 +12,38 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         class="mantine-Breadcrumbs-root mantine-1ujbd2v"
       >
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1yycs9g"
+          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
         >
           One
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-c5usyo"
+          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1yycs9g"
+          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
         >
           Two
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-c5usyo"
+          class="mantine-Text-root mantine-PlasmaHeaderBreadcrumbs-separator mantine-Breadcrumbs-separator mantine-1y8084r"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1yycs9g"
+          class="mantine-Text-root mantine-Anchor-root mantine-PlasmaHeaderBreadcrumbs-breadcrumb mantine-Breadcrumbs-breadcrumb mantine-1p2lvqc"
         >
           Three
         </a>
       </div>
       <h1
-        class="mantine-Text-root mantine-Title-root mantine-m67b81"
+        class="mantine-Text-root mantine-Title-root mantine-PlasmaHeader-title mantine-1o7jx33"
       >
         Title
       </h1>
       <div
-        class="mantine-Text-root mantine-1w25z6f"
+        class="mantine-Text-root mantine-PlasmaHeader-description mantine-52dv7d"
       />
     </div>
   </div>