@linagora/twake-mui 11.1.0 → 11.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [11.3.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.2.0...@linagora/twake-mui@11.3.0) (2026-10-08)
+
+
+### Features
+
+* **twake-mui:** Migrate ProgressionBanner from cozy-ui ([f3fb9a1](https://github.com/linagora/twake-ui/commit/f3fb9a11f9f91a15a5cb27d399c1956bcc1927c3))
+
+# @linagora/twake-mui [11.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.1.0...@linagora/twake-mui@11.2.0) (2026-10-08)
+
+
+### Features
+
+* **twake-mui:** Migrate Markdown from cozy-ui ([120d160](https://github.com/linagora/twake-ui/commit/120d1608e7c7ef4d1d624293b6c3d49d0e27a281))
+
 # @linagora/twake-mui [11.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.0.0...@linagora/twake-mui@11.1.0) (2026-10-08)
 
 

package/dist/components/Markdown/Markdown.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Markdown from './index';
+declare const meta: Meta<typeof Markdown>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/Markdown/Markdown.stories.js

@@ -0,0 +1,78 @@
+import Markdown from './index';
+const content = `
+# Demo
+
+This is a text to test all possibilities of markdown.
+
+## Headers
+
+# H1 Header
+## H2 Header
+### H3 Header
+#### H4 Header
+##### H5 Header
+###### H6 Header
+
+## Paragraphs
+
+I really like using Markdown.
+
+I think I'll use it to format all of my documents from now on.
+
+## Emphasis
+
+_Italic Text_
+
+***Bold Text***
+
+__Bold and Italic Text__
+
+~~Strikethrough~~
+
+<u>Underline</u>
+
+## Lists
+
+1. Ordered List Item 1
+2. Ordered List Item 2
+3. Ordered List Item 3
+
+- Unordered List Item 1
+- Unordered List Item 2
+- Unordered List Item 3
+
+## Links
+
+[Link to GitHub](https://github.com/linagora/twake-ui)
+
+## Images
+
+![Mountains](https://picsum.photos/id/1018/400/200 "Mountains")
+
+## Code
+
+Inline code: \`const variable = 'value';\`
+
+Block code:
+\`\`\`javascript function add(a, b) { return a + b; }\`\`\`
+
+## Blockquotes
+
+> This is a blockquote.
+`;
+const meta = {
+    title: 'Markdown',
+    component: Markdown,
+    tags: ['autodocs'],
+    argTypes: {
+        content: { control: 'text' }
+    }
+};
+export default meta;
+export const Default = {
+    args: { content }
+};
+export const Screenshot = {
+    tags: ['argos'],
+    args: { content }
+};

package/dist/components/Markdown/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MarkdownProps {
+    content: string;
+}
+declare const Markdown: React.FC<MarkdownProps>;
+export default Markdown;

package/dist/components/Markdown/index.js

@@ -0,0 +1,21 @@
+import { Link, Typography } from '@mui/material';
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+const makeHeading = (variant) => {
+    const Heading = ({ children }) => (React.createElement(Typography, { variant: variant, sx: { mb: 2 } }, children));
+    return Heading;
+};
+const components = {
+    a: ({ children, href }) => (React.createElement(Link, { href: href, rel: "noreferrer", target: "_blank" }, children)),
+    p: ({ children }) => (React.createElement(Typography, { variant: "body1", sx: { mb: 2 } }, children)),
+    h1: makeHeading('h1'),
+    h2: makeHeading('h2'),
+    h3: makeHeading('h3'),
+    h4: makeHeading('h4'),
+    h5: makeHeading('h5'),
+    h6: makeHeading('h6')
+};
+const remarkPlugins = [remarkGfm];
+const Markdown = ({ content }) => (React.createElement(ReactMarkdown, { remarkPlugins: remarkPlugins, components: components }, content));
+export default Markdown;

package/dist/components/ProgressionBanner/ProgressionBanner.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import ProgressionBanner from './index';
+declare const meta: Meta<typeof ProgressionBanner>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;

package/dist/components/ProgressionBanner/ProgressionBanner.stories.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-console */
+import { CloudSync2, Icon } from '@linagora/twake-icons';
+import { Button, Stack } from '@mui/material';
+import React from 'react';
+import ProgressionBanner from './index';
+const icon = React.createElement(Icon, { icon: CloudSync2 });
+const errorLight = 'var(--twake-palette-error-light)';
+const manageButton = (React.createElement(Button, { variant: "text", color: "primary", onClick: () => console.log('clicked') }, "Manage your storage space"));
+const meta = {
+    title: 'ProgressionBanner',
+    component: ProgressionBanner,
+    tags: ['autodocs'],
+    argTypes: {
+        value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
+        text: { control: 'text' },
+        progressBar: { control: 'boolean' },
+        color: { control: 'color' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        value: 25,
+        text: '4 remaining items',
+        progressBar: true,
+        icon
+    }
+};
+const Row = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    children));
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Row, { title: "Determinate" },
+            React.createElement(ProgressionBanner, { value: 25, text: "4 remaining items", icon: icon })),
+        React.createElement(Row, { title: "Indeterminate" },
+            React.createElement(ProgressionBanner, { text: "4 remaining items", icon: icon })),
+        React.createElement(Row, { title: "Without progress bar" },
+            React.createElement(ProgressionBanner, { progressBar: false, text: "4 remaining items", icon: icon })),
+        React.createElement(Row, { title: "With button" },
+            React.createElement(ProgressionBanner, { value: 25, text: "Storage limit nearly reached", icon: icon, button: manageButton })),
+        React.createElement(Row, { title: "Custom color" },
+            React.createElement(ProgressionBanner, { value: 25, color: errorLight, text: "Storage limit nearly reached", icon: icon, button: manageButton })),
+        React.createElement(Row, { title: "Default icon" },
+            React.createElement(ProgressionBanner, { value: 25, text: "4 remaining items" }))))
+};

