UX ICON website

ux.symfony.com/assets/app.js

@@ -6,3 +6,6 @@ import './bootstrap.js';
 // imported to initialize global plugins
 // dropdown, collapse, tab
 import * as bootstrap from 'bootstrap';
+
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/themes/translucent.css';

ux.symfony.com/assets/controllers/clipboarder-controller.js

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static targets = ['source', 'button']
+    static values = {
+        source: String,
+        animationClass: {type: String, default: 'copied'},
+        animationDuration: {type: Number, default: 500}
+    }
+
+    copy ({ params: { value } }) {
+        const text = value
+            ?? (this.hasSourceValue ? this.sourceValue : null)
+            ?? (this.hasSourceTarget ? this.sourceTarget.textContent : null)
+        ;
+
+        navigator.clipboard.writeText(text).then(() => this.copied())
+    }
+
+    startAnimation() {
+        if (this.hasButtonTarget) {
+            this.buttonTarget.disabled = true;
+            this.buttonTarget.classList.add(this.animationClassValue);
+        }
+        this.element.classList.add(this.animationClassValue);
+    }
+
+    stopAnimation() {
+        this.element.classList.remove(this.animationClassValue);
+        if (this.hasButtonTarget) {
+            this.buttonTarget.classList.remove(this.animationClassValue);
+            this.buttonTarget.disabled = false;
+        }
+    }
+
+    copied() {
+        clearTimeout(this.timeout);
+        this.startAnimation();
+        this.timeout = setTimeout(this.stopAnimation.bind(this), this.animationDurationValue);
+    }
+}

ux.symfony.com/assets/controllers/icon-grid-controller.js

@@ -0,0 +1,49 @@
+import {Controller} from '@hotwired/stimulus';
+import {delegate} from 'tippy.js';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+
+    connect() {
+        this.element.addEventListener('click', this.click.bind(this), true);
+        this.tippy = delegate(this.element, {
+            target: '.IconCard',
+            content: (reference) => '<button title="Copy Icon name" data-controller="clipboarder" data-action="clipboarder#copy"  data-clipboarder-target="button source">'
+                + '<span>'
+                + reference.title.split(':').join('</span>:<span>')
+                + '</span>'
+                + '</button>',
+            arrow: true,
+            theme: 'translucent',
+            animation: 'scale',
+            inertia: true,
+            allowHTML: true,
+            onShow: () => {
+                if (document.body.dataset.iconSize !== 'small') {
+                    return false;
+                }
+            },
+            interactive: true,
+            delay: [250, 0],
+        });
+    }
+
+    disconnect() {
+        this.tippy.unmount();
+        this.tippy.destroy();
+        this.element.removeEventListener('click', this.click.bind(this), true);
+    }
+
+    click(event) {
+        const iconCard = event.target.closest('.IconCard');
+        if (!iconCard) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+
+        const customEvent = new CustomEvent('Icon:Clicked', { detail: { icon: iconCard.title }, bubbles: true });
+        window.dispatchEvent(customEvent);
+    }
+
+}

ux.symfony.com/assets/controllers/icon-modal-controller.js

@@ -0,0 +1,66 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    async initialize() {
+        this.component = await getComponent(this.element);
+        this.component.on('render:finished', (component) => {
+            if (this.element.dataset.open) {
+                this.element.showModal();
+                this.element.open = true
+            }
+        });
+    }
+
+    connect() {
+        window.addEventListener('Icon:Clicked', this.onIconClick.bind(this));
+        this.element.addEventListener('click', this.onClick.bind(this));
+    }
+
+    disconnect() {
+        this.element.removeEventListener('click', this.onClick.bind(this));
+        window.removeEventListener('Icon:Clicked', this.onIconClick.bind(this));
+    }
+
+    show() {
+        if (!this.element.open) {
+            this.element.showModal();
+            this.element.open = true;
+        }
+    }
+
+    close() {
+        if (this.element.open) {
+            this.element.dataset.open = false;
+            this.element.close();
+            this.element.open = false;
+
+            const input = this.element.querySelector('input');
+            input.value = '';
+        }
+    }
+
+    onIconClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const input = this.element.querySelector('input');
+        input.value = event.detail.icon;
+        input.dispatchEvent(new Event('change', {bubbles: true}));
+        this.show();
+    }
+
+    onClick(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const dialogDimensions = this.element.getBoundingClientRect()
+        if (
+            event.clientX < dialogDimensions.left ||
+            event.clientX > dialogDimensions.right ||
+            event.clientY < dialogDimensions.top ||
+            event.clientY > dialogDimensions.bottom
+        ) {
+            this.close()
+        }
+    }
+}

