From 8b0e215467885c4d9cf5b2cb9429505459a4ebcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Andr=C3=A9?= Date: Sun, 30 Jun 2024 22:46:20 +0200 Subject: [PATCH] [Site] Add Badge & Cluster --- ux.symfony.com/assets/styles/app.scss | 2 + .../assets/styles/components/_Badge.scss | 50 +++++++++++++++ .../assets/styles/components/_DataList.scss | 1 - .../assets/styles/layouts/_cluster.scss | 7 +++ .../cookbook/component_architecture.md | 2 + ux.symfony.com/src/Model/Cookbook.php | 2 + ux.symfony.com/src/Model/Person.php | 20 ++++++ .../src/Service/CookbookFactory.php | 2 + .../src/Twig/Components/Badge/AuthorBadge.php | 34 ++++++++++ .../src/Twig/Components/Badge/Badge.php | 62 +++++++++++++++++++ .../src/Twig/Components/Badge/DateBadge.php | 36 +++++++++++ ux.symfony.com/templates/_aside.html.twig | 38 ++++++------ .../templates/components/Badge.html.twig | 19 ++++++ .../Package/PackageHeader.html.twig | 1 - .../templates/cookbook/index.html.twig | 2 +- .../templates/cookbook/show.html.twig | 30 ++++++++- .../templates/demos/live_demo.html.twig | 13 ++++ 17 files changed, 299 insertions(+), 22 deletions(-) create mode 100644 ux.symfony.com/assets/styles/components/_Badge.scss create mode 100644 ux.symfony.com/assets/styles/layouts/_cluster.scss create mode 100644 ux.symfony.com/src/Model/Person.php create mode 100644 ux.symfony.com/src/Twig/Components/Badge/AuthorBadge.php create mode 100644 ux.symfony.com/src/Twig/Components/Badge/Badge.php create mode 100644 ux.symfony.com/src/Twig/Components/Badge/DateBadge.php create mode 100644 ux.symfony.com/templates/components/Badge.html.twig diff --git a/ux.symfony.com/assets/styles/app.scss b/ux.symfony.com/assets/styles/app.scss index 9c4172d4e4a..20a3353bff1 100644 --- a/ux.symfony.com/assets/styles/app.scss +++ b/ux.symfony.com/assets/styles/app.scss @@ -61,10 +61,12 @@ // Layouts @import "layouts/container"; +@import "layouts/cluster"; @import "layouts/grid"; @import "layouts/section"; // Components +@import "components/Badge"; @import "components/Banner"; @import "components/Browser"; @import "components/Changelog"; diff --git a/ux.symfony.com/assets/styles/components/_Badge.scss b/ux.symfony.com/assets/styles/components/_Badge.scss new file mode 100644 index 00000000000..7a0e6622e14 --- /dev/null +++ b/ux.symfony.com/assets/styles/components/_Badge.scss @@ -0,0 +1,50 @@ +// ----------------------------------------------------------------- +// Badge +// ----------------------------------------------------------------- + +.Badge { + background: #1D1F23; + padding: .2rem .75rem; + border-radius: .5rem; + display: inline-flex; + flex-wrap: nowrap; + align-items: center; + border: 1px solid #141415; + font-size: .8rem; + gap: .5rem; + position: relative; +} + +.Badge__label { + font-stretch: condensed; + text-transform: uppercase; + color: #fff; + font-weight: lighter; + font-size: smaller; + display: flex; + align-items: center; + gap: .5rem; + + &:after { + content: ":"; + opacity: .5; + margin-left: -.25rem; + } +} + +.Badge__icon { + width: 1em; + height: 1em; + margin-block-start: -0.125em; +} + +.Badge__value { + color: #81ADB5; + font-weight: normal; + + a::after { + content: ""; + position: absolute; + inset: 0; + } +} diff --git a/ux.symfony.com/assets/styles/components/_DataList.scss b/ux.symfony.com/assets/styles/components/_DataList.scss index 9e8d21e569a..8874694dcab 100644 --- a/ux.symfony.com/assets/styles/components/_DataList.scss +++ b/ux.symfony.com/assets/styles/components/_DataList.scss @@ -34,7 +34,6 @@ width: 0%; } a:hover::before { - # transition: decoration 0.3s; width: 100%; } } diff --git a/ux.symfony.com/assets/styles/layouts/_cluster.scss b/ux.symfony.com/assets/styles/layouts/_cluster.scss new file mode 100644 index 00000000000..2834e28b676 --- /dev/null +++ b/ux.symfony.com/assets/styles/layouts/_cluster.scss @@ -0,0 +1,7 @@ +.cluster { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + align-items: center; +} diff --git a/ux.symfony.com/cookbook/component_architecture.md b/ux.symfony.com/cookbook/component_architecture.md index ce36127d72c..23e119cd8fd 100644 --- a/ux.symfony.com/cookbook/component_architecture.md +++ b/ux.symfony.com/cookbook/component_architecture.md @@ -5,6 +5,8 @@ image: images/cookbook/component-architecture.png tags: - javascript - symfony +author: Mathéo Daninos +published_at: '2024-08-02' --- ## Introduction diff --git a/ux.symfony.com/src/Model/Cookbook.php b/ux.symfony.com/src/Model/Cookbook.php index f5aa4a00c30..059da0098ff 100644 --- a/ux.symfony.com/src/Model/Cookbook.php +++ b/ux.symfony.com/src/Model/Cookbook.php @@ -23,6 +23,8 @@ public function __construct( public string $description, public string $content, public array $tags, + public Person|string $author, + public \DateTimeImmutable|string $publishedAt, ) { } } diff --git a/ux.symfony.com/src/Model/Person.php b/ux.symfony.com/src/Model/Person.php new file mode 100644 index 00000000000..038b4d2af39 --- /dev/null +++ b/ux.symfony.com/src/Model/Person.php @@ -0,0 +1,20 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App\Model; + +final readonly class Person +{ + public function __construct( + public string $name, + ) { + } +} diff --git a/ux.symfony.com/src/Service/CookbookFactory.php b/ux.symfony.com/src/Service/CookbookFactory.php index d9edd2e6515..f2688804e75 100644 --- a/ux.symfony.com/src/Service/CookbookFactory.php +++ b/ux.symfony.com/src/Service/CookbookFactory.php @@ -57,6 +57,8 @@ public function createFromFile(string $file): Cookbook description: $frontMatter['description'], content: $content, tags: $frontMatter['tags'], + author: $frontMatter['author'], + publishedAt: $frontMatter['published_at'], ); } } diff --git a/ux.symfony.com/src/Twig/Components/Badge/AuthorBadge.php b/ux.symfony.com/src/Twig/Components/Badge/AuthorBadge.php new file mode 100644 index 00000000000..538abccc528 --- /dev/null +++ b/ux.symfony.com/src/Twig/Components/Badge/AuthorBadge.php @@ -0,0 +1,34 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App\Twig\Components\Badge; + +use App\Model\Person; +use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; + +#[AsTwigComponent( + name: 'Badge:Author', + template: 'components/Badge.html.twig', + exposePublicProps: false, +)] +final class AuthorBadge extends Badge +{ + public Person|string $author; + + public string $label = 'Author'; + + public string $icon = 'lucide:user-round'; + + public function mount(string $author): void + { + $this->value = $author; + } +} diff --git a/ux.symfony.com/src/Twig/Components/Badge/Badge.php b/ux.symfony.com/src/Twig/Components/Badge/Badge.php new file mode 100644 index 00000000000..ae19ec3f807 --- /dev/null +++ b/ux.symfony.com/src/Twig/Components/Badge/Badge.php @@ -0,0 +1,62 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App\Twig\Components\Badge; + +use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; +use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate; + +#[AsTwigComponent( + name: 'Badge', + template: 'components/Badge.html.twig', + exposePublicProps: false, +)] +class Badge +{ + public string $label; + + public string $value; + + public string $icon; + + public string $url; + + #[ExposeInTemplate(destruct: true)] + public function getBadge(): array + { + return [ + 'icon' => $this->getIcon(), + 'label' => $this->getLabel(), + 'value' => $this->getValue(), + 'url' => $this->getUrl(), + ]; + } + + protected function getLabel(): string + { + return $this->label; + } + + protected function getValue(): string + { + return $this->value ?? ''; + } + + protected function getIcon(): ?string + { + return $this->icon; + } + + protected function getUrl(): ?string + { + return $this->url ?? ''; + } +} diff --git a/ux.symfony.com/src/Twig/Components/Badge/DateBadge.php b/ux.symfony.com/src/Twig/Components/Badge/DateBadge.php new file mode 100644 index 00000000000..be5ba55f6bc --- /dev/null +++ b/ux.symfony.com/src/Twig/Components/Badge/DateBadge.php @@ -0,0 +1,36 @@ + + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ + +namespace App\Twig\Components\Badge; + +use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; + +#[AsTwigComponent( + name: 'Badge:Date', + template: 'components/Badge.html.twig', + exposePublicProps: false, +)] +final class DateBadge extends Badge +{ + public string $label = 'Date'; + + public string $icon = 'lucide:calendar'; + + public string $format = 'Y-m-d'; + + public function mount(string|\DateTimeImmutable $date): void + { + if (\is_string($date)) { + $date = new \DateTimeImmutable($date); + } + $this->value = $date->format($this->format); + } +} diff --git a/ux.symfony.com/templates/_aside.html.twig b/ux.symfony.com/templates/_aside.html.twig index 5f92660063f..b9fbdc0e1bf 100644 --- a/ux.symfony.com/templates/_aside.html.twig +++ b/ux.symfony.com/templates/_aside.html.twig @@ -1,24 +1,26 @@ diff --git a/ux.symfony.com/templates/components/Badge.html.twig b/ux.symfony.com/templates/components/Badge.html.twig new file mode 100644 index 00000000000..5668125b579 --- /dev/null +++ b/ux.symfony.com/templates/components/Badge.html.twig @@ -0,0 +1,19 @@ +
+ + {%- if icon %} + + {% endif -%} + {{- label -}} + + + {%- if url %} + + {{- value -}} + + {% else %} + {{ value }} + {% endif -%} + +
diff --git a/ux.symfony.com/templates/components/Package/PackageHeader.html.twig b/ux.symfony.com/templates/components/Package/PackageHeader.html.twig index 2fd0fb4cac5..73d3f0eac5a 100644 --- a/ux.symfony.com/templates/components/Package/PackageHeader.html.twig +++ b/ux.symfony.com/templates/components/Package/PackageHeader.html.twig @@ -18,6 +18,5 @@ style="--color-accent: {{ package.color }}; transform: translateY(50%);" /> - diff --git a/ux.symfony.com/templates/cookbook/index.html.twig b/ux.symfony.com/templates/cookbook/index.html.twig index 98b3b13fee8..2a18a9f36ac 100644 --- a/ux.symfony.com/templates/cookbook/index.html.twig +++ b/ux.symfony.com/templates/cookbook/index.html.twig @@ -14,7 +14,7 @@

