Skip to content

Commit e6be7a8

Browse files
kbondkbond
committed
minor #1949 [Site] Add Badge & Cluster (smnandre)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Site] Add Badge & Cluster ![badges](https://github.com/user-attachments/assets/b1327d00-3ac0-48d1-ae8b-4c16eb91c2ef) Commits ------- 8b0e215 [Site] Add Badge & Cluster
2 parents dec76be + 8b0e215 commit e6be7a8

File tree

17 files changed

+299
-22
lines changed

17 files changed

+299
-22
lines changed

‎ux.symfony.com/assets/styles/app.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,12 @@
6161

6262
// Layouts
6363
@import "layouts/container";
64+
@import "layouts/cluster";
6465
@import "layouts/grid";
6566
@import "layouts/section";
6667

6768
// Components
69+
@import "components/Badge";
6870
@import "components/Banner";
6971
@import "components/Browser";
7072
@import "components/Changelog";

‎ux.symfony.com/assets/styles/components/_Badge.scss

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// -----------------------------------------------------------------
2+
// Badge
3+
// -----------------------------------------------------------------
4+
5+
.Badge {
6+
background: #1D1F23;
7+
padding: .2rem .75rem;
8+
border-radius: .5rem;
9+
display: inline-flex;
10+
flex-wrap: nowrap;
11+
align-items: center;
12+
border: 1px solid #141415;
13+
font-size: .8rem;
14+
gap: .5rem;
15+
position: relative;
16+
}
17+
18+
.Badge__label {
19+
font-stretch: condensed;
20+
text-transform: uppercase;
21+
color: #fff;
22+
font-weight: lighter;
23+
font-size: smaller;
24+
display: flex;
25+
align-items: center;
26+
gap: .5rem;
27+
28+
&:after {
29+
content: ":";
30+
opacity: .5;
31+
margin-left: -.25rem;
32+
}
33+
}
34+
35+
.Badge__icon {
36+
width: 1em;
37+
height: 1em;
38+
margin-block-start: -0.125em;
39+
}
40+
41+
.Badge__value {
42+
color: #81ADB5;
43+
font-weight: normal;
44+
45+
a::after {
46+
content: "";
47+
position: absolute;
48+
inset: 0;
49+
}
50+
}

‎ux.symfony.com/assets/styles/components/_DataList.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@
3434
width: 0%;
3535
}
3636
a:hover::before {
37-
# transition: decoration 0.3s;
3837
width: 100%;
3938
}
4039
}

‎ux.symfony.com/assets/styles/layouts/_cluster.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.cluster {
2+
display: flex;
3+
flex-wrap: wrap;
4+
gap: 1rem;
5+
justify-content: center;
6+
align-items: center;
7+
}

‎ux.symfony.com/cookbook/component_architecture.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ image: images/cookbook/component-architecture.png
55
tags:
66
- javascript
77
- symfony
8+
author: Mathéo Daninos
9+
published_at: '2024-08-02'
810
---
911

1012
## Introduction

‎ux.symfony.com/src/Model/Cookbook.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ public function __construct(
2323
public string $description,
2424
public string $content,
2525
public array $tags,
26+
public Person|string $author,
27+
public \DateTimeImmutable|string $publishedAt,
2628
) {
2729
}
2830
}

‎ux.symfony.com/src/Model/Person.php

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <[email protected]>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace App\Model;
13+
14+
final readonly class Person
15+
{
16+
public function __construct(
17+
public string $name,
18+
) {
19+
}
20+
}

‎ux.symfony.com/src/Service/CookbookFactory.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ public function createFromFile(string $file): Cookbook
5757
description: $frontMatter['description'],
5858
content: $content,
5959
tags: $frontMatter['tags'],
60+
author: $frontMatter['author'],
61+
publishedAt: $frontMatter['published_at'],
6062
);
6163
}
6264
}

‎ux.symfony.com/src/Twig/Components/Badge/AuthorBadge.php

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <[email protected]>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace App\Twig\Components\Badge;
13+
14+
use App\Model\Person;
15+
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
16+
17+
#[AsTwigComponent(
18+
name: 'Badge:Author',
19+
template: 'components/Badge.html.twig',
20+
exposePublicProps: false,
21+
)]
22+
final class AuthorBadge extends Badge
23+
{
24+
public Person|string $author;
25+
26+
public string $label = 'Author';
27+
28+
public string $icon = 'lucide:user-round';
29+
30+
public function mount(string $author): void
31+
{
32+
$this->value = $author;
33+
}
34+
}

‎ux.symfony.com/src/Twig/Components/Badge/Badge.php

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <[email protected]>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace App\Twig\Components\Badge;
13+
14+
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
15+
use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
16+
17+
#[AsTwigComponent(
18+
name: 'Badge',
19+
template: 'components/Badge.html.twig',
20+
exposePublicProps: false,
21+
)]
22+
class Badge
23+
{
24+
public string $label;
25+
26+
public string $value;
27+
28+
public string $icon;
29+
30+
public string $url;
31+
32+
#[ExposeInTemplate(destruct: true)]
33+
public function getBadge(): array
34+
{
35+
return [
36+
'icon' => $this->getIcon(),
37+
'label' => $this->getLabel(),
38+
'value' => $this->getValue(),
39+
'url' => $this->getUrl(),
40+
];
41+
}
42+
43+
protected function getLabel(): string
44+
{
45+
return $this->label;
46+
}
47+
48+
protected function getValue(): string
49+
{
50+
return $this->value ?? '';
51+
}
52+
53+
protected function getIcon(): ?string
54+
{
55+
return $this->icon;
56+
}
57+
58+
protected function getUrl(): ?string
59+
{
60+
return $this->url ?? '';
61+
}
62+
}

