@coveord/plasma-mantine 55.0.4 → 55.2.0

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './action-icon';\nexport * from './blank-slate';\nexport * from './browser-preview';\nexport * from './button';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './copyToClipboard';\nexport * from './date-range-picker';\nexport * from './ellipsis-text';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './menu';\nexport * from './prompt';\nexport * from './read-only';\nexport * from './sticky-footer';\nexport * from './table';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,oBAAoB;AAClC,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,mBAAmB;AACjC,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,UAAU"}
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './action-icon';\nexport * from './blank-slate';\nexport * from './browser-preview';\nexport * from './button';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './copyToClipboard';\nexport * from './date-range-picker';\nexport * from './ellipsis-text';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './menu';\nexport * from './prompt';\nexport * from './read-only';\nexport * from './sticky-footer';\nexport * from './table';\nexport * from './child-form';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,oBAAoB;AAClC,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,mBAAmB;AACjC,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,eAAe"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "55.0.4",
+  "version": "55.2.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -42,8 +42,8 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.52.0",
-    "@coveord/plasma-react-icons": "55.0.4",
-    "@coveord/plasma-tokens": "55.0.4"
+    "@coveord/plasma-react-icons": "55.2.0",
+    "@coveord/plasma-tokens": "55.2.0"
   },
   "devDependencies": {
     "@mantine/carousel": "7.13.3",

package/src/components/child-form/ChildForm.module.css

@@ -0,0 +1,7 @@
+.paper {
+    border: 1px solid var(--mantine-color-gray-3);
+    border-radius: var(--mantine-radius-default);
+    box-shadow:
+        0 1px 0 -1px var(--mantine-color-gray-3) inset,
+        0 4px 2px -2px rgb(55 55 55 / 3%) inset;
+}

package/src/components/child-form/ChildForm.tsx

@@ -0,0 +1,70 @@
+import {
+    Collapse,
+    CollapseProps,
+    Factory,
+    Paper,
+    polymorphicFactory,
+    Stack,
+    StylesApiProps,
+    Text,
+    Title,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+import classes from './ChildForm.module.css';
+
+export type ChildFormStylesNames = 'root' | 'paper';
+
+export interface ChildFormProps extends CollapseProps, StylesApiProps<ChildFormFactory> {
+    /**
+     * Title of the child form.
+     */
+    title?: string;
+    /**
+     * Description of the child form.
+     */
+    description?: string;
+}
+
+type ChildFormFactory = Factory<{
+    props: ChildFormProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: ChildFormStylesNames;
+}>;
+
+const defaultProps: Partial<ChildFormProps> = {};
+
+export const ChildForm = polymorphicFactory<ChildFormFactory>((props, ref) => {
+    const {className, children, style, classNames, styles, unstyled, vars, title, description, ...others} = useProps(
+        'ChildForm',
+        defaultProps,
+        props,
+    );
+
+    const getStyles = useStyles<ChildFormFactory>({
+        name: 'ChildForm',
+        classes,
+        props,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+    });
+
+    return (
+        <Collapse ref={ref} {...others} {...getStyles('root')}>
+            <Paper bg="gray.0" p="md" {...getStyles('paper')}>
+                {(title || description) && (
+                    <Stack gap={0} mb="md">
+                        {title && <Title order={5}>{title}</Title>}
+                        {description && <Text c="gray.7">{description}</Text>}
+                    </Stack>
+                )}
+                <Stack gap="md">{children}</Stack>
+            </Paper>
+        </Collapse>
+    );
+});

package/src/components/child-form/__tests__/ChildForm.spec.tsx

@@ -0,0 +1,30 @@
+import {TextInput} from '@mantine/core';
+import {render, screen} from '../../../__tests__/Utils';
+import {ChildForm} from '../ChildForm';
+
+describe('ChildForm', () => {
+    it('renders the provided title and description', async () => {
+        render(<ChildForm in={true} title="This is a title" description="This is a description" />);
+
+        expect(screen.getByText(/this is a title/i)).toBeInTheDocument();
+        expect(screen.getByText(/this is a description/i)).toBeInTheDocument();
+    });
+    it('renders the content', () => {
+        render(
+            <ChildForm in={true}>
+                <TextInput label="Text input" />
+            </ChildForm>,
+        );
+
+        expect(screen.getByRole('textbox', {name: /text input/i})).toBeInTheDocument();
+    });
+    it('hides the container', () => {
+        render(
+            <ChildForm in={false}>
+                <TextInput label="Text input" />
+            </ChildForm>,
+        );
+
+        expect(screen.queryByRole('textbox', {name: /text input/i})).not.toBeInTheDocument();
+    });
+});

package/src/components/child-form/index.ts

@@ -0,0 +1 @@
+export * from './ChildForm';

package/src/components/ellipsis-text/EllipsisText.module.css

@@ -1,8 +1,13 @@
 .root {
+    display: flex;
+    width: 100%;
+}
+
+.noWrap {
     white-space: nowrap;
 }
 
-.text {
+.ellipsis {
     flex-basis: 100%;
     overflow: hidden;
     text-overflow: ellipsis;

package/src/components/ellipsis-text/EllipsisText.tsx

@@ -12,13 +12,14 @@ import {
     useStyles,
 } from '@mantine/core';
 import {ReactNode, useRef, useState} from 'react';
+import clsx from 'clsx';
 import classes from './EllipsisText.module.css';
 
 export type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';
 
 export interface EllipsisTextProps
     extends BoxProps,
-        Pick<TextProps, 'variant'>,
+        Pick<TextProps, 'variant' | 'lineClamp'>,
         Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {
     children: ReactNode;
     tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;
@@ -36,11 +37,9 @@ const defaultProps: Partial<EllipsisTextProps> = {
 };
 
 export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {
-    const {className, children, style, classNames, styles, unstyled, variant, tooltipProps, ...others} = useProps(
-        'EllipsisText',
-        defaultProps,
-        props,
-    );
+    const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} =
+        useProps('EllipsisText', defaultProps, props);
+
     const getStyles = useStyles<EllipsisTextFactory>({
         name: 'EllipsisText',
         classes,
@@ -55,6 +54,9 @@ export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref)
     const [showTooltip, setShowTooltip] = useState(false);
     const textRef = useRef<HTMLDivElement>();
 
+    const {className: rootClass, ...rootStyles} = getStyles('root');
+    const {className: textClass, ...textStyles} = getStyles('text');
+
     return (
         <Box
             ref={ref}
@@ -64,13 +66,20 @@ export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref)
                 }
             }}
             onMouseLeave={() => setShowTooltip(false)}
-            display="flex"
-            w="100%"
-            {...getStyles('root')}
+            className={clsx(rootClass, {[classes.noWrap]: !lineClamp})}
+            {...rootStyles}
             {...others}
         >
             <Tooltip label={children} opened={showTooltip} {...tooltipProps} {...getStyles('tooltip')}>
-                <Text variant={variant} ref={textRef} {...getStyles('text')}>
+                <Text
+                    span
+                    inherit
+                    variant={variant}
+                    ref={textRef}
+                    className={clsx(textClass, {[classes.ellipsis]: !lineClamp})}
+                    {...(!!lineClamp && {lineClamp: lineClamp})}
+                    {...textStyles}
+                >
                     {children}
                 </Text>
             </Tooltip>
@@ -78,4 +87,4 @@ export const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref)
     );
 });
 
-const isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth;
+const isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;

package/src/components/index.ts

@@ -14,3 +14,4 @@ export * from './prompt';
 export * from './read-only';
 export * from './sticky-footer';
 export * from './table';
+export * from './child-form';