From 74379b76169733800c78b58cb199172872e9548a Mon Sep 17 00:00:00 2001
From: Rhiannon Journey <rhiannonjourney@gmail.com>
Date: Fri, 12 Apr 2024 17:09:43 -0400
Subject: [PATCH] Add new Callout form component

Introduces a new collapsible form component named Callout in the Filament Toolbox, with customizability options such as icon characteristics and content display methods. The component contains properties and methods to provision display options like Markdown or HTML content, icon color selection, and more.
---
 .../views/forms/components/callout.blade.php  |  86 +++++++++++
 src/Forms/Components/Callout.php              | 140 ++++++++++++++++++
 2 files changed, 226 insertions(+)
 create mode 100644 resources/views/forms/components/callout.blade.php
 create mode 100644 src/Forms/Components/Callout.php

diff --git a/resources/views/forms/components/callout.blade.php b/resources/views/forms/components/callout.blade.php
new file mode 100644
index 0000000..0425fdf
--- /dev/null
+++ b/resources/views/forms/components/callout.blade.php
@@ -0,0 +1,86 @@
+<div
+    @if ($isCollapsible())
+        x-data="{ isCollapsed: {{ $isCollapsed() ? 'true' : 'false' }} }"
+    x-on:open-form-section.window="if ($event.detail.id == $el.id) isCollapsed = false"
+    x-on:collapse-form-section.window="if ($event.detail.id == $el.id) isCollapsed = true"
+    x-on:toggle-form-section.window="if ($event.detail.id == $el.id) isCollapsed = ! isCollapsed"
+    x-on:expand-concealing-component.window="
+            if ($event.detail.id === $el.id) {
+                isCollapsed = false
+                $el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+            }
+        "
+    @endif
+    id="{{ $getId() }}"
+    {{ $attributes->merge($getExtraAttributes())->class([
+        'bg-gray-100 rounded-xl border-gray-300',
+        'dark:bg-gray-900' => config('forms.dark_mode'),
+    ]) }}
+>
+    <div
+        @class([
+            'flex items-center px-4 py-2 bg-gray-100 rtl:space-x-reverse overflow-hidden rounded-t-xl filament-forms-section-header-wrapper',
+            'dark:bg-gray-900' => config('forms.dark_mode'),
+        ])
+        @if ($isCollapsible())
+            x-bind:class="{ 'rounded-b-xl': isCollapsed }"
+        @endif
+    >
+        @if($icon = $getIcon())
+            @php
+                $iconColor = match ($getIconColor()) {
+                    'danger' => 'text-danger-500',
+                    'primary' => 'text-primary-500',
+                    'success' => 'text-success-500',
+                    'warning' => 'text-warning-500',
+                    default => 'text-gray-700',
+                };
+            @endphp
+            <x-dynamic-component
+                :component="$icon"
+                :class="'w-6 h-6 mr-3' . ' ' . $iconColor"
+            />
+        @endif
+
+        <div class="flex-1 filament-forms-section-header">
+            <h3 class="text-xl font-bold tracking-tight">
+                {{ $getHeading() }}
+            </h3>
+        </div>
+
+        @if ($isCollapsible())
+            <button x-on:click="isCollapsed = ! isCollapsed"
+                    x-bind:class="{
+                    '-rotate-180': !isCollapsed,
+                }" type="button"
+                @class([
+                    'flex items-center justify-center w-8 h-8 transform rounded-full text-primary-500 hover:bg-gray-500/5 focus:bg-primary-500/10 focus:outline-none',
+                    '-rotate-180' => ! $isCollapsed(),
+                ])
+            >
+                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                     stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                </svg>
+            </button>
+        @endif
+    </div>
+
+    <div
+        @if ($isCollapsible())
+            x-bind:class="{ 'invisible h-0 !m-0 overflow-y-hidden': isCollapsed }"
+        x-bind:aria-expanded="(! isCollapsed).toString()"
+        @if ($isCollapsed()) x-cloak @endif
+        @endif
+        class=""
+    >
+        <div class="px-4 pb-2">
+            <div @class([
+                "prose max-w-none",
+                "dark:text-gray-100 dark:prose-strong:text-gray-100 dark:prose-strong:font-bold" => config('forms.dark_mode'),
+            ])>
+                {{ $getContent() }}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/Forms/Components/Callout.php b/src/Forms/Components/Callout.php
new file mode 100644
index 0000000..6ca4274
--- /dev/null
+++ b/src/Forms/Components/Callout.php
@@ -0,0 +1,140 @@
+<?php
+
+namespace UnexpectedJourney\FilamentToolbox\Forms\Components;
+
+use Closure;
+use Filament\Forms\Components\Component;
+use Filament\Forms\Components\Concerns\CanBeCollapsed;
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Support\HtmlString;
+use Illuminate\Support\Str;
+
+class Callout extends Component
+{
+    use CanBeCollapsed;
+
+    protected string $view = 'toolbox::forms.components.callout';
+
+    protected string | Htmlable | Closure | null $content = null;
+
+    protected string | Closure | null $heading = null;
+
+    protected bool $isMarkdown = false;
+
+    protected bool $isHtml = false;
+
+    protected string | Closure | null $icon = null;
+
+    protected string | Closure | null $iconColor = null;
+
+    final public function __construct(string | Closure | null $heading = null)
+    {
+        $this->heading($heading);
+    }
+
+    public static function make(string | Closure | null $heading = null): static
+    {
+        $static = app(static::class, ['heading' => $heading]);
+        $static->configure();
+
+        return $static;
+    }
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        $this->columnSpan('full');
+    }
+
+    public function warning(): static
+    {
+        $this->iconColor('warning');
+        $this->icon('heroicon-o-exclamation-triangle');
+
+        return $this;
+    }
+
+    public function help(): static
+    {
+        $this->collapsed(true);
+        $this->icon('heroicon-o-question-mark-circle');
+        $this->iconColor('primary');
+
+        return $this;
+    }
+
+    public function heading(string | Closure | null $heading): static
+    {
+        $this->heading = $heading;
+
+        return $this;
+    }
+
+    public function content(string | Htmlable | Closure | null $content): static
+    {
+        $this->content = $content;
+
+        return $this;
+    }
+
+    public function getContent(): string | Htmlable | null
+    {
+        $content = $this->evaluate($this->content);
+
+        if ($this->isHtml) {
+            return $content instanceof Htmlable
+                ? $content
+                : new HtmlString($content);
+        }
+
+        if ($this->isMarkdown) {
+            return new HtmlString(Str::markdown($content));
+        }
+
+        return $content;
+    }
+
+    public function getHeading(): ?string
+    {
+        return $this->evaluate($this->heading);
+    }
+
+    public function markdown(bool $markdown = true): static
+    {
+        $this->isMarkdown = $markdown;
+
+        return $this;
+    }
+
+    public function html(bool $html = true): static
+    {
+        $this->isHtml = $html;
+
+        return $this;
+    }
+
+    public function icon(string | Closure | null $icon): static
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
+    public function getIcon(): ?string
+    {
+        return $this->evaluate($this->icon);
+    }
+
+    public function iconColor(string | Closure | null $iconColor): static
+    {
+        $this->iconColor = $iconColor;
+
+        return $this;
+    }
+
+    public function getIconColor(): ?string
+    {
+        return $this->evaluate($this->iconColor);
+    }
+}