Feature/create select internal label

.gitignore

@@ -6,4 +6,6 @@ core
 package-lock.json
 .idea/
 *.log
-.env
+.env
+
+yarn-error.log*

src/components/Select/Select.stories.tsx

@@ -9,6 +9,7 @@ import { createPageExport } from '../../utils/storybook'
 
 const aiqProps = [
   'label',
+  'internalLabel',
   'items',
   'isOpen',
   'variant',
@@ -35,6 +36,7 @@ const aiqProps = [
 export default createPageExport(Select, 'Select', aiqProps, {
   argTypes: {
     label: { control: 'text' },
+    internalLabel: { control: 'text' },
     items: { control: 'object' },
     isOpen: { control: 'boolean' },
     variant: {

src/components/Select/Select.tsx

@@ -7,6 +7,7 @@ import { SelectStatic } from './SelectStatic'
 
 export type Props = BoxProps & {
   label?: string
+  internalLabel?: string
   items?: Array<string | { id: any; name: any; select?: any }>
   isOpen?: boolean
   variant?: 'outlined'

src/components/Select/SelectFetchable.tsx

@@ -1,15 +1,17 @@
 import { useCombobox } from 'downshift'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { IoIosArrowDown } from 'react-icons/io'
 import styled, { css } from 'styled-components'
 
 import { Box, Props as BoxPros } from '../Box'
 import { Button, Props as ButtonProps } from '../Button'
 import { Input } from '../Input'
 import { Loading } from '../Loading'
+import { Text } from '../Text'
 
 export type Props = BoxPros & {
   label?: string
+  internalLabel?: string
   items?: Array<string | { id: any; name: any; select?: any }>
   isOpen?: boolean
   variant?: 'outlined'
@@ -103,6 +105,7 @@ export const SelectFetchable = React.forwardRef<HTMLDivElement, Props>(
     {
       disabled,
       label,
+      internalLabel,
       variant,
       items = [],
       placeholder,
@@ -185,6 +188,17 @@ export const SelectFetchable = React.forwardRef<HTMLDivElement, Props>(
       }
     }
 
+    const completePrefix = useMemo(() => {
+      if (!prefix && !internalLabel) return null
+
+      return (
+        <div style={{ marginRight: internalLabel && '-12px', columnGap: '4px' }}>
+          {prefix}
+          <Text ml={prefix && '4px'} color='darkGrey' fontSize='small' >{internalLabel}</Text>
+        </div>
+      )
+    }, [])
+
     return (
       <Container
         isOpen={isOpen && !disabled}
@@ -194,6 +208,13 @@ export const SelectFetchable = React.forwardRef<HTMLDivElement, Props>(
         {...props}
       >
         <ul {...getMenuProps()}>
+          {internalLabel && 
+            <div style={{ marginTop: '8px', marginBottom: '2px' }}>
+              <Text p='12px' color='darkGrey' fontSize={12} fontWeight='medium'>
+                {internalLabel}
+              </Text>
+            </div>
+          }
           {isOpen &&
             inputItems &&
             !isLoading &&
@@ -239,7 +260,7 @@ export const SelectFetchable = React.forwardRef<HTMLDivElement, Props>(
             errorMessage={errorMessage}
             errorForm={errorForm}
             readOnly={!autoComplete}
-            prefix={prefix}
+            prefix={completePrefix}
             placeholder={placeholder}
             nativeAutoComplete='disabled'
             {...boxStyled}

src/components/Select/SelectStatic.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import styled, { css } from 'styled-components'
 
 import { useCombobox } from 'downshift'
@@ -8,9 +8,11 @@ import { Box, Props as BoxPros } from '../Box'
 import { Button, Props as ButtonProps } from '../Button'
 import { Input } from '../Input'
 import { Loading } from '../Loading'
+import { Text } from '../Text'
 
 export type Props = BoxPros & {
   label?: string
+  internalLabel?: string
   items?: Array<string | { id: any; name: any; select?: any }>
   isOpen?: boolean
   variant?: 'outlined'
@@ -105,6 +107,7 @@ export const SelectStatic = React.forwardRef<HTMLDivElement, Props>(
     {
       disabled,
       label,
+      internalLabel,
       variant,
       items = [],
       placeholder,
@@ -138,6 +141,7 @@ export const SelectStatic = React.forwardRef<HTMLDivElement, Props>(
     useEffect(() => setInputItems(items), [items])
 
     const { backgroundColor, border, width, maxWidth } = props
+
     const boxStyled = {
       backgroundColor,
       border,
@@ -181,6 +185,17 @@ export const SelectStatic = React.forwardRef<HTMLDivElement, Props>(
       }
     }
 
+    const completePrefix = useMemo(() => {
+      if (!prefix && !internalLabel) return null
+
+      return (
+        <div style={{ marginRight: internalLabel && '-12px', columnGap: '4px' }}>
+          {prefix}
+          <Text ml={prefix && '4px'} color='darkGrey' fontSize='small' >{internalLabel}</Text>
+        </div>
+      )
+    }, [])
+
     return (
       <Container
         isOpen={isOpen && !disabled}
@@ -190,6 +205,13 @@ export const SelectStatic = React.forwardRef<HTMLDivElement, Props>(
         {...props}
       >
         <ul {...getMenuProps()}>
+          {internalLabel && 
+            <div style={{ marginTop: '8px', marginBottom: '2px' }}>
+              <Text p='12px' color='darkGrey' fontSize={12} fontWeight='medium'>
+                {internalLabel}
+              </Text>
+            </div>
+          }
           {isOpen &&
             inputItems &&
             !isDependent &&
@@ -229,7 +251,7 @@ export const SelectStatic = React.forwardRef<HTMLDivElement, Props>(
             errorMessage={errorMessage}
             errorForm={errorForm}
             readOnly={!autoComplete}
-            prefix={prefix}
+            prefix={completePrefix}
             placeholder={placeholder}
             {...getInputProps({
               onClick: () => {