widenarrow-ui 1.0.13 → 1.0.14

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

@@ -1,7 +1,4 @@
 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/lib/utils.d.ts

@@ -44,10 +44,10 @@ export declare const getSortableTableState: (currentState: Array<{
     keyName: string;
 }>, newSortOption: {
     key: string;
-}) => ({
+}) => {
     keyName: string;
     ascending: boolean;
-} | Record<string, unknown>)[];
+}[];
 /**
  * @function getSortableTableState
  * @param {Array} state [{}]

package/package.json

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

package/src/components/SortableTable/SortableTable.tsx

@@ -4,7 +4,6 @@ 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,
@@ -15,6 +14,7 @@ import {
 
 import { InlineButton } from 'src/components/InlineButton';
 import { SolidSpinner } from 'src/components/SolidSpinner';
+import { Heading } from 'src/components/Typography';
 
 import { CellInterface, RowProps, SortableTableProps } from './SortableTable.types';
 import styles from './SortableTable.module.scss';
@@ -73,6 +73,14 @@ const SortableTable: FC<SortableTableProps> = ({
 			return path([0, 'keyName'], sortByLocalState) === cell.key;
 		};
 
+		if (cell.disableSort) {
+			return (
+				<Heading type={'h6'} marginBottom={'0'} withEllipsis>
+					{cell.title}
+				</Heading>
+			);
+		}
+
 		return (
 			<InlineButton
 				className={s('headerButton')}
@@ -81,11 +89,7 @@ const SortableTable: FC<SortableTableProps> = ({
 				type={optionIsPrimaryColor() ? HierarchyTypes.PRIMARY : HierarchyTypes.SECONDARY}
 				onClickCallback={() => {
 					if (sortByLocalState) {
-						// eslint-disable-next-line
-						// @ts-ignore
 						const newState = getSortableTableState(sortByLocalState, cell);
-						// eslint-disable-next-line
-						// @ts-ignore
 						return setSortByLocalState(newState);
 					}
 					is(Function, onSortCallback) && onSortCallback(cell.key);
@@ -94,7 +98,7 @@ const SortableTable: FC<SortableTableProps> = ({
 				rotateIcon={optionIsActive && arrowIsAscending}
 				withIconRight={!cell.alignRight}
 				size={SizeTypes.SMALL}
-				disabled={noData || cell.disableSort || loading}
+				disabled={noData || loading}
 				withEllipsis
 			/>
 		);
@@ -117,21 +121,17 @@ const SortableTable: FC<SortableTableProps> = ({
 			cellData_withEllipsis: cell.withEllipsis
 		});
 
-	const getCellData = (row: UnknownObjectInterface, cell: CellInterface) => {
+	// eslint-disable-next-line
+	const getCellData = (row: any, cell: CellInterface) => {
 		if (cell.customCellComponent && is(Function, cell.customCellComponent)) {
-			// eslint-disable-next-line
-			// @ts-ignore
 			return <span className={getCellDataClassName(cell)}>{cell.customCellComponent(row)}</span>;
 		}
-		// eslint-disable-next-line
-		// @ts-ignore
 		const cellValue = getCellValue(row[cell.key as keyof unknown]);
-		// eslint-disable-next-line
-		// @ts-ignore
 		return <span className={getCellDataClassName(cell)}>{cellValue}</span>;
 	};
 
-	const getRowContent = (row: UnknownObjectInterface) =>
+	// eslint-disable-next-line
+	const getRowContent = (row: any) =>
 		cells.map((cell, i) => (
 			<td
 				style={{ width: cell.width }}
@@ -152,8 +152,6 @@ const SortableTable: FC<SortableTableProps> = ({
 			return sortedData.map((row, i) => (
 				<SortableTableRow
 					row={row}
-					// eslint-disable-next-line
-					// @ts-ignore
 					key={`${row.id}${i}`}
 					withIntersectionObserver={withIntersectionObserver}
 					rowClassName={rowClassName as string}

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

@@ -1,12 +1,11 @@
 import { ReactNode } from 'react';
 import { IconTypes } from '../../constants';
-import { UnknownObjectInterface } from '../../types/styling.types';
 
 export interface RowProps {
-	row: UnknownObjectInterface;
+	row: any; // eslint-disable-line
 	rowClassName?: string;
 	withIntersectionObserver?: boolean | undefined;
-	children?: ReactNode;
+	children?: ReactNode | JSX.Element;
 }
 
 export interface CellInterface {
@@ -19,13 +18,13 @@ export interface CellInterface {
 	alignCenter?: boolean;
 	withEllipsis?: boolean;
 	toolTip?: string;
-	customHeaderCellComponent?: (cell: CellInterface) => ReactNode;
-	customCellComponent?: (row: UnknownObjectInterface) => ReactNode;
+	customHeaderCellComponent?: (cell: CellInterface) => ReactNode | JSX.Element;
+	customCellComponent?: (row: any) => ReactNode | JSX.Element; // eslint-disable-line
 }
 
 export interface SortableTableProps {
 	cells: Array<CellInterface>;
-	data: Array<UnknownObjectInterface>;
+	data: Array<any>; // eslint-disable-line
 	sortBy: Array<{
 		keyName: string;
 		ascending: boolean;

package/src/components/SwitchButton/SwitchButton.module.scss

@@ -1,5 +1,4 @@
 @import 'src/styles/mixins.scss';
-// @import '~styles/keyframes';
 
 @keyframes fadeInAnimation {
 	from {
@@ -32,8 +31,8 @@
 
 .button {
 	position: relative;
-	height: 24px;
-	width: 50px;
+	height: 20px;
+	width: 48px;
 
 	&_alignCenter {
 		margin: 0 auto;
@@ -45,6 +44,7 @@
 
 	&:hover {
 		.circle:before {
+			background: $transparent-grey-3;
 			animation-duration: 150ms;
 			animation-timing-function: ease;
 			animation-name: fadeInAnimation;
@@ -54,7 +54,7 @@
 
 	&:active {
 		.circle:before {
-			background: $transparent-grey-2;
+			background: $transparent-grey-4;
 		}
 	}
 
@@ -80,46 +80,47 @@
 .line {
 	position: absolute;
 	transition: background 200ms ease;
-	background: $grey-3;
+	background: #c2c2c2;
 	box-shadow: $box-shadow-card;
-	top: 6px;
+	top: 0;
+	left: 0;
 	display: block;
-	width: 50px;
-	height: 12px;
+	width: 100%;
+	height: 100%;
 	border-radius: 20px;
-	opacity: 0.5;
 
 	&_isActive {
-		background: $light-blue;
+		background: $blue;
 	}
 }
 
 .circle {
+	top: 2px;
+	left: 2px;
 	position: absolute;
 	transition: transform 200ms ease;
 	background: $grey-4;
 	transform: translateX(0px);
 	display: block;
-	height: 24px;
-	width: 24px;
+	height: 16px;
+	width: 16px;
 	border-radius: 50%;
+	background: white;
 
 	&:before {
 		content: '';
 		pointer-events: none;
 		position: absolute;
 		opacity: 0;
-		height: 150%;
-		width: 150%;
-		top: -25%;
-		left: -25%;
-		background: $transparent-grey-1;
+		height: 120%;
+		width: 120%;
+		top: -10%;
+		left: -10%;
 		border-radius: 50%;
 	}
 
 	&_isActive {
 		transform: translateX(28px);
-		background: $blue;
 	}
 }
 

package/src/types/styling.types.ts

@@ -1,9 +1,5 @@
 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/src/utils.ts

@@ -81,7 +81,7 @@ export const sortObjectsInArrayByMultipleKeys = <Type>(array: Type[], sortOption
 export const getSortableTableState = (
 	currentState: Array<{ ascending: boolean; keyName: string }>,
 	newSortOption: { key: string }
-): ({ keyName: string; ascending: boolean } | Record<string, unknown>)[] => {
+): { keyName: string; ascending: boolean }[] => {
 	if (!isArrayWithContent(currentState)) {
 		return [newSortOption];
 	}