From 3d8f225e2095b2e7bc54de28872f8296babdf90d Mon Sep 17 00:00:00 2001 From: Kevin Fabre Date: Tue, 13 Feb 2024 11:46:32 +0100 Subject: [PATCH 1/3] chore: add sass language for svelte style --- packages/visualizations/package-lock.json | 55 ++++++++++++++++++++--- packages/visualizations/package.json | 3 +- 2 files changed, 50 insertions(+), 8 deletions(-) diff --git a/packages/visualizations/package-lock.json b/packages/visualizations/package-lock.json index 5056d69f..09da2544 100644 --- a/packages/visualizations/package-lock.json +++ b/packages/visualizations/package-lock.json @@ -55,7 +55,7 @@ "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-svelte3": "^3.2.1", + "eslint-plugin-svelte3": "^3.4.1", "npm-run-all": "^4.1.5", "postcss": "^8.3.11", "prettier": "2.4.1", @@ -66,6 +66,7 @@ "rollup-plugin-svelte": "^6.1.0", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-visualizer": "^4.2.0", + "sass": "^1.70.0", "svelte": "^3.43.2", "svelte-check": "^2.2.7", "svelte-preprocess": "^4.9.8", @@ -3742,9 +3743,9 @@ } }, "node_modules/eslint-plugin-svelte3": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.2.1.tgz", - "integrity": "sha512-YoBR9mLoKCjGghJ/gvpnFZKaMEu/VRcuxpSRS8KuozuEo7CdBH7bmBHa6FmMm0i4kJnOyx+PVsaptz96K6H/4Q==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.4.1.tgz", + "integrity": "sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==", "dev": true, "engines": { "node": ">=10" @@ -4500,6 +4501,12 @@ "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz", "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==" }, + "node_modules/immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", + "dev": true + }, "node_modules/import-cwd": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz", @@ -6899,6 +6906,23 @@ "rimraf": "bin.js" } }, + "node_modules/sass": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.70.0.tgz", + "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", @@ -10773,9 +10797,9 @@ } }, "eslint-plugin-svelte3": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.2.1.tgz", - "integrity": "sha512-YoBR9mLoKCjGghJ/gvpnFZKaMEu/VRcuxpSRS8KuozuEo7CdBH7bmBHa6FmMm0i4kJnOyx+PVsaptz96K6H/4Q==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-3.4.1.tgz", + "integrity": "sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==", "dev": true, "requires": {} }, @@ -11216,6 +11240,12 @@ "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-3.1.1.tgz", "integrity": "sha512-Q0QaXjPjwIju/28TsugCHNEASwoCcJSyJV3uO1sOIQGI0jKgm9f41Lvz0DZj3n46cNCyAZTsEYoY4C2bVRUzyQ==" }, + "immutable": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz", + "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==", + "dev": true + }, "import-cwd": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz", @@ -12951,6 +12981,17 @@ } } }, + "sass": { + "version": "1.70.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.70.0.tgz", + "integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==", + "dev": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", diff --git a/packages/visualizations/package.json b/packages/visualizations/package.json index 9a4863fd..51613256 100644 --- a/packages/visualizations/package.json +++ b/packages/visualizations/package.json @@ -71,7 +71,7 @@ "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-svelte3": "^3.2.1", + "eslint-plugin-svelte3": "^3.4.1", "npm-run-all": "^4.1.5", "postcss": "^8.3.11", "prettier": "2.4.1", @@ -82,6 +82,7 @@ "rollup-plugin-svelte": "^6.1.0", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-visualizer": "^4.2.0", + "sass": "^1.70.0", "svelte": "^3.43.2", "svelte-check": "^2.2.7", "svelte-preprocess": "^4.9.8", From 029dd127c605ccca7a1b8f44eba3e8a59820ccfb Mon Sep 17 00:00:00 2001 From: Kevin Fabre Date: Tue, 13 Feb 2024 11:53:10 +0100 Subject: [PATCH 2/3] style(Table): add a unstyled prop Default is false; Is set to true: Remove any presentation style that is applied to the table --- .../stories/Table/Table.stories.tsx | 6 ++ .../src/components/Table/Body.svelte | 13 +++ .../src/components/Table/Cell.svelte | 10 ++ .../src/components/Table/Header.svelte | 15 +++ .../src/components/Table/Table.svelte | 95 ++++++++----------- .../src/components/Table/types.ts | 5 + 6 files changed, 91 insertions(+), 53 deletions(-) diff --git a/packages/visualizations-react/stories/Table/Table.stories.tsx b/packages/visualizations-react/stories/Table/Table.stories.tsx index 8c4e82c0..19979409 100644 --- a/packages/visualizations-react/stories/Table/Table.stories.tsx +++ b/packages/visualizations-react/stories/Table/Table.stories.tsx @@ -92,3 +92,9 @@ CustomStyle.args = { data, options, }; + +export const Unstyled = Template.bind({}); +Unstyled.args = { + data, + options: { ...options, unstyled: true }, +}; diff --git a/packages/visualizations/src/components/Table/Body.svelte b/packages/visualizations/src/components/Table/Body.svelte index f059eb98..859d3489 100644 --- a/packages/visualizations/src/components/Table/Body.svelte +++ b/packages/visualizations/src/components/Table/Body.svelte @@ -19,3 +19,16 @@ {/each} + + diff --git a/packages/visualizations/src/components/Table/Cell.svelte b/packages/visualizations/src/components/Table/Cell.svelte index 5ba1ab4e..1a9a3ce3 100644 --- a/packages/visualizations/src/components/Table/Cell.svelte +++ b/packages/visualizations/src/components/Table/Cell.svelte @@ -3,3 +3,13 @@ {value} + + diff --git a/packages/visualizations/src/components/Table/Header.svelte b/packages/visualizations/src/components/Table/Header.svelte index 50d4a2bf..c7088191 100644 --- a/packages/visualizations/src/components/Table/Header.svelte +++ b/packages/visualizations/src/components/Table/Header.svelte @@ -13,3 +13,18 @@ {/each} + + diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte index b555c9f2..dd63d270 100644 --- a/packages/visualizations/src/components/Table/Table.svelte +++ b/packages/visualizations/src/components/Table/Table.svelte @@ -14,18 +14,23 @@ const tableId = `table-${generateId()}`; $: ({ value: records } = data); - $: ({ columns, title, subtitle, description, source } = options); + // FIXME: Eslint is in conflict with prettier + // eslint-disable-next-line object-curly-newline + $: ({ columns, title, subtitle, description, source, unstyled } = options); + $: defaultStyle = !unstyled; -
-
- {#if title} -

{title}

- {/if} - {#if subtitle} -

{subtitle}

- {/if} -
+
+ {#if title || subtitle} +
+ {#if title} +

{title}

+ {/if} + {#if subtitle} +

{subtitle}

+ {/if} +
+ {/if}
@@ -42,8 +47,8 @@ {/if} - diff --git a/packages/visualizations/src/components/Table/types.ts b/packages/visualizations/src/components/Table/types.ts index 5eb2b00e..85ac5d31 100644 --- a/packages/visualizations/src/components/Table/types.ts +++ b/packages/visualizations/src/components/Table/types.ts @@ -13,4 +13,9 @@ export type TableOptions = { subtitle?: string; description?: string; source?: Source; + /** + * Removes all the presentational styles. + * Default is `false`. + */ + unstyled?: boolean; }; From 4d9ce8104d3d0a2b44c536faf4a94a8e0f2970c3 Mon Sep 17 00:00:00 2001 From: Kevin Fabre Date: Thu, 22 Feb 2024 16:01:49 +0100 Subject: [PATCH 3/3] chore(Table): update table style Use a lot the :global style element to not scope style. HTML don't have a scoped classname, so it's easier to override the default style. --- .../visualizations-react/.storybook/theme.css | 21 ++++++++++++++++++- .../stories/Table/Table.stories.tsx | 13 +----------- .../src/components/Table/Body.svelte | 14 +++++-------- .../src/components/Table/Cell.svelte | 2 +- .../src/components/Table/Header.svelte | 8 +++---- .../src/components/Table/Table.svelte | 12 +++-------- 6 files changed, 33 insertions(+), 37 deletions(-) diff --git a/packages/visualizations-react/.storybook/theme.css b/packages/visualizations-react/.storybook/theme.css index ac7d04af..3bf8909a 100644 --- a/packages/visualizations-react/.storybook/theme.css +++ b/packages/visualizations-react/.storybook/theme.css @@ -16,4 +16,23 @@ h3 { a:link, a:visited, a:active { color: #774936; -} \ No newline at end of file +} + +/* Style for the Custom style Table story */ +.table-story--custom-style .table-wrapper { + border-color: #fcd4cf; +} +.table-story--custom-style thead { + border-bottom-color: #f94346; + border-bottom-width: 2px; + background-color: #fd635d; + color:#ffffff; +} + +.table-story--custom-style tbody tr { + border-bottom-color: #fcd4cf; +} +.table-story--custom-style tbody tr:hover { + background-color: #f9aea4; +} + diff --git a/packages/visualizations-react/stories/Table/Table.stories.tsx b/packages/visualizations-react/stories/Table/Table.stories.tsx index 19979409..c728dd8e 100644 --- a/packages/visualizations-react/stories/Table/Table.stories.tsx +++ b/packages/visualizations-react/stories/Table/Table.stories.tsx @@ -72,18 +72,7 @@ Playground.args = { }; const CustomStyleTemplate: ComponentStory = (args) => ( -
+
); diff --git a/packages/visualizations/src/components/Table/Body.svelte b/packages/visualizations/src/components/Table/Body.svelte index 859d3489..8e657b8f 100644 --- a/packages/visualizations/src/components/Table/Body.svelte +++ b/packages/visualizations/src/components/Table/Body.svelte @@ -21,14 +21,10 @@ diff --git a/packages/visualizations/src/components/Table/Cell.svelte b/packages/visualizations/src/components/Table/Cell.svelte index 1a9a3ce3..b14f7462 100644 --- a/packages/visualizations/src/components/Table/Cell.svelte +++ b/packages/visualizations/src/components/Table/Cell.svelte @@ -6,7 +6,7 @@ diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte index dd63d270..65b6a15e 100644 --- a/packages/visualizations/src/components/Table/Table.svelte +++ b/packages/visualizations/src/components/Table/Table.svelte @@ -53,12 +53,7 @@ --spacing-75: 9px; --spacing-100: 13px; - --text-color: var(--ods-sdk-table-text-color, #565656); - --border-color: var(--ods-sdk-table-border-color, #cbd2db); - --header-text-color: var(--ods-sdk-table-header-text-color, #3c3c3c); - --header-background-color: var(--ods-sdk-table-header-background-color, #f2f3f8); - --header-border-bottom-color: var(--ods-sdk-table-header-border-bottom-color, #dee5ef); - --active-row-background-color: var(--ods-sdk-table-active-row-background-color, #f6f8fb); + --border-color: #cbd2db; /* FIXME: Only using flex style to center source link */ display: flex; @@ -71,7 +66,7 @@ display: none; } - .ods-dataviz-sdk-table--default { + :global(.ods-dataviz-sdk-table--default) { .dataviz-header { margin-bottom: var(--spacing-100); h3, @@ -79,7 +74,7 @@ margin: 0; } } - .table-wrapper { + :global(.table-wrapper) { border: solid 1px var(--border-color); border-radius: var(--spacing-50); overflow-x: auto; @@ -89,7 +84,6 @@ margin-bottom: var(--spacing-100); table { border-collapse: collapse; - color: var(--text-color); white-space: nowrap; width: inherit; }