Onboarding + Hover + Webform

digital-services-act · Jun 14, 2024 · 450ca0d · 450ca0d
1 parent 1082fde
commit 450ca0d
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 26 deletions.
diff --git a/lang/en/pages.php b/lang/en/pages.php
@@ -11,7 +11,7 @@
  "Faq" => "Frequently Asked Questions",
  "Search for Statements of Reasons" => "Search for Statements of Reasons",
  "Create a Statement of Reason" => "Create a Statement of Reason",
- 'Onboarding' => 'Onboarding',
+ 'Onboarding' => 'Onboarding - How To',
  'Webform Documentation' => "Webform Documentation"
 
 ];
diff --git a/resources/views/components/ecl/footer.blade.php b/resources/views/components/ecl/footer.blade.php
@@ -51,7 +51,7 @@ class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link"
  <li class="ecl-site-footer__list-item">
  <a href="{{ route('page.show', [__('menu.General_link')]) }}"
  class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link"
- aria-label="{{__('menu.General')}}">{{__('menu.FAQ')}}</a></li>
+ aria-label="{{__('menu.General')}}">{{__('pages.Faq')}}</a></li>
 
  <li class="ecl-site-footer__list-item">
  <a href="{{ route('page.show', ['page' => 'announcements']) }}"

diff --git a/resources/views/components/ecl/header.blade.php b/resources/views/components/ecl/header.blade.php
@@ -147,16 +147,20 @@ class="ecl-link ecl-link--standalone ecl-menu__sublink">
  {{__('menu.Global Documentation')}}
  </a>
  </li>
- <li class="ecl-menu__subitem" data-ecl-menu-subitem="">
- <a href="{{ route('profile.page.show', ['api-documentation']) }}"
- class="ecl-link ecl-link--standalone ecl-menu__sublink">{{__('menu.API Documentation')}}</a>
- </li>
 
  <li class="ecl-menu__subitem" data-ecl-menu-subitem="">
  <a href="{{ route('profile.page.show', ['onboarding']) }}"
  class="ecl-link ecl-link--standalone ecl-menu__sublink">{{__('pages.Onboarding')}}</a>
  </li>
 
+
+ <li class="ecl-menu__subitem" data-ecl-menu-subitem="">
+ <a href="{{ route('profile.page.show', ['api-documentation']) }}"
+ class="ecl-link ecl-link--standalone ecl-menu__sublink">{{__('menu.API Documentation')}}</a>
+ </li>
+
+
+
  <li class="ecl-menu__subitem" data-ecl-menu-subitem="">
  <a href="{{ route('profile.page.show', ['webform-documentation']) }}"
  class="ecl-link ecl-link--standalone ecl-menu__sublink">{{__('pages.Webform Documentation')}}</a>

diff --git a/resources/views/components/ecl/label.blade.php b/resources/views/components/ecl/label.blade.php
@@ -1,3 +1,17 @@
 @props(['label' => 'label', 'required' => false, 'for' => 'for', 'name' => 'name', 'type' => 'label', 'justlabel' => false, 'info_text'=>false])
-<{{ $type }} for="{{ $for }}" class="ecl-form-label @error($name)ecl-form-label--invalid @enderror">{!! $label !!} @if(!$justlabel)@if($required)<span class="ecl-form-label__required"> *</span>@else<span class="ecl-form-label__optional"> (optional)</span>@endif @endif</{{ $type }}>
+<div class="ecl-u-type-paragraph" style="max-width:none !important; ">
+ <{{ $type }} for
+ ="{{ $for }}" style="white-space: normal !important; display: inline !important;" class="ecl-form-label @error($name)ecl-form-label--invalid @enderror">{!! $label !!}
+ @if(!$justlabel)
+ @if($required)
+ <span class="ecl-form-label__required"> *</span>
+ @else
+ <span class="ecl-form-label__optional"> (optional)</span>
+ @endif
+ @endif
+ @if($info_text)
+ <x-hover-text :hoverText="$info_text"/>
+ @endif
+</{{ $type }}>
 
