widenarrow-ui 1.1.20 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "1.1.20",
+	"version": "1.1.21",
 	"description": "A storybook 6 typeScript component library used for Wide Narrow by infodesk",
 	"main": "lib/index.js",
 	"module": "lib/index.esm.js",

package/src/assets/svg/searchLexical.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+interface Props {
+	className?: string;
+}
+
+const Icon: FC<Props> = ({ className }) => (
+	<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className={className}>
+		<path d="M130-220.77q-12.75 0-21.37-8.63-8.63-8.63-8.63-21.38 0-12.76 8.63-21.37 8.62-8.62 21.37-8.62h331.16q12.75 0 21.37 8.63 8.62 8.63 8.62 21.38 0 12.76-8.62 21.37-8.62 8.62-21.37 8.62H130Zm0-195.77q-12.75 0-21.37-8.63-8.63-8.63-8.63-21.38 0-12.76 8.63-21.37 8.62-8.62 21.37-8.62h129.23q12.75 0 21.38 8.63 8.62 8.63 8.62 21.38 0 12.76-8.62 21.38-8.63 8.61-21.38 8.61H130Zm0-195.77q-12.75 0-21.37-8.63-8.63-8.63-8.63-21.38 0-12.76 8.63-21.37 8.62-8.62 21.37-8.62h129.23q12.75 0 21.38 8.63 8.62 8.63 8.62 21.39 0 12.75-8.62 21.37-8.63 8.61-21.38 8.61H130Zm428.46 272.69q-75.18 0-128.16-52.53-52.99-52.54-52.99-127.66 0-75.11 53.01-127.65Q483.34-700 558.55-700q75.22 0 128.14 52.54 52.92 52.54 52.92 127.46 0 27.85-8.69 54.81t-25.69 49.42l133.69 132.54q8.69 8.18 8.69 20.82t-8.69 21.33q-8.18 8.31-20.82 8.31t-21.33-8.31L663.08-373.62q-22.85 16.62-49.81 25.31-26.96 8.69-54.81 8.69Zm0-60q50.48 0 85.82-35 35.34-35 35.34-85.19T644.28-605q-35.34-35-85.82-35-50.48 0-85.82 35-35.33 35-35.33 85.19t35.33 85.19q35.34 35 85.82 35Z" />
+	</svg>
+);
+
+export default Icon;

package/src/components/Icon/getIconFromConstant.tsx

@@ -159,6 +159,7 @@ import SavedSearchIcon300 from 'src/assets/svg/savedSearch-300';
 import ScheduleIcon from 'src/assets/svg/schedule';
 import SearchIcon200 from 'src/assets/svg/search-200';
 import SearchIcon300 from 'src/assets/svg/search-300';
+import SearchLexicalIcon from 'src/assets/svg/searchLexical';
 import SearchPersonIcon from 'src/assets/svg/searchPerson';
 import SendIcon from 'src/assets/svg/send';
 import SendListIcon from 'src/assets/svg/sendList';
@@ -534,6 +535,8 @@ const getIconFromConstant = (icon: Partial<IconTypes>, getIconClassName: (additi
 			return <SearchIcon200 className={getIconClassName()} />;
 		case IconTypes.SEARCH_300:
 			return <SearchIcon300 className={getIconClassName()} />;
+		case IconTypes.SEARCH_LEXICAL:
+			return <SearchLexicalIcon className={getIconClassName()} />;
 		case IconTypes.SEARCH_USER:
 			return <SearchPersonIcon className={getIconClassName()} />;
 		case IconTypes.SEND:

package/src/components/InlineButton/InlineButton.module.scss

@@ -92,6 +92,7 @@
 	text-overflow: ellipsis;
 	display: inline-block;
 	align-items: center;
+	line-height: 1.2;
 
 	&_withIconLeft {
 		padding-left: $half-base-size;

package/src/components/MultiActionButton/MultiActionButton.module.scss

@@ -104,6 +104,27 @@ $button-l-min-width: 100px;
 		}
 	}
 
+	&_quaternary {
+		@include buttonColors($mint-1, $mint-1, $main-grey);
+
+		.button {
+			&:hover {
+				@include buttonColors($mint-2, $mint-2, $main-grey);
+			}
+			&:active {
+				@include buttonColors($mint-3, $mint-3, $main-grey);
+			}
+			&.loading,
+			&.disabled,
+			&_disabled {
+				@include buttonColors($grey-3, $grey-3, $white);
+				svg {
+					fill: $grey-5 !important;
+				}
+			}
+		}
+	}
+
 	&_disabled {
 		pointer-events: none;
 		border-color: $grey-2;

package/src/components/MultiActionButton/MultiActionButton.tsx

@@ -56,6 +56,7 @@ const MultiActionButton: FC<MultiActionButtonProps> = ({
 					innerContainer_primary: type === HierarchyTypes.PRIMARY,
 					innerContainer_secondary: type === HierarchyTypes.SECONDARY,
 					innerContainer_tertiary: type === HierarchyTypes.TERTIARY,
+					innerContainer_quaternary: type === HierarchyTypes.QUATERNARY,
 					innerContainer_small: size === SizeTypes.SMALL,
 					innerContainer_medium: size === SizeTypes.MEDIUM,
 					innerContainer_large: size === SizeTypes.LARGE,

package/src/components/MultiActionButton/MultiActionButton.types.ts

@@ -5,7 +5,7 @@ export interface MultiActionButtonProps {
 	text?: string;
 	onLeftClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
 	onRightClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
-	type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY | HierarchyTypes.TERTIARY;
+	type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY | HierarchyTypes.TERTIARY | HierarchyTypes.QUATERNARY;
 	size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 	iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 	leftIcon?: Partial<IconTypes>;

package/src/constants.ts

@@ -157,6 +157,7 @@ export enum IconTypes {
 	SEARCH_200 = 'iconSearch200',
 	SEARCH_300 = 'iconSearch300',
 	SEARCH_USER = 'iconSearchUser',
+	SEARCH_LEXICAL = 'iconSearchLexical',
 	SEND = 'iconSend',
 	SEND_LIST = 'iconSendList',
 	SETTINGS_200 = 'iconSettings200',