feat(mantine): adjust demos

packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultLong.demo.tsx

@@ -0,0 +1,4 @@
+import {EllipsisText} from '@coveord/plasma-mantine';
+
+const Demo = () => <EllipsisText maw={250}>This is a very long text that is truncated with an ellipsis.</EllipsisText>;
+export default Demo;

packages/website/src/examples/layout/EllipsisText/EllipsisTextDefaultShort.demo.tsx

@@ -0,0 +1,4 @@
+import {EllipsisText} from '@coveord/plasma-mantine';
+
+const Demo = () => <EllipsisText maw={250}>This short text is not truncated.</EllipsisText>;
+export default Demo;

packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampLong.demo.tsx

@@ -0,0 +1,9 @@
+import {EllipsisText} from '@coveord/plasma-mantine';
+
+const Demo = () => (
+    <EllipsisText maw={250} lineClamp={2}>
+        This is a very long text that is truncated with an ellipsis since clamp limit is not enough to display the full
+        text.
+    </EllipsisText>
+);
+export default Demo;

packages/website/src/examples/layout/EllipsisText/EllipsisTextLineClampShort.demo.tsx

@@ -0,0 +1,8 @@
+import {EllipsisText} from '@coveord/plasma-mantine';
+
+const Demo = () => (
+    <EllipsisText maw={250} lineClamp={2}>
+        This is a very long text that is not truncated since clamp limit is not reached.
+    </EllipsisText>
+);
+export default Demo;

packages/website/src/examples/layout/EllipsisText/EllipsisTextNoWrapContainer.demo.tsx

@@ -0,0 +1,11 @@
+import {EllipsisText} from '@coveord/plasma-mantine';
+import {Chip} from '@mantine/core';
+
+const Demo = () => (
+    <Chip>
+        <EllipsisText maw={250}>
+            This is a very long text within a special container is truncated with an ellipsis.
+        </EllipsisText>
+    </Chip>
+);
+export default Demo;

packages/website/src/pages/layout/EllipsisText.tsx

@@ -1,6 +1,11 @@
 import {EllipsisTextMetadata} from '@coveord/plasma-components-props-analyzer';
-import EllipsisTextDemo from '@examples/layout/EllipsisText/EllipsisText.demo?demo';
+import EllipsisTextDefaultLongDemo from '@examples/layout/EllipsisText/EllipsisTextDefaultLong.demo?demo';
+import EllipsisTextDefaultShortDemo from '@examples/layout/EllipsisText/EllipsisTextDefaultShort.demo?demo';
+import EllipsisTextLineClampLongDemo from '@examples/layout/EllipsisText/EllipsisTextLineClampLong.demo?demo';
+import EllipsisTextLineClampShortDemo from '@examples/layout/EllipsisText/EllipsisTextLineClampShort.demo?demo';
+import EllipsisTextNoWrapContainerDemo from '@examples/layout/EllipsisText/EllipsisTextNoWrapContainer.demo?demo';
 
+import {Stack} from '@mantine/core';
 import {PageLayout} from '../../building-blocs/PageLayout';
 
 const Page = () => (
@@ -11,8 +16,18 @@ const Page = () => (
         description="Allows to display text that will automatically truncate and shows a tooltip on hover if it overflows the max width."
         id="EllipsisText"
         propsMetadata={EllipsisTextMetadata}
-        demo={<EllipsisTextDemo />}
-    />
+        demo={<EllipsisTextDefaultLongDemo />}
+    >
+        <div className="plasma-page-layout__section">
+            <Stack>
+                <EllipsisTextDefaultLongDemo title="Default ellipsis" />
+                <EllipsisTextDefaultShortDemo title="Default no ellipsis" />
+                <EllipsisTextNoWrapContainerDemo title="Default in no wrap container" />
+                <EllipsisTextLineClampLongDemo title="Line clamp ellipsis" />
+                <EllipsisTextLineClampShortDemo title="Line clamp no ellipsis" />
+            </Stack>
+        </div>
+    </PageLayout>
 );
 
 export default Page;