+ </div>
diff --git a/resources/views/components/ecl/popover.blade.php b/resources/views/components/ecl/popover.blade.php
@@ -0,0 +1,29 @@
+@props(['text'=>'','select_item'=>'Select an Item', 'justlabel' => false, 'select_all' => 'Select All', 'label' => 'label', 'required' => false, 'help' => false, 'name' => 'name', 'id' => 'id', 'options' => [], 'size' => 'l', 'default' => []])
+@php
+ $randomID = substr(str_shuffle(str_repeat('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', ceil(10/strlen('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')))), 1, 10);
+@endphp
+
+
+
+<div class="ecl-popover" data-ecl-auto-init="Popover"><a href="#{{$randomID}}"
+ class="ecl-link ecl-link--standalone ecl-link--icon ecl-popover__toggle"
+ aria-controls="{{$randomID}}" data-ecl-popover-toggle
+ aria-expanded="false" aria-label="Popover toggle">
+ <svg class="ecl-icon ecl-icon--m ecl-link__icon" focusable="false" aria-hidden="true">
+ <x-ecl.icon icon="information"/>
+ </svg>
+ </a>
+ <div id="{{$randomID}}" class="ecl-popover__container" hidden>
+ <div class="ecl-popover__scrollable">
+ <button class="ecl-button ecl-button--tertiary ecl-popover__close ecl-button--icon-only" type="button"
+ data-ecl-popover-close><span class="ecl-button__container"><span class="ecl-button__label"
+ data-ecl-label="true">Close</span><svg
+ class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false" aria-hidden="true"
+ data-ecl-icon>
+ <x-ecl.icon icon="close"/>
+ </svg></span></button>
+ <div class="ecl-popover__content">{{$text}}
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/resources/views/components/ecl/select-multiple.blade.php b/resources/views/components/ecl/select-multiple.blade.php
@@ -1,6 +1,10 @@
 @props(['enter_keyword'=>'Enter keyword','select_item'=>'Select an Item', 'justlabel' => false, 'select_all' => 'Select All', 'label' => 'label', 'required' => false, 'help' => false, 'name' => 'name', 'id' => 'id', 'options' => [], 'size' => 'l', 'default' => [], 'info_text' => null])
 <div class="ecl-form-group ecl-u-mb-l" id="{{ $id }}-multisel">
- <x-ecl.label :label="$label" :for="$id" :name="$name" :required="$required" :justlabel="$justlabel"/>
+ <x-ecl.label :label="$label" :for="$id" :name="$name" :required="$required" :justlabel="$justlabel" :info_text="$info_text"/>
+ @if($info_text)
+{{-- <x-hover-text :hoverText="$info_text"/>--}}
+{{-- <x-ecl.popover :id="$id" :text="$info_text"/>--}}
+ @endif
  <x-ecl.help :help="$help"/>
  <x-ecl.error-feedback :name="$name"/>
  <div class="ecl-select__container ecl-select__container--{{ $size }}">
@@ -30,9 +34,7 @@
  </div>
  </div>
 
- @if($info_text)
- <x-hover-text :hoverText="$info_text"/>
- @endif
+
 
 
 </div>

diff --git a/resources/views/components/ecl/select.blade.php b/resources/views/components/ecl/select.blade.php
@@ -1,6 +1,10 @@
-@props(['label' => 'label', 'justlabel' => false, 'required' => false, 'help' => false, 'name' => 'name', 'id' => 'id', 'options' => [], 'size' => 'l', 'default' => null, 'allow_null' => false, 'grouped' => false])
+@props(['label' => 'label', 'justlabel' => false, 'required' => false, 'help' => false, 'name' => 'name', 'id' => 'id', 'options' => [], 'size' => 'l', 'default' => null, 'allow_null' => false, 'grouped' => false, 'info_text'=>null])
 <div class="ecl-form-group ecl-u-mb-l" id="div_{{$id}}">
- <x-ecl.label :label="$label" :for="$id" :name="$name" :required="$required" :justlabel="$justlabel" />
+ <x-ecl.label :label="$label" :for="$id" :name="$name" :required="$required" :justlabel="$justlabel" :info_text="$info_text"/>
+ @if($info_text)
+{{-- <x-hover-text :hoverText="$info_text"/>--}}
+{{-- <x-ecl.popover :id="$id" :text="$info_text"/>--}}
+ @endif
  <x-ecl.help :help="$help" />
  <x-ecl.error-feedback :name="$name" />
  <div class="ecl-select__container ecl-select__container--{{ $size }}">
