hr-design-system-handlebars 1.113.10 → 1.113.12

package/src/stories/views/components/voting/js/votingDs.feature.js

@@ -0,0 +1,214 @@
+import { hr$, listen, replaceAnimated } from 'hrQuery'
+import $ from 'zepto-modules'
+
+require('zepto-modules/callbacks')
+require('zepto-modules/deferred')
+
+const Voting = (context) => {
+    const { options } = context
+    const { element: rootElement } = context
+    const jsonUrl = options.jsonURL,
+        votingWrapper = hr$('.js-voting-wrapper', rootElement)[0],
+        votingTmpl = votingWrapper.innerHTML,
+        ajaxTimeout = 60 * 1000,
+        responseFormatParam = 'rf=inline'
+    let ajaxOptions,
+        votingForm = hr$('.js-votingForm', rootElement)[0],
+        actionUrl = votingForm && votingForm.getAttribute('action'),
+        isPosting = false,
+        responseStatus,
+        validationErrors
+
+    const checkForJsonUrl = function () {
+        if (jsonUrl) {
+            actionUrl = jsonUrl
+        }
+    }
+
+    const handleSubmit = function (event) {
+        if (event.target.matches('.js-votingForm')) {
+            submitForm(event)
+        }
+    }
+    const submitForm = function (event) {
+        event.preventDefault()
+
+        if (isPosting) {
+            return
+        } else {
+            isPosting = true
+        }
+
+        //jedes mal neu holen,
+        //da das DOM mit innerHTML ersetzt wird
+        votingForm = hr$('.js-votingForm', rootElement)[0]
+
+        console.log('DATA: ' + $(votingForm).serialize())
+        setAjaxOptions()
+
+        $.ajax(ajaxOptions)
+
+            //Add handlers to be called when the Deferred object is resolved.
+            .done(function (data, status, xhr) {
+                console.log('Done')
+                console.log(data)
+
+                if (jsonUrl) {
+                    responseStatus = JSON.parse(data).status
+                    switch (responseStatus) {
+                        case 'VALIDATION_ERROR':
+                            console.log('Validation Error')
+                            validationErrors = JSON.parse(data).errors
+                            handleValidationErrors(validationErrors)
+                            break
+                        case 'SERVER_ERROR':
+                            replaceAnimated(
+                                votingWrapper,
+                                hr$('.js-errorMessage', rootElement)[0].innerHTML,
+                                true,
+                                scrollIntoVoting
+                            )
+                            break
+                        case 'OK':
+                            replaceAnimated(
+                                votingWrapper,
+                                hr$('.js-successMessage', rootElement)[0].innerHTML,
+                                true,
+                                scrollIntoVoting
+                            )
+                            break
+                        default:
+                            replaceAnimated(
+                                votingWrapper,
+                                hr$('.js-errorMessage', rootElement)[0].innerHTML,
+                                true,
+                                scrollIntoVoting
+                            )
+                            break
+                    }
+                } else {
+                    replaceAnimated(votingWrapper, data, true, scrollIntoVoting)
+                }
+            })
+
+            //Add handlers to be called when the Deferred object is rejected.
+            .fail(function (xhr, errorType, error) {
+                //anzeige irgendetwas hat nicht geklappt
+                console.log('Fail ' + errorType)
+                replaceAnimated(
+                    votingWrapper,
+                    hr$('.js-errorMessage', rootElement)[0].innerHTML,
+                    true,
+                    scrollIntoVoting
+                )
+            })
+
+            //Add handlers to be called when the Deferred object is either resolved or rejected.
+            .always(function () {
+                //aufräumen wenn bedarf besteht.
+                console.log('Always')
+
+                isPosting = false
+            })
+    }
+
+    const setAjaxOptions = function () {
+        ajaxOptions = {}
+        ajaxOptions.timeout = ajaxTimeout
+
+        ajaxOptions.type = 'POST'
+        ajaxOptions.url = actionUrl + '?' + responseFormatParam
+        ajaxOptions.data = $(votingForm).serialize()
+        ajaxOptions.contentType = 'application/x-www-form-urlencoded; charset=UTF-8'
+        ajaxOptions.dataType = ''
+    }
+
+    const scrollIntoVoting = function (vertical) {
+        setTimeout(function () {
+            rootElement.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center',
+            })
+        }, 850)
+    }
+    /**
+     * Handles click events globally
+     * and delegates to concrete handlers
+     * on the basis of the event target.
+     * @see {@link https://gomakethings.com/why-event-delegation-is-a-better-way-to-listen-for-events-in-vanilla-js/} for further information.
+     * @param event
+     */
+    const handleClick = function (event) {
+        if (event.target.matches('.js-formReload')) {
+            handleFormReload(event)
+        }
+    }
+
+    const handleFormReload = function (event) {
+        event.preventDefault()
+        replaceAnimated(votingWrapper, votingTmpl, true, scrollIntoVoting)
+    }
+
+    const handleKeydown = function (event) {
+        if (event.target.matches('.js-form-email')) {
+            event.stopPropagation()
+        }
+    }
+
+    const setValidationErrors = function (errors) {
+        let wrapperElement, errorElement, prop, InvalidFields
+
+        for (prop in errors) {
+            wrapperElement = rootElement.getElementsByClassName('js-wrapper-' + prop)[0]
+            errorElement = document.createElement('p')
+
+            InvalidFields = document.getElementsByName(prop)
+            for (let i = 0; i < InvalidFields.length; i++) {
+                if (wrapperElement.contains(InvalidFields[i])) {
+                    InvalidFields[i].classList.add('is-invalid')
+                }
+            }
+
+            errorElement.innerHTML = options.errorMessages[errors[prop]]
+            errorElement.classList.add('c-form__errorMessage')
+
+            wrapperElement.insertBefore(errorElement, wrapperElement.firstChild)
+        }
+    }
+
+    const resetValidationErrors = function () {
+        let oldInvalidFields = hr$('.is-invalid', rootElement),
+            oldErrorMessages = hr$('.c-form__errorMessage', rootElement)
+
+        for (let i = 0; i < oldInvalidFields.length; i++) {
+            oldInvalidFields[i].classList.remove('is-invalid')
+            oldErrorMessages[i].parentNode.removeChild(oldErrorMessages[i])
+        }
+    }
+
+    const handleValidationErrors = function (errors) {
+        resetValidationErrors()
+        setValidationErrors(errors)
+    }
+
+    const isFormAvailable = function () {
+        return !!votingForm
+    }
+
+    if (!isFormAvailable()) {
+        //skip code execution
+        return
+    }
+
+    //init
+    votingWrapper.style.WebkitTransition = 'opacity 0.8s ease-in-out'
+    votingWrapper.style.MozTransition = 'opacity 0.8s ease-in-out'
+    votingWrapper.style.transition = 'opacity 0.8s ease-in-out'
+
+    checkForJsonUrl()
+
+    listen('submit', handleSubmit, rootElement)
+    listen('click', handleClick, rootElement)
+    listen('keydown', handleKeydown, rootElement)
+}
+export default Voting

