widenarrow-ui 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "1.0.19",
+	"version": "1.0.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/components/Image/Image.module.scss

@@ -3,6 +3,17 @@
 .container {
 	position: relative;
 
+	&:hover {
+		.hoverOverlay {
+			opacity: 0.4;
+		}
+	}
+	&:active {
+		.hoverOverlay {
+			opacity: 0.6;
+		}
+	}
+
 	&_withContainer,
 	&_withAspectRatio {
 		.backgroundImage {
@@ -100,3 +111,14 @@
 .lazyloaded {
 	opacity: 1;
 }
+
+.hoverOverlay {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	z-index: 10;
+	opacity: 0;
+	transition: opacity 100ms ease;
+}
+
+@include backgroundColor('hoverOverlayColor');

package/src/components/Image/Image.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import classNames from 'classnames/bind';
+import { is } from 'ramda';
 
 import { ImageProps } from './Image.types';
 import styles from './Image.module.scss';
@@ -13,6 +14,7 @@ const Image: FC<ImageProps> = ({
 	imageClassName,
 	withContainer,
 	placeHolderColor,
+	hoverOverlayColor,
 	bgImage,
 	bgImageProps,
 	aspectRatio,
@@ -45,6 +47,13 @@ const Image: FC<ImageProps> = ({
 					[className as string]: className
 				})}
 			>
+				{hoverOverlayColor ? (
+					<div
+						className={s('hoverOverlay', {
+							[`hoverOverlayColor_${hoverOverlayColor}`]: is(String, hoverOverlayColor)
+						})}
+					/>
+				) : null}
 				{backgroundImageMarkup}
 				{customComponent && customComponent}
 			</div>
@@ -64,7 +73,7 @@ const Image: FC<ImageProps> = ({
 		/>
 	);
 
-	if (aspectRatio || withContainer) {
+	if (aspectRatio || withContainer || hoverOverlayColor) {
 		return (
 			<div
 				className={s('container', {
@@ -74,6 +83,13 @@ const Image: FC<ImageProps> = ({
 					[aspectRatio as string]: !!aspectRatio
 				})}
 			>
+				{hoverOverlayColor ? (
+					<div
+						className={s('hoverOverlay', {
+							[`hoverOverlayColor_${hoverOverlayColor}`]: is(String, hoverOverlayColor)
+						})}
+					/>
+				) : null}
 				{imageMarkup}
 			</div>
 		);

package/src/components/Image/Image.types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { AspectRatioTypes } from '../../constants';
+import { AspectRatioTypes, ColorTypes } from '../../constants';
 
 export interface ImageProps {
 	src: string;
@@ -8,6 +8,7 @@ export interface ImageProps {
 	imageClassName?: string;
 	customCellComponent?: ReactNode;
 	aspectRatio?: Partial<AspectRatioTypes>;
+	hoverOverlayColor?: Partial<ColorTypes>;
 	bgImage?: boolean;
 	bgImageProps?: {
 		size: 'cover' | 'contain';

package/src/components/ListItem/ListItem.module.scss

@@ -89,7 +89,6 @@
 	font-weight: 600;
 	font-size: $font-size-l;
 	color: $grey-5;
-	margin-bottom: 0;
 	margin-top: 0;
 	transition: color 50ms ease-in-out;
 }
@@ -113,6 +112,7 @@
 
 .innerContainer {
 	display: flex;
+	min-width: 0;
 	align-items: center;
 	justify-content: space-between;
 	flex-grow: 1;
@@ -122,6 +122,11 @@
 	display: flex;
 	flex-direction: column;
 	margin-right: 12px;
+	flex-grow: 1;
+
+	&_withEllipsis {
+		overflow: hidden;
+	}
 
 	&_withCallback {
 		cursor: pointer;
@@ -134,6 +139,10 @@
 	}
 }
 
+.buttonsContainer {
+	height: auto;
+}
+
 @include margin(8);
 @include padding(8);
 @include backgroundColor('backgroundColor');

package/src/components/ListItem/ListItem.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { ListItem } from 'src/components/ListItem';
 import { Box } from 'src/components/Box';
 import { SwitchButton } from 'src/components/SwitchButton';
+import { ColorTypes } from 'src/constants';
 
 const meta: Meta<typeof ListItem> = {
 	title: 'Components/ListItem',
@@ -15,7 +16,7 @@ type Story = StoryObj<typeof ListItem>;
 
 export const Default: Story = {
 	args: {
-		title: 'My list item',
+		title: 'oiuytrtyuiuytewugwoiuytrtyuiuytewugwoiuytrtyuiuytewugwoiuytrtyuiuytewugwoiuytrtyuiuytewugw',
 		description: 'Lorem ipsum dolor sit amet',
 		imageSrc:
 			'https://plus.unsplash.com/premium_photo-1672582776510-048e431afb31?q=80&w=3570&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
@@ -24,12 +25,19 @@ export const Default: Story = {
 		<div style={{ width: '880px', display: 'flex', justifyContent: 'center' }}>
 			<ListItem
 				{...props}
+				borderColor={ColorTypes.BLACK}
+				border={'1'}
 				onClickCallback={() => {
 					console.log('Hej!');
 				}}
 				buttonsComponent={
-					<Box displayFlex>
-						<SwitchButton label={'Click me'} checked name={'switch example'} onClickCallback={() => undefined} />
+					<Box alignItems={'center'}>
+						{/* <div style={{ height: '300px', backgroundColor: 'red', width: '100px', marginRight: '8px' }}></div>
+						<div style={{ height: '300px', backgroundColor: 'green', width: '100px', marginRight: '8px' }}></div>
+						<div style={{ height: '300px', backgroundColor: 'blue', width: '100px' }}></div> */}
+						<Box>
+							<SwitchButton label={'Click me'} checked name={'switch example'} onClickCallback={() => undefined} />
+						</Box>
 					</Box>
 				}
 			/>

package/src/components/ListItem/ListItem.tsx

@@ -21,6 +21,7 @@ const ListItem: FC<ListItemProps> = ({
 	padding = '2',
 	imageAspectRatio = AspectRatioTypes.ar1_1,
 	withBorderRadius = true,
+	withEllipsis = true,
 	withHoverEffect,
 	onClickCallback,
 	linkTo,
@@ -79,6 +80,7 @@ const ListItem: FC<ListItemProps> = ({
 						aspectRatio={imageAspectRatio}
 						bgImage={!!imageAspectRatio}
 						customComponent={imageIcon ? <Icon className={s('imageIcon')} color={ColorTypes.GREY_3} icon={imageIcon} /> : undefined}
+						hoverOverlayColor={!!onClickCallback ? ColorTypes.GREY_5 : undefined}
 					/>
 				</div>
 			) : null}
@@ -95,19 +97,20 @@ const ListItem: FC<ListItemProps> = ({
 			>
 				<div
 					className={s('contentContainer', {
-						contentContainer_withCallback: !!onClickCallback
+						contentContainer_withCallback: !!onClickCallback,
+						contentContainer_withEllipsis: withEllipsis
 					})}
 					role={'button'}
 					onClick={onClickCallback || (() => undefined)}
 				>
 					{contentComponent && contentComponent}
 					{title ? (
-						<Heading className={s('heading')} type={'h4'}>
+						<Heading className={s('heading')} marginBottom={description ? '05' : '0'} type={'h4'} withEllipsis={withEllipsis}>
 							{title}
 						</Heading>
 					) : null}
 					{description ? (
-						<Paragraph marginBottom={'0'} fontSize="s" marginTop={'15'}>
+						<Paragraph marginBottom={'0'} fontSize={'s'} marginTop={'0'}>
 							{description}
 						</Paragraph>
 					) : null}

package/src/components/ListItem/ListItem.types.ts

@@ -9,6 +9,7 @@ export interface ListItemProps extends MarginInterface, PaddingInterface {
 	imageSrc?: string;
 	withBorderRadius?: boolean;
 	withHoverEffect?: boolean;
+	withEllipsis?: boolean;
 	imageIcon?: Partial<IconTypes>;
 	size: Partial<SizeTypes>;
 	imageAspectRatio?: Partial<AspectRatioTypes>;

package/src/components/SelectInput/SelectInput.module.scss

@@ -0,0 +1,74 @@
+@import 'src/styles/mixins.scss';
+
+.container {
+	position: relative;
+
+	&_marginBottom {
+		margin-bottom: $two-base-size;
+	}
+
+	&_disabled {
+		pointer-events: none;
+		opacity: $disabled-opacity;
+	}
+}
+
+.inputContainer {
+	position: relative;
+	line-height: 1.2; // don't cut letters that go underneath the baseline ('g', 'q', etc)
+}
+
+.input {
+	@include input-field;
+
+	cursor: pointer;
+	display: block;
+	height: $form-component-height;
+	width: 100%;
+	font-size: $font-size-m;
+
+	// Reset native select appearance (also removing icon) and add custom background arrow
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-color: $white;
+
+	&_active {
+		background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23707070%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23707070%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+		background-size: 12px;
+		background-position: calc(100% - 16px) center;
+		background-repeat: no-repeat;
+	}
+
+	@include breakpoint($lg) {
+		min-width: 240px;
+
+		&:hover {
+			border-color: $blue;
+		}
+	}
+}
+
+.button {
+	width: 100%;
+}
+
+.dropDown {
+	width: 100%;
+}
+
+.spinner {
+	position: absolute;
+	top: 8px;
+	right: 10px;
+}
+
+.error {
+	display: block;
+	color: $red;
+	margin: $base-size 0 0;
+}
+
+.helperText {
+	@include form-helperText;
+}

package/src/components/SelectInput/SelectInput.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SelectInput } from 'src/components/SelectInput';
+
+const meta: Meta<typeof SelectInput> = {
+	title: 'Components/SelectInput',
+	component: SelectInput
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SelectInput>;
+
+export const Default: Story = {
+	args: {
+		options: [
+			{ text: 'First item', value: 0 },
+			{ text: 'Second item', value: 1 },
+			{ text: 'Third item', value: 2 }
+		]
+	}
+};

package/src/components/SelectInput/SelectInput.tsx

@@ -0,0 +1,119 @@
+import { FC, Fragment } from 'react';
+import classNames from 'classnames/bind';
+
+import { HierarchyTypes, IconTypes } from 'src/constants';
+
+import { Label } from 'src/components/Typography/Typography';
+import { SolidSpinner } from 'src/components/SolidSpinner';
+import { Button } from 'src/components/Button';
+import { DropDown } from 'src/components/DropDown';
+import { DropDownItem } from 'src/components/DropDownItem';
+import { SelectInputProps, OptionItem } from './SelectInput.types';
+
+import styles from './SelectInput.module.scss';
+
+const s = classNames.bind(styles);
+
+const SelectInput: FC<SelectInputProps> = ({
+	name,
+	label,
+	nativeHtmlComponent = true,
+	size,
+	onChange,
+	defaultOption,
+	value,
+	error,
+	helperText,
+	options,
+	disabled,
+	loading,
+	className,
+	inputClassName,
+	marginBottom
+}) => (
+	<div
+		className={s('container', {
+			container_marginBottom: marginBottom,
+			container_disabled: disabled,
+			[className as string]: className
+		})}
+	>
+		{label && <Label htmlFor={name}>{label}</Label>}
+		<div className={s('inputContainer')}>
+			{nativeHtmlComponent ? (
+				<Fragment>
+					<select
+						disabled={disabled || loading}
+						name={name}
+						value={value}
+						onChange={(e) => {
+							onChange(e.target.value); // Only send value, expensive to pass the whole event as argument through multiple components
+						}}
+						className={s('input', {
+							input_active: disabled !== true && loading !== true,
+							[inputClassName as string]: inputClassName
+						})}
+						aria-label={label || name}
+					>
+						{defaultOption && <option value="">{defaultOption}</option>}
+						{options &&
+							options.map((option) => (
+								<option key={option.value} value={option.value} disabled={option.disabled}>
+									{option.text}
+								</option>
+							))}
+					</select>
+					{loading && <SolidSpinner className={s('spinner')} size={size} />}
+				</Fragment>
+			) : (
+				<Fragment>
+					<DropDown
+						offset={{ vertical: 0, horizontal: 0 }}
+						placement={'bottom'}
+						buttonComponent={
+							<Button
+								loading={loading}
+								className={s('button')}
+								text={(() => {
+									let i = 0;
+									while (i < options.length) {
+										if (options[i].value === value) {
+											return options[i].text;
+										}
+										i++;
+									}
+									return 'Select an option';
+								})()}
+								size={size}
+								type={HierarchyTypes.SECONDARY}
+								icon={IconTypes.CHEVRON_DOWN}
+							/>
+						}
+						className={s('dropDown')}
+						withArrow={false}
+					>
+						{options
+							? options.map((opt: OptionItem) => (
+									<DropDownItem
+										key={opt.text}
+										text={opt.text}
+										type={HierarchyTypes.PRIMARY}
+										size={size}
+										active={opt.value === value}
+										onClickCallback={() => {
+											onChange(opt.value);
+										}}
+									/>
+							  ))
+							: null}
+					</DropDown>
+				</Fragment>
+			)}
+			{/* Note, value is set here rather than on the option - docs: https://facebook.github.io/react/docs/forms.html */}
+		</div>
+		{helperText && <p className={s('helperText')}>{helperText}</p>}
+		{error && <span className={s('error')}>{error}</span>}
+	</div>
+);
+
+export { SelectInput };

package/src/components/SelectInput/SelectInput.types.ts

@@ -0,0 +1,26 @@
+import { SizeTypes } from '../../constants';
+
+export interface OptionItem {
+	text: string;
+	value: string | number;
+	disabled?: boolean;
+}
+
+export interface SelectInputProps {
+	className?: string;
+	inputClassName?: string;
+	defaultOption?: string;
+	size: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+	disabled?: boolean;
+	error?: string;
+	helperText?: string;
+	text?: string;
+	marginBottom?: boolean;
+	loading?: boolean;
+	label?: string;
+	name: string;
+	onChange: (value: string | number) => void;
+	options: Array<OptionItem>;
+	value: string | number;
+	nativeHtmlComponent?: boolean;
+}

package/src/components/SelectInput/index.ts

@@ -0,0 +1 @@
+export * from './SelectInput';

package/src/components/index.ts

@@ -18,5 +18,6 @@ export * from './Separator';
 export * from './SolidSpinner';
 export * from './SortableTable';
 export * from './SwitchButton';
+export * from './SelectInput';
 export * from './ToolTip';
 export * from './Typography';