@astral/ui 4.55.3 → 4.55.4
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/components/PageHeader/PageHeader.js +10 -3
- package/components/PageHeader/constants.d.ts +1 -0
- package/components/PageHeader/constants.js +1 -0
- package/components/PageHeader/styles.js +4 -0
- package/node/components/PageHeader/PageHeader.js +10 -3
- package/node/components/PageHeader/constants.d.ts +1 -0
- package/node/components/PageHeader/constants.js +1 -0
- package/node/components/PageHeader/styles.js +4 -0
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ import { MobilePageActions } from './MobilePageActions';
|
|
|
7
7
|
import { MobileTitleWrapper, Wrapper } from './styles';
|
|
8
8
|
import { Title } from './Title';
|
|
9
9
|
import { useLogic } from './useLogic';
|
|
10
|
-
const
|
|
10
|
+
const mobilePageHeaderCva = cva(pageHeaderClassnames.pageHeaderMobileTitle, {
|
|
11
11
|
variants: {
|
|
12
12
|
hasTitle: {
|
|
13
13
|
true: pageHeaderClassnames.hasTitle,
|
|
@@ -17,11 +17,18 @@ const mobilePageHeader = cva(pageHeaderClassnames.pageHeaderMobileTitle, {
|
|
|
17
17
|
},
|
|
18
18
|
},
|
|
19
19
|
});
|
|
20
|
+
const rootCva = cva(pageHeaderClassnames.root, {
|
|
21
|
+
variants: {
|
|
22
|
+
hasActions: {
|
|
23
|
+
true: pageHeaderClassnames.hasActions,
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
});
|
|
20
27
|
export const PageHeader = (props) => {
|
|
21
28
|
const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
|
|
22
29
|
const { isLoading, mobileTitleActions, isShowMobileActions } = useLogic(props);
|
|
23
|
-
return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className:
|
|
30
|
+
return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobilePageHeaderCva({
|
|
24
31
|
hasTitle: Boolean(title) || isLoading,
|
|
25
32
|
hasBackButton: Boolean(backButton),
|
|
26
|
-
}), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: classNames(
|
|
33
|
+
}), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: classNames(rootCva({ hasActions: Boolean(actions) }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
|
|
27
34
|
};
|
|
@@ -10,5 +10,6 @@ export const pageHeaderClassnames = {
|
|
|
10
10
|
quickFilters: createUIKitClassname('page-header__quick-filters'),
|
|
11
11
|
hasFilters: createUIKitClassname('page-header_has-filters'),
|
|
12
12
|
hasSubheader: createUIKitClassname('page-header_has-subheader'),
|
|
13
|
+
hasActions: createUIKitClassname('page-header_has-actions'),
|
|
13
14
|
};
|
|
14
15
|
export const PAGE_HEADER_HEIGHT_MOBILE = '48px';
|
|
@@ -12,6 +12,10 @@ export const Wrapper = styled.header `
|
|
|
12
12
|
|
|
13
13
|
${({ theme }) => theme.breakpoints.down('laptop')} {
|
|
14
14
|
padding: ${({ theme }) => theme.spacing(0, 4)};
|
|
15
|
+
|
|
16
|
+
&.${pageHeaderClassnames.hasActions} {
|
|
17
|
+
grid-template-columns: min-content 1fr auto auto;
|
|
18
|
+
}
|
|
15
19
|
}
|
|
16
20
|
|
|
17
21
|
${({ theme }) => theme.breakpoints.down('sm')} {
|
|
@@ -10,7 +10,7 @@ const MobilePageActions_1 = require("./MobilePageActions");
|
|
|
10
10
|
const styles_1 = require("./styles");
|
|
11
11
|
const Title_1 = require("./Title");
|
|
12
12
|
const useLogic_1 = require("./useLogic");
|
|
13
|
-
const
|
|
13
|
+
const mobilePageHeaderCva = (0, cva_1.cva)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
|
|
14
14
|
variants: {
|
|
15
15
|
hasTitle: {
|
|
16
16
|
true: constants_1.pageHeaderClassnames.hasTitle,
|
|
@@ -20,12 +20,19 @@ const mobilePageHeader = (0, cva_1.cva)(constants_1.pageHeaderClassnames.pageHea
|
|
|
20
20
|
},
|
|
21
21
|
},
|
|
22
22
|
});
|
|
23
|
+
const rootCva = (0, cva_1.cva)(constants_1.pageHeaderClassnames.root, {
|
|
24
|
+
variants: {
|
|
25
|
+
hasActions: {
|
|
26
|
+
true: constants_1.pageHeaderClassnames.hasActions,
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
});
|
|
23
30
|
const PageHeader = (props) => {
|
|
24
31
|
const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
|
|
25
32
|
const { isLoading, mobileTitleActions, isShowMobileActions } = (0, useLogic_1.useLogic)(props);
|
|
26
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className:
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobilePageHeaderCva({
|
|
27
34
|
hasTitle: Boolean(title) || isLoading,
|
|
28
35
|
hasBackButton: Boolean(backButton),
|
|
29
|
-
}), children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(
|
|
36
|
+
}), children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(rootCva({ hasActions: Boolean(actions) }), className), children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, { className: (0, classNames_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
|
|
30
37
|
};
|
|
31
38
|
exports.PageHeader = PageHeader;
|
|
@@ -13,5 +13,6 @@ exports.pageHeaderClassnames = {
|
|
|
13
13
|
quickFilters: (0, createUIKitClassname_1.createUIKitClassname)('page-header__quick-filters'),
|
|
14
14
|
hasFilters: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-filters'),
|
|
15
15
|
hasSubheader: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-subheader'),
|
|
16
|
+
hasActions: (0, createUIKitClassname_1.createUIKitClassname)('page-header_has-actions'),
|
|
16
17
|
};
|
|
17
18
|
exports.PAGE_HEADER_HEIGHT_MOBILE = '48px';
|
|
@@ -15,6 +15,10 @@ exports.Wrapper = styled_1.styled.header `
|
|
|
15
15
|
|
|
16
16
|
${({ theme }) => theme.breakpoints.down('laptop')} {
|
|
17
17
|
padding: ${({ theme }) => theme.spacing(0, 4)};
|
|
18
|
+
|
|
19
|
+
&.${constants_1.pageHeaderClassnames.hasActions} {
|
|
20
|
+
grid-template-columns: min-content 1fr auto auto;
|
|
21
|
+
}
|
|
18
22
|
}
|
|
19
23
|
|
|
20
24
|
${({ theme }) => theme.breakpoints.down('sm')} {
|