Added Table view layout

components/table-view/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 TableView extends Component
+{
+    use HasBemClasses;
+    /**
+     * The Table Row main column text
+     */
+    public string $rowTitle;
+
+    /**
+     * The Table Row other columns
+     */
+    public array $columns;
+
+    /**
+     * The Table Row link
+     */
+    public string $link;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(string $rowTitle, array $columns, string $link)
+    {
+        $this->rowTitle = $rowTitle;
+        $this->columns = $columns;
+        $this->link = $link;
+    }
+
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.table-view');
+    }
+}

components/table-view/style.scss

@@ -0,0 +1,75 @@
+.list-item {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 1.5rem 8.5277777778% 1.5rem 0;
+    position: relative;
+    width: 100%;
+    border-bottom: 0.1rem solid rgba(33, 34, 54, .1);
+
+    &__title {
+        color: #212236;
+        font-family: false semibold, Helvetica, Arial, sans-serif;
+        font-size: 1.25rem;
+        font-style: normal;
+        font-weight: 600;
+        min-width: 57.3611111111%;
+        width: 50%;
+    }
+
+    &__infos {
+        align-items: center;
+        display: flex;
+        flex: 1;
+        flex-shrink: 0;
+        flex-wrap: wrap;
+        gap: 1rem;
+        justify-content: space-between;
+        min-width: 300px;
+    }
+
+    &__info {
+        color: rgba(33, 34, 54, .5);
+        flex-shrink: 0;
+        font-family: IBM Plex Mono, Helvetica, Arial, sans-serif;
+        font-size: .75rem;
+        font-style: normal;
+        font-weight: 400;
+        text-transform: uppercase;
+    }
+    &__link{
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        text-indent: -999999px;
+        top: 0;
+        z-index: 1;
+    }
+    &__icon{
+        background-color: #fff;
+        border-radius: 100vw;
+        box-shadow: inset 0 0 0 1px #f1f1f2;
+        display: block;
+        height: 2.75rem;
+        margin-left: auto;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: all .2s cubic-bezier(.25,.46,.45,.94);
+        width: 2.75rem;
+
+        &:after{
+            align-items: center;
+            content: url("../../icons/arrow-right.svg");
+            scale: 30%;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            justify-content: center;
+            line-height: 1;
+        }
+    }
+}

components/table-view/view.blade.php

@@ -0,0 +1,12 @@
+<article class="list-item">
+    <h3 class="list-item__title">
+        {{ $rowTitle }}
+    </h3>
+    <dl class="list-item__infos">
+        @foreach($columns as $column)
+            <dt class="list-item__info">{{ $column }}</dt>
+        @endforeach
+    </dl>
+    <a href="{{ $link }}" class="list-item__link">Voir la ressource</a>
+    <span aria-hidden="true" class="list-item__icon"></span>
+</article>

src/Components/Publishers/TableView.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace Whitecube\LaravelPreset\Components\Publishers;
+
+use Whitecube\LaravelPreset\Components\File;
+use Whitecube\LaravelPreset\Components\FilesCollection;
+use Whitecube\LaravelPreset\Components\PublisherInterface;
+
+class TableView implements PublisherInterface
+{
+    public array $columns;
+    /**
+     * Get the component's displayable name.
+     */
+    public function label(): string
+    {
+        return 'TableView';
+    }
+
+    /**
+     * Let the publisher prompt for eventual extra input
+     * and return a collection of publishable files.
+     */
+    public function handle(): FilesCollection
+    {
+        $style = File::makeFromStub(
+            stub: 'components/table-view/style.scss',
+            destination: resource_path('sass/parts/_table-view.scss'),
+        );
+
+        $view = File::makeFromStub(
+            stub: 'components/table-view/view.blade.php',
+            destination: resource_path('views/components/table-view.blade.php'),
+        );
+
+        $component = File::makeFromStub(
+            stub: 'components/table-view/Component.php',
+            destination: base_path('app/View/Components/TableView.php'),
+        );
+
+        return FilesCollection::make([$style, $view, $component]);
+    }
+
+    /**
+     * Get the component's usage instructions
+     */
+    public function instructions(): ?string
+    {
+        return "1. Add `@import 'parts/table-view';` to `resources/sass/app.scss`\r\n2. Use the blade component: `<x-table-view column_title=\"Première colonne\" :\$columns link=\"#\" />`";
+    }
+}