@linagora/twake-mui 11.2.0 → 11.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @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)
 
 

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

@@ -51,6 +51,7 @@ 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';
@@ -110,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';

package/dist/index.js

@@ -54,6 +54,7 @@ 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.2.0",
+  "version": "11.3.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",