+
+
+ {{ t.GENERAL.SAVING }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/HdInfoBox.vue b/src/components/HdInfoBox.vue
new file mode 100644
index 000000000..82434ad8e
--- /dev/null
+++ b/src/components/HdInfoBox.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/HdTable.vue b/src/components/HdTable.vue
index dc2e8a540..fe34101b8 100644
--- a/src/components/HdTable.vue
+++ b/src/components/HdTable.vue
@@ -8,7 +8,7 @@
-
-
-
-
-
-
-
+
-
+
+
+
+
+
+
+
diff --git a/src/components/details-table/HdDetailsTableRow.vue b/src/components/details-table/HdDetailsTableRow.vue
new file mode 100644
index 000000000..3907e42ab
--- /dev/null
+++ b/src/components/details-table/HdDetailsTableRow.vue
@@ -0,0 +1,103 @@
+
+
+
+
+ {{ label }}:
+
+
+
+
+
+
+
+
+
diff --git a/src/components/form/HdCheckbox.vue b/src/components/form/HdCheckbox.vue
index fa9f0769d..4004875df 100644
--- a/src/components/form/HdCheckbox.vue
+++ b/src/components/form/HdCheckbox.vue
@@ -1,48 +1,120 @@
-
+
+
-
-
-
-
-
+
+
+
+
@@ -134,19 +206,6 @@ export default {
@import 'hd-blocks/styles/inputs.scss';
.field {
- &__input {
- font-family: 'Source Sans Pro', sans-serif;
- background: $wild-sand !important; // (to be fixed in the styleguide)
- &:required {
- box-shadow: none;
- }
- &::-ms-clear {
- display: none;
- }
- &::-ms-reveal {
- display: none;
- }
- }
&__label {
left: 0;
}
diff --git a/src/components/form/HdPasswordConfirm.vue b/src/components/form/HdPasswordConfirm.vue
index a7fd6d567..3fcdb20d5 100644
--- a/src/components/form/HdPasswordConfirm.vue
+++ b/src/components/form/HdPasswordConfirm.vue
@@ -1,27 +1,38 @@
+
-
+
+
+
+
+ + {{ innerLabel }} +
{{ label }}
++ {{ error }} +
-
-
-
diff --git a/src/components/form/HdRadio.vue b/src/components/form/HdRadio.vue
index af018f6f0..342bb98e5 100644
--- a/src/components/form/HdRadio.vue
+++ b/src/components/form/HdRadio.vue
@@ -1,102 +1,232 @@
- {{ t.FORM.VALIDATION.PASSWORD_STRENGTH.LEVELS[strengthIndex] }}
+
+
- {{ t.FORM.VALIDATION.PASSWORD_STRENGTH.LEVELS[strengthIndex] }}
-
-
-
+
+
diff --git a/src/components/form/HdSelect.vue b/src/components/form/HdSelect.vue
new file mode 100644
index 000000000..2266e3214
--- /dev/null
+++ b/src/components/form/HdSelect.vue
@@ -0,0 +1,165 @@
+
+
+
+
+ 
+
+
+
+
+
+
+
+
diff --git a/src/components/form/HdTextarea.vue b/src/components/form/HdTextarea.vue
new file mode 100644
index 000000000..061e08b53
--- /dev/null
+++ b/src/components/form/HdTextarea.vue
@@ -0,0 +1,205 @@
+
+
+
+
+ `,
+ props: {
+ isEditable: {
+ type: Boolean,
+ default: boolean('isEditable', true),
+ },
+ },
+ data() {
+ return {
+ firstName: 'Chuck',
+ lastName: 'Norris',
+ editedFirstName: '',
+ editedLastName: '',
+ editing: false,
+ loading: false,
+ };
+ },
+ created() {
+ this.editedFirstName = this.firstName;
+ this.editedLastName = this.lastName;
+ },
+ methods: {
+ onSave() {
+ const firstNameIsValid = this.$refs.firstName.validate();
+ const lastNameIsValid = this.$refs.lastName.validate();
+ this.loading = true;
+ if (firstNameIsValid && lastNameIsValid) {
+ setTimeout(this.onSaveSuccess, 2000);
+ }
+ },
+ onCancel() {
+ this.editing = false;
+ this.editedFirstName = this.firstName;
+ this.editedLastName = this.lastName;
+ },
+ onSaveSuccess() {
+ this.firstName = this.editedFirstName;
+ this.lastName = this.editedLastName;
+ this.editing = false;
+ this.loading = false;
+ },
+ enableEditing() {
+ this.editing = true;
+ },
+ },
+ }));
diff --git a/src/stories/HdExpandText.stories.js b/src/stories/HdExpandText.stories.js
new file mode 100644
index 000000000..f2bce1a1f
--- /dev/null
+++ b/src/stories/HdExpandText.stories.js
@@ -0,0 +1,103 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { number } from '@storybook/addon-knobs';
+
+import HdExpandText from 'hd-blocks/components/HdExpandText.vue';
+
+storiesOf('HdExpandText', module)
+ .add('default', () => ({
+ components: { HdExpandText },
+ props: {
+ lines: {
+ type: Number,
+ default: number('Lines', 4, {
+ range: true,
+ min: 1,
+ max: 20,
+ step: 1,
+ }),
+ },
+ linesMobile: {
+ type: Number,
+ default: number('Lines Mobile', 3, {
+ range: true,
+ min: 1,
+ max: 20,
+ step: 1,
+ }),
+ },
+ },
+ template: `
+ ({
+ components: { HdNotifications },
+ props: {
+ type: {
+ type: String,
+ default: select(
+ 'Type',
+ [
+ 'notification',
+ 'success',
+ 'error',
+ 'warning',
+ ],
+ 'notification',
+ ),
+ },
+ },
+ template: `
+ ', () => {
+ const table = wrapper.find('table');
+
+ expect(table.exists()).toBe(true);
+ });
+
+ describe('props', () => {
+ describe('fixed', () => {
+ test('only accepts Boolean', () => {
+ const { fixed } = wrapper.vm.$options.props;
+
+ expect(fixed.type).toBe(Boolean);
+ });
+
+ test('defaults to false', () => {
+ const { fixed } = wrapper.props();
+
+ expect(fixed).toBe(false);
+ });
+ });
+
+ describe('noWrap', () => {
+ test('only accepts Boolean', () => {
+ const { noWrap } = wrapper.vm.$options.props;
+
+ expect(noWrap.type).toBe(Boolean);
+ });
+
+ test('defaults to false', () => {
+ const { noWrap } = wrapper.props();
+
+ expect(noWrap).toBe(false);
+ });
+ });
+
+ describe('header', () => {
+ test('only accepts Array', () => {
+ const { header } = wrapper.vm.$options.props;
+
+ expect(header.type).toBe(Array);
+ });
+
+ test('is required', () => {
+ const { header } = wrapper.vm.$options.props;
+
+ expect(header.required).toBe(true);
+ });
+
+ test('length should be bigger than 0', () => {
+ const { header } = wrapper.vm.$options.props;
+
+ expect(header.validator([])).toBe(false);
+ expect(header.validator([1])).toBe(true);
+ });
+ });
+
+ describe('body', () => {
+ test('only accepts Array', () => {
+ const { body } = wrapper.vm.$options.props;
+
+ expect(body.type).toBe(Array);
+ });
+
+ test('is required', () => {
+ const { body } = wrapper.vm.$options.props;
+
+ expect(body.required).toBe(true);
+ });
+
+ test('length should be bigger than 0', () => {
+ const { body } = wrapper.vm.$options.props;
+
+ expect(body.validator([])).toBe(false);
+ expect(body.validator([1])).toBe(true);
+ });
+ });
+
+ describe('align', () => {
+ test('only accepts String', () => {
+ const { align } = wrapper.vm.$options.props;
+
+ expect(align.type).toBe(String);
+ });
+
+ test('defaults to center', () => {
+ const { align } = wrapper.props();
+
+ expect(align).toBe('center');
+ });
+ });
+ });
+
+ describe('methods', () => {
+ describe('isComponent', () => {
+ test('false for random object', () => {
+ const object = {};
+ const { vm } = wrapper;
+
+ expect(vm.isComponent(object)).toBe(false);
+ });
+
+ test('true for object with property component', () => {
+ const object = { component: HdTable };
+ const { vm } = wrapper;
+
+ expect(vm.isComponent(object)).toBe(true);
+ });
+ });
+ });
+});
diff --git a/tests/unit/components/HdTimeslots.spec.js b/tests/unit/components/HdTimeslots.spec.js
new file mode 100644
index 000000000..83cb4be27
--- /dev/null
+++ b/tests/unit/components/HdTimeslots.spec.js
@@ -0,0 +1,86 @@
+import { mount } from '@vue/test-utils';
+import HdTimeslots from '@/components/HdTimeslots.vue';
+import generateSlots from '@/stories/HdTimeslots.stories';
+
+describe('HdTimeslots', () => {
+ let wrapper;
+ const testTimeslots = generateSlots(400, 20);
+ // the page is shorter then the timeslots quantity
+ const testTimeslotsPerPage = Math.floor(testTimeslots.length / 2);
+ const getDisplayedTimeslots = () => wrapper.findAll('.timeslots__slot');
+ const getDisplayedTimeslotsHtml = () => wrapper.findAll('.timeslots__slot').wrappers.reduce((acc, element) => acc + element.html(), '');
+
+ beforeEach(() => {
+ wrapper = mount(HdTimeslots, {
+ propsData: {
+ timeslots: testTimeslots,
+ timeslotsPerPage: testTimeslotsPerPage,
+ },
+ });
+ });
+
+ test.skip('renders component', () => {
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ test('once the component is mounted, the first slot is selected', () => {
+ const firstTimeslot = getDisplayedTimeslots().at(0);
+
+ expect(firstTimeslot.classes()).toContain('timeslots__slot--isSelected');
+ });
+
+ test('clicking on a timeslot, the timeslot selecting method is called', () => {
+ const mockedSelectTimeslot = jest.fn();
+ const displayedTimeslots = getDisplayedTimeslots();
+ const randomTimeslot = displayedTimeslots.at(Math.floor(Math.random() * displayedTimeslots.length));
+ wrapper.setMethods({ selectTimeslot: mockedSelectTimeslot });
+ randomTimeslot.trigger('click');
+
+ expect(mockedSelectTimeslot).toHaveBeenCalled();
+ });
+
+ test('clicking on a timeslot, the timeslot is selected', () => {
+ const displayedTimeslots = getDisplayedTimeslots();
+ const randomTimeslot = displayedTimeslots.at(Math.floor(Math.random() * displayedTimeslots.length));
+ randomTimeslot.trigger('click');
+
+ expect(randomTimeslot.classes()).toContain('timeslots__slot--isSelected');
+ });
+
+ test('clicking on arrows, the page change methods are called', () => {
+ const mockedFlipPage = jest.fn();
+ wrapper.setMethods({ flipPage: mockedFlipPage });
+ wrapper.find('.arrowButton--right').trigger('click');
+
+ expect(mockedFlipPage).toHaveBeenCalledTimes(1);
+
+ wrapper.find('.arrowButton--left').trigger('click');
+
+ expect(mockedFlipPage).toHaveBeenCalledTimes(2);
+ });
+
+ test('clicking on arrows, the page is changed', () => {
+ const initialTimeslotsListContent = getDisplayedTimeslotsHtml();
+ wrapper.find('.arrowButton--right').trigger('click');
+
+ expect(getDisplayedTimeslotsHtml()).not.toBe(initialTimeslotsListContent);
+
+ wrapper.find('.arrowButton--left').trigger('click');
+
+ expect(getDisplayedTimeslotsHtml()).toBe(initialTimeslotsListContent);
+ });
+
+ test('slots are displayed in the proper quantity', () => {
+ const { timeslots } = wrapper.vm.$options.props;
+
+ expect(timeslots.validator(Array.from(timeslots))).toBe(true);
+ expect(getDisplayedTimeslots().length).toBe(testTimeslotsPerPage);
+
+ // the page is now wider then the timeslots quantity
+ wrapper.setProps({ timeslotsPerPage: testTimeslots.length * 2 });
+
+ expect(getDisplayedTimeslots().length).toBe(testTimeslots.length);
+ // data validity check
+ expect(testTimeslots.length).toBeGreaterThan(0);
+ });
+});
diff --git a/tests/unit/components/HdToast.spec.js b/tests/unit/components/HdToast.spec.js
new file mode 100644
index 000000000..261686e2b
--- /dev/null
+++ b/tests/unit/components/HdToast.spec.js
@@ -0,0 +1,257 @@
+import { mount } from '@vue/test-utils';
+import HdToast from '@/components/HdToast.vue';
+
+describe('HdToast', () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = mount(HdToast);
+ });
+
+ test('renders component', () => {
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ test('renders component closed', () => {
+ const data = wrapper.vm.$data;
+
+ expect(data.isOpen).toBe(false);
+ });
+
+ test("'primaryLabel' text binds to primary
{{ item.label }}
+
+
+
+
+
+
+
+
{{ item.label }}
+{{ error }} +
+
+
+
+
+
+
+
+
+
diff --git a/src/components/form/HdTagsSelector.vue b/src/components/form/HdTagsSelector.vue
new file mode 100644
index 000000000..74a2cbce8
--- /dev/null
+++ b/src/components/form/HdTagsSelector.vue
@@ -0,0 +1,240 @@
+
+ {{ error }}
+ + +
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/gallery/HdGallery.vue b/src/components/gallery/HdGallery.vue
new file mode 100644
index 000000000..4cb1bef46
--- /dev/null
+++ b/src/components/gallery/HdGallery.vue
@@ -0,0 +1,99 @@
+
+ + {{ error }} +
+ + +
+
+
+
+
+
+
diff --git a/src/components/gallery/HdGalleryCarousel.vue b/src/components/gallery/HdGalleryCarousel.vue
new file mode 100644
index 000000000..9c29ddb21
--- /dev/null
+++ b/src/components/gallery/HdGalleryCarousel.vue
@@ -0,0 +1,407 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/gallery/HdGalleryMedia.vue b/src/components/gallery/HdGalleryMedia.vue
new file mode 100644
index 000000000..024ae0e26
--- /dev/null
+++ b/src/components/gallery/HdGalleryMedia.vue
@@ -0,0 +1,217 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ itemCaption || item.caption }}
+
+
+
+
+
+
+
+
diff --git a/src/components/gallery/HdGalleryPlaceholder.vue b/src/components/gallery/HdGalleryPlaceholder.vue
new file mode 100644
index 000000000..2b235fca3
--- /dev/null
+++ b/src/components/gallery/HdGalleryPlaceholder.vue
@@ -0,0 +1,77 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/notifications/HdNotifications.vue b/src/components/notifications/HdNotifications.vue
new file mode 100644
index 000000000..a04b4d776
--- /dev/null
+++ b/src/components/notifications/HdNotifications.vue
@@ -0,0 +1,125 @@
+
+
+ ![]()
+
+ + {{ text }} +
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/notifications/HdNotificationsBar.vue b/src/components/notifications/HdNotificationsBar.vue
new file mode 100644
index 000000000..d364061e8
--- /dev/null
+++ b/src/components/notifications/HdNotificationsBar.vue
@@ -0,0 +1,174 @@
+
+
+
+
+
+
+
+
diff --git a/src/lang/de.json b/src/lang/de.json
index c6e553d10..5e6278cd8 100644
--- a/src/lang/de.json
+++ b/src/lang/de.json
@@ -1,4 +1,10 @@
{
+ "GENERAL": {
+ "EDIT": "Bearbeiten",
+ "SAVE": "Speichern",
+ "CANCEL": "Abbrechen",
+ "SAVING": "Speichern"
+ },
"FORM": {
"EMAIL": {
"PLACEHOLDER": "z.b. michael.schmidt@gmail.com",
@@ -11,6 +17,7 @@
"VALIDATION": {
"REQUIRED": "Dies ist ein Pflichtfeld.",
"INVALID_EMAIL": "Bitte geben Sie eine korrekte E-Mail-Adresse ein.",
+ "INVALID_DATE": "Bitte geben Sie ein Datum in diesem Format ein: JJJJ-MM-TT",
"PASSWORD_MISMATCH": "Dies stimmt nicht mit dem obigen Passwort überein",
"PASSWORD_SHORT": "Dieses Passwort ist zu kurz",
"PASSWORD_STRENGTH": {
@@ -23,5 +30,11 @@
]
}
}
+ },
+ "EXPAND_TEXT": {
+ "TOGGLE": {
+ "SHOW_MORE": "weiterlesen",
+ "SHOW_LESS": "zuklappen"
+ }
}
}
diff --git a/src/lang/en.json b/src/lang/en.json
index f0f4224ee..df7f47008 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1,4 +1,10 @@
{
+ "GENERAL": {
+ "EDIT": "Edit",
+ "SAVE": "Save",
+ "CANCEL": "Cancel",
+ "SAVING": "Saving"
+ },
"FORM": {
"EMAIL": {
"PLACEHOLDER": "e.g. will.smith@gmail.com",
@@ -11,6 +17,7 @@
"VALIDATION": {
"REQUIRED": "This field is required",
"INVALID_EMAIL": "Please enter a valid email address",
+ "INVALID_DATE": "Please enter a date in this format: YYYY-MM-DD",
"PASSWORD_MISMATCH": "The entered passwords are not matching",
"PASSWORD_SHORT": "This password is too short",
"PASSWORD_STRENGTH": {
@@ -23,5 +30,11 @@
]
}
}
+ },
+ "EXPAND_TEXT": {
+ "TOGGLE": {
+ "SHOW_MORE": "show more",
+ "SHOW_LESS": "show less"
+ }
}
}
diff --git a/src/notes/HdNotifications.md b/src/notes/HdNotifications.md
new file mode 100644
index 000000000..a7293ed72
--- /dev/null
+++ b/src/notes/HdNotifications.md
@@ -0,0 +1,57 @@
+Sample Vuex store module:
+
+```js
+import uuidv4 from 'uuid/v4';
+import Vue from 'vue';
+
+const NOTIFICATION_DEFAULTS = {
+ type: 'notification',
+ message: '',
+ duration: 5000,
+ customIcon: '',
+};
+
+export default {
+ state: {
+ notifications: [],
+ },
+ actions: {
+ addNotification({ commit, dispatch, state }, {
+ type = NOTIFICATION_DEFAULTS.type,
+ message = NOTIFICATION_DEFAULTS.message,
+ customIcon = NOTIFICATION_DEFAULTS.customIcon,
+ // For how long should the notification be displayed before it hides itself
+ // Set to 0 for a permanent notification
+ duration = NOTIFICATION_DEFAULTS.duration,
+ }) {
+ const notification = {
+ type,
+ message,
+ customIcon,
+ id: uuidv4(),
+ };
+
+ commit('setNotifications', [...state.notifications, notification]);
+
+ if (duration > 0) {
+ setTimeout(() => {
+ dispatch('removeNotification', {
+ id: notification.id,
+ });
+ }, duration);
+ }
+
+ return notification.id;
+ },
+ removeNotification({ commit, state }, { id: idToRemove }) {
+ const filteredNotifications = state.notifications.filter(({ id }) => id !== idToRemove);
+ commit('setNotifications', filteredNotifications);
+ },
+ },
+ mutations: {
+ setNotifications(state, notifications) {
+ Vue.set(state, 'notifications', notifications);
+ },
+ },
+};
+```
\ No newline at end of file
diff --git a/src/notes/HdRadioButton.md b/src/notes/HdRadioButton.md
deleted file mode 100644
index b615d65e7..000000000
--- a/src/notes/HdRadioButton.md
+++ /dev/null
@@ -1,2 +0,0 @@
-## Radio Button
-State of art Radio Button for all you important choices
\ No newline at end of file
diff --git a/src/services/breakpoints.js b/src/services/breakpoints.js
new file mode 100644
index 000000000..f8511c0a1
--- /dev/null
+++ b/src/services/breakpoints.js
@@ -0,0 +1,21 @@
+const BREAKPOINT_TABLET = '(min-width:768px)';
+const BREAKPOINT_DESKTOP = '(min-width:1280px)';
+
+let breakpoints = {
+ tablet: BREAKPOINT_TABLET,
+ desktop: BREAKPOINT_DESKTOP,
+};
+
+export const isMobile = () => !window.matchMedia(breakpoints.tablet).matches;
+export const isDesktop = () => window.matchMedia(breakpoints.desktop).matches;
+export const isTablet = () => !isDesktop() && window.matchMedia(breakpoints.tablet).matches;
+export const setBreakpoints = (newBreakpoints) => {
+ breakpoints = { ...breakpoints, ...newBreakpoints };
+};
+
+export default {
+ isMobile,
+ isTablet,
+ isDesktop,
+ setBreakpoints,
+};
diff --git a/src/services/event-emitter.js b/src/services/event-emitter.js
new file mode 100644
index 000000000..f94b08a61
--- /dev/null
+++ b/src/services/event-emitter.js
@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+const EventEmitter = new Vue();
+
+export default EventEmitter;
diff --git a/src/services/flickity.js b/src/services/flickity.js
new file mode 100644
index 000000000..268caa954
--- /dev/null
+++ b/src/services/flickity.js
@@ -0,0 +1,16 @@
+export function hidePaginationWhenNotNeeded() {
+ const viewport = this.size.width;
+ const fullSize = Math.round(this.slideableWidth);
+
+ if (fullSize > viewport) {
+ this.bindDrag();
+ this.element.classList.remove('flickity--no-controls');
+ } else if (fullSize <= viewport) {
+ this.unbindDrag();
+ this.element.classList.add('flickity--no-controls');
+ }
+}
+
+export default {
+ hidePaginationWhenNotNeeded,
+};
diff --git a/src/services/formValidation.js b/src/services/formValidation.js
index b268a9704..251fb725a 100644
--- a/src/services/formValidation.js
+++ b/src/services/formValidation.js
@@ -1,9 +1,16 @@
-function email(string) {
+export function email(string) {
// eslint-disable-next-line
const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return regex.test(string.toLowerCase());
}
+export function date(string) {
+ // eslint-disable-next-line
+ const regex = /[0-9]{4}-[0-9]{2}-[0-9]{2}/;
+ return regex.test(string);
+}
+
export default {
email,
+ date,
};
diff --git a/src/services/on-resize.js b/src/services/on-resize.js
new file mode 100644
index 000000000..4fab9789c
--- /dev/null
+++ b/src/services/on-resize.js
@@ -0,0 +1,35 @@
+import EventEmitter from '@/services/event-emitter';
+import throttle from 'lodash/throttle';
+import debounce from 'lodash/debounce';
+
+const throttledResize = throttle(() => {
+ EventEmitter.$emit('resize.throttled');
+}, 100);
+const debouncedResize = debounce(() => {
+ EventEmitter.$emit('resize.debounced');
+}, 300);
+
+window.addEventListener('resize', () => {
+ throttledResize();
+ debouncedResize();
+}, false);
+
+window.addEventListener('orientationchange', () => {
+ throttledResize();
+ debouncedResize();
+}, false);
+
+export default {
+ onThrottled: (cb) => {
+ EventEmitter.$on('resize.throttled', cb);
+ },
+ offThrottled: (cb) => {
+ EventEmitter.$off('resize.throttled', cb);
+ },
+ onDebounced: (cb) => {
+ EventEmitter.$on('resize.debounced', cb);
+ },
+ offDebounced: (cb) => {
+ EventEmitter.$off('resize.debounced', cb);
+ },
+};
diff --git a/src/services/utils.js b/src/services/utils.js
index 3b59a1f4c..173031209 100644
--- a/src/services/utils.js
+++ b/src/services/utils.js
@@ -20,26 +20,22 @@ export function populateTemplate(template, map) {
return template.replace(regex, match => map[match.slice(1)]);
}
-/** Takes a formData object and returns a formatted object, supports nesting
+/** Takes a data object and returns a nested object based on the keys and the nestingString
*/
-export function formatFormData(formData, { nestingEnabled = false, nestingString = '.' } = {}) {
+export function formatNestedData(data, nestingString = '.') {
const formattedObj = {};
- Object.keys(formData).forEach((fieldKey) => {
- const { value } = formData[fieldKey];
- if (!nestingEnabled) {
- formattedObj[fieldKey] = value;
- } else {
- const keys = fieldKey.split(nestingString);
- const nestedSubObj = keys.reverse().reduce((acc, currentKey, index) => {
- if (index === 0) {
- acc[currentKey] = value;
- return acc;
- }
- acc = merge({}, { [currentKey]: acc });
+ Object.keys(data).forEach((fieldKey) => {
+ const value = data[fieldKey];
+ const keys = fieldKey.split(nestingString);
+ const nestedSubObj = keys.reverse().reduce((acc, currentKey, index) => {
+ if (index === 0) {
+ acc[currentKey] = value;
return acc;
- }, {});
- merge(formattedObj, nestedSubObj);
- }
+ }
+ acc = merge({}, { [currentKey]: acc });
+ return acc;
+ }, {});
+ merge(formattedObj, nestedSubObj);
});
return formattedObj;
}
@@ -94,11 +90,17 @@ export const loadJSAsync = (e, n, o) => {
}, !1), r.parentNode.insertBefore(i, r)
};
+// Returns an array of the desired length filled with indexes as values
+export function getArrayOfSize(size = 0) {
+ return Array.from(Array(size), (_, x) => x);
+}
+
export default {
populateTemplate,
getPasswordStrength,
- formatFormData,
+ formatNestedData,
getRandomInt,
loadJSAsync,
accentFold,
+ getArrayOfSize,
};
diff --git a/src/stories/HdArrowButton.stories.js b/src/stories/HdArrowButton.stories.js
new file mode 100644
index 000000000..e15df4b32
--- /dev/null
+++ b/src/stories/HdArrowButton.stories.js
@@ -0,0 +1,60 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import {
+ withKnobs, select, boolean,
+} from '@storybook/addon-knobs';
+
+import HdArrowButton from 'hd-blocks/components/buttons/HdArrowButton.vue';
+
+storiesOf('HdArrowButton', module)
+ .addDecorator(withKnobs)
+ .add('right', () => ({
+ components: { HdArrowButton },
+ data() {
+ return {
+ direction: 'right',
+ };
+ },
+ template: `
+ ![]()
+
+
+
+
+
+ Chuck
+
+
+ Norris
+
+
+ 79
+
+
+
+ `,
+ }));
diff --git a/src/stories/HdDynamicForm.stories.js b/src/stories/HdDynamicForm.stories.js
index 54d2a5564..7895d08d5 100644
--- a/src/stories/HdDynamicForm.stories.js
+++ b/src/stories/HdDynamicForm.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/vue';
import HdDynamicForm from 'hd-blocks/components/form/HdDynamicForm.vue';
import FormWrapper from 'hd-blocks/storiesWrappers/FormWrapper';
-import { formatFormData } from 'hd-blocks/services/utils';
+import { formatNestedData } from 'hd-blocks/services/utils';
import CONFIG from './mocks/forms';
storiesOf('Form/HdDynamicForm', module)
@@ -17,54 +17,74 @@ storiesOf('Form/HdDynamicForm', module)
};
},
methods: {
- onSubmit(formData) {
- console.log('formData', formData);
- console.log('Formatted formData (nesting enabled)', formatFormData(formData, { nestingEnabled: true }));
+ onSubmit({ data, isValid, invalidFields }) {
+ console.log('invalidFields', invalidFields);
+ console.log('isValid', isValid);
+ console.log('data', data);
+ console.log(
+ 'Nested data',
+ formatNestedData(data),
+ );
},
},
}))
.add('signup', () => ({
components: { HdDynamicForm },
- template: 'First Name:{{ firstName }}
+Last Name:{{ lastName }}
+ +
+
+ Ullamco. Cillum velit error, aliqua magni yet magni aute. Ad
+ velitesse, for eius nesciunt eaque, et. Aute quia dolores. Quo aute.
+ Minima incidunt nor in ea. Ullamco nihil, yet iste laboriosam nisi.
+ Incididunt. Perspiciatis nisi or culpa. Qui qui magnam so et but
+ labore so ullamco. Laudantium ea eiusmod, but lorem. Nesciunt cillum
+ nesciunt but consequat incidunt aspernatur. Voluptate consequatur.
+ Nequeporro. Quia. Quaerat aliquip, but unde, and perspiciatis adipisci
+ duis. Excepteur quam nor irure and aliquid or laboris, quis ipsum.
+ Doloremque beatae, beatae.
+
+
+ `,
+ }))
+ .add('custom translation', () => ({
+ components: { HdExpandText },
+ props: {
+ lines: {
+ type: Number,
+ default: number('Lines', 4, {
+ range: true,
+ min: 1,
+ max: 20,
+ step: 1,
+ }),
+ },
+ linesMobile: {
+ type: Number,
+ default: number('Lines Mobile', 3, {
+ range: true,
+ min: 1,
+ max: 20,
+ step: 1,
+ }),
+ },
+ },
+ data() {
+ return {
+ value: '',
+ texts: {
+ EXPAND_TEXT: {
+ TOGGLE: {
+ SHOW_MORE: 'I need more!',
+ SHOW_LESS: 'Ughh... Close it please',
+ },
+ },
+ },
+ };
+ },
+ template: `
+
+
+ Ullamco. Cillum velit error, aliqua magni yet magni aute. Ad
+ velitesse, for eius nesciunt eaque, et. Aute quia dolores. Quo aute.
+ Minima incidunt nor in ea. Ullamco nihil, yet iste laboriosam nisi.
+ Incididunt. Perspiciatis nisi or culpa. Qui qui magnam so et but
+ labore so ullamco. Laudantium ea eiusmod, but lorem. Nesciunt cillum
+ nesciunt but consequat incidunt aspernatur. Voluptate consequatur.
+ Nequeporro. Quia. Quaerat aliquip, but unde, and perspiciatis adipisci
+ duis. Excepteur quam nor irure and aliquid or laboris, quis ipsum.
+ Doloremque beatae, beatae.
+
+
+ `,
+ }));
diff --git a/src/stories/HdGallery.stories.js b/src/stories/HdGallery.stories.js
new file mode 100644
index 000000000..469226f8c
--- /dev/null
+++ b/src/stories/HdGallery.stories.js
@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+
+import HdGallery from 'hd-blocks/components/gallery/HdGallery.vue';
+import ITEMS from './mocks/GALLERY_ITEMS';
+
+storiesOf('HdGallery', module)
+ .add('default', () => ({
+ components: { HdGallery },
+ template: `
+
+
+ `,
+ data() {
+ return {
+ items: ITEMS,
+ };
+ },
+ methods: {
+ onInput(value) {
+ action('input')(value);
+ },
+ },
+ }));
diff --git a/src/stories/HdInfoBox.stories.js b/src/stories/HdInfoBox.stories.js
new file mode 100644
index 000000000..145e2545c
--- /dev/null
+++ b/src/stories/HdInfoBox.stories.js
@@ -0,0 +1,12 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+
+import HdInfoBox from 'hd-blocks/components/HdInfoBox.vue';
+
+storiesOf('HdInfoBox', module)
+ .add('default', () => ({
+ components: { HdInfoBox },
+ template: `
+
+
+ `,
+ data() {
+ return {
+ notifications: [
+ {
+ id: 0,
+ message: 'Hello world!, This is a link...',
+ },
+ ],
+ };
+ },
+ computed: {
+ transformedNotifications() {
+ return this.notifications.map(notification => ({
+ ...notification,
+ type: this.type,
+ }));
+ },
+ },
+ methods: {
+ onRoute(route) {
+ action('route')(route);
+ },
+ onHeightChange(height) {
+ action('heightChange')(height);
+ },
+ },
+ }), {
+ notes: {
+ markdown: HdNotificationsNote,
+ },
+ })
+ .add('custom icon', () => ({
+ components: { HdNotifications },
+ props: {
+ type: {
+ type: String,
+ default: select(
+ 'Type',
+ [
+ 'notification',
+ 'success',
+ 'error',
+ 'warning',
+ ],
+ 'warning',
+ ),
+ },
+ },
+ template: `
+
+
+ `,
+ data() {
+ return {
+ notifications: [
+ {
+ id: 0,
+ message: 'Hello world!, This is a link...',
+ },
+ ],
+ // eslint-disable-next-line global-require
+ customIcon: require('./assets/homeday-icon.svg'),
+ };
+ },
+ computed: {
+ transformedNotifications() {
+ return this.notifications.map(notification => ({
+ ...notification,
+ type: this.type,
+ customIcon: this.customIcon,
+ }));
+ },
+ },
+ methods: {
+ onRoute(route) {
+ action('route')(route);
+ },
+ onHeightChange(height) {
+ action('heightChange')(height);
+ },
+ },
+ }));
diff --git a/src/stories/HdPager.stories.js b/src/stories/HdPager.stories.js
new file mode 100644
index 000000000..13bca2acc
--- /dev/null
+++ b/src/stories/HdPager.stories.js
@@ -0,0 +1,43 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { number } from '@storybook/addon-knobs';
+
+import HdPager from 'hd-blocks/components/HdPager.vue';
+
+storiesOf('HdPager', module)
+ .add('default', () => ({
+ components: { HdPager },
+ props: {
+ count: {
+ type: Number,
+ default: number('Count', 10),
+ },
+ maxVisible: {
+ type: Number,
+ default: number('Max Visible', 7, {
+ range: true,
+ min: 3,
+ max: 20,
+ step: 1,
+ }),
+ },
+ },
+ template: `
+
+
+ `,
+ methods: {
+ check() {
+ this.valid = this.$refs.password.validate();
+ },
+ },
data() {
return {
- min: number('min', 6),
+ password: '',
+ valid: false,
};
},
}))
- .add('with strength UI', () => ({
+ .add('with strength bar style', () => ({
components: { HdPasswordConfirm },
- template: 'Is valid: {{ valid }}
+
-
+
+
`,
- methods: {
- onDataChange({ value, error }) {
- this.radioData = { value, error };
+ data() {
+ return {
+ value: '',
+ ITEMS,
+ };
+ },
+ watch: {
+ value(value) {
+ action('input')(value);
},
+ },
+ methods: {
validate() {
- this.$refs.myRadio.validityCheck();
- if (this.radioData.error) {
+ const isValid = this.$refs.myRadio.validate();
+
+ if (!isValid) {
console.log('Not Valid');
} else {
- console.log(`Valid! You selected: ${this.radioData.value}`);
+ console.log(`Valid! You selected: ${this.value}`);
}
},
},
- data() {
- return {
- ITEMS,
- radioData: null,
- };
- },
}))
.add('preselected', () => ({
components: { HdRadio },
- template: '
+
+ `,
data() {
return {
+ value: ITEMS[2].value,
ITEMS,
};
},
+ watch: {
+ value(value) {
+ action('input')(value);
+ },
+ },
}))
.add('vertical', () => ({
components: { HdRadio },
- template: '
+
+ `,
data() {
return {
+ value: '',
ITEMS,
};
},
+ watch: {
+ value(value) {
+ action('input')(value);
+ },
+ },
}));
diff --git a/src/stories/HdRadioButton.stories.js b/src/stories/HdRadioButton.stories.js
index 8cdcbff42..e941ba160 100644
--- a/src/stories/HdRadioButton.stories.js
+++ b/src/stories/HdRadioButton.stories.js
@@ -2,21 +2,11 @@
import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
-
import HdRadioButton from 'hd-blocks/components/buttons/HdRadioButton.vue';
-import HdRadioButtonNote from '../notes/HdRadioButton.md';
storiesOf('HdRadioButton', module)
.add('base', () => ({
components: { HdRadioButton },
- data: () => ({
- label: text('label', 'Test Label'),
- desktopIcon: text('desktopIcon', 'https://via.placeholder.com/96'),
- desktopIconHover: text('desktopIconHover', 'https://via.placeholder.com/96?text=Hover'),
- mobileIcon: text('mobileIcon', 'https://via.placeholder.com/96'),
- value: text('value', 'Value'),
- name: text('name', 'Name'),
- }),
template: `
+
+ `,
+ data() {
+ return {
+ value: '',
+ ITEMS,
+ };
+ },
+ watch: {
+ value(value) {
+ action('input')(value);
+ },
+ },
+ methods: {
+ validate() {
+ const isValid = this.$refs.myRadio.validate();
+
+ if (!isValid) {
+ console.log('Not Valid');
+ } else {
+ console.log(`Valid! You selected: ${this.value}`);
+ }
+ },
+ },
+ }))
+ .add('preselected', () => ({
+ components: { HdSelect },
+ template: `
+
+
+ `,
+ data() {
+ return {
+ value: ITEMS[2].value,
+ ITEMS,
+ };
+ },
+ watch: {
+ value(value) {
+ action('input')(value);
+ },
+ },
+ }));
diff --git a/src/stories/HdTable.stories.js b/src/stories/HdTable.stories.js
index 582ea7b1e..bc543880d 100644
--- a/src/stories/HdTable.stories.js
+++ b/src/stories/HdTable.stories.js
@@ -2,7 +2,7 @@
import { storiesOf } from '@storybook/vue';
import HdTable from 'hd-blocks/components/HdTable.vue';
-import HdInput from 'hd-blocks/components/form/HdInput.vue';
+import HdTagsList from 'hd-blocks/components/HdTagsList.vue';
import TableWrapper from 'hd-blocks/storiesWrappers/TableWrapper';
import MOVIES_TABLE from 'hd-blocks/stories/mocks/tables/movies';
@@ -45,7 +45,10 @@ storiesOf('HdTable', module)
},
}))
.add('with components', () => ({
- components: { HdTable, HdInput },
+ components: {
+ HdTable,
+ HdTagsList,
+ },
template: '
+
+ `,
+ data() {
+ return {
+ value: '',
+ items: ITEMS,
+ };
+ },
+ watch: {
+ value(value) {
+ action('input')(value);
+ },
+ },
+ }));
diff --git a/src/stories/HdTagsList.stories.js b/src/stories/HdTagsList.stories.js
new file mode 100644
index 000000000..6934b0700
--- /dev/null
+++ b/src/stories/HdTagsList.stories.js
@@ -0,0 +1,23 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { array } from '@storybook/addon-knobs';
+
+import HdTagsList from 'hd-blocks/components/HdTagsList.vue';
+import ITEMS from './mocks/FORM_ITEMS';
+
+
+storiesOf('HdTagsList', module)
+ .add('default', () => ({
+ components: { HdTagsList },
+ template: `
+
- {{text}}
+ {{text}}
+
+
+ `,
+ methods: {
+ primaryClick: action('primaryClick'),
+ },
+ }), {
+ knobs: {
+ escapeHTML: false,
+ },
+ })
+ .add('Secondary only', () => ({
+ components: { HdToast },
+ data: () => ({
+ text: text('Toast text', 'Random text'),
+ }),
+ template: `
+
+ {{text}}
+
+
+ `,
+ methods: {
+ onClose: action('closed'),
+ primaryClick: action('primaryClick'),
+ secondaryClick: action('secondaryClick'),
+ },
+ }), {
+ knobs: {
+ escapeHTML: false,
+ },
+ })
+ .add('Complete', () => ({
+ components: { HdToast },
+ data: () => ({
+ text: text('Toast text', 'Random text'),
+ }),
+ template: `
+
+ {{text}}
`,
diff --git a/src/stories/assets/homeday-icon.svg b/src/stories/assets/homeday-icon.svg
new file mode 100644
index 000000000..32a160b3b
--- /dev/null
+++ b/src/stories/assets/homeday-icon.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/stories/mocks/FORM_ITEMS.js b/src/stories/mocks/FORM_ITEMS.js
new file mode 100644
index 000000000..8c4853a79
--- /dev/null
+++ b/src/stories/mocks/FORM_ITEMS.js
@@ -0,0 +1,22 @@
+export default [
+ {
+ label: 'Jon "Snow"',
+ value: 'jon',
+ },
+ {
+ label: 'Daenerys',
+ value: 'daenerys',
+ },
+ {
+ label: 'The Night King',
+ value: 'nightKing',
+ },
+ {
+ label: 'Arya',
+ value: 'arya',
+ },
+ {
+ label: 'Cersei',
+ value: 'cersei',
+ },
+];
diff --git a/src/stories/mocks/GALLERY_ITEMS.js b/src/stories/mocks/GALLERY_ITEMS.js
new file mode 100644
index 000000000..f892fc3f0
--- /dev/null
+++ b/src/stories/mocks/GALLERY_ITEMS.js
@@ -0,0 +1,67 @@
+export default [
+ {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fadc5cc05-4b0c-4b85-b324-a115358e405e-1262338255.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=c6f8884b2baee1486134be70817b4a65',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fadc5cc05-4b0c-4b85-b324-a115358e405e-1262338255.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=ffc3431ee910b43c98c8c0b2128dd52d',
+ caption: 'Some title',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F9ce77ae5-f5cb-4529-a828-4e60b4fe179a-1262338250.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=b14e660c69dcde4ec7785765bca30f19',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F9ce77ae5-f5cb-4529-a828-4e60b4fe179a-1262338250.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=8f172444a4ab72d28988eb38733aae07',
+ caption: '__vue_devtool_undefined__',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F744996e5-fec2-4a02-98e7-c2ce1e722946-1262338252.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=900&h=1600&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=62f7a5210386e4bb7d6f5fe82a126126',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F744996e5-fec2-4a02-98e7-c2ce1e722946-1262338252.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=210&h=372&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=a999b86e7d7e3122bb7a633296d57e81',
+ caption: 'Some other title',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F2c7d0043-4dd3-4172-aefa-a42b048dde14-1262338251.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=1c4c05d190155b19ad26a4bd98d8b84b',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F2c7d0043-4dd3-4172-aefa-a42b048dde14-1262338251.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=27c8ed1fd9215cbdc1d243992cf803c2',
+ caption: 'Kitchen',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F048ef2e1-c561-4eff-8a6b-b74b4af3ad18-1262338249.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=900&h=1600&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=54d18d6e993067e33c54c40b8d4eff5a',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F048ef2e1-c561-4eff-8a6b-b74b4af3ad18-1262338249.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=210&h=372&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=eec9caf224545e117240263010004cd9',
+ caption: 'Living room',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fae1c317a-5fc2-48da-9bd5-20fb1d9e22a9-1262338256.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=29c732eb84f4ad7143931e294d477709',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fae1c317a-5fc2-48da-9bd5-20fb1d9e22a9-1262338256.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=f9b31e5c5c4a6a9b23b3a45ab48b7a25',
+ caption: 'Cellar',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F63d89792-c618-4af3-a402-701e7fe8e050-1262338258.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=9be8bccda6af948f3dc808aa3b3d9a7d',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F63d89792-c618-4af3-a402-701e7fe8e050-1262338258.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=fe3904552f03982c10763b5e0fc54d96',
+ caption: '__vue_devtool_undefined__',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fa1e235f4-2a42-4242-9a8e-2a3eeca6268b-1262338261.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=900&h=1600&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=233c9ca90ddf8d0c01a5ed8f512dfff4',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fa1e235f4-2a42-4242-9a8e-2a3eeca6268b-1262338261.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=210&h=372&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=bcb0e01b67e67e038b23e0fd6ba7c2b9',
+ caption: '__vue_devtool_undefined__',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fadc5cc05-4b0c-4b85-b324-a115358e405e-1262338255.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=c6f8884b2baee1486134be70817b4a65',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fadc5cc05-4b0c-4b85-b324-a115358e405e-1262338255.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=ffc3431ee910b43c98c8c0b2128dd52d',
+ caption: 'Some title',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F9ce77ae5-f5cb-4529-a828-4e60b4fe179a-1262338250.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=b14e660c69dcde4ec7785765bca30f19',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F9ce77ae5-f5cb-4529-a828-4e60b4fe179a-1262338250.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=8f172444a4ab72d28988eb38733aae07',
+ caption: 'Some title',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F744996e5-fec2-4a02-98e7-c2ce1e722946-1262338252.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=900&h=1600&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=62f7a5210386e4bb7d6f5fe82a126126',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F744996e5-fec2-4a02-98e7-c2ce1e722946-1262338252.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=210&h=372&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=a999b86e7d7e3122bb7a633296d57e81',
+ caption: 'Some title',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F2c7d0043-4dd3-4172-aefa-a42b048dde14-1262338251.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=1c4c05d190155b19ad26a4bd98d8b84b',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F2c7d0043-4dd3-4172-aefa-a42b048dde14-1262338251.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=27c8ed1fd9215cbdc1d243992cf803c2',
+ caption: 'Some title',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F048ef2e1-c561-4eff-8a6b-b74b4af3ad18-1262338249.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=900&h=1600&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=54d18d6e993067e33c54c40b8d4eff5a',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F048ef2e1-c561-4eff-8a6b-b74b4af3ad18-1262338249.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=210&h=372&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=eec9caf224545e117240263010004cd9',
+ caption: 'Some title',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fae1c317a-5fc2-48da-9bd5-20fb1d9e22a9-1262338256.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=29c732eb84f4ad7143931e294d477709',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fae1c317a-5fc2-48da-9bd5-20fb1d9e22a9-1262338256.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=f9b31e5c5c4a6a9b23b3a45ab48b7a25',
+ caption: 'Some title',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F63d89792-c618-4af3-a402-701e7fe8e050-1262338258.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=1600&h=900&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=9be8bccda6af948f3dc808aa3b3d9a7d',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2F63d89792-c618-4af3-a402-701e7fe8e050-1262338258.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=372&h=210&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=fe3904552f03982c10763b5e0fc54d96',
+ caption: 'Some title',
+ }, {
+ image: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fa1e235f4-2a42-4242-9a8e-2a3eeca6268b-1262338261.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=900&h=1600&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=233c9ca90ddf8d0c01a5ed8f512dfff4',
+ thumbnail: 'https://homeday.imgix.net/https%3A%2F%2Fpictures.immobilienscout24.de%2Flistings%2Fa1e235f4-2a42-4242-9a8e-2a3eeca6268b-1262338261.jpg%2FORIG%2Fformat%2Fjpg%2Fquality%2F80?w=210&h=372&fit=crop&crop=focalpoint&ixlib=js-1.2.0&s=bcb0e01b67e67e038b23e0fd6ba7c2b9',
+ caption: 'Some title',
+ },
+];
diff --git a/src/stories/mocks/MENU_ITEMS.js b/src/stories/mocks/MENU_ITEMS.js
new file mode 100644
index 000000000..8c4853a79
--- /dev/null
+++ b/src/stories/mocks/MENU_ITEMS.js
@@ -0,0 +1,22 @@
+export default [
+ {
+ label: 'Jon "Snow"',
+ value: 'jon',
+ },
+ {
+ label: 'Daenerys',
+ value: 'daenerys',
+ },
+ {
+ label: 'The Night King',
+ value: 'nightKing',
+ },
+ {
+ label: 'Arya',
+ value: 'arya',
+ },
+ {
+ label: 'Cersei',
+ value: 'cersei',
+ },
+];
diff --git a/src/stories/mocks/RADIOS.js b/src/stories/mocks/RADIOS.js
deleted file mode 100644
index 8f9b38262..000000000
--- a/src/stories/mocks/RADIOS.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default [
- {
- label: 'Green',
- value: 'green',
- },
- {
- label: 'Blue',
- value: 'blue',
- },
- {
- label: 'Red',
- value: 'red',
- },
- {
- label: 'Yellow',
- value: 'yellow',
- },
-];
diff --git a/src/stories/mocks/forms/PROFILE.js b/src/stories/mocks/forms/PROFILE.js
index 34f98b7a8..d00dadb60 100644
--- a/src/stories/mocks/forms/PROFILE.js
+++ b/src/stories/mocks/forms/PROFILE.js
@@ -2,9 +2,9 @@ export default [
{
type: 'radio',
name: 'gender',
+ initialValue: 'male',
props: {
required: true,
- selected: 'male',
items: [
{
label: 'Female',
@@ -20,9 +20,9 @@ export default [
{
type: 'input',
name: 'first_name',
+ initialValue: 'First name',
props: {
required: true,
- value: 'First name',
label: 'Vorname',
placeholder: 'First name...',
},
@@ -30,9 +30,9 @@ export default [
{
type: 'input',
name: 'last_name',
+ initialValue: 'Last name',
props: {
required: true,
- value: 'Last name',
label: 'Nachname',
placeholder: 'Last name...',
},
@@ -40,9 +40,9 @@ export default [
{
type: 'input',
name: 'email',
+ initialValue: 'kontakt@homeday.de',
props: {
required: true,
- value: 'kontakt@homeday.de',
type: 'email',
label: 'E-Mail-Adresse',
placeholder: 'Email...',
@@ -51,9 +51,9 @@ export default [
{
type: 'input',
name: 'landline_number',
+ initialValue: '',
props: {
required: false,
- value: '',
type: 'tel',
label: 'Telefonnummer',
placeholder: 'Lanline number...',
@@ -62,9 +62,9 @@ export default [
{
type: 'input',
name: 'mobile_number',
+ initialValue: '030 120 849 110',
props: {
required: true,
- value: '030 120 849 110',
type: 'tel',
label: 'Handynummer',
placeholder: 'Phone number...',
@@ -73,9 +73,9 @@ export default [
{
type: 'input',
name: 'address.street',
+ initialValue: 'Prinzessinnenstraße',
props: {
required: false,
- value: 'Prinzessinnenstraße',
type: 'text',
label: 'Straße',
placeholder: 'Street...',
@@ -85,9 +85,9 @@ export default [
{
type: 'input',
name: 'address.house_number',
+ initialValue: '26',
props: {
required: false,
- value: '26',
type: 'text',
label: 'Hausnummer',
placeholder: 'House number...',
@@ -96,9 +96,9 @@ export default [
{
type: 'input',
name: 'address.zip_code',
+ initialValue: '10969',
props: {
required: false,
- value: '10969',
type: 'text',
label: 'PLZ',
placeholder: 'Zip code...',
@@ -108,9 +108,9 @@ export default [
{
type: 'input',
name: 'address.city',
+ initialValue: 'Berlin',
props: {
required: false,
- value: 'Berlin',
type: 'text',
label: 'Ort',
placeholder: 'City...',
diff --git a/src/storiesWrappers/FormWrapper.js b/src/storiesWrappers/FormWrapper.js
index eacf018fc..d153cf587 100644
--- a/src/storiesWrappers/FormWrapper.js
+++ b/src/storiesWrappers/FormWrapper.js
@@ -1,5 +1,3 @@
-export default function FormWrapper() {
- return {
- template: '