hr-design-system-handlebars 1.114.103 → 1.114.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +14 -3
  3. package/dist/views/components/forms/components/input.hbs +1 -1
  4. package/dist/views/components/page/search/search_form.hbs +40 -0
  5. package/dist/views_static/components/forms/components/input.hbs +1 -1
  6. package/dist/views_static/components/page/search/search_form.hbs +40 -0
  7. package/package.json +1 -1
  8. package/src/stories/views/components/forms/components/input.hbs +1 -1
  9. package/src/stories/views/components/page/search/search_form.hbs +40 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v1.114.104 (Fri Feb 21 2025)
2
+
3
+ #### ⚠️ Pushed to `main`
4
+
5
+ - Refactoring search result page ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
6
+
7
+ #### Authors: 1
8
+
9
+ - [@Paul-Atreidis](https://github.com/Paul-Atreidis)
10
+
11
+ ---
12
+
1
13
  # v1.114.103 (Fri Feb 21 2025)
2
14
 
3
15
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -1607,6 +1607,9 @@ article #commentList {
1607
1607
  .mt-7 {
1608
1608
  margin-top: 1.75rem;
1609
1609
  }
1610
+ .mt-8 {
1611
+ margin-top: 2rem;
1612
+ }
1610
1613
  .mt-9 {
1611
1614
  margin-top: 2.25rem;
1612
1615
  }
@@ -3846,7 +3849,7 @@ article #commentList {
3846
3849
  border-bottom-color: var(--color-secondary-ds);
3847
3850
  }
3848
3851
  .counter-reset {
3849
- counter-reset: cnt1740143574184;
3852
+ counter-reset: cnt1740160284330;
3850
3853
  }
3851
3854
  .animate-delay-100 {
3852
3855
  --tw-animate-delay: 100ms;
@@ -4291,7 +4294,7 @@ html { scroll-behavior: smooth; }
4291
4294
  --tw-ring-color: rgba(255, 255, 255, 0.5);
4292
4295
  }
4293
4296
  .-ordered {
4294
- counter-increment: cnt1740143574184 1;
4297
+ counter-increment: cnt1740160284330 1;
4295
4298
  }
4296
4299
  .-ordered::before {
4297
4300
  position: absolute;
@@ -4309,7 +4312,7 @@ html { scroll-behavior: smooth; }
4309
4312
  --tw-text-opacity: 1;
4310
4313
  color: rgba(0, 0, 0, 1);
4311
4314
  color: rgba(0, 0, 0, var(--tw-text-opacity));
4312
- content: counter(cnt1740143574184);
4315
+ content: counter(cnt1740160284330);
4313
4316
  }
4314
4317
  /*! ****************************/
4315
4318
  /*! DataPolicy stuff */
@@ -7238,6 +7241,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
7238
7241
  padding-bottom: 6rem;
7239
7242
  }
7240
7243
 
7244
+ .sm\:pb-6 {
7245
+ padding-bottom: 1.5rem;
7246
+ }
7247
+
7241
7248
  .sm\:pb-\[86px\] {
7242
7249
  padding-bottom: 86px;
7243
7250
  }
@@ -7270,6 +7277,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
7270
7277
  padding-top: 0.75rem;
7271
7278
  }
7272
7279
 
7280
+ .sm\:pt-4 {
7281
+ padding-top: 1rem;
7282
+ }
7283
+
7273
7284
  .sm\:pt-8 {
7274
7285
  padding-top: 2rem;
7275
7286
  }
package/dist/views/components/forms/components/input.hbs CHANGED
@@ -4,7 +4,7 @@
4
4
  x-init="validateField()"
5
5
  x-ignore
6
6
  >
