Merge pull request #299 from TobiTRy/298-create-textarea

298 create textarea
TobiTRy · Jun 28, 2024 · 43a5abb · 43a5abb
2 parents 8b45c5d + b0e2078
commit 43a5abb
Show file tree

Hide file tree

Showing 20 changed files with 564 additions and 170 deletions.
diff --git a/lib/index.ts b/lib/index.ts
@@ -136,6 +136,7 @@ export * from '@/components/organisms/FancyPasswordInput';
 export * from '@/components/organisms/FancyTextInput';
 export * from '@/components/organisms/FancyColorInput';
 export * from '@/components/organisms/FancyListBox';
+export * from '@/components/organisms/FancyTextArea';
 
 // ---------- Templates ------- //
 export * from '@/components/templates/FancyInfoCard';

diff --git a/src/Routes/InputsRoute/InputsRoute.tsx b/src/Routes/InputsRoute/InputsRoute.tsx
@@ -12,6 +12,7 @@ import { Card } from '@/components/molecules/Card';
 import LabeledInput from '@/components/molecules/LabeledInput/LabeledInput';
 import { TextInput } from '@/components/atoms/TextInput';
 import FancyRange from '@/components/organisms/FancyRangeSlider/FancyRangeSlider';
+import FancyTextArea from '@/components/organisms/FancyTextArea/FancyTextArea';
 
 const svg = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -28,6 +29,11 @@ export default function InputsRoute() {
   const [dropDown2, setDropDown2] = useState<string>('test');
   const [password, setPassword] = useState<string>('');
   const [newInput, setNewInput] = useState<string>('');
+  const [textArea, setTextArea] = useState<string>('');
+
+  const handleTextArea = (value: ChangeEvent<HTMLTextAreaElement>) => {
+    setTextArea(value.target.value);
+  };
 
   const newInputHandler = (value: ChangeEvent<HTMLInputElement>) => {
     setNewInput(value.target.value);
@@ -71,134 +77,142 @@ export default function InputsRoute() {
   `;
 
   return (
-    <Card>
-      <DesignWrapper>
-        <FancyRange
-          id="hi"
-          layer={2}
-          label="HIii"
-          min={10}
-          max={100}
-          onChange={testHandler4}
-          displayNumberInput
-          align="left"
-        />
-        <DesignArea title="Password Input">
-          <LabeledInput
-            label="Password"
-            inputElement={<TextInput id="Hi" onChange={newInputHandler} value={newInput} />}
-          />
-        </DesignArea>
-
-        <DesignArea title="Password Input">
-          <FancyNumberInput
-            decimalPlaces={4}
-            layer={1}
-            step={0.001}
-            label="Text"
-            onChange={testHandler2}
-            value={test}
-            systemMessage={'error'}
-          />
-          <FancyNumberInput
-            decimalPlaces={4}
-            step={0.001}
-            label="Text"
-            onChange={testHandler2}
-            value={test}
-            placeholder="test45454554"
-            systemMessage={'success'}
-          />
-          <FancyNumberInput
-            decimalPlaces={4}
-            step={0.001}
-            label="Text"
-            onChange={testHandler2}
-            value={test}
-            placeholder="test45454554"
-            systemMessage={'info'}
-          />
-        </DesignArea>
-        <DesignArea title="Password Input111">
-          <FancyPasswordInput icon={svg} align={'center'} value={password} onChange={testHandler5} />
-        </DesignArea>
-        <DesignArea title="Password Input111">
-          <FancyPasswordInput icon={svg} align={'center'} value={password} onChange={testHandler5} />
-        </DesignArea>
-        <DesignArea title="Text Input">
-          <FancyTextInput label="Text" underline={false} value={text} onChange={testHandler} />
-          <FancyTextInput
-            icon={svg}
-            label="Text"
-            value={text}
-            onChange={testHandler}
-            align="center"
-            placeholder="test45454554"
-          />
-          <FancyTextInput placeholder="Hiiii" systemMessage={'success'} value={text} onChange={testHandler} />
-        </DesignArea>
-        <DesignArea title="Number Input">
-          <FancyNumberInput
-            icon={svg}
-            underline={false}
-            label="Text"
-            onChange={testHandler2}
-            value={test}
-            step={0.1}
-            min={0}
+    <>
+      <FancyTextArea label="MMoooiiin" rows={2} value={textArea} onChange={handleTextArea} />
+      <FancyTextArea icon={svg} />
+      <Card>
+        <DesignWrapper>
+          <FancyRange
+            id="hi"
+            layer={2}
+            label="HIii"
+            min={10}
             max={100}
+            onChange={testHandler4}
+            displayNumberInput
+            align="left"
           />
-          <FancyNumberInput
-            icon={svg}
-            label="Text"
-            onChange={testHandler2}
-            value={test}
-            align="center"
-            disabled={true}
-            placeholder="Hiii"
-          />
-        </DesignArea>
-        <DesignArea title="Number Input AutoWidth" style={row}>
-          <FancyNumberInput label="Test" min={10} max={100} onChange={testHandler2} value={test} autoWidth={true} />
-          <FancyNumberInput
-            icon={svg}
-            label="Test"
-            onChange={testHandler2}
-            align="center"
-            value={test}
-            autoWidth={true}
-          />
-        </DesignArea>
-        <DesignArea title="DropDown Input">
-          <FancyDropDownSelect
-            label="DropDown"
-            onChange={testHandler3}
-            value={dropDown}
-            values={['Test', 'Test2', 'Test3', 'Test3', 'Test3', 'Test3']}
-          />
-          <FancyDropDownSelect icon={svg} label="DropDown" value={dropDown2} onChange={testHandler33} align="center">
-            <option value="test">Test</option>
-            <option value="test2">Test2</option>
-            <option value="test3">Test3</option>
-            <option value="test4">Test4</option>
-            <optgroup label="test">
-              <option value="test5">Test5</option>
-              <option value="test6">Test6</option>
-              <option value="test7">Test7</option>
-              <option value="test8">Test8</option>
-            </optgroup>
-          </FancyDropDownSelect>
-        </DesignArea>
-        <DesignArea title="Date Input">
-          <FancyDateInput value={date} label="Date" onChange={dateHandler} />
-          <FancyDateInput value={date} icon={svg} label="Date" onChange={dateHandler} />
-        </DesignArea>
-        <DesignArea title="DateDropDown Input">
-          <FancyDateDropDown type="day" label="Day" onChange={testHandler3} />
-          <FancyDateDropDown type="month" label="Month" onChange={testHandler3} />
-          <FancyDateDropDown type="year" label="Year" onChange={testHandler3} />
-        </DesignArea>
-      </DesignWrapper>
-    </Card>
+          <DesignArea title="TextArea">
+            <FancyTextArea />
+          </DesignArea>
+          <DesignArea title="Password Input">
+            <LabeledInput
+              label="Password"
+              inputElement={<TextInput id="Hi" onChange={newInputHandler} value={newInput} />}
+            />
+            <FancyPasswordInput label="Password" onChange={testHandler5} value={password} icon={svg} />
+          </DesignArea>
+
+          <DesignArea title="Password Input">
+            <FancyNumberInput
+              decimalPlaces={4}
+              layer={1}
+              step={0.001}
+              label="Text"
+              onChange={testHandler2}
+              value={test}
+              systemMessage={'error'}
+            />
+            <FancyNumberInput
+              decimalPlaces={4}
+              step={0.001}
+              label="Text"
+              onChange={testHandler2}
+              value={test}
+              placeholder="test45454554"
+              systemMessage={'success'}
+            />
+            <FancyNumberInput
+              decimalPlaces={4}
+              step={0.001}
+              label="Text"
+              onChange={testHandler2}
+              value={test}
+              placeholder="test45454554"
+              systemMessage={'info'}
+            />
+          </DesignArea>
+          <DesignArea title="Password Input111">
+            <FancyPasswordInput icon={svg} align={'center'} value={password} onChange={testHandler5} />
+          </DesignArea>
+          <DesignArea title="Password Input111">
+            <FancyPasswordInput icon={svg} align={'center'} value={password} onChange={testHandler5} />
+          </DesignArea>
+          <DesignArea title="Text Input">
+            <FancyTextInput label="Text" underline={true} value={text} onChange={testHandler} />
+            <FancyTextInput
+              icon={svg}
+              label="Text"
+              value={text}
+              onChange={testHandler}
+              align="center"
+              placeholder="test45454554"
+            />
+            <FancyTextInput placeholder="Hiiii" systemMessage={'success'} value={text} onChange={testHandler} />
+          </DesignArea>
+          <DesignArea title="Number Input">
+            <FancyNumberInput
+              icon={svg}
+              underline={false}
+              label="Text"
+              onChange={testHandler2}
+              value={test}
+              step={0.1}
+              min={0}
+              max={100}
+            />
+            <FancyNumberInput
+              icon={svg}
+              label="Text"
+              onChange={testHandler2}
+              value={test}
+              align="center"
+              disabled={true}
+              placeholder="Hiii"
+            />
+          </DesignArea>
+          <DesignArea title="Number Input AutoWidth" style={row}>
+            <FancyNumberInput label="Test" min={10} max={100} onChange={testHandler2} value={test} autoWidth={true} />
+            <FancyNumberInput
+              icon={svg}
+              label="Test"
+              onChange={testHandler2}
+              align="center"
+              value={test}
+              autoWidth={true}
+            />
+          </DesignArea>
+          <DesignArea title="DropDown Input">
+            <FancyDropDownSelect
+              label="DropDown"
+              onChange={testHandler3}
+              value={dropDown}
+              values={['Test', 'Test2', 'Test3', 'Test3', 'Test3', 'Test3']}
+            />
+            <FancyDropDownSelect icon={svg} label="DropDown" value={dropDown2} onChange={testHandler33} align="center">
+              <option value="test">Test</option>
+              <option value="test2">Test2</option>
+              <option value="test3">Test3</option>
+              <option value="test4">Test4</option>
+              <optgroup label="test">
+                <option value="test5">Test5</option>
+                <option value="test6">Test6</option>
+                <option value="test7">Test7</option>
+                <option value="test8">Test8</option>
+              </optgroup>
+            </FancyDropDownSelect>
+          </DesignArea>
+          <DesignArea title="Date Input">
+            <FancyDateInput value={date} label="Date" onChange={dateHandler} />
+            <FancyDateInput value={date} icon={svg} label="Date" onChange={dateHandler} />
+          </DesignArea>
+          <DesignArea title="DateDropDown Input">
+            <FancyDateDropDown type="day" label="Day" onChange={testHandler3} />
+            <FancyDateDropDown type="month" label="Month" onChange={testHandler3} />
+            <FancyDateDropDown type="year" label="Year" onChange={testHandler3} />
+          </DesignArea>
+        </DesignWrapper>
+      </Card>
+    </>
   );
 }
diff --git a/src/components/atoms/DateInput/DateInput.style.tsx b/src/components/atoms/DateInput/DateInput.style.tsx
@@ -14,9 +14,10 @@ type IRawInputWrapper = {
 export const StyledDatePicker = styled(RawInput)<IRawInputWrapper & { theme: TTheme }>`
   color: ${({ $isActive, $themeType = 'secondary', $layer, theme }) =>
     $isActive ? getBackgroundColor({ theme, $themeType, $layer }) : 'transparent'};
-  height: ${({ theme }) => theme.globalElementSizes.md};
+  height: 18px;
   transition: color 0.3s ease-in;
   font-family: inherit;
+  box-sizing: content-box;
 
   /* This renders a Placerholder in Text when its needed */
   ${({ placeholder, $themeType = 'secondary', $layer = 4, value, theme, $align, $isActive }) => {

diff --git a/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx b/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx
@@ -20,7 +20,7 @@ export const SelectField = styled.select<ISelectField & { theme: TTheme }>`
   `}
 
   background-repeat: no-repeat;
-  background-position: right ${({ theme }) => theme.spacing.xxs} bottom 30%;
+  background-position: right ${({ theme }) => theme.spacing.xxs} bottom 70%;
   text-align-last: ${({ $align }) => ($align !== 'center' ? 'left' : 'center')};
   color: ${({ theme }) => theme.color.secondary[0]};
   border: none;

diff --git a/src/components/atoms/InputLabel/utils/generateLableVariant.ts b/src/components/atoms/InputLabel/utils/generateLableVariant.ts
@@ -36,21 +36,21 @@ export function generateLableVariant(props: TgenerateLableVariant) {
     case 'center':
       return css`
         left: 50%;
-        top: ${$isActive ? '8px' : '56%'};
+        top: ${$isActive ? '8px' : '21px'};
         font-size: ${$isActive ? '12px' : '18px'};
         transform: translateX(-50%) translateY(-50%);
       `;
     case 'right':
       return css`
-        top: ${$isActive ? '8px' : '56%'};
+        top: ${$isActive ? '8px' : '21px'};
         right: 0;
         font-size: ${$isActive ? '12px' : '18px'};
         transform: translateY(-50%);
       `;
     case 'left':
     default:
       return css`
-        top: ${$isActive ? '8px' : '56%'};
+        top: ${$isActive ? '8px' : '21px'};
         font-size: ${$isActive ? '12px' : '18px'};
         transform: translateY(-50%);
       `;

diff --git a/src/components/atoms/PasswordInput/PasswordInput.style.tsx b/src/components/atoms/PasswordInput/PasswordInput.style.tsx
@@ -7,9 +7,9 @@ import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForC
 
 export const WrapperEye = styled.div<{ theme: TTheme; $themeType?: TUiColorsNotTransparent; $layer?: TLayer }>`
   position: absolute;
-  bottom: 0px;
+  bottom: 50%;
+  transform: translateY(65%);
   right: 0;
-  padding: ${({ theme }) => `${theme.spacing.xs} 0 ${theme.spacing.xxs} ${theme.spacing.xs}`};
   box-sizing: border-box;
 
   svg {

diff --git a/src/components/atoms/RawTextArea/RawTextArea.tsx b/src/components/atoms/RawTextArea/RawTextArea.tsx
@@ -0,0 +1,32 @@
+import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent';
+import { TLayer } from '@/types/TLayer';
+import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
+import { TTheme } from '@/types/TTheme';
+import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent';
+
+import { styled } from 'styled-components';
+
+type TRawTextArea = {
+  themeType?: TUiColorsNotTransparent;
+  layer?: TLayer;
+};
+
+export type TRawTextAreaWithHTMLAttrs = TRawTextArea & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+type TRawTextAreaWith$ = TStyledPrefixAndPicker<TRawTextArea>;
+
+const RawTextArea = styled.textarea<TRawTextAreaWith$ & { theme: TTheme }>`
+  border: none;
+  box-sizing: border-box;
+  appearance: none;
+  outline: none;
+  width: 100%;
+  font-family: inherit;
+  min-height: ${({ theme }) => theme.globalElementSizes.xs};
+  font-size: ${({ theme }) => theme.fontSizes.interactiveMd.fontSize};
+  background-color: transparent;
+  resize: vertical;
+  color: ${({ theme, $themeType = 'secondary', $layer }) => getBackgroundColor({ theme, $themeType, $layer })};
+`;
+
+export default RawTextArea;