@scality/core-ui 0.115.0

package/stories/healthselectorv2.stories.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from 'react';
+import styled, { useTheme } from 'styled-components';
+import { action } from '@storybook/addon-actions';
+import {
+  HealthSelector,
+  optionsDefaultConfiguration,
+} from '../src/lib/components/healthselectorv2/HealthSelector.component';
+import { Wrapper } from './common';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+export default {
+  title: 'Components/HealthSelector',
+  component: HealthSelector,
+
+  decorators: [
+    (story) => (
+      <Wrapper style={{ minHeight: '40vh' }}>
+        <HealthSelectorWrapper>{story()}</HealthSelectorWrapper>
+      </Wrapper>
+    ),
+  ],
+  args: {
+    onChange: (value) => action(value),
+  },
+};
+const HealthSelectorWrapper = styled.div`
+  width: 205px;
+`;
+
+export const Playground = {
+  args: {
+    id: 'playground',
+  },
+  argTypes: {
+    value: {
+      options: ['all', 'warning', 'critical', 'unknown'],
+      control: 'select',
+    },
+  },
+};
+
+export const ChangingLabels = {
+  args: {
+    options: [
+      {
+        ...optionsDefaultConfiguration.all,
+        label: 'label all',
+      },
+      {
+        ...optionsDefaultConfiguration.healthy,
+        label: 'any label',
+      },
+      {
+        ...optionsDefaultConfiguration.warning,
+        label: 'warning',
+        icon: <Icon name="Tape" />,
+        value: 'myValue',
+      },
+      optionsDefaultConfiguration.critical,
+      optionsDefaultConfiguration.unknown,
+    ],
+  },
+};
+
+export const HiddingOptions = {
+  args: {
+    id: 'hiddenoptions',
+    options: [
+      optionsDefaultConfiguration.all,
+      optionsDefaultConfiguration.warning,
+      optionsDefaultConfiguration.critical,
+      optionsDefaultConfiguration.unknown,
+    ],
+  },
+};

