fix(Table): UI and styles updates (#238)

packages/visualizations-react/stories/Table/PaginatedTemplates.tsx

@@ -50,7 +50,7 @@ export const usePaginatedData = ({
 };
 
 export const PaginatedTemplate = (pagination: Pagination) => {
-    const { current = 1, recordsPerPage = 5 } = pagination;
+    const { current = 1, recordsPerPage = 5, labels } = pagination;
     const { paginatedData, page, pageSize, setPage } = usePaginatedData({
         current,
         recordsPerPage,
@@ -63,6 +63,7 @@ export const PaginatedTemplate = (pagination: Pagination) => {
             recordsPerPage: pageSize,
             totalRecords: data.length,
             onPageChange: setPage,
+            labels,
         },
     };
 

packages/visualizations-react/stories/Table/Pagination.stories.tsx

@@ -40,6 +40,9 @@ export const CustomStyle = StyledPaginated.bind({});
 CustomStyle.args = {
     current: 2,
     recordsPerPage: 3,
+    labels: {
+        records: 'items',
+    },
 };
 
 const PageSizeTable: ComponentStory<typeof PageSizeTemplate> = args => (
@@ -49,4 +52,4 @@ export const PageSize = PageSizeTable.bind({});
 PageSize.args = {
     current: 2,
     recordsPerPage: 5,
-};
+};

packages/visualizations-react/stories/Table/Table.stories.tsx

@@ -36,7 +36,22 @@ const CustomStyleTemplate: ComponentStory<typeof Table> = args => (
 export const CustomStyle = CustomStyleTemplate.bind({});
 CustomStyle.args = {
     data,
-    options,
+    options: {
+        ...options,
+        pagination: {
+            current: 1,
+            totalRecords: value.length,
+            recordsPerPage: 5,
+            onPageChange: () => {},
+            pageSizeSelect: {
+                options: [
+                    { label: '5 per page', value: 5 },
+                    { label: '10 per page', value: 10 },
+                ],
+                onChange: () => {},
+            },
+        },
+    },
 };
 
 const ScrollTemplate: ComponentStory<typeof Table> = args => (
@@ -51,6 +66,12 @@ Scroll.args = {
     options,
 };
 
+export const TwoColumns = Template.bind({});
+TwoColumns.args = {
+    data,
+    options: { ...options, columns: options.columns.slice(0, 2) },
+};
+
 export const Unstyled = Template.bind({});
 Unstyled.args = {
     data,

packages/visualizations-react/stories/Table/custom-style.css

@@ -14,3 +14,20 @@
 .table-story--custom-style tbody tr:hover {
     background-color: #f9aea4;
 }
+
+.table-story--custom-style .pagination .arrow-button,
+.table-story--custom-style .pagination .page-button {
+    color:  #f94346;
+}
+
+.table-story--custom-style .pagination .arrow-button:disabled {
+    color:  #fcd4cf;
+}
+
+.table-story--custom-style .pagination .page-size select {
+    border-color: #f94346;
+}
+
+.table-story--custom-style .numbering  {
+    color: #808080;
+}

packages/visualizations-react/stories/Table/pagination.css

@@ -1,14 +1,16 @@
 .custom-pagination .ods-visualizations-table .pagination {
-flex-direction: row-reverse;
-justify-content: flex-start;
+        grid-template-areas: 'size pages numbering';
+}
+.custom-pagination .ods-visualizations-table .numbering {
+        margin-left: auto;
 }
 
-.custom-pagination .ods-visualizations-table .current {
+.custom-pagination .ods-visualizations-table .page-button--active {
         border-radius: 999px;
         box-shadow: rgb(85, 91, 255) 0px 0px 0px 1px, rgb(31, 193, 27) 0px 0px 0px 2px, rgb(255, 217, 19) 0px 0px 0px 3px, rgb(255, 156, 85) 0px 0px 0px 4px, rgb(255, 85, 85) 0px 0px 0px 5px;
         color: rgba(240, 46, 170, 0.4);
 }
 
 .custom-pagination .ods-visualizations-table .numbering {
         color: rgba(240, 46, 170, 0.2); 
-}
+}

packages/visualizations/src/components/Pagination/Button.svelte

@@ -13,9 +13,10 @@
         | typeof DoubleRight
         | typeof SingleRight;
     export let disabled = false;
+    export let label: string | undefined;
 </script>
 
-<button on:click {disabled}>
+<button on:click {disabled} aria-label={label} class={$$props.class}>
     <svelte:component this={icon} />
 </button>
 
@@ -35,11 +36,11 @@
 
     :global(.ods-dataviz--default) {
         button {
-            color: '#142E7B';
+            color: '#000';
         }
 
         button:disabled {
-            color: '#C6CBDE';
+            color: '#DEE5EF';
         }
     }
 </style>

packages/visualizations/src/components/Pagination/Numbering.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
     export let current: [number, number];
     export let total: number;
+    export let recordsLabel: string | undefined;
 </script>
 
 <span>
-    <b>{current[0]}-{current[1]}/{total}</b> records
+    <b>{current[0]}-{current[1]}/{total}</b>
+    {recordsLabel || ''}
 </span>
 
 <!-- markup (zero or more items) goes here -->

packages/visualizations/src/components/Pagination/PageSize.svelte

@@ -29,5 +29,6 @@
         padding: var(--spacing-50);
         border: solid 1px var(--border-color);
         border-radius: var(--border-radius-2);
+        width: fit-content;
     }
 </style>

packages/visualizations/src/components/Pagination/Pages.svelte

@@ -5,31 +5,45 @@
     import SingleLeft from './SingleLeft.svelte';
     import SingleRight from './SingleRight.svelte';
     import { getPages } from './utils';
+    import type { Pagination } from './types';
 
     export let totalPages: number;
     export let current: number;
+    export let labels: Pagination['labels'];
     export let onPageChange: (page: number) => void;
 
     $: pages = getPages({ current, totalPages });
 </script>
 
 <ul>
     <li>
-        <Button on:click={() => onPageChange(1)} icon={DoubleLeft} disabled={current === 1} />
+        <Button
+            on:click={() => onPageChange(1)}
+            icon={DoubleLeft}
+            label={labels?.firstPage}
+            disabled={current === 1}
+            class="arrow-button"
+        />
     </li>
     <li>
         <Button
             on:click={() => onPageChange(current - 1)}
             icon={SingleLeft}
+            label={labels?.previousPage}
             disabled={current === 1}
+            class="arrow-button"
         />
     </li>
-    {#if current - 1 > 1 && totalPages < 3}
+    {#if current - 1 > 1 && totalPages > 3}
         <span>...</span>
     {/if}
     {#each pages as page}
         <li>
-            <button on:click={() => onPageChange(page)} class:current={page === current}>
+            <button
+                on:click={() => onPageChange(page)}
+                class="page-button"
+                class:page-button--active={page === current}
+            >
                 {page}
             </button>
         </li>
@@ -41,14 +55,18 @@
         <Button
             on:click={() => onPageChange(current + 1)}
             icon={SingleRight}
+            label={labels?.nextPage}
             disabled={current === totalPages}
+            class="arrow-button"
         />
     </li>
     <li>
         <Button
             on:click={() => onPageChange(totalPages)}
             icon={DoubleRight}
+            label={labels?.lastPage}
             disabled={current === totalPages}
+            class="arrow-button"
         />
     </li>
 </ul>
@@ -91,10 +109,10 @@
         width: 100%;
     }
 
-    .current {
+    :global(.page-button--active) {
         border-radius: 3px;
         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.39);
         background-color: #fff;
-        color: #142e7b;
+        color: #000;
     }
 </style>

packages/visualizations/src/components/Pagination/Pagination.svelte

@@ -2,77 +2,71 @@
     import Pages from './Pages.svelte';
     import Numbering from './Numbering.svelte';
     // import PerPage from "./PerPage.svelte";
-    import type { PageSizeSelect } from './types';
+    import type { PageSizeSelect, Pagination } from './types';
     import PageSize from './PageSize.svelte';
 
     export let current: number;
-    export let pageSizeSelect: PageSizeSelect | undefined;
     export let onPageChange: (page: number) => void;
     export let totalRecords: number;
     export let recordsPerPage: number;
+    export let pageSizeSelect: PageSizeSelect;
+    export let labels: Pagination['labels'] = {};
 
     $: totalPages = Math.ceil(totalRecords / recordsPerPage);
 </script>
 
-<div class="pagination">
-    <div class="numbering">
-        <Numbering
-            current={[
-                recordsPerPage * (current - 1) + 1,
-                Math.min(recordsPerPage * current, totalRecords),
-            ]}
-            total={totalRecords}
-        />
-    </div>
-    <div class="pages">
-        <Pages {current} {totalPages} {onPageChange} />
-    </div>
-    <div class="page-size">
-        {#if pageSizeSelect}
-            <PageSize selected={recordsPerPage} {...pageSizeSelect} />
-        {/if}
+<div class="pagination-container">
+    <div class="pagination">
+        <div class="numbering">
+            <Numbering
+                current={[
+                    recordsPerPage * (current - 1) + 1,
+                    Math.min(recordsPerPage * current, totalRecords),
+                ]}
+                total={totalRecords}
+                recordsLabel={labels?.records}
+            />
+        </div>
+        <div class="pages">
+            <Pages {current} {totalPages} {onPageChange} {labels} />
+        </div>
+        <div class="page-size">
+            {#if pageSizeSelect}
+                <PageSize selected={recordsPerPage} {...pageSizeSelect} />
+            {/if}
+        </div>
     </div>
 </div>
 
 <!-- markup (zero or more items) goes here -->
 <style lang="scss">
+    .pagination-container {
+        container: pagination / inline-size;
+    }
     .pagination {
-        display: flex;
-        justify-content: space-between;
+        display: grid;
+        grid-template-areas: 'numbering pages size';
+        grid-template-columns: repeat(3, minmax(0, 1fr));
         align-items: center;
+        gap: var(--spacing-100);
         padding: 13px 0;
-    }
-
-    :global(.ods-dataviz--default) {
-        .pages {
-            flex-grow: 1;
-        }
-
-        .numbering,
-        .page-size {
-            flex: 0 1 120px;
+        .numbering {
+            grid-area: numbering;
         }
-    }
-
-    :global(.ods-dataviz-sdk-table--default) {
         .pages {
-            flex-grow: 1;
+            grid-area: pages;
         }
-
-        .numbering,
         .page-size {
-            flex: 0 1 120px;
+            grid-area: size;
+            margin-left: auto;
         }
     }
 
-    :global(.ods-dataviz-sdk-table--default) {
-        .pages {
-            flex-grow: 1;
-        }
-
-        .numbering,
-        .page-size {
-            flex: 0 1 120px;
+    @container pagination (max-width: 500px) {
+        .pagination {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            display: grid;
+            grid-template-areas: 'numbering size' 'pages pages';
         }
     }
 </style>

packages/visualizations/src/components/Pagination/types.ts

@@ -13,4 +13,11 @@ export type Pagination = {
     recordsPerPage: number;
     onPageChange: (next: number) => void;
     pageSizeSelect?: PageSizeSelect;
+    labels?: Partial<{
+        previousPage: string;
+        nextPage: string;
+        firstPage: string;
+        lastPage: string;
+        records: string;
+    }>;
 };

packages/visualizations/src/components/Table/Table.svelte

@@ -36,6 +36,7 @@
         overflow-x: auto;
         overscroll-behavior-x: none;
         margin-bottom: var(--spacing-100);
+        width: 100%;
     }
 
     :global(.ods-dataviz--default) table {