feat(status): update all component status, added new ready for first …

…integration,first integration (#87)

Update all component status, added new ready for first integration,first integration

.storybook/blocks/Status/Status.module.css

@@ -5,16 +5,21 @@
 }
 
 .proposal {
-  color: var(--color-tarmac-grey-700);
-  background-color: var(--color-tarmac-grey-50);
+  color: var(--color-old-ferrari-red-700);
+  background-color: var(--color-old-ferrari-red-100);
 }
 
-.ready {
-  color: var(--color-success-500);
-  background-color: var(--color-success-50);
+.first_integration {
+  color: var(--color-mustang-yellow-700);
+  background-color: var(--color-mustang-yellow-100);
 }
 
-.recommendation {
+.ready_for_first_integration {
   color: var(--color-tertiary-700);
   background-color: var(--color-tertiary-300);
 }
+
+.recommendation {
+  color: var(--color-success-500);
+  background-color: var(--color-success-50);
+}

.storybook/blocks/Status/Status.tsx

@@ -4,8 +4,9 @@ import styles from './Status.module.css';
 
 const STATUS = {
   0: 'Proposal',
-  1: 'Ready',
-  2: 'Recommendation',
+  1: 'Ready for first integration',
+  2: 'First integration',
+  3: 'Recommendation',
 };
 
 type StatusProps = {
@@ -17,7 +18,7 @@ type Index = keyof typeof STATUS;
 export const Status: React.FC<StatusProps> = ({ stage }) => {
   const status = STATUS[stage as Index];
   // Convert string to snake case
-  const statusClassName = status.toLowerCase().replace(' ', '_');
+  const statusClassName = status.toLowerCase().replaceAll(' ', '_');
   return (
     <div>
       <a

.storybook/blocks/Table/Table.module.css

@@ -3,13 +3,14 @@
   border-collapse: collapse;
   border: 1px solid var(--color-mica-blue-200);
 
-  & th, & td {
+  & th,
+  & td {
     text-align: left;
     padding: 8px;
     border: 1px solid var(--color-mica-blue-200);
   }
 
   & thead {
-      background-color: var(--color-mica-blue-50);
+    background-color: var(--color-mica-blue-50);
   }
 }

docs/ComponentStatuses.stories.mdx

@@ -27,17 +27,22 @@ import { version } from '../package.json';
     [
       0,
       <Status stage={0} />,
-      'Component is still under discussion, should have a description of the requirements for the new component',
+      'Component is under investigation, must have a description of the requirements',
     ],
     [
       1,
       <Status stage={1} />,
-      'Implemented published component, not tested in products',
+      'Component is implemented, not tested in products',
     ],
     [
       2,
       <Status stage={2} />,
-      'Tested in at least one of the products, clear documentation with examples of use, ready for implementation',
+      'Component is currently undergoing its first integration process',
+    ],
+    [
+      3,
+      <Status stage={3} />,
+      'Integrated in at least one SPA, clear documentation with examples of use, ready for integration for all',
     ],
   ]}
 />

packages/accordion/src/docs/Component.stories.mdx

@@ -64,7 +64,7 @@ export const AccordionTemplate = args => {
 <ComponentHeader
   name="Accordion"
   version={version}
-  stage={2}
+  stage={3}
   design="https://www.figma.com/file/rrvkvQEoVTOHa7MzyKSaoz/OTP-Global-Design-System?node-id=4289%3A100591"
 />
 

packages/themes/src/docs/Component.stories.mdx

@@ -19,7 +19,7 @@ import { ComponentHeader, CssVars, TabContainer } from 'storybook/blocks';
 <ComponentHeader
   name="Themes"
   version={version}
-  stage={2}
+  stage={3}
   design="https://www.figma.com/file/rrvkvQEoVTOHa7MzyKSaoz/OTP-Global-Design-System?node-id=1291%3A35196"
 />
 

packages/vars/src/docs/Component.stories.mdx

@@ -19,7 +19,7 @@ import { name, version } from '../../package.json';
   name="vars"
   version={version}
   package="@heycar-uikit/vars"
-  stage={2}
+  stage={3}
 />
 
 ```css