8000 Add Post and Container components · whitecube/laravel-preset@967d28e · GitHub
[go: up one dir, main page]
Skip to conte 8000 nt

Commit 967d28e

Browse files
theokbokkitheokbokki
committed
Add Post and Container components
1 parent a892176 commit 967d28e

File tree

8 files changed

+228
-7
lines changed

8 files changed

+228
-7
lines changed

‎components/container/Component.php

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<?php
2+
3+
namespace App\View\Components;
4+
5+
use Closure;
6+
use Illuminate\Contracts\View\View;
7+
use Illuminate\View\Component;
8+
use Whitecube\BemComponents\HasBemClasses;
9+
10+
class Container extends Component
11+
{
12+
use HasBemClasses;
13+
14+
/**
15+
* The title of the section
16+
*/
17+
public ?string $title;
18+
19+
/**
20+
* The columns for the grid
21+
*/
22+
public ?string $cols;
23+
24+
public function __construct(?string $cols = null, ?string $title = null)
25+
{
26+
$this->title = $title;
27+
$this->cols = $cols;
28+
}
29+
30+
/**
31+
* Get the view / contents that represent the component.
32+
*/
33+
public function render(): View|Closure|string
34+
{
35+
return view('components.container');
36+
}
37+
}

‎components/container/style.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.container {
2+
&__content {
3+
display: grid;
4+
column-gap: gutter($grid_columns);
5+
row-gap: rem(24);
6+
7+
@for $i from 1 through 6 {
8+
&[data-cols="#{$i}"] {
9+
grid-template-columns: repeat(auto-fill, minmax(col(1, $i) - gutter($grid_columns), 1fr));
10+
}
11+
}
12+
13+
&[data-cols] {
14+
@include mq($until: l) {
15+
grid-template-columns: repeat(auto-fill, minmax(col(1, 2) - gutter($grid_columns), 1fr));
16+
}
17+
18+
@include mq($until: s) {
19+
grid-template-columns: 1fr;
20+
}
21+
}
22+
}
23+
}

‎components/container/view.blade.php

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<{{ isset($title) ? 'section' : 'div' }} {{ $attributes->bem('container') }}>
2+
@isset($title)
3+
<h2 class="container__title sro">{{ $title }}</h2>
4+
@endisset
5+
<div class="container__content"
6+
@isset($cols) data-cols="{{ $cols }}" @endisset
7+
>
8+
{{ $slot }}
9+
</div>
10+
</section>

‎components/post/Component.php

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,47 @@ class Post extends Component
1111
{
1212
use HasBemClasses;
1313

14+
/**
15+
* The title of the post
16+
*/
17+
public string $title;
18+
19+
/**
20+
* The introductory text of the post
21+
* For example, a short summary or the first couple lines
22+
*/
23+
public string $text;
24+
25+
/**
26+
* Infos about the post
27+
* For example, the author name or the publish date
28+
*/
29+
public string $infos;
30+
31+
/**
32+
* The link to the post
33+
*/
34+
public string $link;
35+
36+
/**
37+
* The text of the "read more" link
38+
*/
39+
public string $more;
40+
41+
public function __construct(
42+
string $title,
43+
string $text,
44+
string $infos,
45+
string $link,
46+
string $more,
47+
) {
48+
$this->title = $title;
49+
$this->text = $text;
50+
$this->infos = $infos;
51+
$this->link = $link;
52+
$this->more = $more;
53+
}
54+
1455
/**
1556
* Get the view / contents that represent the component.
1657
*/

‎components/post/style.scss

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,51 @@
11
.post {
2-
3-
}
2+
display: flex;
3+
flex-direction: column;
4+
gap: rem(12);
5+
position: relative;
6+
7+
&__title {
8+
font-size: rem(20);
9+
line-height: 140%;
10+
font-weight: 700;
11+
}
12+
13+
&__link {
14+
color: color(text-primary);
15+
text-decoration: none;
16+
17+
&:before {
18+
content: "";
19+
@include cover();
20+
}
21+
}
22+
23+
&__txt {
24+
line-height: 160%;
25+
color: color(text-secondary);
26+
overflow: hidden;
27+
text-overflow: ellipsis;
28+
display: -webkit-box;
29+
-webkit-box-orient: vertical;
30+
-webkit-line-clamp: 2;
31+
}
32+
33+
&__infos {
34+
color: color(text-secondary);
35+
line-height: 160%;
36+
}
37+
38+
&__more {
39+
font-size: rem(13);
40+
color: color(text-primary);
41+
font-weight: 700;
42+
43+
&:before {
44+
content: "";
45+
display: inline-block;
46+
font-size: rem(10);
47+
@include icon(arrow-right);
48+
margin-right: rem(11);
49+
}
50+
}
51+
}