package/src/stories/views/components/voting/js/votingDs.js

@@ -0,0 +1,198 @@
+var Voting =
+    Voting ||
+    function (options) {
+        'use strict'
+
+        var element = hr$(options.selector)[0],
+            settings = options.data ? JSON.parse(options.data) : {},
+            jsonURL = settings.jsonURL,
+            votingWrapper = hr$('.js-voting-wrapper', element)[0],
+            votingTmpl = votingWrapper.innerHTML,
+            votingForm = hr$('.js-votingForm', element)[0],
+            actionUrl = votingForm && votingForm.getAttribute('action'),
+            ajaxOptions,
+            ajaxTimeout = 60 * 1000,
+            responseFormatParam = 'rf=inline',
+            isPosting = false,
+            preloadIcon,
+            loadingIcon,
+            validationErrors,
+            responseStatus,
+            checkForJsonURL = function () {
+                if (jsonURL) {
+                    actionUrl = jsonURL
+                }
+            },
+            handleSubmit = function (event) {
+                event.preventDefault()
+
+                if (isPosting) {
+                    return
+                } else {
+                    isPosting = true
+                }
+
+                //jedes mal neu holen,
+                //da das DOM mit innerHTML ersetzt wird
+                votingForm = hr$('.js-votingForm', element)[0]
+
+                //            preloadIcon = hr$('.js-preloadIcon', formWrapper)[0];
+                //            loadingIcon = hr$('.js-loadingIcon', formWrapper)[0];
+                //
+                //            preloadIcon.classList.add('-isHidden');
+                //            loadingIcon.classList.remove('-isHidden');
+
+                console.log('DATA: ' + $(votingForm).serialize())
+                ajaxOptions = {}
+                ajaxOptions.timeout = ajaxTimeout
+
+                ajaxOptions.type = 'POST'
+                ajaxOptions.url = actionUrl + '?' + responseFormatParam
+                ajaxOptions.data = $(votingForm).serialize()
+                ajaxOptions.contentType = 'application/x-www-form-urlencoded; charset=UTF-8'
+                ajaxOptions.dataType = ''
+
+                $.ajax(ajaxOptions)
+
+                    //Add handlers to be called when the Deferred object is resolved.
+                    .done(function (data, status, xhr) {
+                        console.log('Done')
+                        console.log(data)
+
+                        if (settings.jsonURL) {
+                            responseStatus = JSON.parse(data).status
+                            switch (responseStatus) {
+                                case 'VALIDATION_ERROR':
+                                    console.log('Validation Error')
+                                    validationErrors = JSON.parse(data).errors
+                                    handleValidationErrors(validationErrors)
+                                    break
+                                case 'SERVER_ERROR':
+                                    hr$.replaceAnimated(
+                                        votingWrapper,
+                                        hr$('.js-errorMessage', element)[0].innerHTML,
+                                        true,
+                                        scrollIntoVoting()
+                                    )
+                                    break
+                                case 'OK':
+                                    hr$.replaceAnimated(
+                                        votingWrapper,
+                                        hr$('.js-successMessage', element)[0].innerHTML,
+                                        true,
+                                        scrollIntoVoting()
+                                    )
+                                    break
+                                default:
+                                    hr$.replaceAnimated(
+                                        votingWrapper,
+                                        hr$('.js-errorMessage', element)[0].innerHTML,
+                                        true,
+                                        scrollIntoVoting()
+                                    )
+                                    break
+                            }
+                        } else {
+                            hr$.replaceAnimated(formWrapper, data, true)
+                            scrollIntoVoting()
+                        }
+                    })
+
+                    //Add handlers to be called when the Deferred object is rejected.
+                    .fail(function (xhr, errorType, error) {
+                        //anzeige irgendetwas hat nicht geklappt
+                        console.log('Fail ' + errorType)
+                        hr$.replaceAnimated(
+                            votingWrapper,
+                            hr$('.js-errorMessage', element)[0].innerHTML,
+                            true,
+                            setTimeout(function () {
+                                scrollIntoVoting()
+                            }, 850)
+                        )
+                    })
+
+                    //Add handlers to be called when the Deferred object is either resolved or rejected.
+                    .always(function () {
+                        //aufräumen wenn bedarf besteht.
+                        console.log('Always')
+
+                        isPosting = false
+                    })
+            },
+            scrollIntoVoting = function (vertical) {
+                setTimeout(function () {
+                    element.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center',
+                    })
+                }, 850)
+            },
+            handleFormReload = function (event) {
+                event.preventDefault()
+                hr$.replaceAnimated(votingWrapper, votingTmpl, false, reinitiateVotingForm)
+                scrollIntoVoting()
+                //hr$.ux('forms', 'formReload');
+            },
+            setValidationErrors = function (errors) {
+                var wrapperElement, errorElement, prop, InvalidFields
+
+                for (prop in errors) {
+                    wrapperElement = element.getElementsByClassName('js-wrapper-' + prop)[0]
+                    errorElement = document.createElement('p')
+
+                    InvalidFields = document.getElementsByName(prop)
+                    for (var i = 0; i < InvalidFields.length; i++) {
+                        if (wrapperElement.contains(InvalidFields[i])) {
+                            InvalidFields[i].classList.add('is-invalid')
+                        }
+                    }
+
+                    errorElement.innerHTML = settings.errorMessages[errors[prop]]
+                    errorElement.classList.add('c-form__errorMessage')
+
+                    wrapperElement.insertBefore(errorElement, wrapperElement.firstChild)
+                }
+            },
+            resetValidationErrors = function () {
+                var oldInvalidFields = hr$('.is-invalid', element),
+                    oldErrorMessages = hr$('.c-form__errorMessage', element)
+
+                for (var i = 0; i < oldInvalidFields.length; i++) {
+                    oldInvalidFields[i].classList.remove('is-invalid')
+                    oldErrorMessages[i].parentNode.removeChild(oldErrorMessages[i])
+                }
+            },
+            handleValidationErrors = function (errors) {
+                resetValidationErrors()
+                setValidationErrors(errors)
+            },
+            isFormAvailable = function () {
+                return !!votingForm
+            },
+            reinitiateVotingForm = function () {
+                hrScriptLoad.rescanForModulesAndVariants(element.parentElement)
+            }
+
+        if (!isFormAvailable()) {
+            //skip code execution
+            return
+        }
+
+        //init
+        votingWrapper.style.WebkitTransition = 'opacity 0.8s ease-in-out'
+        votingWrapper.style.MozTransition = 'opacity 0.8s ease-in-out'
+        votingWrapper.style.transition = 'opacity 0.8s ease-in-out'
+
+        checkForJsonURL()
+
+        $(element).on('submit', '.js-votingForm', handleSubmit)
+        $(element).on('click', '.js-formReload', handleFormReload)
+        $(element).on('keydown', '.js-form-email', function (e) {
+            e.stopPropagation()
+        })
+    }
+
+hrScriptLoad.load('voting', ['hrQueryOld', 'zepto'], function (options) {
+    new Voting(options)
+})

