From 3b29f028c7c3a48eca55cd2525bd6fd275e5aff8 Mon Sep 17 00:00:00 2001 From: Joe Whitsitt Date: Wed, 12 Oct 2022 15:35:23 -0500 Subject: [PATCH 01/66] restrict how far node 14 can go --- .nvmrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.nvmrc b/.nvmrc index 8351c19397..2f5ee741e0 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14 +14.15.1 From 590c7ad7d6999b721023a344756446ff1c2b3ad2 Mon Sep 17 00:00:00 2001 From: Joe Whitsitt Date: Wed, 12 Oct 2022 15:45:44 -0500 Subject: [PATCH 02/66] update readme with crucial setup step --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e12d0c26d..706560c61d 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,10 @@ The node-gyp package requires a C compiler. If you notice node-gyp errors after ### Install dependencies +```sh +npm install +``` + ```sh npm ci ``` @@ -69,7 +73,7 @@ npm run dist The following is an example of the workflow and not meant to be copied and pasted verbatim. Please review the summary at https://semver.org/ to understand which type of release you should be creating. The version numbers you will use when you are actually going through this process will depend on the current version number and what type of release you are creating. To see the full options for the command, run `npm version --help`. -1. `git checkout 3.x` - Make sure you are on the `3.x` branch. +1. `git checkout 4.x` - Make sure you are on the `4.x` branch. 2. `git pull` - Make sure you have the most recent updates. 4. `npm version patch -m "https://github.com/uiowa/uids/compare/v3.1.0...v3.1.1"` 5. `git push` From 00457891b7bcca5fc99ba31c416200a8ec950201 Mon Sep 17 00:00:00 2001 From: Joe Whitsitt Date: Wed, 12 Oct 2022 15:45:56 -0500 Subject: [PATCH 03/66] ignore the lock file --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 66a8be6751..5fbd257705 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,7 @@ dist-ssr coverage *.local storybook-static +package-lock.json /cypress/videos/ /cypress/screenshots/ From ba6731ce08e7b9acc5ec77ed32237508213a6e70 Mon Sep 17 00:00:00 2001 From: Joe Whitsitt Date: Wed, 12 Oct 2022 16:10:38 -0500 Subject: [PATCH 04/66] update with storybook info --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 706560c61d..63904b786d 100644 --- a/README.md +++ b/README.md @@ -25,12 +25,19 @@ npm install npm ci ``` -### Start the local server +### Start the local server OR start Storybook Compile and hot-reload for development. ```sh npm run dev ``` + +**OR** + +```sh +yarn storybook +``` + The command will output the server URL to visit in your browser, ex. http://localhost:3000. ### Type-Check, Compile and Minify for Production From 422adb94ddd334a23e504e918c01ca30f011ee1b Mon Sep 17 00:00:00 2001 From: Joe Whitsitt Date: Wed, 12 Oct 2022 16:10:52 -0500 Subject: [PATCH 05/66] media component barebones --- src/components/media/Media.stories.js | 38 +++++++++++++++++++++++++++ src/components/media/Media.vue | 30 +++++++++++++++++++++ src/components/media/index.ts | 1 + 3 files changed, 69 insertions(+) create mode 100644 src/components/media/Media.stories.js create mode 100644 src/components/media/Media.vue create mode 100644 src/components/media/index.ts diff --git a/src/components/media/Media.stories.js b/src/components/media/Media.stories.js new file mode 100644 index 0000000000..5f10e41a98 --- /dev/null +++ b/src/components/media/Media.stories.js @@ -0,0 +1,38 @@ +import UidsMedia from './Media.vue'; +import media_image from '../../assets/images/viewbook/sections/122.jpg' + +// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export +export default { + title: 'Basic/Media', + component: UidsMedia, + // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes + argTypes: { + // Slots + // media: { + // control: { type: 'text' }, + // }, + + // Props + link_text: { + control: { type: 'text' }, + }, + }, +}; + +// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args +const Template = (args) => ({ + // Components used in your story `template` are defined in the `components` object + components: { UidsMedia }, + // The story's `args` need to be mapped into the template through the `setup()` method + setup() { + return { args }; + }, + // And then the `args` are bound to your component with `v-bind="args"` + template: ` + + `, +}); + +export const Default = Template.bind({}); +// More on args: https://storybook.js.org/docs/vue/writing-stories/args +Default.args = { }; diff --git a/src/components/media/Media.vue b/src/components/media/Media.vue new file mode 100644 index 0000000000..32781c8aa7 --- /dev/null +++ b/src/components/media/Media.vue @@ -0,0 +1,30 @@ + + + diff --git a/src/components/media/index.ts b/src/components/media/index.ts new file mode 100644 index 0000000000..ca9774be5f --- /dev/null +++ b/src/components/media/index.ts @@ -0,0 +1 @@ +export { default } from './Media.vue' From df50dc4c3fb17d2d6ec2c4e00514c54a9840e9eb Mon Sep 17 00:00:00 2001 From: Joe Whitsitt Date: Wed, 12 Oct 2022 16:37:20 -0500 Subject: [PATCH 06/66] initial slot work --- src/components/media/Media.stories.js | 18 ++++++++++-------- src/components/media/Media.vue | 14 ++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/media/Media.stories.js b/src/components/media/Media.stories.js index 5f10e41a98..df09735ecc 100644 --- a/src/components/media/Media.stories.js +++ b/src/components/media/Media.stories.js @@ -8,14 +8,12 @@ export default { // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes argTypes: { // Slots - // media: { - // control: { type: 'text' }, - // }, - - // Props - link_text: { + media_markup: { control: { type: 'text' }, }, + + // Props + }, }; @@ -29,10 +27,14 @@ const Template = (args) => ({ }, // And then the `args` are bound to your component with `v-bind="args"` template: ` - + + + `, }); export const Default = Template.bind({}); // More on args: https://storybook.js.org/docs/vue/writing-stories/args -Default.args = { }; +Default.args = { + media_markup: '', +}; diff --git a/src/components/media/Media.vue b/src/components/media/Media.vue index 32781c8aa7..dae0835171 100644 --- a/src/components/media/Media.vue +++ b/src/components/media/Media.vue @@ -5,18 +5,13 @@ import { className } from "../utlity"; const name = 'uids-media' const props = defineProps({ - /** - * Text to display in a button. - */ - link_text: { - type: String, - }, + }) const slots = useSlots(); const classes = computed(() => { - let classes = ['media media--circle']; + let classes = ['media']; return classes; }); @@ -25,6 +20,9 @@ const classes = computed(() => { From 34b7af5eed05b9379b80f2c71907a6393d5231b6 Mon Sep 17 00:00:00 2001 From: Joe Whitsitt Date: Thu, 13 Oct 2022 10:47:40 -0500 Subject: [PATCH 07/66] pivot to use similar borderless setup for media --- src/components/card/Card.stories.js | 6 ++ src/components/card/Card.vue | 12 +++- src/components/media/Media.stories.js | 40 ----------- src/components/media/Media.vue | 28 -------- src/components/media/index.ts | 1 - src/components/shared/media.ts | 96 +++++++++++++++++++++++++++ 6 files changed, 113 insertions(+), 70 deletions(-) delete mode 100644 src/components/media/Media.stories.js delete mode 100644 src/components/media/Media.vue delete mode 100644 src/components/media/index.ts create mode 100644 src/components/shared/media.ts diff --git a/src/components/card/Card.stories.js b/src/components/card/Card.stories.js index 32c80bc2b5..63004b44bf 100644 --- a/src/components/card/Card.stories.js +++ b/src/components/card/Card.stories.js @@ -2,6 +2,7 @@ import UidsCard from './Card.vue'; import card_image from '../../assets/images/viewbook/sections/122.jpg' import Background from "../shared/background"; import Borderless from "../shared/borderless"; +import Media from "../shared/media"; // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export export default { @@ -31,6 +32,7 @@ export default { }, ...Background.argTypes, // Modifiers + ...Media.argTypes, ...Borderless.argTypes, centered: { control: { type: 'boolean' }, @@ -61,6 +63,10 @@ const Template = (args) => ({ :url="args.url" :link_text="args.link_text" :borderless="args.borderless" + :media_size="args.media_size" + :media_shape="args.media_shape" + :media_border="args.media_border" + :media_cover="args.media_cover" :background="args.background" :media_align="args.media_align" :media_padded="args.media_padded" diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue index 1e095c463f..e22b67a73a 100644 --- a/src/components/card/Card.vue +++ b/src/components/card/Card.vue @@ -8,6 +8,7 @@ import UidsButton from "../button/Button.vue"; import UidsPseudoButton from "../button/PseudoButton.vue"; import Background from "../shared/background"; import Borderless from "../shared/borderless"; +import Media from "../shared/media"; import { className } from "../utlity"; const name = 'uids-card' @@ -40,6 +41,7 @@ const props = defineProps({ ...Background.props, + ...Media.props, /** * Align media element to the left or right. @@ -86,6 +88,14 @@ const classes = computed(() => { return classes; }); +const mediaClasses = computed(() => { + let classes = ['media']; + + Media.addMediaClasses(classes, props); + + return classes; +}); + /** * Determine the linked element. */ @@ -117,7 +127,7 @@ const headlineLink = computed(() => {