widenarrow-ui 1.0.11 → 1.0.13

package/lib/types/styling.types.d.ts

@@ -1,4 +1,7 @@
 import { SizeTypes, ColorTypes, IconTypes, HierarchyTypes } from 'src/constants';
+export interface UnknownObjectInterface {
+    [key: string]: unknown;
+}
 export interface MarginInterface {
     margin?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
     marginX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "1.0.11",
+	"version": "1.0.13",
 	"description": "A storybook 6 typeScript component library used for Wide Narrow by infodesk",
 	"main": "lib/index.js",
 	"module": "lib/index.esm.js",
@@ -61,7 +61,7 @@
 		"storybook": "7.4.2",
 		"storybook-css-modules": "1.0.8",
 		"tsconfig-paths-webpack-plugin": "4.1.0",
-		"typescript": "5.0.4"
+		"typescript": "4.7.3"
 	},
 	"peerDependencies": {
 		"lazysizes": "5.2.2",

package/src/assets/svg/notificationPlus.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+
+interface Props {
+	className?: string;
+}
+
+const Icon: FC<Props> = ({ className }) => (
+	<svg className={className} width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.2901 17.79L18.0001 16.5V11.5C18.0001 8.43 16.3601 5.86 13.5001 5.18V4.5C13.5001 3.67 12.8301 3 12.0001 3C11.1701 3 10.5001 3.67 10.5001 4.5V5.18C7.63005 5.86 6.00005 8.42 6.00005 11.5V16.5L4.71005 17.79C4.08005 18.42 4.52005 19.5 5.41005 19.5H18.5801C19.4801 19.5 19.9201 18.42 19.2901 17.79ZM12.0001 22.5C13.1001 22.5 14.0001 21.6 14.0001 20.5H10.0001C10.0001 21.6 10.8901 22.5 12.0001 22.5Z"
+		/>
+		<path
+			d="M17 14.125C17.3452 14.125 17.625 13.8452 17.625 13.5V11.125H20C20.3452 11.125 20.625 10.8452 20.625 10.5V8.5C20.625 8.15482 20.3452 7.875 20 7.875H17.625V5.5C17.625 5.15482 17.3452 4.875 17 4.875H15C14.6548 4.875 14.375 5.15482 14.375 5.5V7.875H12C11.6548 7.875 11.375 8.15482 11.375 8.5V10.5C11.375 10.8452 11.6548 11.125 12 11.125H14.375V13.5C14.375 13.8452 14.6548 14.125 15 14.125H17Z"
+			stroke="white"
+			strokeWidth="1.25"
+			strokeLineJoin="round"
+		/>
+	</svg>
+);
+
+export default Icon;

package/src/components/Icon/getIconFromConstant.tsx

@@ -121,6 +121,7 @@ import NotificationIcon from 'src/assets/svg/notification';
 import NotificationActiveIcon from 'src/assets/svg/notificationActive';
 import NotificationSettingsIcon from 'src/assets/svg/notificationSettings';
 import NotificationOffIcon from 'src/assets/svg/notificationOff';
+import NotificationPlusIcon from 'src/assets/svg/notificationPlus';
 import OpenInNewIcon from 'src/assets/svg/openInNew';
 import PaletteIcon from 'src/assets/svg/palette';
 import PauseCircleIcon from 'src/assets/svg/pauseCircle';
@@ -444,6 +445,8 @@ const getIconFromConstant = (icon: Partial<IconTypes>, getIconClassName: (additi
 			return <NotificationSettingsIcon className={getIconClassName()} />;
 		case IconTypes.NOTIFICATION_OFF:
 			return <NotificationOffIcon className={getIconClassName()} />;
+		case IconTypes.NOTIFICATION_PLUS:
+			return <NotificationPlusIcon className={getIconClassName()} />;
 		case IconTypes.NO_CHANGE:
 			return <NoChangeIcon className={getIconClassName()} />;
 		case IconTypes.NO_DIRECTION:

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

@@ -162,6 +162,10 @@ $button-l-min-width: 100px;
 	margin-right: $base-size;
 }
 
+.marginLeft {
+	margin-left: $base-size;
+}
+
 .spinner {
 	@include absolute-center;
 	z-index: 1;

package/src/components/MultiActionButton/MultiActionButton.tsx

@@ -13,6 +13,10 @@ import { MultiActionButtonProps } from './MultiActionButton.types';
 
 const s = classNames.bind(styles);
 
+// middleIcon;
+// middleIconSize;
+// rotateMiddleIconByDegree;
+
 const MultiActionButton: FC<MultiActionButtonProps> = ({
 	className,
 	iconClassName,
@@ -20,12 +24,15 @@ const MultiActionButton: FC<MultiActionButtonProps> = ({
 	type = HierarchyTypes.PRIMARY,
 	size = SizeTypes.MEDIUM,
 	rotateLeftIconByDegree,
+	rotateMiddleIconByDegree,
 	rotateRightIconByDegree,
 	text,
 	toolTip,
 	leftIconSize = SizeTypes.MEDIUM,
+	middleIconSize = SizeTypes.MEDIUM,
 	rightIconSize = SizeTypes.MEDIUM,
 	leftIcon,
+	middleIcon,
 	rightIcon,
 	withEllipsis,
 	onRightClickCallback,
@@ -80,6 +87,14 @@ const MultiActionButton: FC<MultiActionButtonProps> = ({
 					>
 						{text}
 					</span>
+					{middleIcon ? (
+						<Icon
+							icon={middleIcon}
+							size={middleIconSize || rightIconSize || size}
+							rotateIconByDegree={rotateMiddleIconByDegree}
+							className={s({ marginLeft: !!text, [iconClassName as string]: iconClassName })}
+						/>
+					) : null}
 				</button>
 				{withSeparator ? <Separator marginX={'0'} color={type === HierarchyTypes.PRIMARY ? ColorTypes.WHITE : ColorTypes.GREY_4} /> : null}
 				<button className={s({ button: true, button_right: true, button_disabled: loading || disabled })} onClick={onRightClickCallback}>

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

@@ -8,10 +8,13 @@ export interface MultiActionButtonProps {
 	type?: Partial<HierarchyTypes>;
 	size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 	leftIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+	middleIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 	rightIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 	leftIcon?: Partial<IconTypes>;
+	middleIcon?: Partial<IconTypes>;
 	rightIcon?: Partial<IconTypes>;
 	rotateLeftIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+	rotateMiddleIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
 	rotateRightIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
 	disabled?: boolean;
 	className?: string;

package/src/components/SortableTable/SortableTable.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames/bind';
 import { useInView } from 'react-intersection-observer';
 
 import { SizeTypes, HierarchyTypes, IconTypes } from 'src/constants';
+import { UnknownObjectInterface } from 'src/types/styling.types';
 import {
 	isArrayWithContent,
 	sortObjectsInArrayByMultipleKeys,
@@ -116,7 +117,7 @@ const SortableTable: FC<SortableTableProps> = ({
 			cellData_withEllipsis: cell.withEllipsis
 		});
 
-	const getCellData = (row: Record<string | number, unknown>, cell: CellInterface) => {
+	const getCellData = (row: UnknownObjectInterface, cell: CellInterface) => {
 		if (cell.customCellComponent && is(Function, cell.customCellComponent)) {
 			// eslint-disable-next-line
 			// @ts-ignore
@@ -130,7 +131,7 @@ const SortableTable: FC<SortableTableProps> = ({
 		return <span className={getCellDataClassName(cell)}>{cellValue}</span>;
 	};
 
-	const getRowContent = (row: Record<string | number, unknown>) =>
+	const getRowContent = (row: UnknownObjectInterface) =>
 		cells.map((cell, i) => (
 			<td
 				style={{ width: cell.width }}

package/src/components/SortableTable/SortableTable.types.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { IconTypes } from '../../constants';
+import { UnknownObjectInterface } from '../../types/styling.types';
 
 export interface RowProps {
-	row: Record<string | number, unknown>;
+	row: UnknownObjectInterface;
 	rowClassName?: string;
 	withIntersectionObserver?: boolean | undefined;
 	children?: ReactNode;
@@ -19,12 +20,12 @@ export interface CellInterface {
 	withEllipsis?: boolean;
 	toolTip?: string;
 	customHeaderCellComponent?: (cell: CellInterface) => ReactNode;
-	customCellComponent?: (row: Record<string | number, unknown>) => ReactNode;
+	customCellComponent?: (row: UnknownObjectInterface) => ReactNode;
 }
 
 export interface SortableTableProps {
 	cells: Array<CellInterface>;
-	data: Array<Record<string | number, unknown>>;
+	data: Array<UnknownObjectInterface>;
 	sortBy: Array<{
 		keyName: string;
 		ascending: boolean;

package/src/constants.ts

@@ -119,6 +119,7 @@ export enum IconTypes {
 	NOTIFICATION_ACTIVE = 'iconNotificationActive',
 	NOTIFICATION_SETTINGS = 'iconNotificationSettings',
 	NOTIFICATION_OFF = 'iconNotificationOff',
+	NOTIFICATION_PLUS = 'iconNotificationPlus',
 	NO_CHANGE = 'iconNoChange',
 	NO_DIRECTION = 'iconNoDirection',
 	OPEN_IN_NEW = 'iconOpenInNew',

package/src/types/styling.types.ts

@@ -1,5 +1,9 @@
 import { SizeTypes, ColorTypes, IconTypes, HierarchyTypes } from 'src/constants';
 
+export interface UnknownObjectInterface {
+	[key: string]: unknown;
+}
+
 export interface MarginInterface {
 	margin?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
 	marginX?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';