widenarrow-ui 0.1.13 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "0.1.13",
+	"version": "0.1.14",
 	"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/askWideNarrow.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+interface Props {
+	className?: string;
+}
+
+const Icon: FC<Props> = ({ className }) => (
+	<svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" width="24px" height="24px" viewBox="0 0 24 24">
+		<g clip-path="url(#a)">
+			<path d="M13.73 5.196c-.744-2.819-4.014-2.185-4.585 0-2.407-.23-3.323 2.992-2.752 3.335-1.72 0-1.948 2.415-1.72 3.452-1.835.863-1.546 3.968-.072 4.14.073 1.957.763 3.223 1.68 3.223.345 1.955 1.36 2.415 2.286 2.415.923 2.072 2.988 3.568 5.166.46V5.196h-.004Z" />
+			<path d="M13.523 22.317c1.949 2.303 4.014 2.186 4.585 0 2.406.23 3.322-2.991 2.751-3.334 1.72 0 1.949-2.416 1.72-3.452 1.733-.497 2.018-3.085.073-4.141-.073-1.956-.764-3.222-1.68-3.222-.345-1.956-1.36-2.416-2.287-2.416-.624-2.438-4.176-3.661-5.165-.46v17.029l.003-.004Z" />
+			<path
+				fill="#fff"
+				fill-rule="evenodd"
+				d="M18.925 8.276c-1.103 0-1.221 1.2-1.221 1.2l.014.015s.074-.03.192-.03c.235 0 .633.134.633.978 0 1.408-1.825 6.788-3.076 6.788-.369 0-.471-.282-.471-.593 0-.282.117-.593.161-.741l1.987-5.972h-2.34l-.971 2.993c-.31.934-1.56 4.313-2.59 4.313-.28 0-.354-.267-.354-.46 0-1.23 2.282-4.43 2.282-6.372 0-1.26-.825-1.823-1.973-1.823-.986 0-1.884.385-2.679 1.023-1.207.963-2.12 2.445-2.12 3.853 0 .474.28 1.334 1.12 1.334.824 0 1.368-.83 1.53-1.482a.986.986 0 0 1-.265.044c-.353 0-.544-.237-.544-.667 0-.89 1.221-3.141 2.252-3.141.382 0 .426.355.426.607v.074c0 1.112-2.457 5.083-2.457 6.95 0 .83.353 1.867 1.5 1.867 1.37 0 2.223-1.14 2.723-2.06h.015c-.014.104-.014.208-.014.297 0 .934.574 1.764 1.692 1.764 2.767 0 5.623-6.521 5.623-9.292-.044-.815-.28-1.467-1.075-1.467Z"
+				clip-rule="evenodd"
+			/>
+		</g>
+		<path d="M1.6 2.955 4.667 0l2.857 3.173-3.068 2.955zM0 7.27l1.533-1.477L2.96 7.38 1.427 8.855 0 7.27Z" />
+		<defs>
+			<clipPath id="a">
+				<path fill="#fff" d="M2.4 3.31H24V24H2.4z" />
+			</clipPath>
+		</defs>
+	</svg>
+);
+
+export default Icon;

package/src/assets/svg/automation.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+interface Props {
+	className?: string;
+}
+
+const Icon: FC<Props> = ({ className }) => (
+	<svg className={className} xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" viewBox="-2 -2 24 24">
+		<path
+			fill-rule="evenodd"
+			d="M17.1593 10.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65c-.03-.24-.24-.42-.49-.42H7.72933c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25L.0693316 6.73c-.13.22-.0699999.49.1200004.64L2.29933 9.02c-.04.32-.07.65-.07.98 0 .33.03.66.07.98L.189332 12.63c-.1900003.15-.2400004.42-.1200004.64L2.06933 16.73c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h3.99997c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65Zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35H9.02933l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74 0-.2.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.38997l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13Z"
+			clip-rule="evenodd"
+		/>
+		<path d="m8 13 5-3-5-3v6Z" />
+	</svg>
+);
+
+export default Icon;

package/src/assets/svg/textAdd.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+interface Props {
+	className?: string;
+}
+
+const Icon: FC<Props> = ({ className }) => (
+	<svg className={className} width="24px" height="24px" viewBox="0 0 24 24">
+		<path d="M16 19.9751v-3h-3v-2h3v-3h2v3h3v2h-3v3h-2Zm-12-1.975v-2h7.075c-.05.35-.0708.6833-.0625 1 .0083.3166.0375.65.0875 1H4Zm0-4v-2h9.65c-.3833.2666-.7292.5666-1.0375.9-.3083.3333-.5792.7-.8125 1.1H4Zm0-4V8.00006h15v2.00004H4Zm0-4.00004v-2h15v2H4Z" />
+	</svg>
+);
+
+export default Icon;

