Wech 23/migrate components 3

src/components/Input/InputProps.ts

@@ -2,23 +2,23 @@ import { ComponentPropsWithRef } from 'react';
 
 interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'width'> {
     /**
-     * Sets the variant of the input element
+     * Sets the variant of the input
      */
     variant?: 'boxed' | 'bottom-lined';
     /**
-     * Sets the size of the input element
+     * Sets the size of the input
      */
     size?: 'small' | 'medium';
     /**
-     * Enables the inverted variant
+     * Inverts the colors of the input
      */
     inverted?: boolean;
     /**
-     * Enables the disabled variant
+     * Disable the input
      */
     disabled?: boolean;
     /**
-     * Enables the error state
+     * Shows the error state
      */
     error?: boolean;
     /**

src/components/Input/docs/Input.stories.mdx

@@ -1,10 +1,6 @@
-import { useState, ChangeEvent } from 'react';
-import { Canvas, Story, ArgsTable, Meta } from '@storybook/addon-docs';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Input } from '../Input';
-import { ControlledInput } from './ControlledInput';
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
-import { Combination } from '../../../docs/Combination';
-import { InputPropsTable } from './InputPropsTable';
 
 <Meta
     title="Form Elements/Input"
@@ -33,8 +29,6 @@ Inputs are mainly used in forms to introduce alphanumeric content and edit it.
     <Story
         name="Basic"
         args={{
-            variant: 'boxed',
-            placeholder: '[email protected]',
             label: 'E-Mail Address',
             id: 'email'
         }}
@@ -51,33 +45,9 @@ Inputs are mainly used in forms to introduce alphanumeric content and edit it.
 
 Additionally, all native HTML input element props are supported and forwarded to the underlying input element.
 
-## Controlled vs Uncontrolled
-
-<Canvas>
-    <Story name="Controlled Input">
-        {() => {
-            const [value, setValue] = useState('');
-            const handleChange = event => setValue(event.target.value);
-            return (
-                <Input
-                    value={value}
-                    onChange={handleChange}
-                    variant="boxed"
-                    placeholder="Type..."
-                    label="Controlled input"
-                    id="email"
-                />
-            );
-        }}
-    </Story>
-    <Story name="Uncontrolled Input" args={{ label: 'Uncontrolled input' }}>
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
 ## Testing
 
-```ts
+```tsx
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
@@ -103,11 +73,11 @@ test('allows to be tested using accessible queries', () => {
     const passwordInput = screen.getByLabelText(/password/i);
     const submitBtn = screen.getByRole('button', { name: /submit/i });
 
-    userEvent.type(usernameInput, 'jaimito');
-    userEvent.type(passwordInput, 'tontoelquelolea');
+    userEvent.type(usernameInput, 'nikola');
+    userEvent.type(passwordInput, 'Tesla1743');
     userEvent.click(submitBtn);
 
-    expect(spySubmit).toHaveBeenCalledWith({ username: 'jaimito', password: 'tontoelquelolea' });
+    expect(spySubmit).toHaveBeenCalledWith({ username: 'nikola', password: 'Tesla1743' });
     // Because input type password doesn't have implicit roles (type is passing as prop as expected) https://www.w3.org/TR/html-aria/#docconformance
     expect(screen.queryByRole('textbox', { name: 'password' })).not.toBeInTheDocument();
 });
@@ -147,22 +117,58 @@ Ideally the inputs should be placed in one column, in order to provide an easy r
 
 -   **Default**: We show the input lines or borders and the label in grey.
 -   **Focused**: When the pointer is inside the field the border will turn blue.
-    -   In some cases as long inputs like search we will show at this state a cross icon on the ride in order to delete the content written. In case of password, we show an eye icon to show the by default hidden content
-    -   When the input just allows to include numeric data: Don’t allow to type letters and when user does it, show a tooltip saying ‘Just numbers’. When the user is in the mobile, show by default the numeric virtual keyboard.
-    -   Placeholder text rests in the input field until the user starts entering text. It may contain an action or an example, such as a phone number or email address.
+-   In some cases as long inputs like search we will show at this state a cross icon on the ride in order to delete the content written. In case of password, we show an eye icon to show the by default hidden content
+-   When the input just allows to include numeric data: Don’t allow to type letters and when user does it, show a tooltip saying ‘Just numbers’. When the user is in the mobile, show by default the numeric virtual keyboard.
+-   Placeholder text rests in the input field until the user starts entering text. It may contain an action or an example, such as a phone number or email address.
 -   **In line Error**: When a field is active or contains an error, the line’s color and label turns to red and an error text appears replacing the helper text when applicable (also in red color).
-    -   Manage multiple errors: If only one error is possible, text describes how to avoid it. If multiple errors are possible, the text describes how to avoid the most likely error.
-    -   Mandatory errors: Don’t show errors when a field is mandatory until user click/tap on the action button in the form to save/send changes.
+-   Manage multiple errors: If only one error is possible, text describes how to avoid it. If multiple errors are possible, the text describes how to avoid the most likely error.
+-   Mandatory errors: Don’t show errors when a field is mandatory until user click/tap on the action button in the form to save/send changes.
 -   **Disable**: when the user cannot make any action with the input. It’s recommended to show a tooltip when user is focused on the input explaining the reasons.
 
-## Combinations
-
-<Combination
-    variant={['boxed', 'bottom-lined']}
-    size={['medium', 'small']}
-    disabled={[false, true]}
-    inverted={[false, true]}
-    error={[false, true]}
->
-    {(props, i) => <Input key={i} {...props} label="Label" value="User entry" />}
-</Combination>
+## Stories
+
+### Input with label and placeholder
+
+<Canvas>
+    <Story name="With label and placeholder" args={{ label: 'Email', placeholder: '[email protected]' }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Disabled input
+
+<Canvas>
+    <Story name="Disabled" args={{ label: 'Disabled', disabled: true }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Input with error
+
+<Canvas>
+    <Story name="With error" args={{ label: 'Error', error: true }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Bottom lined input
+
+<Canvas>
+    <Story name="Bottom lined" args={{ label: 'Bottom lined', variant: 'bottom-lined' }}>
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+### Input with inverted colors
+
+<Canvas style={{ background: '#001E3E' }}>
+    <Story
+        name="Inverted"
+        args={{ label: 'Inverted', inverted: true }}
+        parameters={{
+            backgrounds: { default: 'dark' }
+        }}
+    >
+        {Template.bind({})}
+    </Story>
+</Canvas>

src/components/Label/docs/Label.stories.mdx

@@ -1,7 +1,5 @@
 import { Canvas, Story, ArgsTable, Meta } from '@storybook/addon-docs';
 import { Label } from '../Label';
-import { LabelPropsTable } from './LabelPropsTable';
-import { Combination } from '../../../docs/Combination';
 import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
 
 <Meta
@@ -32,26 +30,16 @@ Use short labels for easy scanning. Use two words only if necessary to describe
 ## Examples
 
 <Canvas>
-    <Story name="Default" args={{ mr: 1, children: 'Default' }}>
+    <Story name="Default" args={{ children: 'Default' }}>
         {Template.bind({})}
     </Story>
-    <Story name="Success" args={{ variant: 'success', mr: 1, filled: true, children: 'Congratulations' }}>
+    <Story name="Success" args={{ variant: 'success', filled: true, children: 'Congratulations' }}>
         {Template.bind({})}
     </Story>
-    <Story name="Warning" args={{ variant: 'warning', mr: 1, children: 'Caution' }}>
+    <Story name="Warning" args={{ variant: 'warning', children: 'Caution' }}>
         {Template.bind({})}
     </Story>
-    <Story name="Danger" args={{ variant: 'danger', mr: 1, filled: true, children: 'Failed️' }}>
+    <Story name="Danger" args={{ variant: 'danger', filled: true, children: 'Failed️' }}>
         {Template.bind({})}
     </Story>
 </Canvas>
-
-## Combinations
-
-<Combination variant={['default', 'info', 'success', 'warning', 'danger']} filled={[false, true]}>
-    {(props, i) => (
-        <Label key={i} {...props}>
-            Label
-        </Label>
-    )}
-</Combination>