diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index f4b5bf4f..c5799e9c 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -40,7 +40,7 @@ jobs: run: make vue-storybook-build - name: Upload build to artifacts - uses: actions/upload-artifact@v3 + uses: actions/upload-artifact@v4 with: name: storybook path: apps/vue-storybook/storybook_compiled diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss index 1d3ea01d..68a4e6be 100644 --- a/packages/common/src/scss/components/_BlockText.scss +++ b/packages/common/src/scss/components/_BlockText.scss @@ -103,6 +103,48 @@ } } } + .richtext-image { + &.full-width { + @apply mb-10 lg:mb-14; + @apply w-full h-auto; + } + &.left, + &.right { + @apply mb-5 lg:mb-5 mx-5 lg:mx-8; + @apply inline max-w-full sm:max-w-[50%] h-auto; + } + &.left { + @apply sm:float-left ml-0; + @apply ml-0 lg:-ml-[5.3rem] xl:-ml-[6.8rem]; + // uncomment if floating images become unwieldy + // + p, + // + div { + // clear: right; + // } + } + &.right { + @apply sm:float-right mr-0; + @apply mr-0 lg:-mr-[5.3rem] xl:-mr-[6.8rem]; + // uncomment if floating images become unwieldy + // + p, + // + div { + // clear: left; + // } + } + &:last-child { + @apply mb-0; + } + } + > div { + @apply mb-10 lg:mb-14; + iframe { + @apply w-full h-auto aspect-video; + } + &:last-child { + @apply mb-0; + } + } + &.-small { p { @apply mb-2; diff --git a/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue index 1f4d2bcf..ff98d626 100644 --- a/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue +++ b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.vue @@ -31,7 +31,10 @@ export default defineComponent({ v-if="data" class="BaseImageCaption text-body-sm" > -
+
- Full Image Details + {{ customLinkText }} - {{ customLinkText }} + Full Image Details
diff --git a/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue index 2f2bd92e..392ed332 100644 --- a/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue +++ b/packages/vue/src/components/BlockImage/BlockImageFullBleed.vue @@ -1,6 +1,9 @@ +
@@ -171,6 +179,16 @@ const { data } = reactive(props) +
+ +
+