‎components/post/view.blade.php

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
<article></article>
1+
<article {{ $attributes->bem('post') }}>
2+
<h2 class="post__title">
3+
<a href="{{ $link }}" class="post__link">{{ $title }}</a>
4+
</h2>
5+
<p class="post__infos">{{ $infos }}</p>
6+
<p class="post__txt">{{ $text }}</p>
7+
<p class="post__more">{{ $more }}</p>
8+
</article>

‎src/Components/Publishers/Container.php

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<?php
2+
3+
namespace Whitecube\LaravelPreset\Components\Publishers;
4+
5+
use Whitecube\LaravelPreset\Components\File;
6+
use Whitecube\LaravelPreset\Components\FilesCollection;
7+
use Whitecube\LaravelPreset\Components\PublisherInterface;
8+
9+
class Container implements PublisherInterface
10+
{
11+
/**
12+
* Get the component's displayable name.
13+
*/
14+
public function label(): string
15+
{
16+
return 'Container';
17+
}
18+
19+
/**
20+
* Let the publisher prompt for eventual extra input
21+
* and return a collection of publishable files.
22+
*/
23+
public function handle(): FilesCollection
24+
{
25+
$style = File::makeFromStub(
26+
stub: 'components/container/style.scss',
27+
destination: resource_path('sass/parts/_container.scss'),
28+
);
29+
30+
$view = File::makeFromStub(
31+
stub: 'components/container/view.blade.php',
32+
destination: resource_path('views/components/container.blade.php'),
33+
);
34+
35+
$component = File::makeFromStub(
36+
stub: 'components/container/Component.php',
37+
destination: base_path('app/View/Components/Container.php'),
38+
);
39+
40+
return FilesCollection::make([$style, $view, $component]);
41+
}
42+
43+
/**
44+
* Get the component's usage instructions
45+
*/
46+
public function instructions(): ?string
47+
{
48+
return "1. Add `@import 'parts/post';` to `resources/sass/app.scss`\r\n2. Use the blade component: `<x-container cols=\"4\">{{-- your content --}}</x-container>`";
49+
}
50+
}

‎src/Components/Publishers/Post.php

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ public function label(): string
2323
public function handle(): FilesCollection
2424
{
2525
$style = File::makeFromStub(
26-
stub: 'components/post/part.scss',
26+
stub: 'components/post/style.scss',
2727
destination: resource_path('sass/parts/_post.scss'),
2828
);
2929

@@ -32,14 +32,19 @@ public function handle(): FilesCollection
3232
destination: resource_path('views/components/post.blade.php'),
3333
);
3434

35-
return FilesCollection::make([$style, $view]);
35+
$component = File::makeFromStub(
36+
stub: 'components/post/Component.php',
37+
destination: base_path('app/View/Components/Post.php'),
38+
);
39+
40+
return FilesCollection::make([$style, $view, $component]);
3641
}
3742

3843
/**
3944
* Get the component's usage instructions
4045
*/
4146
public function instructions(): ?string
4247
{
43-
return "1. Add `@import 'parts/post';` to `resources/sass/app.scss`\r\n2. Use the blade component: `<x-post><p>Some content</p></x-post>`";
48+
return "1. Add `@import 'parts/post';` to `resources/sass/app.scss`\r\n2. Use the blade component: `<x-post title=\"Thirty Years Later, a Speed Boost for Quantum Factoring\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus velit suscipit, sodales risus id, malesuada est. Fusce vestibulum felis diam, nec fringilla lorem molestie ac.\" infos=\"Posté le 06/01/2023 par Laura Dattaro\" link=\"#\" more=\"Read article\" />`";
4449
}
45-
}
50+
}

0 commit comments

Comments
 (0)
0