@linzjs/lui 17.30.0 → 17.32.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [17.32.0](https://github.com/linz/lui/compare/v17.31.1...v17.32.0) (2023-02-09)
+
+
+### Features
+
+* the drawer will not be closed for submenu ([#845](https://github.com/linz/lui/issues/845)) ([1fca1be](https://github.com/linz/lui/commit/1fca1be587ffc038648939c85e716c51f71871a2))
+
+# [17.31.0](https://github.com/linz/lui/compare/v17.30.0...v17.31.0) (2023-02-07)
+
+
+### Features
+
+* implement a new version LuiHeader ([#838](https://github.com/linz/lui/issues/838)) ([50d2364](https://github.com/linz/lui/commit/50d23648aa92ce36d927239b034ff045a3fd280a))
+* implement new version LuiHeader and associated componenets ([#840](https://github.com/linz/lui/issues/840)) ([c6c9de3](https://github.com/linz/lui/commit/c6c9de36e0d4108d3aaaf445809d78ebefdfce5e))
+
 # [17.30.0](https://github.com/linz/lui/compare/v17.29.1...v17.30.0) (2023-02-07)
 
 ## [17.29.1](https://github.com/linz/lui/compare/v17.29.0...v17.29.1) (2023-02-06)

package/README.md

@@ -42,10 +42,11 @@ We aim to make each component generic, extendable, accessible, and amazing.
 All styles are implemented in SCSS and compiled to plain CSS. This means any team can use the CSS. A ReactJS wrapper
 over the CSS is part of this project.
 
-There are lots of things to do in this project, often things will be left until there is demand. Please join the Slack channel
-#cop-lui.
+There are lots of things to do in this project, often things will be left until there is demand, e.g add new components or implement new version components. Please join the Slack channel
 
-## Documentation 
+#cop-lui
+
+## Documentation
 
 Storybook is the main source of documentation.
 

package/dist/components/LuiHeader/LuiHeader.d.ts

@@ -9,6 +9,9 @@ interface HeaderProps {
     transparent?: boolean;
     sticky?: boolean;
 }
+/**
+ * @deprecated: this is replaced by LuiHeaderV2
+ */
 declare const LuiHeader: React.FC<React.PropsWithChildren<HeaderProps>>;
 interface ILuiIcon {
     /**
@@ -39,6 +42,8 @@ interface ILuiHeaderMenuItem extends ILuiIcon {
     'data-testid'?: string;
 }
 /**
+ * @deprecated: this is replaced by LuiHeaderMenuItemV2
+ *
  * The \`LuiHeaderMenuItem\` is the base component for all menu items that are to be shown in the header.
  * Note that it depends on it being rendered inside a LuiHeader for its styles to apply properly.
  * To configure the item for responsiveness, ensure to set any of the hideOn* properties.
@@ -56,6 +61,9 @@ interface ILuiCloseableHeaderMenuItem extends Omit<ILuiHeaderMenuItem, 'onClick'
     open: boolean;
     setOpen: (value: boolean) => void;
 }
+/**
+ * @deprecated replaced by LuiCloseableHeaderMenuItemV2
+ */
 declare const LuiCloseableHeaderMenuItem: React.FC<React.PropsWithChildren<ILuiCloseableHeaderMenuItem>>;
 interface ILuiMenuCloseButton extends ILuiIcon {
     'data-testid'?: string;

package/dist/components/LuiHeaderMenu/LuiHeaderMenus.d.ts

@@ -18,13 +18,25 @@ interface ILuiDrawerMenuOption {
      */
     onClick?: () => void;
 }
+/**
+ * @deprecated replaced by LuiDrawerMenuOptionsV2
+ */
 declare const LuiDrawerMenuOptions: React.FC<React.PropsWithChildren<ILuiIcon>>;
+/**
+ * @deprecated replaced by LuiDrawerMenuOptionV2
+ */
 declare const LuiDrawerMenuOption: React.FC<React.PropsWithChildren<ILuiDrawerMenuOption>>;
 declare type ILuiDrawerMenu = Omit<ILuiHeaderMenuItem, 'onClick'> & {
     hasStickyHeader?: boolean;
 };
+/**
+ * @deprecated replaced by LuiDrawerMenuV2
+ */
 declare const LuiDrawerMenu: React.FC<React.PropsWithChildren<ILuiDrawerMenu>>;
 declare type ILuiDropdownMenu = Omit<ILuiHeaderMenuItem, 'onClick'>;
+/**
+ * @deprecated  replaced by LuiDropdownMenuV2
+ */
 declare const LuiDropdownMenu: React.FC<React.PropsWithChildren<ILuiDropdownMenu>>;
 interface ILuiDrawerMenuSection {
     /**

package/dist/components/LuiHeaderMenuV2/LuiHeaderMenusV2.d.ts

@@ -0,0 +1,73 @@
+import { ReactElement, ReactNode } from 'react';
+import { ILuiHeaderMenuItem, ILuiIcon } from '../LuiHeader/LuiHeader';
+import { ILuiDrawerMenu, ILuiDrawerMenuSection } from '../LuiHeaderMenu/LuiHeaderMenus';
+import { Size } from '../common/ResponsiveUtils';
+import { IconSize } from '../LuiIcon/LuiIcon';
+interface ILuiDrawerMenuOptionV2 {
+    /**
+     * The material-ui icon name (see https://material.io/resources/icons/?search=account_c&style=round)
+     */
+    icon?: string | ReactElement;
+    /**
+     * icon color, only applied when using LuiIcon
+     */
+    iconColor?: string;
+    /**
+     * The size of icon, only applied when using LuiIcon, default to 'md'
+     */
+    iconSize?: IconSize;
+    /**
+     * The label shown beside the icon which is aligned at the left of the drawer
+     */
+    label: string | ReactElement;
+    /**
+     * The badge which is shown which is aligned at the right of the drawer
+     */
+    badge?: ReactElement;
+    /**
+     * The function to be bound together with closing the drawer on click
+     */
+    onClick?: () => void;
+    /**
+     * Whether the option is a sub menu, if true, the drawer will not be closed on click
+     */
+    subMenu?: boolean;
+}
+declare const LuiDrawerMenuOptionsV2: ({ children, }: ILuiIcon & {
+    children: ReactNode;
+}) => JSX.Element;
+declare const LuiDrawerMenuOptionV2: ({ icon, iconColor, label, badge, iconSize, subMenu, onClick, }: ILuiDrawerMenuOptionV2) => JSX.Element;
+declare const LuiDrawerMenuV2: ({ children, hasStickyHeader, ...menuPropsCopy }: Omit<ILuiHeaderMenuItem, "onClick"> & {
+    hasStickyHeader?: boolean | undefined;
+} & {
+    children: ReactNode;
+}) => JSX.Element;
+declare type ILuiDropdownMenuV2 = Omit<ILuiHeaderMenuItem, 'onClick'> & {
+    /**
+     * The anchor origin of dropdown, default to left
+     */
+    anchorOrigin?: {
+        horizontal?: 'left' | 'right';
+    };
+    /**
+     * the width of dropdown, default to 'md'
+     */
+    size?: Size | 'xxl';
+};
+declare const LuiDropdownMenuV2: ({ ...restOfProps }: Omit<ILuiHeaderMenuItem, "onClick"> & {
+    /**
+     * The anchor origin of dropdown, default to left
+     */
+    anchorOrigin?: {
+        horizontal?: "left" | "right" | undefined;
+    } | undefined;
+    /**
+     * the width of dropdown, default to 'md'
+     */
+    size?: Size | "xxl" | undefined;
+} & {
+    children: ReactNode;
+}) => JSX.Element;
+declare const LuiDrawerMenuSectionV2: (props: ILuiDrawerMenuSection) => JSX.Element;
+declare const LuiDrawerMenuDividerV2: () => JSX.Element;
+export { LuiDrawerMenuV2, LuiDrawerMenuOptionsV2, LuiDrawerMenuOptionV2, ILuiDropdownMenuV2, LuiDropdownMenuV2, LuiDrawerMenuSectionV2, LuiDrawerMenuDividerV2, ILuiDrawerMenuOptionV2, };

package/dist/components/LuiHeaderV2/LuiHeaderV2.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import { HeaderSize, ILuiCloseableHeaderMenuItem, ILuiHeaderMenuItem } from '../LuiHeader/LuiHeader';
+interface HeaderPropsV2 {
+    headingText?: string;
+    size?: HeaderSize;
+    homeLink?: string | (() => void);
+    transparent?: boolean;
+    sticky?: boolean;
+    appMenu?: ReactNode;
+    children: ReactNode;
+}
+declare const LuiHeaderV2: ({ headingText, size, homeLink, transparent, children, sticky, appMenu, }: HeaderPropsV2) => JSX.Element;
+declare const LuiHeaderMenuItemV2: React.ForwardRefExoticComponent<ILuiHeaderMenuItem & {
+    children?: ReactNode;
+    iconColor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const LuiCloseableHeaderMenuItemV2: ({ open, setOpen, children, ...props }: ILuiCloseableHeaderMenuItem & {
+    children?: ReactNode;
+}) => JSX.Element;
+export { LuiHeaderV2, LuiHeaderMenuItemV2, LuiCloseableHeaderMenuItemV2 };

package/dist/components/LuiIcon/LuiIcon.d.ts

@@ -14,6 +14,7 @@ export interface LuiIconProps {
     className?: string;
     title?: string;
     spanProps?: InputHTMLAttributes<HTMLInputElement>;
+    color?: string;
 }
 export declare const ICON_SIZES: {
     xs: string;
@@ -31,4 +32,4 @@ export declare const ICON_STATUS: {
     interactive: string;
     disabled: string;
 };
-export declare const LuiIcon: ({ name, className, size, title, alt, status, spanProps, }: LuiIconProps) => JSX.Element | null;
+export declare const LuiIcon: ({ name, className, size, title, alt, status, spanProps, color, }: LuiIconProps) => JSX.Element | null;

package/dist/components/LuiUpdateSplashModal/LuiUpdatesSplashModal.d.ts

@@ -1,9 +1,13 @@
-import React from 'react';
-export declare const LuiUpdatesSplashModal: React.FC<React.PropsWithChildren<{
+import { ReactNode } from 'react';
+interface SplashModalProps {
     bigImage: string;
     smallImage: string;
     header: string;
     wrapperClass?: string;
-    onClose: () => void;
     id: string;
-}>>;
+    releaseVersion: string;
+    enabled: boolean;
+    children?: ReactNode;
+}
+export declare const LuiUpdatesSplashModal: (props: SplashModalProps) => JSX.Element;
+export {};

package/dist/components/common/StorybookSupport.d.ts

@@ -2,5 +2,5 @@
  * Open menu after render so chromatic can see it.
  * Place in useEffect in story. e.g. useEffect(openHeaderMenu, []);
  */
-export declare const openHeaderMenu: () => void;
+export declare const openHeaderMenu: (menuIconClass?: string) => void;
 export declare const expandCollapsedContainer: () => void;

package/dist/components/common/UseMediaQuery.d.ts

@@ -0,0 +1,9 @@
+import { Size } from './ResponsiveUtils';
+export declare type Breakpoint = Exclude<Size | 'xxl', 'xs'>;
+export declare const breakpoints: Record<Breakpoint, number>;
+export declare const breakpointQuery: {
+    up: (bp: Breakpoint) => string;
+    down: (bp: Breakpoint) => string;
+    between: (bp1: Breakpoint, bp2: Breakpoint) => string;
+};
+export declare const useMediaQuery: (query: string) => boolean;

package/dist/index.d.ts

@@ -36,7 +36,9 @@ export { LuiFooter } from './components/LuiFooter/LuiFooter';
 export { LuiComboSelect, LuiComboSelectProps, LuiComboSelectOption, } from './components/LuiForms/LuiComboSelect/LuiComboSelect';
 export { LuiFormSectionHeader, IFormSectionHeaderProps, } from './components/LuiForms/LuiFormSection/LuiFormSectionHeader';
 export * from './components/LuiHeader/LuiHeader';
+export * from './components/LuiHeaderV2/LuiHeaderV2';
 export * from './components/LuiHeaderMenu/LuiHeaderMenus';
+export * from './components/LuiHeaderMenuV2/LuiHeaderMenusV2';
 export { LuiUpdatesSplashModal } from './components/LuiUpdateSplashModal/LuiUpdatesSplashModal';
 export { LuiModal, LuiAlertModal, LuiAlertModalButtons, } from './components/LuiModal/LuiModal';
 export { ISearchInputProps, ISearchGroupedResult, ISearchResult, LuiSearchInput, } from './components/LuiSearchInput/LuiSearchInput';
@@ -67,3 +69,4 @@ export { RadioItemRenderer } from './components/LuiListBox/Renderers/RadioItemRe
 export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/CheckboxItemRenderer';
 export { LuiSideMenu, ILuiSideMenuProps, } from './components/LuiSideMenu/LuiSideMenu';
 export { LuiSideMenuItem, ILuiSideMenuItemProps, LuiMenuItemClickHandler, } from './components/LuiSideMenu/LuiSideMenuItem';
+export { Breakpoint, breakpoints, breakpointQuery, useMediaQuery, } from './components/common/UseMediaQuery';