package/src/assets/svg/textReplace.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+interface Props {
+	className?: string;
+}
+
+const Icon: FC<Props> = ({ className }) => (
+	<svg className={className} fill="none" viewBox="0 0 24 24">
+		<path d="M4 18.0001v-2h7.075c-.05.35-.0708.6833-.0625 1 .0083.3166.0375.65.0875 1H4Zm0-4v-2h9.65c-.3833.2666-.7292.5666-1.0375.9-.3083.3333-.5792.7-.8125 1.1H4Zm0-4V8.00006h15v2.00004H4Zm0-4.00004v-2h15v2H4Z" />
+		<path
+			stroke="#707070"
+			stroke-width=".75"
+			d="M17 14.2728v1.3636l2-1.8182-2-1.8181v1.3636c-2.21 0-4 1.6273-4 3.6364 0 .7136.23 1.3772.62 1.9363l.73-.6636c-.225-.3773-.35-.8136-.35-1.2727 0-1.5046 1.345-2.7273 3-2.7273Zm3.38.7909-.73.6636c.22.3819.35.8137.35 1.2728 0 1.5045-1.345 2.7272-3 2.7272v-1.3636l-2 1.8182 2 1.8182v-1.3637c2.21 0 4-1.6272 4-3.6363 0-.7137-.23-1.3773-.62-1.9364Z"
+		/>
+	</svg>
+);
+
+export default Icon;

package/src/components/Icon/getIconFromConstant.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { IconTypes } from 'src/constants';
 
 import AccountSettingsIcon from 'src/assets/svg/accountSettings';
+import AutomationIcon from 'src/assets/svg/automation';
 import AddChart from 'src/assets/svg/addChart';
 import AddFilledIcon from 'src/assets/svg/addOutlined';
 import AddFolder from 'src/assets/svg/addFolder';
@@ -18,6 +19,7 @@ import ArrowLastPageIcon from 'src/assets/svg/arrowLastPage';
 import ArrowLeftIcon from 'src/assets/svg/arrowLeft';
 import ArrowRightIcon from 'src/assets/svg/arrowRight';
 import ArrowUpIcon from 'src/assets/svg/arrowUp';
+import AskWideNarrowIcon from 'src/assets/svg/askWideNarrow';
 import AttachmentIcon from 'src/assets/svg/attachment';
 import BannerIcon from 'src/assets/svg/banner';
 import BenchMarksIcon from 'src/assets/svg/benchmarks';
@@ -158,6 +160,8 @@ import TaxonomyIcon from 'src/assets/svg/taxonomy';
 import TranslateIcon from 'src/assets/svg/translate';
 import TrashIcon from 'src/assets/svg/trash';
 import TrialIcon from 'src/assets/svg/trial';
+import TextAddIcon from 'src/assets/svg/textAdd';
+import TextReplaceIcon from 'src/assets/svg/textReplace';
 import UnfoldLessIcon from 'src/assets/svg/unfoldLess';
 import UnfoldMoreIcon from 'src/assets/svg/unfoldMore';
 import UpIcon from 'src/assets/svg/up';