@@ -20,4 +24,6 @@
  </svg>
  </div>
  </div>
+
+
 </div>
diff --git a/resources/views/components/ecl/textfield.blade.php b/resources/views/components/ecl/textfield.blade.php
@@ -1,10 +1,10 @@
-@props(['label' => 'label', 'required' => false, 'help' => false, 'name' => 'name', 'id' => 'id', 'size' => 'l', 'placeholder' => '', 'value' => null, 'justlabel' => false, 'readonly' => false, 'hoverText'=>false])
+@props(['label' => 'label', 'required' => false, 'help' => false, 'name' => 'name', 'id' => 'id', 'size' => 'l', 'placeholder' => '', 'value' => null, 'justlabel' => false, 'readonly' => false, 'info_text'=>null])
 
 <div class="ecl-form-group ecl-u-mb-l" id="div_{{$id}}">
- <x-ecl.label :label="$label" :for="$id" :name="$name" :required="$required" :justlabel="$justlabel" />
- @if($hoverText)<x-hover-text :hoverText="$hoverText" />@endif
+ <x-ecl.label :label="$label" :for="$id" :name="$name" :required="$required" :justlabel="$justlabel" :info_text="$info_text"/>
  <x-ecl.help :help="$help" />
  <x-ecl.error-feedback :name="$name" />
  <input @if($readonly) readonly @endif type="text" name="{{ $name }}" id="{{ $id }}" class="ecl-text-input ecl-text-input--{{ $size }} @error($name)ecl-text-input--invalid @enderror" placeholder="{{ $placeholder }}" value="{{old($name, $value)}}"/>
+
 </div>
 
diff --git a/resources/views/components/hover-text.blade.php b/resources/views/components/hover-text.blade.php
@@ -7,12 +7,12 @@
 
  .hover-text {
  visibility: hidden;
- width: 200px;
- background-color: black;
+ width: 300px;
+ background-color: #1b3f7e;
  color: #fff;
  text-align: center;
  border-radius: 6px;
- padding: 5px 10px;
+ padding: 5px 5px;
  position: absolute;
  z-index: 1;
  opacity: 0;
@@ -29,14 +29,14 @@
  $randomID = substr(str_shuffle(str_repeat('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', ceil(10/strlen('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ')))), 1, 10);
 @endphp
 
-<div class="hover-container" onmousemove="showHoverText(event)">
- <svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-u-type-color-primary" focusable="false" aria-hidden="true" style="vertical-align: bottom">
+<span class="hover-container" onmousemove="showHoverText(event)">
+ <svg class="ecl-icon ecl-icon--m ecl-link__icon ecl-u-type-color-primary ecl-u-ml-s" focusable="false" aria-hidden="true" style="vertical-align: middle;">
  <x-ecl.icon icon="information"/>
  </svg>
- <div class="hover-text" id="{{$randomID}}">
+ <span class="hover-text" id="{{$randomID}}">
  {{ $hoverText }}
- </div>
-</div>
+ </span>
+</span>
 
 <script>
  function showHoverText(event) {

diff --git a/resources/views/components/statement/form.blade.php b/resources/views/components/statement/form.blade.php
@@ -10,7 +10,7 @@
  select_all="All"
  select_item="{{__('statement-create.Select visibility decision(s)')}}"
  enter_keyword="Enter a visibility decision"
- info_text="Additional Information AAA"
+ info_text="Additional Information for Visibility Restriction"
 />
 
 <x-ecl.textfield :label="Statement::LABEL_STATEMENT_FORM_OTHER" name="decision_visibility_other"
@@ -32,6 +32,7 @@
  default="{{ $statement->decision_monetary }}"
  justlabel="true"
  :allow_null="true"
+ info_text="Additional Information for Monetary Payments suspension"
 />
 
 
@@ -113,7 +114,7 @@
  required="true"/>
 
 <x-ecl.textfield :label="Statement::LABEL_STATEMENT_DECISION_GROUND_REFERENCE_URL" name="decision_ground_reference_url" id="decision_ground_reference_url"
- hover-text="Some help about the decision_ground_reference_url"
+ info_text="Some help about the decision_ground_reference_url"
 />
 
 <x-ecl.textfield :label="Statement::LABEL_STATEMENT_ILLEGAL_CONTENT_GROUND" name="illegal_content_legal_ground"