Components: button, alert and card

assets/app.js

@@ -8,5 +8,8 @@ import './bootstrap.js';
 import './styles/theme.css';
 import './styles/app.css';
 import './styles/layout.css';
+import 'styles/button.css';
+import 'styles/article.css';
+import 'styles/form.css';
 
 console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/styles/article.css

@@ -0,0 +1,70 @@
+.article-main h2, .article-main h3,
+.article-main h4, .article-main h5, .article-main h6 {
+    margin-top: 2em;
+}
+
+.article-main p,
+.article-main ul,
+.article-main ol,
+.article-main blockquote,
+.article-main table,
+.lede {
+    font-family: var(--main-body-font), serif;
+    color: var(--color-text-mid);
+    font-size: 1.4rem;
+    line-height: 1.75;
+}
+
+.article-main table {
+    font-size: 1.3rem;
+}
+
+.article-main table th,
+.article-main table td {
+    border-bottom: 1px solid var(--color-text);
+}
+
+.byline {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin: 2rem 0;
+    padding-top: 0.5rem;
+    border-top: 1px solid #8e4585;
+    font-size: 0.875rem;
+}
+
+blockquote {
+    margin: 50px 0;
+    border-left: 6px solid var(--color-bg-light);
+}
+
+blockquote p {
+    font-size: 1.6rem;
+    font-style: italic;
+    color: var(--color-text-mid);
+    padding-left: 30px;
+}
+
+.table-of-contents {
+    border-left: var(--color-secondary) 6px solid;
+    margin: 2em 0;
+}
+
+.table-of-contents li {
+    list-style: none;
+    margin-left: 0;
+}
+
+.heading-permalink {
+    float: left;
+    padding-right: 0;
+    margin-left: -30px;
+    line-height: 1.2;
+    color: var(--color-secondary);
+}
+
+.heading-permalink:hover {
+    text-decoration: none;
+    font-weight: bold;
+}

assets/styles/button.css

@@ -0,0 +1,35 @@
+
+button, .btn, a.btn {
+    background-color: var(--color-primary);
+    color: var(--color-text);
+    border: 2px solid var(--color-primary);
+    padding: 10px 20px;
+    text-transform: uppercase;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    border-radius: 0;  /* Sharp edges */
+}
+
+button:hover, .btn:hover {
+    background-color: var(--color-bg);
+    color: var(--color-primary);
+}
+
+button:active, .btn:active {
+    background-color: var(--color-primary);
+    color: var(--color-text);
+    border-color: var(--color-text);
+}
+
+.btn.btn-secondary {
+    color: var(--color-secondary);
+    background-color: var(--color-bg);
+    border: 2px solid var(--color-bg);
+    text-decoration: none;
+}
+
+.btn.btn-secondary:hover {
+    border: 2px solid var(--color-secondary);
+    text-decoration: none;
+}

assets/styles/form.css

@@ -0,0 +1,57 @@
+form, form > div {
+    display: flex;
+    flex-direction: column;
+    clear: both;
+    margin-bottom: 1em;
+}
+
+label {
+    display: flex;
+    clear: both;
+}
+
+input {
+    display: flex;
+    clear: both;
+}
+
+input, textarea {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    border: 2px solid var(--color-border);
+    padding: 10px;
+    border-radius: 0;  /* Sharp edges */
+}
+
+input:focus, textarea:focus {
+    border-color: var(--color-primary);
+    outline: none;
+}
+
+.help-text {
+    font-size: 0.8rem;
+    color: var(--color-text);
+    font-weight: lighter;
+}
+
+#editor_actions {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+}
+
+.image-with-preview {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+}
+
+.image-with-preview img.avatar {
+    width: 40px;
+    height: 40px;
+    margin-right: 1em;
+}
+
+.image-with-preview input {
+    flex-grow: 1;
+}

src/Twig/Components/Atoms/Alert.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Twig\Components\Atoms;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class Alert
+{
+     public string $type = 'success';
+}

src/Twig/Components/Atoms/Button.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Twig\Components\Atoms;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class Button
+{
+    public string $variant = 'default';
+    public string $tag = 'button';
+
+    public function getVariantClasses(): string
+    {
+        return match ($this->variant) {
+            'success' => 'btn-success',
+            'danger' => 'btn-danger',
+            default => 'btn-primary',
+        };
+    }
+}

src/Twig/Components/Molecules/Card.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Twig\Components\Molecules;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class Card
+{
+    public string $tag = 'div';
+}

src/Twig/Components/Organisms/CardList.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Twig\Components\Organisms;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class CardList
+{
+}

templates/components/Atoms/Alert.html.twig

@@ -0,0 +1,3 @@
+<div {{ attributes.defaults({class: 'alert alert-' ~ type}) }}>
+    {% block content %}{% endblock %}
+</div>

templates/components/Atoms/Button.html.twig

@@ -0,0 +1,5 @@
+<{{ tag }} {{ attributes.defaults({
+        class: 'btn ' ~ this.variantClasses,
+    }) }}>
+    {% block content %}{% endblock %}
+</{{ tag }}>

templates/components/Molecules/Card.html.twig

@@ -0,0 +1,10 @@
+<{{ tag }} {{ attributes }}>
+    <div class="card-header"><small class="text-uppercase">{{ category }}</small></div>
+    <div class="card-body">
+        <small>{{ article.createdAt|date('F j') }}</small>
+        <h1 class="card-title">{{ article.title }}</h1>
+    </div>
+    <div class="card-footer">
+        <small>{{ article.author }}</small>
+    </div>
+</{{ tag }}>

templates/components/Organisms/CardList.html.twig

@@ -0,0 +1,3 @@
+<div{{ attributes }}>
+    <!-- component html -->
+</div>