package/src/stories/views/components/voting/js/votingValidatorDs.feature.js

@@ -0,0 +1,193 @@
+import { hr$, listen } from 'hrQuery'
+
+const VotingValidator = (context) => {
+    // Production steps of ECMA-262, Edition 6, 22.1.2.1
+    if (!Array.from) {
+        Array.from = (function () {
+            let toStr = Object.prototype.toString
+            let isCallable = function (fn) {
+                return typeof fn === 'function' || toStr.call(fn) === '[object Function]'
+            }
+            const toInteger = function (value) {
+                let number = Number(value)
+                if (isNaN(number)) {
+                    return 0
+                }
+                if (number === 0 || !isFinite(number)) {
+                    return number
+                }
+                return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number))
+            }
+            const maxSafeInteger = Math.pow(2, 53) - 1
+            const toLength = function (value) {
+                let len = toInteger(value)
+                return Math.min(Math.max(len, 0), maxSafeInteger)
+            }
+
+            // The length property of the from method is 1.
+            return function from(arrayLike /*, mapFn, thisArg */) {
+                // 1. Let C be the this value.
+                let C = this
+
+                // 2. Let items be ToObject(arrayLike).
+                let items = Object(arrayLike)
+
+                // 3. ReturnIfAbrupt(items).
+                if (arrayLike == null) {
+                    throw new TypeError(
+                        'Array.from requires an array-like object - not null or undefined'
+                    )
+                }
+
+                // 4. If mapfn is undefined, then let mapping be false.
+                const mapFn = arguments.length > 1 ? arguments[1] : void undefined
+                let T
+                if (typeof mapFn !== 'undefined') {
+                    // 5. else
+                    // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
+                    if (!isCallable(mapFn)) {
+                        throw new TypeError(
+                            'Array.from: when provided, the second argument must be a function'
+                        )
+                    }
+
+                    // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
+                    if (arguments.length > 2) {
+                        T = arguments[2]
+                    }
+                }
+
+                // 10. Let lenValue be Get(items, "length").
+                // 11. Let len be ToLength(lenValue).
+                const len = toLength(items.length)
+
+                // 13. If IsConstructor(C) is true, then
+                // 13. a. Let A be the result of calling the [[Construct]] internal method
+                // of C with an argument list containing the single item len.
+                // 14. a. Else, Let A be ArrayCreate(len).
+                const A = isCallable(C) ? Object(new C(len)) : new Array(len)
+
+                // 16. Let k be 0.
+                let k = 0
+                // 17. Repeat, while k < len… (also steps a - h)
+                let kValue
+                while (k < len) {
+                    kValue = items[k]
+                    if (mapFn) {
+                        A[k] =
+                            typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k)
+                    } else {
+                        A[k] = kValue
+                    }
+                    k += 1
+                }
+                // 18. Let putStatus be Put(A, "length", len, true).
+                A.length = len
+                // 20. Return A.
+                return A
+            }
+        })()
+    }
+
+    const { options } = context
+    const { element: rootElement } = context
+    const maxAnswerCount = options.maxAnswerCount,
+        isMultipleChoice = options.isMultipleChoice || false,
+        votingOptions = Array.from(hr$('input[name=multivoting]', rootElement)),
+        submit = hr$('input[type=submit]', rootElement)[0],
+        submitLabel = hr$('.js-voting-submit-button', rootElement)[0]
+    let counter = hr$('.js-voting-counter', rootElement),
+        selectedCheckboxes = 0
+
+    const countSelectedCheckboxes = function (event) {
+        console.log(submitLabel)
+        if (countCheckedCheckboxes() != 0) {
+            submit.disabled = false
+            submitLabel.classList.remove('-inactive')
+        } else {
+            submit.disabled = true
+            submitLabel.classList.add('-inactive')
+        }
+
+        if (selectedCheckboxes < maxAnswerCount) {
+            countSelectedCheckBoxesIfMaxHasNotReached(event)
+
+            if (selectedCheckboxes == maxAnswerCount) {
+                disableCheckboxesIfMaxHasReached()
+            }
+        } else {
+            enableCheckboxesIfMaxHasUndershot()
+        }
+    }
+
+    const isUnchecked = function (checkbox) {
+        return checkbox.checked == false
+    }
+
+    const isDisabled = function (checkbox) {
+        return checkbox.disabled == true
+    }
+
+    const isChecked = function (checkbox) {
+        return checkbox.checked == true
+    }
+
+    const countCheckedCheckboxes = function () {
+        let checkedOptions = votingOptions.filter(isChecked)
+        return checkedOptions.length
+    }
+
+    const countSelectedCheckBoxesIfMaxHasNotReached = function (event) {
+        if (event.target.checked === false) {
+            if (isMultipleChoice) {selectedCheckboxes = selectedCheckboxes - 1}
+            counter.innerHTML = '(' + selectedCheckboxes + '/' + maxAnswerCount + ')'
+        } else {
+            selectedCheckboxes = selectedCheckboxes + 1
+            counter.innerHTML = '(' + selectedCheckboxes + '/' + maxAnswerCount + ')'
+        }
+    }
+
+    const disableCheckboxesIfMaxHasReached = function () {
+        let uncheckedOptions = votingOptions.filter(isUnchecked)
+        uncheckedOptions.map(function (uncheckedOptions) {
+            if (isMultipleChoice) {
+                uncheckedOptions.disabled = true
+                let label = hr$('label[for=' + uncheckedOptions.id + ']')
+                label = label.item(0)
+                label.classList.add('-inactive')
+            }
+        })
+    }
+
+    const enableCheckboxesIfMaxHasUndershot = function () {
+        if (isMultipleChoice) {selectedCheckboxes = selectedCheckboxes - 1}
+        counter.innerHTML = '(' + selectedCheckboxes + '/' + maxAnswerCount + ')'
+        let disabledCheckboxes = votingOptions.filter(isDisabled)
+        disabledCheckboxes.map(function (disabledCheckboxes) {
+            disabledCheckboxes.disabled = false
+            let label = hr$('label[for=' + disabledCheckboxes.id + ']')
+            label = label.item(0)
+            label.classList.remove('-inactive')
+        })
+    }
+
+    const initVotingValidation = function () {
+        //if (isMultipleChoice) {
+            counter = counter.item(0)
+            submit.disabled = true
+
+            // Uncheck all checkboxes if User was faster than JS loading
+            for (let i = 0; i < votingOptions.length; i++) {
+                votingOptions[i].checked = false
+            }
+
+            for (let i = 0; i < votingOptions.length; i++) {
+                votingOptions[i].disabled = false
+                listen('click', countSelectedCheckboxes, votingOptions[i])
+            }
+        //}
+    }
+
+    initVotingValidation()
+}
+export default VotingValidator

