widenarrow-ui 1.1.21 → 1.1.23

package/package.json

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

package/src/assets/svg/chevronRightCircle-200.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="M535.46-480 425.85-370.38q-5.62 5.42-5.62 13.55 0 8.14 5.62 13.98 5.84 6.62 14.27 6.23 8.42-.38 14.26-6.23l114.54-114.53q9.7-9.7 9.7-22.62 0-12.92-9.7-22.62L454.15-617.38q-5.84-5.85-14.15-6.12-8.31-.27-14.15 6.35-5.62 5.84-5.35 14.15.27 8.31 6.12 14.15L535.46-480Zm-55.33 360q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+	</svg>
+);
+
+export default Icon;

package/src/assets/svg/chevronRightCircle-300.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="M521.23-480 418.92-377.69q-8.3 8.21-8.3 20.53 0 12.31 8.3 21.24 8.93 9.3 21.39 9.11 12.46-.19 21.38-9.11l118.77-118.77q10.85-10.85 10.85-25.31 0-14.46-10.85-25.31L461.08-624.69q-8.93-8.92-21.08-8.81-12.15.12-21.08 9.42-8.3 8.93-8.42 21.08-.11 12.15 8.81 21.08L521.23-480Zm-41.16 380q-78.84 0-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1 100-479.93q0-78.84 29.92-148.21t81.21-120.68q51.29-51.31 120.63-81.25Q401.1-860 479.93-860q78.84 0 148.21 29.92t120.68 81.21q51.31 51.29 81.25 120.63Q860-558.9 860-480.07q0 78.84-29.92 148.21t-81.21 120.68q-51.29 51.31-120.63 81.25Q558.9-100 480.07-100Zm-.07-60q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+	</svg>
+);
+
+export default Icon;

package/src/assets/svg/sortAi.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+interface Props {
+	className?: string;
+}
+
+const Icon: FC<Props> = ({ className }) => (
+	<svg width="24" height="24" viewBox="0 0 24 24" className={className} xmlns="http://www.w3.org/2000/svg">
+		<path d="M3.71575 17.2843C3.85942 17.4281 4.0375 17.5 4.25 17.5H8.125C8.3375 17.5 8.51558 17.4282 8.65925 17.2845C8.80308 17.141 8.875 16.9629 8.875 16.7503C8.875 16.5378 8.80308 16.3596 8.65925 16.2158C8.51558 16.0719 8.3375 16 8.125 16H4.25C4.0375 16 3.85942 16.0718 3.71575 16.2155C3.57192 16.359 3.5 16.5371 3.5 16.7498C3.5 16.9622 3.57192 17.1404 3.71575 17.2843Z" />
+		<path d="M3.71575 12.5342C3.85942 12.6781 4.0375 12.75 4.25 12.75H13.9327C14.1452 12.75 14.3233 12.6782 14.467 12.5345C14.6108 12.391 14.6827 12.2129 14.6827 12.0003C14.6827 11.7878 14.6108 11.6096 14.467 11.4658C14.3233 11.3219 14.1452 11.25 13.9327 11.25H4.25C4.0375 11.25 3.85942 11.3218 3.71575 11.4655C3.57192 11.609 3.5 11.7871 3.5 11.9997C3.5 12.2122 3.57192 12.3904 3.71575 12.5342Z" />
+		<path d="M3.71575 7.78425C3.85942 7.92808 4.0375 8 4.25 8H19.75C19.9625 8 20.1406 7.92817 20.2843 7.7845C20.4281 7.641 20.5 7.46292 20.5 7.25025C20.5 7.03775 20.4281 6.85958 20.2843 6.71575C20.1406 6.57192 19.9625 6.5 19.75 6.5H4.25C4.0375 6.5 3.85942 6.57183 3.71575 6.7155C3.57192 6.859 3.5 7.03708 3.5 7.24975C3.5 7.46225 3.57192 7.64042 3.71575 7.78425Z" />
+		<path d="M18.6976 13.5926L19.9282 14.4641L19.7888 12.9626L20.6603 11.732L19.1588 11.8714L17.9282 11L18.0676 12.5014L17.1962 13.732L18.6976 13.5926Z" />
+		<path d="M18.6962 16.3301L16.4421 16.5461L14.5981 15.232L14.814 17.4861L13.5 19.3301L15.754 19.1142L17.5981 20.4282L17.3821 18.1742L18.6962 16.3301Z" />
+	</svg>
+);
+
+export default Icon;

package/src/components/DropDown/DropDown.stories.tsx

