Added image layout

components/image/Component.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+use Whitecube\BemComponents\HasBemClasses;
+
+class LayoutImage extends Component
+{
+    use HasBemClasses;
+
+    /**
+     * The LayoutImage's image.
+     */
+    public string $image;
+
+    /**
+     * The LayoutImage's image alt.
+     */
+    public string $alt;
+
+    /**
+     * The LayoutImage's caption.
+     */
+    public string $caption;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(string $image, string $alt, string $caption)
+    {
+        $this->image = $image;
+        $this->alt = $alt;
+        $this->caption = $caption;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.layout-image');
+    }
+}

components/image/Layout.php

@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Layouts;
+
+use Hiker\Cms\Layouts\BaseLayout;
+use Hiker\Components\DataList\DataList;
+use Hiker\Components\Editor\Step;
+use Hiker\Components\Fields\Image\Image as HikerImage;
+use Hiker\Components\Fields\Text\Text;
+use Hiker\Components\Image\Image as ImageComponent;
+use Hiker\Components\Text\Text as TextComponent;
+use Hiker\Tracks\Baggage;
+use Illuminate\Support\Facades\Storage;
+
+class Image extends BaseLayout
+{
+    /**
+     * The label of the layout
+     */
+    public function label(): string
+    {
+        return 'Image';
+    }
+
+    public function view(): string
+    {
+        return 'image';
+    }
+
+    /**
+     * The list of steps to display in the form
+     */
+    public function form(Baggage $bag): array
+    {
+        return [
+            Step::make(static::label(), 'edit_image_layout')
+                ->fields([
+                    HikerImage::make('Image', 'image')
+                        ->rules('required')
+                        ->disk('public'),
+
+                    Text::make('Alternative text', 'alt')
+                        ->rules('required')
+                        ->help('<strong>Hidden</strong>. An alternative text is used to give a description of the content of an image so that the visually impaired and search engines can understand the image.'),
+
+                    Text::make('Caption', 'caption')
+                        ->rules('required'),
+                ]),
+        ];
+    }
+
+    /**
+     * The layout's display components
+     */
+    public function display(): array
+    {
+        return [
+            DataList::make()
+                ->row('Image', ImageComponent::make(Storage::url($this->image))->aspectRatio('16/9'))
+                ->row('Alternative text', TextComponent::make($this->alt))
+                ->row('Caption', TextComponent::make($this->caption)),
+        ];
+    }
+
+    /**
+     * Extract the values from the bag to store them in the database.
+     */
+    public function fillAttributes(Baggage $bag): array
+    {
+        return $bag->only(['image', 'alt', 'caption']);
+    }
+}

components/image/style.scss

@@ -0,0 +1,31 @@
+.layout-image {
+    width: 100%;
+    margin: rem(32) 0;
+
+    &__fig {
+        margin: 0 auto;
+        width: col(6, 12);
+    }
+
+    &__img {
+        width: 100%;
+    }
+
+    &__caption {
+        font-size: rem(12);
+        line-height: 130%;
+        margin-top: rem(12);
+    }
+
+    @include mq($until: l) {
+        &__fig {
+            width: col(10, 12);
+        }
+    }
+
+    @include mq($until: s) {
+        &__fig {
+            width: auto;
+        }
+    }
+}

components/image/view.blade.php

@@ -0,0 +1,9 @@
+<div {{ $attributes->bem('layout-image') }}>
+    <figure class="layout-image__fig">
+        <img class="layout-image__img" src="{{ $image }}" alt="{{ $alt }}">
+
+        @if($caption)
+            <figcaption class="layout-image__caption">{{ $caption }}</figcaption>
+        @endif
+    </figure>
+</div>

src/Components/Publishers/Image.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace Whitecube\LaravelPreset\Components\Publishers;
+
+use Whitecube\LaravelPreset\Components\File;
+use Whitecube\LaravelPreset\Components\FilesCollection;
+use Whitecube\LaravelPreset\Components\PublisherInterface;
+
+class Image implements PublisherInterface
+{
+    /**
+     * Get the component's displayable name.
+     */
+    public function label(): string
+    {
+        return 'Image';
+    }
+
+    /**
+     * Let the publisher prompt for eventual extra input
+     * and return a collection of publishable files.
+     */
+    public function handle(): FilesCollection
+    {
+        $style = File::makeFromStub(
+            stub: 'components/image/style.scss',
+            destination: resource_path('sass/parts/_layout-image.scss'),
+        );
+
+        $view = File::makeFromStub(
+            stub: 'components/image/view.blade.php',
+            destination: resource_path('views/components/layout-image.blade.php'),
+        );
+
+        $component = File::makeFromStub(
+            stub: 'components/image/Component.php',
+            destination: base_path('app/View/Components/LayoutImage.php'),
+        );
+
+        $layout = File::makeFromStub(
+            stub: 'components/image/Layout.php',
+            destination: base_path('app/Layouts/Image.php'),
+        );
+
+        return FilesCollection::make([
+            $style,
+            $view,
+            $component,
+            $layout
+        ]);
+    }
+
+    /**
+     * Get the component's usage instructions
+     */
+    public function instructions(): ?string
+    {
+        return "1. Add `@import 'parts/layout-image';` to `resources/sass/app.scss`\r\n2. Use the blade component: `<x-layout-image :image=\"asset('img/money.png')\" alt=\"the money these components will give us !!!\" caption=\"all the money !!!\" />`";
+        }
+}