7
- <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white 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"
7
+ <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white 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 {{#if _autoSuggestFeature}}js-load{{/if}}"
8
8
  :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
9
9
  x-model="input{{getRandom}}"
10
10
  id="input{{getRandom}}"
package/dist/views/components/page/search/search_form.hbs ADDED
@@ -0,0 +1,40 @@
1
+ <form id="search_form" method="GET" action="#">
2
+ <div class="relative flex px-4 pt-6 pb-6 mt-8 mb-8 bg-highlight-1 dark:bg-highlight-1-dark sm:px-4 sm:pt-4 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
3
+ <div class="relative h-12 basis-full width-full">
4
+ {{~> components/forms/components/input
5
+ _locaKey="search_form_label_searchTerm"
6
+ _name="query"
7
+ _label="Suchbegriff"
8
+ _labelClass=""
9
+ _description=""
10
+ _type="text"
11
+ _value=this.queryString
12
+ _autocompleteOff=true
13
+ _autoSuggestFeature=true
14
+ }}
15
+ </div>
16
+ <div class="relative flex h-12 basis-full width-full">
17
+ <div class="relative h-12 basis-full">
18
+ <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">
19
+ <option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
20
+ "website_name_search_button"}}</option>
21
+ <option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
22
+ "search_select_all"}}</option>
23
+ </select>
24
+ <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 ">
25
+ {{loca "search_form_label_searchType"}}
26
+ </label>
27
+ <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">
28
+ {{~> components/base/image/icon _icon="arrow-down" _addClass="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
29
+ </div>
30
+ </div>
31
+ <div class="relative">
32
+ <button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
33
+ 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">
34
+ {{> components/base/image/icon _icon="suche" _addClass="sb-icon w-5 h-5 fill-white dark:fill-text-dark"}}
35
+ <span class="hide">{{loca "search_button_label"}}</span>
36
+ </button>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </form>
package/dist/views_static/components/forms/components/input.hbs CHANGED
@@ -4,7 +4,7 @@
4
4
  x-init="validateField()"
5
5
  x-ignore
6
6
  >
7
- <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white 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"
7
+ <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white 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 {{#if _autoSuggestFeature}}js-load{{/if}}"
8
8
  :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
9
9
  x-model="input{{getRandom}}"
10
10
  id="input{{getRandom}}"
package/dist/views_static/components/page/search/search_form.hbs ADDED
@@ -0,0 +1,40 @@
1
+ <form id="search_form" method="GET" action="#">
2
+ <div class="relative flex px-4 pt-6 pb-6 mt-8 mb-8 bg-highlight-1 dark:bg-highlight-1-dark sm:px-4 sm:pt-4 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
3
+ <div class="relative h-12 basis-full width-full">
4
+ {{~> components/forms/components/input
5
+ _locaKey="search_form_label_searchTerm"
6
+ _name="query"
7
+ _label="Suchbegriff"
8
+ _labelClass=""
9
+ _description=""
10
+ _type="text"
11
+ _value=this.queryString
12
+ _autocompleteOff=true
13
+ _autoSuggestFeature=true
14
+ }}
15
+ </div>
16
+ <div class="relative flex h-12 basis-full width-full">
17
+ <div class="relative h-12 basis-full">
18
+ <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">
19
+ <option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
20
+ "website_name_search_button"}}</option>
21
+ <option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
22
+ "search_select_all"}}</option>
23
+ </select>
24
+ <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 ">
25
+ {{loca "search_form_label_searchType"}}
26
+ </label>
27
+ <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">
28
+ {{~> components/base/image/icon _icon="arrow-down" _addClass="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
29
+ </div>
30
+ </div>
31
+ <div class="relative">
32
+ <button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
33
+ 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">
34
+ {{> components/base/image/icon _icon="suche" _addClass="sb-icon w-5 h-5 fill-white dark:fill-text-dark"}}
35
+ <span class="hide">{{loca "search_button_label"}}</span>
36
+ </button>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </form>
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "1.114.103",
9
+ "version": "1.114.104",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/stories/views/components/forms/components/input.hbs CHANGED
@@ -4,7 +4,7 @@
4
4
  x-init="validateField()"
5
5
  x-ignore
6
6
  >
7
- <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white 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"
7
+ <input class="relative w-full h-12 pt-4 pl-4 placeholder-transparent bg-white 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 {{#if _autoSuggestFeature}}js-load{{/if}}"
8
8
  :class="{'border-form-highlight dark:form-highlight-dark': hideError(),'border-error dark:border-error-dark': hideDescription() }"
9
9
  x-model="input{{getRandom}}"
10
10
  id="input{{getRandom}}"
package/src/stories/views/components/page/search/search_form.hbs ADDED
@@ -0,0 +1,40 @@
1
+ <form id="search_form" method="GET" action="#">
2
+ <div class="relative flex px-4 pt-6 pb-6 mt-8 mb-8 bg-highlight-1 dark:bg-highlight-1-dark sm:px-4 sm:pt-4 sm:pb-6 sm:mt-8 article-full-width sm:article-narrow">
3
+ <div class="relative h-12 basis-full width-full">
4
+ {{~> components/forms/components/input
5
+ _locaKey="search_form_label_searchTerm"
6
+ _name="query"
7
+ _label="Suchbegriff"
8
+ _labelClass=""
9
+ _description=""
10
+ _type="text"
11
+ _value=this.queryString
12
+ _autocompleteOff=true
13
+ _autoSuggestFeature=true
14
+ }}
15
+ </div>
16
+ <div class="relative flex h-12 basis-full width-full">
17
+ <div class="relative h-12 basis-full">
18
+ <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">
19
+ <option class="text-gray-scorpion dark:text-text-dark" value="false" {{#unless this.searchInAllWebsites}} selected{{/unless}}>{{loca
20
+ "website_name_search_button"}}</option>
21
+ <option class="text-gray-scorpion dark:text-text-dark" value="true" {{#if this.searchInAllWebsites}} selected{{/if}}>{{loca
22
+ "search_select_all"}}</option>
23
+ </select>
24
+ <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 ">
25
+ {{loca "search_form_label_searchType"}}
26
+ </label>
27
+ <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">
28
+ {{~> components/base/image/icon _icon="arrow-down" _addClass="sb-icon w-3 h-3 fill-form-highlight dark:fill-form-highlight-dark" ~}}
29
+ </div>
30
+ </div>
31
+ <div class="relative">
32
+ <button aria-label="{{loca "search_input_aria_submit" }}" type="submit"
33
+ 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">
34
+ {{> components/base/image/icon _icon="suche" _addClass="sb-icon w-5 h-5 fill-white dark:fill-text-dark"}}
35
+ <span class="hide">{{loca "search_button_label"}}</span>
36
+ </button>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </form>