refactor: info component allow html tooltip content (#633)

Author: alexbarnsley

icons.html

@@ -19,8 +19,7 @@
 
             <x-ark-icon
                 name="sliders-vertical"
-                :class="Arr::toCssClasses([
-                    'transition-default',
+                :class="Arr::toCssClasses(['transition-default',
                     'text-theme-primary-300 hover:text-theme-primary-500' => ! $disabled,
                     'text-theme-secondary-500 cursor-default' => $disabled,
                 ])"

resources/views/components/blog/filter-dropdown.blade.php

@@ -21,8 +21,7 @@
             @if ($topBorder)
                 <div class="flex">
                     <x-ark-divider
-                        :class="Arr::toCssClasses([
-                            'mx-8 lg:ml-5 lg:mr-0',
+                        :class="Arr::toCssClasses(['mx-8 lg:ml-5 lg:mr-0',
                             'hidden lg:block' => $onDocs,
                         ])"
                     />
@@ -48,8 +47,7 @@
             @unless ($borderless)
                 <div class="flex">
                     <x-ark-divider
-                        :class="Arr::toCssClasses([
-                            'sidebar-link-divider mx-8 lg:ml-5 lg:mr-0',
+                        :class="Arr::toCssClasses(['sidebar-link-divider mx-8 lg:ml-5 lg:mr-0',
                             'hidden lg:block' => $onDocs,
                         ])"
                     />

resources/views/docs/sidebar-link.blade.php

@@ -1,12 +1,18 @@
 @props([
     'class' => '',
     'tooltip' => '',
+    'htmlTooltip' => null,
     'type' => 'question',
     'large' => false
 ])
 
 <div
-    data-tippy-content="{{ $tooltip }}"
+    @if ($tooltip)
+        data-tippy-content="{{ $tooltip }}"
+    @elseif ($htmlTooltip)
+        data-tippy-html-content="{{ $htmlTooltip }}"
+    @endif
+
     aria-label="{{ $tooltip }}"
     class="inline-block cursor-pointer {{ $large ? 'p-1.5' : 'p-1' }} transition-default rounded-full bg-theme-primary-100 text-theme-primary-600 dark:bg-theme-secondary-800 dark:text-theme-secondary-600 hover:text-white hover:bg-theme-primary-700 dark:hover:text-theme-secondary-800 dark:hover:bg-theme-secondary-600 outline-none focus-visible:ring-2 focus-visible:ring-theme-primary-500 {{ $class }}"
     tabindex="0"

resources/views/info.blade.php

@@ -8,8 +8,7 @@
     'editOption' => true,
 ])
 
-<x-ark-container :container-class="Arr::toCssClasses([
-    'flex-col pb-8',
+<x-ark-container :container-class="Arr::toCssClasses(['flex-col pb-8',
     'pt-8 md:pt-8' => $compact,
     'pt-10 md:pt-12' => ! $compact,
 ])">

resources/views/pages/documentation.blade.php

@@ -50,8 +50,7 @@
 
         @if ($icon && $iconAlignment === 'left')
             <x-ark-icon
-                :class="Arr::toCssClasses([
-                    'mr-1 flex-shrink-0 transition-default',
+                :class="Arr::toCssClasses(['mr-1 flex-shrink-0 transition-default',
                     $activeIconColors => $isCurrent || $active,
                     $iconColors => ! $isCurrent || $active,
                 ])"
@@ -63,8 +62,7 @@
 
         @if ($icon && $iconAlignment === 'right')
             <x-ark-icon
-                :class="Arr::toCssClasses([
-                    'flex-shrink-0 transition-default',
+                :class="Arr::toCssClasses(['flex-shrink-0 transition-default',
                     $activeIconColors => $isCurrent || $active,
                     $iconColors => ! $isCurrent || $active,
                 ])"

resources/views/sidebar-link.blade.php

@@ -11,16 +11,13 @@
 ])
 
 <x-ark-rich-select
-    :wrapper-class="Arr::toCssClasses([
-        'p-2 w-full rounded-xl border md:p-0 md:w-auto md:border-0 border-theme-primary-100 dark:border-theme-secondary-800',
+    :wrapper-class="Arr::toCssClasses(['p-2 w-full rounded-xl border md:p-0 md:w-auto md:border-0 border-theme-primary-100 dark:border-theme-secondary-800',
         $wrapperClass,
     ])"
-    :dropdown-class="Arr::toCssClasses([
-        'right-0 mt-2 origin-top-right',
+    :dropdown-class="Arr::toCssClasses(['right-0 mt-2 origin-top-right',
         $dropdownClass,
     ])"
-    :button-class="Arr::toCssClasses([
-        'flex relative items-center py-4 mr-10 w-full font-semibold text-left md:inline md:items-end md:px-8 focus:outline-none text-theme-secondary-900 dark:text-theme-secondary-200',
+    :button-class="Arr::toCssClasses(['flex relative items-center py-4 mr-10 w-full font-semibold text-left md:inline md:items-end md:px-8 focus:outline-none text-theme-secondary-900 dark:text-theme-secondary-200',
         $buttonClass,
     ])"
     :icon-class="$iconClass"