feat(table): add striped property update loading state and remove h…

…over style (#2222) * feat(table): add property * fix(table): update loading state and remove hover style * ci: add missing unit test * fix: feedback dodo on loading
scaleway · Jan 27, 2023 · 2768808 · 2768808
1 parent f7a064c
commit 2768808
Show file tree

Hide file tree

Showing 7 changed files with 534 additions and 190 deletions.
diff --git a/packages/ui/src/__stories__/ComponentState/ComponentState.tsx b/packages/ui/src/__stories__/ComponentState/ComponentState.tsx
@@ -45,7 +45,7 @@ const ComponentState = () => (
           <Table.HeadCell>State</Table.HeadCell>
         </Table.Row>
       </Table.Head>
-      <Table.Body>
+      <Table.Body striped>
         {modules.map(module => {
           if (module.status === 'fulfilled') {
             const desctructuredName: string[] =

diff --git a/packages/ui/src/__stories__/Properties/Properties.tsx b/packages/ui/src/__stories__/Properties/Properties.tsx
@@ -11,10 +11,6 @@ const StyledText = styled(Text)`
 
 const StyledTableRow = styled(Table.Row)`
   vertical-align: top;
-
-  &:nth-of-type(even) {
-    background-color: ${({ theme }) => theme.colors.neutral.backgroundStrong};
-  }
 `
 
 type PropertyType = {
@@ -134,7 +130,7 @@ const Properties = () => {
             <Table.HeadCell>Components usage</Table.HeadCell>
           </Table.Row>
         </Table.Head>
-        <Table.Body>
+        <Table.Body striped>
           {Object.keys(sortedPropertiesUsagesCountAndComponentsName).map(
             property => {
               const lowerCaseProperty = property.toLowerCase()

diff --git a/packages/ui/src/components/Table/__stories__/Striped.stories.tsx b/packages/ui/src/components/Table/__stories__/Striped.stories.tsx
@@ -0,0 +1,50 @@
+import { Table } from '..'
+import { Template } from './Template.stories'
+
+export const Striped = Template.bind({})
+
+Striped.args = {
+  children: [
+    <Table.Head>
+      <Table.Row>
+        <Table.HeadCell>ID</Table.HeadCell>
+        <Table.HeadCell>Date</Table.HeadCell>
+      </Table.Row>
+    </Table.Head>,
+    <Table.Body striped>
+      <Table.Row>
+        <Table.BodyCell>001</Table.BodyCell>
+        <Table.BodyCell>Just now</Table.BodyCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.BodyCell>002</Table.BodyCell>
+        <Table.BodyCell>Yesterday</Table.BodyCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.BodyCell>003</Table.BodyCell>
+        <Table.BodyCell>Yesterday</Table.BodyCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.BodyCell>004</Table.BodyCell>
+        <Table.BodyCell>Yesterday</Table.BodyCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.BodyCell>005</Table.BodyCell>
+        <Table.BodyCell>Yesterday</Table.BodyCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.BodyCell>006</Table.BodyCell>
+        <Table.BodyCell>Tomorrow</Table.BodyCell>
+      </Table.Row>
+    </Table.Body>,
+  ],
+}
+
+Striped.parameters = {
+  docs: {
+    description: {
+      story:
+        'Striped prop will allow you to add background one row out of two to give more visibility in you table content.',
+    },
+  },
+}
diff --git a/packages/ui/src/components/Table/__stories__/index.stories.tsx b/packages/ui/src/components/Table/__stories__/index.stories.tsx
@@ -18,3 +18,4 @@ export { Playground } from './Playground.stories'
 export { Hoverable } from './Hoverable.stories'
 export { Loader } from './Loader.stories'
 export { ColumnWidth } from './ColumnWidth'
+export { Striped } from './Striped.stories'