From 5b2167614f9ec4101b96757ac8fc87c41145d8a1 Mon Sep 17 00:00:00 2001 From: Nick Grato Date: Tue, 20 Dec 2022 20:13:13 -0800 Subject: [PATCH 01/14] adding tool tips and selects --- src/components/Input/Input.module.scss | 11 ++ src/components/Input/Input.tsx | 12 +- src/components/Select/Select.module.scss | 81 +++++++++ src/components/Select/Select.tsx | 182 +++++++++++++++++++++ src/components/Select/index.ts | 1 + src/components/ToolTip/ToolTip.module.scss | 16 ++ src/components/ToolTip/ToolTip.tsx | 33 ++++ src/components/ToolTip/index.ts | 1 + src/components/index.ts | 2 + src/components/util/FadeIn.tsx | 2 +- src/stories/Select.stories.tsx | 53 ++++++ src/stories/ToolTip.stories.tsx | 46 ++++++ src/styles/theme.scss | 2 +- 13 files changed, 438 insertions(+), 4 deletions(-) create mode 100644 src/components/Select/Select.module.scss create mode 100644 src/components/Select/Select.tsx create mode 100644 src/components/Select/index.ts create mode 100644 src/components/ToolTip/ToolTip.module.scss create mode 100644 src/components/ToolTip/ToolTip.tsx create mode 100644 src/components/ToolTip/index.ts create mode 100644 src/stories/Select.stories.tsx create mode 100644 src/stories/ToolTip.stories.tsx diff --git a/src/components/Input/Input.module.scss b/src/components/Input/Input.module.scss index 87d1a74..0e44de8 100644 --- a/src/components/Input/Input.module.scss +++ b/src/components/Input/Input.module.scss @@ -45,6 +45,17 @@ } } +.tool_tip { + margin-left: 10px; + svg { + stroke: $color-interactions-menu; + } +} + +.label { + display: flex; +} + .error_message { @include font-size(16); color: $color-semantic-critical; diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 73f4294..d985d5f 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -10,7 +10,8 @@ import { useImperativeHandle, } from 'react'; import styles from './Input.module.scss'; -import Icon, { IconT } from '../Icon/Icon'; +import Icon, { IconT } from '../Icon'; +import ToolTip from '../ToolTip'; /** * Methods available to access the component in the parent component. These would most likley @@ -32,6 +33,7 @@ export enum InputIconColorE { type InputProps = { label: string; placeholder: string; + toolTip?: string; name: string; type?: InputT; info?: string; @@ -56,6 +58,7 @@ const Input = forwardRef( { label, placeholder, + toolTip, type = 'text', name, info = '', @@ -156,9 +159,14 @@ const Input = forwardRef( showError ? styles.input_error : null } ${classProp}`} > -