@nulogy/components 15.2.2 → 15.2.3
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/dist/main.js +53133 -54186
- package/dist/main.module.js +5924 -6977
- package/dist/src/Alert/Alert.js +2 -14
- package/dist/src/AppTag/components/LogoWrapper.d.ts +0 -1
- package/dist/src/AppTag/components/NulogyLogo.js +2 -14
- package/dist/src/AsyncSelect/AsyncSelect.graphql.story.js +4 -13
- package/dist/src/AsyncSelect/AsyncSelect.js +14 -16
- package/dist/src/AsyncSelect/AsyncSelectComponents.js +9 -21
- package/dist/src/AsyncSelect/fixtures.js +4 -13
- package/dist/src/Banner/Banner.js +1 -15
- package/dist/src/BottomSheet/BottomSheet.js +2 -15
- package/dist/src/BottomSheet/BottomSheet.parts.d.ts +2 -2
- package/dist/src/BottomSheet/BottomSheet.parts.js +8 -22
- package/dist/src/BottomSheet/BottomSheet.styled.d.ts +4 -5
- package/dist/src/Box/Box.d.ts +12 -4
- package/dist/src/BrandedNavBar/DesktopMenu.js +22 -36
- package/dist/src/BrandedNavBar/MenuTrigger.js +4 -16
- package/dist/src/BrandedNavBar/MenuTriggerButton.js +8 -22
- package/dist/src/BrandedNavBar/MobileMenu.js +28 -35
- package/dist/src/BrandedNavBar/NavBar.js +7 -21
- package/dist/src/BrandedNavBar/NavBar.story.js +1 -1
- package/dist/src/BrandedNavBar/NavBarBackground.d.ts +0 -1
- package/dist/src/BrandedNavBar/NavBarDropdownMenu.js +14 -8
- package/dist/src/BrandedNavBar/SmallNavBar.js +4 -16
- package/dist/src/BrandedNavBar/SmallNavBar.story.js +1 -1
- package/dist/src/BrandedNavBar/SubMenuTrigger.js +4 -16
- package/dist/src/BrandedNavBar/SubMenuTriggerButton.js +2 -14
- package/dist/src/BrandedNavBar/renderSubMenuItems.js +7 -17
- package/dist/src/Branding/Branding.js +2 -14
- package/dist/src/Branding/BrandingText.d.ts +0 -1
- package/dist/src/Branding/LettermarkLogo.js +2 -14
- package/dist/src/Branding/WordmarkLogo.js +2 -14
- package/dist/src/Breadcrumbs/Breadcrumbs.js +2 -14
- package/dist/src/Breadcrumbs/BreadcrumbsList.d.ts +0 -1
- package/dist/src/Breadcrumbs/BreadcrumbsListItem.d.ts +0 -1
- package/dist/src/Button/Button.js +2 -14
- package/dist/src/Button/CloseButton.js +1 -1
- package/dist/src/Button/ControlIcon.js +2 -16
- package/dist/src/Button/DangerButton.d.ts +0 -1
- package/dist/src/Button/IconicButton.js +55 -73
- package/dist/src/Button/PrimaryButton.d.ts +0 -1
- package/dist/src/Button/QuietButton.d.ts +0 -1
- package/dist/src/ButtonGroup/ButtonGroup.d.ts +0 -1
- package/dist/src/ButtonGroup/ButtonGroup.js +8 -2
- package/dist/src/Card/Card.js +2 -14
- package/dist/src/Card/Card.story.js +1 -1
- package/dist/src/Card/CardSet.d.ts +0 -1
- package/dist/src/Checkbox/Checkbox.js +20 -6
- package/dist/src/Checkbox/Checkbox.story.js +4 -1
- package/dist/src/Checkbox/CheckboxGroup.js +4 -16
- package/dist/src/DatePickers/DatePicker.js +2 -14
- package/dist/src/DatePickers/MonthPicker.js +2 -14
- package/dist/src/DatePickers/WeekPicker.js +10 -17
- package/dist/src/DatePickers/custom/weekPickerStyles.d.ts +0 -1
- package/dist/src/DatePickers/shared/components/BasePicker.js +9 -15
- package/dist/src/DatePickers/shared/components/DatePickerInput.js +2 -13
- package/dist/src/DatePickers/shared/styles.d.ts +0 -1
- package/dist/src/DatePickers/shared/types.d.ts +0 -1
- package/dist/src/DatePickers/stories/WeekPicker.story.js +1 -1
- package/dist/src/DateRange/DateRange.js +36 -22
- package/dist/src/DateRange/DateRangeStyles.d.ts +0 -1
- package/dist/src/DateRange/EndTime.d.ts +3 -4
- package/dist/src/DateRange/StartTime.d.ts +3 -4
- package/dist/src/Decorations/index.js +1 -1
- package/dist/src/DescriptionList/DescriptionList.js +1 -13
- package/dist/src/DescriptionList/DescriptionList.parts.d.ts +0 -1
- package/dist/src/DescriptionList/DescriptionList.parts.js +156 -77
- package/dist/src/DescriptionList/DescriptionListContext.js +1 -15
- package/dist/src/DescriptionList/stories/DescriptionList.playground.story.js +8 -5
- package/dist/src/DescriptionList/stories/fixtures.d.ts +2 -2
- package/dist/src/Divider/Divider.d.ts +0 -1
- package/dist/src/DropdownMenu/DropdownItem.d.ts +0 -1
- package/dist/src/DropdownMenu/DropdownMenu.js +13 -17
- package/dist/src/DropdownMenu/DropdownMenu.story.js +2 -2
- package/dist/src/DropdownMenu/DropdownMenuContainer.d.ts +0 -1
- package/dist/src/DropdownMenu/DropdownMenuContainer.js +10 -1
- package/dist/src/DropdownMenu/DropdownText.d.ts +1 -2
- package/dist/src/FieldLabel/FieldLabel.js +2 -14
- package/dist/src/FieldLabel/HelpText.d.ts +1 -2
- package/dist/src/FieldLabel/LabelText.d.ts +0 -1
- package/dist/src/FieldLabel/MaybeFieldLabel.js +1 -15
- package/dist/src/FieldLabel/RequirementText.js +1 -1
- package/dist/src/Flex/Flex.d.ts +0 -1
- package/dist/src/Flex/Flex.story.js +3 -17
- package/dist/src/Form/Field.d.ts +0 -1
- package/dist/src/Form/Fieldset.d.ts +0 -1
- package/dist/src/Form/Form.js +3 -17
- package/dist/src/Form/FormSection.js +3 -17
- package/dist/src/Icon/Icon.js +9 -24
- package/dist/src/Icon/LoadingIcon.js +2 -14
- package/dist/src/Input/Input.js +3 -15
- package/dist/src/Input/InputField.js +4 -16
- package/dist/src/Input/Prefix.js +2 -16
- package/dist/src/Input/Suffix.js +2 -14
- package/dist/src/Layout/ApplicationFrame.js +2 -14
- package/dist/src/Layout/Header.js +4 -17
- package/dist/src/Layout/Page.js +5 -19
- package/dist/src/Layout/Sidebar.js +4 -18
- package/dist/src/Layout/Sidebar.story.js +16 -30
- package/dist/src/Link/Link.js +13 -21
- package/dist/src/List/List.d.ts +0 -1
- package/dist/src/Modal/Modal.story.js +1 -1
- package/dist/src/Modal/ModalCloseButton.d.ts +0 -1
- package/dist/src/Modal/ModalFooter.d.ts +0 -1
- package/dist/src/Modal/ModalHeader.d.ts +0 -1
- package/dist/src/NDSProvider/ComponentVariantContext.js +1 -1
- package/dist/src/NDSProvider/GlobalStyles.d.ts +0 -1
- package/dist/src/NDSProvider/ModalStyleOverride.d.ts +0 -1
- package/dist/src/NDSProvider/Reset.d.ts +0 -1
- package/dist/src/NDSProvider/renderWithNDSProvider.spec-utils.d.ts +2 -1
- package/dist/src/NDSProvider/renderWithNDSProvider.spec-utils.js +3 -1
- package/dist/src/NavBarSearch/NavBarSearch.js +2 -14
- package/dist/src/Navigation/Navigation.js +3 -16
- package/dist/src/Navigation/components/AppSwitcher/NulogyAppSwitcher.js +6 -3
- package/dist/src/Navigation/components/AppSwitcher/parts/Item.js +1 -15
- package/dist/src/Navigation/components/AppSwitcher/parts/Link.js +2 -16
- package/dist/src/Navigation/components/AppSwitcher/parts/index.d.ts +4 -5
- package/dist/src/Navigation/components/DesktopNav/DesktopNav.js +2 -2
- package/dist/src/Navigation/components/MenuSubItem/MenuSubItem.js +4 -5
- package/dist/src/Navigation/components/MenuSubItem/parts/styled.d.ts +0 -1
- package/dist/src/Navigation/components/MenuSubItem/parts/styled.js +49 -7
- package/dist/src/Navigation/components/MobileNav/MobileNav.js +2 -2
- package/dist/src/Navigation/components/MobileNav/parts/MobileMenuItem.js +12 -21
- package/dist/src/Navigation/components/MobileNav/parts/styled.d.ts +1 -2
- package/dist/src/Navigation/components/MobileNav/parts/styled.js +35 -4
- package/dist/src/Navigation/components/NulogyLogo/SvgNulogyLogo.js +1 -1
- package/dist/src/Navigation/components/UserMenu/UserMenu.d.ts +0 -1
- package/dist/src/Navigation/components/UserMenu/parts/Header.js +1 -1
- package/dist/src/Navigation/components/UserMenu/parts/Item.js +7 -16
- package/dist/src/Navigation/components/UserMenu/parts/MobileItem.js +7 -16
- package/dist/src/Navigation/components/UserMenu/parts/styled.d.ts +0 -1
- package/dist/src/Navigation/components/UserMenu/parts/styled.js +43 -18
- package/dist/src/Navigation/components/shared/NavigationLogo.js +4 -16
- package/dist/src/Navigation/components/shared/NavigationLogoLink.js +2 -14
- package/dist/src/Navigation/components/shared/NavigationMenuContent.d.ts +0 -1
- package/dist/src/Navigation/components/shared/NavigationMenuItem.js +10 -24
- package/dist/src/Navigation/components/shared/components.d.ts +0 -1
- package/dist/src/Navigation/components/shared/components.js +29 -5
- package/dist/src/Navigation/hooks/useResponsiveMenu.d.ts +0 -1
- package/dist/src/Navigation/stories/Navigation.mobileVisibility.story.js +21 -9
- package/dist/src/Navigation/stories/fixtures/logos/CustomLogo2.js +1 -1
- package/dist/src/Navigation/stories/fixtures/logos/CustomLogo3.js +1 -1
- package/dist/src/Navigation/stories/fixtures/logos/Customlogo1.js +1 -1
- package/dist/src/Overlay/Overlay.d.ts +0 -1
- package/dist/src/Pagination/PageNumber.d.ts +0 -1
- package/dist/src/Pagination/Pagination.js +3 -16
- package/dist/src/Pagination/PaginationButton.d.ts +0 -1
- package/dist/src/Popper/Popper.js +29 -6
- package/dist/src/Primitives/index.d.ts +0 -1
- package/dist/src/Radio/Radio.js +11 -18
- package/dist/src/Radio/Radio.story.d.ts +135 -129
- package/dist/src/Radio/Radio.story.js +8 -8
- package/dist/src/Radio/RadioGroup.js +4 -16
- package/dist/src/RangeContainer/RangeContainer.js +6 -15
- package/dist/src/Select/MenuList.js +13 -18
- package/dist/src/Select/Select.d.ts +1 -1
- package/dist/src/Select/Select.js +16 -17
- package/dist/src/Select/Select.story.d.ts +2 -2
- package/dist/src/Select/Select.story.fixture.js +8 -30
- package/dist/src/Select/Select.story.js +14 -29
- package/dist/src/Select/SelectComponents.js +7 -7
- package/dist/src/Select/SelectOption.js +1 -1
- package/dist/src/Select/customReactSelectStyles.js +152 -44
- package/dist/src/Select/lib.js +1 -2
- package/dist/src/SortingTable/SortingTable.js +6 -15
- package/dist/src/StatusIndicator/StatusIndicator.d.ts +0 -1
- package/dist/src/StatusIndicator/StatusIndicator.js +16 -1
- package/dist/src/Summary/Summary.js +2 -14
- package/dist/src/Summary/SummaryDivider.js +1 -1
- package/dist/src/Summary/SummaryItem.js +2 -14
- package/dist/src/Switcher/Switch.js +23 -19
- package/dist/src/Switcher/Switcher.js +4 -16
- package/dist/src/Table/BaseTable.js +2 -14
- package/dist/src/Table/StatefulTable.d.ts +1 -1
- package/dist/src/Table/StatefulTable.js +17 -9
- package/dist/src/Table/StyledTh.d.ts +0 -1
- package/dist/src/Table/StyledTh.js +11 -2
- package/dist/src/Table/Table.js +2 -14
- package/dist/src/Table/Table.types.d.ts +0 -1
- package/dist/src/Table/TableBody.js +11 -11
- package/dist/src/Table/TableFoot.js +5 -8
- package/dist/src/Table/TableHead.js +1 -4
- package/dist/src/Table/addExpandableControl.js +5 -2
- package/dist/src/Table/addSelectableControl.js +5 -2
- package/dist/src/Table/stories/TableWithCustomSorting.story.js +4 -1
- package/dist/src/Table/stories/TableWithFiltering.story.js +8 -2
- package/dist/src/Table/stories/TableWithServerSidePagination.story.js +4 -15
- package/dist/src/Tabs/Tab.js +11 -18
- package/dist/src/Tabs/TabContainer.d.ts +0 -1
- package/dist/src/Tabs/TabScrollIndicator.js +2 -14
- package/dist/src/Tabs/Tabs.js +5 -7
- package/dist/src/Textarea/Textarea.js +3 -15
- package/dist/src/TimePicker/TimePicker.js +2 -14
- package/dist/src/TimePicker/TimePickerDropdown.d.ts +0 -1
- package/dist/src/TimePicker/TimePickerInput.d.ts +0 -1
- package/dist/src/TimePicker/TimePickerInput.js +6 -4
- package/dist/src/TimeRange/TimeRange.js +20 -20
- package/dist/src/Toast/Toast.js +4 -16
- package/dist/src/ToastContainer/ToastContainer.js +4 -16
- package/dist/src/ToastContainer/ToastContainer.story.js +1 -1
- package/dist/src/ToastContainer/ToastFunction.js +7 -19
- package/dist/src/Toggle/Toggle.js +4 -17
- package/dist/src/Toggle/ToggleButton.js +2 -14
- package/dist/src/Tooltip/Tooltip.story.js +7 -7
- package/dist/src/Tooltip/TooltipContainer.d.ts +0 -1
- package/dist/src/Tooltip/TooltipContainer.js +16 -1
- package/dist/src/Tooltip/components/TooltipComponents.js +9 -24
- package/dist/src/TopBar/TopBar.styled.d.ts +14 -7
- package/dist/src/TopBar/components/BackLink.js +2 -14
- package/dist/src/TopBar/components/Menu.js +2 -15
- package/dist/src/TopBar/components/MenuItemLink.js +2 -14
- package/dist/src/TopBar/components/PageTitle.js +2 -14
- package/dist/src/TopBar/stories/TopBar.backButton.story.js +3 -3
- package/dist/src/TopBar/stories/TopBar.menu.story.js +9 -20
- package/dist/src/TopBar/stories/TopBar.story.js +3 -3
- package/dist/src/TruncatedText/TruncatedText.js +8 -16
- package/dist/src/TruncatedText/components/MaybeTooltip.d.ts +1 -1
- package/dist/src/TruncatedText/components/TruncatedTextFillWidth.js +3 -15
- package/dist/src/TruncatedText/components/TruncatedTextMaxCharacters.js +4 -16
- package/dist/src/Type/Headings.d.ts +4 -5
- package/dist/src/Type/Text.d.ts +0 -1
- package/dist/src/Validation/InlineValidation.js +2 -14
- package/dist/src/VerticalDivider/VerticalDivider.d.ts +0 -1
- package/dist/src/VisualTests/WithSpace.story.js +18 -18
- package/dist/src/hooks/useMediaQuery/useMediaQuery.js +1 -2
- package/dist/src/i18n.js +1 -1
- package/dist/src/locale.story.js +1 -1
- package/dist/src/theme/mergeThemes.util.js +7 -1
- package/dist/src/theme/useNDSTheme.js +9 -3
- package/dist/src/utils/ClickInputLabel.d.ts +0 -1
- package/dist/src/utils/PopperArrow.js +5 -1
- package/dist/src/utils/story/code.d.ts +0 -1
- package/dist/src/utils/story/dashed.d.ts +2 -2
- package/dist/src/utils/story/placeholder.js +1 -1
- package/dist/src/utils/story/resizable.d.ts +2 -2
- package/dist/src/utils/story/resizable.js +1 -1
- package/dist/src/utils/story/simulatedAPIRequests.js +8 -19
- package/dist/src/utils/subPx.js +1 -1
- package/dist/src/utils/testing/useConditionalAutoClick.js +3 -3
- package/dist/src/utils/testing/useUrlProps.js +1 -1
- package/dist/src/utils/ts/FocusManager.js +1 -1
- package/dist/src/utils/useWindowDimension.story.d.ts +1 -1
- package/dist/src/utils/withMenuState.js +1 -1
- package/package.json +24 -27
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import React from "react";
|
|
13
2
|
import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
|
|
14
3
|
import { Text } from "../../../../Type";
|
|
@@ -17,8 +6,7 @@ import { Divider } from "../../../../Divider";
|
|
|
17
6
|
import { RadixNavigationMenuItem } from "../../shared/components";
|
|
18
7
|
import { NavigationMenuSubList } from "../../shared/NavigationMenuItem";
|
|
19
8
|
import { IndentedContainer, MobileNavigationButton, MobileNavigationLink, MenuItemGroupLabel } from "./styled";
|
|
20
|
-
export const MobileMenuItem = React.forwardRef((
|
|
21
|
-
var { menuItem, level = 0 } = _a, props = __rest(_a, ["menuItem", "level"]);
|
|
9
|
+
export const MobileMenuItem = React.forwardRef(({ menuItem, level = 0, ...props }, forwardedRef) => {
|
|
22
10
|
if (menuItem.mobileVisibility !== undefined && menuItem.mobileVisibility !== "navigationMenu") {
|
|
23
11
|
return null;
|
|
24
12
|
}
|
|
@@ -26,7 +14,7 @@ export const MobileMenuItem = React.forwardRef((_a, forwardedRef) => {
|
|
|
26
14
|
* Separator
|
|
27
15
|
* -----------------------------------------------------------------*/
|
|
28
16
|
if (menuItem.type === "separator") {
|
|
29
|
-
return (React.createElement(RadixNavigationMenuItem,
|
|
17
|
+
return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
|
|
30
18
|
React.createElement(IndentedContainer, { level: level },
|
|
31
19
|
React.createElement(Divider, { secondary: level > 0, my: "x2" }))));
|
|
32
20
|
}
|
|
@@ -34,7 +22,7 @@ export const MobileMenuItem = React.forwardRef((_a, forwardedRef) => {
|
|
|
34
22
|
* Custom render fragment
|
|
35
23
|
* -----------------------------------------------------------------*/
|
|
36
24
|
if (menuItem.type === "custom") {
|
|
37
|
-
return (React.createElement(RadixNavigationMenuItem,
|
|
25
|
+
return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
|
|
38
26
|
React.createElement(IndentedContainer, { level: level }, menuItem.render({ withinSubMenu: level > 0, level, withinMobileNav: true }))));
|
|
39
27
|
}
|
|
40
28
|
/* -------------------------------------------------------------------
|
|
@@ -51,11 +39,14 @@ export const MobileMenuItem = React.forwardRef((_a, forwardedRef) => {
|
|
|
51
39
|
* Link
|
|
52
40
|
* -----------------------------------------------------------------*/
|
|
53
41
|
if (menuItem.type === "link") {
|
|
54
|
-
return (React.createElement(RadixNavigationMenuItem,
|
|
42
|
+
return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
|
|
55
43
|
React.createElement(IndentedContainer, { level: level },
|
|
56
|
-
React.createElement(MobileNavigationLink, { asChild: true }, menuItem.element ? (React.cloneElement(menuItem.element,
|
|
44
|
+
React.createElement(MobileNavigationLink, { asChild: true }, menuItem.element ? (React.cloneElement(menuItem.element, {
|
|
45
|
+
...menuItem.props,
|
|
46
|
+
children: (React.createElement(React.Fragment, null,
|
|
57
47
|
IconFragment,
|
|
58
|
-
LabelFragment))
|
|
48
|
+
LabelFragment)),
|
|
49
|
+
})) : (React.createElement("a", { ...menuItem.props },
|
|
59
50
|
IconFragment,
|
|
60
51
|
LabelFragment))))));
|
|
61
52
|
}
|
|
@@ -66,16 +57,16 @@ export const MobileMenuItem = React.forwardRef((_a, forwardedRef) => {
|
|
|
66
57
|
const hasItems = !!menuItem.items && menuItem.items.length > 0;
|
|
67
58
|
// Button with nested items – show group label then children
|
|
68
59
|
if (hasItems) {
|
|
69
|
-
return (React.createElement(RadixNavigationMenuItem,
|
|
60
|
+
return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
|
|
70
61
|
LabelFragment && (React.createElement(IndentedContainer, { level: level },
|
|
71
62
|
React.createElement(MenuItemGroupLabel, null, labelText))),
|
|
72
63
|
React.createElement(RadixNavigationMenu.Sub, { orientation: "vertical" },
|
|
73
64
|
React.createElement(NavigationMenuSubList, null, (menuItem.items || []).map((item) => (React.createElement(MobileMenuItem, { key: item.key, menuItem: item, level: level + 1 })))))));
|
|
74
65
|
}
|
|
75
66
|
// Simple button with no children
|
|
76
|
-
return (React.createElement(RadixNavigationMenuItem,
|
|
67
|
+
return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
|
|
77
68
|
React.createElement(IndentedContainer, { level: level },
|
|
78
|
-
React.createElement(MobileNavigationButton,
|
|
69
|
+
React.createElement(MobileNavigationButton, { ...("props" in menuItem ? menuItem.props : {}) },
|
|
79
70
|
IconFragment,
|
|
80
71
|
LabelFragment))));
|
|
81
72
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
|
|
3
2
|
export declare const IndentedContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../../../../Box").BoxProps> & import("../../../../Box").BoxProps, {
|
|
4
3
|
level: number;
|
|
@@ -8,7 +7,7 @@ export declare const MenuItemGroupLabel: import("styled-components/dist/types").
|
|
|
8
7
|
inline?: boolean;
|
|
9
8
|
compact?: boolean;
|
|
10
9
|
disabled?: boolean;
|
|
11
|
-
textTransform?: "
|
|
10
|
+
textTransform?: "none" | "inherit" | "initial" | "-moz-initial" | "revert" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | undefined;
|
|
12
11
|
fontSize?: string;
|
|
13
12
|
} & import("../../../..").StyledProps, "ref"> & {
|
|
14
13
|
ref?: import("react").Ref<HTMLParagraphElement>;
|
|
@@ -11,10 +11,41 @@ const commonPadding = (theme) => ({
|
|
|
11
11
|
paddingTop: theme.space.x2,
|
|
12
12
|
paddingBottom: theme.space.x2,
|
|
13
13
|
});
|
|
14
|
-
const commonStyles = (theme) => (
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
const commonStyles = (theme) => ({
|
|
15
|
+
...commonPadding(theme),
|
|
16
|
+
background: "none",
|
|
17
|
+
border: "none",
|
|
18
|
+
outline: "none",
|
|
19
|
+
userSelect: "none",
|
|
20
|
+
display: "flex",
|
|
21
|
+
alignItems: "center",
|
|
22
|
+
gap: theme.space.x1,
|
|
23
|
+
color: theme.colors.darkGrey,
|
|
24
|
+
fontSize: theme.fontSizes.small,
|
|
25
|
+
fontWeight: theme.fontWeights.medium,
|
|
26
|
+
lineHeight: theme.lineHeights.smallTextBase,
|
|
27
|
+
width: "100%",
|
|
28
|
+
textAlign: "left",
|
|
29
|
+
});
|
|
30
|
+
export const MenuItemGroupLabel = styled(Text)(({ theme }) => ({
|
|
31
|
+
...commonPadding(theme),
|
|
32
|
+
display: "flex",
|
|
33
|
+
alignItems: "center",
|
|
34
|
+
gap: theme.space.x1,
|
|
35
|
+
color: theme.colors.darkGrey,
|
|
36
|
+
fontSize: theme.fontSizes.small,
|
|
37
|
+
fontWeight: theme.fontWeights.medium,
|
|
38
|
+
lineHeight: theme.lineHeights.smallTextBase,
|
|
39
|
+
width: "100%",
|
|
40
|
+
textAlign: "left",
|
|
41
|
+
}));
|
|
42
|
+
export const MobileNavigationButton = styled(RadixNavigationMenu.Trigger)(({ theme }) => ({
|
|
43
|
+
...commonStyles(theme),
|
|
44
|
+
}));
|
|
45
|
+
export const MobileNavigationLink = styled(RadixNavigationMenu.Link)(({ theme }) => ({
|
|
46
|
+
...commonStyles(theme),
|
|
47
|
+
textDecoration: "none",
|
|
48
|
+
}));
|
|
18
49
|
export const MobileSecondaryLogoContainer = styled(RadixNavigationMenu.Sub)(({ theme }) => ({
|
|
19
50
|
marginTop: theme.space.x2,
|
|
20
51
|
padding: theme.space.x2,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export function SvgNulogyLogo(props) {
|
|
3
|
-
return (React.createElement("svg",
|
|
3
|
+
return (React.createElement("svg", { viewBox: "0 0 102 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
|
|
4
4
|
React.createElement("path", { d: "M23.4218 0.867146L27.759 2.60144V18.2175C27.759 21.5706 23.6157 22.1596 20.8189 22.5547C22.4185 22.1596 23.4307 21.7156 23.4218 18.2175V4.33721L19.0846 2.60144L23.4218 0.867146ZM5.20435 21.6875V12.1474C5.20435 11.1871 5.925 10.1009 6.79955 9.72653L11.2773 7.80283V13.8699L15.6145 16.4846C16.4891 16.9286 18.2175 16.9389 18.2175 15.616V13.0131L16.4802 12.1445V0L3.2555 4.87288C1.45757 5.53434 0 7.61934 0 9.54304V23.8569L5.20435 21.6875Z", fill: "#F0B41C" }),
|
|
5
5
|
React.createElement("path", { d: "M36.7354 18.4818H32.8096V7.1808H36.435V9.07491C36.9583 8.39756 37.6125 7.83242 38.3587 7.41313C39.0371 7.04867 39.7964 6.86089 40.5665 6.86709C41.7622 6.86709 42.6693 7.20991 43.2878 7.89553C43.9064 8.58116 44.2156 9.58444 44.2156 10.9054V18.4818H40.3105V12.0078C40.3105 11.4159 40.1892 10.9685 39.9465 10.6657C39.7038 10.3628 39.3442 10.2148 38.8678 10.2217C38.1831 10.2217 37.6563 10.4516 37.2874 10.9113C36.9184 11.371 36.7344 12.0404 36.7354 12.9194V18.4818Z", fill: "#1C68A5" }),
|
|
6
6
|
React.createElement("path", { d: "M54.0493 6.86694H57.9515V17.2594L54.3261 18.7081V16.5003C53.802 17.1785 53.148 17.7454 52.4024 18.168C51.7277 18.5291 50.9731 18.7149 50.2079 18.7081C49.0102 18.7081 48.1007 18.3628 47.4792 17.6722C46.8577 16.9817 46.5459 15.9779 46.5439 14.6609V6.86694H50.4698V13.5659C50.4698 14.1578 50.5911 14.6071 50.8338 14.9139C51.0765 15.2207 51.4361 15.3732 51.9126 15.3712C52.6031 15.3712 53.1299 15.1394 53.4929 14.6757C53.856 14.212 54.04 13.5451 54.0449 12.675L54.0493 6.86694Z", fill: "#1C68A5" }),
|
|
@@ -31,7 +31,7 @@ const HeaderWrapper = styled(Flex).attrs({
|
|
|
31
31
|
},
|
|
32
32
|
}));
|
|
33
33
|
export const Header = ({ title, subtitle1, subtitle2, containerProps }) => {
|
|
34
|
-
return (React.createElement(HeaderWrapper,
|
|
34
|
+
return (React.createElement(HeaderWrapper, { ...containerProps },
|
|
35
35
|
React.createElement(HeaderText, { fontWeight: "bold" }, title),
|
|
36
36
|
React.createElement(HeaderText, { fontWeight: "normal" }, subtitle1),
|
|
37
37
|
React.createElement(HeaderText, { fontWeight: "normal" }, subtitle2),
|
|
@@ -1,22 +1,13 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import React from "react";
|
|
13
2
|
import { RadixNavigationMenuItem } from "../../shared/components";
|
|
14
3
|
import { UserMenuLink, UserMenuTrigger } from "./styled";
|
|
15
|
-
const Item = React.forwardRef((
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
const Item = React.forwardRef(({ item, level = 0, ...props }, forwardedRef) => {
|
|
5
|
+
return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
|
|
6
|
+
item.type === "link" && (React.createElement(UserMenuLink, { asChild: true }, item.element ? (React.cloneElement(item.element, {
|
|
7
|
+
...item.props,
|
|
8
|
+
children: item.label,
|
|
9
|
+
})) : (React.createElement("a", { ...item.props }, item.label)))),
|
|
10
|
+
item.type === "button" && React.createElement(UserMenuTrigger, { ...item.props }, item.label),
|
|
20
11
|
item.type === "custom" && item.render({ level, withinMobileNav: false })));
|
|
21
12
|
});
|
|
22
13
|
Item.displayName = "Item";
|
|
@@ -1,27 +1,18 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import React from "react";
|
|
13
2
|
import { RadixNavigationMenuItem } from "../../shared/components";
|
|
14
3
|
import { IndentedContainer } from "../../MobileNav/parts/styled";
|
|
15
4
|
import { UserMenuLink, UserMenuTrigger } from "./styled";
|
|
16
|
-
const MobileItem = React.forwardRef((
|
|
17
|
-
var { item, level = 0 } = _a, props = __rest(_a, ["item", "level"]);
|
|
5
|
+
const MobileItem = React.forwardRef(({ item, level = 0, ...props }, forwardedRef) => {
|
|
18
6
|
const content = (React.createElement(React.Fragment, null,
|
|
19
7
|
item.type === "link" && (React.createElement(IndentedContainer, { level: level },
|
|
20
|
-
React.createElement(UserMenuLink, { asChild: true, "$isMobile": true }, item.element ? (React.cloneElement(item.element,
|
|
8
|
+
React.createElement(UserMenuLink, { asChild: true, "$isMobile": true }, item.element ? (React.cloneElement(item.element, {
|
|
9
|
+
...item.props,
|
|
10
|
+
children: item.label,
|
|
11
|
+
})) : (React.createElement("a", { ...item.props }, item.label))))),
|
|
21
12
|
item.type === "button" && (React.createElement(IndentedContainer, { level: level },
|
|
22
|
-
React.createElement(UserMenuTrigger,
|
|
13
|
+
React.createElement(UserMenuTrigger, { ...item.props, "$isMobile": true }, item.label))),
|
|
23
14
|
item.type === "custom" && item.render({ level, withinMobileNav: true })));
|
|
24
|
-
return (React.createElement(RadixNavigationMenuItem,
|
|
15
|
+
return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props }, content));
|
|
25
16
|
});
|
|
26
17
|
MobileItem.displayName = "MobileItem";
|
|
27
18
|
export default MobileItem;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
|
|
3
2
|
export declare const UserMenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadixNavigationMenu.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>, {
|
|
4
3
|
$isMobile?: boolean;
|
|
@@ -1,21 +1,46 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
2
|
import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
|
|
3
3
|
import { addStyledProps } from "../../../../StyledProps";
|
|
4
|
-
const baseUserMenuItemStyles = (theme, isMobile) => (
|
|
5
|
-
"
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
4
|
+
const baseUserMenuItemStyles = (theme, isMobile) => ({
|
|
5
|
+
width: "100%",
|
|
6
|
+
color: theme.colors.darkGrey,
|
|
7
|
+
fontSize: theme.fontSizes.small,
|
|
8
|
+
fontWeight: theme.fontWeights.bold,
|
|
9
|
+
lineHeight: theme.lineHeights.smallTextBase,
|
|
10
|
+
paddingTop: theme.space.x1_5,
|
|
11
|
+
paddingBottom: theme.space.x1_5,
|
|
12
|
+
paddingLeft: theme.space.x2,
|
|
13
|
+
paddingRight: theme.space.x2,
|
|
14
|
+
...(!isMobile && {
|
|
15
|
+
"&:hover, &:focus": {
|
|
16
|
+
backgroundColor: theme.colors.lightBlue,
|
|
17
|
+
color: theme.colors.darkBlue,
|
|
18
|
+
outline: "none",
|
|
19
|
+
},
|
|
20
|
+
}),
|
|
21
|
+
...(isMobile && {
|
|
22
|
+
"&:hover": {
|
|
23
|
+
// No background or color change on hover for mobile
|
|
24
|
+
},
|
|
25
|
+
"&:focus": {
|
|
26
|
+
backgroundColor: "transparent", // Ensure no background change
|
|
27
|
+
color: theme.colors.darkBlue,
|
|
28
|
+
outline: "none",
|
|
29
|
+
},
|
|
30
|
+
}),
|
|
31
|
+
});
|
|
32
|
+
export const UserMenuLink = styled(RadixNavigationMenu.Link)(({ theme, $isMobile }) => ({
|
|
33
|
+
...baseUserMenuItemStyles(theme, $isMobile),
|
|
34
|
+
display: "block",
|
|
35
|
+
textDecoration: "none",
|
|
36
|
+
}), addStyledProps);
|
|
37
|
+
export const UserMenuTrigger = styled(RadixNavigationMenu.Trigger)(({ theme, $isMobile }) => ({
|
|
38
|
+
...baseUserMenuItemStyles(theme, $isMobile),
|
|
39
|
+
background: "none",
|
|
40
|
+
border: "none",
|
|
41
|
+
userSelect: "none",
|
|
42
|
+
display: "flex",
|
|
43
|
+
justifyContent: "space-between",
|
|
44
|
+
alignItems: "center",
|
|
45
|
+
textAlign: "left",
|
|
46
|
+
}), addStyledProps);
|
|
@@ -1,27 +1,15 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import React from "react";
|
|
13
2
|
import styled from "styled-components";
|
|
14
3
|
const LogoContainer = styled.div(({ $maxWidth, $maxHeight }) => ({
|
|
15
4
|
display: "flex",
|
|
16
5
|
alignItems: "center",
|
|
17
|
-
maxWidth: $maxWidth
|
|
18
|
-
maxHeight: $maxHeight
|
|
6
|
+
maxWidth: $maxWidth ?? "184px",
|
|
7
|
+
maxHeight: $maxHeight ?? "36px",
|
|
19
8
|
"& > *": {
|
|
20
9
|
width: "100%",
|
|
21
10
|
objectFit: "contain",
|
|
22
11
|
},
|
|
23
12
|
}));
|
|
24
|
-
export const NavigationLogo = (
|
|
25
|
-
|
|
26
|
-
return (React.createElement(LogoContainer, Object.assign({ "$maxWidth": maxWidth, "$maxHeight": maxHeight }, props), children));
|
|
13
|
+
export const NavigationLogo = ({ children, maxWidth, maxHeight, ...props }) => {
|
|
14
|
+
return (React.createElement(LogoContainer, { "$maxWidth": maxWidth, "$maxHeight": maxHeight, ...props }, children));
|
|
27
15
|
};
|
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import React from "react";
|
|
13
2
|
import styled from "styled-components";
|
|
14
3
|
import { NavigationMenuLink as BaseNavigationMenuLink } from "./components";
|
|
@@ -17,7 +6,6 @@ const NavigationMenuLink = styled(BaseNavigationMenuLink)(({ theme }) => ({
|
|
|
17
6
|
alignItems: "center",
|
|
18
7
|
padding: theme.space.x1,
|
|
19
8
|
}));
|
|
20
|
-
export const NavigationLogoLink = (
|
|
21
|
-
|
|
22
|
-
return React.createElement(NavigationMenuLink, Object.assign({ href: href, asChild: renderAsFragment }, props));
|
|
9
|
+
export const NavigationLogoLink = ({ href, renderAsFragment = false, ...props }) => {
|
|
10
|
+
return React.createElement(NavigationMenuLink, { href: href, asChild: renderAsFragment, ...props });
|
|
23
11
|
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
|
|
3
2
|
import { StyledProps } from "../../../StyledProps";
|
|
4
3
|
export interface NavigationMenuContentProps extends RadixNavigationMenu.NavigationMenuContentProps, StyledProps {
|
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import React from "react";
|
|
13
2
|
import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
|
|
14
3
|
import styled from "styled-components";
|
|
@@ -23,18 +12,16 @@ import { CaretDown, NavigationMenuLink, NavigationMenuTrigger, RadixNavigationMe
|
|
|
23
12
|
/**
|
|
24
13
|
* A single Radix <NavigationMenu.Item> that can represent any MenuItem variant.
|
|
25
14
|
*/
|
|
26
|
-
export const NavigationMenuItem = React.forwardRef((
|
|
27
|
-
var _b;
|
|
28
|
-
var { item, level = 0 } = _a, props = __rest(_a, ["item", "level"]);
|
|
15
|
+
export const NavigationMenuItem = React.forwardRef(({ item, level = 0, ...props }, forwardedRef) => {
|
|
29
16
|
if (item.type === "separator") {
|
|
30
|
-
return (React.createElement(RadixNavigationMenuItem,
|
|
17
|
+
return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
|
|
31
18
|
React.createElement(VerticalDivider, { mx: "x1" })));
|
|
32
19
|
}
|
|
33
20
|
/* ---------------------------------------------------------------------
|
|
34
21
|
* Handle "custom” items
|
|
35
22
|
* -------------------------------------------------------------------*/
|
|
36
23
|
if (item.type === "custom") {
|
|
37
|
-
return (React.createElement(RadixNavigationMenuItem,
|
|
24
|
+
return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props }, item.render({ withinSubMenu: level > 0, level, withinMobileNav: false })));
|
|
38
25
|
}
|
|
39
26
|
const hasIcon = "icon" in item;
|
|
40
27
|
const isLink = item.type === "link";
|
|
@@ -47,16 +34,16 @@ export const NavigationMenuItem = React.forwardRef((_a, forwardedRef) => {
|
|
|
47
34
|
"label" in item && item.label && (React.createElement(Text, { fontSize: "small", lineHeight: "smallTextCompressed" }, item.label)),
|
|
48
35
|
hasSubMenu && React.createElement(CaretDown, { "aria-hidden": true, size: "x2" })));
|
|
49
36
|
if (isLink) {
|
|
50
|
-
const Item = (React.createElement(RadixNavigationMenuItem,
|
|
51
|
-
React.createElement(NavigationMenuLink, { asChild: true, "aria-label": hasIconOnly && item.tooltip ? item.tooltip : item.label, borderRadius: hasIconOnly ? "rounded" : undefined, p: hasIcon ? "x1" : undefined }, item.element ? (React.cloneElement(item.element,
|
|
37
|
+
const Item = (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
|
|
38
|
+
React.createElement(NavigationMenuLink, { asChild: true, "aria-label": hasIconOnly && item.tooltip ? item.tooltip : item.label, borderRadius: hasIconOnly ? "rounded" : undefined, p: hasIcon ? "x1" : undefined }, item.element ? (React.cloneElement(item.element, { ...item.props, children: Content })) : (React.createElement("a", { ...item.props }, Content)))));
|
|
52
39
|
return hasTooltip ? (React.createElement(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip }, Item)) : (Item);
|
|
53
40
|
}
|
|
54
|
-
const Item = (React.createElement(RadixNavigationMenuItem,
|
|
41
|
+
const Item = (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
|
|
55
42
|
React.createElement(NavigationMenuTrigger, { asChild: true, position: "relative", "aria-label": hasIconOnly && item.tooltip ? item.tooltip : hasLabel ? item.label : undefined, borderRadius: hasIconOnly ? "rounded" : undefined, p: hasIcon ? "x1" : undefined },
|
|
56
|
-
React.createElement(Button,
|
|
43
|
+
React.createElement(Button, { ...item.props }, Content)),
|
|
57
44
|
hasSubMenu && (React.createElement(SubMenuContent, null,
|
|
58
45
|
React.createElement(RadixNavigationMenu.Sub, { orientation: "vertical" },
|
|
59
|
-
React.createElement(NavigationMenuSubList, null,
|
|
46
|
+
React.createElement(NavigationMenuSubList, null, item.items?.map((sub) => React.createElement(MenuSubItem, { key: sub.key, item: sub, level: level + 1 }))))))));
|
|
60
47
|
return hasTooltip ? (React.createElement(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip }, Item)) : (Item);
|
|
61
48
|
});
|
|
62
49
|
NavigationMenuItem.displayName = "NavigationMenuItem";
|
|
@@ -69,8 +56,7 @@ export const NavigationMenuSubList = styled(RadixNavigationMenu.List) `
|
|
|
69
56
|
display: none;
|
|
70
57
|
}
|
|
71
58
|
`;
|
|
72
|
-
const Button = React.forwardRef((
|
|
73
|
-
|
|
74
|
-
return React.createElement("button", Object.assign({}, props, { ref: forwardedRef }));
|
|
59
|
+
const Button = React.forwardRef(({ onPointerEnter: _, onPointerLeave: __, onPointerMove: ___, ...props }, forwardedRef) => {
|
|
60
|
+
return React.createElement("button", { ...props, ref: forwardedRef });
|
|
75
61
|
});
|
|
76
62
|
Button.displayName = "Button";
|
|
@@ -44,22 +44,46 @@ export const NavigationMenuList = styled(RadixNavigationMenu.List)(({ theme }) =
|
|
|
44
44
|
}));
|
|
45
45
|
export const NavigationMenuTrigger = styled(RadixNavigationMenu.Trigger).attrs(({ disableMenuToggleOnHover = true }) => {
|
|
46
46
|
if (disableMenuToggleOnHover) {
|
|
47
|
-
return
|
|
47
|
+
return {
|
|
48
|
+
...disableHoverEvents,
|
|
49
|
+
};
|
|
48
50
|
}
|
|
49
|
-
})(({ theme }) => (
|
|
51
|
+
})(({ theme }) => ({
|
|
52
|
+
all: "unset",
|
|
53
|
+
...itemStyles(theme),
|
|
54
|
+
display: "flex",
|
|
55
|
+
alignItems: "center",
|
|
56
|
+
justifyContent: "space-between",
|
|
57
|
+
gap: theme.space.half,
|
|
58
|
+
"&:focus": { boxShadow: theme.shadows.focus },
|
|
59
|
+
"&:hover": { backgroundColor: theme.colors.lightBlue, color: theme.colors.darkBlue },
|
|
60
|
+
"&:disabled": {
|
|
50
61
|
cursor: "default",
|
|
51
62
|
"&:hover": {
|
|
52
63
|
backgroundColor: "transparent",
|
|
53
64
|
color: theme.colors.darkGrey,
|
|
54
65
|
},
|
|
55
|
-
}
|
|
56
|
-
|
|
66
|
+
},
|
|
67
|
+
}), addStyledProps);
|
|
68
|
+
export const NavigationMenuLink = styled(RadixNavigationMenu.Link)(({ theme }) => ({
|
|
69
|
+
...itemStyles(theme),
|
|
70
|
+
display: "flex",
|
|
71
|
+
alignItems: "center",
|
|
72
|
+
justifyContent: "space-between",
|
|
73
|
+
gap: theme.space.half,
|
|
74
|
+
textDecoration: "none",
|
|
75
|
+
fontSize: theme.fontSizes.small,
|
|
76
|
+
lineHeight: theme.lineHeights.smallTextCompressed,
|
|
77
|
+
"&:focus": { boxShadow: theme.shadows.focus },
|
|
78
|
+
"&:hover": { backgroundColor: theme.colors.lightBlue, color: theme.colors.darkBlue },
|
|
79
|
+
"&:disabled": {
|
|
57
80
|
cursor: "default",
|
|
58
81
|
"&:hover": {
|
|
59
82
|
backgroundColor: "transparent",
|
|
60
83
|
color: theme.colors.darkGrey,
|
|
61
84
|
},
|
|
62
|
-
}
|
|
85
|
+
},
|
|
86
|
+
}), addStyledProps);
|
|
63
87
|
export const NavigationMenuIconLink = styled(NavigationMenuLink)(({ theme }) => ({
|
|
64
88
|
paddingRight: theme.space.x1,
|
|
65
89
|
borderRadius: theme.radii.rounded,
|
|
@@ -33,8 +33,8 @@ export const DefaultBehavior = () => (React.createElement(StoryLayout, { descrip
|
|
|
33
33
|
React.createElement(Code, null, "mobileVisibility"),
|
|
34
34
|
" set will appear in the mobile navigation menu.") },
|
|
35
35
|
React.createElement(Navigation, { primaryNavigation: [
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
{ ...baseMenuItems[0], label: "Home (Default)" },
|
|
37
|
+
{ ...baseMenuItems[1], label: "Products (Default)" },
|
|
38
38
|
], secondaryNavigation: [
|
|
39
39
|
{
|
|
40
40
|
key: "settings",
|
|
@@ -48,7 +48,7 @@ export const ItemInNavigationBar = () => (React.createElement(StoryLayout, { des
|
|
|
48
48
|
React.createElement(Code, null, "mobileVisibility: \"navigationBar\""),
|
|
49
49
|
" will appear directly in the mobile navigation bar.") },
|
|
50
50
|
React.createElement(Navigation, { primaryNavigation: [
|
|
51
|
-
|
|
51
|
+
{ ...baseMenuItems[0], label: "Home (Menu)" },
|
|
52
52
|
{
|
|
53
53
|
key: "search",
|
|
54
54
|
label: "Search",
|
|
@@ -57,7 +57,7 @@ export const ItemInNavigationBar = () => (React.createElement(StoryLayout, { des
|
|
|
57
57
|
mobileVisibility: "navigationBar",
|
|
58
58
|
props: { "aria-label": "Search" },
|
|
59
59
|
},
|
|
60
|
-
|
|
60
|
+
{ ...baseMenuItems[1], label: "Products (Menu)" },
|
|
61
61
|
], secondaryNavigation: [
|
|
62
62
|
{
|
|
63
63
|
key: "notifications",
|
|
@@ -80,8 +80,16 @@ export const ItemInNavigationMenu = () => (React.createElement(StoryLayout, { de
|
|
|
80
80
|
React.createElement(Code, null, "mobileVisibility: \"navigationMenu\""),
|
|
81
81
|
" will appear inside the collapsible mobile menu. This is also the default behavior if the prop is not set.") },
|
|
82
82
|
React.createElement(Navigation, { primaryNavigation: [
|
|
83
|
-
|
|
84
|
-
|
|
83
|
+
{
|
|
84
|
+
...baseMenuItems[0],
|
|
85
|
+
label: "Home (Explicit Menu)",
|
|
86
|
+
mobileVisibility: "navigationMenu",
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
...baseMenuItems[1],
|
|
90
|
+
label: "Products (Explicit Menu)",
|
|
91
|
+
mobileVisibility: "navigationMenu",
|
|
92
|
+
},
|
|
85
93
|
], secondaryNavigation: [
|
|
86
94
|
{
|
|
87
95
|
key: "profile",
|
|
@@ -96,9 +104,13 @@ export const ItemHiddenOnMobile = () => (React.createElement(StoryLayout, { desc
|
|
|
96
104
|
React.createElement(Code, null, "mobileVisibility: \"hidden\""),
|
|
97
105
|
" will not be visible on mobile viewports.") },
|
|
98
106
|
React.createElement(Navigation, { primaryNavigation: [
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
107
|
+
{ ...baseMenuItems[0], label: "Home (Visible)" },
|
|
108
|
+
{
|
|
109
|
+
...baseMenuItems[1],
|
|
110
|
+
label: "Products (Hidden)",
|
|
111
|
+
mobileVisibility: "hidden",
|
|
112
|
+
},
|
|
113
|
+
{ ...baseMenuItems[2], label: "About (Visible)" },
|
|
102
114
|
], secondaryNavigation: [
|
|
103
115
|
{
|
|
104
116
|
key: "admin",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export default function CustomLogo2(props) {
|
|
3
|
-
return (React.createElement("svg",
|
|
3
|
+
return (React.createElement("svg", { id: "logo-76", viewBox: "0 0 218 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
|
|
4
4
|
React.createElement("path", { d: "M122.355 29.5238H127.018V11.9352H122.355V29.5238ZM122.355 9.19238H127.018V5.00952H122.355V9.19238Z", fill: "black" }),
|
|
5
5
|
React.createElement("path", { d: "M130.023 35.2838H134.686V27.5352H134.754C135.748 29.0438 137.36 30.0381 139.828 30.0381C144.354 30.0381 147.44 26.4381 147.44 20.7467C147.44 15.2609 144.457 11.4552 139.794 11.4552C137.394 11.4552 135.748 12.5867 134.617 14.1295H134.514V11.9352H130.023V35.2838ZM138.834 26.1638C136.057 26.1638 134.583 24.0724 134.583 20.8838C134.583 17.7295 135.748 15.2267 138.663 15.2267C141.543 15.2267 142.708 17.5581 142.708 20.8838C142.708 24.2095 141.2 26.1638 138.834 26.1638Z", fill: "black" }),
|
|
6
6
|
React.createElement("path", { d: "M156.741 30.0381C161.13 30.0381 164.147 27.9124 164.147 24.3809C164.147 20.2667 160.89 19.4438 157.941 18.8267C155.438 18.3124 153.107 18.1752 153.107 16.6667C153.107 15.3981 154.307 14.7124 156.124 14.7124C158.113 14.7124 159.313 15.3981 159.518 17.2838H163.735C163.393 13.7524 160.821 11.4552 156.193 11.4552C152.181 11.4552 149.027 13.2724 149.027 17.0781C149.027 20.9181 152.113 21.7752 155.267 22.3924C157.667 22.8724 159.895 23.0438 159.895 24.7238C159.895 25.9581 158.73 26.7467 156.673 26.7467C154.581 26.7467 153.141 25.8552 152.833 23.8324H148.513C148.787 27.5695 151.633 30.0381 156.741 30.0381Z", fill: "black" }),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export default function CustomLogo3(props) {
|
|
3
|
-
return (React.createElement("svg",
|
|
3
|
+
return (React.createElement("svg", { viewBox: "0 0 415 109", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
|
|
4
4
|
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M63.5789 23.2584C59.8362 23.2584 56.1302 23.9936 52.6724 25.4219C49.2147 26.8502 46.0728 28.9436 43.4264 31.5828C40.7799 34.2219 38.6806 37.355 37.2483 40.8032C35.9745 43.8699 35.2505 47.1324 35.1059 50.4423C35.0728 51.1999 34.65 51.8934 33.9713 52.2317L24.7865 56.8115C24.1078 57.1499 23.6728 57.8433 23.7059 58.6009C23.8505 61.9108 24.5745 65.1733 25.8483 68.24C27.2806 71.6882 29.3799 74.8213 32.0264 77.4604C34.6728 80.0996 37.8147 82.193 41.2724 83.6213C44.7302 85.0496 48.4362 85.7848 52.1789 85.7848C55.9216 85.7848 59.6276 85.0496 63.0854 83.6213C66.5432 82.193 69.685 80.0996 72.3314 77.4604C74.9779 74.8213 77.0772 71.6882 78.5095 68.24C79.7833 65.1733 80.5073 61.9108 80.6519 58.6009C80.685 57.8433 81.1078 57.1499 81.7865 56.8115L90.9713 52.2317C91.65 51.8934 92.085 51.1999 92.0519 50.4423C91.9073 47.1324 91.1833 43.8699 89.9095 40.8032C88.4772 37.355 86.3779 34.2219 83.7314 31.5828C81.085 28.9436 77.9432 26.8502 74.4854 25.4219C71.0276 23.9936 67.3216 23.2584 63.5789 23.2584ZM76.7442 46.2414C77.3017 47.5836 77.6486 49.0009 77.7749 50.4435C77.841 51.1989 77.4 51.8934 76.7213 52.2317L67.5365 56.8115C66.8578 57.1499 66.441 57.8443 66.3749 58.5997C66.2486 60.0423 65.9017 61.4596 65.3442 62.8018C64.6281 64.5259 63.5784 66.0925 62.2552 67.4121C60.9319 68.7316 59.361 69.7784 57.6321 70.4925C55.9033 71.2067 54.0502 71.5742 52.1789 71.5742C50.3076 71.5742 48.4546 71.2067 46.7257 70.4925C44.9968 69.7784 43.4259 68.7316 42.1026 67.4121C40.7794 66.0925 39.7298 64.5259 39.0136 62.8018C38.4561 61.4596 38.1092 60.0423 37.9829 58.5997C37.9168 57.8443 38.3578 57.1499 39.0365 56.8115L48.2213 52.2317C48.9 51.8934 49.3168 51.1989 49.3829 50.4435C49.5092 49.0009 49.8561 47.5836 50.4136 46.2414C51.1297 44.5173 52.1794 42.9507 53.5026 41.6311C54.8259 40.3116 56.3968 39.2648 58.1257 38.5507C59.8546 37.8365 61.7076 37.469 63.5789 37.469C65.4502 37.469 67.3033 37.8365 69.0321 38.5507C70.761 39.2648 72.3319 40.3116 73.6552 41.6311C74.9784 42.9507 76.0281 44.5173 76.7442 46.2414Z", fill: "#E22935" }),
|
|
5
5
|
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M63.5789 0.521606C56.8421 0.521606 50.1712 1.84484 43.9472 4.41577C37.7232 6.98669 32.068 10.755 27.3043 15.5054C22.5407 20.2559 18.762 25.8955 16.1839 32.1022C13.7642 37.9276 12.4467 44.1456 12.2939 50.442C12.2755 51.2001 11.85 51.8934 11.1713 52.2317L1.98646 56.8115C1.3078 57.1499 0.875522 57.8431 0.893916 58.6012C1.04669 64.8976 2.36422 71.1156 4.78389 76.941C7.36195 83.1478 11.1407 88.7874 15.9043 93.5378C20.668 98.2882 26.3232 102.057 32.5473 104.627C38.7713 107.198 45.4421 108.522 52.1789 108.522C58.9157 108.522 65.5866 107.198 71.8106 104.627C78.0346 102.057 83.6898 98.2882 88.4535 93.5378C93.2171 88.7874 96.9959 83.1478 99.5739 76.941C101.994 71.1156 103.311 64.8976 103.464 58.6012C103.482 57.8431 103.908 57.1499 104.586 56.8115L113.771 52.2317C114.45 51.8934 114.882 51.2001 114.864 50.442C114.711 44.1456 113.394 37.9276 110.974 32.1022C108.396 25.8955 104.617 20.2559 99.8535 15.5054C95.0898 10.755 89.4346 6.9867 83.2106 4.41577C76.9866 1.84485 70.3157 0.521606 63.5789 0.521606ZM89.2081 58.6011C89.2336 57.8432 89.6578 57.1499 90.3365 56.8115L99.5213 52.2317C100.2 51.8934 100.634 51.2 100.608 50.4421C100.459 46.0122 99.5121 41.6416 97.8086 37.5404C95.9467 33.0577 93.2176 28.9846 89.7772 25.5538C86.3368 22.1229 82.2524 19.4014 77.7573 17.5446C73.2622 15.6878 68.4444 14.7321 63.5789 14.7321C58.7134 14.7321 53.8956 15.6878 49.4005 17.5446C44.9054 19.4014 40.821 22.1229 37.3806 25.5538C33.9402 28.9846 31.2111 33.0577 29.3492 37.5404C27.6457 41.6416 26.6985 46.0122 26.5497 50.4421C26.5242 51.2 26.1 51.8934 25.4213 52.2317L16.2365 56.8115C15.5578 57.1499 15.1242 57.8432 15.1497 58.6011C15.2985 63.031 16.2457 67.4016 17.9492 71.5029C19.8111 75.9855 22.5402 80.0586 25.9806 83.4894C29.421 86.9203 33.5054 89.6418 38.0005 91.4986C42.4956 93.3554 47.3134 94.3111 52.1789 94.3111C57.0444 94.3111 61.8622 93.3554 66.3573 91.4986C70.8524 89.6418 74.9368 86.9203 78.3772 83.4894C81.8176 80.0586 84.5467 75.9855 86.4087 71.5029C88.1122 67.4016 89.0593 63.031 89.2081 58.6011Z", fill: "#E22935" }),
|
|
6
6
|
React.createElement("path", { d: "M266.742 17.3497C265.223 17.3497 263.939 16.8247 262.889 15.7747C261.839 14.7247 261.314 13.4497 261.314 11.9497C261.314 10.4122 261.839 9.12786 262.889 8.09661C263.939 7.04661 265.223 6.52161 266.742 6.52161C268.261 6.52161 269.536 7.04661 270.567 8.09661C271.617 9.12786 272.142 10.4122 272.142 11.9497C272.142 13.4497 271.617 14.7247 270.567 15.7747C269.536 16.8247 268.261 17.3497 266.742 17.3497Z", fill: "#370808" }),
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export default function CustomLogo(props) {
|
|
3
|
-
return (React.createElement("svg",
|
|
3
|
+
return (React.createElement("svg", { viewBox: "0 0 35 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
|
|
4
4
|
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M29.4554 2.43478V0H35V22.4348C35 32.1358 27.165 40 17.5 40C8.24271 40 0.664262 32.7853 0.0413736 23.6522H0V0H5.54455V2.43478L14.901 2.43478V0H20.4455V2.43478L29.4554 2.43478ZM29.4554 22.4348V19.0202C28.8318 19.6656 28.1633 20.2785 27.4539 20.8558C25.1121 22.7615 22.3612 24.2503 19.369 25.2589C16.3764 26.2677 13.1833 26.7826 9.96797 26.7826H6.35343C8.08848 31.2608 12.425 34.4348 17.5 34.4348C24.1028 34.4348 29.4554 29.0622 29.4554 22.4348ZM15.4269 18.2435C14.3706 19.3674 13.18 20.3419 11.8852 21.1425C13.8545 20.9882 15.7827 20.5971 17.6038 19.9833C20.013 19.1712 22.1698 17.9913 23.9621 16.5329C25.7535 15.075 27.136 13.3757 28.0645 11.5515C28.6507 10.3998 29.0518 9.20727 29.2674 8H20.2671C20.0641 9.47968 19.6891 10.9319 19.1475 12.3231C18.2893 14.5274 17.0275 16.5405 15.4269 18.2435ZM5.54455 17.8146V8H14.6483C14.4948 8.78546 14.2724 9.55482 13.9832 10.2975C13.3786 11.8506 12.4962 13.2517 11.3938 14.4246C10.2918 15.5971 8.99228 16.518 7.57404 17.143C6.91535 17.4333 6.23601 17.6576 5.54455 17.8146Z", fill: "#1D3AA7" })));
|
|
5
5
|
}
|