From 91e6fc2cca649134678209f9ab9425dd531239f5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 7 Jan 2023 18:28:31 +0000 Subject: [PATCH 1/9] build(deps): bump json5 from 1.0.1 to 1.0.2 Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2. - [Release notes](https://github.com/json5/json5/releases) - [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md) - [Commits](https://github.com/json5/json5/compare/v1.0.1...v1.0.2) --- updated-dependencies: - dependency-name: json5 dependency-type: indirect ... Signed-off-by: dependabot[bot] --- package-lock.json | 104 ++++++++++++++++++++++------------------------ 1 file changed, 49 insertions(+), 55 deletions(-) diff --git a/package-lock.json b/package-lock.json index 367b5eac..72d5a088 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4097,9 +4097,9 @@ } }, "node_modules/@storybook/addon-postcss/node_modules/json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "dependencies": { "minimist": "^1.2.0" @@ -4750,9 +4750,9 @@ "dev": true }, "node_modules/@storybook/builder-webpack4/node_modules/json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "dependencies": { "minimist": "^1.2.0" @@ -6272,9 +6272,9 @@ } }, "node_modules/@storybook/core-common/node_modules/loader-utils/node_modules/json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "dependencies": { "minimist": "^1.2.0" @@ -6965,9 +6965,9 @@ "dev": true }, "node_modules/@storybook/core-server/node_modules/json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "dependencies": { "minimist": "^1.2.0" @@ -7759,9 +7759,9 @@ "dev": true }, "node_modules/@storybook/manager-webpack4/node_modules/json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "dependencies": { "minimist": "^1.2.0" @@ -10297,9 +10297,9 @@ } }, "node_modules/babel-loader/node_modules/json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "dependencies": { "minimist": "^1.2.0" @@ -15917,9 +15917,9 @@ } }, "node_modules/html-webpack-plugin/node_modules/json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "dependencies": { "minimist": "^1.2.0" @@ -17145,13 +17145,10 @@ "dev": true }, "node_modules/json5": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", - "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true, - "dependencies": { - "minimist": "^1.2.5" - }, "bin": { "json5": "lib/cli.js" }, @@ -30757,9 +30754,9 @@ } }, "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "requires": { "minimist": "^1.2.0" @@ -31278,9 +31275,9 @@ "dev": true }, "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "requires": { "minimist": "^1.2.0" @@ -32433,9 +32430,9 @@ }, "dependencies": { "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "requires": { "minimist": "^1.2.0" @@ -33014,9 +33011,9 @@ "dev": true }, "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "requires": { "minimist": "^1.2.0" @@ -33673,9 +33670,9 @@ "dev": true }, "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "requires": { "minimist": "^1.2.0" @@ -35685,9 +35682,9 @@ } }, "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "requires": { "minimist": "^1.2.0" @@ -40096,9 +40093,9 @@ }, "dependencies": { "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", "dev": true, "requires": { "minimist": "^1.2.0" @@ -40979,13 +40976,10 @@ "dev": true }, "json5": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", - "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, - "requires": { - "minimist": "^1.2.5" - } + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true }, "jsonfile": { "version": "6.1.0", From 9c9091732ef63322d918570e05564a7d62ad346b Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Tue, 31 Jan 2023 08:44:42 +0930 Subject: [PATCH 2/9] docs(README): update README --- README.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 7d3b5d91..969dc4fb 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,9 @@ Reusable Svelte components for some internal applications ## installation -To install to your Svelte project, open your project's root directory in a terminal. Type or paste `npm i -D sass@1.55.x material-components-web@14.0.0 @silintl/ui-components` and press enter (versions will vary if you use an older release of this repo). Sass and-material-components web are required to develop additional material web components in your app, but it may depend on your version of npm if they are necessary even if you don't. You should already have svelte@3 installed if you are using this library. +To install to your Svelte project, open your project's root directory in a terminal. Type or paste `npm i -D @silintl/ui-components` and press enter. Sass and-material-components web are required to develop additional material web components in your app, but it may depend on your version of npm if they are necessary even if you don't (I haven't figured out which versions require them). Paste in `npm i -D sass@1.55.x material-components-web@14.0.0` and hit enter (versions will vary if you use an older release of this repo). You should already have svelte@3 installed if you are using this library. -If you are using typescript you will need to run `npm i -D tslib` to avoid a material-components-web type error. +If you are using typescript you will need to run `npm i -D tslib` to avoid a material-components-web type error. This will already be installed if you have set up SvelteKit with typescript using `npm create svelte@latest app-name`. You will also want to follow the example below for your index.html (app.html for sveltekit templates) for Material Icons to work and for Google fonts to load. see https://github.com/material-components/material-web#2-write-html-and-javascript @@ -38,10 +38,10 @@ See https://google.github.io/material-design-icons/#sizing for sizing material i ## theming -If you are using an [MDC theme](https://material.io/develop/web/docs/theming) you may want to include a \_typography.scss file and import it into +If you are using an [MDC theme](https://material.io/develop/web/docs/theming) you may want to include a \_theme.scss file and import it into \_index.scss. -Import \_index.scss or other file(s) that contains stuff like --mdc-theme-primary --mdc-theme-secondary and other root variables to the App.svelte (Index.svelte in sveltekit templates) or Index.html (App.html for sveltekit) file (unless they are being declared there already) so they get applied to the ui-components. +Import \_index.scss or other file(s) that contains material styling variables like --mdc-theme-primary --mdc-theme-secondary and other root variables to the App.svelte (your base +page.svelte or +layout.svelte in sveltekit templates) or Index.html (app.html for sveltekit) file so they get applied to the ui-components. See https://github.com/silinternational/ui-components/blob/develop/stories/_theme.scss for exposed theme properties. @@ -63,11 +63,11 @@ and something similar to the following: } ``` -and then import it to your sass entry point like \_index.scss. You may prefer to declare your root typography rules elsewhere (eg. index.html) which is ok. +and then import it to your sass entry point like \_index.scss. You may prefer to declare your root typography rules elsewhere (eg. index.html) which is also valid. ## bundler configuration -Your Svelte project will need the bundler (rollup most likely) configured to compile Sass files. If you are using rollup your plugins in your "rollup.config.js" should look something like this taking special note of postcss and svelte: +SvelteKit won't need a bundler as it uses Vite, but Svelte projects will need a bundler (rollup or webpack most likely) configuration. If you are using rollup your plugins in your "rollup.config.js" should look something like this taking special note of postcss and svelte: ``` import postcss from 'rollup-plugin-postcss'; @@ -108,8 +108,8 @@ module.exports = { ## Sveltekit -Using this library in [Sveltekit](https://github.com/sveltejs/kit) is experimental (as of writing this Sveltekit is in release candidate phase). -You may get lots of source map source warnings as referenced [here](https://github.com/vitejs/vite/issues/2892) and it may take several seconds and/or refreshes for your app to start with `npm run dev`. Building and previewing your build should run smoothly. Below are a number of references that may be relevant to your experience: +Using this library in [Sveltekit](https://github.com/sveltejs/kit) is still experimental, but it seems to be working well. +Below are a number of issues that helped me get it working. https://kit.svelte.dev/faq#packages https://vitejs.dev/guide/dep-pre-bundling.html @@ -127,7 +127,8 @@ A list of all components and their props can be found in our running instance of After installation and bundler configuration all of the components are ready to be imported. -Just include `import { Button } from '@silintl/ui-components'` (Sveltekit/Vite will need to use the full url) in your script section to import Button and any other components you want to use. +Just include `import { Button } from '@silintl/ui-components'` (Sveltekit/Vite will need the full url: `import { Button } from '../../node_modules/@silintl/ui-components/index.mjs` +) in your script section to import Button and any other components you want to use. ## overriding default sass variables @@ -135,16 +136,15 @@ In your main sass file just use the following pattern to override any sass varia `@use './components/mdc/Button' with ( $radius: 16px );` -## examples +## examples and templates See our Storybook [Docs](https://silinternational.github.io/ui-components/?path=/docs/example-introduction--page) for examples. Just click on the component you want to learn more about. -Here is a demo app with more examples of how to use components. -https://github.com/hobbitronics/svelte-ui-components-app +An opinionated Svelte template using rollup https://github.com/silinternational/the-way-svelte +A template using Vite https://github.com/hobbitronics/mikes-svelte-template +A template using SvelteKit https://github.com/hobbitronics/sveltekit-ui-components -It was buit from https://github.com/sveltejs/template - -If you are building a single page app with routify then it is recommended to use this template https://github.com/roxiness/routify-starter +If you dont' want to use Sveltekit or the templates above and are building a single page app with routify then it is recommended to use this template https://github.com/roxiness/routify-starter (this library not pre-installed) An example of using Button and Card: From 8ad210d979b2b78859f63746fa32829c232bd114 Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Tue, 31 Jan 2023 08:46:53 +0930 Subject: [PATCH 3/9] docs(README): update README --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 969dc4fb..81e1445a 100644 --- a/README.md +++ b/README.md @@ -112,11 +112,17 @@ Using this library in [Sveltekit](https://github.com/sveltejs/kit) is still expe Below are a number of issues that helped me get it working. https://kit.svelte.dev/faq#packages + https://vitejs.dev/guide/dep-pre-bundling.html + https://vitejs.dev/guide/features.html#npm-dependency-resolving-and-pre-bundling + https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies + https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#prebundlesveltelibraries + https://github.com/vitejs/vite/issues/2892 + https://github.com/sveltejs/kit/issues/885 ## components @@ -141,7 +147,9 @@ In your main sass file just use the following pattern to override any sass varia See our Storybook [Docs](https://silinternational.github.io/ui-components/?path=/docs/example-introduction--page) for examples. Just click on the component you want to learn more about. An opinionated Svelte template using rollup https://github.com/silinternational/the-way-svelte + A template using Vite https://github.com/hobbitronics/mikes-svelte-template + A template using SvelteKit https://github.com/hobbitronics/sveltekit-ui-components If you dont' want to use Sveltekit or the templates above and are building a single page app with routify then it is recommended to use this template https://github.com/roxiness/routify-starter (this library not pre-installed) From c94687682f8ffa80cd6925efb1a49a7c99148c6b Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Wed, 1 Feb 2023 13:58:47 +0930 Subject: [PATCH 4/9] docs(stories): improve Card story --- stories/Card.stories.svelte | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/stories/Card.stories.svelte b/stories/Card.stories.svelte index f93ae97b..30e38fff 100644 --- a/stories/Card.stories.svelte +++ b/stories/Card.stories.svelte @@ -3,20 +3,15 @@ import { Meta, Template, Story } from '@storybook/addon-svelte-csf' import { Button, Card } from '../components/mdc' import { copyAndModifyArgs } from './helpers.js' -let title = 'Card' - const args = { class: '', //will only work with global class - label: title, } @@ -29,7 +24,6 @@ const args = { - {title}

Add optional actions with slot="actions" in the element you will put the actionable content.

From d624871a1d5f47686ec074683b3201685b9ab36e Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Tue, 7 Feb 2023 09:49:21 +0930 Subject: [PATCH 5/9] docs(readme): update svelte-kit docs --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 81e1445a..35f41e73 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ See https://google.github.io/material-design-icons/#sizing for sizing material i If you are using an [MDC theme](https://material.io/develop/web/docs/theming) you may want to include a \_theme.scss file and import it into \_index.scss. -Import \_index.scss or other file(s) that contains material styling variables like --mdc-theme-primary --mdc-theme-secondary and other root variables to the App.svelte (your base +page.svelte or +layout.svelte in sveltekit templates) or Index.html (app.html for sveltekit) file so they get applied to the ui-components. +Import \_index.scss or other file(s) that contains material styling variables like --mdc-theme-primary --mdc-theme-secondary and other root variables to the App.svelte (your base +layout.svelte in sveltekit templates) file so they get applied to the ui-components. See https://github.com/silinternational/ui-components/blob/develop/stories/_theme.scss for exposed theme properties. @@ -133,7 +133,7 @@ A list of all components and their props can be found in our running instance of After installation and bundler configuration all of the components are ready to be imported. -Just include `import { Button } from '@silintl/ui-components'` (Sveltekit/Vite will need the full url: `import { Button } from '../../node_modules/@silintl/ui-components/index.mjs` +Just include `import { Button } from '@silintl/ui-components'` (~~Sveltekit/~~Vite only projects will need the full url: `import { Button } from '../../node_modules/@silintl/ui-components/index.mjs` ) in your script section to import Button and any other components you want to use. ## overriding default sass variables From e4b0b03fc6f2f9c9587008f826b5d6b3cdc0343f Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Wed, 8 Feb 2023 11:47:21 +0930 Subject: [PATCH 6/9] fix(Menu): fix ssr for Menu using window --- components/mdc/Menu/Menu.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/mdc/Menu/Menu.svelte b/components/mdc/Menu/Menu.svelte index 40958d84..1694c9c1 100644 --- a/components/mdc/Menu/Menu.svelte +++ b/components/mdc/Menu/Menu.svelte @@ -5,11 +5,13 @@ import { onMount } from 'svelte' export let menuItems = [] export let menuOpen = false +export let currentUrl = '' let menu = {} let element = {} -$: currentUrl = window.location.pathname +//don't use window for ssr +$: currentUrl = window?.location?.pathname || currentUrl $: menu.open = menuOpen onMount(() => { From 1e982ade89b81e8a5a8e89e7c880e9e6d7a0efd3 Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Wed, 8 Feb 2023 11:58:27 +0930 Subject: [PATCH 7/9] feat(Menu): remove window & add currentUrl to props --- components/mdc/Menu/Menu.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/mdc/Menu/Menu.svelte b/components/mdc/Menu/Menu.svelte index 1694c9c1..fb0c2b87 100644 --- a/components/mdc/Menu/Menu.svelte +++ b/components/mdc/Menu/Menu.svelte @@ -10,8 +10,6 @@ export let currentUrl = '' let menu = {} let element = {} -//don't use window for ssr -$: currentUrl = window?.location?.pathname || currentUrl $: menu.open = menuOpen onMount(() => { From 74efebb287d7bfe3d8d6c2f299442105aa9c3143 Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Wed, 8 Feb 2023 12:07:26 +0930 Subject: [PATCH 8/9] add currentUrl type --- index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/index.d.ts b/index.d.ts index 0db9758c..db4fa8c7 100644 --- a/index.d.ts +++ b/index.d.ts @@ -161,6 +161,7 @@ declare module '@silintl/ui-components' { interface MenuProps extends svelte.JSX.HTMLAttributes { menuItems?: MenuItem[] menuOpen?: boolean + currentUrl?: string } export class Menu extends SvelteComponentTyped {} From b0aca3233d4c0aa0bbfa1df1830da44ff6ef72d9 Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Wed, 8 Feb 2023 13:53:13 +0930 Subject: [PATCH 9/9] feat(Menu): remove focus of menuItem based on path. Add currentUrl story BREAKING CHANGE: remove checking of current path to focus menu item --- stories/Menu.stories.svelte | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/stories/Menu.stories.svelte b/stories/Menu.stories.svelte index 0de425eb..147f02c0 100644 --- a/stories/Menu.stories.svelte +++ b/stories/Menu.stories.svelte @@ -7,6 +7,7 @@ let content = 'Menu Button' const args = { class: 'dib relative opacity1', //for some reason the menu isn't behaving in storybook menuOpen: true, + currentUrl: '/?path=/story/atoms-menu--primary', menuItems: [ { subtitle: 'Alerts', @@ -15,16 +16,17 @@ const args = { icon: 'notifications', label: 'Alerts', action: () => alert('Hello!'), + url: '/?path=/story/atoms-menu--primary', }, { icon: 'settings', label: 'User settings', - url: '/household/settings', + url: '/', }, { icon: 'logout', label: 'Sign out', - url: '/logout', + url: '/', }, ], toggleMenu() {