package/dist/components/ProgressionBanner/ProgressionBannerProgress.d.ts

@@ -0,0 +1,2 @@
+declare const ProgressionBannerProgress: import("@emotion/styled").StyledComponent<import("@mui/material").LinearProgressProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export default ProgressionBannerProgress;

package/dist/components/ProgressionBanner/ProgressionBannerProgress.js

@@ -0,0 +1,7 @@
+import { LinearProgress, styled } from '@mui/material';
+const ProgressionBannerProgress = styled(LinearProgress)({
+    backgroundColor: 'transparent',
+    height: 2,
+    marginTop: -2
+});
+export default ProgressionBannerProgress;

package/dist/components/ProgressionBanner/ProgressionBannerRoot.d.ts

@@ -0,0 +1,4 @@
+declare const ProgressionBannerRoot: import("@emotion/styled").StyledComponent<import("@mui/material").AlertProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    background?: string;
+}, {}, {}>;
+export default ProgressionBannerRoot;

package/dist/components/ProgressionBanner/ProgressionBannerRoot.js

@@ -0,0 +1,21 @@
+import { Alert, alertClasses, styled } from '@mui/material';
+const ProgressionBannerRoot = styled(Alert, {
+    shouldForwardProp: prop => prop !== 'background'
+})(({ theme, background }) => ({
+    borderRadius: 0,
+    // outranks the severity tint, which the dark scheme re-applies after this rule
+    '&&': {
+        backgroundColor: background ?? theme.vars.palette.background.contrast
+    },
+    [theme.breakpoints.down('md')]: {
+        flexWrap: 'wrap',
+        // keeps the message beside the icon so only the action wraps
+        [`& .${alertClasses.message}`]: { flexBasis: 0 },
+        [`& .${alertClasses.action}`]: {
+            width: '100%',
+            paddingLeft: 0,
+            justifyContent: 'end'
+        }
+    }
+}));
+export default ProgressionBannerRoot;

package/dist/components/ProgressionBanner/index.d.ts

