@linzjs/lui 17.50.0 → 17.52.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [17.52.0](https://github.com/linz/lui/compare/v17.51.0...v17.52.0) (2023-04-21)
+
+
+### Features
+
+* Adding Side Toolbar to LUI ([#928](https://github.com/linz/lui/issues/928)) ([79490a6](https://github.com/linz/lui/commit/79490a60f4daac5dce36a5b815408ac3146590f8))
+
+# [17.51.0](https://github.com/linz/lui/compare/v17.50.0...v17.51.0) (2023-04-20)
+
+
+### Features
+
+* Lui Cart view icon ([#929](https://github.com/linz/lui/issues/929)) ([a97c308](https://github.com/linz/lui/commit/a97c308d8bbd34cb506154b03b4d73f3336cc028))
+
 # [17.50.0](https://github.com/linz/lui/compare/v17.49.3...v17.50.0) (2023-04-12)
 
 

package/dist/assets/icons/cart_view.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2ZM1 3c0 .55.45 1 1 1h1l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h11c.55 0 1-.45 1-1s-.45-1-1-1H7l1.1-2h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A.996.996 0 0 0 20.01 4H5.21l-.67-1.43a.993.993 0 0 0-.9-.57H2c-.55 0-1 .45-1 1Zm16 15c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2Z" fill="#000"/></svg>

package/dist/assets/svg-content.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type LuiIconName = string | 'ic_account_circle' | 'ic_add' | 'ic_add_adopt' | 'ic_add_area_interest' | 'ic_add_circle' | 'ic_add_circle_outline' | 'ic_add_irregular_image' | 'ic_add_multiple' | 'ic_add_to_list' | 'ic_annotations' | 'ic_apps' | 'ic_arrow_back' | 'ic_arrow_back_ios' | 'ic_arrow_back_left' | 'ic_arrow_drop_down' | 'ic_arrow_drop_right' | 'ic_arrow_drop_up' | 'ic_arrow_forward_ios' | 'ic_arrow_forward_right' | 'ic_attach_file' | 'ic_attachment' | 'ic_auth_and_instruct' | 'ic_balance_parcel' | 'ic_blackwhite_greyscale' | 'ic_blocked' | 'ic_border_color' | 'ic_cancel_clear' | 'ic_certify_and_sign' | 'ic_change_password' | 'ic_check' | 'ic_check_circle' | 'ic_check_circle_outline' | 'ic_checklist' | 'ic_clear' | 'ic_close_list' | 'ic_columns' | 'ic_control_point' | 'ic_copy' | 'ic_corporate_fare' | 'ic_create' | 'ic_create_new_list' | 'ic_dealings' | 'ic_delete_outline' | 'ic_delete_solid' | 'ic_dollar_round' | 'ic_double_arrow_left' | 'ic_double_arrow_right' | 'ic_double_tick' | 'ic_drag_handle' | 'ic_drag_indicator' | 'ic_draw_irregular_line' | 'ic_enabled_users' | 'ic_error' | 'ic_error_outline' | 'ic_expand_less' | 'ic_expand_more' | 'ic_feedback_lightbulb' | 'ic_feedback_lightbulb_alt' | 'ic_file_attached' | 'ic_file_attached_outline' | 'ic_filter_list' | 'ic_flag' | 'ic_forward' | 'ic_fullscreen_frame' | 'ic_grid_view' | 'ic_help_outline' | 'ic_history' | 'ic_hourglass' | 'ic_info' | 'ic_info_outline' | 'ic_insert_invitation' | 'ic_insert_photo' | 'ic_instruments_roles' | 'ic_keyboard_arrow_down' | 'ic_keyboard_arrow_left' | 'ic_keyboard_arrow_right' | 'ic_keyboard_arrow_up' | 'ic_launch_modal' | 'ic_launch_new window_open' | 'ic_layers' | 'ic_left' | 'ic_left_col' | 'ic_line_arc' | 'ic_line_irregular' | 'ic_line_vector' | 'ic_link' | 'ic_list_add' | 'ic_list_clear' | 'ic_list_notepad' | 'ic_list_view' | 'ic_lists_folder' | 'ic_locate' | 'ic_lock' | 'ic_lock_alt' | 'ic_log_out' | 'ic_manage_adjust' | 'ic_maori_land' | 'ic_mark_linking' | 'ic_marks' | 'ic_memorials' | 'ic_menu' | 'ic_message_received' | 'ic_minimise' | 'ic_misclose_error' | 'ic_more_vert' | 'ic_navigate_before' | 'ic_navigate_next' | 'ic_note_add' | 'ic_notice_of_change' | 'ic_numbered_list' | 'ic_office_building_corporate' | 'ic_order_history' | 'ic_package' | 'ic_parcels_existing' | 'ic_parcels_new' | 'ic_pdf' | 'ic_pen_and_paper_sign' | 'ic_people_outline' | 'ic_person' | 'ic_person_add' | 'ic_picker' | 'ic_placeholder' | 'ic_plus_one' | 'ic_polygon_selection' | 'ic_pop_back' | 'ic_pre_validation' | 'ic_print' | 'ic_product_list' | 'ic_publish' | 'ic_regenerate' | 'ic_release' | 'ic_remove_circle' | 'ic_remove_circle_outline' | 'ic_request' | 'ic_requisitions' | 'ic_restore' | 'ic_round_selection' | 'ic_save_as' | 'ic_save_download' | 'ic_saved_area_interest' | 'ic_search' | 'ic_send' | 'ic_send_email_dart' | 'ic_separator' | 'ic_settings' | 'ic_sorting_down_arrow_up' | 'ic_sorting_up_arrow_up' | 'ic_square_selection' | 'ic_subdirectory_arrow_right' | 'ic_submit' | 'ic_survey' | 'ic_survey_report' | 'ic_ta_request_sent' | 'ic_table_columns' | 'ic_tax_statement' | 'ic_tick' | 'ic_tick_and_cross' | 'ic_timeline' | 'ic_title_allocation_swap' | 'ic_tune_setting_configure' | 'ic_unlink' | 'ic_unlock' | 'ic_upload' | 'ic_vector' | 'ic_vector_sequence' | 'ic_view' | 'ic_view_list' | 'ic_view_quilt' | 'ic_view_sidebar' | 'ic_view_week' | 'ic_visiblity_off' | 'ic_warning' | 'ic_warning_outline' | 'ic_waves' | 'ic_whats_new_updates' | 'ic_xml_file' | 'ic_zoom_centre' | 'ic_zoom_out' | 'ic_zoom_previous';
+export declare type LuiIconName = string | 'ic_account_circle' | 'ic_add' | 'ic_add_adopt' | 'ic_add_area_interest' | 'ic_add_circle' | 'ic_add_circle_outline' | 'ic_add_irregular_image' | 'ic_add_multiple' | 'ic_add_to_list' | 'ic_annotations' | 'ic_apps' | 'ic_arrow_back' | 'ic_arrow_back_ios' | 'ic_arrow_back_left' | 'ic_arrow_drop_down' | 'ic_arrow_drop_right' | 'ic_arrow_drop_up' | 'ic_arrow_forward_ios' | 'ic_arrow_forward_right' | 'ic_attach_file' | 'ic_attachment' | 'ic_auth_and_instruct' | 'ic_balance_parcel' | 'ic_blackwhite_greyscale' | 'ic_blocked' | 'ic_border_color' | 'ic_cancel_clear' | 'ic_cart_view' | 'ic_certify_and_sign' | 'ic_change_password' | 'ic_check' | 'ic_check_circle' | 'ic_check_circle_outline' | 'ic_checklist' | 'ic_clear' | 'ic_close_list' | 'ic_columns' | 'ic_control_point' | 'ic_copy' | 'ic_corporate_fare' | 'ic_create' | 'ic_create_new_list' | 'ic_dealings' | 'ic_delete_outline' | 'ic_delete_solid' | 'ic_dollar_round' | 'ic_double_arrow_left' | 'ic_double_arrow_right' | 'ic_double_tick' | 'ic_drag_handle' | 'ic_drag_indicator' | 'ic_draw_irregular_line' | 'ic_enabled_users' | 'ic_error' | 'ic_error_outline' | 'ic_expand_less' | 'ic_expand_more' | 'ic_feedback_lightbulb' | 'ic_feedback_lightbulb_alt' | 'ic_file_attached' | 'ic_file_attached_outline' | 'ic_filter_list' | 'ic_flag' | 'ic_forward' | 'ic_fullscreen_frame' | 'ic_grid_view' | 'ic_help_outline' | 'ic_history' | 'ic_hourglass' | 'ic_info' | 'ic_info_outline' | 'ic_insert_invitation' | 'ic_insert_photo' | 'ic_instruments_roles' | 'ic_keyboard_arrow_down' | 'ic_keyboard_arrow_left' | 'ic_keyboard_arrow_right' | 'ic_keyboard_arrow_up' | 'ic_launch_modal' | 'ic_launch_new window_open' | 'ic_layers' | 'ic_left' | 'ic_left_col' | 'ic_line_arc' | 'ic_line_irregular' | 'ic_line_vector' | 'ic_link' | 'ic_list_add' | 'ic_list_clear' | 'ic_list_notepad' | 'ic_list_view' | 'ic_lists_folder' | 'ic_locate' | 'ic_lock' | 'ic_lock_alt' | 'ic_log_out' | 'ic_manage_adjust' | 'ic_maori_land' | 'ic_mark_linking' | 'ic_marks' | 'ic_memorials' | 'ic_menu' | 'ic_message_received' | 'ic_minimise' | 'ic_misclose_error' | 'ic_more_vert' | 'ic_navigate_before' | 'ic_navigate_next' | 'ic_note_add' | 'ic_notice_of_change' | 'ic_numbered_list' | 'ic_office_building_corporate' | 'ic_order_history' | 'ic_package' | 'ic_parcels_existing' | 'ic_parcels_new' | 'ic_pdf' | 'ic_pen_and_paper_sign' | 'ic_people_outline' | 'ic_person' | 'ic_person_add' | 'ic_picker' | 'ic_placeholder' | 'ic_plus_one' | 'ic_polygon_selection' | 'ic_pop_back' | 'ic_pre_validation' | 'ic_print' | 'ic_product_list' | 'ic_publish' | 'ic_regenerate' | 'ic_release' | 'ic_remove_circle' | 'ic_remove_circle_outline' | 'ic_request' | 'ic_requisitions' | 'ic_restore' | 'ic_round_selection' | 'ic_save_as' | 'ic_save_download' | 'ic_saved_area_interest' | 'ic_search' | 'ic_send' | 'ic_send_email_dart' | 'ic_separator' | 'ic_settings' | 'ic_sorting_down_arrow_up' | 'ic_sorting_up_arrow_up' | 'ic_square_selection' | 'ic_subdirectory_arrow_right' | 'ic_submit' | 'ic_survey' | 'ic_survey_report' | 'ic_ta_request_sent' | 'ic_table_columns' | 'ic_tax_statement' | 'ic_tick' | 'ic_tick_and_cross' | 'ic_timeline' | 'ic_title_allocation_swap' | 'ic_tune_setting_configure' | 'ic_unlink' | 'ic_unlock' | 'ic_upload' | 'ic_vector' | 'ic_vector_sequence' | 'ic_view' | 'ic_view_list' | 'ic_view_quilt' | 'ic_view_sidebar' | 'ic_view_week' | 'ic_visiblity_off' | 'ic_warning' | 'ic_warning_outline' | 'ic_waves' | 'ic_whats_new_updates' | 'ic_xml_file' | 'ic_zoom_centre' | 'ic_zoom_out' | 'ic_zoom_previous';
 declare type IconNameElementMap = {
     [key in LuiIconName]?: JSX.Element;
 };

package/dist/assets/svg-content.tsx

@@ -37,6 +37,7 @@ export type LuiIconName =
   | 'ic_blocked'
   | 'ic_border_color'
   | 'ic_cancel_clear'
+  | 'ic_cart_view'
   | 'ic_certify_and_sign'
   | 'ic_change_password'
   | 'ic_check'
@@ -367,6 +368,12 @@ iconMap['ic_cancel_clear'] = (
   </svg>
 );
 
+iconMap['ic_cart_view'] = (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2ZM1 3c0 .55.45 1 1 1h1l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h11c.55 0 1-.45 1-1s-.45-1-1-1H7l1.1-2h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A.996.996 0 0 0 20.01 4H5.21l-.67-1.43a.993.993 0 0 0-.9-.57H2c-.55 0-1 .45-1 1Zm16 15c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2Z" />
+  </svg>
+);
+
 iconMap['ic_certify_and_sign'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path d="M9 4v1.38c-.83-.33-1.72-.5-2.61-.5-1.79 0-3.58.68-4.95 2.05l3.33 3.33h1.11v1.11c.86.86 1.98 1.31 3.11 1.36V15H6v3c0 1.1.9 2 2 2h10c1.66 0 3-1.34 3-3V4H9Zm-1.11 6.41V8.26H5.61L4.57 7.22a5.07 5.07 0 0 1 1.82-.34c1.34 0 2.59.52 3.54 1.46l1.41 1.41-.2.2a2.7 2.7 0 0 1-1.92.8c-.47 0-.93-.12-1.33-.34ZM19 17c0 .55-.45 1-1 1s-1-.45-1-1v-2h-6v-2.59c.57-.23 1.1-.57 1.56-1.03l.2-.2L15.59 14H17v-1.41l-6-5.97V6h8v11Z" />

package/dist/components/LuiSideToolbar/LuiSideToolbar.d.ts

@@ -0,0 +1,21 @@
+import './LuiSideToolbar.scss';
+import { ReactNode } from 'react';
+export declare type ToolbarConfig<T> = {
+    icon: string;
+    iconImage?: string;
+    isDisabled?: boolean;
+    isFetching?: boolean;
+    isToggled?: boolean;
+    key: T;
+    title: string;
+    tooltipMessage?: string;
+};
+export declare enum ToolbarDirection {
+    LEFT = "Left",
+    RIGHT = "Right"
+}
+export interface ToolbarProps {
+    direction: ToolbarDirection;
+    children: ReactNode[];
+}
+export declare function LuiSideToolbar(props: ToolbarProps): JSX.Element;

package/dist/components/LuiSideToolbar/ToolbarButton.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import './ToolbarButton.scss';
+export interface ToolbarButtonProps {
+    disabled?: boolean;
+    highlighted?: boolean;
+    iconImage?: string;
+    iconName: string;
+    loading?: boolean;
+    onClick: () => void;
+    panelKey?: string;
+    panelTitle?: string;
+    tooltip?: string;
+}
+/**
+ * Create button for using either LuiIcon or Image.
+ *
+ * @param props
+ * @returns
+ */
+export declare const ToolbarButton: ({ disabled, highlighted, iconImage, iconName, loading, onClick, panelTitle, panelKey, tooltip, }: ToolbarButtonProps) => JSX.Element;

package/dist/components/LuiSideToolbar/ToolbarIcon.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface ToolbarIconProps {
+    iconImage?: string;
+    iconName: string;
+}
+/**
+ * Show LuiIcon or Image.
+ *
+ * @param param
+ * @returns
+ */
+export declare const ToolbarIcon: ({ iconImage, iconName }: ToolbarIconProps) => JSX.Element;
+export {};

package/dist/components/LuiSideToolbar/ToolbarItem.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface ToolbarItemProps {
+    loading?: boolean;
+    onClick?: () => void;
+    tooltip?: string;
+    children: ReactNode;
+    dataTestId?: string;
+}
+/**
+ * Allows any item to be added into the toolbar (with appropriate styles and size)
+ *
+ * @param props
+ * @returns
+ */
+export declare const ToolbarItem: (props: ToolbarItemProps) => JSX.Element;
+export declare const ToolbarItemSeparator: () => JSX.Element;

package/dist/index.js

@@ -218,6 +218,8 @@ iconMap['ic_border_color'] = (React__default["default"].createElement("svg", { x
     React__default["default"].createElement("path", { d: "M0 20.016h24V24H0v-3.984zM20.719 4.031 18.75 6 15 2.25 16.969.281Q17.25 0 17.672 0t.703.281l2.344 2.344q.281.281.281.703t-.281.703zm-2.953 2.953L7.735 17.015h-3.75v-3.75L14.016 3.234z" })));
 iconMap['ic_cancel_clear'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default["default"].createElement("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2Zm4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41Z" })));
+iconMap['ic_cart_view'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+    React__default["default"].createElement("path", { d: "M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2ZM1 3c0 .55.45 1 1 1h1l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h11c.55 0 1-.45 1-1s-.45-1-1-1H7l1.1-2h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A.996.996 0 0 0 20.01 4H5.21l-.67-1.43a.993.993 0 0 0-.9-.57H2c-.55 0-1 .45-1 1Zm16 15c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2Z" })));
 iconMap['ic_certify_and_sign'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M9 4v1.38c-.83-.33-1.72-.5-2.61-.5-1.79 0-3.58.68-4.95 2.05l3.33 3.33h1.11v1.11c.86.86 1.98 1.31 3.11 1.36V15H6v3c0 1.1.9 2 2 2h10c1.66 0 3-1.34 3-3V4H9Zm-1.11 6.41V8.26H5.61L4.57 7.22a5.07 5.07 0 0 1 1.82-.34c1.34 0 2.59.52 3.54 1.46l1.41 1.41-.2.2a2.7 2.7 0 0 1-1.92.8c-.47 0-.93-.12-1.33-.34ZM19 17c0 .55-.45 1-1 1s-1-.45-1-1v-2h-6v-2.59c.57-.23 1.1-.57 1.56-1.03l.2-.2L15.59 14H17v-1.41l-6-5.97V6h8v11Z" })));
 iconMap['ic_change_password'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },