feat(dropdown): add value variants using tags

Headstorm · Aug 20, 2020 · 1aae340 · 1aae340
1 parent 475ae3a
commit 1aae340
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 47 deletions.
diff --git a/packages/hs-react-ui/src/components/Dropdown/Dropdown.stories.tsx b/packages/hs-react-ui/src/components/Dropdown/Dropdown.stories.tsx
@@ -72,6 +72,11 @@ const teaOptions = [
   },
 ];
 
+const valueVariants = {
+  none: undefined,
+  ...variants,
+};
+
 storiesOf('Dropdown', module)
   .add(
     'Basic',
@@ -95,6 +100,7 @@ storiesOf('Dropdown', module)
               options={cities}
               variant={select('variant', variants, variants.outline)}
               optionsVariant={select('optionsVariant', variants, variants.outline)}
+              valueVariant={select('valueVariant', valueVariants, valueVariants.none)}
               values={values}
             />
           </Label>

diff --git a/packages/hs-react-ui/src/components/Dropdown/Dropdown.tsx b/packages/hs-react-ui/src/components/Dropdown/Dropdown.tsx
@@ -9,10 +9,11 @@ import Button from '../Button/Button';
 import variants from '../../enums/variants';
 import timings from '../../enums/timings';
 import { Div, Span } from '../../htmlElements';
+import Tag, { TagProps } from '../Tag/Tag';
 import Text from '../Text/Text';
 import { getFontColorFromVariant, getBackgroundColorFromVariant } from '../../utils/color';
 import { SubcomponentPropsType } from '../commonTypes';
-import { getShadowStyle } from '../../utils/styles';
+import { getShadowStyle, getDropdownTagStyle } from '../../utils/styles';
 
 export type OptionProps = {
   id: number | string;
@@ -119,12 +120,12 @@ const OptionItem = styled(Div)`
           : getFontColorFromVariant(variant, color)
       };
       background-color: ${backgroundColor};
-  
+
       &:hover {
         background-color: ${
           backgroundColor !== 'transparent' ? darken(0.05, backgroundColor) : 'rgba(0, 0, 0, 0.05)'
         };
-    
+
         cursor: pointer;
         outline: none;
       }
@@ -157,6 +158,22 @@ const PlaceholderContainer = styled(Text.Container)`
   opacity: 0.8;
 `;
 
+const StyledTagContainer = styled(Tag.Container)`
+  ${({
+    dropdownVariant,
+    tagVariant,
+    dropdownColor,
+    transparentColor,
+  }: {
+    dropdownVariant: variants;
+    tagVariant: variants;
+    dropdownColor: string;
+    transparentColor: string;
+  }) => `
+    ${getDropdownTagStyle(dropdownVariant, tagVariant, dropdownColor, transparentColor)}
+  `}
+`;
+
 export interface DropdownProps {
   StyledContainer?: string & StyledComponentBase<any, {}>;
   StyledValueContainer?: string & StyledComponentBase<any, {}>;
@@ -173,6 +190,7 @@ export interface DropdownProps {
   optionItemProps?: SubcomponentPropsType;
   checkContainerProps?: SubcomponentPropsType;
   placeholderProps?: SubcomponentPropsType;
+  valueItemTagProps?: TagProps;
 
   color?: string;
   elevation?: number;
@@ -189,6 +207,7 @@ export interface DropdownProps {
   tabIndex?: number;
   variant?: variants;
   optionsVariant?: variants;
+  valueVariant?: variants;
 }
 
 const Dropdown = ({
@@ -207,6 +226,7 @@ const Dropdown = ({
   optionItemProps,
   checkContainerProps,
   placeholderProps,
+  valueItemTagProps = {},
 
   color,
   elevation = 0,
@@ -219,7 +239,8 @@ const Dropdown = ({
   options = [],
   tabIndex = 0,
   variant = variants.outline,
-  optionsVariant = variant,
+  optionsVariant = variants.outline,
+  valueVariant,
   values = [],
 }: DropdownProps): JSX.Element | null => {
   const { colors } = useTheme();
@@ -233,6 +254,8 @@ const Dropdown = ({
     ...placeholderProps,
   };
 
+  const tagContainerItemProps = valueItemTagProps.containerProps || {};
+
   const optionsHash: { [key: string]: OptionProps } = {};
   options.forEach(option => {
     optionsHash[option.id] = { ...option, isSelected: values.includes(option.id) };
@@ -400,12 +423,31 @@ const Dropdown = ({
         >
           {values
             .filter(val => val !== undefined && optionsHash[val] !== undefined)
-            .map((val, i) =>
+            .map((val, i, arr) =>
               optionsHash[val] !== undefined ? (
-                <span key={val}>
-                  {i !== 0 && ', '}
-                  {optionsHash[val].optionValue}
-                </span>
+                valueVariant ? (
+                  <Tag
+                    StyledContainer={StyledTagContainer}
+                    variant={valueVariant}
+                    {...valueItemTagProps}
+                    containerProps={{
+                      ...tagContainerItemProps,
+                      dropdownVariant: variant,
+                      tagVariant: valueVariant,
+                      dropdownColor: defaultedColor,
+                      transparentColor: colors.transparent,
+                    }}
+                    key={val}
+                  >
+                    {optionsHash[val].optionValue}
+                    {valueVariant === variants.text && i !== arr.length - 1 && ','}
+                  </Tag>
+                ) : (
+                  <span key={val}>
+                    {optionsHash[val].optionValue}
+                    {i !== arr.length - 1 && ', '}
+                  </span>
+                )
               ) : (
                 undefined
               ),

diff --git a/packages/hs-react-ui/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/hs-react-ui/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -1490,9 +1490,9 @@ exports[`Dropdown renders two values when given matching option ids through prop
       >
         <span>
           Bulbasaur
+          , 
         </span>
         <span>
-          , 
           Charmander
         </span>
       </div>
@@ -1612,9 +1612,9 @@ exports[`Dropdown renders two values when given matching option ids through prop
       >
         <span>
           Bulbasaur
+          , 
         </span>
         <span>
-          , 
           Charmander
         </span>
       </div>
@@ -1734,9 +1734,9 @@ exports[`Dropdown selects options from values prop 1`] = `
       >
         <span>
           Bulbasaur
+          , 
         </span>
         <span>
-          , 
           Charmander
         </span>
       </div>

diff --git a/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.stories.tsx b/packages/hs-react-ui/src/components/InteractionFeedback/InteractionFeedback.stories.tsx
@@ -57,7 +57,12 @@ storiesOf('InteractionFeedback', module).add(
         opacity: entranceOpacity,
       },
       leave: {
-        r: `${number('Ending circle radius', 0, { range: true, min: 0, max: 100, step: 1}, 'Circle radius')}`,
+        r: `${number(
+          'Ending circle radius',
+          0,
+          { range: true, min: 0, max: 100, step: 1 },
+          'Circle radius',
+        )}`,
         opacity: exitOpacity,
       },
       config: {

diff --git a/packages/hs-react-ui/src/components/Tag/Tag.tsx b/packages/hs-react-ui/src/components/Tag/Tag.tsx
@@ -6,7 +6,7 @@ import timings from '../../enums/timings';
 import { useTheme } from '../../context';
 import variants from '../../enums/variants';
 import Progress from '../Progress/Progress';
-import { Div } from '../../htmlElements';
+import { Div, Span } from '../../htmlElements';
 import { getFontColorFromVariant, getBackgroundColorFromVariant } from '../../utils/color';
 import { SubcomponentPropsType } from '../commonTypes';
 import { getShadowStyle } from '../../utils/styles';
@@ -44,7 +44,7 @@ export type TagProps = {
   StyledLoadingBar?: string & StyledComponentBase<any, {}>;
 };
 
-export const Container: string & StyledComponentBase<any, {}, TagContainerProps> = styled(Div)`
+export const Container: string & StyledComponentBase<any, {}, TagContainerProps> = styled(Span)`
   ${({ elevation = 0, color, variant }: TagContainerProps) => {
     const { colors } = useTheme();
     const backgroundColor = getBackgroundColorFromVariant(variant, color, colors.transparent);
@@ -63,8 +63,7 @@ export const Container: string & StyledComponentBase<any, {}, TagContainerProps>
         box-shadow ${timings.slow};
       ${getShadowStyle(elevation, colors.shadow)}
       outline: 0 none;
-      border: ${variant === variants.outline ? `1px solid ${color || colors.grayDark}` : '0 none;'};
-      cursor: pointer;
+      border: ${variant === variants.outline ? `1px solid ${color || colors.grayDark};` : '0 none;'}
       background-color: ${backgroundColor};
       color: ${fontColor};
       align-items: center;