Cookbook

- some recipes to show how to use the component and concept of SymfonyUx + Articles and guides explaining the components and concepts of Symfony UX.

diff --git a/ux.symfony.com/templates/cookbook/show.html.twig b/ux.symfony.com/templates/cookbook/show.html.twig index 6b6370ad2c8..f65fa0e6166 100644 --- a/ux.symfony.com/templates/cookbook/show.html.twig +++ b/ux.symfony.com/templates/cookbook/show.html.twig @@ -56,9 +56,37 @@ +
+
+ + +
+
+ {% endblock %} {% block aside %} - {{ include('_aside.html.twig') }} + {% embed '_aside.html.twig' %} + {% block links %} + + + + {% endblock %} + {% endembed %} {% endblock %} diff --git a/ux.symfony.com/templates/demos/live_demo.html.twig b/ux.symfony.com/templates/demos/live_demo.html.twig index b061b707159..75dac84ea01 100644 --- a/ux.symfony.com/templates/demos/live_demo.html.twig +++ b/ux.symfony.com/templates/demos/live_demo.html.twig @@ -71,6 +71,19 @@ {% endblock %} +{# {% block demo_tags %} #} +{#
#} +{#
#} +{# #} +{#
#} +{#
#} +{# {% endblock %} #} + {% endblock %} {% block aside %}