widenarrow-ui 0.1.21 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "0.1.21",
+	"version": "0.1.23",
 	"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/DropDownItem/DropDownItem.module.scss

@@ -26,6 +26,14 @@
 	justify-content: space-between;
 	transition: background 50ms ease-in;
 
+	.text {
+		transition: color 50ms ease-in;
+	}
+
+	svg {
+		transition: fill 50ms ease-in;
+	}
+
 	&_small {
 		padding: 8px 12px;
 

package/src/components/FacetButton/FacetButton.module.scss

@@ -51,10 +51,7 @@ $button-s-min-width: 30px;
 	min-width: $button-s-min-width;
 	font-size: $font-size-s;
 	line-height: 1;
-
-	&_truncateText {
-		max-width: 100%;
-	}
+	max-width: 100%;
 
 	&_disabled {
 		pointer-events: none;
@@ -73,6 +70,10 @@ $button-s-min-width: 30px;
 
 .text {
 	display: block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 2px 0;
 }
 
 .iconContainer {

package/src/components/ListSkeleton/ListSkeleton.module.scss

@@ -0,0 +1,46 @@
+@import 'src/styles/mixins.scss';
+
+.container {
+	@include reset-list;
+
+	width: 100%;
+}
+
+.item {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	background-color: red;
+	width: 100%;
+
+	&_withBorder {
+		border: 1px solid transparent;
+	}
+
+	&_withBorderRadius {
+		border-radius: $border-radius;
+	}
+}
+
+.heading,
+.text {
+	display: block;
+	height: 16px;
+}
+
+.heading {
+	width: 100%;
+	max-width: 100px;
+	margin-bottom: $base-size;
+}
+
+.text {
+	width: 100%;
+	max-width: 250px;
+}
+
+@include margin(8);
+@include padding(8);
+@include backgroundColor('backgroundColor');
+@include backgroundColor('contentColor');
+@include borderColor;

package/src/components/ListSkeleton/ListSkeleton.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ListSkeleton from 'src/components/ListSkeleton';
+
+const meta: Meta<typeof ListSkeleton> = {
+	title: 'Components/ListSkeleton',
+	component: ListSkeleton
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListSkeleton>;
+
+export const Default: Story = {
+	args: {},
+	render: ({ ...props }) => (
+		<div style={{ width: '380px', display: 'flex', justifyContent: 'center' }}>
+			<ListSkeleton {...props} />
+		</div>
+	)
+};
+
+export const Primary: Story = {
+	args: {},
+	render: ({ ...props }) => (
+		<div style={{ width: '380px', display: 'flex', justifyContent: 'center' }}>
+			<ListSkeleton {...props} />
+		</div>
+	)
+};

package/src/components/ListSkeleton/ListSkeleton.tsx

@@ -0,0 +1,81 @@
+import { FC, Fragment } from 'react';
+import classNames from 'classnames/bind';
+import { is } from 'ramda';
+
+import { ColorTypes } from 'src/constants';
+
+import styles from './ListSkeleton.module.scss';
+
+const s = classNames.bind(styles);
+
+interface Props {
+	items: number;
+	itemHeight?: number;
+	className?: string;
+	itemClassName?: string;
+	withBorderRadius?: boolean;
+	withContent?: boolean;
+	backgroundColor?: `${ColorTypes}`;
+	backgroundColor?: `${ColorTypes}`;
+	marginBottom?: string;
+	padding?: string;
+	borderColor?: `${ColorTypes}`;
+	contentColor?: `${ColorTypes}`;
+}
+
+const ListSkeleton: FC<Props> = ({
+	items = 6,
+	className,
+	itemClassName,
+	backgroundColor = 'white',
+	borderColor,
+	contentColor = ColorTypes.GREY_2,
+	itemHeight = 60,
+	marginBottom = '1',
+	padding = '1',
+	withContent,
+	withBorderRadius
+}) => {
+	const getItemMarkup = (key) => (
+		<li
+			key={key}
+			className={s('item', {
+				[`backgroundColor_${backgroundColor}`]: is(String, backgroundColor),
+				[`borderColor_${borderColor}`]: is(String, borderColor),
+				[`marginBottom_${marginBottom}`]: is(String, marginBottom),
+				[`padding_${padding}`]: is(String, padding),
+				item_withBorderRadius: withBorderRadius,
+				item_withBorder: !!withBorderRadius || !!borderColor,
+				[itemClassName as string]: itemClassName
+			})}
+			style={{ height: `${itemHeight}px` }}
+		>
+			{withContent && (
+				<Fragment>
+					<span
+						className={s('heading', {
+							[`contentColor_${contentColor}`]: is(String, contentColor)
+						})}
+					/>
+					<span
+						className={s('text', {
+							[`contentColor_${contentColor}`]: is(String, contentColor)
+						})}
+					/>
+				</Fragment>
+			)}
+		</li>
+	);
+
+	return (
+		<ul
+			className={s('container', {
+				[className as string]: className
+			})}
+		>
+			{[...Array(items)].map((_, index) => getItemMarkup(index))}
+		</ul>
+	);
+};
+
+export default ListSkeleton;

package/src/components/ListSkeleton/index.tsx

@@ -0,0 +1 @@
+export { default } from './ListSkeleton';

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

@@ -15,9 +15,16 @@ $button-l-min-width: 48px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	position: relative;
 }
 
 .container {
+	height: auto;
+	max-width: 100%;
+	position: relative;
+}
+
+.innerContainer {
 	display: inline-flex;
 	align-items: center;
 	line-height: 1;
@@ -26,6 +33,11 @@ $button-l-min-width: 48px;
 	position: relative;
 	overflow: hidden;
 
+	&_disabled {
+		opacity: $disabled-opacity;
+		pointer-events: none;
+	}
+
 	&:hover {
 		box-shadow: $box-shadow-button;
 	}
@@ -133,3 +145,8 @@ $button-l-min-width: 48px;
 .leftIcon {
 	margin-right: $base-size;
 }
+
+.spinner {
+	@include absolute-center;
+	z-index: 1;
+}

package/src/components/MultiActionButton/MultiActionButton.tsx

@@ -24,7 +24,8 @@ interface Props {
 	iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 	leftIcon?: `${IconTypes}`;
 	rightIcon?: `${IconTypes}`;
-	rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+	rotateLeftIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+	rotateRigthIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
 	disabled?: boolean;
 	className?: string;
 	iconClassName?: string;
@@ -45,7 +46,8 @@ const MultiActionButton: FC<Props> = ({
 	type = PRIMARY,
 	size = MEDIUM,
 	iconSize = MEDIUM,
-	rotateIconByDegree,
+	rotateLeftIconByDegree,
+	rotateRigthIconByDegree,
 	text,
 	toolTip,
 	leftIcon,
@@ -60,49 +62,51 @@ const MultiActionButton: FC<Props> = ({
 	withSeparator,
 	tabIndex
 }) => {
-	const CONTAINER_CLASSES = s('container', {
-		container_primary: type === PRIMARY,
-		container_secondary: type === SECONDARY,
-		container_tertiary: type === TERTIARY,
-		container_small: size === SMALL,
-		container_medium: size === MEDIUM,
-		container_large: size === LARGE,
-		loading,
-		[className as string]: className
-	});
-
 	const buttonMarkup = (
-		<div role={'group'} className={CONTAINER_CLASSES}>
-			{loading ? (
-				<div className={s('spinnerContainer')}>
-					<SolidSpinner className={s('spinner')} type={type} size={SizeTypes.SMALL} />
-				</div>
-			) : null}
-			<button
-				title={text || ariaLabel || 'button'}
-				id={id ? `${id}` : ''}
-				className={s({ button: true, button_left: true })}
-				disabled={loading || disabled}
-				onClick={!loading ? OnLeftClickCallback : undefined}
-				autoFocus={autoFocus}
-				aria-label={ariaLabel}
-				tabIndex={tabIndex}
+		<div
+			role={'group'}
+			className={s('container', {
+				[className as string]: className
+			})}
+		>
+			{loading ? <SolidSpinner className={s('spinner')} type={type} size={SizeTypes.SMALL} /> : null}
+			<div
+				className={s('innerContainer', {
+					innerContainer_primary: type === PRIMARY,
+					innerContainer_secondary: type === SECONDARY,
+					innerContainer_tertiary: type === TERTIARY,
+					innerContainer_small: size === SMALL,
+					innerContainer_medium: size === MEDIUM,
+					innerContainer_large: size === LARGE,
+					innerContainer_disabled: loading || disabled
+				})}
 			>
-				{leftIcon ? (
-					<Icon
-						icon={leftIcon}
-						size={iconSize || size}
-						className={iconClassName}
-						rotateIconByDegree={rotateIconByDegree}
-						className={s('leftIcon')}
-					/>
-				) : null}
-				{text}
-			</button>
-			{withSeparator ? <Separator marginX={'0'} color={type === SECONDARY ? ColorTypes.GREY_4 : ColorTypes.WHITE} /> : null}
-			<button className={s({ button: true, button_right: true })} onClick={onRightClickCallback}>
-				<Icon icon={rightIcon} size={iconSize || size} className={iconClassName} rotateIconByDegree={rotateIconByDegree} />
-			</button>
+				<button
+					title={text || ariaLabel || 'button'}
+					id={id ? `${id}` : ''}
+					className={s({ button: true, button_left: true, button_disabled: loading || disabled })}
+					disabled={loading || disabled}
+					onClick={!loading ? OnLeftClickCallback : undefined}
+					autoFocus={autoFocus}
+					aria-label={ariaLabel}
+					tabIndex={tabIndex}
+				>
+					{leftIcon ? (
+						<Icon
+							icon={leftIcon}
+							size={iconSize || size}
+							className={iconClassName}
+							rotateIconByDegree={rotateLeftIconByDegree}
+							className={s('leftIcon')}
+						/>
+					) : null}
+					{text}
+				</button>
+				{withSeparator ? <Separator marginX={'0'} color={type === SECONDARY ? ColorTypes.GREY_4 : ColorTypes.WHITE} /> : null}
+				<button className={s({ button: true, button_right: true, button_disabled: loading || disabled })} onClick={onRightClickCallback}>
+					<Icon icon={rightIcon} size={iconSize || size} className={iconClassName} rotateIconByDegree={rotateRigthIconByDegree} />
+				</button>
+			</div>
 		</div>
 	);
 

package/src/index.ts

@@ -8,6 +8,7 @@ import IconButton from 'src/components/IconButton/IconButton';
 import Separator from 'src/components/Separator/Separator';
 import Box from 'src/components/Box/Box';
 import FormSkeleton from 'src/components/FormSkeleton/FormSkeleton';
+import ListSkeleton from 'src/components/ListSkeleton/ListSkeleton';
 import DropDown from 'src/components/DropDown/DropDown';
 import DropDownItem from 'src/components/DropDownItem/DropDownItem';
 import FacetButton from 'src/components/FacetButton/FacetButton';
@@ -34,6 +35,7 @@ export {
 	Paragraph,
 	Span,
 	FormSkeleton,
+	ListSkeleton,
 	DropDown,
 	DropDownItem,
 	FacetButton,

package/src/styles/mixins.scss

@@ -898,46 +898,46 @@
 }
 
 @mixin borderColor {
-	.#{$prefix}_blue {
+	.borderColor_blue {
 		border-color: $blue;
 	}
-	.#{$prefix}_lightBlue {
+	.borderColor_lightBlue {
 		border-color: $light-blue;
 	}
-	.#{$prefix}_yellow {
+	.borderColor_yellow {
 		border-color: $yellow;
 	}
-	.#{$prefix}_orange {
+	.borderColor_orange {
 		border-color: $orange;
 	}
-	.#{$prefix}_green {
+	.borderColor_green {
 		border-color: $green;
 	}
-	.#{$prefix}_red {
+	.borderColor_red {
 		border-color: $red;
 	}
-	.#{$prefix}_white {
+	.borderColor_white {
 		border-color: $white;
 	}
-	.#{$prefix}_grey1 {
+	.borderColor_grey1 {
 		border-color: $grey-1;
 	}
-	.#{$prefix}_grey2 {
+	.borderColor_grey2 {
 		border-color: $grey-2;
 	}
-	.#{$prefix}_grey3 {
+	.borderColor_grey3 {
 		border-color: $grey-3;
 	}
-	.#{$prefix}_grey4 {
+	.borderColor_grey4 {
 		border-color: $grey-4;
 	}
-	.#{$prefix}_grey5 {
+	.borderColor_grey5 {
 		border-color: $grey-5;
 	}
-	.#{$prefix}_grey6 {
+	.borderColor_grey6 {
 		border-color: $grey-6;
 	}
-	.#{$prefix}_black {
+	.borderColor_black {
 		border-color: $black;
 	}
 }