widenarrow-ui 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "1.0.21",
+	"version": "1.0.23",
 	"description": "A storybook 6 typeScript component library used for Wide Narrow by infodesk",
 	"main": "lib/index.js",
 	"module": "lib/index.esm.js",
@@ -64,9 +64,9 @@
 		"typescript": "4.7.3"
 	},
 	"peerDependencies": {
+		"@types/react": ">= 17.0.2",
 		"lazysizes": "5.2.2",
 		"ramda": "0.26.1",
-		"@types/react": ">= 17.0.2",
 		"react": ">= 17.0.2",
 		"react-dom": ">= 17.0.2",
 		"react-intersection-observer": "8.31.0",
@@ -80,9 +80,11 @@
 	"scripts": {
 		"lint": "eslint .",
 		"test": "echo \"Error: no test specified\" && exit 1",
+		"build-storybook": "storybook build",
 		"storybook": "storybook dev -p 6006",
+		"predeploy": "npm run build-storybook",
+		"start:production": "npx http-server ./storybook-static",
 		"start": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
 		"build": "rollup -c",
 		"prepublishOnly": "yarn build"
 	}

package/src/components/DropDown/DropDown.stories.tsx

@@ -23,7 +23,7 @@ const meta: Meta<typeof DropDown> = {
 				buttonCallbackName={'onRightClickCallback'}
 				title={'Filter on portal status'}
 			>
-				<DropDownItem text={'Item with placeholder'} size={size} onClickCallback={() => undefined} active={false} />
+				<DropDownItem text={'Item with placeholder'} size={size} onClickCallback={() => undefined} closeDropDownOnClick />
 				<DropDownItem
 					text={'Item 2'}
 					onClickCallback={() => undefined}
@@ -32,23 +32,35 @@ const meta: Meta<typeof DropDown> = {
 					leftIcon={IconTypes.ADD_POST}
 					rightIcon={IconTypes.CHEVRON_RIGHT}
 					size={size}
+					closeDropDownOnClick
+				/>
+				<DropDownItem
+					text={'Item 3'}
+					onClickCallback={() => {
+						console.log('clicked');
+					}}
+					iconColor={ColorTypes.BLUE}
+					size={size}
+					closeDropDownOnClick
+					active
 				/>
-				<DropDownItem text={'Item 3'} onClickCallback={() => undefined} iconColor={ColorTypes.BLUE} size={size} active />
 				<DropDownItem
 					text={'Item 4'}
 					onClickCallback={() => undefined}
 					type={HierarchyTypes.SECONDARY}
 					iconColor={ColorTypes.WHITE}
 					size={size}
+					closeDropDownOnClick
 					active
 				/>
-				<DropDownItem text={'Item 5'} onClickCallback={() => undefined} size={size} active={false} />
+				<DropDownItem text={'Item 5'} onClickCallback={() => undefined} size={size} closeDropDownOnClick />
 				<DropDownItem
 					text={'Unpin from menu'}
 					onClickCallback={() => undefined}
 					leftIcon={IconTypes.PIN}
 					size={size}
 					iconColor={ColorTypes.ORANGE}
+					closeDropDownOnClick
 				/>
 			</DropDown>
 		</div>

package/src/components/DropDown/DropDown.tsx

@@ -34,10 +34,7 @@ const DropDown: FC<DropDownProps> = ({
 	loading,
 	withArrow = true,
 	childrenIsList = true,
-	withVisibleOverflow,
-	// eslint-disable-next-line
-	// @ts-ignore
-	closeDropDownOnClick = true // eslint-disable-line
+	withVisibleOverflow
 }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
@@ -78,11 +75,11 @@ const DropDown: FC<DropDownProps> = ({
 
 	// If a child has an onClickCallback, we want to close the DropDown when it is clicked.
 	const cloneChildWithCloseCallback = (c: ReactNode) => {
-		if (isValidElement(c) && is(Function, c.props[buttonCallbackName])) {
+		if (isValidElement(c) && is(Function, c.props.onClickCallback)) {
 			return cloneElement(c, {
 				key: c.key || uuid(),
-				[buttonCallbackName]: (event: unknown) => {
-					c.props[buttonCallbackName](event);
+				onClickCallback: (event: unknown) => {
+					c.props.onClickCallback(event);
 					if (c.props.closeDropDownOnClick) {
 						onClose();
 					}

package/src/components/DropDownItem/DropDownItem.tsx

@@ -31,7 +31,10 @@ const DropDownItem: FC<DropDownItemProps> = ({
 	iconSize,
 	withEllipsis,
 	iconClassName,
-	wrapperElement
+	wrapperElement,
+	// eslint-disable-next-line
+	// @ts-ignore
+	closeDropDownOnClick = true // eslint-disable-line
 }) => {
 	const getIcon = () => {
 		if (is(Boolean, active)) {

package/src/components/DropDownItem/DropDownItem.types.ts

@@ -23,4 +23,5 @@ export interface DropDownItemProps {
 	textAlign?: string;
 	fontWeight?: string;
 	iconClassName?: string;
+	closeDropDownOnClick?: boolean;
 }

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

@@ -16,7 +16,6 @@
 
 	&_isDisabled {
 		pointer-events: none;
-		opacity: $disabled-opacity;
 	}
 
 	&_withInlineLabel {
@@ -95,9 +94,17 @@
 	height: 100%;
 	border-radius: 20px;
 
+	&_isDisabled {
+		background: $grey-disabled;
+	}
+
 	&_isActive {
 		background: $blue;
 	}
+
+	&_isActiveAndDisabled {
+		background: $blue-disabled;
+	}
 }
 
 .circle {
@@ -105,7 +112,6 @@
 	left: 2px;
 	position: absolute;
 	transition: transform 200ms ease;
-	background: $grey-4;
 	transform: translateX(0px);
 	display: block;
 	height: 16px;
@@ -125,9 +131,17 @@
 		border-radius: 50%;
 	}
 
+	&_isDisabled {
+		background: $grey-1;
+	}
+
 	&_isActive {
 		transform: translateX(28px);
 	}
+
+	&_isActiveAndDisabled {
+		background: $white;
+	}
 }
 
 .label {
@@ -143,4 +157,8 @@
 	&_alignCenter {
 		text-align: center;
 	}
+
+	&_isDisabled {
+		color: $text-disabled;
+	}
 }

package/src/components/SwitchButton/SwitchButton.tsx

@@ -26,7 +26,10 @@ const SwitchButton: FC<SwitchButtonProps> = ({
 		})}
 	>
 		{label ? (
-			<label className={s('label', { label_alignCenter: alignCenter, label_inlineLabel: inlineLabel })} htmlFor={name}>
+			<label
+				className={s('label', { label_alignCenter: alignCenter, label_inlineLabel: inlineLabel, label_isDisabled: disabled })}
+				htmlFor={name}
+			>
 				{label}
 			</label>
 		) : null}
@@ -46,13 +49,17 @@ const SwitchButton: FC<SwitchButtonProps> = ({
 			/>
 			<span
 				className={s('line', {
-					line_isActive: checked
+					line_isActive: checked,
+					line_isDisabled: disabled,
+					line_isActiveAndDisabled: checked && disabled
 				})}
 			/>
 			<span
 				className={s('circle', {
 					circle_isNotActive: !checked,
-					circle_isActive: checked
+					circle_isActive: checked,
+					circle_isDisabled: disabled,
+					circle_isActiveAndDisabled: checked && disabled
 				})}
 			/>
 		</div>