@@ -199,6 +203,8 @@ const getIconFromConstant = (icon: string, getIconClassName: (additionalClassNam
 		// Icons without special classnames
 		case IconTypes.CHECK_INDETERMINATE:
 			return <CheckIndeterminateIcon className={getIconClassName()} />;
+		case IconTypes.AUTOMATION:
+			return <AutomationIcon className={getIconClassName()} />;
 		case IconTypes.CHEVRON_DOWN:
 			return <ChevronIcon className={getIconClassName()} />;
 		case IconTypes.CHEVRON_LEFT:
@@ -231,6 +237,8 @@ const getIconFromConstant = (icon: string, getIconClassName: (additionalClassNam
 			return <AddSectionAboveIcon className={getIconClassName()} />;
 		case IconTypes.ADD_SECTION_BELOW:
 			return <AddSectionBelowIcon className={getIconClassName()} />;
+		case IconTypes.ASK_WIDE_NARROW:
+			return <AskWideNarrowIcon className={getIconClassName()} />;
 		case IconTypes.AI:
 			return <AiIcon className={getIconClassName()} />;
 		case IconTypes.ARROW_DOWN:
@@ -365,6 +373,10 @@ const getIconFromConstant = (icon: string, getIconClassName: (additionalClassNam
 			return <FormatTextAlignLeft className={getIconClassName()} />;
 		case IconTypes.FORMAT_TEXT_ALIGN_RIGHT:
 			return <FormatTextAlignRight className={getIconClassName()} />;
+		case IconTypes.TEXT_ADD:
+			return <TextAddIcon className={getIconClassName()} />;
+		case IconTypes.TEXT_REPLACE:
+			return <TextReplaceIcon className={getIconClassName()} />;
 		case IconTypes.GRID_MODE:
 			return <GridModeIcon className={getIconClassName()} />;
 		case IconTypes.HANDLEBAR:

package/src/components/Separator/Separator.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames/bind';
 import { is } from 'ramda';
 
 import { MarginInterface, PaddingInterface } from 'src/types/styling';
-import { SizeTypes } from 'src/constants';
+import { SizeTypes, ColorTypes } from 'src/constants';
 
 import styles from './Separator.module.scss';
 
@@ -11,7 +11,7 @@ const s = classNames.bind(styles);
 
 interface Props extends MarginInterface, PaddingInterface {
 	className?: string;
-	color?: string;
+	color?: `${ColorTypes}`;
 	size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 }
 
@@ -19,7 +19,17 @@ interface Props {
 	className?: string;
 }
 
-const Separator: FC<Props> = ({ className, marginLeft, marginRight, marginX, paddingRight, paddingLeft, paddingX, size, color }) => (
+const Separator: FC<Props> = ({
+	className,
+	marginLeft,
+	marginRight,
+	marginX,
+	paddingRight,
+	paddingLeft,
+	paddingX,
+	size = SizeTypes.MEDIUM,
+	color = ColorTypes.GREY_3
+}) => (
 	<div
 		className={s('container', {
 			container_small: size === SizeTypes.SMALL,

package/src/components/ToolTip/ToolTip.tsx

@@ -16,7 +16,7 @@ function uuid() {
 
 const htmlRootNode = document.getElementById('root') as HTMLElement;
 
-/**
+/**	
 |--------------------------------------------------
 | This components extends the react-tooltip library.
 | Full api documentation here:

package/src/constants.ts

@@ -1,5 +1,6 @@
 export enum IconTypes {
 	ACCOUNT_SETTINGS = 'iconAccountSettings',
+	AUTOMATION = 'iconAutomation',
 	ADD_CHART = 'iconAddChart',
 	ADD_FILLED = 'iconAddFilled',
 	ADD_FOLDER = 'iconAddFolder',
@@ -15,6 +16,7 @@ export enum IconTypes {
 	ARROW_FORK_RIGHT = 'iconArrowForkRight',
 	ARROW_LAST_PAGE = 'iconArrowLastPage',
 	ARROW_LEFT = 'iconArrowLeft',
+	ASK_WIDE_NARROW = 'iconAskWideNarrow',
 	ARROW_RIGHT = 'iconArrowRight',
 	ARROW_UP = 'iconArrowUp',
 	ATTACHMENT = 'iconAttachment',
@@ -161,6 +163,8 @@ export enum IconTypes {
 	TRANSLATE = 'iconTranslate',
 	TRASH = 'iconTrash',
 	TRIAL = 'iconTrial',
+	TEXT_ADD = 'iconTextAdd',
+	TEXT_REPLACE = 'iconTextReplace',
 	UNFOLD_LESS = 'iconUnfoldLess',
 	UNFOLD_MORE = 'iconUnfoldMore',
 	UP = 'iconUp',

package/src/index.ts

@@ -1,7 +1,5 @@
-// Not done
+import ToolTip from 'src/components/ToolTip/ToolTip';
 import Checkbox from 'src/components/Checkbox/Checkbox';
-
-// Done
 import SolidSpinner from 'src/components/SolidSpinner/SolidSpinner';
 import Icon from 'src/components/Icon/Icon';
 import Button from 'src/components/Button/Button';
@@ -15,6 +13,7 @@ import { ColorTypes, SizeTypes, IconTypes, AppColors, HierarchyTypes } from 'src
 
 export {
 	// Components
+	ToolTip,
 	Button,
 	InlineButton,
 	IconButton,