hr-design-system-handlebars 1.114.111 → 1.114.113

package/src/assets/brand/you-fm/conf/locatags.json

@@ -3,5 +3,6 @@
     "ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhältst du in unseren ",
     "ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da du in deinem Browser Javascript deaktiviert hast, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
     "header_homepage_link_title": "Startseite you-fm . d e",
-    "meta_application_name": "you-fm.de"
+    "meta_application_name": "you-fm.de",
+    "website_name_search_button": "you-fm.de"
 }

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -142,6 +142,9 @@
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
+	"search_form_label_searchTerm": "Suchbegriff",
+	"search_form_label_searchType": "Suche in",
+	"search_select_all": "allen hr-Webseiten",
 	"share_facebook_linktitle": "Bei Facebook teilen",
 	"share_linktitle": "Artikel teilen",
 	"share_headline": "Teilen",
@@ -240,5 +243,6 @@
 	"form_button_reset": "Zurücksetzen",
 	"form_button_submit": "Absenden",
 	"header_homepage_link_title": "Startseite you-fm . d e",
-	"meta_application_name": "you-fm.de"
+	"meta_application_name": "you-fm.de",
+	"website_name_search_button": "you-fm.de"
 }

package/src/stories/views/components/page/search/search_form.hbs

@@ -1,40 +1,143 @@
 <form id="search_form" method="GET" action="#">
