widenarrow-ui 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "1.0.20",
+	"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/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,19 +112,17 @@
 
 .innerContainer {
 	display: flex;
+	min-width: 0;
 	align-items: center;
 	justify-content: space-between;
 	flex-grow: 1;
-
-	&_withEllipsis {
-		overflow: hidden;
-	}
 }
 
 .contentContainer {
 	display: flex;
 	flex-direction: column;
 	margin-right: 12px;
+	flex-grow: 1;
 
 	&_withEllipsis {
 		overflow: hidden;
@@ -142,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',
@@ -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

@@ -86,7 +86,6 @@ const ListItem: FC<ListItemProps> = ({
 			) : null}
 			<div
 				className={s('innerContainer', {
-					innerContainer_withEllipsis: withEllipsis,
 					[`padding_${padding}`]: is(String, padding),
 					[`paddingX_${paddingX}`]: is(String, paddingX),
 					[`paddingY_${paddingY}`]: is(String, paddingY),
@@ -106,12 +105,12 @@ const ListItem: FC<ListItemProps> = ({
 				>
 					{contentComponent && contentComponent}
 					{title ? (
-						<Heading className={s('heading')} type={'h4'} withEllipsis={withEllipsis}>
+						<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/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';