@@ -0,0 +1,14 @@
+import { AlertProps } from '@mui/material';
+import React from 'react';
+export interface ProgressionBannerProps extends Omit<AlertProps, 'color' | 'children'> {
+    /** Percentage of progression, between 0 and 100. Without it the bar is indeterminate. */
+    value?: number;
+    text?: React.ReactNode;
+    /** Rendered as the alert action */
+    button?: React.ReactNode;
+    progressBar?: boolean;
+    /** Background colour of the banner, any CSS colour */
+    color?: string;
+}
+declare const ProgressionBanner: React.FC<ProgressionBannerProps>;
+export default ProgressionBanner;

package/dist/components/ProgressionBanner/index.js

@@ -0,0 +1,11 @@
+import { Typography } from '@mui/material';
+import React from 'react';
+import ProgressionBannerProgress from './ProgressionBannerProgress';
+import ProgressionBannerRoot from './ProgressionBannerRoot';
+const ProgressionBanner = ({ value, text, icon, button, progressBar = true, color, ...props }) => (React.createElement(React.Fragment, null,
+    React.createElement(ProgressionBannerRoot, { icon: React.isValidElement(icon)
+            ? React.cloneElement(icon, { size: icon.props.size ?? 32 })
+            : icon, action: button, background: color, ...props },
+        React.createElement(Typography, { component: "span", variant: "h6" }, text)),
+    progressBar && (React.createElement(ProgressionBannerProgress, { variant: value ? 'determinate' : 'indeterminate', value: value }))));
+export default ProgressionBanner;

package/dist/index.d.ts

@@ -49,7 +49,9 @@ export { default as ListItemText } from './components/ListItemText';
 export { default as ListItemSkeleton } from './components/ListItemSkeleton';
 export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
+export { default as Markdown } from './components/Markdown';
 export { default as PointerAlert } from './components/PointerAlert';
+export { default as ProgressionBanner } from './components/ProgressionBanner';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
 export { SearchBar, default as SearchBarDefault } from './components/SearchBar';
@@ -109,6 +111,7 @@ export type { OverlayBox, OverlayRegion } from './components/SpaceOverlay/region
 export type { OverlayFrameProps } from './components/SpaceOverlay/OverlayFrame';
 export type { DialogProps, DialogSize } from './components/Dialog';
 export type { PointerAlertProps, PointerAlertDirection } from './components/PointerAlert';
+export type { ProgressionBannerProps } from './components/ProgressionBanner';
 export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './components/Empty';
 export type { DropdownButtonProps } from './components/DropdownButton';
 export type { DropdownTextProps, DropdownTextVariant } from './components/DropdownText';
@@ -119,6 +122,7 @@ export type { ListItemTextProps } from './components/ListItemText';
 export type { ListItemSkeletonProps } from './components/ListItemSkeleton';
 export type { ListSkeletonProps } from './components/ListSkeleton';
 export type { ListSubheaderProps } from './components/ListSubheader';
+export type { MarkdownProps } from './components/Markdown';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';
 export type { SearchBarProps } from './components/SearchBar/types';

package/dist/index.js

@@ -52,7 +52,9 @@ export { default as ListItemText } from './components/ListItemText';
 export { default as ListItemSkeleton } from './components/ListItemSkeleton';
 export { default as ListSkeleton } from './components/ListSkeleton';
 export { default as ListSubheader } from './components/ListSubheader';
+export { default as Markdown } from './components/Markdown';
 export { default as PointerAlert } from './components/PointerAlert';
+export { default as ProgressionBanner } from './components/ProgressionBanner';
 export { Tabs, default as TabsDefault } from './components/Tabs';
 export { Switch, default as SwitchDefault } from './components/Switch';
 export { SearchBar, default as SearchBarDefault } from './components/SearchBar';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "11.1.0",
+  "version": "11.3.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -66,8 +66,10 @@
     "classnames": "^2.5.1",
     "cozy-minilog": "^3.10.1",
     "pdf-lib": "^1.17.1",
+    "react-markdown": "^10.1.0",
     "react-use-measure": "2.1.7",
     "react-virtuoso": "4.13.0",
+    "remark-gfm": "^4.0.1",
     "rooks": "8.4.0"
   },
   "devDependencies": {