package/stories/icon.stories.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+  Icon,
+  iconTable,
+  IconName,
+} from '../src/lib/components/icon/Icon.component';
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
+
+export default {
+  title: 'Components/Icon',
+  component: Icon,
+  argTypes: {
+    color: {
+      control: {
+        type: 'color',
+      },
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    name: 'Exclamation-triangle',
+  },
+};
+
+export const Size = {
+  render: (args) => {
+    const NameSizes: SizeProp[] = ['xs', 'sm', 'lg'];
+    const MultiplicatorSizes: SizeProp[] = [
+      '1x',
+      '2x',
+      '3x',
+      '4x',
+      '5x',
+      '6x',
+      '7x',
+      '8x',
+      '9x',
+      '10x',
+    ];
+    return (
+      <>
+        <h3>Size Name</h3>
+        <div style={{ display: 'flex', alignItems: 'flex-end' }}>
+          {NameSizes.map((size) => (
+            <div style={{ paddingInline: '1rem' }}>
+              <Icon size={size} {...args} />
+              <h5 style={{ textAlign: 'center' }}>{size}</h5>
+            </div>
+          ))}
+        </div>
+        <h3>Size Multiplicator</h3>
+        <div
+          style={{ display: 'flex', alignItems: 'flex-end', flexWrap: 'wrap' }}
+        >
+          {MultiplicatorSizes.map((size) => (
+            <div style={{ paddingInline: '1rem' }}>
+              <Icon size={size} {...args} />
+              <h5 style={{ textAlign: 'center' }}>{size}</h5>
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  },
+  args: {
+    name: 'Exclamation-triangle',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: null,
+      },
+    },
+  },
+};
+
+export const Statuses = {
+  render: () => {
+    return (
+      <table style={{ width: '70%', textAlign: 'center' }}>
+        <thead>
+          <tr>
+            <th>Status</th>
+            <th>Visual</th>
+            <th>Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Unknown</td>
+            <td>
+              <Icon name="Dot-circle" color="infoPrimary" size="2x" />
+            </td>
+            <td>&lt;Icon name='Dot-circle' color='infoPrimary' /&gt;</td>
+          </tr>
+          <tr>
+            <td>Healthy</td>
+            <td>
+              <Icon name="Check-circle" color="statusHealthy" size="2x" />
+            </td>
+            <td>&lt;Icon name='Check-circle' color='statusHealthy' /&gt;</td>
+          </tr>
+          <tr>
+            <td>Warning</td>
+            <td>
+              <Icon name="Exclamation-circle" color="statusWarning" size="2x" />
+            </td>
+            <td>
+              &lt;Icon name='Exclamation-circle' color='statusWarning' /&gt;
+            </td>
+          </tr>
+          <tr>
+            <td>Critical</td>
+            <td>
+              <Icon name="Times-circle" color="statusCritical" size="2x" />
+            </td>
+            <td>&lt;Icon name='Times-circle' color='statusCritical' /&gt;</td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  },
+};
+
+export const AllIcons = {
+  render: () => (
+    <table>
+      <thead>
+        <td>Visual</td>
+        <td>Name</td>
+      </thead>
+      <tbody>
+        {(Object.keys(iconTable) as IconName[]).map((key, index) => (
+          <tr key={key}>
+            <td style={{ paddingRight: '2rem' }}>
+              <Icon key={index} name={key} size={'2x'} />
+            </td>
+            <td>{key}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+};

package/stories/icons.mdx

@@ -0,0 +1,108 @@
+import ImageFile from './pictures/icon-design-system.png';
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Style/Icons" />
+
+# Icons
+
+## Style
+
+Icon style should be consistent.
+The style is rather outlined.
+If two options are possible when choosing an icon, choose the simpler one.
+
+<img src={ImageFile} />
+
+## Size
+
+When next to a text, the icon and the text should have the same size.
+
+## Icon set table
+
+|                        Icons                        | Name                 | Category      | Origin | FontAwesome name     | FontAwesome code                                | Icon Style & Prefix | FA free | Use case                                                |
+| :-------------------------------------------------: | -------------------- | ------------- | ------ | -------------------- | ----------------------------------------------- | ------------------- | ------- | ------------------------------------------------------- |
+|        <i className="fas fa-wallet fa-3x" />        | Account              | Entities      | FA     | wallet               | `<i className="fas fa-wallet" />`               | solid Style (fas)   | yes     | Hero                                                    |
+|    <i className="fas fa-network-wired fa-3x" />     | Backend              | Entities      | FA     | network-wired        | `<i className="fas fa-network-wired" />`        | solid Style (fas)   | yes     | Hero                                                    |
+|         <i className="fas fa-tape fa-3x" />         | Tape                 | Entities      | FA     | tape                 | `<i className="fas fa-tape" />`                 | solid Style (fas)   | yes     | Hero                                                    |
+|        <i className="fas fa-server fa-3x" />        | Node-backend         | Entities      | FA     | server               | `<i className="fas fa-server" />`               | solid Style (fas)   | yes     | Hero                                                    |
+|         <i className="fas fa-hdd fa-3x" />          | Volume-backend       | Entities      | FA     | hdd                  | `<i className="fas fa-hdd" />`                  | solid Style (fas)   | yes     | Hero                                                    |
+|       <i className="fas fa-database fa-3x" />       | Node-ptf             | Entities      | FA     | database             | `<i className="fas fa-database" />`             | solid Style (fas)   | yes     | Hero                                                    |
+|     <i className="fas fa-compact-disc fa-3x" />     | Volume-ptf           | Entities      | FA     | compact-disc         | `<i className="fas fa-compact-disc" />`         | solid Style (fas)   | yes     | Hero                                                    |
+|   <i className="fas fa-project-diagram fa-3x" />    | Network              | Entities      | FA     | project-diagram      | `<i className="fas fa-project-diagram" />`      | solid Style (fas)   | yes     | Hero                                                    |
+|    <i className="fas fa-glass-whiskey fa-3x" />     | Bucket               | Entities      | FA     | glass-whiskey        | `<i className="fas fa-glass-whiskey" />`        | solid Style (fas)   | yes     | Hero                                                    |
+|        <i className="fas fa-cloud fa-3x" />         | Cloud-backend        | Entities      | FA     | cloud                | `<i className="fas fa-cloud" />`                | solid Style (fas)   | yes     | Hero                                                    |
+|      <i className="fas fa-warehouse fa-3x" />       | Datacenter           | Entities      | FA     | warehouse            | `<i className="fas fa-warehouse" />`            | solid Style (fas)   | yes     | Hero                                                    |
+|       <i className="fas fa-user-cog fa-3x" />       | User                 | Menu          | FA     | user-cog             | `<i className="fas fa-user-cog" />`             | solid Style (fas)   | yes     | Top navbar                                              |
+|         <i className="fas fa-bell fa-3x" />         | Alert                | Menu          | FA     | bell                 | `<i className="fas fa-bell" />`                 | solid Style (fas)   | yes     |                                                         |
+|         <i className="fas fa-bars fa-3x" />         | Lat-menu             | Menu          | FA     | bars                 | `<i className="fas fa-bars" />`                 | solid Style (fas)   | yes     | Expanded version of lat navbar                          |
+|       <i className="fas fa-desktop fa-3x" />        | Dashboard            | Menu          | FA     | desktop              | `<i className="fas fa-desktop" />`              | solid Style (fas)   | yes     |                                                         |
+|      <i className="fas fa-stopwatch fa-3x" />       | Expiration           | Workflow      | FA     | stopwatch            | `<i className="fas fa-stopwatch" />`            | solid Style (fas)   | yes     |                                                         |
+|        <i className="fas fa-coins fa-3x" />         | Replication          | Workflow      | FA     | coins                | `<i className="fas fa-coins" />`                | solid Style (fas)   | yes     |                                                         |
+|        <i className="fas fa-rocket fa-3x" />        | Transition           | Workflow      | FA     | rocket               | `<i className="fas fa-rocket" />`               | solid Style (fas)   | yes     |                                                         |
+|        <i className="fas fa-reply fa-3x" />         | Discovery            | Workflow      | FA     | reply                | `<i className="fas fa-reply" />`                | solid Style (fas)   | yes     |                                                         |
+|      <i className="fas fa-chart-line fa-3x" />      | Metrics              | Action icon   | FA     | chart-line           | `<i className="fas fa-chart-line" />`           | solid Style (fas)   | yes     | Last column of Tables                                   |
+|       <i className="far fa-file-alt fa-3x" />       | Logs                 | Action icon   | FA     | file-alt             | `<i className="far fa-file-alt" />`             | regular Style (far) | yes     |                                                         |
+|         <i className="fas fa-edit fa-3x" />         | Edit                 | Action icon   | FA     | edit                 | `<i className="fas fa-edit" />`                 | solid Style (fas)   | yes     | Field editable                                          |
+|         <i className="fas fa-plus fa-3x" />         | Create-add           | Button-action | FA     | plus                 | `<i className="fas fa-plus" />`                 | solid Style (fas)   | yes     | New entity creation                                     |
+|        <i className="fas fa-trash fa-3x" />         | Delete               | Button-action | FA     | trash                | `<i className="fas fa-trash" />`                | solid Style (fas)   | yes     | Entity deletion                                         |
+|         <i className="fas fa-save fa-3x" />         | Save                 | Button-action | FA     | save                 | `<i className="fas fa-save" />`                 | solid Style (fas)   | yes     | Save changes on an entity                               |
+|  <i className="fas fa-external-link-alt fa-3x" />   | External-link        | Button-action | FA     | external-link-alt    | `<i className="fas fa-external-link-alt" />`    | solid Style (fas)   | yes     | Open an external link                                   |
+|        <i className="fas fa-times fa-3x" />         | Close                | Button-action | FA     | times                | `<i className="fas fa-times" />`                | solid Style (fas)   | yes     | Close a window/modal                                    |
+|      <i className="fas fa-caret-down fa-3x" />      | Dropdown-down        | Button-action | FA     | caret-down           | `<i className="fas fa-caret-down" />`           | solid Style (fas)   | yes     | Expand a drop-down                                      |
+|       <i className="fas fa-caret-up fa-3x" />       | Dropdown-up          | Button-action | FA     | caret-up             | `<i className="fas fa-caret-up" />`             | solid Style (fas)   | yes     | Dropdown expanded                                       |
+|        <i className="fas fa-search fa-3x" />        | Search               | Button-action | FA     | search               | `<i className="fas fa-search" />`               | solid Style (fas)   | yes     | Search bar                                              |
+|      <i className="fas fa-ellipsis-v fa-3x" />      | More                 | Button-action | FA     | ellipsis-v           | `<i className="fas fa-ellipsis-v" />`           | solid Style (fas)   | yes     | End of tables (not enough space to display all actions) |
+|   <i className="fas fa-question-circle fa-3x" />    | Info                 | Button-action | FA     | question-circle      | `<i className="fas fa-question-circle" />`      | solid Style (fas)   | yes     | Display tooltip info AND "About" (top menu)             |
+|         <i className="fas fa-sync fa-3x" />         | Sync                 | Button-action | FA     | sync                 | `<i className="fas fa-sync" />`                 | solid Style (fas)   | yes     | Refresh the metrics                                     |
+|     <i className="fas fa-file-export fa-3x" />      | Export               | Button-action | FA     | file-export          | `<i className="fas fa-file-export" />`          | solid Style (fas)   | yes     | Export the data in predefined format                    |
+|        <i className="far fa-clone fa-3x" />         | Copy                 | Button-action | FA     | clone                | `<i className="far fa-clone" />`                | regular Style (far) | yes     | Small icon next to a field that can be copied           |
+|     <i className="fas fa-file-upload fa-3x" />      | Upload               | Button-action | FA     | file-upload          | `<i className="fas fa-file-upload" />`          | solid Style (fas)   | yes     | Upload object                                           |
+|     <i className="fas fa-plus-square fa-3x" />      | Add-plus             | Button-action | FA     | plus-square          | `<i className="fas fa-plus-square" />`          | solid Style (fas)   | yes     | Add an item in a list                                   |
+|     <i className="fas fa-minus-square fa-3x" />     | Remove-minus         | Button-action | FA     | minus-square         | `<i className="fas fa-minus-square" />`         | solid Style (fas)   | yes     | Remove an item in a list                                |
+|         <i className="fas fa-sort fa-3x" />         | Sort                 | Table         | FA     | sort                 | `<i className="fas fa-sort" />`                 | solid Style (fas)   | yes     | Sort                                                    |
+|       <i className="fas fa-sort-up fa-3x" />        | Sort-up              | Table         | FA     | sort-up              | `<i className="fas fa-sort-up" />`              | solid Style (fas)   | yes     | Sort                                                    |
+|      <i className="fas fa-sort-down fa-3x" />       | Sort-down            | Table         | FA     | sort-down            | `<i className="fas fa-sort-down" />`            | solid Style (fas)   | yes     | Sort                                                    |
+|    <i className="fas fa-calendar-week fa-3x" />     | Calendar             | Pill          | FA     | calendar-week        | `<i className="fas fa-calendar-week" />`        | solid Style (fas)   | yes     | Metric over a period                                    |
+|       <i className="fas fa-arrow-up fa-3x" />       | Arrow-up             | Pill          | FA     | arrow-up             | `<i className="fas fa-arrow-up" />`             | solid Style (fas)   | yes     | Show an increase in trend                               |
+|      <i className="fas fa-arrow-down fa-3x" />      | Arrow-down           | Pill          | FA     | arrow-down           | `<i className="fas fa-arrow-down" />`           | solid Style (fas)   | yes     | Show a decrease in trend                                |
+|        <i className="far fa-folder fa-3x" />        | Folder               | Browsing      | FA     | folder               | `<i className="far fa-folder" />`               | regular Style (far) | yes     | Browsing                                                |
+|         <i className="far fa-file fa-3x" />         | File                 | Browsing      | FA     | file                 | `<i className="far fa-file" />`                 | regular Style (far) | yes     | Browsing                                                |
+|         <i className="fas fa-ban fa-3x" />          | Deletion-marker      | Browsing      | FA     | ban                  | `<i className="fas fa-ban" />`                  | solid Style (fas)   | yes     | Browsing - deletion markers on objects                  |
+|     <i className="fas fa-info-circle fa-3x" />      | Info-circle          | Status        | FA     | info-circle          | `<i className="fas fa-info-circle" />`          | solid Style (fas)   | yes     | Grey empty state-status (charts, tables)                |
+| <i className="fas fa-exclamation-triangle fa-3x" /> | Exclamation-triangle | Status        | FA     | exclamation-triangle | `<i className="fas fa-exclamation-triangle" />` | solid Style (fas)   | yes     | Yellow warning status (alerts list)                     |
+|  <i className="fas fa-exclamation-circle fa-3x" />  | Exclamation-circle   | Status        | FA     | exclamation-circle   | `<i className="fas fa-exclamation-circle" />`   | solid Style (fas)   | yes     | Red critical alerts                                     |
+|        <i className="fas fa-check fa-3x" />         | Check                | Status        | FA     | check                | `<i className="fas fa-check" />`                | solid Style (fas)   | yes     | Healthy status AND successful operation                 |
+|      <i className="fas fa-shield-alt fa-3x" />      | Protected            | Status        | FA     | shield-alt           | `<i className="fas fa-shield-alt" />`           | solid Style (fas)   | yes     | Extra protection status                                 |
+|         <i className="fas fa-bars fa-3x" />         | Bars                 | Menu          | FA     | bars                 | `<i className="fas fa-bars" />`                 | solid Style (fas)   | yes     | Expand/collapse the lat navbar                          |
+|        <i className="fas fa-link   fa-3x" />        | Bound                | Status        | FA     | link                 | `<i className="fas fa-link" />`                 | solid Style (fas)   | yes     | Bound status                                            |
+|       <i className="fas fa-unlink   fa-3x" />       | Unbound              | Status        | FA     | unlink               | `<i className="fas fa-unlink" />`               | solid Style (fas)   | yes     | Unbound status                                          |
+|    <i className="fas fa-exclamation   fa-3x" />     | Exclamation          | Status        | FA     | exclamation          | `<i className="fas fa-exclamation" />`          | solid Style (fas)   | yes     | Issue status                                            |
+|       <i className="fas fa-minus   fa-3x" />        | Hyphen               | Status        | FA     | minus                | `<i class="fas fa-minus" />`                    | solid Style (fas)   | yes     | No status, in tables                                    |
+|    <i className="fas   fa-times-circle fa-3x" />    | Remove-circle        | Action        | FA     | times-circle         | `<i class="fas fa-times-circle" />`             | solid Style (fas)   | yes     | Remove a criteria in a search                           |
+|    <i className="fas fa-file-upload   fa-3x" />     | Object-upload        | Action        | FA     | file-upload          | `<i class="fas fa-file-upload" />`              | solid Style (fas)   | yes     | When uploading an object                                |
+|     <i className="fas fa-chevron-left fa-3x" />     | Chevron-left         | Navigation    | FA     | chevron-left         | `<i className="fas fa-chevron-left" />`         | solid Style (fas)   | yes     | Expand tabs                                             |
+|    <i className="fas fa-chevron-right fa-3x" />     | Chevron-right        | Navigation    | FA     | chevron-right        | `<i className="fas fa-chevron-right" />`        | solid Style (fas)   | yes     | Expand tables                                           |
+|  <i className="fas fa-angle-double-right fa-3x" />  | Angle-double-right   | Status        | FA     | angle-double-right   | `<i className="fas fa-angle-double-right" />`   | solid Style (fas)   | yes     | Show an increase "From 1 value to another one"          |
+|       <i className="fas fa-language fa-3x" />       | Language             | Menu          | FA     | language             | `<i className="fas fa-language" />`             | solid Style (fas)   | yes     | Select the language in the top menu                     |
+|       <i className="fas fa-palette fa-3x" />        | Theme                | Menu          | FA     | palette              | `<i className="fas fa-palette" />`              | solid Style (fas)   | yes     | Select the theme in the top menu                        |
+|    <i className="fas fa-clipboard-list fa-3x" />    | Documentation        | Menu          | FA     | clipboard-list       | `<i className="fas fa-clipboard-list" />`       | solid Style (fas)   | yes     | Access to the documentation link                        |
+|       <i className="fas fa-comments fa-3x" />       | Support              | Menu          | FA     | comments             | `<i className="fas fa-comments" />`             | solid Style (fas)   | yes     | Access to the support link                              |
+|    <i className="fas fa-file-contract fa-3x" />     | EULA                 | Menu          | FA     | file-contract        | `<i className="fas fa-file-contract" />`        | solid Style (fas)   | yes     | Access to the "Terms of use" link                       |
+|     <i className="fas fa-sign-out-alt fa-3x" />     | Log-out              | Menu          | FA     | sign-out-alt         | `<i className="fas fa-sign-out-alt" />`         | solid Style (fas)   | yes     | Log out action                                          |
+|      <i className="far fa-hourglass fa-3x" />       | Hourglass            | Status        | FA     | hourglass            | `<i className="far fa-hourglass" />`            | regular Style (far) | ?       | Workflow delayed                                        |
+|        <i className="fas fa-pause fa-3x" />         | Pause                | Status        | FA     | pause                | `<i className="fas fa-pause" />`                | solid Style (fas)   | yes     | Workflow paused                                         |
+|     <i className="fas fa-level-up-alt fa-3x" />     | Upgrade              | Button-action | FA     | level-up-alt         | `<i className="fas fa-level-up-alt" />`         | solid Style (fas)   | yes     | Upgrade version                                         |
+|      <i className="fas fa-expand-alt fa-3x" />      | Expansion            | Button-action | FA     | expand-alt           | `<i className="fas fa-expand-alt" />`           | solid Style (fas)   | yes     | Expand with no rebalancing                              |
+|    <i className="fas fa-balance-scale fa-3x" />     | Rebalance            | Button-action | FA     | balance-scale        | `<i className="fas fa-balance-scale" />`        | solid Style (fas)   | yes     | Expand with rebalancing                                 |
+|       <i className="fas fa-hard-hat fa-3x" />       | Maintenance          | Button-action | FA     | hard-hat             | `<i className="fas fa-hard-hat" />`             | solid Style (fas)   | yes     | Switch to "maintenance mode"                            |
+|     <i className="fas fa-exchange-alt fa-3x" />     | Change-erasure       | Button-action | FA     | exchange-alt         | `<i className="fas fa-exchange-alt" />`         | solid Style (fas)   | yes     | Change erasure code level                               |
+|        <i className="fas fa-circle fa-3x" />        | Circle-health        | Status        | FA     | circle               | `<i className="fas-circle" />`                  | solid Style (fas)   | yes     | Display status (Healthy, Warning, Critical)             |
+|        <i className="far fa-circle fa-3x" />        | Circle-empty         | Status        | FA     | circle               | `<i className="far-circle" />`                  | regular Style (far) | yes     | Display empty health status                             |
+|       <i className="fas fa-toolbox fa-3x" />        | Services             | Status        | FA     | toolbox              | `<i className="fas fa-toolbox" />`              | solid Style (fas)   | yes     | Status icon for Services                                |
+|        <i className="fas fa-cubes fa-3x" />         | Data-services        | Hero          | FA     | cubes                | `<i className="fas fa-cubes" />`                | solid Style (fas)   | yes     | Hero icon for Data-services                             |
+|     <i className="fas fa-arrow-right fa-3x" />      | Arrow-right          | Navigation    | FA     | arrow-right          | `<i className="fas fa-right-up" />`             | solid Style (fas)   | yes     | Button as "Continue", next step                         |
+|      <i className="fas fa-arrow-left fa-3x" />      | Arrow-left           | Navigation    | FA     | arrow-left           | `<i className="fas fa-arrow-left" />`           | solid Style (fas)   | yes     | Go back to a previous status/page                       |
+|     <i className="fas fa-certificate fa-3x" />      | Certificate          | Entities      | FA     | certificate          | `<i className="fas fa-certificate" />`          | solid Style (fas)   | yes     | Certificate                                             |
+|       <i className="fas fa-download fa-3x" />       | Download             | Action icon   | FA     | download             | `<i className="fas fa-download" />`             | solid Style (fas)   | yes     | Download                                                |
+|       <i className="fas fa-id-card fa-3x" />        | ID-card              | Entities      | FA     | id-card              | `<i className="fas fa-id-card"/>`               | solid Style (fas)   | yes     | Identity                                                |
+|         <i className="fas fa-cog fa-3x" />          | Setting              | Action        | FA     | cog                  | `<i className="fas fa-cog"/>`                   | solid Style (fas)   | yes     | Global Settings                                         |

package/stories/input.stories.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import { Input as InputV2 } from '../src/lib/components/inputv2/inputv2';
+import { action } from '@storybook/addon-actions';
+import styled from 'styled-components';
+import { Wrapper } from './common';
+
+const sizes = ['1/3', '1/2', '2/3', '1'];
+
+const InputWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+`;
+
+export default {
+  title: 'Components/Inputs/Input',
+  component: InputV2,
+  decorators: [
+    (story) => <Wrapper style={{ minHeight: '15rem' }}>{story()}</Wrapper>,
+  ],
+  args: {
+    onChange: action('onChange'),
+  },
+  argTypes: {
+    size: {
+      options: sizes,
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    placeholder: 'Try me',
+  },
+};
+
+export const WithPlaceholder = {
+  args: {
+    placeholder: 'Some text',
+  },
+};
+
+export const SizeScale = {
+  render: (args) => {
+    return (
+      <InputWrapper>
+        {sizes.map((size) => (
+          <InputV2
+            size={size}
+            placeholder={`Size : ${size}`}
+            {...args}
+          ></InputV2>
+        ))}
+      </InputWrapper>
+    );
+  },
+};
+
+export const WithIcons = {
+  render: (args) => {
+    return (
+      <InputWrapper>
+        <InputV2
+          id="ileft"
+          leftIcon="Account"
+          placeholder="With a left icon"
+          {...args}
+        />
+        <InputV2
+          id="iright"
+          rightIcon="Alert"
+          placeholder="With a right icon"
+          {...args}
+        />
+      </InputWrapper>
+    );
+  },
+};
+
+export const WithError = {
+  args: {
+    error: 'Something bad',
+    placeholder: 'Some text',
+  },
+};
+
+export const Disabled = {
+  args: {
+    disabled: true,
+    placeholder: 'Some text',
+  },
+};
+
+/*
+const options = Array.from(new Array(1000), (_, index) => ({
+  label: `Item ${index}`,
+  value: index,
+  'data-cy': `Item_${index}`,
+}));
+
+
+const ExampleInput = ({}) => {
+  const CustomInput = styled.div`
+    .sc-input-error {
+      width: 200px;
+    }
+  `;
+  const [numberValue, setNumberValue] = useState(1);
+  return (
+    <Wrapper>
+      <Title>Input without label</Title>
+      <Input
+        id="id1"
+        value="value"
+        onChange={action('onChange')}
+        data-cy="default_input"
+      />
+      <Title>Input disabled</Title>
+      <Input
+        id="id1"
+        value="value"
+        disabled={true}
+        onChange={action('onChange')}
+        data-cy="default_input"
+      />
+      <Title>Input with label</Title>
+      <Input
+        id="id2"
+        label="label"
+        value="value"
+        onChange={action('onChange')}
+      />
+      <Title>Input with error</Title>
+      <Input
+        id="id3"
+        label="label"
+        value="value"
+        error="error"
+        onChange={action('onChange')}
+      />
+      <Title>Input with long error</Title>
+      <CustomInput>
+        <Input
+          id="id3"
+          label="label"
+          value="value"
+          error="long error error error error error error error error error"
+          onChange={action('onChange')}
+        />
+      </CustomInput>
+      <Title>Checkbox Input</Title>
+      <Input
+        id="id4"
+        label="label"
+        value="value"
+        onChange={action('onChange')}
+        type="checkbox"
+      />
+      <Title>Checkbox Input with error</Title>
+      <Input
+        id="id5"
+        label="label"
+        value="value"
+        onChange={action('onChange')}
+        type="checkbox"
+        error="error"
+      />
+      <Title>Select Input</Title>
+      <Input
+        id="id6"
+        label="label"
+        onChange={action('onChange')}
+        type="select"
+        options={options}
+        placeholder="Select an item..."
+        noOptionsMessage={() => 'Not found'}
+        value={options[0]}
+      />
+      <Title>Textarea Input</Title>
+      <Input
+        id="id7"
+        label="label"
+        onChange={action('onChange')}
+        type="textarea"
+        placeholder="Write here..."
+        value=""
+      />
+      <Title>Textarea Input with error</Title>
+      <Input
+        id="id7"
+        label="label"
+        onChange={action('onChange')}
+        type="textarea"
+        placeholder="Write here..."
+        error="error"
+        value="Hello"
+        cols={50}
+        rows={5}
+      />
+      <Title>Number Input (Max 100)</Title>
+      <Input
+        id="id8"
+        value={numberValue}
+        onChange={(e) => {
+          setNumberValue(e.currentTarget.value);
+        }}
+        type="number"
+        min="0"
+        max="100"
+        error={
+          parseInt(numberValue) > 100
+            ? 'The input number must be less than or equal to 100'
+            : ''
+        }
+      />
+    </Wrapper>
+  );
+};
+
+export default {
+  title: 'Components/Input/Input',
+  component: Input,
+};
+export const Default = {
+  render: ({}) => {
+    return <ExampleInput />;
+  },
+};
+*/

package/stories/inputlist.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { InputList } from '../src/lib/components/inputlist/InputList.component';
+import { Wrapper as StoryWrapper } from './common';
+import { FormSection } from '../src/lib/components/form/Form.component';
+import { Controller, useForm } from 'react-hook-form';
+
+const meta: Meta<typeof InputList> = {
+  tags: ['autodocs'],
+  title: 'Components/Inputs/InputList',
+  component: InputList,
+};
+export default meta;
+
+interface InputListForm {
+  firstNames: string[];
+  lastNames: string[];
+}
+
+const ExampleList = () => {
+  const { control } = useForm<InputListForm>({
+    mode: 'all',
+    defaultValues: {
+      firstNames: [''],
+      lastNames: [''],
+    },
+  });
+
+  return (
+    <FormSection>
+      <Controller
+        control={control}
+        rules={{
+          required: true,
+        }}
+        render={({ field: { onChange, onBlur, value } }) => (
+          <InputList
+            placeholder="First name"
+            onBlur={onBlur}
+            onChange={onChange}
+            value={value}
+          />
+        )}
+        name="firstNames"
+      />
+    </FormSection>
+  );
+};
+type Story = StoryObj<typeof InputList>;
+export const SimpleListOfInputs: Story = {
+  name: 'List of inputs',
+  render: () => (
+    <StoryWrapper>
+      <ExampleList />
+    </StoryWrapper>
+  ),
+};