ux.symfony.com/assets/controllers/icon-size-controller.js

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+
+    connect() {
+        document.body.dataset.iconSize = localStorage.getItem('icon-size') === 'large' ? 'large' : 'small';
+    }
+
+    large() {
+        document.body.dataset.iconSize = 'large';
+        localStorage.setItem('icon-size', 'large');
+    }
+
+    small() {
+        document.body.dataset.iconSize = 'small';
+        localStorage.setItem('icon-size', 'small');
+    }
+}

ux.symfony.com/assets/controllers/tabs-controller.js

@@ -0,0 +1,48 @@
+import {Controller} from '@hotwired/stimulus';
+import {getComponent} from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    static targets = ["tab", "control"]
+    static values = {tab: String}
+    static classes = [ "active" ]
+
+    initialize() {
+        this.showTab(this.tabValue);
+    }
+
+    show({ params: { tab }}) {
+        this.tabValue = tab;
+    }
+
+    showTab(tab) {
+        const tabTarget = this.getTabTarget(tab);
+        tabTarget.classList.add(this.activeClass);
+
+        const controlTarget = this.getControlTarget(tab);
+        controlTarget.classList.add(this.activeClass);
+    }
+
+    hideTab(tab) {
+        const tabTarget = this.getTabTarget(tab);
+        tabTarget.classList.remove(this.activeClass);
+
+        const controlTarget = this.getControlTarget(tab);
+        controlTarget.classList.remove(this.activeClass);
+    }
+
+    tabValueChanged(value, previousValue) {
+        if (previousValue) {
+            this.hideTab(previousValue);
+        }
+
+        this.showTab(value);
+    }
+
+    getControlTarget(tab) {
+        return this.controlTargets.find((elt) => elt.dataset.tabsTabParam === tab);
+    }
+
+    getTabTarget(tab) {
+        return this.tabTargets.find((elt) => elt.dataset.tab === tab);
+    }
+}

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

@@ -28,7 +28,7 @@
 @import "../../vendor/twbs/bootstrap/scss/buttons";
 @import "../../vendor/twbs/bootstrap/scss/transitions";
 @import "../../vendor/twbs/bootstrap/scss/dropdown";
-// @import "../../vendor/twbs/bootstrap/scss/button-group";
+ @import "../../vendor/twbs/bootstrap/scss/button-group";
 @import "../../vendor/twbs/bootstrap/scss/nav";
 @import "../../vendor/twbs/bootstrap/scss/navbar";
 @import "../../vendor/twbs/bootstrap/scss/card";
@@ -60,16 +60,24 @@
 @import "app/typography";
 
 // Layouts
+@import "layouts/container";
 @import "layouts/grid";
+@import "layouts/section";
 
 // Components
+@import "components/DataList";
 @import "components/demo-container";
 @import "components/DemoCard";
 @import "components/DocsLink";
 @import "components/file_tree";
 @import "components/Icon";
+@import "components/IconGrid";
+@import "components/IconModal";
+@import "components/IconSearch";
+@import "components/IconSetCard";
 @import "components/PackageHeader";
 @import "components/PackageBox";
+@import "components/Tabs";
 @import "components/Terminal";
 @import "components/TerminalCommand";
 @import "components/ThemeSwitcher";
@@ -102,10 +110,10 @@
     left: 0;
     width: 100%;
     color: rgb(156 163 175);
-    background-color: rgb(55 65 81);
+    background-color: rgb(9, 10, 11);
 }
 .btn-expand-code:hover, .btn-expand-code:active {
-    background-color: rgb(55 65 81) !important;
+    background-color: rgb(9, 10, 11) !important;
     color: #fff !important;
 }
 .code-description a {

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

@@ -0,0 +1,41 @@
+.DataList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+.DataList__item {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+  dt {
+    font-weight: 700;
+  }
+  dt::after {
+    content: ":";
+  }
+  dd {
+    color: var(--bs-code-color);
+    font-weight: 400;
+    margin: 0;
+    a {
+        position: relative;
+    }
+    a::before {
+        content: "";
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        height: 2px;
+        background-color: var(--bs-code-color);
+        transition: width 0.3s;
+        width: 0%;
+    }
+    a:hover::before {
+      # transition: decoration 0.3s;
+      width: 100%;
+    }
+  }
+}