widenarrow-ui 1.1.19 → 1.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "1.1.19",
+	"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/newsletterTemplate-200.tsx

@@ -5,7 +5,7 @@ interface Props {
 }
 
 const Icon: FC<Props> = ({ className }) => (
-	<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" className={className}>
+	<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="-2.5 -2.5 24 24" className={className}>
 		<path d="M6 2.5C6 2.22386 6.22386 2 6.5 2H11.5C11.7761 2 12 2.22386 12 2.5C12 2.77614 11.7761 3 11.5 3H6.5C6.22386 3 6 2.77614 6 2.5Z" />
 		<path d="M6 5C6 4.72386 6.22386 4.5 6.5 4.5H11.5C11.7761 4.5 12 4.72386 12 5C12 5.27614 11.7761 5.5 11.5 5.5H6.5C6.22386 5.5 6 5.27614 6 5Z" />
 		<path d="M6.5 7C6.22386 7 6 7.22386 6 7.5C6 7.77614 6.22386 8 6.5 8H11.5C11.7761 8 12 7.77614 12 7.5C12 7.22386 11.7761 7 11.5 7H6.5Z" />

package/src/assets/svg/newsletterTemplate-300.tsx

@@ -5,7 +5,7 @@ interface Props {
 }
 
 const Icon: FC<Props> = ({ className }) => (
-	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className={className}>
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2.5 -2.5 24 24" className={className}>
 		<path d="M14.62 5.22H9.97C9.61 5.22 9.32 5.51 9.32 5.87C9.32 6.23 9.61 6.52 9.97 6.52H14.62C14.98 6.52 15.27 6.23 15.27 5.87C15.27 5.51 14.98 5.22 14.62 5.22Z" />
 		<path d="M14.62 7.55H9.97C9.61 7.55 9.32 7.84 9.32 8.2C9.32 8.56 9.61 8.85 9.97 8.85H14.62C14.98 8.85 15.27 8.56 15.27 8.2C15.27 7.84 14.98 7.55 14.62 7.55Z" />
 		<path d="M14.62 9.87H9.97C9.61 9.87 9.32 10.16 9.32 10.52C9.32 10.88 9.61 11.17 9.97 11.17H14.62C14.98 11.17 15.27 10.88 15.27 10.52C15.27 10.16 14.98 9.87 14.62 9.87Z" />

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/DropDownItem/DropDownItem.module.scss

@@ -1,6 +1,7 @@
 @import 'src/styles/mixins.scss';
 
 .container {
+	color: $text-grey;
 	list-style: none;
 	width: 100%;
 

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

@@ -41,6 +41,15 @@ $button-l-min-width: 100px;
 	position: relative;
 	overflow: hidden;
 
+	.button_right {
+		margin-left: auto;
+	}
+
+	.button_left {
+		flex-grow: 1;
+		justify-content: left;
+	}
+
 	&_primary {
 		background-color: $main-purple;
 
@@ -62,6 +71,11 @@ $button-l-min-width: 100px;
 
 		.button {
 			@include secondaryButton(0);
+			&_disabled {
+				+ .button_right {
+					border-left: 1px solid $grey-2;
+				}
+			}
 		}
 		.button_right {
 			border-left: 1px solid $border-grey;
@@ -90,8 +104,30 @@ $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;
 	}
 
 	// Sizes
@@ -169,6 +205,7 @@ $button-l-min-width: 100px;
 
 .text {
 	display: block;
+	margin-right: auto;
 
 	&_withEllipsis {
 		padding: 2px 0;

package/src/components/MultiActionButton/MultiActionButton.tsx

@@ -15,6 +15,7 @@ const s = classNames.bind(styles);
 const MultiActionButton: FC<MultiActionButtonProps> = ({
 	className,
 	iconClassName,
+	innerClassName,
 	id,
 	type = HierarchyTypes.PRIMARY,
 	size = SizeTypes.MEDIUM,
@@ -48,7 +49,6 @@ const MultiActionButton: FC<MultiActionButtonProps> = ({
 					className={s('spinner')}
 					type={type === HierarchyTypes.PRIMARY ? HierarchyTypes.QUATERNARY : HierarchyTypes.SECONDARY}
 					size={SizeTypes.SMALL}
-					disabled
 				/>
 			) : null}
 			<div
@@ -56,10 +56,12 @@ 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,
-					innerContainer_disabled: loading || disabled
+					innerContainer_disabled: loading || disabled,
+					[innerClassName as string]: innerClassName
 				})}
 			>
 				<button

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>;
@@ -15,8 +15,9 @@ export interface MultiActionButtonProps {
 	rotateMiddleIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
 	rotateRightIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
 	disabled?: boolean;
-	className?: string;
-	iconClassName?: string;
+	className?: string; // applied to the container
+	innerClassName?: string; // applied to the inner container, styling the actual button, such as its width
+	iconClassName?: string; // applied to the icons
 	toolTip?: string;
 	id?: string | number;
 	loading?: boolean;

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',

package/src/styles/mixins.scss

@@ -280,7 +280,7 @@
 	&.loading,
 	&.disabled,
 	&_disabled {
-		@include buttonColors($white, $disabled, $text-disabled);
+		@include buttonColors($white, $grey-2, $grey-2);
 	}
 }