style(Table): add a unstyled prop

Default is false; Is set to true: Remove any presentation style that is applied to the table
opendatasoft · Feb 13, 2024 · d30d146 · d30d146
1 parent a5d1ae4
commit d30d146
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 50 deletions.
diff --git a/packages/visualizations-react/stories/Table/Table.stories.tsx b/packages/visualizations-react/stories/Table/Table.stories.tsx
@@ -89,3 +89,9 @@ CustomTheme.args = {
     data,
     options: { ...options, theme },
 };
+
+export const Unstyled = Template.bind({});
+Unstyled.args = {
+    data,
+    options: { ...options, theme, unstyled: true },
+};
diff --git a/packages/visualizations/src/components/Table/Body.svelte b/packages/visualizations/src/components/Table/Body.svelte
@@ -19,3 +19,16 @@
         </tr>
     {/each}
 </tbody>
+
+<style lang="scss">
+    :global(.ods-dataviz-sdk-table--default) {
+        tbody tr {
+            &:not(:last-child) {
+                border-bottom: 1px solid var(--border-color);
+            }
+            &:hover {
+                background-color: var(--active-row-background-color);
+            }
+        }
+    }
+</style>
diff --git a/packages/visualizations/src/components/Table/Cell.svelte b/packages/visualizations/src/components/Table/Cell.svelte
@@ -3,3 +3,13 @@
 </script>
 
 <td>{value}</td>
+
+<style lang="scss">
+    :global(.ods-dataviz-sdk-table--default) {
+        td {
+            padding: var(--spacing-75);
+            font-weight: normal;
+            text-align: left;
+        }
+    }
+</style>
diff --git a/packages/visualizations/src/components/Table/Header.svelte b/packages/visualizations/src/components/Table/Header.svelte
@@ -13,3 +13,18 @@
         {/each}
     </tr>
 </thead>
+
+<style lang="scss">
+    :global(.ods-dataviz-sdk-table--default) {
+        thead {
+            border-bottom: 2px solid var(--header-border-color);
+        }
+        th {
+            padding: var(--spacing-75);
+            font-weight: normal;
+            text-align: left;
+            color: var(--header-text-color);
+            background-color: var(--header-background-color);
+        }
+    }
+</style>
diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte
@@ -17,20 +17,23 @@
     $: ({ value: records } = data);
     // FIXME: Eslint is in conflict with prettier
     // eslint-disable-next-line object-curly-newline
-    $: ({ columns, title, subtitle, description, source, theme } = options);
+    $: ({ columns, title, subtitle, description, source, theme, unstyled } = options);
+    $: defaultStyle = !unstyled;
 
     $: style = parseTheme(theme);
 </script>
 
-<div class="container" {style}>
-    <div class="header">
-        {#if title}
-            <h3>{title}</h3>
-        {/if}
-        {#if subtitle}
-            <p>{subtitle}</p>
-        {/if}
-    </div>
+<div class="ods-dataviz-sdk-table" class:ods-dataviz-sdk-table--default={defaultStyle} {style}>
+    {#if title || subtitle} 
+        <div class="dataviz-header">
+            {#if title}
+                <h3>{title}</h3>
+            {/if}
+            {#if subtitle}
+                <p>{subtitle}</p>
+            {/if}
+        </div>
+    {/if}
     <div class="table-wrapper">
         <table aria-describedby={description ? tableId : undefined}>
             <Header {columns} />
@@ -47,8 +50,8 @@
     {/if}
 </div>
 
-<style>
-    .container {
+<style lang="scss">
+    .ods-dataviz-sdk-table {
         --spacing-50: 6px;
         --spacing-75: 9px;
         --spacing-100: 13px;
@@ -58,46 +61,30 @@
         flex-wrap: wrap;
         flex-direction: column;
     }
-    .header {
-        margin-bottom: var(--spacing-100);
-    }
-    .header h3,
-    .header p {
-        margin: 0;
-    }
-    .table-wrapper {
-        border: solid 1px var(--border-color);
-        border-radius: var(--spacing-50);
-        overflow-x: auto;
-        max-width: 100%;
-        margin-bottom: var(--spacing-100);
-    }
-    table {
-        border-collapse: collapse;
-        color: var(--text-color);
-        white-space: nowrap;
-    }
-    :global(.container th),
-    :global(.container td) {
-        padding: var(--spacing-75);
-        font-weight: normal;
-        text-align: left;
-    }
-    :global(.container th) {
-        color: var(--header-text-color);
-        background-color: var(--header-background-color);
-    }
-    :global(.container thead) {
-        border-bottom: 2px solid var(--header-border-color);
-    }
-    :global(.container tbody tr:not(:last-child)) {
-        border-bottom: 1px solid var(--border-color);
-    }
-    :global(.container tbody tr:hover) {
-        background-color: var(--active-row-background-color);
-    }
     /* Suitable for elements that are used via aria-describedby or aria-labelledby */
     .a11y-invisible-description {
         display: none;
     }
+
+    .ods-dataviz-sdk-table--default {
+        .dataviz-header {
+            margin-bottom: var(--spacing-100);
+            h3, p {
+                margin: 0;
+            }
+        }
+        .table-wrapper {
+            border: solid 1px var(--border-color);
+            border-radius: var(--spacing-50);
+            overflow-x: auto;
+            max-width: 100%;
+            margin-bottom: var(--spacing-100);
+            table {
+                border-collapse: collapse;
+                color: var(--text-color);
+                white-space: nowrap;
+            }
+        }
+    }  
+    
 </style>
diff --git a/packages/visualizations/src/components/Table/types.ts b/packages/visualizations/src/components/Table/types.ts
@@ -27,4 +27,9 @@ export type TableOptions = {
     description?: string;
     source?: Source;
     theme?: Theme;
+    /** 
+     * Removes all the presentational styles.
+     * Default is `false`.
+     */
+    unstyled?: boolean;
 };