‎ux.symfony.com/src/Twig/Components/Badge/DateBadge.php

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <[email protected]>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace App\Twig\Components\Badge;
13+
14+
use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
15+
16+
#[AsTwigComponent(
17+
name: 'Badge:Date',
18+
template: 'components/Badge.html.twig',
19+
exposePublicProps: false,
20+
)]
21+
final class DateBadge extends Badge
22+
{
23+
public string $label = 'Date';
24+
25+
public string $icon = 'lucide:calendar';
26+
27+
public string $format = 'Y-m-d';
28+
29+
public function mount(string|\DateTimeImmutable $date): void
30+
{
31+
if (\is_string($date)) {
32+
$date = new \DateTimeImmutable($date);
33+
}
34+
$this->value = $date->format($this->format);
35+
}
36+
}

‎ux.symfony.com/templates/_aside.html.twig

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
<aside style="background-color: var(--bs-secondary-bg-subtle);" class="mt-5">
22
<div class="container-fluid container-xxl p-4 p-md-5">
33
<div style="display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));">
4-
<twig:DocsLink
5-
title="Documentation"
6-
text="Get going with the official Symfony UX doc."
7-
url="https://symfony.com/bundles/StimulusBundle/current/index.html"
8-
icon="symfony"
9-
/>
10-
<twig:DocsLink
11-
title="Screencasts"
12-
text="Watch UX screencasts on SymfonyCasts."
13-
url="https://symfonycasts.com/screencast/stimulus"
14-
icon="symfonycast"
15-
/>
16-
<twig:DocsLink
17-
title="Community"
18-
text="Feedback · support · contributions."
19-
url="https://github.com/symfony/ux"
20-
icon="github"
21-
/>
4+
{% block links %}
5+
<twig:DocsLink
6+
title="Documentation"
7+
text="Get going with the official Symfony UX doc."
8+
url="https://symfony.com/bundles/StimulusBundle/current/index.html"
9+
icon="symfony"
10+
/>
11+
<twig:DocsLink
12+
title="Screencasts"
13+
text="Watch UX screencasts on SymfonyCasts."
14+
url="https://symfonycasts.com/screencast/stimulus"
15+
icon="symfonycast"
16+
/>
17+
<twig:DocsLink
18+
title="Community"
19+
text="Feedback · support · contributions."
20+
url="https://github.com/symfony/ux"
21+
icon="github"
22+
/>
23+
{% endblock %}
2224
</div>
2325
</div>
2426
</aside>

‎ux.symfony.com/templates/components/Badge.html.twig

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div {{ attributes.defaults({
2+
class: 'Badge',
3+
}) }}>
4+
<span class="Badge__label">
5+
{%- if icon %}
6+
<twig:ux:Icon name="{{ icon }}" class="Badge__icon" />
7+
{% endif -%}
8+
{{- label -}}
9+
</span>
10+
<span class="Badge__value">
11+
{%- if url %}
12+
<a href="{{ url }}" class="Badge__link">
13+
{{- value -}}
14+
</a>
15+
{% else %}
16+
{{ value }}
17+
{% endif -%}
18+
</span>
19+
</div>

‎ux.symfony.com/templates/components/Package/PackageHeader.html.twig

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,5 @@
1818
style="--color-accent: {{ package.color }}; transform: translateY(50%);"
1919
/>
2020
</div>
21-
2221
</div>
2322
</div>

‎ux.symfony.com/templates/cookbook/index.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<h1 class="text-center mt-5"><a href="{{ url('app_cookbook') }}">Cookbook</a></h1>
1515
<div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 text-center demo-introduction">
1616
<p>
17-
some recipes to show how to use the component and concept of SymfonyUx
17+
Articles and guides explaining the components and concepts of Symfony UX.
1818
</p>
1919
</div>
2020
</div>

‎ux.symfony.com/templates/cookbook/show.html.twig

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,37 @@
5656
</div>
5757
</div>
5858

59+
<div class="container container-xl x-4 pt-4 px-md-5 pt-md-5">
60+
<div class="cluster">
61+
<twig:Badge:Author author="{{ cookbook.author }}" />
62+
<twig:Badge:Date label="Published" date="{{ cookbook.publishedAt }}" />
63+
</div>
64+
</div>
65+
5966
</article>
6067
{% endblock %}
6168

6269
{% block aside %}
63-
{{ include('_aside.html.twig') }}
70+
{% embed '_aside.html.twig' %}
71+
{% block links %}
72+
<twig:DocsLink
73+
title="PHP Packages"
74+
text="Symfony UX bundles & components."
75+
url="{{ url('app_packages') }}"
76+
icon="lucide:package"
77+
/>
78+
<twig:DocsLink
79+
title="Interactive Demos"
80+
text="With commented source code."
81+
url="{{ url('app_demo_live_component') }}"
82+
icon="lucide:monitor-check"
83+
/>
84+
<twig:DocsLink
85+
title="Community"
86+
text="Feedback · support · contributions."
87+
url="https://github.com/symfony/ux"
88+
icon="github"
89+
/>
90+
{% endblock %}
91+
{% endembed %}
6492
{% endblock %}

0 commit comments

Comments
 (0)