@windward/core 0.1.4 → 0.2.0

package/components/Content/Blocks/Image.vue

@@ -43,7 +43,7 @@
                 class="sr-only"
             ></TextViewer>
         </v-container>
-        <Dialog v-model="dialog" persistent :trigger="false">
+        <DialogBox v-model="dialog" persistent :trigger="false">
             <template #title></template>
             <template #form="{ on, attrs }">
                 <v-responsive
@@ -72,13 +72,13 @@
                     </v-img>
                 </v-responsive>
             </template>
-        </Dialog>
+        </DialogBox>
     </div>
 </template>
 
 <script>
 import _ from 'lodash'
-import Dialog from '~/components/Dialog'
+import DialogBox from '~/components/DialogBox'
 import TextViewer from '~/components/Text/TextViewer'
 import Crypto from '~/helpers/Crypto'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
@@ -87,7 +87,7 @@ export default {
     name: 'ContentBlockImage',
     extends: BaseContentBlock,
     components: {
-        Dialog,
+        DialogBox,
         TextViewer,
     },
     data() {

package/components/Content/Blocks/Tab.vue

@@ -1,10 +1,7 @@
 <template>
     <div>
-        <v-container>
-            <v-tabs
-                background-color="primary"
-                v-model="block.metadata.config.currentTab"
-            >
+        <v-container class="pa-0">
+            <v-tabs dark v-model="block.metadata.config.currentTab" show-arrows>
                 <v-tabs-slider></v-tabs-slider>
                 <v-tab
                     v-for="(tab, tabIndex) in block.metadata.config.items"
@@ -60,9 +57,6 @@ export default {
                 content: '',
             }
             this.block.metadata.config.items = []
-            if (_.isEmpty(this.block.metadata.config.tab)) {
-                this.block.metadata.config.tab = 0
-            }
             this.block.metadata.config.items.push(defaultObject)
         } else {
             this.block.metadata.config.items.forEach((element) => {

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

@@ -1,6 +1,6 @@
 <template>
     <div class="text-center">
-        <Dialog
+        <DialogBox
             v-bind="$attrs"
             transition="dialog-bottom-transition"
             :color="color"
@@ -22,20 +22,20 @@
                     :enrollment="enrollment"
                 ></DisplayUserFilesTable>
             </template>
-        </Dialog>
+        </DialogBox>
         <span v-else>---</span>
     </div>
 </template>
 
 <script>
 import _ from 'lodash'
-import Dialog from '~/components/Dialog'
+import DialogBox from '~/components/DialogBox'
 
 import DisplayUserFilesTable from './DisplayUserFilesTable.vue'
 
 export default {
     name: 'ManageDataTableUserFiles',
-    components: { Dialog, DisplayUserFilesTable },
+    components: { DialogBox, DisplayUserFilesTable },
     props: {
         value: { type: Object, required: true },
         enrollment: { type: Object, required: true },

package/components/Navigation/Items/AskTheExpert.vue

@@ -7,7 +7,7 @@
             <v-list-item-title>
                 {{ $t(config.i18n) }}
             </v-list-item-title>
-            <Dialog v-model="dialog" color="primary" text :trigger="false">
+            <DialogBox v-model="dialog" color="primary" text :trigger="false">
                 <template #title>{{ $t(config.i18n) }}</template>
                 <template #form="{ on, attrs }">
                     <v-card flat v-bind="attrs" v-on="on">
@@ -104,7 +104,7 @@
                         </v-container>
                     </v-card>
                 </template>
-            </Dialog>
+            </DialogBox>
         </v-list-item-content>
     </v-list-item>
 </template>

package/components/Navigation/Items/CourseGlossaryToolNav.vue

@@ -5,14 +5,14 @@
         </v-list-item-action>
         <v-list-item-content>
             <v-list-item-title>{{ $t(config.i18n) }}</v-list-item-title>
-            <Dialog v-model="dialog" color="primary" text :trigger="false">
+            <DialogBox v-model="dialog" color="primary" text :trigger="false">
                 <template #title>{{ $t(config.i18n) }}</template>
                 <template #form="{ on, attrs }">
                     <div v-bind="attrs" v-on="on">
                         <CourseGlossary />
                     </div>
                 </template>
-            </Dialog>
+            </DialogBox>
         </v-list-item-content>
     </v-list-item>
 </template>

package/components/Settings/ImageSettings.vue

@@ -27,24 +27,68 @@
             v-model="block.metadata.config.modal"
             :label="$t('windward.core.components.settings.image.modal')"
         ></v-switch>
+        <v-tooltip top color="primary">
+            <template v-slot:activator="{ on, attrs }">
+                <div v-bind="attrs" v-on="on" class="d-flex justify-content">
+                    <v-switch
+                        v-model="block.metadata.config.decorative"
+                        @change="onDecorativeToggled($event)"
+                        :label="
+                            $t(
+                                'windward.core.components.settings.image.decorative'
+                            )
+                        "
+                    ></v-switch>
+                    <div class="d-flex align-center pb-4">
+                        <v-icon x-small>mdi-help</v-icon>
+                    </div>
+                </div>
+            </template>
+            <span class="span-description">{{
+                $t('windward.core.components.settings.image.toggle_description')
+            }}</span>
+        </v-tooltip>
 
-        <v-form>
+        <v-form v-if="!block.metadata.config.decorative">
             <v-text-field
                 v-model="block.metadata.config.alt"
+                outlined
+                counter
+                maxlength="125"
                 :label="
                     $t('windward.core.components.navigation.image.default_alt')
                 "
                 :rules="validation.textRules"
-            ></v-text-field>
-            <h3 class="pb-2">
-                {{
-                    $t(
-                        'windward.core.components.navigation.image.default_aria_described'
-                    )
-                }}
-            </h3>
+            >
+                <template v-slot:append>
+                    <v-tooltip top color="primary">
+                        <template v-slot:activator="{ on }">
+                            <v-icon v-on="on" small>mdi-help</v-icon>
+                        </template>
+                        <span class="span-description">{{
+                            $t(
+                                'windward.core.components.settings.image.alt_description'
+                            )
+                        }}</span>
+                    </v-tooltip>
+                </template>
+            </v-text-field>
+            <h5 class="pb-2">
+                {{ $t('windward.core.components.settings.image.screenreader') }}
+                <v-tooltip top color="primary">
+                    <template v-slot:activator="{ on }">
+                        <v-icon v-on="on" small class="pb-3">mdi-help</v-icon>
+                    </template>
+                    <span class="span-description">{{
+                        $t(
+                            'windward.core.components.settings.image.screenreader_description'
+                        )
+                    }}</span>
+                </v-tooltip>
+            </h5>
             <TextEditor
                 v-model="block.metadata.config.aria_describedby"
+                menubar="bullist numlist"
             ></TextEditor>
         </v-form>
     </v-container>
@@ -86,6 +130,9 @@ export default {
         if (!_.isBoolean(this.block.metadata.config.modal)) {
             this.block.metadata.config.modal = false
         }
+        if (!_.isBoolean(this.block.metadata.config.decorative)) {
+            this.block.metadata.config.decorative = false
+        }
         if (_.isEmpty(this.block.metadata.config.aria_describedby)) {
             this.block.metadata.config.aria_describedby = ''
         }
@@ -108,6 +155,12 @@ export default {
     watch: {},
     mounted() {},
     methods: {
+        onDecorativeToggled(evt) {
+            if (evt) {
+                this.block.metadata.config.aria_describedby = ''
+                this.block.metadata.config.alt = ''
+            }
+        },
         onFileSelect(file) {
             // file = null when you remove a file
             if (_.isEmpty(file)) {
@@ -139,3 +192,10 @@ export default {
     },
 }
 </script>
+<style>
+.span-description {
+    display: flex;
+    justify-content: center;
+    width: 200px;
+}
+</style>

package/components/Settings/ScenarioChoiceSettings.vue

@@ -117,7 +117,7 @@
             </v-col>
         </v-container>
 
-        <Dialog
+        <DialogBox
             v-model="showLinkDialog"
             :trigger="false"
             action-save
@@ -171,7 +171,7 @@
                     </v-treeview>
                 </v-form>
             </template>
-        </Dialog>
+        </DialogBox>
     </div>
 </template>
 <script>
@@ -180,14 +180,14 @@ import { mapGetters } from 'vuex'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import TextEditor from '~/components/Text/TextEditor'
 import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
-import Dialog from '~/components/Dialog.vue'
+import DialogBox from '~/components/DialogBox.vue'
 
 export default {
     name: 'ScenarioChoiceSettings',
     components: {
         SortableExpansionPanel,
         TextEditor,
-        Dialog,
+        DialogBox,
     },
     extends: BaseContentSettings,
     computed: {

package/components/Settings/TabSettings.vue

@@ -94,9 +94,6 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
-        if (_.isEmpty(this.block.metadata.config.tab)) {
-            this.block.metadata.config.tab = 0
-        }
         if (_.isEmpty(this.block.metadata.config.currentTab)) {
             this.block.metadata.config.currentTab = 0
         }

package/components/Settings/TextEditorSettings.vue

@@ -108,7 +108,7 @@
             type=" table-row-divider, list-item, divider, list-item, divider, image,image"
             v-show="settingSelector.includes(1) && block.metadata.config.expand"
         ></v-skeleton-loader>
-        <Dialog
+        <DialogBox
             v-model="dialog"
             color="primary"
             max-width="600px"
@@ -129,7 +129,7 @@
                     v-on="on"
                 />
             </template>
-        </Dialog>
+        </DialogBox>
     </div>
 </template>
 

package/components/utils/MathExpressionEditor.vue

@@ -141,7 +141,7 @@ export default {
             spokenTextChanged: false,
             options: {
                 smartFence: true,
-                smartMode: true,
+                smartMode: false,
                 virtualKeyboardMode: 'manual',
                 keypressSound: 'none',
                 plonkSound: 'none',

package/components/utils/TinyMCEWrapper.vue

@@ -64,6 +64,8 @@ export default {
                 visual: false,
                 forced_root_block: this.root_block,
                 menubar: this.menubar,
+                browser_spellcheck: true,
+                contextmenu: false,
                 menu: {
                     insert: {
                         title: 'Insert',
@@ -82,7 +84,7 @@ export default {
                     'advlist autolink lists link  charmap',
                     'searchreplace visualblocks code fullscreen',
                     'anchor insertdatetime ',
-                    'paste code wordcount table WindwardToolKit ',
+                    'paste code wordcount table WindwardToolKit',
                 ],
                 toolbar: this.toolbar,
                 table_advtab: false,

package/components/utils/glossary/CourseGlossary.vue

@@ -11,7 +11,7 @@
                 >
                     <template #top>
                         <v-toolbar flat>
-                            <Dialog
+                            <DialogBox
                                 v-model="dialog"
                                 color="primary"
                                 max-width="600px"
@@ -60,7 +60,7 @@
                                         v-on="on"
                                     />
                                 </template>
-                            </Dialog>
+                            </DialogBox>
                             <v-spacer></v-spacer>
                             <v-text-field
                                 v-model="search"
@@ -77,7 +77,20 @@
                         <tr>
                             <td>{{ item.term }}</td>
                             <td>{{ item.definition }}</td>
-                            <td>{{ item.alternate_forms }}</td>
+                            <td>
+                                <v-row>
+                                    <div
+                                        v-for="(
+                                            item, index
+                                        ) in item.alternate_forms"
+                                        :key="index"
+                                    >
+                                        <v-chip>
+                                            {{ item }}
+                                        </v-chip>
+                                    </div>
+                                </v-row>
+                            </td>
                             <td>{{ item.related_term }}</td>
 
                             <td>

package/components/utils/glossary/CourseGlossaryForm.vue

@@ -6,6 +6,7 @@
             :label="$t('windward.core.pages.glossary.term')"
             required
             :rules="validation.termRules"
+            :disabled="editMode"
         ></v-text-field>
         <br />
         <v-textarea

package/components/utils/glossary/GlossaryToolTip.vue

@@ -18,14 +18,14 @@
             </template>
             <div>
                 <div v-if="this.$slots['definition']">
-                    <h4 class="text-capitalize">
+                    <h6 class="text-capitalize">
                         {{
                             $t(
                                 'windward.core.components.utils.tiny_mce_wrapper.definition'
                             )
                         }}
                         :
-                    </h4>
+                    </h6>
                     <p>
                         <slot name="definition"></slot>
                     </p>

package/helpers/MathHelper.ts

@@ -184,7 +184,7 @@ export default class MathHelper {
             MathHelper.convertContentLatexToHtml(
                 MathHelper.convertContentMathMLtoLatex(content)
             )
-        )
+        ).replace(/contenteditable="true"/g, '');
     }
 
     /**

package/i18n/en-US/components/settings/image.ts

@@ -1,4 +1,12 @@
 export default {
     hide_background: 'Hide Background',
     modal: 'Click to open in modal',
+    decorative: 'Decorative Image',
+    toggle_description:
+        'To meet accessibility standards, alt text is required for all images except for purely decorative images. This setting will add the proper alt text and screen reader text for learners.',
+    alt_description:
+        'Alternative text is descriptive text that conveys the meaning and context of a visual item in a digital setting, intended for users who are visually impaired or otherwise unable to visually identify an image. This should be short and clear.',
+    screenreader: 'Screen Reader Text',
+    screenreader_description:
+        'Screen reader text can be added to give a user using assistive technology more information about the elements on the page',
 }

package/i18n/es-ES/components/settings/image.ts

@@ -1,4 +1,12 @@
 export default {
     hide_background: 'Ocultar fondo',
     modal: 'Haga clic para abrir en modal',
+    decorative: 'Imagen decorativa',
+    toggle_description:
+        'Para cumplir con los estándares de accesibilidad, se requiere texto alternativo para todas las imágenes, excepto para las imágenes puramente decorativas. Esta configuración agregará el texto alternativo y el texto del lector de pantalla adecuados para los estudiantes.',
+    alt_description:
+        'El texto alternativo es un texto descriptivo que transmite el significado y el contexto de un elemento visual en un entorno digital, destinado a usuarios con discapacidad visual o que no pueden identificar visualmente una imagen. Esto debe ser breve y claro.',
+    screenreader: 'Texto del lector de pantalla',
+    screenreader_description:
+        'Se puede agregar texto al lector de pantalla para brindarle al usuario que utiliza tecnología de asistencia más información sobre los elementos de la página',
 }

package/i18n/sv-SE/components/settings/image.ts

@@ -1,4 +1,12 @@
 export default {
     hide_background: 'Dölj bakgrund',
     modal: 'Klicka för att öppna i modal',
+    decorative: 'Dekorativ bild',
+    toggle_description:
+        'För att uppfylla tillgänglighetsstandarder krävs alt-text för alla bilder utom för rent dekorativa bilder. Den här inställningen kommer att lägga till rätt alt-text och skärmläsartext för eleverna.',
+    alt_description:
+        'Alternativ text är beskrivande text som förmedlar innebörden och sammanhanget av ett visuellt föremål i en digital miljö, avsedd för användare som är synskadade eller på annat sätt oförmögna att visuellt identifiera en bild. Detta ska vara kort och tydligt.',
+    screenreader: 'Skärmläsartext',
+    screenreader_description:
+        'Skärmläsartext kan läggas till för att ge en användare som använder hjälpmedel mer information om elementen på sidan',
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/core",
-    "version": "0.1.4",
+    "version": "0.2.0",
     "description": "Windward UI Core Plugins",
     "main": "plugin.js",
     "scripts": {
@@ -12,7 +12,12 @@
         "type": "git",
         "url": "git+ssh://git@bitbucket.org/mindedge/windward-ui-plugin-core.git"
     },
-    "author": "Jacob Rogaishio",
+    "author": "Jacob Rogaishio <jrogaishio@mindedge.com>",
+    "contributors": [
+        "Jacob Rogaishio <jrogaishio@mindedge.com>",
+        "Ted Celestin <tcelestin@mindedge.com>",
+        "Christina Passafaro <cpassafaro@mindedge.com>"
+    ],
     "license": "MIT",
     "homepage": "https://bitbucket.org/mindedge/windward-ui-plugin-core#readme",
     "dependencies": {

package/plugin.js

@@ -153,8 +153,7 @@ export default {
                 metadata: {
                     icon: 'mdi-video',
                     name: 'windward.core.shared.content_blocks.title.video',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.multimedia',
+                    grouping: 'components.content.blocks.group.multimedia',
                 },
             },
             {
@@ -163,8 +162,7 @@ export default {
                 metadata: {
                     icon: 'mdi-tab',
                     name: 'windward.core.shared.content_blocks.title.tab',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
             {
@@ -173,28 +171,25 @@ export default {
                 metadata: {
                     icon: 'mdi-view-list',
                     name: 'windward.core.shared.content_blocks.title.accordion',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
             {
                 tag: 'core-open-response',
                 template: OpenResponse,
                 metadata: {
-                    icon: 'mdi-typewriter',
+                    icon: 'mdi-text-long',
                     name: 'windward.core.shared.content_blocks.title.open_response',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
             {
                 tag: 'core-open-response-collate',
                 template: OpenResponseCollate,
                 metadata: {
-                    icon: 'mdi-typewriter',
+                    icon: 'mdi-text-long',
                     name: 'windward.core.shared.content_blocks.title.open_response_collate',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
             {
@@ -203,8 +198,7 @@ export default {
                 metadata: {
                     icon: 'mdi-image',
                     name: 'windward.core.shared.content_blocks.title.image',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.multimedia',
+                    grouping: 'components.content.blocks.group.multimedia',
                 },
             },
             {
@@ -213,8 +207,7 @@ export default {
                 metadata: {
                     icon: 'mdi-cloud-upload',
                     name: 'windward.core.shared.content_blocks.title.user_upload',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.multimedia',
+                    grouping: 'components.content.blocks.group.multimedia',
                 },
             },
             {
@@ -223,8 +216,7 @@ export default {
                 metadata: {
                     icon: 'mdi-format-list-checks',
                     name: 'windward.core.shared.content_blocks.title.clickable_icons',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
             {
@@ -233,8 +225,7 @@ export default {
                 metadata: {
                     icon: 'mdi-ab-testing',
                     name: 'windward.core.shared.content_blocks.title.scenario_choice',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
             {
@@ -243,8 +234,7 @@ export default {
                 metadata: {
                     icon: 'mdi-message',
                     name: 'windward.core.shared.content_blocks.title.feedback',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
             {
@@ -253,8 +243,7 @@ export default {
                 metadata: {
                     icon: 'mdi-email',
                     name: 'windward.core.shared.content_blocks.title.email',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
             {
@@ -263,8 +252,7 @@ export default {
                 metadata: {
                     icon: 'mdi-format-quote-close',
                     name: 'windward.core.shared.content_blocks.title.block_quote',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
             {
@@ -273,8 +261,7 @@ export default {
                 metadata: {
                     icon: 'mdi-minus',
                     name: 'windward.core.shared.content_blocks.title.horizontal_rule',
-                    grouping:
-                        'windward.core.shared.content_blocks.grouping.basic',
+                    grouping: 'components.content.blocks.group.basic',
                 },
             },
         ],

package/test/__mocks__/componentsMock.js

@@ -23,7 +23,7 @@ jest.mock(
 )
 
 jest.mock(
-    '~/components/Dialog.vue',
+    '~/components/DialogBox.vue',
     () => {
         return {
             props: {},
@@ -35,7 +35,7 @@ jest.mock(
 )
 
 jest.mock(
-    '~/components/Dialog',
+    '~/components/DialogBox.vue',
     () => {
         return {
             props: {},