@linagora/twake-mui 11.2.0 → 11.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [11.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.3.0...@linagora/twake-mui@11.4.0) (2026-10-08)
+
+
+### Features
+
+* **twake-mui:** Migrate ColorList from cozy-ui ([870fd92](https://github.com/linagora/twake-ui/commit/870fd9265f0a23904570e910644a74700cd41178))
+
+# @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/ColorList/ColorList.stories.d.ts

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

package/dist/components/ColorList/ColorList.stories.js

@@ -0,0 +1,48 @@
+import { Box, Stack } from '@mui/material';
+import React, { useState } from 'react';
+import { COLORS } from './helpers';
+import ColorList from './index';
+const meta = {
+    title: 'ColorList',
+    component: ColorList,
+    parameters: { layout: 'padded' },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: [undefined, 'small', 'medium']
+        },
+        selectedColor: {
+            control: 'select',
+            options: [undefined, ...COLORS]
+        },
+        customColorProps: { control: 'object' }
+    }
+};
+export default meta;
+const SelectableColorList = props => {
+    const [selectedColor, setSelectedColor] = useState(props.selectedColor);
+    return (React.createElement(ColorList, { ...props, selectedColor: selectedColor, onClick: setSelectedColor }));
+};
+export const Default = {
+    args: {
+        customColorProps: { enabled: true }
+    },
+    render: args => (React.createElement(Box, { sx: { width: args.size === 'medium' ? '100%' : { xs: '100%', md: 200 } } },
+        React.createElement(SelectableColorList, { key: args.selectedColor, ...args })))
+};
+const Section = ({ title, width, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    React.createElement(Box, { sx: { width } }, children)));
+const customColorProps = { enabled: true };
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Section, { title: "Small", width: 200 },
+            React.createElement(ColorList, { size: "small", selectedColor: COLORS[4], customColorProps: customColorProps })),
+        React.createElement(Section, { title: "Medium" },
+            React.createElement(ColorList, { size: "medium", selectedColor: COLORS[4], customColorProps: customColorProps })),
+        React.createElement(Section, { title: "Without custom color", width: 200 },
+            React.createElement(ColorList, { size: "small" }))))
+};

package/dist/components/ColorList/helpers.d.ts

@@ -0,0 +1 @@
+export declare const COLORS: string[];

package/dist/components/ColorList/helpers.js

@@ -0,0 +1,22 @@
+export const COLORS = [
+    '#273891',
+    '#7E57E3',
+    '#9E83E8',
+    '#91CEF6',
+    '#2D83FF', // file-folder color, don't remove it
+    '#006BD8',
+    '#038199',
+    '#51B588',
+    '#457D6C',
+    '#1EBBCC',
+    '#E0465C',
+    '#ED20A4',
+    '#ED768D',
+    '#B85B17',
+    '#EDA91D',
+    '#BA8144',
+    '#ED916B',
+    '#EDC661',
+    '#131326',
+    '#646580'
+];

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

@@ -0,0 +1,29 @@
+import { ImageListProps } from '@mui/material';
+import React from 'react';
+declare const sizes: {
+    small: {
+        avatar: number;
+        icon: number;
+        cols: number;
+        gap: number;
+    };
+    medium: {
+        avatar: number;
+        icon: number;
+        cols: number;
+        gap: number;
+    };
+};
+export type ColorListSize = keyof typeof sizes;
+export interface ColorListProps extends Omit<ImageListProps, 'children' | 'onClick'> {
+    /** Defaults to `medium` on mobile and `small` otherwise */
+    size?: ColorListSize;
+    selectedColor?: string;
+    customColorProps?: {
+        enabled?: boolean;
+        onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    };
+    onClick?: (color: string) => void;
+}
+declare const ColorList: React.FC<ColorListProps>;
+export default ColorList;

package/dist/components/ColorList/index.js

