diff --git a/package-lock.json b/package-lock.json index f7fc68ab..af8bae51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25729,6 +25729,12 @@ "dev": true, "license": "MIT" }, + "node_modules/storybook-addon-rtl": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/storybook-addon-rtl/-/storybook-addon-rtl-1.0.0.tgz", + "integrity": "sha512-pGbNx0KhzqxDfjJQ/IOJYKOmLD0tVV0vjEtTcPmU5mgwzlWxLcbiEGn6q73yvSwV/KIzpH8zNNJVWYRrdWPNEQ==", + "dev": true + }, "node_modules/stream-browserify": { "version": "2.0.2", "dev": true, @@ -29277,6 +29283,7 @@ "rollup-plugin-terser": "^7.0.2", "size-limit": "^8.1.0", "storybook": "^7.6.17", + "storybook-addon-rtl": "^1.0.0", "tslib": "^2.1.0", "typescript": "4.6" }, diff --git a/packages/visualizations-react/.storybook/main.js b/packages/visualizations-react/.storybook/main.js index e5b1aa41..dfc998d8 100644 --- a/packages/visualizations-react/.storybook/main.js +++ b/packages/visualizations-react/.storybook/main.js @@ -6,7 +6,11 @@ function getAbsolutePath(value) { export default { stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'], - addons: [getAbsolutePath("@storybook/addon-links"), getAbsolutePath("@storybook/addon-essentials")], + addons: [ + getAbsolutePath("@storybook/addon-links"), + getAbsolutePath("@storybook/addon-essentials"), + "storybook-addon-rtl" + ], // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration typescript: { check: true, // type-check stories during Storybook build @@ -22,5 +26,3 @@ export default { } } }; - - diff --git a/packages/visualizations-react/package.json b/packages/visualizations-react/package.json index 3603a242..73bcfc5e 100644 --- a/packages/visualizations-react/package.json +++ b/packages/visualizations-react/package.json @@ -111,6 +111,7 @@ "rollup-plugin-terser": "^7.0.2", "size-limit": "^8.1.0", "storybook": "^7.6.17", + "storybook-addon-rtl": "^1.0.0", "tslib": "^2.1.0", "typescript": "4.6" }, diff --git a/packages/visualizations-react/stories/Table/Table.stories.tsx b/packages/visualizations-react/stories/Table/Table.stories.tsx index d848855d..a83d4e8e 100644 --- a/packages/visualizations-react/stories/Table/Table.stories.tsx +++ b/packages/visualizations-react/stories/Table/Table.stories.tsx @@ -27,37 +27,11 @@ const fetchingData: Async = { const Template: ComponentStory = args => ; -export const Playground = Template.bind({}); -Playground.args = { - data, - options, -}; - const CustomStyleTemplate: ComponentStory = args => (
); -export const CustomStyle = CustomStyleTemplate.bind({}); -CustomStyle.args = { - data, - 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 = args => (
@@ -65,6 +39,35 @@ const ScrollTemplate: ComponentStory = args => (
); +const optionsWithPagination = { + ...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: () => {}, + }, + }, +}; + +export const Playground = Template.bind({}); +Playground.args = { + data, + options, +}; + +export const CustomStyle = CustomStyleTemplate.bind({}); +CustomStyle.args = { + data, + options: optionsWithPagination, +}; + export const Scroll = ScrollTemplate.bind({}); Scroll.args = { data, @@ -94,3 +97,10 @@ emptyState.args = { data: { value: [], loading: false }, options: { ...options, emptyStateLabel: 'Neniuj registroj trovitaj...' }, }; + +export const RtlDirection = Template.bind({}); +RtlDirection.parameters = { direction: 'rtl' }; +RtlDirection.args = { + data, + options: optionsWithPagination, +}; diff --git a/packages/visualizations-react/stories/Table/custom-style.css b/packages/visualizations-react/stories/Table/custom-style.css index 17ff38b7..b875423a 100644 --- a/packages/visualizations-react/stories/Table/custom-style.css +++ b/packages/visualizations-react/stories/Table/custom-style.css @@ -1,6 +1,7 @@ .table-story--custom-style .table-wrapper { border-color: #fcd4cf; } + .table-story--custom-style thead { border-bottom-color: #f94346; border-bottom-width: 2px; @@ -8,6 +9,10 @@ color:#ffffff; } +.table-story--custom-style tbody { + background-color: whitesmoke; +} + .table-story--custom-style tbody tr { border-bottom-color: #fcd4cf; } @@ -15,6 +20,10 @@ background-color: #f9aea4; } +.table-story--custom-style .pagination { + background-color: seashell; +} + .table-story--custom-style .pagination .arrow-button, .table-story--custom-style .pagination .page-button { color: #f94346; diff --git a/packages/visualizations/src/components/Pagination/Button.svelte b/packages/visualizations/src/components/Pagination/Button.svelte index 187c3285..63d0dcfd 100644 --- a/packages/visualizations/src/components/Pagination/Button.svelte +++ b/packages/visualizations/src/components/Pagination/Button.svelte @@ -1,33 +1,29 @@ diff --git a/packages/visualizations/src/components/Pagination/DoubleRight.svelte b/packages/visualizations/src/components/Pagination/DoubleRight.svelte deleted file mode 100644 index f9dd432a..00000000 --- a/packages/visualizations/src/components/Pagination/DoubleRight.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - diff --git a/packages/visualizations/src/components/Pagination/PageSize.svelte b/packages/visualizations/src/components/Pagination/PageSize.svelte index d84cb8b3..a8b225f8 100644 --- a/packages/visualizations/src/components/Pagination/PageSize.svelte +++ b/packages/visualizations/src/components/Pagination/PageSize.svelte @@ -30,14 +30,18 @@ background-color: white; padding: var(--spacing-50); border: solid 1px var(--border-color); - border-radius: var(--border-radius-2); + border-radius: var(--border-radius-6); width: fit-content; /* remove all styles and re-add arrow to fix Safari appearance */ - background: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+') + background: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+') no-repeat 95% 50%; -moz-appearance: none; -webkit-appearance: none; appearance: none; - padding-right: var(--spacing-100); + padding-inline-end: var(--spacing-100); + } + + :global(html[dir='rtl'] .ods-dataviz--default) select { + background-position: 5%; } diff --git a/packages/visualizations/src/components/Pagination/Pages.svelte b/packages/visualizations/src/components/Pagination/Pages.svelte index 4c3890ed..fd7fb8a4 100644 --- a/packages/visualizations/src/components/Pagination/Pages.svelte +++ b/packages/visualizations/src/components/Pagination/Pages.svelte @@ -1,9 +1,5 @@ - - - - - - diff --git a/packages/visualizations/src/components/Pagination/SingleRight.svelte b/packages/visualizations/src/components/Pagination/SingleRight.svelte deleted file mode 100644 index 558d3562..00000000 --- a/packages/visualizations/src/components/Pagination/SingleRight.svelte +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - diff --git a/packages/visualizations/src/components/Table/Body.svelte b/packages/visualizations/src/components/Table/Body.svelte index 483d235a..5e22a8d3 100644 --- a/packages/visualizations/src/components/Table/Body.svelte +++ b/packages/visualizations/src/components/Table/Body.svelte @@ -4,12 +4,12 @@ export let loadingRowsNumber: number | null; export let columns: Column[]; - export let records: TableData; + export let records: TableData | undefined; export let emptyStateLabel = 'No records found...'; - {#if records.length === 0 && !loadingRowsNumber} + {#if records?.length === 0 && !loadingRowsNumber} {/each} - {:else} + {:else if records} {#each records as record} {#each columns as column} diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte index 8e03f545..f501ce3d 100644 --- a/packages/visualizations/src/components/Table/Cell/Cell.svelte +++ b/packages/visualizations/src/components/Table/Cell/Cell.svelte @@ -17,7 +17,6 @@ diff --git a/packages/visualizations/src/components/utils/Card.svelte b/packages/visualizations/src/components/utils/Card.svelte index 99f99b91..3fa28f71 100644 --- a/packages/visualizations/src/components/utils/Card.svelte +++ b/packages/visualizations/src/components/utils/Card.svelte @@ -40,11 +40,12 @@ .card { /* Common vars that should be accessible in all components */ - --border-radius-2: 6px; + --border-radius-6: 6px; --spacing-50: 6px; --spacing-75: 9px; --spacing-100: 13px; --border-color: #cbd2db; + --background-color: #fff; /* FIXME: Only using flex style to center source link */ display: flex; flex-wrap: wrap;
{emptyStateLabel} @@ -24,7 +24,7 @@ {/each}