@@ -9,6 +9,7 @@ import { MultiActionButton } from 'src/components/MultiActionButton';
 import { DropDownItem } from 'src/components/DropDownItem';
 
 import { ColorTypes, IconTypes } from 'src/constants';
+import { InlineButton } from '../InlineButton';
 
 const meta: Meta<typeof DropDown> = {
 	title: 'Components/DropDown',
@@ -45,6 +46,23 @@ export const WithActiveSelect: Story = {
 	)
 };
 
+export const AsInlineButton: Story = {
+	args: {},
+	render: ({ ...props }) => (
+		<div style={{ width: '80px', height: '200px', padding: '24px' }}>
+			<DropDown
+				{...props}
+				buttonComponent={<InlineButton text={'Show more'} icon={IconTypes.CHEVRON_DOWN} withIconRight />}
+				title={'Select'}
+			>
+				<DropDownItem active text={'Recently visited'} onClickCallback={() => undefined} />
+				<DropDownItem active={false} text={'Newest'} onClickCallback={() => undefined} />
+				<DropDownItem active={false} text={'Oldest'} onClickCallback={() => undefined} closeDropDownOnClick={false} />
+			</DropDown>
+		</div>
+	)
+};
+
 export const Complex: Story = {
 	args: {},
 	render: ({ ...props }) => (

package/src/components/DropDown/DropDown.tsx

@@ -8,6 +8,7 @@ import { ColorTypes, HierarchyTypes } from 'src/constants';
 
 import { Heading } from 'src/components/Typography/Typography';
 import { SolidSpinner } from 'src/components/SolidSpinner/SolidSpinner';
+import { Box } from 'src/components/Box';
 
 import useHandleClickOutside from './useHandleClickOutside';
 
@@ -187,11 +188,11 @@ const DropDown: FC<DropDownProps> = ({
 	return (
 		<div ref={containerRef}>
 			{/* ButtonComponent */}
-			<div ref={setReferenceElement}>
+			<Box displayFlex alignItems={'center'} ref={setReferenceElement}>
 				{isValidElement(buttonComponent)
 					? cloneElement(buttonComponent, { [buttonCallbackName]: (e: MouseEvent) => onClickButton(e) })
 					: null}
-			</div>
+			</Box>
 			{/* DropDown */}
 			{isOpen && (
 				<div

package/src/components/Icon/getIconFromConstant.tsx

@@ -34,6 +34,8 @@ import CheckIcon from 'src/assets/svg/check';
 import CheckIndeterminateIcon from 'src/assets/svg/checkIndeterminate';
 import ChevronIcon from 'src/assets/svg/chevron';
 import ChevronLeftIcon from 'src/assets/svg/chevronLeft';
+import ChevronRightCircleIcon200 from 'src/assets/svg/chevronRightCircle-200';
+import ChevronRightCircleIcon300 from 'src/assets/svg/chevronRightCircle-300';
 import ChevronRightIcon from 'src/assets/svg/chevronRight';
 import ChevronUpIcon from 'src/assets/svg/chevronUp';
 import ClassificationAddIcon200 from 'src/assets/svg/classificationAdd-200';
@@ -167,6 +169,7 @@ import SettingsIcon200 from 'src/assets/svg/settings-200';
 import SettingsIcon300 from 'src/assets/svg/settings-300';
 import ShareIcon from 'src/assets/svg/share';
 import SortIcon from 'src/assets/svg/sort';
+import SortAiIcon from 'src/assets/svg/sortAi';
 import SparkleFilledIcon from 'src/assets/svg/sparkleFilled';
 import SparkleGradientFilledIcon from 'src/assets/svg/sparkleGradientFilled';
 import SparkleIcon from 'src/assets/svg/sparkle';
@@ -216,6 +219,10 @@ const getIconFromConstant = (icon: Partial<IconTypes>, getIconClassName: (additi
 			return <AddSectionBelowIcon className={getIconClassName('icon_rotate_270')} />;
 		case IconTypes.RESET:
 			return <ResetIcon className={getIconClassName('icon_flip')} />;
+		case IconTypes.CHEVRON_LEFT_CIRCLE_200:
+			return <ChevronRightCircleIcon200 className={getIconClassName('icon_flip')} />;
+		case IconTypes.CHEVRON_LEFT_CIRCLE_300:
+			return <ChevronRightCircleIcon300 className={getIconClassName('icon_flip')} />;
 		case IconTypes.NAVIGATE_LEFT_LARGE:
 			return <NavigateRightLargeIcon className={getIconClassName('icon_flip')} />;
 		case IconTypes.EXPAND_ARROWS:
@@ -551,6 +558,8 @@ const getIconFromConstant = (icon: Partial<IconTypes>, getIconClassName: (additi
 			return <ShareIcon className={getIconClassName()} />;
 		case IconTypes.SORT:
 			return <SortIcon className={getIconClassName()} />;
+		case IconTypes.SORT_AI:
+			return <SortAiIcon className={getIconClassName()} />;
 		case IconTypes.SPARKLE:
 			return <SparkleIcon className={getIconClassName()} />;
 		case IconTypes.SPARKLE_GRADIENT:

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

@@ -119,12 +119,16 @@ $button-l-min-width: 100px;
 			&_disabled {
 				@include buttonColors($grey-3, $grey-3, $white);
 				svg {
-					fill: $grey-5 !important;
+					fill: $white !important;
 				}
 			}
 		}
 	}
 
+	.button_noButtonRight {
+		padding-right: 12px !important;
+	}
+
 	&_disabled {
 		pointer-events: none;
 		border-color: $grey-2;

package/src/components/MultiActionButton/MultiActionButton.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MultiActionButton } from 'src/components/MultiActionButton';
-import { HierarchyTypes, IconTypes } from 'src/constants';
+import { HierarchyTypes, IconTypes, SizeTypes } from 'src/constants';
 
 const meta: Meta<typeof MultiActionButton> = {
 	title: 'Components/MultiActionButton',
@@ -14,7 +14,9 @@ type Story = StoryObj<typeof MultiActionButton>;
 
 export const Default: Story = {
 	args: {
-		text: 'Add user',
+		text: 'Saved searches',
+		type: HierarchyTypes.PRIMARY,
+		size: SizeTypes.MEDIUM,
 		rightIcon: IconTypes.CHEVRON_DOWN
 	}
 };

package/src/components/MultiActionButton/MultiActionButton.tsx

@@ -66,7 +66,13 @@ const MultiActionButton: FC<MultiActionButtonProps> = ({
 			>
 				<button
 					id={id ? `${id}` : ''}
-					className={s({ button: true, button_left: true, button_disabled: loading || disabled, button_withEllipsis: withEllipsis })}
+					className={s({
+						button: true,
+						button_left: true,
+						button_disabled: loading || disabled,
+						button_noButtonRight: !rightIcon,
+						button_withEllipsis: withEllipsis
+					})}
 					disabled={loading || disabled}
 					onClick={!loading ? onLeftClickCallback : undefined}
 					autoFocus={autoFocus}
@@ -97,14 +103,16 @@ const MultiActionButton: FC<MultiActionButtonProps> = ({
 						/>
 					) : null}
 				</button>
-				<button className={s({ button: true, button_right: true, button_disabled: loading || disabled })} onClick={onRightClickCallback}>
-					<Icon
-						icon={rightIcon}
-						size={iconSize || size === SizeTypes.SMALL ? SizeTypes.SMALL : SizeTypes.MEDIUM}
-						className={iconClassName}
-						rotateIconByDegree={rotateRightIconByDegree}
-					/>
-				</button>
+				{rightIcon ? (
+					<button className={s({ button: true, button_right: true, button_disabled: loading || disabled })} onClick={onRightClickCallback}>
+						<Icon
+							icon={rightIcon}
+							size={iconSize || size === SizeTypes.SMALL ? SizeTypes.SMALL : SizeTypes.MEDIUM}
+							className={iconClassName}
+							rotateIconByDegree={rotateRightIconByDegree}
+						/>
+					</button>
+				) : null}
 			</div>
 		</div>
 	);

package/src/constants.ts

@@ -35,6 +35,8 @@ export enum IconTypes {
 	CHEVRON_LEFT = 'iconChevronLeft',
 	CHEVRON_RIGHT = 'iconChevronRight',
 	CHEVRON_UP = 'iconChevronUp',
+	CHEVRON_LEFT_CIRCLE_200 = 'iconChevronLeftCircle200',
+	CHEVRON_LEFT_CIRCLE_300 = 'iconChevronLeftCircle300',
 	CLASSIFICATION = 'iconClassification',
 	CLASSIFICATION_ADD_200 = 'iconClassificationAdd200',
 	CLASSIFICATION_ADD_300 = 'iconClassificationAdd300',
@@ -164,6 +166,7 @@ export enum IconTypes {
 	SETTINGS_300 = 'iconSettings300',
 	SHARE = 'iconShare',
 	SORT = 'iconSort',
+	SORT_AI = 'iconSortAi',
 	SSO = 'iconSSO',
 	SSO_CONFIG = 'iconSSOConfig',
 	SPARKLE = 'iconSparkle',