@windward/core 0.3.0 → 0.4.1

package/components/Content/Blocks/Accordion.vue

@@ -38,6 +38,27 @@
                             "
                         ></TextEditor>
                     </v-container>
+                    <v-container>
+                        <v-img
+                            v-if="block.metadata.config.items[itemIndex].file"
+                            :aria-describedby="
+                                block.metadata.config.items[itemIndex]
+                                    .ariaDescribedBy
+                            "
+                            :alt="
+                                getImageAlt(
+                                    block.metadata.config.items[itemIndex].file,
+                                    block.metadata.config.items[itemIndex]
+                                        .altText
+                                )
+                            "
+                            :src="
+                                getImagePublicUrl(
+                                    block.metadata.config.items[itemIndex].file
+                                )
+                            "
+                        ></v-img>
+                    </v-container>
                 </v-expansion-panel-content>
             </v-expansion-panel>
         </v-expansion-panels>
@@ -73,6 +94,9 @@ export default {
                 header: '',
                 expand: false,
                 content: '',
+                file: null,
+                altText: '',
+                ariaDescribedBy: '',
             }
             this.block.metadata.config.items = []
             this.block.metadata.config.items.push(defaultObject)
@@ -129,6 +153,19 @@ export default {
         },
     },
     methods: {
+        getImagePublicUrl(asset) {
+            const foundAsset = this.resolveAsset(asset)
+
+            return _.get(foundAsset, 'asset.public_url', null)
+        },
+        getImageAlt(asset, defaultText = '') {
+            // If a default / override was defined
+            if (defaultText) {
+                return defaultText
+            }
+            const foundAsset = this.resolveAsset(asset)
+            return _.get(foundAsset, 'asset.metadata.props.alt', null)
+        },
         async onBeforeSave() {
             this.block.metadata.config.items.forEach((element) => {
                 element.expand = false

package/components/Content/Blocks/BlockQuote.vue

@@ -7,9 +7,9 @@
             "
         >
             <v-col cols="12" class="pb-0">
-                <h3 v-if="block.metadata.config.title">
+                <h2 v-if="block.metadata.config.title">
                     {{ block.metadata.config.title }}
-                </h3>
+                </h2>
                 <p v-if="block.metadata.config.instructions" class="pb-0 mb-0">
                     {{ block.metadata.config.instructions }}
                 </p>

package/components/Content/Blocks/ClickableIcons.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-container>
-            <h3>{{ block.metadata.config.title }}</h3>
+            <h2>{{ block.metadata.config.title }}</h2>
 
             <h4>{{ block.metadata.config.description }}</h4>
 
@@ -20,23 +20,34 @@
                 no-gutters
                 :class="rowClass(itemIndex)"
             >
-                <v-col cols="12" xl="2" lg="3" md="3" sm="3">
-                    <v-btn
-                        class="button-icon pa-1 mb-4"
-                        :color="itemColor(itemIndex)"
-                        :fab="block.metadata.config.display.round_icon"
-                        outlined
+                <v-col cols="12" v-bind="iconColumnAttrs" class="pa-4">
+                    <button
+                        :class="activatorButtonClass(itemIndex)"
                         @click="item.active = !item.active"
                     >
-                        <v-icon v-if="isIcon(item.icon)" class="black--text">{{
-                            item.icon
-                        }}</v-icon>
+                        <v-avatar
+                            v-if="item.iconImage && item.icon"
+                            class="clickable--image"
+                            :rounded="
+                                block.metadata.config.display.round_icon
+                                    ? '100%'
+                                    : '0'
+                            "
+                            size="100%"
+                        >
+                            <v-img :src="getImagePublicUrl(item.iconAsset)" />
+                        </v-avatar>
+                        <v-icon
+                            v-else-if="isIcon(item.icon)"
+                            class="clickable--icon black--text"
+                            >{{ item.icon }}</v-icon
+                        >
                         <span v-else :class="iconClass + ' black--text'">{{
                             decode(item.icon)
                         }}</span>
-                    </v-btn>
+                    </button>
                 </v-col>
-                <v-col cols="12" xl="10" lg="9" md="9" sm="9">
+                <v-col cols="12" v-bind="bodyColumnAttrs">
                     <h4
                         v-if="
                             block.metadata.config.display.show_title ||
@@ -62,6 +73,7 @@
 <script>
 import _ from 'lodash'
 import he from 'he'
+import Uuid from '~/helpers/Uuid'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import TextViewer from '~/components/Text/TextViewer'
 
@@ -111,7 +123,7 @@ export default {
         },
         rowClass() {
             return (itemIndex) => {
-                let classes = 'option-container mb-4 pa-1'
+                let classes = 'option-container pa-1'
                 // If show background is enabled and the item has a color
                 // Otherwise we do NOT want to apply the `black--text` class since there's no color
                 // And things will look bad in dark mode
@@ -128,8 +140,42 @@ export default {
                 return classes
             }
         },
+        iconColumnAttrs() {
+            if (this.block.metadata.config.display.large_icon) {
+                return {
+                    xl: '3',
+                    lg: '4',
+                    md: '4',
+                    sm: '4',
+                }
+            } else {
+                return {
+                    xl: '2',
+                    lg: '3',
+                    md: '3',
+                    sm: '3',
+                }
+            }
+        },
+        bodyColumnAttrs() {
+            if (this.block.metadata.config.display.large_icon) {
+                return {
+                    xl: '9',
+                    lg: '8',
+                    md: '8',
+                    sm: '8',
+                }
+            } else {
+                return {
+                    xl: '10',
+                    lg: '9',
+                    md: '9',
+                    sm: '9',
+                }
+            }
+        },
         iconClass() {
-            let classes = 'text-icon'
+            let classes = 'clickable--text'
             if (
                 _.get(this.block, 'metadata.config.display.italic_icon', false)
             ) {
@@ -137,6 +183,22 @@ export default {
             }
             return classes
         },
+        activatorButtonClass() {
+            return (itemIndex) => {
+                let classes =
+                    'button-icon button-icon--outline pa-1 ' +
+                    this.itemColor(itemIndex)
+                if (this.block.metadata.config.display.large_icon) {
+                    classes += ' button-icon--large'
+                } else {
+                    classes += ' button-icon--normal'
+                }
+                if (this.block.metadata.config.display.round_icon) {
+                    classes += ' button-icon--rounded'
+                }
+                return classes
+            }
+        },
         itemColor() {
             return (itemIndex) => {
                 // If autocolor is enabled then calculate the color on the index
@@ -179,20 +241,45 @@ export default {
         isIcon(str) {
             return str && _.isString(str) && str.indexOf('mdi-') === 0
         },
+        getImagePublicUrl(asset) {
+            const foundAsset = this.resolveAsset(asset)
+
+            return _.get(foundAsset, 'asset.public_url', null)
+        },
     },
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .option-container {
     border-radius: 1rem;
 }
-.button-icon {
+button.button-icon {
+    border-width: 4px;
+    width: 100% !important;
+    height: auto !important;
+    aspect-ratio: 1 / 1;
+}
+
+button.button-icon.button-icon--outline {
+    background-color: #fff !important;
     border-width: 4px;
-    background: #fff;
-    height: 74px !important;
-    width: 74px;
+    border-style: solid;
+}
+
+button.button-icon.button-icon--rounded {
+    border-radius: 100%;
+}
+
+.button-icon--normal {
+    .clickable--icon,
+    .clickable--text {
+        font-size: 1.5rem;
+    }
 }
-.text-icon {
-    font-size: 1.5rem;
+.button-icon--large {
+    .clickable--icon,
+    .clickable--text {
+        font-size: 2.5rem;
+    }
 }
 </style>

package/components/Content/Blocks/Email.vue

@@ -7,9 +7,9 @@
             "
         >
             <v-col cols="12" class="pa-0">
-                <h3 v-if="block.metadata.config.title">
+                <h2 v-if="block.metadata.config.title">
                     {{ block.metadata.config.title }}
-                </h3>
+                </h2>
                 <p v-if="block.metadata.config.instructions" class="pb-0 mb-0">
                     {{ block.metadata.config.instructions }}
                 </p>
@@ -170,7 +170,7 @@
                         >
                             <v-row class="pt-4">
                                 <v-col cols="10" class="pa-0">
-                                    <v-btn color="primary" text>
+                                    <v-btn elevation="0" color="primary" text>
                                         <v-icon>mdi-reply</v-icon>
                                         {{
                                             $t(
@@ -178,7 +178,7 @@
                                             )
                                         }}</v-btn
                                     >
-                                    <v-btn color="primary" text>
+                                    <v-btn elevation="0" color="primary" text>
                                         <v-icon>mdi-reply-all</v-icon>
                                         {{
                                             $t(
@@ -186,7 +186,7 @@
                                             )
                                         }}</v-btn
                                     >
-                                    <v-btn color="primary" text>
+                                    <v-btn elevation="0" color="primary" text>
                                         <v-icon>mdi-share</v-icon>
                                         {{
                                             $t(
@@ -196,7 +196,11 @@
                                     >
                                 </v-col>
                                 <v-col cols="2" class="pa-0 d-flex justify-end">
-                                    <v-btn color="primary" outlined>
+                                    <v-btn
+                                        elevation="0"
+                                        color="primary"
+                                        outlined
+                                    >
                                         {{
                                             $t(
                                                 'windward.core.components.content.blocks.email.reset'
@@ -294,6 +298,15 @@ export default {
         onRemoveTags(body) {
             return body.replace(/(<([^>]+)>)/gi, '')
         },
+        async onBeforeSave() {
+            this.block.metadata.config.emails.forEach((element) => {
+                if (element.from) {
+                    let matches = element.from.match(/\b(\w)/g)
+                    element.initials = matches.join('')
+                }
+                element.tinymce_expand = false
+            })
+        },
     },
 }
 </script>

package/components/Content/Blocks/Feedback.vue

@@ -2,7 +2,7 @@
     <v-container>
         <v-container v-if="!doesFeedbackExist">
             <v-row>
-                <h3>
+                <h2>
                     {{
                         block.metadata.config.definition.name
                             ? block.metadata.config.definition.name
@@ -10,7 +10,7 @@
                                   'windward.core.components.content.blocks.feedback.feedback'
                               )
                     }}
-                </h3>
+                </h2>
             </v-row>
             <v-row class="pt-2">
                 <p>
@@ -92,15 +92,22 @@
             <v-btn
                 color="primary"
                 outlined
+                elevation="0"
                 class="text-center mt-4 mr-2"
                 @click="onReset()"
                 >{{
                     $t('windward.core.components.content.blocks.feedback.reset')
                 }}</v-btn
             >
-            <v-btn color="success" class="text-center mt-4" @click="validate">{{
-                $t('windward.core.components.content.blocks.feedback.save')
-            }}</v-btn>
+            <v-btn
+                elevation="0"
+                color="success"
+                class="text-center mt-4"
+                @click="validate"
+                >{{
+                    $t('windward.core.components.content.blocks.feedback.save')
+                }}</v-btn
+            >
         </v-row>
         <v-form
             ref="form"

package/components/Content/Blocks/Image.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-container class="pa-0 ma-0">
-            <div v-if="!block.body" class="img-holder">
+            <div v-if="!imageUrl" class="img-holder">
                 <v-skeleton-loader
                     height="300px"
                     :elevation="2"
@@ -19,11 +19,11 @@
             </div>
             <v-responsive :aspect-ratio="aspectRatio">
                 <v-img
-                    v-if="block.body"
-                    :alt="block.metadata.config.alt"
-                    :aria-describedby="block.metadata.config.aria_described_by"
+                    v-if="imageUrl"
+                    :alt="altText"
+                    :aria-describedby="describedByText"
                     :class="imageClass"
-                    :src="block.body"
+                    :src="imageUrl"
                     contain
                     @click="onHandleModal"
                 >
@@ -52,13 +52,11 @@
                     v-on="on"
                 >
                     <v-img
-                        v-if="block.body"
-                        :alt="block.metadata.config.alt"
-                        :aria-describedby="
-                            block.metadata.config.aria_described_by
-                        "
+                        v-if="imageUrl"
+                        :alt="altText"
+                        :aria-describedby="describedByText"
                         :class="imageClass"
-                        :src="block.body"
+                        :src="imageUrl"
                         contain
                         @click="onHandleModal"
                     >
@@ -104,27 +102,57 @@ export default {
         if (_.isEmpty(this.block.metadata.config.alt)) {
             this.block.metadata.config.alt = ''
         }
-        if (!_.isBoolean(this.block.metadata.config.hide_background)) {
-            this.block.metadata.config.hide_background = false
+        if (!_.isBoolean(this.block.metadata.config.hideBackground)) {
+            this.block.metadata.config.hideBackground = false
         }
         if (!_.isBoolean(this.block.metadata.config.modal)) {
             this.block.metadata.config.modal = false
         }
-        if (_.isEmpty(this.block.metadata.config.aria_describedby)) {
-            this.block.metadata.config.aria_describedby = ''
+        if (_.isEmpty(this.block.metadata.config.ariaDescribedBy)) {
+            this.block.metadata.config.ariaDescribedBy = ''
         }
     },
     computed: {
         describedById() {
             // If there's a described by
-            if (_.get(this.block.metadata, 'config.aria_describedby', null)) {
+            if (this.describedByText) {
                 return this.id
             } else {
                 return null
             }
         },
+        altText() {
+            // Get the asset info first and fallback to the block metadata if inherit is set to false
+            if (_.get(this.block.metadata, 'config.inherit', true)) {
+                return _.get(this.fileAsset, 'metadata.props.alt', null)
+            } else {
+                return _.get(this.block.metadata, 'config.alt', null)
+            }
+        },
         describedByText() {
-            return _.get(this.block.metadata, 'config.aria_describedby', null)
+            // Get the asset info first and fallback to the block metadata if inherit is set to false
+            if (_.get(this.block.metadata, 'config.inherit', true)) {
+                return _.get(
+                    this.fileAsset,
+                    'metadata.props.aria_describedby',
+                    null
+                )
+            } else {
+                return _.get(
+                    this.block.metadata,
+                    'config.ariaDescribedBy',
+                    null
+                )
+            }
+        },
+        fileAsset() {
+            return this.resolveAsset(
+                _.get(this.block, 'metadata.config.asset', null)
+            )
+        },
+        imageUrl() {
+            // Get the image public url and fallback to the block body
+            return _.get(this.fileAsset, 'asset.public_url', this.block.body)
         },
         imageClass() {
             let imageClass = ''
@@ -133,7 +161,7 @@ export default {
                 imageClass += ' container-pointer'
             }
             // If NOT hide background, inclide the extra class
-            if (!_.get(this.block.metadata, 'config.hide_background', false)) {
+            if (!_.get(this.block.metadata, 'config.hideBackground', false)) {
                 imageClass += ' img-white'
             }
             return 'img-display' + imageClass
@@ -164,7 +192,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .img-display {
     border-radius: 3px;
 }

package/components/Content/Blocks/OpenResponse.vue

@@ -11,6 +11,7 @@
                 <p class="pa-3 text-center blue-grey lighten-5">
                     <v-btn
                         color="primary"
+                        elevation="0"
                         :disabled="!canSubmit"
                         @click="onSubmit"
                     >
@@ -47,9 +48,12 @@
                     </v-alert>
                 </div>
                 <p class="pa-3 text-center blue-grey lighten-5">
-                    <v-btn color="primary" @click="submitted = false">{{
-                        $t('shared.forms.edit')
-                    }}</v-btn>
+                    <v-btn
+                        elevation="0"
+                        color="primary"
+                        @click="submitted = false"
+                        >{{ $t('shared.forms.edit') }}</v-btn
+                    >
                 </p>
             </div>
 

package/components/Content/Blocks/OpenResponseCollate.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div v-if="block.metadata.config.linked.length">
-            <v-btn color="primary" outlined block @click="onCollate">
+            <v-btn elevation="0" color="primary" outlined block @click="onCollate">
                 <v-icon class="mr-3">mdi-file-word</v-icon>
                 {{
                     $t(

package/components/Content/Blocks/ScenarioChoice.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-container>
-            <h3>{{ block.metadata.config.title }}</h3>
+            <h2>{{ block.metadata.config.title }}</h2>
             <h4>{{ block.metadata.config.description }}</h4>
             <p>
                 {{
@@ -14,7 +14,7 @@
                 v-if="choiceIndex !== null && block.metadata.config.show_reset"
                 class="text-right"
             >
-                <v-btn color="primary" outlined @click="onClickReset">
+                <v-btn elevation="0" color="primary" outlined @click="onClickReset">
                     {{
                         $t(
                             'windward.core.components.content.blocks.scenario_choice.try_again'

package/components/Content/Blocks/UserUpload/DisplayUserFilesTable.vue

@@ -42,6 +42,7 @@
                             <td>
                                 <v-btn
                                     link
+                                    elevation="0"
                                     @click="
                                         Download.url(
                                             file.asset.public_url,
@@ -58,6 +59,7 @@
                             <td>
                                 <v-btn
                                     link
+                                    elevation="0"
                                     color="error"
                                     @click="onConfirmDelete(file)"
                                 >

package/components/Content/Blocks/UserUpload.vue

@@ -61,6 +61,7 @@
                                 <v-btn
                                     :disabled="!canUpload || loading"
                                     color="primary"
+                                    elevation="0"
                                     class="text-center"
                                     @click="handleUpload"
                                 >