package/src/stories/views/components/voting/voting.hbs

@@ -1,12 +1,53 @@
 {{#with this.form}}
     {{#unless this.isVotingOver}}
-        
-        {{> components/voting/voting_header _title=../this.title _topline=../this.topline}}
-        
-        {{#if this.shorttext}}
-            <p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">{{this.shorttext}}</p>
-        {{/if}}
-        
+        {{#unless ../this.hasRedirect}}
+            <div class="js-load {{../_addClass}}"
+                data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'
+                data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
+                {{#if this.isSimpleSecured}}
+                    data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
+                    id="{{this.sophoraId}}"
+                {{/if}}
+            >
+        {{else}}
+            <div class="js-load {{../_addClass}}"
+                {{#if this.is2FSecured}}data-hr-voting-ds='{"jsonURL":"{{this.jsonUrl}}", "errorMessages": {{this.errorMessages}} }'{{/if}}
+                data-hr-voting-validator-ds='{"isMultipleChoice": {{../this.isMultipleChoice}}, "minAnswerCount": 1, "maxAnswerCount": {{../this.maxAnswerCount}} }'
+                {{#if this.isSimpleSecured}}
+                    data-hr-voting-cookie-checker-ds='{ "alreadyVotedHintText": "{{loca "votingform_already_voted_cookie_hint"}}" , "hideVotingResult": {{this.hideVotingResult}} , "votingId": "{{this.sophoraId}}" }'
+                    id="{{this.sophoraId}}"
+                {{/if}}
+            >
+        {{/unless}}    
+            <div class="js-voting-wrapper">
+                <form class="js-votingForm" 
+                    action="{{this.url}}" 
+                    method="post"
+                    enctype="application/x-www-form-urlencoded" 
+                    accept-charset="utf-8" 
+                    autocomplete="off"
+                >
+                    {{> components/voting/components/voting_header _title=../this.title _topline=../this.topline}}
+                    
+                    <div class="c-voting-form__bottomWrapper">
+                        {{#if this.shorttext}}
+                            <p class="mt-4 text-base font-copy sm:text-lg sm:mt-5 dark:text-text-dark">{{this.shorttext}}</p>
+                        {{/if}}
+
+                        <div class="w-full mt-6 text-xs text-right sm:mt-12 font-headingSerif sm:text-sm text-gray-scorpion dark:text-text-dark">
+                            {{#if ../this.isMultipleChoice}}
+                                {{loca "votingform_open_answers_text" ../this.maxAnswerCount}}
+                            {{else}}
+                                {{loca "votingform_single_answer_text"}}
+                            {{/if}}
+                            <span class="block float-right w-8 js-voting-counter">(0/{{../this.maxAnswerCount}})</span>
+                        </div>
+                        {{> components/forms/components/fields _multipleChoice=../this.isMultipleChoice _addClassGroup="!flex-col mt-5" _addClassChoice="has-[input:checked]:outline outline-2 outline-blue-science-hex bg-white p-4" _addClassLabel="!text-base sm:!text-lg md:!text-lg"}}
+                        {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="-inactive js-voting-submit-button"}}
+                    </div>
+                </form>
+            </div>
+        </div>
     {{else}}
         {{> components/voting/voting_result _isVotingOver=true _title=../this.title _topline=../this.topline}}
     {{/unless}}

package/src/stories/views/components/voting/voting.stories.js

@@ -1,4 +1,5 @@
 import votingJson from './fixtures/voting.json'
+import votingOverJson from './fixtures/voting_over.json'
 
 const handlebars = require('hrHandlebars')
 
@@ -28,3 +29,9 @@ export const Default = {
     name: 'default',
     args: votingJson,
 }
+
+export const Voting_Over = {
+    render: Template.bind({}),
+    name: 'Beeendet',
+    args: votingOverJson,
+}