@@ -0,0 +1,35 @@
+import { Icon, Check, Palette } from '@linagora/twake-icons';
+import { ButtonBase, ImageList, ImageListItem, imageListItemClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import { Avatar } from '../Avatar';
+import { COLORS } from './helpers';
+const sizes = {
+    small: { avatar: 21, icon: 10, cols: 7, gap: 5 },
+    medium: { avatar: 41, icon: 16, cols: 5, gap: 16 }
+};
+const ColorListRoot = styled(ImageList)({
+    margin: 0,
+    [`& .${imageListItemClasses.root}`]: { alignItems: 'center' }
+});
+const ColorList = ({ size, selectedColor, customColorProps, onClick, ...props }) => {
+    const { isMobile } = useBreakpoints();
+    const { avatar, icon, cols, gap } = sizes[size ?? (isMobile ? 'medium' : 'small')];
+    return (React.createElement(ColorListRoot, { cols: cols, rowHeight: avatar, gap: gap, ...props },
+        COLORS.map(color => (React.createElement(ImageListItem, { key: color },
+            React.createElement(ButtonBase, { component: "div", className: "u-bdrs-circle", onClick: () => onClick?.(color) },
+                React.createElement(Avatar, { color: color, size: avatar }, selectedColor?.toUpperCase() === color ? (React.createElement(Icon, { icon: Check, size: icon })) : (' ')))))),
+        customColorProps?.enabled && (React.createElement(ImageListItem, null,
+            React.createElement(ButtonBase, { sx: {
+                    width: avatar,
+                    height: avatar,
+                    borderRadius: '50%',
+                    border: '1px solid transparent',
+                    backgroundImage: 'linear-gradient(#fff, #fff), conic-gradient(from 0deg, #FB2C36, #AD46FF, #2B7FFF, #FB2C36)',
+                    backgroundOrigin: 'border-box',
+                    backgroundClip: 'padding-box, border-box'
+                }, onClick: customColorProps.onClick },
+                React.createElement(Icon, { icon: Palette, size: icon, color: "#000" }))))));
+};
+export default ColorList;

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

@@ -37,6 +37,7 @@ export { default as BottomSheetItem } from './components/BottomSheet/BottomSheet
 export { default as BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader';
 export { default as BottomSheetTitle } from './components/BottomSheet/BottomSheetTitle';
 export { default as Chip } from './components/Chip';
+export { default as ColorList } from './components/ColorList';
 export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
@@ -51,6 +52,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';
@@ -66,6 +68,7 @@ export { default as NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
+export { COLORS } from './components/ColorList/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
@@ -108,8 +111,10 @@ export type { SpaceOverlay, SpaceOverlayStatus } from './components/SpaceOverlay
 export type { SpaceOverlayProviderProps } from './components/SpaceOverlay/SpaceOverlay';
 export type { OverlayBox, OverlayRegion } from './components/SpaceOverlay/region';
 export type { OverlayFrameProps } from './components/SpaceOverlay/OverlayFrame';
+export type { ColorListProps, ColorListSize } from './components/ColorList';
 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

@@ -40,6 +40,7 @@ export { default as BottomSheetItem } from './components/BottomSheet/BottomSheet
 export { default as BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader';
 export { default as BottomSheetTitle } from './components/BottomSheet/BottomSheetTitle';
 export { default as Chip } from './components/Chip';
+export { default as ColorList } from './components/ColorList';
 export { Dialog, default as DialogDefault } from './components/Dialog';
 export { ContactPopover, default as ContactPopoverDefault } from './components/ContactPopover';
 export { default as DropdownButton } from './components/DropdownButton';
@@ -54,6 +55,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';
@@ -69,6 +71,7 @@ export { default as NavText } from './components/NavText';
 export { NavDesktopLimiter } from './components/NavDesktopLimiter';
 export { NavDesktopDropdown } from './components/NavDesktopDropdown';
 export { nameToColor, supportedColors, getInitials } from './components/Avatar/helpers';
+export { COLORS } from './components/ColorList/helpers';
 export { default as AccordionExpandIcon } from './components/AccordionExpandIcon';
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "11.2.0",
+  "version": "11.4.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",