@zipify/wysiwyg 1.0.0-dev.17 → 1.0.0-dev.18

package/example/ExampleApp.vue

@@ -29,6 +29,7 @@
             :make-preset-variable="$options.makePresetVariable"
             :favorite-colors="favoriteColors"
             :device="device"
+            :page-blocks="pageBlocks"
             :active="isActive"
             @updateFavoriteColors="updateFavoriteColors"
         />
@@ -41,6 +42,7 @@ import { computed, onMounted, ref } from '@vue/composition-api';
 import { Wysiwyg } from '../lib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
+import { PAGE_BLOCKS } from './pageBlocks';
 
 function getInitialContent() {
     const data = sessionStorage.getItem('wswg-data');
@@ -65,6 +67,7 @@ export default {
         const wswgRef = ref(null);
         const content = ref(getInitialContent());
         const presets = ref(PRESETS);
+        const pageBlocks = ref(PAGE_BLOCKS);
         const device = ref('desktop');
         const updatedAt = new Date(ZW_UPDATED_AT).toLocaleString('ua-UA');
         const isActive = ref(false);
@@ -96,7 +99,7 @@ export default {
             }
         }
 
-        document.body.addEventListener('click', (event) => {
+        document.addEventListener('click', (event) => {
             isActive.value = wswgRef.value.$el.contains(event.target);
         });
 
@@ -111,7 +114,8 @@ export default {
             device,
             updatedAt,
             presets,
-            isActive
+            isActive,
+            pageBlocks
         };
     }
 };

package/example/pageBlocks.js

@@ -0,0 +1,31 @@
+export const PAGE_BLOCKS = [
+    {
+        id: 123,
+        title: 'Dynamic Buy Box'
+    },
+
+    {
+        id: 123456,
+        title: 'Text + Navigation'
+    },
+
+    {
+        id: 11123,
+        title: 'Dynamic Bundle Offer'
+    },
+
+    {
+        id: 4444444,
+        title: 'Dynamic Buy Box[2]'
+    },
+
+    {
+        id: 555555,
+        title: 'Image'
+    },
+
+    {
+        id: 666666,
+        title: 'Footer'
+    }
+];

package/example/presets.js

@@ -14,7 +14,7 @@ export const PRESETS = [
         'common': {
             'font_family': 'Lato',
             'font_weight': '700',
-            'color': '#262626',
+            'color': '',
             'font_style': 'normal',
             'text_decoration': 'none'
         },
@@ -131,7 +131,7 @@ export const PRESETS = [
         'common': {
             'font_family': 'inherit',
             'font_weight': 'inherit',
-            'color': '',
+            'color': 'rgb(0, 0, 238)',
             'font_style': 'normal',
             'text_decoration': 'underline'
         },

package/lib/Wysiwyg.vue

@@ -15,7 +15,7 @@ import { EditorContent } from '@tiptap/vue-2';
 import { provide, toRef, ref } from '@vue/composition-api';
 import { Toolbar } from './components';
 import { useToolbar, useEditor } from './composables';
-import { getExtensions } from './extensions';
+import { buildExtensions } from './extensions';
 import { InjectionTokens } from './injectionTokens';
 import { ContextWindow, FavoriteColors, Storage } from './services';
 import { Devices } from './enums';
@@ -97,6 +97,11 @@ export default {
             default: 'zw-list--'
         },
 
+        pageBlocks: {
+            type: Array,
+            required: true
+        },
+
         // Requires Window type but it different in iframe and outside
         // eslint-disable-next-line vue/require-prop-types
         window: {
@@ -109,6 +114,7 @@ export default {
         ContextWindow.use(props.window);
 
         const fonts = props.fonts.map((font) => new Font(font));
+        const presets = toRef(props, 'presets');
 
         const toolbarRef = ref(null);
         const wysiwygRef = ref(null);
@@ -124,11 +130,13 @@ export default {
             toolbar.update();
         }
 
+        const pageBlocks = toRef(props, 'pageBlocks');
+
         const editor = useEditor({
             content: toRef(props, 'value'),
             onChange: (content) => onChange(content),
 
-            extensions: getExtensions({
+            extensions: buildExtensions({
                 fonts,
                 minFontSize: MIN_FONT_SIZE,
                 maxFontSize: MAX_FONT_SIZE,
@@ -137,7 +145,9 @@ export default {
                 makePresetVariable: props.makePresetVariable,
                 basePresetClass: props.basePresetClass,
                 baseListClass: props.baseListClass,
-                deviceRef: toRef(props, 'device')
+                linkPreset: presets.value.find((preset) => preset.id === 'link'),
+                deviceRef: toRef(props, 'device'),
+                pageBlocks
             })
         });
 
@@ -155,6 +165,7 @@ export default {
         provide(InjectionTokens.FONT_SIZES, fontSizes);
         provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
         provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
+        provide(InjectionTokens.PAGE_BLOCKS, pageBlocks);
 
         return { editor, toolbarRef, wysiwygRef, toolbar };
     }

package/lib/assets/icons/link.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M12 17.5h-2a3.5 3.5 0 1 1 0-7h2V9h-2a5 5 0 0 0 0 10h2v-1.5Zm6-4.5h-8v2h8v-2Zm-2-4h2a5 5 0 0 1 0 10h-2v-1.5h2a3.5 3.5 0 1 0 0-7h-2V9Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/unlink.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 20 20">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M18.96 10a5 5 0 0 0-5-5h-2v1.5h2a3.49 3.49 0 0 1 1.58 6.61L13.43 11h.53V9h-2.53l-7-7-1.47 1.47L17.49 18l1.47-1.47-2.34-2.34A4.93 4.93 0 0 0 18.96 10Zm-13 1h1.59L5.96 9.41V11ZM3.81 7.26A3.47 3.47 0 0 0 2.46 10a3.5 3.5 0 0 0 3.5 3.5h2V15h-2a5 5 0 0 1-3.21-8.8l1.06 1.06Z" clip-rule="evenodd"/>
+</svg>

package/lib/components/base/Button.vue

@@ -20,7 +20,7 @@ export default {
         skin: {
             type: String,
             required: false,
-            validator: (skin) => ['toolbar', 'none'].includes(skin),
+            validator: (skin) => ['toolbar', 'primary', 'secondary', 'none'].includes(skin),
             default: 'none'
         },
 
@@ -104,6 +104,26 @@ export default {
     will-change: background-color, color, opacity;
 }
 
+.zw-button--primary {
+    background-color: rgb(var(--zw-color-green));
+    color: rgb(var(--zw-color-white));
+    padding: var(--zw-offset-xxs) var(--zw-offset-sm);
+    line-height: var(--zw-line-height-md);
+}
+
+.zw-button--primary,
+.zw-button--secondary {
+    color: rgb(var(--zw-color-white));
+    padding: var(--zw-offset-xxs) var(--zw-offset-sm);
+    font-weight: 600;
+    font-size: var(--zw-font-size-xs);
+}
+
+.zw-button--primary:not(:disabled):hover,
+.zw-button--secondary:not(:disabled):hover {
+    opacity: 0.9;
+}
+
 .zw-button--toolbar:not(.zw-button--icon) {
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }

package/lib/components/base/Checkbox.vue

@@ -0,0 +1,89 @@
+<template>
+    <label class="zw-checkbox">
+        <input class="zw-checkbox__field" type="checkbox" :checked="value" @change="onCheckedChanged">
+        <span class="zw-checkbox__indicator zw-margin-right--xs" />
+        <span class="zw-checkbox__label">{{ label }}</span>
+    </label>
+</template>
+
+<script>
+export default {
+    name: 'Checkbox',
+
+    props: {
+        value: {
+            type: Boolean,
+            required: true
+        },
+
+        label: {
+            type: String,
+            required: false,
+            default: null
+        }
+    },
+
+    setup(_, { emit }) {
+        const onCheckedChanged = (event) => {
+            emit('input', event.target.checked);
+        };
+
+        return { onCheckedChanged };
+    }
+};
+</script>
+
+<style scoped>
+.zw-checkbox {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    padding: var(--zw-offset-xxs) var(--zw-offset-xxs) var(--zw-offset-xxs) 0;
+}
+
+.zw-checkbox__field + .zw-checkbox__indicator {
+    color: var(--zw-color-n200);
+    box-shadow: inset 0 0 0 2px currentColor;
+}
+
+.zw-checkbox:hover .zw-checkbox__indicator {
+    box-shadow: inset 0 0 0 2px rgb(var(--zw-color-green));
+}
+
+.zw-checkbox__field:checked + .zw-checkbox__indicator {
+    color: rgb(var(--zw-color-green))
+}
+
+.zw-checkbox .zw-checkbox__field:checked + .zw-checkbox__indicator {
+    background-color: rgb(var(--zw-color-green));
+}
+
+.zw-checkbox .zw-checkbox__indicator::after {
+    content: "";
+    display: block;
+    height: 16px;
+    transform: scale(0.6);
+    transition: transform 0.2s ease-out;
+    width: 16px;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNiAyNiIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPgogIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0uMyAxNGMtLjItLjItLjMtLjUtLjMtLjdzLjEtLjUuMy0uN2wxLjQtMS40Yy40LS40IDEtLjQgMS40IDBsLjEuMSA1LjUgNS45Yy4yLjIuNS4yLjcgMEwyMi44IDMuM2guMWMuNC0uNCAxLS40IDEuNCAwbDEuNCAxLjRjLjQuNC40IDEgMCAxLjRsLTE2IDE2LjZjLS4yLjItLjQuMy0uNy4zLS4zIDAtLjUtLjEtLjctLjNMLjUgMTQuMy4zIDE0eiIvPgo8L3N2Zz4K");
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-position: center center;
+}
+
+.zw-checkbox__field:not(:checked) + .zw-checkbox__indicator::after {
+    transform: scale(0);
+}
+
+.zw-checkbox__field {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+
+.zw-checkbox__label {
+    font-size: var(--zw-font-size-xs);
+}
+</style>

package/lib/components/base/FieldLabel.vue

@@ -11,7 +11,8 @@ export default {
     props: {
         fieldId: {
             type: String,
-            required: true
+            required: false,
+            default: null
         }
     }
 };

package/lib/components/base/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-    <span
+    <div
         class="zw-icon"
         :class="iconClasses"
         :style="iconStyles"
@@ -66,7 +66,7 @@ export default {
 
 <style scoped>
 .zw-icon {
-    display: inline-block;
+    display: flex;
 }
 
 .zw-icon--auto-color {

package/lib/components/base/Modal.vue

@@ -76,7 +76,6 @@ export default {
 <style scoped>
 .zw-modal {
     border-radius: 2px;
-    overflow: hidden;
     box-shadow: 0 0 4px rgba(var(--zw-color-black), 0.3);
     background-color: rgb(var(--zw-color-n15));
     max-height: var(--zw-modal-max-height);

package/lib/components/base/TextField.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="zw-field">
+        <label class="zw-field__label" :for="fieldId" data-test-selector="label">
+            {{ label }}
+        </label>
+
+        <input
+            class="zw-field__input"
+            type="text"
+            :value="value"
+            :id="fieldId"
+            :placeholder="placeholder"
+            @input="onInput"
+            data-test-selector="input"
+        >
+
+        <p class="zw-field__label--error" v-if="error" data-test-selector="error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+
+<script>
+import { computed } from '@vue/composition-api';
+
+export default {
+    name: 'TextField',
+
+    props: {
+        value: {
+            type: [Number, String],
+            required: true
+        },
+
+        label: {
+            type: String,
+            required: true
+        },
+
+        placeholder: {
+            type: String,
+            required: false,
+            default: ''
+        },
+
+        error: {
+            type: String,
+            required: false,
+            default: null
+        }
+    },
+
+    setup(props, { emit }) {
+        const onInput = (event) => emit('input', event.target.value);
+        const fieldId = computed(() => {
+            return props.label.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
+        });
+
+        return { onInput, fieldId };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.zw-field {
+    display: flex;
+    flex-direction: column;
+}
+
+.zw-field__input {
+    --border-color: rgb(var(--zw-color-n60));
+    --text-color: rgb(var(--zw-color-n85));
+
+    border: 1px solid var(--border-color);
+    background-color: transparent;
+    color: var(--text-color);
+    font-size: var(--zw-font-size-xxs);
+    outline: none;
+    padding: 6px;
+    line-height: var(--zw-line-height-xxs);
+}
+
+.zw-field__input:hover {
+    --border-color: rgb(var(--zw-color-n80));
+    --text-color: rgb(var(--zw-color-n85));
+}
+
+.zw-field__input:focus,
+.zw-field__input:focus-within {
+    --border-color: rgb(var(--zw-color-white));
+    --text-color: rgb(var(--zw-color-white));
+}
+
+.zw-field__label {
+    display: inline-block;
+    font-size: var(--zw-font-size-xxs);
+    padding-bottom: var(--zw-offset-xxs);
+    line-height: var(--zw-line-height-xxs);
+}
+
+.zw-field__label--error {
+    font-size: var(--zw-font-size-xxs);
+    margin: var(--zw-offset-xxs) 0 0;
+    color: rgb(var(--zw-color-red));
+}
+</style>

package/lib/components/base/__tests__/TextField.test.js

@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+import TextField from '../TextField';
+
+function createComponent(label, error) {
+    return shallowMount(TextField, {
+        propsData: {
+            value: '',
+            label: label ?? '',
+            placeholder: '',
+            error: error ?? null
+        }
+    });
+}
+
+const SELECTORS = {
+    LABEL: '[data-test-selector="label"]',
+    INPUT: '[data-test-selector="input"]',
+    ERROR: '[data-test-selector="error"]'
+};
+
+describe('rendering', () => {
+    test('should render label', () => {
+        const label = 'Hello world!';
+        const wrapper = createComponent(label);
+
+        expect(wrapper.find(SELECTORS.LABEL).text()).toEqual(label);
+    });
+
+    test('should generate label', () => {
+        const wrapper = createComponent('hello world label');
+
+        expect(wrapper.find(SELECTORS.INPUT).element.id).toBe('helloWorldLabel');
+    });
+
+    test('should render errors', () => {
+        const wrapper = createComponent('_', 'some error');
+
+        expect(wrapper.contains(SELECTORS.ERROR)).toBeTruthy();
+    });
+
+    test('should not render errors', () => {
+        const wrapper = createComponent();
+
+        expect(wrapper.contains(SELECTORS.ERROR)).toBeFalsy();
+    });
+});
+
+describe('input change handling', () => {
+    test('should emit parsed value', () => {
+        const wrapper = createComponent();
+        const inputComponentWrapper = wrapper.find(SELECTORS.INPUT);
+
+        inputComponentWrapper.setValue('Hello world!!!');
+
+        expect(wrapper.emitted('input')).toMatchSnapshot();
+    });
+});

package/lib/components/base/__tests__/__snapshots__/TextField.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`input change handling should emit parsed value 1`] = `
+Array [
+  Array [
+    "Hello world!!!",
+  ],
+]
+`;

package/lib/components/base/composables/index.js

@@ -1,3 +1,4 @@
+export { useValidator } from './useValidator';
 export { useTempValue } from './useTempValue';
 export { useElementRef } from './useElementRef';
 export { useNumberValue } from './useNumberValue';

package/lib/components/base/composables/useValidator.js

@@ -0,0 +1,19 @@
+import { ref } from '@vue/composition-api';
+
+export function useValidator({ validations }) {
+    const error = ref(null);
+
+    function validate(value) {
+        for (const validate of validations) {
+            const validationError = validate(value);
+
+            if (validationError) {
+                return error.value = validationError;
+            }
+
+            error.value = null;
+        }
+    }
+
+    return { error, validate };
+}

package/lib/components/base/dropdown/Dropdown.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="zw-dropdown" ref="dropdownRef">
-        <DropdownActivator>
+        <DropdownActivator :color="color">
             <template #default="attrs">
                 <slot name="activator" v-bind="attrs" />
             </template>
         </DropdownActivator>
 
-        <Modal max-height="300" max-width="156" :toggler="toggler" ref="modalRef">
+        <Modal max-height="300" :max-width="maxWidth" :toggler="toggler" ref="modalRef">
             <DropdownMenu :options="options">
                 <template #option="attrs">
                     <slot name="option" v-bind="attrs" />
@@ -40,7 +40,7 @@ export default {
 
     props: {
         value: {
-            type: String,
+            type: [String, Number],
             required: false,
             default: null
         },
@@ -48,6 +48,18 @@ export default {
         options: {
             type: Array,
             required: true
+        },
+
+        maxWidth: {
+            type: Number,
+            required: false,
+            default: 156
+        },
+
+        color: {
+            type: String,
+            required: false,
+            default: 'none'
         }
     },
 

package/lib/components/base/dropdown/DropdownActivator.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { computed, inject } from '@vue/composition-api';
+import { computed, inject, toRef } from '@vue/composition-api';
 import Button from '../Button';
 import Icon from '../Icon';
 import { InjectionTokens } from './injectionTokens';
@@ -42,14 +42,24 @@ export default {
         event: 'change'
     },
 
-    setup() {
+    props: {
+        color: {
+            type: String,
+            required: false,
+            default: 'none'
+        }
+    },
+
+    setup(props) {
         const activeOptionManager = inject(InjectionTokens.ACTIVE_MANAGER);
         const dropdownToggler = inject(InjectionTokens.TOGGLER);
+        const color = toRef(props, 'color');
 
         const activeOptionTitle = useDropdownEntityTitle(activeOptionManager.activeOption);
 
         const dropdownClasses = computed(() => ({
-            'zw-dropdown__activator--active': dropdownToggler.isOpened.value
+            'zw-dropdown__activator--active': dropdownToggler.isOpened.value,
+            'zw-dropdown__activator--gray': color.value === 'gray'
         }));
 
         return {
@@ -78,4 +88,10 @@ export default {
 .zw-dropdown__activator--active .zw-dropdown__activator-arrow {
     transform: rotateX(180deg);
 }
+
+.zw-dropdown__activator--gray {
+    background-color: rgb(var(--zw-color-n20));
+    font-size: var(--zw-font-size-xxs);
+    color: rgb(var(--zw-color-white));
+}
 </style>

package/lib/components/base/index.js

@@ -6,6 +6,8 @@ export { default as FieldLabel } from './FieldLabel';
 export { default as Range } from './Range';
 export { default as NumberField } from './NumberField';
 export { default as Modal } from './Modal';
+export { default as TextField } from './TextField';
+export { default as Checkbox } from './Checkbox';
 export { useModalToggler, useElementRef } from './composables';
 export * from './dropdown';
 export * from './colorPicker';

package/lib/components/toolbar/Toolbar.vue

@@ -1,11 +1,11 @@
 <template>
-    <transition name="zw-toolbar-" :duration="150">
-        <keep-alive>
+    <keep-alive>
+        <transition name="zw-toolbar-" duration="150">
             <div class="zw-toolbar" :style="toolbarStyles" ref="toolbarRef" v-if="isVisible">
                 <component :is="toolbarComponent" />
             </div>
-        </keep-alive>
-    </transition>
+        </transition>
+    </keep-alive>
 </template>
 
 <script>
@@ -82,7 +82,7 @@ export default {
 
 .zw-toolbar--enter-active,
 .zw-toolbar--leave-active {
-    transition: opacity 0.15s ease-out;
+    transition: opacity 150ms ease-out;
 }
 
 .zw-toolbar--leave-active {