@linagora/twake-mui 18.1.0 → 18.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/components/IntentHeader/IntentHeader.stories.d.ts +7 -0
- package/dist/components/IntentHeader/IntentHeader.stories.js +37 -0
- package/dist/components/IntentHeader/index.d.ts +11 -0
- package/dist/components/IntentHeader/index.js +23 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# @linagora/twake-mui [18.2.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.1.0...@linagora/twake-mui@18.2.0) (2026-10-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **twake-mui:** Migrate IntentHeader from cozy-ui ([fd35f2c](https://github.com/linagora/twake-ui/commit/fd35f2c0715d9ec2fac81940b584074aefdf7532))
|
|
7
|
+
|
|
1
8
|
# @linagora/twake-mui [18.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.0.0...@linagora/twake-mui@18.1.0) (2026-10-22)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import IntentHeader from './index';
|
|
3
|
+
declare const meta: Meta<typeof IntentHeader>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Screenshot: Story;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Stack } from '@mui/material';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import IntentHeader from './index';
|
|
4
|
+
const appIcon = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="10" fill="#297EF2"/></svg>')}`;
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'IntentHeader',
|
|
7
|
+
component: IntentHeader,
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
argTypes: {
|
|
10
|
+
appName: { control: 'text' },
|
|
11
|
+
appEditor: { control: 'text' },
|
|
12
|
+
appIcon: { control: 'text' }
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
export default meta;
|
|
16
|
+
export const Default = {
|
|
17
|
+
args: {
|
|
18
|
+
appName: 'Drive',
|
|
19
|
+
appEditor: 'Twake',
|
|
20
|
+
appIcon
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
const Row = ({ title, children }) => (React.createElement("section", null,
|
|
24
|
+
React.createElement("h3", null, title),
|
|
25
|
+
children));
|
|
26
|
+
export const Screenshot = {
|
|
27
|
+
tags: ['argos'],
|
|
28
|
+
render: () => (React.createElement(Stack, { spacing: 2 },
|
|
29
|
+
React.createElement(Row, { title: "Name only" },
|
|
30
|
+
React.createElement(IntentHeader, { appName: "Drive" })),
|
|
31
|
+
React.createElement(Row, { title: "With editor" },
|
|
32
|
+
React.createElement(IntentHeader, { appName: "Drive", appEditor: "Twake" })),
|
|
33
|
+
React.createElement(Row, { title: "With icon" },
|
|
34
|
+
React.createElement(IntentHeader, { appName: "Drive", appIcon: appIcon })),
|
|
35
|
+
React.createElement(Row, { title: "With editor and icon" },
|
|
36
|
+
React.createElement(IntentHeader, { appName: "Drive", appEditor: "Twake", appIcon: appIcon }))))
|
|
37
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface IntentHeaderProps {
|
|
3
|
+
appName: string;
|
|
4
|
+
/** Shown in a regular weight before the app name */
|
|
5
|
+
appEditor?: string;
|
|
6
|
+
/** URL of the app icon */
|
|
7
|
+
appIcon?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
declare const IntentHeader: React.FC<IntentHeaderProps>;
|
|
11
|
+
export default IntentHeader;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Box, Typography } from '@mui/material';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
const IntentHeader = ({ appName, appEditor, appIcon, className }) => (React.createElement(Box, { className: className, sx: {
|
|
4
|
+
display: 'flex',
|
|
5
|
+
alignItems: 'center',
|
|
6
|
+
flexShrink: 0,
|
|
7
|
+
height: 48,
|
|
8
|
+
px: 2,
|
|
9
|
+
py: 1,
|
|
10
|
+
bgcolor: 'background.contrast'
|
|
11
|
+
} },
|
|
12
|
+
React.createElement(Typography, { component: "h1", color: "textPrimary", sx: theme => ({
|
|
13
|
+
display: 'flex',
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
fontSize: theme.typography.pxToRem(20),
|
|
16
|
+
fontWeight: 'fontWeightBold'
|
|
17
|
+
}) },
|
|
18
|
+
appIcon && (React.createElement(Box, { component: "img", src: appIcon, alt: "", sx: { height: 18, mr: 1 } })),
|
|
19
|
+
appEditor && (React.createElement(Box, { component: "span", sx: { fontWeight: 'fontWeightRegular' } },
|
|
20
|
+
appEditor,
|
|
21
|
+
"\u00A0")),
|
|
22
|
+
appName)));
|
|
23
|
+
export default IntentHeader;
|
package/dist/index.d.ts
CHANGED
|
@@ -61,6 +61,7 @@ export { ExtendableFab } from './components/ExtendableFab';
|
|
|
61
61
|
export { default as Filename } from './components/Filename';
|
|
62
62
|
export { default as FilePath } from './components/FilePath';
|
|
63
63
|
export { default as FilePathLink } from './components/FilePathLink';
|
|
64
|
+
export { default as IntentHeader } from './components/IntentHeader';
|
|
64
65
|
export { default as ListItem } from './components/ListItem';
|
|
65
66
|
export { default as ListItemButton } from './components/ListItemButton';
|
|
66
67
|
export { default as ListItemText } from './components/ListItemText';
|
|
@@ -176,6 +177,7 @@ export type { ExtendableFabProps, ScrollOptions } from './components/ExtendableF
|
|
|
176
177
|
export type { FilenameProps } from './components/Filename';
|
|
177
178
|
export type { FilePathProps } from './components/FilePath';
|
|
178
179
|
export type { FilePathLinkProps } from './components/FilePathLink';
|
|
180
|
+
export type { IntentHeaderProps } from './components/IntentHeader';
|
|
179
181
|
export type { ListItemProps, ListItemGutters, ListItemSize } from './components/ListItem';
|
|
180
182
|
export type { ListItemButtonProps } from './components/ListItemButton';
|
|
181
183
|
export type { ListItemTextProps } from './components/ListItemText';
|
package/dist/index.js
CHANGED
|
@@ -64,6 +64,7 @@ export { ExtendableFab } from './components/ExtendableFab';
|
|
|
64
64
|
export { default as Filename } from './components/Filename';
|
|
65
65
|
export { default as FilePath } from './components/FilePath';
|
|
66
66
|
export { default as FilePathLink } from './components/FilePathLink';
|
|
67
|
+
export { default as IntentHeader } from './components/IntentHeader';
|
|
67
68
|
export { default as ListItem } from './components/ListItem';
|
|
68
69
|
export { default as ListItemButton } from './components/ListItemButton';
|
|
69
70
|
export { default as ListItemText } from './components/ListItemText';
|