hr-design-system-handlebars 1.113.16 → 1.113.17

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.113.17 (Mon Nov 04 2024)
+
+#### 🐛 Bug Fix
+
+- add multiple-choice voting [#1144](https://github.com/mumprod/hr-design-system-handlebars/pull/1144) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.113.16 (Mon Nov 04 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2053,6 +2053,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .cursor-default {
   cursor: default;
 }
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -2845,6 +2848,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .p-2 {
   padding: 0.5rem;
 }
+.p-3 {
+  padding: 0.75rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -3658,7 +3664,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1730727988086;
+  counter-reset: cnt1730742146818;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -4072,7 +4078,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1730727988086 1;
+  counter-increment: cnt1730742146818 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4090,7 +4096,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1730727988086);
+  content: counter(cnt1730742146818);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6326,6 +6332,9 @@ select:has(option:checked[value='']) {
 .has-\[input\:disabled\]\:cursor-not-allowed:has(input:disabled) {
   cursor: not-allowed;
 }
+.has-\[input\:disabled\]\:opacity-50:has(input:disabled) {
+  opacity: 0.5;
+}
 .has-\[input\:disabled\]\:opacity-75:has(input:disabled) {
   opacity: 0.75;
 }
@@ -6814,6 +6823,10 @@ select:has(option:checked[value='']) {
     background-color: transparent;
   }
 
+  .sm\:p-4 {
+    padding: 1rem;
+  }
+
   .sm\:p-5 {
     padding: 1.25rem;
   }

package/dist/assets/js/components/voting/js/votingValidatorDs.feature.js

@@ -155,6 +155,7 @@ const VotingValidator = (context) => {
                 let label = hr$('label[for=' + uncheckedOptions.id + ']')
                 label = label.item(0)
                 label.classList.add('-inactive')
+                label.classList.add('cursor-not-allowed')
             }
         })
     }
@@ -168,6 +169,7 @@ const VotingValidator = (context) => {
             let label = hr$('label[for=' + disabledCheckboxes.id + ']')
             label = label.item(0)
             label.classList.remove('-inactive')
+            label.classList.remove('cursor-not-allowed')
         })
     }
 

package/dist/views/components/forms/components/choice.hbs