-            <div class="relative flex flex-col px-2 pt-6 pb-6 mt-8 mb-8 sm:flex-row sm:px-4 bg-highlight-1 dark:bg-highlight-1-dark sm:pt-6 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
-                <div class="relative h-12 sm:mr-4 basis-full width-full">
-                    {{~> components/forms/components/input
-                            _locaKey="search_form_label_searchTerm"
-                            _name="query"
-                            _label="Suchbegriff"
-                            _labelClass=""
-                            _description=""
-                            _type="text"
-                            _value=this.queryString
-                            _autocompleteOff=true
-                            _autoSuggestFeature=true
-                    }}
-                </div>
-                <div class="relative flex h-12 basis-full width-full">
-                    <div class="relative h-12 basis-full">
-                        <select class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none border-form-highlight dark:border-form-highlight-dark"  id="select_search" title="" name="all" isFocused="false">
-                            <option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
-                                    "website_name_search_button"}}</option>
-                            <option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
-                                    "search_select_all"}}</option>
-                        </select>
-                        <label for="select_search" class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">
-                            {{loca "search_form_label_searchType"}}
-                        </label>
-                        <div class="absolute bg-white right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
-                            {{~> components/base/image/icon _icon="arrow-down" _addClass="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
-                        </div>
-                    </div>
-                    <div class="relative">
-                        <button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
-                                class="inline-flex items-center justify-center order-2 w-12 h-12 border rounded-r cursor-pointer ds-button font-heading text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark active:scale-95 min-w-11">
-                            {{> components/base/image/icon _icon="suche" _addClass="sb-icon w-5 h-5 fill-white dark:fill-text-dark"}}
-                            <span class="hide">{{loca "search_button_label"}}</span>
-                        </button>
-                    </div>
+    <div class="relative flex flex-col px-2 pt-6 pb-6 mt-8 mb-8 sm:flex-row sm:px-4 bg-highlight-1 dark:bg-highlight-1-dark sm:pt-6 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
+        <div class="relative h-12 basis-full width-full "  x-data="searchSuggest()">
+            <div id="search-content"
+                @click.away="active=false; cursorIndex=-1"
+                @keydown.arrow-down="moveDownList()"
+                @keydown.arrow-up="moveUpList()"
+            >     
+                <input 
+                    @input.debounce="getSuggestionsForInput();cursorIndex=-1"
+                    @click="active=true" 
+                    name="query" 
+                    x-model="query"
+                    placeholder='{{loca "search_input_placeholder" }}' 
+                    class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white border-r border-r-gray-mercury placeholder:select-none text-text dark:bg-black dark:text-text-dark autofill:shadow-autofill border-form-highlight dark:form-highlight-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none"
+                    type="text"
+                    id="searchInput--{{nextRandom}}"
+                    autocomplete="off"
+                    role="combobox" 
+                    aria-haspopup="listbox" 
+                    aria-autocomplete="list" 
+                    x-effect="$el.setAttribute('aria-expanded', (query.length > 1 && active && suggestions.length > 0))"
+                    title="{{loca 'search_form_label_searchTerm'}}"
+                    placeholder="{{loca 'search_form_label_searchTerm'}}"
+                    
+                > 
+                <label for="searchInput--{{getRandom}}"
+                        class="{{_labelClass}} peer-placeholder-shown:whitespace-nowrap {{> components/forms/components/labelClasses }}">
+                    {{loca "search_form_label_searchTerm" }}
+                </label>
+                <div 
+                    class="absolute left-0 w-auto min-w-full z-100 top-11.5" 
+                    x-show="query.length > 1 && active && suggestions.length"
+                    x-cloak
+                    x-transition:leave="transition ease-in duration-100"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                >
+                    <ul 
+                        role="listbox" 
+                        id="suggestionlist--{{getRandom}}" 
+                        aria-label="Suche öffnen"
+                        x-effect="$el.setAttribute('aria-expanded', query.length > 1 && active && suggestions.length > 0);$el.setAttribute('aria-hidden', !(query.length > 1 && active && suggestions.length > 0))"
+                        class=" w-full mt-1 lg:mt-0.5 bg-white border rounded divide-y shadow-xl"
+                        x-ref="list"
+                    >
+                        
+                        <template x-for="(suggestion, index) in suggestions" :key="index">
+                            <li class="first-of-type:border-none">
+                                <a  
+                                    x-bind:active="false"
+                                    x-bind:href="'{{resourceUrl "suche/index.nocache"}}?query=' + suggestion"
+                                    x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full text-secondary rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
+                                >
+                                    <span x-text="suggestion"></span>
+                                </a>
+                            </li>
+                        </template>
+                        
+                    </ul>
+                </div> 
+            </div>
+            <script type="text/javascript">
+
+                function searchSuggest() {
+
+                    return {
+                        active:true,
+                        cursorIndex: -1,
+                        query: "",
+                        suggestions: [],
+
+                        getSuggestionsForInput() {
+
+                            suggestionDataUrl = '{{resourceUrl "suche/index~suggest.jsp"}}' + '?suggestions=' + this.query;
+
+                            fetch(suggestionDataUrl)
+
+                                .then((res) =>{  return res.text()})
+
+                                .then((data) => {
+                                    data = JSON.parse(data.replace(/&quot;/g, '"'))
+                                    data.solrSuggestions = this.filterStartwith(data.solrSuggestions, this.query)
+                                    this.suggestions= this.filterSortbylength(data.solrSuggestions)
+                                });
+
+                        },
+
+                        filterStartwith(data, query) {
+                        return data.filter(Suggestion => Suggestion.toLowerCase().startsWith(query.toLowerCase().trim()))
+                        },
+
+                        filterSortbylength(data) {
+                        return data.sort((a, b) => a.length - b.length)
+                        },
+
+                        moveDownList() {
+                                if (this.suggestions.length > 0 && this.cursorIndex < this.suggestions.length - 1) 
+                                {
+                                    this.cursorIndex++;
+                                    this.query = this.suggestions[this.cursorIndex];
+                                }
+                        },
+
+                        moveUpList() {
+                                if (this.suggestions.length > 0 && this.cursorIndex > 0) 
+                                {
+                                    this.cursorIndex--;
+                                    this.query = this.suggestions[this.cursorIndex];
+                                }
+                        },
+
+                    };
+
+                }
+
+            </script>
+        </div>
+        <div class="relative flex h-12 basis-full width-full">
+            <div class="relative h-12 basis-full">
+                <select class="relative w-full h-12 pt-4 pl-4 bg-white appearance-none cursor-pointer form-select text-text dark:bg-black dark:text-text-dark pr-9 peer border-y focus:border-y-2 border-t-transparent dark:border-t-transparent focus:outline-none border-form-highlight dark:border-form-highlight-dark"  id="select_search" title="" name="all" isFocused="false">
+                    <option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
+                            "website_name_search_button"}}</option>
+                    <option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
+                            "search_select_all"}}</option>
+                </select>
+                <label for="select_search" class="absolute top-0 truncate transition-transform origin-top-left transform scale-100 translate-x-0 translate-y-3 pointer-events-none left-4 right-11 text-gray-scorpion dark:text-text-dark peer-focus:text-form-highlight peer-focus:dark:text-form-highlight-dark peer-focus:scale-75 peer-focus:translate-y-0 peer-focus:top-px ">
+                    {{loca "search_form_label_searchType"}}
+                </label>
+                <div class="absolute bg-white right-0 p-4 py-3 transform border-l peer-focus:border-r peer-focus:border-l-0 pointer-events-none top-1.5 peer-focus:rotate-180">
+                    {{~> components/base/image/icon _icon="arrow-down" _addClass="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
                 </div>
             </div>
-        </form>
+            <div class="relative">
+                <button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
+                        class="inline-flex items-center justify-center order-2 w-12 h-12 border rounded-r cursor-pointer ds-button font-heading text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark active:scale-95 min-w-11">
+                    {{> components/base/image/icon _icon="suche-ds" _addClass="sb-icon w-7 h-7 fill-white dark:fill-text-dark"}}
+                    <span class="sr-only">{{loca "search_input_aria_submit" }}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</form>

package/src/stories/views/components/page/search/search_form.stories.js

@@ -0,0 +1,31 @@
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/page/search/search_form }} 
+  `)
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+export default {
+    title: 'Komponenten/SearchForm',
+    argTypes: {},
+
+    parameters: {
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+        chromatic: {
+            disableSnapshot: false
+        },
+    },
+}
+
+export const searchForm = {
+    render: Template.bind({}),
+    name: 'Suchformular',
+}

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

@@ -30,34 +30,36 @@
                     >
                         {{> components/voting/components/voting_header _isTeaser=../../_isTeaser _title=../this.title _topline=../this.topline}}
                         
-                        <div class="js-voting-form__bottomWrapper">
-                            {{#if this.shorttext}}
-                                <p class="mt-3 text-base font-copy sm:text-lg dark:text-text-dark">{{this.shorttext}}</p>
-                            {{/if}}
-
-                            <div class="w-full mt-6 text-xs text-right sm:mt-8 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"}}
+                        <div id="voting_form">
+                            <div class="js-voting-form__bottomWrapper">
+                                {{#if this.shorttext}}
+                                    <p class="mt-3 text-base font-copy sm:text-lg dark:text-text-dark">{{this.shorttext}}</p>
                                 {{/if}}
-                                <span class="block float-right w-8 js-voting-counter">(0/{{../this.maxAnswerCount}})</span>
-                            </div>
-                            {{> components/forms/components/fields 
-                                    _multipleChoice=../this.isMultipleChoice
-                                    _isHorizontalLayout=this.isHorizontalLayout
-                                    _isMultimediaVoting=../this.isMultimediaVoting
-                                    _addClassGroup="!flex-col mt-2" 
-                                    _addClassChoice="has-[input:checked]:outline outline-2 outline-blue-science-hex hover:!outline-2 hover:!outline-blue-science-hex bg-white dark:bg-black has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed" 
-                                    _addClassLabel="w-full !pt-[15px] sm:!pt-[18px] !pb-[9px] sm:!pb-3.5 !pr-3 sm:!pr-4" 
-                                    _addClassLabelForDataPolicy="!pt-0"
-                                    _addClassInput="!my-3 sm:!my-4 !ml-3 sm:!ml-4"
-                            }}
-                            <div class="w-full h-12">
-                                {{#if this.is2FSecured}}
-                                    <div class="float-left mt-1 text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
-                                {{/if}}                            
-                                {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="js-voting-submit-button"}}
+
+                                <div class="w-full mt-6 text-xs text-right sm:mt-8 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
+                                        _isHorizontalLayout=this.isHorizontalLayout
+                                        _isMultimediaVoting=../this.isMultimediaVoting
+                                        _addClassGroup="!flex-col mt-2" 
+                                        _addClassChoice="has-[input:checked]:outline outline-2 outline-blue-science-hex hover:!outline-2 hover:!outline-blue-science-hex bg-white dark:bg-black has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed" 
+                                        _addClassLabel="w-full !pt-[15px] sm:!pt-[18px] !pb-[9px] sm:!pb-3.5 !pr-3 sm:!pr-4" 
+                                        _addClassLabelForDataPolicy="!pt-0"
+                                        _addClassInput="!my-3 sm:!my-4 !ml-3 sm:!ml-4"
+                                }}
+                                <div class="w-full h-12">
+                                    {{#if this.is2FSecured}}
+                                        <div class="float-left mt-1 text-xs text-gray-scorpion dark:text-text-dark font-headingSerif">{{loca "form_text_required"}}</div>
+                                    {{/if}}                            
+                                    {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="js-voting-submit-button"}}
+                                </div>
                             </div>
                         </div>
                         <script type="text/html" class="js-successMessage">
@@ -110,6 +112,12 @@
             {{> components/voting/voting_result _hideVotingResult=this.hideVotingResult}}
         {{/unless}}
     {{/with}}
+<div id="voting_form_hint">
+<div class="p-4 mt-6 mb-3 text-orange-700 bg-orange-100 border-l-4 border-orange-500" role="alert">
+    <p class="font-bold">Hinweis</p>
+    <p>Bitte aktivieren Sie JavaScript, um bei einem Voting abstimmen zu können.</p>
+</div>           
+</div>
 {{/components/forms/components/backgroundBox }}
 
 {{!--Featured Content--}}