widenarrow-ui 1.1.21 → 1.1.22

package/package.json

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

package/src/assets/svg/chevronRightCircle-200.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+interface Props {
+	className?: string;
+}
+
+const Icon: FC<Props> = ({ className }) => (
+	<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className={className}>
+		<path d="M535.46-480 425.85-370.38q-5.62 5.42-5.62 13.55 0 8.14 5.62 13.98 5.84 6.62 14.27 6.23 8.42-.38 14.26-6.23l114.54-114.53q9.7-9.7 9.7-22.62 0-12.92-9.7-22.62L454.15-617.38q-5.84-5.85-14.15-6.12-8.31-.27-14.15 6.35-5.62 5.84-5.35 14.15.27 8.31 6.12 14.15L535.46-480Zm-55.33 360q-74.67 0-140.41-28.34-65.73-28.34-114.36-76.92-48.63-48.58-76.99-114.26Q120-405.19 120-479.87q0-74.67 28.34-140.41 28.34-65.73 76.92-114.36 48.58-48.63 114.26-76.99Q405.19-840 479.87-840q74.67 0 140.41 28.34 65.73 28.34 114.36 76.92 48.63 48.58 76.99 114.26Q840-554.81 840-480.13q0 74.67-28.34 140.41-28.34 65.73-76.92 114.36-48.58 48.63-114.26 76.99Q554.81-120 480.13-120Zm-.13-40q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+	</svg>
+);
+
+export default Icon;

package/src/assets/svg/chevronRightCircle-300.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+interface Props {
+	className?: string;
+}
+
+const Icon: FC<Props> = ({ className }) => (
+	<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" className={className}>
+		<path d="M521.23-480 418.92-377.69q-8.3 8.21-8.3 20.53 0 12.31 8.3 21.24 8.93 9.3 21.39 9.11 12.46-.19 21.38-9.11l118.77-118.77q10.85-10.85 10.85-25.31 0-14.46-10.85-25.31L461.08-624.69q-8.93-8.92-21.08-8.81-12.15.12-21.08 9.42-8.3 8.93-8.42 21.08-.11 12.15 8.81 21.08L521.23-480Zm-41.16 380q-78.84 0-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1 100-479.93q0-78.84 29.92-148.21t81.21-120.68q51.29-51.31 120.63-81.25Q401.1-860 479.93-860q78.84 0 148.21 29.92t120.68 81.21q51.31 51.29 81.25 120.63Q860-558.9 860-480.07q0 78.84-29.92 148.21t-81.21 120.68q-51.29 51.31-120.63 81.25Q558.9-100 480.07-100Zm-.07-60q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+	</svg>
+);
+
+export default Icon;

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

@@ -9,6 +9,7 @@ import { MultiActionButton } from 'src/components/MultiActionButton';
 import { DropDownItem } from 'src/components/DropDownItem';
 
 import { ColorTypes, IconTypes } from 'src/constants';
+import { InlineButton } from '../InlineButton';
 
 const meta: Meta<typeof DropDown> = {
 	title: 'Components/DropDown',
@@ -45,6 +46,23 @@ export const WithActiveSelect: Story = {
 	)
 };
 
+export const AsInlineButton: Story = {
+	args: {},
+	render: ({ ...props }) => (
+		<div style={{ width: '80px', height: '200px', padding: '24px' }}>
+			<DropDown
+				{...props}
+				buttonComponent={<InlineButton text={'Show more'} icon={IconTypes.CHEVRON_DOWN} withIconRight />}
+				title={'Select'}
+			>
+				<DropDownItem active text={'Recently visited'} onClickCallback={() => undefined} />
+				<DropDownItem active={false} text={'Newest'} onClickCallback={() => undefined} />
+				<DropDownItem active={false} text={'Oldest'} onClickCallback={() => undefined} closeDropDownOnClick={false} />
+			</DropDown>
+		</div>
+	)
+};
+
 export const Complex: Story = {
 	args: {},
 	render: ({ ...props }) => (

package/src/components/DropDown/DropDown.tsx

@@ -8,6 +8,7 @@ import { ColorTypes, HierarchyTypes } from 'src/constants';
 
 import { Heading } from 'src/components/Typography/Typography';
 import { SolidSpinner } from 'src/components/SolidSpinner/SolidSpinner';
+import { Box } from 'src/components/Box';
 
 import useHandleClickOutside from './useHandleClickOutside';
 
@@ -187,11 +188,11 @@ const DropDown: FC<DropDownProps> = ({
 	return (
 		<div ref={containerRef}>
 			{/* ButtonComponent */}
-			<div ref={setReferenceElement}>
+			<Box displayFlex alignItems={'center'} ref={setReferenceElement}>
 				{isValidElement(buttonComponent)
 					? cloneElement(buttonComponent, { [buttonCallbackName]: (e: MouseEvent) => onClickButton(e) })
 					: null}
-			</div>
+			</Box>
 			{/* DropDown */}
 			{isOpen && (
 				<div

package/src/components/Icon/getIconFromConstant.tsx

@@ -34,6 +34,8 @@ import CheckIcon from 'src/assets/svg/check';
 import CheckIndeterminateIcon from 'src/assets/svg/checkIndeterminate';
 import ChevronIcon from 'src/assets/svg/chevron';
 import ChevronLeftIcon from 'src/assets/svg/chevronLeft';
+import ChevronRightCircleIcon200 from 'src/assets/svg/chevronRightCircle-200';
+import ChevronRightCircleIcon300 from 'src/assets/svg/chevronRightCircle-300';
 import ChevronRightIcon from 'src/assets/svg/chevronRight';
 import ChevronUpIcon from 'src/assets/svg/chevronUp';
 import ClassificationAddIcon200 from 'src/assets/svg/classificationAdd-200';
@@ -216,6 +218,10 @@ const getIconFromConstant = (icon: Partial<IconTypes>, getIconClassName: (additi
 			return <AddSectionBelowIcon className={getIconClassName('icon_rotate_270')} />;
 		case IconTypes.RESET:
 			return <ResetIcon className={getIconClassName('icon_flip')} />;
+		case IconTypes.CHEVRON_LEFT_CIRCLE_200:
+			return <ChevronRightCircleIcon200 className={getIconClassName('icon_flip')} />;
+		case IconTypes.CHEVRON_LEFT_CIRCLE_300:
+			return <ChevronRightCircleIcon300 className={getIconClassName('icon_flip')} />;
 		case IconTypes.NAVIGATE_LEFT_LARGE:
 			return <NavigateRightLargeIcon className={getIconClassName('icon_flip')} />;
 		case IconTypes.EXPAND_ARROWS:

package/src/constants.ts

@@ -35,6 +35,8 @@ export enum IconTypes {
 	CHEVRON_LEFT = 'iconChevronLeft',
 	CHEVRON_RIGHT = 'iconChevronRight',
 	CHEVRON_UP = 'iconChevronUp',
+	CHEVRON_LEFT_CIRCLE_200 = 'iconChevronLeftCircle200',
+	CHEVRON_LEFT_CIRCLE_300 = 'iconChevronLeftCircle300',
 	CLASSIFICATION = 'iconClassification',
 	CLASSIFICATION_ADD_200 = 'iconClassificationAdd200',
 	CLASSIFICATION_ADD_300 = 'iconClassificationAdd300',