@@ -10,7 +10,7 @@
    {{/unless}}
 >
 <div class="flex flex-row items-center w-full cursor-pointer{{#if _addClass}} {{_addClass}}{{/if}}">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight form-checkbox"," checked:bg-white checked:border-form-highlight rounded-full form-radio",""]'}}"
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer disabled:cursor-not-allowed border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight form-checkbox"," checked:bg-white checked:border-form-highlight rounded-full form-radio",""]'}}"
       {{#if _required}}
             :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}

package/dist/views/components/voting/voting.hbs

@@ -42,7 +42,7 @@
                             {{/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/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-3 sm:p-4 has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed" _addClassLabel="!text-base sm:!text-lg md:!text-lg"}}
                         {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="-inactive js-voting-submit-button"}}
                     </div>
                 </form>

package/dist/views_static/components/forms/components/choice.hbs

@@ -10,7 +10,7 @@
    {{/unless}}
 >
 <div class="flex flex-row items-center w-full cursor-pointer{{#if _addClass}} {{_addClass}}{{/if}}">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight form-checkbox"," checked:bg-white checked:border-form-highlight rounded-full form-radio",""]'}}"
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer disabled:cursor-not-allowed border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight form-checkbox"," checked:bg-white checked:border-form-highlight rounded-full form-radio",""]'}}"
       {{#if _required}}
             :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}

package/dist/views_static/components/voting/voting.hbs

@@ -42,7 +42,7 @@
                             {{/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/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-3 sm:p-4 has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed" _addClassLabel="!text-base sm:!text-lg md:!text-lg"}}
                         {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="-inactive js-voting-submit-button"}}
                     </div>
                 </form>

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.113.16",
+  "version": "1.113.17",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/assets/fixtures/voting/voting_multiple_choice.json

@@ -0,0 +1,18 @@
+{
+    "@->jsoninclude": "voting/voting.inc.json",
+    "@->contentpath": "multivote-1",
+    "@->overrides": [
+        {
+            "@->contentpath": "isMultipleChoice",
+            "@->value": true
+        },
+        {
+            "@->contentpath": "maxAnswerCount",
+            "@->value": 3
+        },
+        {
+            "@->contentpath": "form.fields.0.type.asString",
+            "@->value": "checkbox"
+        }        
+    ]    
+}

package/src/stories/views/components/forms/components/choice.hbs

@@ -10,7 +10,7 @@
    {{/unless}}
 >
 <div class="flex flex-row items-center w-full cursor-pointer{{#if _addClass}} {{_addClass}}{{/if}}">
-  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight form-checkbox"," checked:bg-white checked:border-form-highlight rounded-full form-radio",""]'}}"
+  <input class="relative self-start flex-shrink-0 w-6 h-6 bg-white dark:bg-black border appearance-none cursor-pointer disabled:cursor-not-allowed border-form-highlight dark:border-form-highlight-dark {{~inline-switch _type '["checkbox","radio"]' '[" checked:bg-form-highlight checked:border-form-highlight form-checkbox"," checked:bg-white checked:border-form-highlight rounded-full form-radio",""]'}}"
       {{#if _required}}
             :class="{' border-form-highlight dark:border-form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
       {{/if}}

package/src/stories/views/components/voting/fixtures/voting_multiple_choice.json

@@ -0,0 +1 @@
+{"teasersize":100,"realTeasersize":100,"topline":"Voting-Topline","toplineSize":"h3","title":"Wie finden Sie hessenschau.de?","backlink":"backlink-url","uuid":"UUID","headingSize":"h2","isVoting":true,"isMultiVote":true,"hasRedirect":true,"isMultipleChoice":true,"maxAnswerCount":3,"votingSuccessText":{"richtext":"Danke für Ihre Abstimmung!"},"isSimpleSecured":true,"cookieLifetime":"12","sophoraId":"Sophora-Id","hasBarchart":true,"showAbsoluteResult":false,"showVoteResult":true,"summarizedResult":"666","votingResult":[{"label":"Gut, beste website ever","count":"27","percentageCount":"4,1","roundedPercentageCount":"4.0"},{"label":"Super, allerbeste website ever","count":"117","percentageCount":"17,6","roundedPercentageCount":"18.0"},{"label":"Mega, allerallerbeste website ever","count":"242","percentageCount":"36,3","roundedPercentageCount":"36.0"},{"label":"Hammer, allerallerbesteste website ever","count":"280","percentageCount":"42,0","roundedPercentageCount":"42.0","isWinner":true}],"form":{"shorttext":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.","isVotingOver":false,"is2FSecured":true,"jsonUrl":"json-url","errorMessages":"Error-Messages","isSimpleSecured":true,"url":"action-url","isHorizontalLayout":false,"hideVotingResult":true,"sophoraId":"Sophora-Id","fields":[{"type":{"isGroup":false,"isChoice":true,"asString":"checkbox"},"name":"multivoting","isGrouped":true,"isRequired":false,"options":[{"value":"1","label":"Gut, beste website ever","title":"Voting-Answer 1","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"2","label":"Super, allerbeste website ever","title":"Voting-Answer 2","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"value":"3","label":"Mega, allerallerbeste website ever","title":"Voting-Answer 3","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/lehrerin-ukraine-104_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/lehrerin-ukraine-104_v-16to9__small.jpg 320w, images/lehrerin-ukraine-104_v-16to9__medium.jpg 480w, images/lehrerin-ukraine-104_v-16to9__medium__extended.jpg 640w, images/lehrerin-ukraine-104_v-16to9.jpg 960w, images/lehrerin-ukraine-104_v-16to9__retina.jpg 1920w"}]}}},{"value":"4","label":"Hammer, allerallerbesteste website ever","title":"Voting-Answer 4","mediaItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/connichi-106_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/connichi-106_v-16to9__small.jpg 320w, images/connichi-106_v-16to9__medium.jpg 480w, images/connichi-106_v-16to9__medium__extended.jpg 640w, images/connichi-106_v-16to9.jpg 960w, images/connichi-106_v-16to9__retina.jpg 1920w"}]}}}]}]}}

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

@@ -155,6 +155,7 @@ const VotingValidator = (context) => {
                 let label = hr$('label[for=' + uncheckedOptions.id + ']')
                 label = label.item(0)
                 label.classList.add('-inactive')
+                label.classList.add('cursor-not-allowed')
             }
         })
     }
@@ -168,6 +169,7 @@ const VotingValidator = (context) => {
             let label = hr$('label[for=' + disabledCheckboxes.id + ']')
             label = label.item(0)
             label.classList.remove('-inactive')
+            label.classList.remove('cursor-not-allowed')
         })
     }
 

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

@@ -42,7 +42,7 @@
                             {{/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/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-3 sm:p-4 has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed" _addClassLabel="!text-base sm:!text-lg md:!text-lg"}}
                         {{> components/voting/components/voting_submit _label="Abstimmen" _addClass="-inactive js-voting-submit-button"}}
                     </div>
                 </form>

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

@@ -1,5 +1,6 @@
 import votingJson from './fixtures/voting.json'
 import votingOverJson from './fixtures/voting_over.json'
+import votingMultipleChoiceJson from './fixtures/voting_multiple_choice.json'
 
 const handlebars = require('hrHandlebars')
 
@@ -30,6 +31,12 @@ export const Default = {
     args: votingJson,
 }
 
+export const Voting_Multiple_Choice = {
+    render: Template.bind({}),
+    name: 'Mehrfachauswahl',
+    args: votingMultipleChoiceJson,
+}
+
 export const Voting_Over = {
     render: Template.bind({}),
     name: 'Beeendet',