From dfcea37baa0f5baeb426d158f643bde9f0e83994 Mon Sep 17 00:00:00 2001
From: Pierre <pierredureau@yahoo.fr>
Date: Mon, 3 Mar 2025 10:13:04 +0100
Subject: [PATCH 1/5] Issue #3508441 by pdureau: Update components to UI
Patterns 2
---
components/article/article.component.yml | 29 ++++++
components/article/article.preview.story.yml | 12 +++
.../article/article.twig | 0
components/billboard/billboard.component.yml | 38 ++++++++
.../billboard/billboard.preview.story.yml | 15 +++
.../billboard/billboard.twig | 4 +-
.../breadcrumb/breadcrumb.component.yml | 8 ++
.../breadcrumb/breadcrumb.preview.story.yml | 8 ++
.../breadcrumb/breadcrumb.twig | 0
components/button/button.component.yml | 55 +++++++++++
components/button/button.preview.story.yml | 6 ++
.../button/button.twig | 4 +-
components/call_out/call_out.component.yml | 35 +++++++
.../call_out/call_out.preview.story.yml | 18 ++++
.../call_out/call_out.twig | 2 +-
components/card/card.component.yml | 65 +++++++++++++
components/card/card.preview.story.yml | 14 +++
.../card/card.twig | 4 +-
.../card_layout/card_layout.component.yml | 27 ++++++
.../card_layout/card_layout.preview.story.yml | 19 ++++
.../card_layout/card_layout.twig | 2 +-
components/details/details.component.yml | 10 ++
components/details/details.preview.story.yml | 21 +++++
components/details/details.twig | 3 +
.../emphasis_box/emphasis_box.component.yml | 6 ++
.../emphasis_box.preview.story.yml | 9 ++
.../emphasis_box/emphasis_box.twig | 0
components/footer/footer.component.yml | 29 ++++++
components/footer/footer.preview.story.yml | 72 +++++++++++++++
.../footer/footer.twig | 17 ++--
.../footer_section.component.yml | 12 +++
.../footer_section.preview.story.yml | 17 ++++
.../footer_section/footer_section.twig | 0
components/menu/menu.component.yml | 18 ++++
components/menu/menu.preview.story.yml | 15 +++
.../menu/menu.twig | 4 +-
.../patterns => components}/menu/menu_init.js | 0
components/menu_item/menu_item.component.yml | 35 +++++++
.../menu_item/menu_item.preview.story.yml | 18 ++++
.../menu_item/menu_item.twig | 2 +-
components/menu_list/menu_list.component.yml | 22 +++++
.../menu_list/menu_list.preview.story.yml | 13 +++
.../menu_list/menu_list.twig | 2 +-
.../menu_list/menu_list_init.js | 0
.../menu_panel/menu_panel.component.yml | 20 ++++
.../menu_panel/menu_panel.preview.story.yml | 28 ++++++
.../menu_panel/menu_panel.twig | 8 +-
.../navigation/navigation.component.yml | 19 ++++
.../navigation/navigation.preview.story.yml | 20 ++++
.../navigation/navigation.twig | 3 +-
.../navigation/navigation_init.js | 0
.../newsletter/newsletter.component.yml | 33 +++++++
.../newsletter/newsletter.preview.story.yml | 19 ++++
.../newsletter/newsletter.twig | 2 +-
.../notification_bar.component.yml | 33 +++++++
.../notification_bar.preview.story.yml | 5 +
.../notification_bar/notification_bar.twig | 4 +-
.../notification_bar/notification_bar_init.js | 0
components/picto/picto.component.yml | 37 ++++++++
components/picto/picto.preview.story.yml | 15 +++
.../picto/picto.twig | 0
.../section_heading.component.yml | 24 +++++
.../section_heading.preview.story.yml | 6 ++
.../section_heading/section_heading.twig | 2 +-
.../sidebar_menu/sidebar_menu.component.yml | 15 +++
.../sidebar_menu.preview.story.yml | 18 ++++
.../sidebar_menu/sidebar_menu.twig | 2 +-
components/split/split.component.yml | 43 +++++++++
components/split/split.preview.story.yml | 15 +++
.../split/split.twig | 4 +-
components/video/video.component.yml | 6 ++
components/video/video.preview.story.yml | 11 +++
.../video/video.twig | 0
composer.json | 30 +++---
templates/layout--columns.html.twig | 28 ------
.../patterns/article/article.ui_patterns.yml | 32 -------
.../billboard/billboard.ui_patterns.yml | 47 ----------
.../breadcrumb/breadcrumb.ui_patterns.yml | 13 ---
.../patterns/button/button.ui_patterns.yml | 52 -----------
.../call_out/call_out.ui_patterns.yml | 45 ---------
templates/patterns/card/card.ui_patterns.yml | 70 --------------
.../card_layout/card_layout.ui_patterns.yml | 37 --------
.../patterns/details/details.ui_patterns.yml | 30 ------
.../details/pattern-details.html.twig | 3 -
.../emphasis_box/emphasis_box.ui_patterns.yml | 15 ---
.../patterns/footer/footer.ui_patterns.yml | 92 -------------------
.../footer_section.ui_patterns.yml | 26 ------
templates/patterns/menu/menu.ui_patterns.yml | 30 ------
.../menu_item/menu_item.ui_patterns.yml | 46 ----------
.../menu_list/menu_list.ui_patterns.yml | 33 -------
.../menu_panel/menu_panel.ui_patterns.yml | 41 ---------
.../navigation/navigation.ui_patterns.yml | 39 --------
.../newsletter/newsletter.ui_patterns.yml | 46 ----------
.../notification_bar.ui_patterns.yml | 36 --------
.../patterns/picto/picto.ui_patterns.yml | 45 ---------
.../section_heading.ui_patterns.yml | 21 -----
.../sidebar_menu/sidebar_menu.ui_patterns.yml | 29 ------
.../patterns/split/split.ui_patterns.yml | 50 ----------
.../patterns/video/video.ui_patterns.yml | 17 ----
.../{overrides => }/system/block.html.twig | 0
.../system/breadcrumb.html.twig | 2 +-
.../system/form-element.html.twig | 2 +-
.../system/item-list.html.twig | 0
.../system/menu-local-task.html.twig | 8 +-
.../{overrides => }/system/page.html.twig | 29 +++---
.../system/status-messages.html.twig | 7 +-
.../{overrides => }/system/table.html.twig | 2 +-
.../patterns-meta-information.html.twig | 8 +-
.../patterns-overview-page.html.twig | 2 +-
.../patterns-single-page.html.twig | 0
...atterns-variant-meta-information.html.twig | 0
.../ui-styles-overview-page.html.twig | 0
ui_suite_protocol.info.yml | 8 +-
ui_suite_protocol.layouts.yml | 63 -------------
ui_suite_protocol.theme | 24 +----
115 files changed, 1096 insertions(+), 1094 deletions(-)
create mode 100644 components/article/article.component.yml
create mode 100644 components/article/article.preview.story.yml
rename templates/patterns/article/pattern-article.html.twig => components/article/article.twig (100%)
create mode 100644 components/billboard/billboard.component.yml
create mode 100644 components/billboard/billboard.preview.story.yml
rename templates/patterns/billboard/pattern-billboard.html.twig => components/billboard/billboard.twig (89%)
create mode 100644 components/breadcrumb/breadcrumb.component.yml
create mode 100644 components/breadcrumb/breadcrumb.preview.story.yml
rename templates/patterns/breadcrumb/pattern-breadcrumb.html.twig => components/breadcrumb/breadcrumb.twig (100%)
create mode 100644 components/button/button.component.yml
create mode 100644 components/button/button.preview.story.yml
rename templates/patterns/button/pattern-button.html.twig => components/button/button.twig (88%)
create mode 100644 components/call_out/call_out.component.yml
create mode 100644 components/call_out/call_out.preview.story.yml
rename templates/patterns/call_out/pattern-call_out.html.twig => components/call_out/call_out.twig (93%)
create mode 100644 components/card/card.component.yml
create mode 100644 components/card/card.preview.story.yml
rename templates/patterns/card/pattern-card.html.twig => components/card/card.twig (92%)
create mode 100644 components/card_layout/card_layout.component.yml
create mode 100644 components/card_layout/card_layout.preview.story.yml
rename templates/patterns/card_layout/pattern-card_layout.html.twig => components/card_layout/card_layout.twig (89%)
create mode 100644 components/details/details.component.yml
create mode 100644 components/details/details.preview.story.yml
create mode 100644 components/details/details.twig
create mode 100644 components/emphasis_box/emphasis_box.component.yml
create mode 100644 components/emphasis_box/emphasis_box.preview.story.yml
rename templates/patterns/emphasis_box/pattern-emphasis_box.html.twig => components/emphasis_box/emphasis_box.twig (100%)
create mode 100644 components/footer/footer.component.yml
create mode 100644 components/footer/footer.preview.story.yml
rename templates/patterns/footer/pattern-footer.html.twig => components/footer/footer.twig (90%)
create mode 100644 components/footer_section/footer_section.component.yml
create mode 100644 components/footer_section/footer_section.preview.story.yml
rename templates/patterns/footer_section/pattern-footer_section.html.twig => components/footer_section/footer_section.twig (100%)
create mode 100644 components/menu/menu.component.yml
create mode 100644 components/menu/menu.preview.story.yml
rename templates/patterns/menu/pattern-menu.html.twig => components/menu/menu.twig (98%)
rename {templates/patterns => components}/menu/menu_init.js (100%)
create mode 100644 components/menu_item/menu_item.component.yml
create mode 100644 components/menu_item/menu_item.preview.story.yml
rename templates/patterns/menu_item/pattern-menu_item.html.twig => components/menu_item/menu_item.twig (91%)
create mode 100644 components/menu_list/menu_list.component.yml
create mode 100644 components/menu_list/menu_list.preview.story.yml
rename templates/patterns/menu_list/pattern-menu_list.html.twig => components/menu_list/menu_list.twig (97%)
rename {templates/patterns => components}/menu_list/menu_list_init.js (100%)
create mode 100644 components/menu_panel/menu_panel.component.yml
create mode 100644 components/menu_panel/menu_panel.preview.story.yml
rename templates/patterns/menu_panel/pattern-menu_panel.html.twig => components/menu_panel/menu_panel.twig (81%)
create mode 100644 components/navigation/navigation.component.yml
create mode 100644 components/navigation/navigation.preview.story.yml
rename templates/patterns/navigation/pattern-navigation.html.twig => components/navigation/navigation.twig (98%)
rename {templates/patterns => components}/navigation/navigation_init.js (100%)
create mode 100644 components/newsletter/newsletter.component.yml
create mode 100644 components/newsletter/newsletter.preview.story.yml
rename templates/patterns/newsletter/pattern-newsletter.html.twig => components/newsletter/newsletter.twig (99%)
create mode 100644 components/notification_bar/notification_bar.component.yml
create mode 100644 components/notification_bar/notification_bar.preview.story.yml
rename templates/patterns/notification_bar/pattern-notification_bar.html.twig => components/notification_bar/notification_bar.twig (82%)
rename {templates/patterns => components}/notification_bar/notification_bar_init.js (100%)
create mode 100644 components/picto/picto.component.yml
create mode 100644 components/picto/picto.preview.story.yml
rename templates/patterns/picto/pattern-picto.html.twig => components/picto/picto.twig (100%)
create mode 100644 components/section_heading/section_heading.component.yml
create mode 100644 components/section_heading/section_heading.preview.story.yml
rename templates/patterns/section_heading/pattern-section_heading.html.twig => components/section_heading/section_heading.twig (78%)
create mode 100644 components/sidebar_menu/sidebar_menu.component.yml
create mode 100644 components/sidebar_menu/sidebar_menu.preview.story.yml
rename templates/patterns/sidebar_menu/pattern-sidebar_menu.html.twig => components/sidebar_menu/sidebar_menu.twig (99%)
create mode 100644 components/split/split.component.yml
create mode 100644 components/split/split.preview.story.yml
rename templates/patterns/split/pattern-split.html.twig => components/split/split.twig (82%)
create mode 100644 components/video/video.component.yml
create mode 100644 components/video/video.preview.story.yml
rename templates/patterns/video/pattern-video.html.twig => components/video/video.twig (100%)
delete mode 100644 templates/layout--columns.html.twig
delete mode 100644 templates/patterns/article/article.ui_patterns.yml
delete mode 100644 templates/patterns/billboard/billboard.ui_patterns.yml
delete mode 100644 templates/patterns/breadcrumb/breadcrumb.ui_patterns.yml
delete mode 100644 templates/patterns/button/button.ui_patterns.yml
delete mode 100644 templates/patterns/call_out/call_out.ui_patterns.yml
delete mode 100644 templates/patterns/card/card.ui_patterns.yml
delete mode 100644 templates/patterns/card_layout/card_layout.ui_patterns.yml
delete mode 100644 templates/patterns/details/details.ui_patterns.yml
delete mode 100644 templates/patterns/details/pattern-details.html.twig
delete mode 100644 templates/patterns/emphasis_box/emphasis_box.ui_patterns.yml
delete mode 100644 templates/patterns/footer/footer.ui_patterns.yml
delete mode 100644 templates/patterns/footer_section/footer_section.ui_patterns.yml
delete mode 100644 templates/patterns/menu/menu.ui_patterns.yml
delete mode 100644 templates/patterns/menu_item/menu_item.ui_patterns.yml
delete mode 100644 templates/patterns/menu_list/menu_list.ui_patterns.yml
delete mode 100644 templates/patterns/menu_panel/menu_panel.ui_patterns.yml
delete mode 100644 templates/patterns/navigation/navigation.ui_patterns.yml
delete mode 100644 templates/patterns/newsletter/newsletter.ui_patterns.yml
delete mode 100644 templates/patterns/notification_bar/notification_bar.ui_patterns.yml
delete mode 100644 templates/patterns/picto/picto.ui_patterns.yml
delete mode 100644 templates/patterns/section_heading/section_heading.ui_patterns.yml
delete mode 100644 templates/patterns/sidebar_menu/sidebar_menu.ui_patterns.yml
delete mode 100644 templates/patterns/split/split.ui_patterns.yml
delete mode 100644 templates/patterns/video/video.ui_patterns.yml
rename templates/{overrides => }/system/block.html.twig (100%)
rename templates/{overrides => }/system/breadcrumb.html.twig (91%)
rename templates/{overrides => }/system/form-element.html.twig (99%)
rename templates/{overrides => }/system/item-list.html.twig (100%)
rename templates/{overrides => }/system/menu-local-task.html.twig (85%)
rename templates/{overrides => }/system/page.html.twig (79%)
rename templates/{overrides => }/system/status-messages.html.twig (92%)
rename templates/{overrides => }/system/table.html.twig (98%)
rename templates/{overrides => }/ui_patterns_library/patterns-meta-information.html.twig (88%)
rename templates/{overrides => }/ui_patterns_library/patterns-overview-page.html.twig (89%)
rename templates/{overrides => }/ui_patterns_library/patterns-single-page.html.twig (100%)
rename templates/{overrides => }/ui_patterns_library/patterns-variant-meta-information.html.twig (100%)
rename templates/{overrides => }/ui_styles_library/ui-styles-overview-page.html.twig (100%)
delete mode 100644 ui_suite_protocol.layouts.yml
diff --git a/components/article/article.component.yml b/components/article/article.component.yml
new file mode 100644
index 0000000..d3a1120
--- /dev/null
+++ b/components/article/article.component.yml
@@ -0,0 +1,29 @@
+name: Article
+description: "A long-form body of text. This is typically multiple paragraphs, often with subheadings, and should be the primary content on the page. https://protocol.mozilla.org/components/detail/article.html"
+slots:
+ title:
+ title: Title
+ description: "Article title. Plain text."
+ content:
+ title: Content
+ description: "Article content"
+props:
+ type: object
+ properties:
+ heading_level:
+ title: "Heading level"
+ type: integer
+ enum:
+ - 1
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ "meta:enum":
+ 1: "h1 (Default)"
+ 2: h2
+ 3: h3
+ 4: h4
+ 5: h5
+ 6: h6
diff --git a/components/article/article.preview.story.yml b/components/article/article.preview.story.yml
new file mode 100644
index 0000000..c8b95fa
--- /dev/null
+++ b/components/article/article.preview.story.yml
@@ -0,0 +1,12 @@
+name: Preview
+slots:
+ title: "We’re building a better Internet"
+ content:
+ - type: html_tag
+ tag: p
+ value: "Our mission is to ensure the Internet is a global public resource, open and accessible to all. An Internet that truly puts people first, where individuals can shape their own experience and are empowered, safe and independent."
+ - type: html_tag
+ tag: p
+ value: "At Mozilla, we’re a global community of technologists, thinkers and builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future."
+props:
+ heading_level: 1
diff --git a/templates/patterns/article/pattern-article.html.twig b/components/article/article.twig
similarity index 100%
rename from templates/patterns/article/pattern-article.html.twig
rename to components/article/article.twig
diff --git a/components/billboard/billboard.component.yml b/components/billboard/billboard.component.yml
new file mode 100644
index 0000000..d6cc78f
--- /dev/null
+++ b/components/billboard/billboard.component.yml
@@ -0,0 +1,38 @@
+name: Billboard
+description: "A billboard style call-out with image, text and link. The image and copy stack vertically on small screens, and run full width horizontally on larger screens. https://protocol.mozilla.org/components/detail/billboard.html"
+variants:
+ right:
+ title: "Right (Default)"
+ left:
+ title: Left
+slots:
+ image:
+ title: Image
+ description: "Billboard image."
+ title:
+ title: Title
+ description: "Billboard title."
+ desc:
+ title: Description
+ description: "Billboard description."
+ cta_link:
+ title: "CTA link"
+ description: "Billboard CTA link"
+props:
+ type: object
+ properties:
+ heading_level:
+ title: "Heading level"
+ type: integer
+ enum:
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ "meta:enum":
+ 2: h2
+ 3: "h3 (Default)"
+ 4: h4
+ 5: h5
+ 6: h6
diff --git a/components/billboard/billboard.preview.story.yml b/components/billboard/billboard.preview.story.yml
new file mode 100644
index 0000000..cd7fab0
--- /dev/null
+++ b/components/billboard/billboard.preview.story.yml
@@ -0,0 +1,15 @@
+name: Preview
+slots:
+ image:
+ theme: image
+ uri: assets/billboard-image.png
+ title: "Example headline with 35 characters"
+ desc: "A description with a maximum of 100 characters. That usually means only one or two sentences."
+ cta_link:
+ type: html_tag
+ tag: a
+ attributes:
+ href: "#"
+ value: "Learn more about us"
+props:
+ heading_level: 3
diff --git a/templates/patterns/billboard/pattern-billboard.html.twig b/components/billboard/billboard.twig
similarity index 89%
rename from templates/patterns/billboard/pattern-billboard.html.twig
rename to components/billboard/billboard.twig
index 38eb026..f5419bc 100644
--- a/templates/patterns/billboard/pattern-billboard.html.twig
+++ b/components/billboard/billboard.twig
@@ -1,5 +1,5 @@
-{% set variant = variant|default("right") %}
-{% set attributes = attributes.addClass('mzp-l-billboard-' ~ variant|lower|replace({'_': '-'})) %}
+{% set variant = variant|default('right') %}
+{% set attributes = attributes.addClass('mzp-l-billboard-' ~ variant|lower|replace({_: '-'})) %}
<div{{ attributes.addClass('mzp-c-billboard') }}>
<div class="mzp-c-billboard-image-container">
diff --git a/components/breadcrumb/breadcrumb.component.yml b/components/breadcrumb/breadcrumb.component.yml
new file mode 100644
index 0000000..0f6601c
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.component.yml
@@ -0,0 +1,8 @@
+name: Breadcrumb
+description: "A type of navigation menu used to provide a list of links based on current page within the site hierarchy, allowing users to visit previous pages from the current page. https://protocol.mozilla.org/components/detail/breadcrumb.html"
+props:
+ type: object
+ properties:
+ items:
+ title: Items
+ $ref: "ui-patterns://links"
diff --git a/components/breadcrumb/breadcrumb.preview.story.yml b/components/breadcrumb/breadcrumb.preview.story.yml
new file mode 100644
index 0000000..070173e
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.preview.story.yml
@@ -0,0 +1,8 @@
+name: Preview
+props:
+ items:
+ - title: Home
+ url: "#"
+ - title: Library
+ url: "#"
+ - title: Data
diff --git a/templates/patterns/breadcrumb/pattern-breadcrumb.html.twig b/components/breadcrumb/breadcrumb.twig
similarity index 100%
rename from templates/patterns/breadcrumb/pattern-breadcrumb.html.twig
rename to components/breadcrumb/breadcrumb.twig
diff --git a/components/button/button.component.yml b/components/button/button.component.yml
new file mode 100644
index 0000000..c55a9e2
--- /dev/null
+++ b/components/button/button.component.yml
@@ -0,0 +1,55 @@
+name: Button
+description: "For actions in forms, dialogs, and more with support for multiple sizes, states, and more. https://protocol.mozilla.org/components/detail/button--primary.html"
+variants:
+ primary:
+ title: "Primary (Default)"
+ description: "This is a primary button. It represents the primary action someone should take when they land on any given page. Primary buttons have a solid background color, and should be reserved for only one action per page."
+ primary__dark:
+ title: "Primary Dark"
+ description: "This is a primary button displayed on a dark background."
+ secondary:
+ title: Secondary
+ description: "This is a secondary button with a hollow, transparent background. This button should be used for any additional actions someone can take on any given page that is different from the primary action."
+ secondary__dark:
+ title: "Secondary Dark"
+ description: "This is a secondary button displayed on a dark background."
+ product:
+ title: Product
+ description: "Use this theme style for product related actions."
+ product__secondary:
+ title: "Product Secondary"
+ description: "This secondary button theme should be used when the CTA is not the main action a person should take on a page."
+ product__secondary__dark:
+ title: "Product Secondary Dark"
+ neutral:
+ title: Neutral
+ description: "This is a neutral button."
+ neutral__dark:
+ title: "Neutral Dark"
+ description: "This is a neutral button with the dark theme."
+slots:
+ label:
+ title: Label
+ description: "The button label"
+props:
+ type: object
+ properties:
+ url:
+ title: URL
+ description: "The button URL. Optional."
+ $ref: "ui-patterns://url"
+ size:
+ title: Size
+ description: "Buttons can be 4 different sizes, if no size is declared they will be the large size."
+ type: string
+ enum:
+ - sm
+ - md
+ - lg
+ - xl
+ "meta:enum":
+ sm: Small
+ md: Medium
+ lg: Large
+ xl: "Extra Large"
+ default: xl
diff --git a/components/button/button.preview.story.yml b/components/button/button.preview.story.yml
new file mode 100644
index 0000000..c850900
--- /dev/null
+++ b/components/button/button.preview.story.yml
@@ -0,0 +1,6 @@
+name: Preview
+slots:
+ label: Submit
+props:
+ url: "http://example.com"
+ size: xl
diff --git a/templates/patterns/button/pattern-button.html.twig b/components/button/button.twig
similarity index 88%
rename from templates/patterns/button/pattern-button.html.twig
rename to components/button/button.twig
index cbc205c..b2288ad 100644
--- a/templates/patterns/button/pattern-button.html.twig
+++ b/components/button/button.twig
@@ -1,10 +1,10 @@
{% if variant and variant|lower != 'default' %}
- {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'mzp-t-' ~ v})|replace({'_': '-'})) %}
+ {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'mzp-t-' ~ v})|replace({_: '-'})) %}
{% set attributes = attributes.addClass(variants) %}
{% endif %}
{% if size != '' %}
- {% set attributes = attributes.addClass('mzp-t-' ~ size|lower|replace({'_': '-'})) %}
+ {% set attributes = attributes.addClass('mzp-t-' ~ size|lower|replace({_: '-'})) %}
{% endif %}
{% if url or attributes.href %}
diff --git a/components/call_out/call_out.component.yml b/components/call_out/call_out.component.yml
new file mode 100644
index 0000000..43b92eb
--- /dev/null
+++ b/components/call_out/call_out.component.yml
@@ -0,0 +1,35 @@
+name: "Call out"
+description: "A vertical call out section containing a logo, headline, description and a call-to-action button. https://protocol.mozilla.org/components/detail/call-out.html"
+variants:
+ default:
+ title: Default
+ compact:
+ title: Compact
+slots:
+ title:
+ title: Title
+ description: "Call Out title."
+ desc:
+ title: Description
+ description: "Call Out description."
+ content:
+ title: Content
+ description: "Call Out free renderable content"
+props:
+ type: object
+ properties:
+ heading_level:
+ title: "Heading level"
+ type: integer
+ enum:
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ "meta:enum":
+ 2: "h2 (Default)"
+ 3: h3
+ 4: h4
+ 5: h5
+ 6: h6
diff --git a/components/call_out/call_out.preview.story.yml b/components/call_out/call_out.preview.story.yml
new file mode 100644
index 0000000..1c539cc
--- /dev/null
+++ b/components/call_out/call_out.preview.story.yml
@@ -0,0 +1,18 @@
+name: Preview
+slots:
+ title: "Example headline with 35 characters"
+ desc:
+ - "#markup": '<p>A description with a maximum of 140 characters and <a href="#">a link</a>. That means we usually only have room for one or two sentences. Like this.</p>'
+ content:
+ - type: component
+ component: "ui_suite_protocol:button"
+ slots:
+ label: "Download Firefox"
+ props:
+ variant: product
+ - type: component
+ component: "ui_suite_protocol:button"
+ slots:
+ label: "Firefox Privacy Notice"
+props:
+ heading_level: 3
diff --git a/templates/patterns/call_out/pattern-call_out.html.twig b/components/call_out/call_out.twig
similarity index 93%
rename from templates/patterns/call_out/pattern-call_out.html.twig
rename to components/call_out/call_out.twig
index 26df63b..9c4d958 100644
--- a/templates/patterns/call_out/pattern-call_out.html.twig
+++ b/components/call_out/call_out.twig
@@ -1,5 +1,5 @@
{% if variant and variant|lower != 'default' %}
- {% set attributes = attributes.addClass('mzp-c-call-out-' ~ variant|lower|replace({'_': '-'})) %}
+ {% set attributes = attributes.addClass('mzp-c-call-out-' ~ variant|lower|replace({_: '-'})) %}
{% else %}
{% set attributes = attributes.addClass('mzp-c-call-out') %}
{% endif %}
diff --git a/components/card/card.component.yml b/components/card/card.component.yml
new file mode 100644
index 0000000..0bb8b20
--- /dev/null
+++ b/components/card/card.component.yml
@@ -0,0 +1,65 @@
+name: Card
+description: "A Card is a unit of content featuring an image along with a title and description, wrapped in a block-level link. https://protocol.mozilla.org/components/detail/card.html"
+variants:
+ extra_small:
+ title: "Extra small"
+ small:
+ title: "Small (default)"
+ medium:
+ title: Medium
+ large:
+ title: Large
+slots:
+ image:
+ title: Image
+ description: "Card image."
+ tag:
+ title: Tag
+ description: "Card tag, just one or two words, sometimes with an icon, above the title. Plain text."
+ title:
+ title: Title
+ description: "Card title. Plain text. One or two lines (about 50 characters max)"
+ desc:
+ title: Description
+ description: "Card description. Plain text. Two or three lines (about 150 characters max)"
+ meta:
+ title: Meta
+ description: "Card meta. Plain text."
+ cta:
+ title: CTA
+ description: "Card CTA. Plain text."
+props:
+ type: object
+ properties:
+ link:
+ title: "Block link"
+ description: "URL of a Web link, which is wrapping the card"
+ $ref: "ui-patterns://url"
+ heading_level:
+ title: "Heading level"
+ type: integer
+ enum:
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ "meta:enum":
+ 2: "h2 (Default)"
+ 3: h3
+ 4: h4
+ 5: h5
+ 6: h6
+ aspect:
+ title: "Aspect ratio"
+ type: string
+ enum:
+ - ""
+ - 1-1
+ - 3-2
+ - 16-9
+ "meta:enum":
+ "": Default
+ 1-1: "1:1"
+ 3-2: "3:2"
+ 16-9: "16:9"
diff --git a/components/card/card.preview.story.yml b/components/card/card.preview.story.yml
new file mode 100644
index 0000000..fadc702
--- /dev/null
+++ b/components/card/card.preview.story.yml
@@ -0,0 +1,14 @@
+name: Preview
+slots:
+ image:
+ theme: image
+ uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC"
+ tag: "Card tag"
+ title: "This example headline has 40 characters"
+ desc: "A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like."
+ meta: "6 hours ago"
+ cta: "A short inline text cta"
+props:
+ link: "#"
+ heading_level: 2
+ aspect: ""
diff --git a/templates/patterns/card/pattern-card.html.twig b/components/card/card.twig
similarity index 92%
rename from templates/patterns/card/pattern-card.html.twig
rename to components/card/card.twig
index 89f51d8..b0eed0f 100644
--- a/templates/patterns/card/pattern-card.html.twig
+++ b/components/card/card.twig
@@ -1,5 +1,5 @@
{% if variant and variant|lower != 'small' %}
- {% set attributes = attributes.addClass('mzp-c-card-' ~ variant|lower|replace({'_': '-'})) %}
+ {% set attributes = attributes.addClass('mzp-c-card-' ~ variant|lower|replace({_: '-'})) %}
{% endif %}
{% set attributes = aspect ? attributes.addClass('mzp-has-aspect-' ~ aspect) : attributes %}
@@ -10,7 +10,7 @@
{% endif %}
{% if image %}
<div class="mzp-c-card-media-wrapper">
- {{ image|add_class("mzp-c-card-image") }}
+ {{ image|add_class('mzp-c-card-image') }}
</div>
{% endif %}
<div class="mzp-c-card-content">
diff --git a/components/card_layout/card_layout.component.yml b/components/card_layout/card_layout.component.yml
new file mode 100644
index 0000000..2a1b2e5
--- /dev/null
+++ b/components/card_layout/card_layout.component.yml
@@ -0,0 +1,27 @@
+name: "Card layout"
+description: "A layout class for displaying card components in different arrangements. https://protocol.mozilla.org/components/detail/card-layout--overview.html"
+group: Layout
+variants:
+ hero:
+ title: "Hero (Default)"
+ description: "Sets up a five-card layout with one large hero card. Make sure to have one card component with large variant."
+ half:
+ title: Half
+ description: "Sets up a two-column layout so it’s best for even numbers of cards. Use medium sized cards if the container is wide, or small or extra-small cards in narrower containers."
+ third:
+ title: Third
+ description: "Sets up a three-column layout so cards should come in multiples of three to avoid empty spaces when cards wrap to new rows. At some medium breakpoints the layout will form two columns and an empty space may be unavoidable. This layout really works best with six cards so it avoids gaps at all widths (two rows of three or three rows of two)."
+ quarter:
+ title: Quarter
+ description: "Sets up a four-column layout so cards should come in multiples of four to avoid empty spaces when cards wrap to new rows."
+slots:
+ cards:
+ title: Cards
+ description: "Renderable cards"
+props:
+ type: object
+ properties:
+ with_container:
+ title: "With container?"
+ type: boolean
+ default: true
diff --git a/components/card_layout/card_layout.preview.story.yml b/components/card_layout/card_layout.preview.story.yml
new file mode 100644
index 0000000..c72572b
--- /dev/null
+++ b/components/card_layout/card_layout.preview.story.yml
@@ -0,0 +1,19 @@
+name: Preview
+slots:
+ cards:
+ - type: component
+ component: "ui_suite_protocol:card"
+ story: preview
+ props:
+ variant: large
+ - type: component
+ component: "ui_suite_protocol:card"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:card"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:card"
+ story: preview
+props:
+ with_container: true
diff --git a/templates/patterns/card_layout/pattern-card_layout.html.twig b/components/card_layout/card_layout.twig
similarity index 89%
rename from templates/patterns/card_layout/pattern-card_layout.html.twig
rename to components/card_layout/card_layout.twig
index d3aaece..39ce4b1 100644
--- a/templates/patterns/card_layout/pattern-card_layout.html.twig
+++ b/components/card_layout/card_layout.twig
@@ -1,5 +1,5 @@
{% set attributes = attributes.addClass('mzp-l-card-' ~ variant|lower|default('hero')) %}
{% set attributes = with_container ? attributes.addClass('mzp-l-content') : attributes %}
-<div{{ attributes }}>
+<div{{ attributes }}>
{{ cards }}
</div>
diff --git a/components/details/details.component.yml b/components/details/details.component.yml
new file mode 100644
index 0000000..71dbede
--- /dev/null
+++ b/components/details/details.component.yml
@@ -0,0 +1,10 @@
+name: Details
+description: "Native details and summary support. https://protocol.mozilla.org/components/detail/details.html"
+group: Basic
+slots:
+ content:
+ title: Content
+ description: "Free renderable content"
+libraryOverrides:
+ dependencies:
+ - ui_suite_protocol/details
diff --git a/components/details/details.preview.story.yml b/components/details/details.preview.story.yml
new file mode 100644
index 0000000..69b10a5
--- /dev/null
+++ b/components/details/details.preview.story.yml
@@ -0,0 +1,21 @@
+name: Preview
+slots:
+ content:
+ - type: html_tag
+ tag: h3
+ value: Summary
+ - type: html_tag
+ tag: p
+ value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan neque ipsum. Nunc ligula eros, elementum sit amet blandit eu, egestas at justo."
+ - type: html_tag
+ tag: h3
+ value: Heading
+ - type: html_tag
+ tag: p
+ value: "Proin in dapibus nulla. Nam vitae est vitae tellus mollis eleifend in eu erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean feugiat ante porttitor purus elementum, eget vestibulum ex volutpat. Sed gravida convallis rutrum. Quisque pharetra eros eget malesuada vulputate."
+ - type: html_tag
+ tag: h4
+ value: "Sub Heading"
+ - type: html_tag
+ tag: p
+ value: "Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat. Nullam facilisis odio non ante varius tempor ut ac turpis."
diff --git a/components/details/details.twig b/components/details/details.twig
new file mode 100644
index 0000000..e925fc6
--- /dev/null
+++ b/components/details/details.twig
@@ -0,0 +1,3 @@
+<section{{ attributes.addClass('mzp-c-details') }}>
+ {{ content }}
+</section>
diff --git a/components/emphasis_box/emphasis_box.component.yml b/components/emphasis_box/emphasis_box.component.yml
new file mode 100644
index 0000000..a5f7c65
--- /dev/null
+++ b/components/emphasis_box/emphasis_box.component.yml
@@ -0,0 +1,6 @@
+name: "Emphasis box"
+description: "A visual wrapper used around some CTAs and forms in both marketing and application contexts. https://protocol.mozilla.org/components/detail/emphasis-box.html"
+slots:
+ content:
+ title: Content
+ description: "Box content."
diff --git a/components/emphasis_box/emphasis_box.preview.story.yml b/components/emphasis_box/emphasis_box.preview.story.yml
new file mode 100644
index 0000000..194b603
--- /dev/null
+++ b/components/emphasis_box/emphasis_box.preview.story.yml
@@ -0,0 +1,9 @@
+name: Preview
+slots:
+ content:
+ - type: html_tag
+ tag: h3
+ value: "This is a standard Emphasis Box"
+ - type: html_tag
+ tag: p
+ value: "This is some filler content. Cats are the best, every cat."
diff --git a/templates/patterns/emphasis_box/pattern-emphasis_box.html.twig b/components/emphasis_box/emphasis_box.twig
similarity index 100%
rename from templates/patterns/emphasis_box/pattern-emphasis_box.html.twig
rename to components/emphasis_box/emphasis_box.twig
diff --git a/components/footer/footer.component.yml b/components/footer/footer.component.yml
new file mode 100644
index 0000000..4296b9d
--- /dev/null
+++ b/components/footer/footer.component.yml
@@ -0,0 +1,29 @@
+name: Footer
+description: "A page footer component, containing common links to complement primary navigation and flexible structure. It is best viewed with “full view†as it’s meant to take up the full width of the page. https://protocol.mozilla.org/components/detail/footer.html"
+group: Footer
+slots:
+ logo:
+ title: Logo
+ description: "Any link put here will be overridden by the Mozilla logo"
+ sections:
+ title: Sections
+ description: "An list of footer_section components."
+ language:
+ title: Language
+ description: "Placeholder for the language switcher"
+ license:
+ title: License
+ description: "Placeholder for the license text"
+props:
+ type: object
+ properties:
+ social:
+ title: Social
+ $ref: "ui-patterns://links"
+ terms:
+ title: Terms
+ $ref: "ui-patterns://links"
+libraryOverrides:
+ dependencies:
+ - ui_suite_protocol/details
+ - ui_suite_protocol/footer
diff --git a/components/footer/footer.preview.story.yml b/components/footer/footer.preview.story.yml
new file mode 100644
index 0000000..35b5dde
--- /dev/null
+++ b/components/footer/footer.preview.story.yml
@@ -0,0 +1,72 @@
+name: Preview
+slots:
+ logo:
+ type: html_tag
+ tag: a
+ value: Mozilla
+ sections:
+ - type: component
+ component: "ui_suite_protocol:footer_section"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:footer_section"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:footer_section"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:footer_section"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:footer_section"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:footer_section"
+ story: preview
+ language: "[Placeholder for the language switcher]"
+ license:
+ - "#plain_text": "Visit Mozilla Corporation’s not-for-profit parent, the "
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "https://foundation.mozilla.org/"
+ value: "Mozilla Foundation"
+ - "#plain_text": .
+ - type: html_tag
+ tag: br
+ - "#plain_text": "Portions of this content are ©1998–2022 by individual mozilla.org contributors."
+ - type: html_tag
+ tag: br
+ - "#plain_text": "Content available under a "
+ - type: html_tag
+ tag: a
+ attributes:
+ href: "https://www.mozilla.org/foundation/licensing/website-content/"
+ rel: license
+ value: "Creative Commons license"
+ - "#plain_text": .
+props:
+ social:
+ - title: Twitter
+ url: "https://twitter.com/firefox"
+ attributes:
+ class:
+ - twitter
+ - title: YouTube
+ url: "https://www.youtube.com/firefoxchannel"
+ attributes:
+ class:
+ - youtube
+ terms:
+ - title: "Website Privacy Notice"
+ url: "https://www.mozilla.org/privacy/websites/"
+ - title: Cookies
+ url: "https://www.mozilla.org/privacy/websites/#cookies"
+ - title: Legal
+ url: "https://www.mozilla.org/about/legal/"
+ - title: "Website Privacy Notice"
+ url: "https://www.mozilla.org/privacy/websites/"
+ - title: Cookies
+ url: "https://www.mozilla.org/privacy/websites/#cookies"
+ - title: Legal
+ url: "https://www.mozilla.org/about/legal/"
diff --git a/templates/patterns/footer/pattern-footer.html.twig b/components/footer/footer.twig
similarity index 90%
rename from templates/patterns/footer/pattern-footer.html.twig
rename to components/footer/footer.twig
index de3e21b..4685de7 100644
--- a/templates/patterns/footer/pattern-footer.html.twig
+++ b/components/footer/footer.twig
@@ -1,14 +1,14 @@
<footer{{ attributes.addClass('mzp-c-footer') }}>
<div class="mzp-l-content">
- {% if logo or sections %}
+ {% if logo or sections %}
<nav class="mzp-c-footer-primary">
- {% if logo %}
+ {% if logo %}
<div class="mzp-c-footer-primary-logo">
{{ logo }}
</div>
{% endif %}
- {% if sections %}
+ {% if sections %}
<div class="mzp-c-footer-sections">
{{ sections }}
</div>
@@ -16,15 +16,15 @@
</nav>
{% endif %}
- {% if language or social or license or terms %}
+ {% if language or social or license or terms %}
<nav class="mzp-c-footer-secondary">
-
+
{% if language %}
<div class="mzp-c-footer-language">
{{ language }}
</div>
{% endif %}
-
+
{% if social %}
<ul class="mzp-c-footer-links-social">
{% for item in social %}
@@ -35,7 +35,7 @@
{% endfor %}
</ul>
{% endif %}
-
+
{% if license or terms %}
<div class="mzp-c-footer-legal">
{% if license %}
@@ -55,10 +55,9 @@
{% endif %}
</div>
{% endif %}
-
+
</nav>
{% endif %}
</div>
</footer>
-
diff --git a/components/footer_section/footer_section.component.yml b/components/footer_section/footer_section.component.yml
new file mode 100644
index 0000000..a9df063
--- /dev/null
+++ b/components/footer_section/footer_section.component.yml
@@ -0,0 +1,12 @@
+name: "(Footer section)"
+description: "To use only in a menu component."
+group: Footer
+slots:
+ heading:
+ title: Heading
+props:
+ type: object
+ properties:
+ list:
+ title: List
+ $ref: "ui-patterns://links"
diff --git a/components/footer_section/footer_section.preview.story.yml b/components/footer_section/footer_section.preview.story.yml
new file mode 100644
index 0000000..47af1f8
--- /dev/null
+++ b/components/footer_section/footer_section.preview.story.yml
@@ -0,0 +1,17 @@
+name: Preview
+slots:
+ heading: Topic
+props:
+ list:
+ - title: "Link One"
+ url: "https://www.mozilla.org/firefox/new/"
+ - title: "Link Two"
+ url: "https://www.mozilla.org/firefox/"
+ - title: "Link Three"
+ url: "https://www.mozilla.org/firefox/mobile/"
+ - title: "Link Four"
+ url: "https://www.mozilla.org/firefox/features/"
+ - title: "Long link just to mix things up and cause problems."
+ url: "https://www.mozilla.org/firefox/channel/desktop/"
+ - title: "Link Six"
+ url: "https://www.mozilla.org/firefox/channel/desktop/"
diff --git a/templates/patterns/footer_section/pattern-footer_section.html.twig b/components/footer_section/footer_section.twig
similarity index 100%
rename from templates/patterns/footer_section/pattern-footer_section.html.twig
rename to components/footer_section/footer_section.twig
diff --git a/components/menu/menu.component.yml b/components/menu/menu.component.yml
new file mode 100644
index 0000000..062b4da
--- /dev/null
+++ b/components/menu/menu.component.yml
@@ -0,0 +1,18 @@
+name: Menu
+description: "An expandable menu used in the Navigation organism, consisting of menu panels. https://protocol.mozilla.org/components/detail/menu.html"
+group: Navigation
+slots:
+ panels:
+ title: "Menu panels."
+ description: "Menu panels components"
+props:
+ type: object
+ properties:
+ items:
+ title: "Menu items."
+ $ref: "ui-patterns://links"
+libraryOverrides:
+ js:
+ menu_init.js: {}
+ dependencies:
+ - ui_suite_protocol/menu
diff --git a/components/menu/menu.preview.story.yml b/components/menu/menu.preview.story.yml
new file mode 100644
index 0000000..85d5f4f
--- /dev/null
+++ b/components/menu/menu.preview.story.yml
@@ -0,0 +1,15 @@
+name: Preview
+slots:
+ panels:
+ type: component
+ component: "ui_suite_protocol:menu_panel"
+ story: preview
+props:
+ items:
+ - title: "Sample link"
+ url: "https://www.mozilla.org/"
+ - title: "Sample Link with Popup"
+ attributes:
+ aria-controls: menu-panel_2a745173
+ - title: "Sample link again"
+ url: "https://www.mozilla.org/"
diff --git a/templates/patterns/menu/pattern-menu.html.twig b/components/menu/menu.twig
similarity index 98%
rename from templates/patterns/menu/pattern-menu.html.twig
rename to components/menu/menu.twig
index ac2c2fc..b24ae81 100644
--- a/templates/patterns/menu/pattern-menu.html.twig
+++ b/components/menu/menu.twig
@@ -5,13 +5,13 @@
{% set item_attributes = item_attributes.addClass('mzp-c-menu-title') %}
{% if item_attributes['aria-controls'] %}
<li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
- {% set url = item.url|default(item_attributes.href|default("#")) %}
+ {% set url = item.url|default(item_attributes.href|default('#')) %}
<a{{ item_attributes.setAttribute('aria-haspopup', 'true').setAttribute('href', url) }}>{{ item.title }}</a>
{{ panels }}
</li>
{% else %}
<li class="mzp-c-menu-category">
- {% set url = item.url|default(item_attributes.href|default("")) %}
+ {% set url = item.url|default(item_attributes.href|default('')) %}
{% if url %}
<a{{ item_attributes.setAttribute('href', url) }}>{{ item.title }}</a>
{% else %}
diff --git a/templates/patterns/menu/menu_init.js b/components/menu/menu_init.js
similarity index 100%
rename from templates/patterns/menu/menu_init.js
rename to components/menu/menu_init.js
diff --git a/components/menu_item/menu_item.component.yml b/components/menu_item/menu_item.component.yml
new file mode 100644
index 0000000..7c190a1
--- /dev/null
+++ b/components/menu_item/menu_item.component.yml
@@ -0,0 +1,35 @@
+name: "Menu item"
+description: "A menu item with link, title, description, icon and a list of secondary links. Each Menu Item should have a link destination. To use only in a menu component. https://protocol.mozilla.org/components/detail/menu-item.html"
+group: Navigation
+slots:
+ title:
+ title: Title
+ description: "Menu item title"
+ desc:
+ title: Description
+ description: "Menu item description"
+ icon:
+ title: Icon
+ description: "A renderable image"
+props:
+ type: object
+ properties:
+ items:
+ title: "Menu items"
+ description: "A nested list of links"
+ $ref: "ui-patterns://links"
+ heading_level:
+ title: "Heading level"
+ type: integer
+ enum:
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ "meta:enum":
+ 2: h2
+ 3: h3
+ 4: "h4 (Default)"
+ 5: h5
+ 6: h6
diff --git a/components/menu_item/menu_item.preview.story.yml b/components/menu_item/menu_item.preview.story.yml
new file mode 100644
index 0000000..96ffa9e
--- /dev/null
+++ b/components/menu_item/menu_item.preview.story.yml
@@ -0,0 +1,18 @@
+name: Preview
+slots:
+ title: "A headline with 30 characters "
+ desc: "This is a short description with only a single sentence and no more."
+ icon:
+ type: html_tag
+ tag: img
+ attributes:
+ src: "https://protocol.mozilla.org/protocol/img/icons/image.svg"
+ alt: "Useful alt text where appropriate"
+props:
+ items:
+ - title: Home
+ url: "#"
+ - title: Library
+ url: "#"
+ - title: Data
+ heading_level: 4
diff --git a/templates/patterns/menu_item/pattern-menu_item.html.twig b/components/menu_item/menu_item.twig
similarity index 91%
rename from templates/patterns/menu_item/pattern-menu_item.html.twig
rename to components/menu_item/menu_item.twig
index d987f79..64144e7 100644
--- a/templates/patterns/menu_item/pattern-menu_item.html.twig
+++ b/components/menu_item/menu_item.twig
@@ -1,4 +1,4 @@
-{% set attributes = icon ? attributes.addClass("mzp-has-icon") : attributes %}
+{% set attributes = icon ? attributes.addClass('mzp-has-icon') : attributes %}
<section{{ attributes.addClass('mzp-c-menu-item') }}>
{% if title or desc %}
<div class="mzp-c-menu-item-link">
diff --git a/components/menu_list/menu_list.component.yml b/components/menu_list/menu_list.component.yml
new file mode 100644
index 0000000..7f7ae27
--- /dev/null
+++ b/components/menu_list/menu_list.component.yml
@@ -0,0 +1,22 @@
+name: "Menu list"
+description: "A sort title, when clicked, expands a list of links. https://protocol.mozilla.org/components/detail/menu-list.html"
+variants:
+ default:
+ title: Default
+ download:
+ title: Download
+slots:
+ title:
+ title: Title
+props:
+ type: object
+ properties:
+ items:
+ title: "Menu items"
+ description: "A nested list of menu items."
+ $ref: "ui-patterns://links"
+libraryOverrides:
+ js:
+ menu_list_init.js: {}
+ dependencies:
+ - ui_suite_protocol/details
diff --git a/components/menu_list/menu_list.preview.story.yml b/components/menu_list/menu_list.preview.story.yml
new file mode 100644
index 0000000..77a51a2
--- /dev/null
+++ b/components/menu_list/menu_list.preview.story.yml
@@ -0,0 +1,13 @@
+name: Preview
+slots:
+ title: "Meet the Family"
+props:
+ items:
+ - title: Lockwise
+ url: "#"
+ - title: Monitor
+ url: "#"
+ - title: Data
+ url: "#"
+ - title: "Slightly longer menu item for testing"
+ url: "#"
diff --git a/templates/patterns/menu_list/pattern-menu_list.html.twig b/components/menu_list/menu_list.twig
similarity index 97%
rename from templates/patterns/menu_list/pattern-menu_list.html.twig
rename to components/menu_list/menu_list.twig
index 0e85327..2f9b3be 100644
--- a/templates/patterns/menu_list/pattern-menu_list.html.twig
+++ b/components/menu_list/menu_list.twig
@@ -8,7 +8,7 @@
{% for item in items %}
<li class="mzp-c-menu-list-item">
<a href="#">{{ item.title }}</a>
- </li>
+ </li>
{% endfor %}
</ul>
</div>
diff --git a/templates/patterns/menu_list/menu_list_init.js b/components/menu_list/menu_list_init.js
similarity index 100%
rename from templates/patterns/menu_list/menu_list_init.js
rename to components/menu_list/menu_list_init.js
diff --git a/components/menu_panel/menu_panel.component.yml b/components/menu_panel/menu_panel.component.yml
new file mode 100644
index 0000000..08400b8
--- /dev/null
+++ b/components/menu_panel/menu_panel.component.yml
@@ -0,0 +1,20 @@
+name: "(Menu panel)"
+description: "An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule. https://protocol.mozilla.org/components/detail/menu.html"
+group: Navigation
+slots:
+ first_col:
+ title: "First columnn"
+ description: "List of menu items components."
+ second_col:
+ title: "Second columnn"
+ description: "List of menu items components."
+ card:
+ title: Card
+ description: "A card component."
+props:
+ type: object
+ properties:
+ panel_id:
+ title: ID
+ description: "Used by menu component to trigger panel opening. Must start with a letter. Random value if missing."
+ type: string
diff --git a/components/menu_panel/menu_panel.preview.story.yml b/components/menu_panel/menu_panel.preview.story.yml
new file mode 100644
index 0000000..e4a82f8
--- /dev/null
+++ b/components/menu_panel/menu_panel.preview.story.yml
@@ -0,0 +1,28 @@
+name: Preview
+slots:
+ first_col:
+ - type: component
+ component: "ui_suite_protocol:menu_item"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:menu_item"
+ story: preview
+ second_col:
+ - type: component
+ component: "ui_suite_protocol:menu_item"
+ slots:
+ title: "A headline with 30 characters"
+ - type: component
+ component: "ui_suite_protocol:menu_item"
+ slots:
+ title: "A headline with 30 characters"
+ - type: component
+ component: "ui_suite_protocol:menu_item"
+ slots:
+ title: "A headline with 30 characters"
+ card:
+ type: component
+ component: "ui_suite_protocol:card"
+ story: preview
+props:
+ panel_id: menu-panel_2a745173
diff --git a/templates/patterns/menu_panel/pattern-menu_panel.html.twig b/components/menu_panel/menu_panel.twig
similarity index 81%
rename from templates/patterns/menu_panel/pattern-menu_panel.html.twig
rename to components/menu_panel/menu_panel.twig
index 6e7de6c..698a862 100644
--- a/templates/patterns/menu_panel/pattern-menu_panel.html.twig
+++ b/components/menu_panel/menu_panel.twig
@@ -1,22 +1,22 @@
{% set attributes = card ? attributes.addClass('mzp-has-card') : attributes %}
-{% set panel_id = panel_id|default("menu-panel_" ~ random()) %}
+{% set panel_id = panel_id|default('menu-panel_' ~ random()) %}
<div{{ attributes.addClass('mzp-c-menu-panel').setAttribute('id', panel_id) }}>
<div class="mzp-c-menu-panel-container">
<button class="mzp-c-menu-button-close" type="button" aria-controls="{{ panel_id }}">
- {{ "Close menu"|t }}
+ {{ 'Close menu'|t }}
</button>
<div class="mzp-c-menu-panel-content">
{% if first_col %}
<ul>
- {% for item in first_col %}
+ {% for item in first_col %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endif %}
{% if first_col %}
<ul>
- {% for item in second_col %}
+ {% for item in second_col %}
<li>{{ item }}</li>
{% endfor %}
</ul>
diff --git a/components/navigation/navigation.component.yml b/components/navigation/navigation.component.yml
new file mode 100644
index 0000000..b971cb1
--- /dev/null
+++ b/components/navigation/navigation.component.yml
@@ -0,0 +1,19 @@
+name: Navigation
+description: "Main site Navigation, containing Menu and Secondary Download Button components. https://protocol.mozilla.org/components/detail/navigation--default.html"
+group: Navigation
+slots:
+ logo:
+ title: Logo
+ description: "A renderable link, automatically replaced by the logo."
+ menu:
+ title: Menu
+ description: "A menu component."
+ download:
+ title: Download
+ description: "A button component."
+libraryOverrides:
+ js:
+ navigation_init.js: {}
+ dependencies:
+ - ui_suite_protocol/menu
+ - ui_suite_protocol/navigation
diff --git a/components/navigation/navigation.preview.story.yml b/components/navigation/navigation.preview.story.yml
new file mode 100644
index 0000000..5f42806
--- /dev/null
+++ b/components/navigation/navigation.preview.story.yml
@@ -0,0 +1,20 @@
+name: Preview
+slots:
+ logo:
+ type: html_tag
+ tag: a
+ attributes:
+ href: "https://www.mozilla.org/"
+ value: Mozilla
+ menu:
+ type: component
+ component: "ui_suite_protocol:menu"
+ story: preview
+ download:
+ type: component
+ component: "ui_suite_protocol:button"
+ slots:
+ label: "Download firefox"
+ props:
+ size: md
+ variant: product__secondary
diff --git a/templates/patterns/navigation/pattern-navigation.html.twig b/components/navigation/navigation.twig
similarity index 98%
rename from templates/patterns/navigation/pattern-navigation.html.twig
rename to components/navigation/navigation.twig
index 68dcb2d..b1201a1 100644
--- a/templates/patterns/navigation/pattern-navigation.html.twig
+++ b/components/navigation/navigation.twig
@@ -10,7 +10,7 @@
{{ logo }}
</div>
{% endif %}
-
+
{% if menu or download %}
<div class="mzp-c-navigation-items">
{% if menu %}
@@ -29,4 +29,3 @@
</div>
</div>
</nav>
-
diff --git a/templates/patterns/navigation/navigation_init.js b/components/navigation/navigation_init.js
similarity index 100%
rename from templates/patterns/navigation/navigation_init.js
rename to components/navigation/navigation_init.js
diff --git a/components/newsletter/newsletter.component.yml b/components/newsletter/newsletter.component.yml
new file mode 100644
index 0000000..522805e
--- /dev/null
+++ b/components/newsletter/newsletter.component.yml
@@ -0,0 +1,33 @@
+name: Newsletter
+description: "The standard newsletter subscription form. The standard newsletter subscription form. https://protocol.mozilla.org/components/detail/newsletter--default.html"
+slots:
+ image:
+ title: Image
+ description: "Newsletter image."
+ title:
+ title: Title
+ description: "Newsletter title."
+ tagline:
+ title: Description
+ description: "Newsletter description."
+ content:
+ title: Content
+ description: "Renderable form"
+props:
+ type: object
+ properties:
+ heading_level:
+ title: "Heading level"
+ type: integer
+ enum:
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ "meta:enum":
+ 2: "h2 (Default)"
+ 3: h3
+ 4: h4
+ 5: h5
+ 6: h6
diff --git a/components/newsletter/newsletter.preview.story.yml b/components/newsletter/newsletter.preview.story.yml
new file mode 100644
index 0000000..6826458
--- /dev/null
+++ b/components/newsletter/newsletter.preview.story.yml
@@ -0,0 +1,19 @@
+name: Preview
+slots:
+ image:
+ theme: image
+ uri: assets/static/img/newsletter/newsletter-image.png
+ title: "Love the Web?"
+ tagline: "Get the Mozilla newsletter and help us keep it open and free."
+ content:
+ - type: html_tag
+ tag: label
+ value: "Your email address"
+ - type: html_tag
+ tag: input
+ attributes:
+ type: email
+ placeholder: yourname@example.com
+ - "#markup": '<p class="mzp-c-form-submit"><button type="submit" class="mzp-c-button">Sign up now</button><span class="mzp-c-fieldnote">We will only send you Mozilla-related information.</span></p>'
+props:
+ heading_level: 3
diff --git a/templates/patterns/newsletter/pattern-newsletter.html.twig b/components/newsletter/newsletter.twig
similarity index 99%
rename from templates/patterns/newsletter/pattern-newsletter.html.twig
rename to components/newsletter/newsletter.twig
index fbc2f60..af12a73 100644
--- a/templates/patterns/newsletter/pattern-newsletter.html.twig
+++ b/components/newsletter/newsletter.twig
@@ -2,7 +2,7 @@
{% if image %}
<div class="mzp-c-newsletter-image">{{ image }}</div>
{% endif %}
-
+
<div class="mzp-c-newsletter-form">
{% if title or tagline %}
diff --git a/components/notification_bar/notification_bar.component.yml b/components/notification_bar/notification_bar.component.yml
new file mode 100644
index 0000000..4b5ffdc
--- /dev/null
+++ b/components/notification_bar/notification_bar.component.yml
@@ -0,0 +1,33 @@
+name: "Notification bar"
+description: "Provides contextual feedback messages. The message should be short, usually a single sentence. The bar can include an optional button to dismiss the notification. https://protocol.mozilla.org/components/detail/notification-bar--default.html"
+variants:
+ default:
+ title: Default
+ success:
+ title: Success
+ description: "A positive notification, to indicate a successful action"
+ warning:
+ title: Warning
+ description: "A cautionary notification, to indicate something may be risky but the user can choose to proceed."
+ error:
+ title: Error
+ description: "A negative notification, to indicate an unsuccessful action."
+ click:
+ title: Click
+ description: "To call attention to some action the user should take."
+slots:
+ message:
+ title: Message
+ description: "The alert message."
+props:
+ type: object
+ properties:
+ dismiss:
+ title: "Dismiss?"
+ type: boolean
+ default: 1
+libraryOverrides:
+ js:
+ notification_bar_init.js: {}
+ dependencies:
+ - ui_suite_protocol/notification_bar
diff --git a/components/notification_bar/notification_bar.preview.story.yml b/components/notification_bar/notification_bar.preview.story.yml
new file mode 100644
index 0000000..9e7acf4
--- /dev/null
+++ b/components/notification_bar/notification_bar.preview.story.yml
@@ -0,0 +1,5 @@
+name: Preview
+slots:
+ message: "A simple alert—check it out!"
+props:
+ dismiss: true
diff --git a/templates/patterns/notification_bar/pattern-notification_bar.html.twig b/components/notification_bar/notification_bar.twig
similarity index 82%
rename from templates/patterns/notification_bar/pattern-notification_bar.html.twig
rename to components/notification_bar/notification_bar.twig
index e4a3d27..51e3c57 100644
--- a/templates/patterns/notification_bar/pattern-notification_bar.html.twig
+++ b/components/notification_bar/notification_bar.twig
@@ -1,10 +1,10 @@
{% if variant and variant|lower != 'default' %}
- {% set attributes = attributes.addClass('mzp-t-' ~ variant|lower|replace({'_': '-'})) %}
+ {% set attributes = attributes.addClass('mzp-t-' ~ variant|lower|replace({_: '-'})) %}
{% endif %}
<aside{{ attributes.addClass('mzp-c-notification-bar') }}>
{% if dismiss %}
- <button class="mzp-c-notification-bar-button" type="button">{{ "Close notification"|t }}</button>
+ <button class="mzp-c-notification-bar-button" type="button">{{ 'Close notification'|t }}</button>
{% endif %}
{{ message }}
</aside>
diff --git a/templates/patterns/notification_bar/notification_bar_init.js b/components/notification_bar/notification_bar_init.js
similarity index 100%
rename from templates/patterns/notification_bar/notification_bar_init.js
rename to components/notification_bar/notification_bar_init.js
diff --git a/components/picto/picto.component.yml b/components/picto/picto.component.yml
new file mode 100644
index 0000000..3e487b1
--- /dev/null
+++ b/components/picto/picto.component.yml
@@ -0,0 +1,37 @@
+name: Picto
+description: "A small block of content featuring a pictographic icon, headline, and body. https://protocol.mozilla.org/components/detail/picto.html"
+variants:
+ default:
+ title: Default
+ side:
+ title: Side
+ center:
+ title: Center
+slots:
+ image:
+ title: Image
+ description: "Picto image."
+ heading:
+ title: Heading
+ description: "Picto image. Plain text."
+ body:
+ title: Body
+ description: "A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs."
+props:
+ type: object
+ properties:
+ heading_level:
+ title: "Heading level"
+ type: integer
+ enum:
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ "meta:enum":
+ 2: h2
+ 3: "h3 (Default)"
+ 4: h4
+ 5: h5
+ 6: h6
diff --git a/components/picto/picto.preview.story.yml b/components/picto/picto.preview.story.yml
new file mode 100644
index 0000000..9177dca
--- /dev/null
+++ b/components/picto/picto.preview.story.yml
@@ -0,0 +1,15 @@
+name: Preview
+slots:
+ image:
+ theme: image
+ uri: assets/image.svg
+ alt: ""
+ attributes:
+ width: 64
+ heading: "A headline with 30 characters"
+ body:
+ type: html_tag
+ tag: p
+ value: "A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs."
+props:
+ heading_level: 3
diff --git a/templates/patterns/picto/pattern-picto.html.twig b/components/picto/picto.twig
similarity index 100%
rename from templates/patterns/picto/pattern-picto.html.twig
rename to components/picto/picto.twig
diff --git a/components/section_heading/section_heading.component.yml b/components/section_heading/section_heading.component.yml
new file mode 100644
index 0000000..531cea9
--- /dev/null
+++ b/components/section_heading/section_heading.component.yml
@@ -0,0 +1,24 @@
+name: "Section heading"
+description: "Use section headings help organize your page content into sections. https://protocol.mozilla.org/components/detail/section-heading.html"
+slots:
+ content:
+ title: Content
+ description: "Heading content "
+props:
+ type: object
+ properties:
+ heading_level:
+ title: "Heading level"
+ type: integer
+ enum:
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ "meta:enum":
+ 2: "h2 (Default)"
+ 3: h3
+ 4: h4
+ 5: h5
+ 6: h6
diff --git a/components/section_heading/section_heading.preview.story.yml b/components/section_heading/section_heading.preview.story.yml
new file mode 100644
index 0000000..dbbf2b8
--- /dev/null
+++ b/components/section_heading/section_heading.preview.story.yml
@@ -0,0 +1,6 @@
+name: Preview
+slots:
+ content:
+ "#markup": "We’re building a <strong>better</strong> Internet"
+props:
+ heading_level: 2
diff --git a/templates/patterns/section_heading/pattern-section_heading.html.twig b/components/section_heading/section_heading.twig
similarity index 78%
rename from templates/patterns/section_heading/pattern-section_heading.html.twig
rename to components/section_heading/section_heading.twig
index c2cdcf8..1b3044d 100644
--- a/templates/patterns/section_heading/pattern-section_heading.html.twig
+++ b/components/section_heading/section_heading.twig
@@ -1,3 +1,3 @@
-<h{{ heading_level|default('2') }}{{ attributes.addClass('mzp-c-section-heading') }}>
+<h{{ heading_level|default('2') }}{{ attributes.addClass('mzp-c-section-heading') }}>
{{ content }}
</h>
diff --git a/components/sidebar_menu/sidebar_menu.component.yml b/components/sidebar_menu/sidebar_menu.component.yml
new file mode 100644
index 0000000..178d5a7
--- /dev/null
+++ b/components/sidebar_menu/sidebar_menu.component.yml
@@ -0,0 +1,15 @@
+name: "Sidebar menu"
+description: "Local navigation for a subset of pages or section of a website, intended to appear in a sidebar adjacent to the main content. It can accommodate multiple categories/sub-sections in a two-level hierarchy with titles corresponding to the top level page of each sub-section. The menu summary reflects the current page, shown when the menu is collapsed in small viewports. The menu label should be the title of the site section. https://protocol.mozilla.org/components/detail/sidebar-menu.html"
+slots:
+ label:
+ title: "Menu label"
+ description: "Displayed only when collapsed in small viewports."
+props:
+ type: object
+ properties:
+ items:
+ title: "Menu items"
+ $ref: "ui-patterns://links"
+libraryOverrides:
+ dependencies:
+ - ui_suite_protocol/sidemenu
diff --git a/components/sidebar_menu/sidebar_menu.preview.story.yml b/components/sidebar_menu/sidebar_menu.preview.story.yml
new file mode 100644
index 0000000..4f22f37
--- /dev/null
+++ b/components/sidebar_menu/sidebar_menu.preview.story.yml
@@ -0,0 +1,18 @@
+name: Preview
+slots:
+ label: "Menu label"
+props:
+ items:
+ - title: Home
+ url: "#"
+ - title: Library
+ url: "#"
+ in_active_trail: true
+ below:
+ - title: "Sub 1"
+ url: "#"
+ in_active_trail: true
+ - title: "Sub 2"
+ url: "#"
+ - title: Data
+ url: "#"
diff --git a/templates/patterns/sidebar_menu/pattern-sidebar_menu.html.twig b/components/sidebar_menu/sidebar_menu.twig
similarity index 99%
rename from templates/patterns/sidebar_menu/pattern-sidebar_menu.html.twig
rename to components/sidebar_menu/sidebar_menu.twig
index 0cd94bf..c73a860 100644
--- a/templates/patterns/sidebar_menu/pattern-sidebar_menu.html.twig
+++ b/components/sidebar_menu/sidebar_menu.twig
@@ -4,7 +4,7 @@
{% if label %}
<h3 class="mzp-c-sidemenu-label">{{ label }}</h3>
{% endif %}
-
+
{# TODO: get the path to menu item #}
<ul>
<li>Menu title</li>
diff --git a/components/split/split.component.yml b/components/split/split.component.yml
new file mode 100644
index 0000000..68e02b7
--- /dev/null
+++ b/components/split/split.component.yml
@@ -0,0 +1,43 @@
+name: Split
+description: 'A full-width page section with text on one side and a single piece of media (an image or video) on the other, hence "split" into two columns. It''s highly customizable with a lot of optional classes to support different layout variations. https://protocol.mozilla.org/components/detail/split--default.html'
+variants:
+ default:
+ title: Default
+ reversed:
+ title: Reversed
+ description: "Orient the body on the right and media on the left (the reverse of the default). It’s automatically reversed in Right-To-Left (RTL) languages."
+ body_wide:
+ title: "Wide body"
+ description: "Make the body 2/3rds width and the media 1/3rd."
+ body_wide__reversed:
+ title: "Body wide reversed"
+ body_narrow:
+ title: "Body narrow"
+ body_narrow__reversed:
+ title: "Body narrow reversed"
+ pop_top:
+ title: "Pop top"
+ description: "Huge top padding."
+ pop_top__reversed:
+ title: "Pop top reversed"
+ description: "Huge top padding, reversed."
+ pop_bottom:
+ title: "Pop bottom"
+ description: "Huge bottom padding."
+ pop_bottom__reversed:
+ title: "Pop bottom reversed"
+ description: "Huge bottom padding, reversed."
+slots:
+ body:
+ title: Body
+ description: "Split body"
+ media:
+ title: Media
+ description: "Split media"
+props:
+ type: object
+ properties:
+ no_space:
+ title: "No space?"
+ type: boolean
+ default: false
diff --git a/components/split/split.preview.story.yml b/components/split/split.preview.story.yml
new file mode 100644
index 0000000..b984e02
--- /dev/null
+++ b/components/split/split.preview.story.yml
@@ -0,0 +1,15 @@
+name: Preview
+slots:
+ body:
+ - type: html_tag
+ tag: h1
+ value: "A Headline With 30 Characters"
+ attributes:
+ class:
+ - mzp-u-title-md
+ - "#markup": "<p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p>"
+ media:
+ theme: image
+ uri: assets/static/img/split/devices.png
+props:
+ no_space: false
diff --git a/templates/patterns/split/pattern-split.html.twig b/components/split/split.twig
similarity index 82%
rename from templates/patterns/split/pattern-split.html.twig
rename to components/split/split.twig
index e6c9c36..88e33c7 100644
--- a/templates/patterns/split/pattern-split.html.twig
+++ b/components/split/split.twig
@@ -1,11 +1,11 @@
{% if variant and variant|lower != 'default' %}
- {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'mzp-l-split-' ~ v})|replace({'_': '-'})) %}
+ {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'mzp-l-split-' ~ v})|replace({_: '-'})) %}
{% set attributes = attributes.addClass(variants) %}
{% endif %}
{% set attributes = no_space ? attributes.addClass('mzp-t-split-nospace') : attributes %}
-<section{{ attributes.addClass('mzp-c-split') }}>
+<section{{ attributes.addClass('mzp-c-split') }}>
<div class="mzp-c-split-container">
<div class="mzp-c-split-body ">
{{ body }}
diff --git a/components/video/video.component.yml b/components/video/video.component.yml
new file mode 100644
index 0000000..5c8cba8
--- /dev/null
+++ b/components/video/video.component.yml
@@ -0,0 +1,6 @@
+name: Video
+description: "A responsive container for embedded video. The video is scaled to the width of its container and maintains its aspect ratio. https://protocol.mozilla.org/patterns/atoms/video.html"
+slots:
+ content:
+ title: Content
+ description: "Video renderable content"
diff --git a/components/video/video.preview.story.yml b/components/video/video.preview.story.yml
new file mode 100644
index 0000000..185a9c4
--- /dev/null
+++ b/components/video/video.preview.story.yml
@@ -0,0 +1,11 @@
+name: Preview
+slots:
+ content:
+ type: html_tag
+ tag: video
+ attributes:
+ controls: controls
+ width: 640
+ height: 360
+ poster: assets/static/img/video/video.jpg
+ src: "https://protocol.mozilla.org/static/video/video.webm"
diff --git a/templates/patterns/video/pattern-video.html.twig b/components/video/video.twig
similarity index 100%
rename from templates/patterns/video/pattern-video.html.twig
rename to components/video/video.twig
diff --git a/composer.json b/composer.json
index 928e2d9..421acfe 100755
--- a/composer.json
+++ b/composer.json
@@ -1,18 +1,16 @@
{
- "name": "drupal/ui_suite_protocol",
- "description": "UI Suite Protocol",
- "license": "GPL-2.0-or-later",
- "type": "drupal-theme",
- "keywords": [
- "drupal",
- "web",
- "ui"
- ],
- "require": {
- "drupal/layout_options": "^1.0",
- "drupal/ui_examples": "^1.0",
- "drupal/ui_patterns": "^1.0",
- "drupal/ui_patterns_settings": "^1.0 || ^2.0",
- "drupal/ui_styles": "^1.0"
- }
+ "name": "drupal/ui_suite_protocol",
+ "description": "UI Suite Protocol",
+ "license": "GPL-2.0-or-later",
+ "type": "drupal-theme",
+ "keywords": [
+ "drupal",
+ "web",
+ "ui"
+ ],
+ "require": {
+ "drupal/ui_examples": "^1.0",
+ "drupal/ui_patterns": "^2.0",
+ "drupal/ui_styles": "^1.0"
+ }
}
diff --git a/templates/layout--columns.html.twig b/templates/layout--columns.html.twig
deleted file mode 100644
index 4962e83..0000000
--- a/templates/layout--columns.html.twig
+++ /dev/null
@@ -1,28 +0,0 @@
-{#
-/**
- * @file
- * Template for columns layout.
- */
-#}
-{%
- set classes = [
- 'mzp-l-content',
- 'mzp-l-columns',
- ]
-%}
-{{ layout.getRegionNames|length }}
-{% set attributes = (layout.getRegionNames|length == 2) ? attributes.addClass('mzp-t-columns-two') : attributes %}
-{% set attributes = (layout.getRegionNames|length == 3) ? attributes.addClass('mzp-t-columns-three') : attributes %}
-{% set attributes = (layout.getRegionNames|length == 4) ? attributes.addClass('mzp-t-columns-four') : attributes %}
-
-{% if content %}
- <div{{ attributes.addClass(classes) }}>
- {% for region in layout.getRegionNames %}
- {% if content[region] %}
- <div>
- {{ content[region] }}
- </div>
- {% endif %}
- {% endfor %}
- </div>
-{% endif %}
diff --git a/templates/patterns/article/article.ui_patterns.yml b/templates/patterns/article/article.ui_patterns.yml
deleted file mode 100644
index a4d3780..0000000
--- a/templates/patterns/article/article.ui_patterns.yml
+++ /dev/null
@@ -1,32 +0,0 @@
-article:
- label: "Article"
- description: "A long-form body of text. This is typically multiple paragraphs, often with subheadings, and should be the primary content on the page. https://protocol.mozilla.org/components/detail/article.html"
- fields:
- title:
- type: "text"
- label: "Title"
- description: "Article title. Plain text."
- preview: "We’re building a better Internet"
- content:
- type: "render"
- label: "Content"
- description: "Article content"
- preview:
- - type: html_tag
- tag: p
- value: Our mission is to ensure the Internet is a global public resource, open and accessible to all. An Internet that truly puts people first, where individuals can shape their own experience and are empowered, safe and independent.
- - type: html_tag
- tag: p
- value: At Mozilla, we’re a global community of technologists, thinkers and builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.
- settings:
- heading_level:
- type: select
- label: "Heading level"
- options:
- 1: h1 (Default)
- 2: h2
- 3: h3
- 4: h4
- 5: h5
- 6: h6
- preview: 1
diff --git a/templates/patterns/billboard/billboard.ui_patterns.yml b/templates/patterns/billboard/billboard.ui_patterns.yml
deleted file mode 100644
index 8c97565..0000000
--- a/templates/patterns/billboard/billboard.ui_patterns.yml
+++ /dev/null
@@ -1,47 +0,0 @@
-billboard:
- label: "Billboard"
- description: "A billboard style call-out with image, text and link. The image and copy stack vertically on small screens, and run full width horizontally on larger screens. https://protocol.mozilla.org/components/detail/billboard.html"
- variants:
- right:
- label: Right (Default)
- left:
- label: Left
- fields:
- image:
- type: "render"
- label: "Image"
- description: "Billboard image."
- preview:
- theme: "image"
- uri: "assets/billboard-image.png"
- title:
- type: "text"
- label: "Title"
- description: "Billboard title."
- preview: Example headline with 35 characters
- desc:
- type: "render"
- label: "Description"
- description: "Billboard description."
- preview: A description with a maximum of 100 characters. That usually means only one or two sentences.
- cta_link:
- type: "render"
- label: "CTA link"
- description: "Billboard CTA link"
- preview:
- type: html_tag
- tag: a
- attributes:
- href: "#"
- value: Learn more about us
- settings:
- heading_level:
- type: select
- label: "Heading level"
- options:
- 2: h2
- 3: h3 (Default)
- 4: h4
- 5: h5
- 6: h6
- preview: 3
diff --git a/templates/patterns/breadcrumb/breadcrumb.ui_patterns.yml b/templates/patterns/breadcrumb/breadcrumb.ui_patterns.yml
deleted file mode 100644
index db77bf6..0000000
--- a/templates/patterns/breadcrumb/breadcrumb.ui_patterns.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-breadcrumb:
- label: Breadcrumb
- description: A type of navigation menu used to provide a list of links based on current page within the site hierarchy, allowing users to visit previous pages from the current page. https://protocol.mozilla.org/components/detail/breadcrumb.html
- settings:
- items:
- type: links
- label: Items
- preview:
- - title: Home
- url: "#"
- - title: Library
- url: "#"
- - title: Data
diff --git a/templates/patterns/button/button.ui_patterns.yml b/templates/patterns/button/button.ui_patterns.yml
deleted file mode 100644
index 31e0dc2..0000000
--- a/templates/patterns/button/button.ui_patterns.yml
+++ /dev/null
@@ -1,52 +0,0 @@
-button:
- label: Button
- description: For actions in forms, dialogs, and more with support for multiple sizes, states, and more. https://protocol.mozilla.org/components/detail/button--primary.html
- variants:
- primary:
- label: Primary (Default)
- description: This is a primary button. It represents the primary action someone should take when they land on any given page. Primary buttons have a solid background color, and should be reserved for only one action per page.
- primary__dark:
- label: Primary Dark
- description: This is a primary button displayed on a dark background.
- secondary:
- label: Secondary
- description: This is a secondary button with a hollow, transparent background. This button should be used for any additional actions someone can take on any given page that is different from the primary action.
- secondary__dark:
- label: Secondary Dark
- description: This is a secondary button displayed on a dark background.
- product:
- label: Product
- description: Use this theme style for product related actions.
- product__secondary:
- label: Product Secondary
- description: This secondary button theme should be used when the CTA is not the main action a person should take on a page.
- product__secondary__dark:
- label: Product Secondary Dark
- neutral:
- label: Neutral
- description: This is a neutral button.
- neutral__dark:
- label: Neutral Dark
- description: This is a neutral button with the dark theme.
- fields:
- label:
- type: text
- label: Label
- description: The button label
- preview: Submit
- settings:
- url:
- type: url
- label: URL
- description: The button URL. Optional.
- preview: http://example.com
- size:
- label: Size
- description: Buttons can be 4 different sizes, if no size is declared they will be the large size.
- type: select
- options:
- sm: Small
- md: Medium
- lg: Large
- xl: Extra Large
- default_value: xl
diff --git a/templates/patterns/call_out/call_out.ui_patterns.yml b/templates/patterns/call_out/call_out.ui_patterns.yml
deleted file mode 100644
index 2a0944d..0000000
--- a/templates/patterns/call_out/call_out.ui_patterns.yml
+++ /dev/null
@@ -1,45 +0,0 @@
-call_out:
- label: "Call out"
- description: "A vertical call out section containing a logo, headline, description and a call-to-action button. https://protocol.mozilla.org/components/detail/call-out.html"
- variants:
- default:
- label: Default
- compact:
- label: Compact
- fields:
- title:
- type: "text"
- label: "Title"
- description: "Call Out title."
- preview: Example headline with 35 characters
- desc:
- type: "render"
- label: "Description"
- description: "Call Out description."
- preview:
- - "#markup": '<p>A description with a maximum of 140 characters and <a href="#">a link</a>. That means we usually only have room for one or two sentences. Like this.</p>'
- content:
- type: "render"
- label: "Content"
- description: "Call Out free renderable content"
- preview:
- - type: pattern
- id: button
- variant: product
- fields:
- label: Download Firefox
- - type: pattern
- id: button
- fields:
- label: Firefox Privacy Notice
- settings:
- heading_level:
- type: select
- label: "Heading level"
- options:
- 2: h2 (Default)
- 3: h3
- 4: h4
- 5: h5
- 6: h6
- preview: 3
diff --git a/templates/patterns/card/card.ui_patterns.yml b/templates/patterns/card/card.ui_patterns.yml
deleted file mode 100644
index 3cb6d2c..0000000
--- a/templates/patterns/card/card.ui_patterns.yml
+++ /dev/null
@@ -1,70 +0,0 @@
-card:
- label: "Card"
- description: "A Card is a unit of content featuring an image along with a title and description, wrapped in a block-level link. https://protocol.mozilla.org/components/detail/card.html"
- variants:
- extra_small:
- label: Extra small
- small:
- label: Small (default)
- medium:
- label: Medium
- large:
- label: Large
- settings:
- link:
- type: url
- label: "Block link"
- description: "URL of a Web link, which is wrapping the card"
- preview: "#"
- heading_level:
- type: select
- label: "Heading level"
- options:
- 2: h2 (Default)
- 3: h3
- 4: h4
- 5: h5
- 6: h6
- preview: 2
- aspect:
- type: select
- label: "Aspect ratio"
- options:
- "": "Default"
- "1-1": "1:1"
- "3-2": "3:2"
- "16-9": "16:9"
- preview: ""
- fields:
- image:
- type: "render"
- label: "Image"
- description: "Card image."
- preview:
- theme: "image"
- uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADIAQMAAABoEU4WAAAAA1BMVEXt7fBQLQGUAAAAHklEQVRYw+3BMQEAAADCIPunNsReYAAAAAAAAAAQHB54AAEGlim3AAAAAElFTkSuQmCC"
- tag:
- type: "text"
- label: "Tag"
- description: "Card tag, just one or two words, sometimes with an icon, above the title. Plain text."
- preview: Card tag
- title:
- type: "text"
- label: "Title"
- description: "Card title. Plain text. One or two lines (about 50 characters max)"
- preview: "This example headline has 40 characters"
- desc:
- type: "text"
- label: "Description"
- description: "Card description. Plain text. Two or three lines (about 150 characters max)"
- preview: "A description with a maximum of 140 characters. That means we usually only have room for one or two sentences. Here is what that looks like."
- meta:
- type: "text"
- label: "Meta"
- description: "Card meta. Plain text."
- preview: "6 hours ago"
- cta:
- type: "text"
- label: "CTA"
- description: "Card CTA. Plain text."
- preview: "A short inline text cta"
diff --git a/templates/patterns/card_layout/card_layout.ui_patterns.yml b/templates/patterns/card_layout/card_layout.ui_patterns.yml
deleted file mode 100644
index d95843d..0000000
--- a/templates/patterns/card_layout/card_layout.ui_patterns.yml
+++ /dev/null
@@ -1,37 +0,0 @@
-card_layout:
- label: "Card layout"
- description: "A layout class for displaying card components in different arrangements. https://protocol.mozilla.org/components/detail/card-layout--overview.html"
- category: Layout
- variants:
- hero:
- label: Hero (Default)
- description: Sets up a five-card layout with one large hero card. Make sure to have one card component with large variant.
- half:
- label: Half
- description: Sets up a two-column layout so it’s best for even numbers of cards. Use medium sized cards if the container is wide, or small or extra-small cards in narrower containers.
- third:
- label: Third
- description: Sets up a three-column layout so cards should come in multiples of three to avoid empty spaces when cards wrap to new rows. At some medium breakpoints the layout will form two columns and an empty space may be unavoidable. This layout really works best with six cards so it avoids gaps at all widths (two rows of three or three rows of two).
- quarter:
- label: Quarter
- description: Sets up a four-column layout so cards should come in multiples of four to avoid empty spaces when cards wrap to new rows.
- settings:
- with_container:
- label: With container?
- type: boolean
- default_value: true
- fields:
- cards:
- type: "render"
- label: "Cards"
- description: "Renderable cards"
- preview:
- - type: pattern_preview
- id: card
- variant: large
- - type: pattern_preview
- id: card
- - type: pattern_preview
- id: card
- - type: pattern_preview
- id: card
diff --git a/templates/patterns/details/details.ui_patterns.yml b/templates/patterns/details/details.ui_patterns.yml
deleted file mode 100644
index bc4acce..0000000
--- a/templates/patterns/details/details.ui_patterns.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-details:
- label: "Details"
- description: "Native details and summary support. https://protocol.mozilla.org/components/detail/details.html"
- category: Basic
- fields:
- content:
- type: render
- label: Content
- description: Free renderable content
- preview:
- - type: html_tag
- tag: h3
- value: Summary
- - type: html_tag
- tag: p
- value: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan neque ipsum. Nunc ligula eros, elementum sit amet blandit eu, egestas at justo.
- - type: html_tag
- tag: h3
- value: Heading
- - type: html_tag
- tag: p
- value: Proin in dapibus nulla. Nam vitae est vitae tellus mollis eleifend in eu erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean feugiat ante porttitor purus elementum, eget vestibulum ex volutpat. Sed gravida convallis rutrum. Quisque pharetra eros eget malesuada vulputate.
- - type: html_tag
- tag: h4
- value: Sub Heading
- - type: html_tag
- tag: p
- value: Cras maximus interdum interdum. Maecenas vitae ligula et eros porta feugiat. Nullam facilisis odio non ante varius tempor ut ac turpis.
- libraries:
- - ui_suite_protocol/details
diff --git a/templates/patterns/details/pattern-details.html.twig b/templates/patterns/details/pattern-details.html.twig
deleted file mode 100644
index c9d1a85..0000000
--- a/templates/patterns/details/pattern-details.html.twig
+++ /dev/null
@@ -1,3 +0,0 @@
-<section{{ attributes.addClass('mzp-c-details') }}>
- {{ content }}
-</section>
diff --git a/templates/patterns/emphasis_box/emphasis_box.ui_patterns.yml b/templates/patterns/emphasis_box/emphasis_box.ui_patterns.yml
deleted file mode 100644
index 492959b..0000000
--- a/templates/patterns/emphasis_box/emphasis_box.ui_patterns.yml
+++ /dev/null
@@ -1,15 +0,0 @@
-emphasis_box:
- label: "Emphasis box"
- description: "A visual wrapper used around some CTAs and forms in both marketing and application contexts. https://protocol.mozilla.org/components/detail/emphasis-box.html"
- fields:
- content:
- type: "render"
- label: "Content"
- description: "Box content."
- preview:
- - type: "html_tag"
- tag: "h3"
- value: This is a standard Emphasis Box
- - type: "html_tag"
- tag: "p"
- value: This is some filler content. Cats are the best, every cat.
diff --git a/templates/patterns/footer/footer.ui_patterns.yml b/templates/patterns/footer/footer.ui_patterns.yml
deleted file mode 100644
index de26c91..0000000
--- a/templates/patterns/footer/footer.ui_patterns.yml
+++ /dev/null
@@ -1,92 +0,0 @@
-footer:
- label: "Footer"
- description: "A page footer component, containing common links to complement primary navigation and flexible structure. It is best viewed with “full view†as it’s meant to take up the full width of the page. https://protocol.mozilla.org/components/detail/footer.html"
- category: Footer
- fields:
- logo:
- type: "render"
- label: "Logo"
- description: "Any link put here will be overridden by the Mozilla logo"
- preview:
- type: html_tag
- tag: a
- value: Mozilla
- sections:
- type: "render"
- label: "Sections"
- description: "An list of footer_section components."
- preview:
- - type: pattern_preview
- id: footer_section
- - type: pattern_preview
- id: footer_section
- - type: pattern_preview
- id: footer_section
- - type: pattern_preview
- id: footer_section
- - type: pattern_preview
- id: footer_section
- - type: pattern_preview
- id: footer_section
- language:
- type: "render"
- label: "Language"
- description: "Placeholder for the language switcher"
- preview: "[Placeholder for the language switcher]"
- license:
- type: "render"
- label: "License"
- description: "Placeholder for the license text"
- preview:
- - "#plain_text": "Visit Mozilla Corporation’s not-for-profit parent, the "
- - type: html_tag
- tag: a
- attributes:
- href: "https://foundation.mozilla.org/"
- value: Mozilla Foundation
- - "#plain_text": "."
- - type: html_tag
- tag: br
- - "#plain_text": "Portions of this content are ©1998–2022 by individual mozilla.org contributors."
- - type: html_tag
- tag: br
- - "#plain_text": "Content available under a "
- - type: html_tag
- tag: a
- attributes:
- href: "https://www.mozilla.org/foundation/licensing/website-content/"
- rel: "license"
- value: "Creative Commons license"
- - "#plain_text": "."
- settings:
- social:
- type: "links"
- label: "Social"
- preview:
- - title: Twitter
- url: https://twitter.com/firefox
- attributes:
- class: [twitter]
- - title: YouTube
- url: https://www.youtube.com/firefoxchannel
- attributes:
- class: [youtube]
- terms:
- type: "links"
- label: "Terms"
- preview:
- - title: Website Privacy Notice
- url: https://www.mozilla.org/privacy/websites/
- - title: Cookies
- url: https://www.mozilla.org/privacy/websites/#cookies
- - title: Legal
- url: https://www.mozilla.org/about/legal/
- - title: Website Privacy Notice
- url: https://www.mozilla.org/privacy/websites/
- - title: Cookies
- url: https://www.mozilla.org/privacy/websites/#cookies
- - title: Legal
- url: https://www.mozilla.org/about/legal/
- libraries:
- - ui_suite_protocol/details
- - ui_suite_protocol/footer
diff --git a/templates/patterns/footer_section/footer_section.ui_patterns.yml b/templates/patterns/footer_section/footer_section.ui_patterns.yml
deleted file mode 100644
index 2fe6aaf..0000000
--- a/templates/patterns/footer_section/footer_section.ui_patterns.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-footer_section:
- label: "(Footer section)"
- description: "To use only in a menu component."
- category: Footer
- fields:
- heading:
- type: "text"
- label: "Heading"
- preview: "Topic"
- settings:
- list:
- type: "links"
- label: "List"
- preview:
- - title: Link One
- url: https://www.mozilla.org/firefox/new/
- - title: Link Two
- url: https://www.mozilla.org/firefox/
- - title: Link Three
- url: https://www.mozilla.org/firefox/mobile/
- - title: Link Four
- url: https://www.mozilla.org/firefox/features/
- - title: Long link just to mix things up and cause problems.
- url: https://www.mozilla.org/firefox/channel/desktop/
- - title: Link Six
- url: https://www.mozilla.org/firefox/channel/desktop/
diff --git a/templates/patterns/menu/menu.ui_patterns.yml b/templates/patterns/menu/menu.ui_patterns.yml
deleted file mode 100644
index 9315c81..0000000
--- a/templates/patterns/menu/menu.ui_patterns.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-menu:
- label: "Menu"
- description: "An expandable menu used in the Navigation organism, consisting of menu panels. https://protocol.mozilla.org/components/detail/menu.html"
- category: Navigation
- fields:
- panels:
- type: render
- label: Menu panels.
- description: Menu panels components
- preview:
- type: pattern_preview
- id: menu_panel
- settings:
- items:
- type: links
- label: Menu items.
- preview:
- - title: Sample link
- url: "https://www.mozilla.org/"
- - title: Sample Link with Popup
- attributes:
- aria-controls: "menu-panel_2a745173"
- - title: Sample link again
- url: "https://www.mozilla.org/"
- libraries:
- - menu_init:
- js:
- menu_init.js: {}
- dependencies:
- - ui_suite_protocol/menu
diff --git a/templates/patterns/menu_item/menu_item.ui_patterns.yml b/templates/patterns/menu_item/menu_item.ui_patterns.yml
deleted file mode 100644
index 864fc76..0000000
--- a/templates/patterns/menu_item/menu_item.ui_patterns.yml
+++ /dev/null
@@ -1,46 +0,0 @@
-menu_item:
- label: Menu item
- description: A menu item with link, title, description, icon and a list of secondary links. Each Menu Item should have a link destination. To use only in a menu component. https://protocol.mozilla.org/components/detail/menu-item.html
- category: Navigation
- fields:
- title:
- type: text
- label: Title
- description: Menu item title
- preview: "A headline with 30 characters "
- desc:
- type: text
- label: Description
- description: Menu item description
- preview: "This is a short description with only a single sentence and no more."
- icon:
- type: render
- label: Icon
- description: A renderable image
- preview:
- type: html_tag
- tag: img
- attributes:
- src: "https://protocol.mozilla.org/protocol/img/icons/image.svg"
- alt: "Useful alt text where appropriate"
- settings:
- items:
- type: links
- label: Menu items
- description: "A nested list of links"
- preview:
- - title: Home
- url: "#"
- - title: Library
- url: "#"
- - title: Data
- heading_level:
- type: select
- label: "Heading level"
- options:
- 2: h2
- 3: h3
- 4: h4 (Default)
- 5: h5
- 6: h6
- preview: 4
diff --git a/templates/patterns/menu_list/menu_list.ui_patterns.yml b/templates/patterns/menu_list/menu_list.ui_patterns.yml
deleted file mode 100644
index b387921..0000000
--- a/templates/patterns/menu_list/menu_list.ui_patterns.yml
+++ /dev/null
@@ -1,33 +0,0 @@
-menu_list:
- label: "Menu list"
- description: "A sort title, when clicked, expands a list of links. https://protocol.mozilla.org/components/detail/menu-list.html"
- variants:
- default:
- label: Default
- download:
- label: Download
- fields:
- title:
- type: text
- label: Title
- preview: "Meet the Family"
- settings:
- items:
- type: links
- label: Menu items
- description: "A nested list of menu items."
- preview:
- - title: Lockwise
- url: "#"
- - title: Monitor
- url: "#"
- - title: Data
- url: "#"
- - title: Slightly longer menu item for testing
- url: "#"
- libraries:
- - menu_list_init:
- js:
- menu_list_init.js: {}
- dependencies:
- - ui_suite_protocol/details
diff --git a/templates/patterns/menu_panel/menu_panel.ui_patterns.yml b/templates/patterns/menu_panel/menu_panel.ui_patterns.yml
deleted file mode 100644
index c540172..0000000
--- a/templates/patterns/menu_panel/menu_panel.ui_patterns.yml
+++ /dev/null
@@ -1,41 +0,0 @@
-menu_panel:
- label: "(Menu panel)"
- description: "An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule. https://protocol.mozilla.org/components/detail/menu.html"
- category: Navigation
- fields:
- first_col:
- type: render
- label: First columnn
- description: List of menu items components.
- preview:
- - type: pattern_preview
- id: menu_item
- - type: pattern_preview
- id: menu_item
- second_col:
- type: render
- label: Second columnn
- description: List of menu items components.
- preview:
- - type: pattern
- id: menu_item
- title: "A headline with 30 characters"
- - type: pattern
- id: menu_item
- title: "A headline with 30 characters"
- - type: pattern
- id: menu_item
- title: "A headline with 30 characters"
- card:
- type: render
- label: Card
- description: A card component.
- preview:
- type: pattern_preview
- id: card
- settings:
- panel_id:
- type: token
- label: ID
- description: "Used by menu component to trigger panel opening. Must start with a letter. Random value if missing."
- preview: "menu-panel_2a745173"
diff --git a/templates/patterns/navigation/navigation.ui_patterns.yml b/templates/patterns/navigation/navigation.ui_patterns.yml
deleted file mode 100644
index 72d0bda..0000000
--- a/templates/patterns/navigation/navigation.ui_patterns.yml
+++ /dev/null
@@ -1,39 +0,0 @@
-navigation:
- label: "Navigation"
- description: "Main site Navigation, containing Menu and Secondary Download Button components. https://protocol.mozilla.org/components/detail/navigation--default.html"
- category: Navigation
- fields:
- logo:
- type: render
- label: Logo
- description: A renderable link, automatically replaced by the logo.
- preview:
- type: html_tag
- tag: a
- attributes:
- href: https://www.mozilla.org/
- value: Mozilla
- menu:
- type: render
- label: Menu
- description: A menu component.
- preview:
- type: pattern_preview
- id: menu
- download:
- type: render
- label: Download
- description: A button component.
- preview:
- type: pattern
- id: button
- variant: product__secondary
- label: Download firefox
- size: md
- libraries:
- - navigation_init:
- js:
- navigation_init.js: {}
- dependencies:
- - ui_suite_protocol/menu
- - ui_suite_protocol/navigation
diff --git a/templates/patterns/newsletter/newsletter.ui_patterns.yml b/templates/patterns/newsletter/newsletter.ui_patterns.yml
deleted file mode 100644
index bd562b5..0000000
--- a/templates/patterns/newsletter/newsletter.ui_patterns.yml
+++ /dev/null
@@ -1,46 +0,0 @@
-newsletter:
- label: "Newsletter"
- description: "The standard newsletter subscription form. The standard newsletter subscription form. https://protocol.mozilla.org/components/detail/newsletter--default.html"
- fields:
- image:
- type: "render"
- label: "Image"
- description: "Newsletter image."
- preview:
- theme: "image"
- uri: "assets/static/img/newsletter/newsletter-image.png"
- title:
- type: "text"
- label: "Title"
- description: "Newsletter title."
- preview: Love the Web?
- tagline:
- type: "text"
- label: "Description"
- description: "Newsletter description."
- preview: Get the Mozilla newsletter and help us keep it open and free.
- content:
- type: "render"
- label: "Content"
- description: "Renderable form"
- preview:
- - type: html_tag
- tag: label
- value: Your email address
- - type: html_tag
- tag: input
- attributes:
- type: email
- placeholder: yourname@example.com
- - "#markup": '<p class="mzp-c-form-submit"><button type="submit" class="mzp-c-button">Sign up now</button><span class="mzp-c-fieldnote">We will only send you Mozilla-related information.</span></p>'
- settings:
- heading_level:
- type: select
- label: "Heading level"
- options:
- 2: h2 (Default)
- 3: h3
- 4: h4
- 5: h5
- 6: h6
- preview: 3
diff --git a/templates/patterns/notification_bar/notification_bar.ui_patterns.yml b/templates/patterns/notification_bar/notification_bar.ui_patterns.yml
deleted file mode 100644
index dde3cbb..0000000
--- a/templates/patterns/notification_bar/notification_bar.ui_patterns.yml
+++ /dev/null
@@ -1,36 +0,0 @@
-notification_bar:
- label: Notification bar
- description: Provides contextual feedback messages. The message should be short, usually a single sentence. The bar can include an optional button to dismiss the notification. https://protocol.mozilla.org/components/detail/notification-bar--default.html
- variants:
- default:
- label: Default
- success:
- label: Success
- description: A positive notification, to indicate a successful action
- warning:
- label: Warning
- description: A cautionary notification, to indicate something may be risky but the user can choose to proceed.
- error:
- label: Error
- description: A negative notification, to indicate an unsuccessful action.
- click:
- label: Click
- description: To call attention to some action the user should take.
- fields:
- message:
- type: render
- label: Message
- description: The alert message.
- preview: "A simple alert—check it out!"
- settings:
- dismiss:
- type: boolean
- label: Dismiss?
- preview: true
- default_value: 1
- libraries:
- - notification_bar_init:
- js:
- notification_bar_init.js: {}
- dependencies:
- - ui_suite_protocol/notification_bar
diff --git a/templates/patterns/picto/picto.ui_patterns.yml b/templates/patterns/picto/picto.ui_patterns.yml
deleted file mode 100644
index 1641af3..0000000
--- a/templates/patterns/picto/picto.ui_patterns.yml
+++ /dev/null
@@ -1,45 +0,0 @@
-picto:
- label: "Picto"
- description: "A small block of content featuring a pictographic icon, headline, and body. https://protocol.mozilla.org/components/detail/picto.html"
- variants:
- default:
- label: Default
- side:
- label: Side
- center:
- label: Center
- fields:
- image:
- type: "render"
- label: "Image"
- description: "Picto image."
- preview:
- theme: "image"
- uri: "assets/image.svg"
- alt: ""
- attributes:
- width: 64
- heading:
- type: "text"
- label: "Heading"
- description: "Picto image. Plain text."
- preview: "A headline with 30 characters"
- body:
- type: "render"
- label: "Body"
- description: "A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs."
- preview:
- type: html_tag
- tag: p
- value: A short description, just a sentence or two. Don't use this component for long-form content; it's only for blurbs.
- settings:
- heading_level:
- type: select
- label: "Heading level"
- options:
- 2: h2
- 3: h3 (Default)
- 4: h4
- 5: h5
- 6: h6
- preview: 3
diff --git a/templates/patterns/section_heading/section_heading.ui_patterns.yml b/templates/patterns/section_heading/section_heading.ui_patterns.yml
deleted file mode 100644
index 81282d2..0000000
--- a/templates/patterns/section_heading/section_heading.ui_patterns.yml
+++ /dev/null
@@ -1,21 +0,0 @@
-section_heading:
- label: "Section heading"
- description: "Use section headings help organize your page content into sections. https://protocol.mozilla.org/components/detail/section-heading.html"
- settings:
- heading_level:
- type: select
- label: "Heading level"
- options:
- 2: h2 (Default)
- 3: h3
- 4: h4
- 5: h5
- 6: h6
- preview: 2
- fields:
- content:
- type: "render"
- label: "Content"
- description: "Heading content "
- preview:
- "#markup": "We’re building a <strong>better</strong> Internet"
diff --git a/templates/patterns/sidebar_menu/sidebar_menu.ui_patterns.yml b/templates/patterns/sidebar_menu/sidebar_menu.ui_patterns.yml
deleted file mode 100644
index 5cad9f2..0000000
--- a/templates/patterns/sidebar_menu/sidebar_menu.ui_patterns.yml
+++ /dev/null
@@ -1,29 +0,0 @@
-sidebar_menu:
- label: Sidebar menu
- description: Local navigation for a subset of pages or section of a website, intended to appear in a sidebar adjacent to the main content. It can accommodate multiple categories/sub-sections in a two-level hierarchy with titles corresponding to the top level page of each sub-section. The menu summary reflects the current page, shown when the menu is collapsed in small viewports. The menu label should be the title of the site section. https://protocol.mozilla.org/components/detail/sidebar-menu.html
- fields:
- label:
- type: text
- label: Menu label
- description: Displayed only when collapsed in small viewports.
- preview: "Menu label"
- settings:
- items:
- type: links
- label: Menu items
- preview:
- - title: Home
- url: "#"
- - title: Library
- url: "#"
- in_active_trail: true
- below:
- - title: Sub 1
- url: "#"
- in_active_trail: true
- - title: Sub 2
- url: "#"
- - title: Data
- url: "#"
- libraries:
- - ui_suite_protocol/sidemenu
diff --git a/templates/patterns/split/split.ui_patterns.yml b/templates/patterns/split/split.ui_patterns.yml
deleted file mode 100644
index bc3a61c..0000000
--- a/templates/patterns/split/split.ui_patterns.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-split:
- label: "Split"
- description: A full-width page section with text on one side and a single piece of media (an image or video) on the other, hence "split" into two columns. It's highly customizable with a lot of optional classes to support different layout variations. https://protocol.mozilla.org/components/detail/split--default.html
- variants:
- default: Default
- reversed:
- label: Reversed
- description: Orient the body on the right and media on the left (the reverse of the default). It’s automatically reversed in Right-To-Left (RTL) languages.
- body_wide:
- label: Wide body
- description: Make the body 2/3rds width and the media 1/3rd.
- body_wide__reversed: Body wide reversed
- body_narrow: Body narrow
- body_narrow__reversed: Body narrow reversed
- pop_top:
- label: Pop top
- description: Huge top padding.
- pop_top__reversed:
- label: Pop top reversed
- description: Huge top padding, reversed.
- pop_bottom:
- label: Pop bottom
- description: Huge bottom padding.
- pop_bottom__reversed:
- label: Pop bottom reversed
- description: Huge bottom padding, reversed.
- settings:
- no_space:
- label: No space?
- type: boolean
- default_value: false
- fields:
- body:
- type: "render"
- label: "Body"
- description: "Split body"
- preview:
- - type: html_tag
- tag: h1
- value: A Headline With 30 Characters
- attributes:
- class: ["mzp-u-title-md"]
- - "#markup": "<p>A description with a maximum of 140 characters and <a href='#'>a link</a>. That means we usually only have room for one or two sentences. Like this.</p>"
- media:
- type: "render"
- label: "Media"
- description: "Split media"
- preview:
- theme: image
- uri: assets/static/img/split/devices.png
diff --git a/templates/patterns/video/video.ui_patterns.yml b/templates/patterns/video/video.ui_patterns.yml
deleted file mode 100644
index 0480e26..0000000
--- a/templates/patterns/video/video.ui_patterns.yml
+++ /dev/null
@@ -1,17 +0,0 @@
-video:
- label: "Video"
- description: "A responsive container for embedded video. The video is scaled to the width of its container and maintains its aspect ratio. https://protocol.mozilla.org/patterns/atoms/video.html"
- fields:
- content:
- type: "render"
- label: "Content"
- description: "Video renderable content"
- preview:
- type: html_tag
- tag: video
- attributes:
- controls: controls
- width: 640
- height: 360
- poster: "assets/static/img/video/video.jpg"
- src: "https://protocol.mozilla.org/static/video/video.webm"
diff --git a/templates/overrides/system/block.html.twig b/templates/system/block.html.twig
similarity index 100%
rename from templates/overrides/system/block.html.twig
rename to templates/system/block.html.twig
diff --git a/templates/overrides/system/breadcrumb.html.twig b/templates/system/breadcrumb.html.twig
similarity index 91%
rename from templates/overrides/system/breadcrumb.html.twig
rename to templates/system/breadcrumb.html.twig
index 260696d..9811a86 100644
--- a/templates/overrides/system/breadcrumb.html.twig
+++ b/templates/system/breadcrumb.html.twig
@@ -11,6 +11,6 @@
#}
{% if breadcrumb %}
{{ pattern('breadcrumb', {
- 'items': breadcrumb
+ items: breadcrumb,
}) }}
{% endif %}
diff --git a/templates/overrides/system/form-element.html.twig b/templates/system/form-element.html.twig
similarity index 99%
rename from templates/overrides/system/form-element.html.twig
rename to templates/system/form-element.html.twig
index 9dc2017..b4c1154 100644
--- a/templates/overrides/system/form-element.html.twig
+++ b/templates/system/form-element.html.twig
@@ -63,7 +63,7 @@
set description_classes = [
'description',
description_display == 'invisible' ? 'visually-hidden',
- 'mzp-c-fieldnote'
+ 'mzp-c-fieldnote',
]
%}
<div{{ attributes.addClass(classes) }}>
diff --git a/templates/overrides/system/item-list.html.twig b/templates/system/item-list.html.twig
similarity index 100%
rename from templates/overrides/system/item-list.html.twig
rename to templates/system/item-list.html.twig
diff --git a/templates/overrides/system/menu-local-task.html.twig b/templates/system/menu-local-task.html.twig
similarity index 85%
rename from templates/overrides/system/menu-local-task.html.twig
rename to templates/system/menu-local-task.html.twig
index fa084db..c3ea510 100644
--- a/templates/overrides/system/menu-local-task.html.twig
+++ b/templates/system/menu-local-task.html.twig
@@ -18,8 +18,8 @@
#}
{% set variant = is_active ? 'primary' : 'neutral' %}
{{ pattern('button', {
- 'variant': variant,
- 'attributes': attributes,
- 'label': link,
- 'size': 'small'
+ variant: variant,
+ attributes: attributes,
+ label: link,
+ size: 'small',
}) }}
diff --git a/templates/overrides/system/page.html.twig b/templates/system/page.html.twig
similarity index 79%
rename from templates/overrides/system/page.html.twig
rename to templates/system/page.html.twig
index 9f72245..c589c59 100644
--- a/templates/overrides/system/page.html.twig
+++ b/templates/system/page.html.twig
@@ -37,16 +37,16 @@
#}
{% if page.header_logo or page.header_menu or page.header_download %}
{{ pattern('navigation', {
- 'attributes': create_attribute(),
- 'logo': page.header_logo,
- 'menu': page.header_menu,
- 'download': page.header_download
+ attributes: create_attribute(),
+ logo: page.header_logo,
+ menu: page.header_menu,
+ download: page.header_download,
}) }}
{% endif %}
-{% set main_attributes = create_attribute({"role": "main", "class": ['mzp-l-content']}) %}
-{% set main_attributes = page.sidebar_first ? main_attributes.addClass("mzp-has-sidebar", "mzp-l-sidebar-left") : main_attributes%}
-{% set main_attributes = page.sidebar_second ? main_attributes.addClass("mzp-has-sidebar", "mzp-l-sidebar-right") : main_attributes %}
+{% set main_attributes = create_attribute({role: 'main', class: ['mzp-l-content']}) %}
+{% set main_attributes = page.sidebar_first ? main_attributes.addClass('mzp-has-sidebar', 'mzp-l-sidebar-left') : main_attributes %}
+{% set main_attributes = page.sidebar_second ? main_attributes.addClass('mzp-has-sidebar', 'mzp-l-sidebar-right') : main_attributes %}
<main{{ main_attributes }}>
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
@@ -71,13 +71,12 @@
{% if page.footer_logo or page.footer_sections or page.footer_language or page.footer_social or page.footer_license or page.footer_terms %}
{{ pattern('footer', {
- 'attributes': create_attribute(),
- 'logo': page.footer_logo,
- 'sections': page.footer_sections,
- 'language': page.footer_language,
- 'social': page.footer_social,
- 'license': page.footer_license,
- 'terms': page.footer_terms
+ attributes: create_attribute(),
+ logo: page.footer_logo,
+ sections: page.footer_sections,
+ language: page.footer_language,
+ social: page.footer_social,
+ license: page.footer_license,
+ terms: page.footer_terms,
}) }}
{% endif %}
-
diff --git a/templates/overrides/system/status-messages.html.twig b/templates/system/status-messages.html.twig
similarity index 92%
rename from templates/overrides/system/status-messages.html.twig
rename to templates/system/status-messages.html.twig
index bcc920e..e63914d 100644
--- a/templates/overrides/system/status-messages.html.twig
+++ b/templates/system/status-messages.html.twig
@@ -32,12 +32,11 @@
{% for message in messages %}
{{ pattern('notification_bar', {
- 'variant': variant,
- 'attributes': attributes,
- 'message': message
+ variant: variant,
+ attributes: attributes,
+ message: message,
}) }}
{% endfor %}
{% endfor %}
</div>
-
diff --git a/templates/overrides/system/table.html.twig b/templates/system/table.html.twig
similarity index 98%
rename from templates/overrides/system/table.html.twig
rename to templates/system/table.html.twig
index e81e3f4..667bf62 100644
--- a/templates/overrides/system/table.html.twig
+++ b/templates/system/table.html.twig
@@ -41,7 +41,7 @@
* @ingroup themeable
*/
#}
-<table{{ attributes.addClass("mzp-u-data-table") }}>
+<table{{ attributes.addClass('mzp-u-data-table') }}>
{% if caption %}
<caption>{{ caption }}</caption>
{% endif %}
diff --git a/templates/overrides/ui_patterns_library/patterns-meta-information.html.twig b/templates/ui_patterns_library/patterns-meta-information.html.twig
similarity index 88%
rename from templates/overrides/ui_patterns_library/patterns-meta-information.html.twig
rename to templates/ui_patterns_library/patterns-meta-information.html.twig
index 4f32fb3..15aef0c 100644
--- a/templates/overrides/ui_patterns_library/patterns-meta-information.html.twig
+++ b/templates/ui_patterns_library/patterns-meta-information.html.twig
@@ -14,10 +14,10 @@
<table class="pattern-preview__fields mzp-u-data-table">
<thead>
<tr>
- <th>{{ "Name"|t }}</th>
- <th>{{ "Label"|t }}</th>
- <th>{{ "Type"|t }}</th>
- <th>{{ "Description"|t }} / {{ "Options"|t }}</th>
+ <th>{{ 'Name'|t }}</th>
+ <th>{{ 'Label'|t }}</th>
+ <th>{{ 'Type'|t }}</th>
+ <th>{{ 'Description'|t }} / {{ 'Options'|t }}</th>
</tr>
</thead>
<tbody>
diff --git a/templates/overrides/ui_patterns_library/patterns-overview-page.html.twig b/templates/ui_patterns_library/patterns-overview-page.html.twig
similarity index 89%
rename from templates/overrides/ui_patterns_library/patterns-overview-page.html.twig
rename to templates/ui_patterns_library/patterns-overview-page.html.twig
index 5eec0c3..64162f7 100644
--- a/templates/overrides/ui_patterns_library/patterns-overview-page.html.twig
+++ b/templates/ui_patterns_library/patterns-overview-page.html.twig
@@ -30,7 +30,7 @@
{% for pattern_name, pattern in group_patterns %}
<div class="pattern-preview pattern-preview__{{ pattern.definition.id }}">
{# Pattern name and description. #}
- <h2 class="pattern-preview__label" id="{{ pattern_name }}"><a href="{{ url('ui_patterns.patterns.single', {'name': pattern.definition.id}) }}">{{ pattern.definition.label }}</a></h2>
+ <h2 class="pattern-preview__label" id="{{ pattern_name }}"><a href="{{ url('ui_patterns.patterns.single', {name: pattern.definition.id}) }}">{{ pattern.definition.label }}</a></h2>
{{ pattern.meta }}
{{ pattern.rendered }}
</div>
diff --git a/templates/overrides/ui_patterns_library/patterns-single-page.html.twig b/templates/ui_patterns_library/patterns-single-page.html.twig
similarity index 100%
rename from templates/overrides/ui_patterns_library/patterns-single-page.html.twig
rename to templates/ui_patterns_library/patterns-single-page.html.twig
diff --git a/templates/overrides/ui_patterns_library/patterns-variant-meta-information.html.twig b/templates/ui_patterns_library/patterns-variant-meta-information.html.twig
similarity index 100%
rename from templates/overrides/ui_patterns_library/patterns-variant-meta-information.html.twig
rename to templates/ui_patterns_library/patterns-variant-meta-information.html.twig
diff --git a/templates/overrides/ui_styles_library/ui-styles-overview-page.html.twig b/templates/ui_styles_library/ui-styles-overview-page.html.twig
similarity index 100%
rename from templates/overrides/ui_styles_library/ui-styles-overview-page.html.twig
rename to templates/ui_styles_library/ui-styles-overview-page.html.twig
diff --git a/ui_suite_protocol.info.yml b/ui_suite_protocol.info.yml
index 71fa1af..212fb23 100644
--- a/ui_suite_protocol.info.yml
+++ b/ui_suite_protocol.info.yml
@@ -1,13 +1,11 @@
name: "UI Suite Protocol"
type: theme
-description: "A site-builder friendly theme of Mozilla Protocol Design System, using the UI Suite: UI Patterns, UI Styles, Layout Options & UI Examples modules. https://protocol.mozilla.org/"
-core_version_requirement: ^9.3 || ^10
+description: "A site-builder friendly theme of Mozilla Protocol Design System, using the UI Suite: UI Patterns, UI Styles, UI Skins & UI Examples modules. https://protocol.mozilla.org/"
+core_version_requirement: ^10.3 || ^11
base theme: false
dependencies:
- - layout_options:layout_options
- ui_examples:ui_examples
- - ui_patterns:ui_patterns_library
- - ui_patterns_settings:ui_patterns_settings
+ - ui_patterns:ui_patterns
- ui_styles:ui_styles
- ui_skins:ui_skins
libraries:
diff --git a/ui_suite_protocol.layouts.yml b/ui_suite_protocol.layouts.yml
deleted file mode 100644
index b5592a6..0000000
--- a/ui_suite_protocol.layouts.yml
+++ /dev/null
@@ -1,63 +0,0 @@
-protocol_columns_1:
- label: "1 column [Protocol]"
- path: templates
- template: layout--columns
- class: '\Drupal\layout_options\Plugin\Layout\LayoutOptions'
- category: "Columns: 1"
- default_region: main
- icon_map:
- - [main]
- regions:
- main:
- label: Main
-
-protocol_columns_2:
- label: "2 columns [Protocol]"
- path: templates
- template: layout--columns
- class: '\Drupal\layout_options\Plugin\Layout\LayoutOptions'
- category: "Columns: 2"
- default_region: main
- icon_map:
- - [main, second]
- regions:
- main:
- label: Main
- second:
- label: Second
-
-protocol_columns_3:
- label: "3 columns [Protocol]"
- path: templates
- template: layout--columns
- class: '\Drupal\layout_options\Plugin\Layout\LayoutOptions'
- category: "Columns: 3"
- default_region: main
- icon_map:
- - [main, second, third]
- regions:
- main:
- label: Main
- second:
- label: Second
- third:
- label: Third
-
-protocol_columns_4:
- label: "4 columns [Protocol]"
- path: templates
- template: layout--columns
- class: '\Drupal\layout_options\Plugin\Layout\LayoutOptions'
- category: "Columns: 4"
- default_region: main
- icon_map:
- - [main, second, third, fourth]
- regions:
- main:
- label: Main
- second:
- label: Second
- third:
- label: Third
- fourth:
- label: Fourth
diff --git a/ui_suite_protocol.theme b/ui_suite_protocol.theme
index ede4234..a3b8090 100644
--- a/ui_suite_protocol.theme
+++ b/ui_suite_protocol.theme
@@ -2,26 +2,13 @@
/**
* @file
- * Functions to support theming in the ui_suite_bootstrap theme.
+ * Functions to support theming in the ui_suite_protocol theme.
*/
-declare(strict_types = 1);
+declare(strict_types=1);
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element;
-use Drupal\ui_patterns_settings\Plugin\UiPatterns\SettingType\LinksSettingType;
-
-/**
- * Implements hook_preprocess_HOOK() for 'pattern_card'.
- */
-function ui_suite_protocol_preprocess_pattern_card(array &$variables): void {
- // Disable link wrapping in layout builder.
- if (array_key_exists('link', $variables) && is_array($variables['link'])) {
- if (array_key_exists('layout_builder_add_block', $variables['link'])) {
- unset($variables['link']);
- }
- }
-}
/**
* Implements hook_form_alter().
@@ -49,10 +36,3 @@ function ui_suite_protocol_preprocess_image(array &$variables): void {
$variables["attributes"]["src"] = base_path() . $variables["directory"] . "/" . $uri;
}
}
-
-/**
- * Implements hook_preprocess_HOOK() for 'breadcrumb'.
- */
-function ui_suite_protocol_preprocess_breadcrumb(array &$variables): void {
- $variables["breadcrumb"] = LinksSettingType::normalize($variables["breadcrumb"]);
-}
--
GitLab
From 98480010514b387b137c4ce56fd65350422886aa Mon Sep 17 00:00:00 2001
From: Pierre <pierredureau@yahoo.fr>
Date: Mon, 3 Mar 2025 11:28:24 +0100
Subject: [PATCH 2/5] Some cleaups
---
Makefile | 6 +-
css/preview.css | 4 +-
logo.png | Bin 0 -> 5859 bytes
logo.svg | 1 -
templates/system/breadcrumb.html.twig | 4 +-
templates/system/menu-local-task.html.twig | 4 +-
templates/system/page.html.twig | 8 +--
templates/system/status-messages.html.twig | 4 +-
.../patterns-meta-information.html.twig | 52 ------------------
.../patterns-overview-page.html.twig | 42 --------------
.../patterns-single-page.html.twig | 13 -----
...atterns-variant-meta-information.html.twig | 13 -----
.../ui-patterns-component-table.html.twig | 47 ++++++++++++++++
13 files changed, 64 insertions(+), 134 deletions(-)
create mode 100644 logo.png
delete mode 100644 logo.svg
delete mode 100644 templates/ui_patterns_library/patterns-meta-information.html.twig
delete mode 100644 templates/ui_patterns_library/patterns-overview-page.html.twig
delete mode 100644 templates/ui_patterns_library/patterns-single-page.html.twig
delete mode 100644 templates/ui_patterns_library/patterns-variant-meta-information.html.twig
create mode 100644 templates/ui_patterns_library/ui-patterns-component-table.html.twig
diff --git a/Makefile b/Makefile
index 24ecbfb..6ce7ba6 100755
--- a/Makefile
+++ b/Makefile
@@ -4,5 +4,7 @@ check:
- composer validate --no-check-all --strict
- security-checker security:check composer.lock
- prettier --write *.yml
- - prettier --write templates/patterns/*/*.yml
- - twig-lint lint templates/
+ - prettier --write components/*/*.yml
+ - prettier --write css/*.css
+ - twig-cs-fixer lint --fix components/
+ - twig-cs-fixer lint --fix templates/
diff --git a/css/preview.css b/css/preview.css
index 1acd72e..a6c75c6 100644
--- a/css/preview.css
+++ b/css/preview.css
@@ -3,6 +3,8 @@
position: relative;
}
-.pattern-preview__markup--menu_panel .mzp-c-menu-panel.mzp-has-card .mzp-c-menu-panel-card {
+.pattern-preview__markup--menu_panel
+ .mzp-c-menu-panel.mzp-has-card
+ .mzp-c-menu-panel-card {
display: block;
}
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0c70c14ccb66d900800097c6937771b47b41b04
GIT binary patch
literal 5859
zcmd5<2{=_<+g|4!!y(f-jxqC02qAfuS>`whnKBPi$1#?O5+O26Wu8JILxzyC3>6uY
zRAz66%tgfc_QCu15AXZ^*MI%je|_KDd#`ox=eh4^KYQ)H_F9|po-hXJv^BIe01O5I
z4B7x;0-mX*s%m3^J)@zetG?%e$GY2lc#%i|;BnC#k3FrzWoCYki+lo*0u;2#0eM?{
zFPyT0fiC#l^8Fn#IspA*#8`hz`)kJ`2S+b^C_yCTmb1s<y&<dwVSPVu91+Jt7-R2Z
z>j2?g2#eyO1R>l@wA=0DDI#{>$D2fqH^!<00H=a5m-9XrC1SgMOuQE^dl$S1#Bql(
zpNG2-l*3*j-U*fCMH3^aW!pQv02Z7EDu4^v0UzKB+<`X`gW8KwpZ&E?YEP#RE<qZ5
zsK$ZI01qjgfeWM+g{(fn3phfp6J&RUHg|{t6=L5LTL6Cbsh86+Vm#=Usk8wgog@&}
zL;xVa55P`1fv}xTAnfD-fOro;Q{pfEr9`MZ7a@D>FB@MP0JJv%c-r{OW|s#*HPpw<
zpK-Q$+r8@`pc?Mv1i)$m0MzCH&_jJqY4Lyc@Ao$pn;0MD3;|#q0D$gm08;M(AOKyD
z){-y+Q~@c1goFe^3RR?}q-5k&NOGvq9y&xpg`!2HQM4!&JtG?vJ%*J5g<|GrW@TsR
z<m9Ah;^E`r;A7+9<RAutK~i!uavCI(h697baQv?ep#`9juvl0u0>%U2C>R0-BeX#;
z1PmZx#6rA>y+THggh3g@Aur}Xm=C;!4}b~*18_P79rOV653K(VjXVy@g53YlRD63L
z$+Da-4N=|OlO}!Z9d4U59W65DNE}e&Ws>MRMblZ(WxjKbcXq)gJ1xz;1+|(^8To90
zm(@$TH~ja5K<w}R*K9K~0nB9BCTEMBCKw1`DX=untsX(70hon3FDu@h{($>6#O4sX
zsmBlH14vXyy98@lf6!`t&XsqsRIvt%H`=m(-u<z$wJYgvZT4YTv=?TGWj%i4kA!Oq
zM{d;xliDbcRM7z@(%}qgX82*L;z*`ocuT2cSSFymJ(%ZZa6ms4nN}0^5Ez=Mml^|@
zy^H%=RxksEF$O?u677WzMryeA)jm96leX)BR389BMcG3|06eLbz1-VG31Lbhz_$`{
zqELy1SH{(H;D9ZUpC~9n&jE~y;e|m#b~e)Jtco{bz=W~Ez)(L1CU{%xwKm{pDb}8;
zh*{p(EGE9bf{Wh?$^@qr6$cbWIa;o>)G*41^~f{B*0yN7CpCW>354t`74L-4ai(y)
zU&UPw-c$SOJN@>h(vVwBEwl=a9?;Y|pHatS*aW5NR!8B+$Nw-kd9%?u*;$Ei<<8YX
z=qy|1Tm;2MxqkE59|sX`l+e`3kImmG0edw~4M6N!miE*8m)Fo>5`_i~2`K^^S<v{|
zD+m%&G5~{<b1}-u(j8MmVI-u{^bFjwe9$06LPHNm3MT+<7svFHXmpUY*5+HmNwti9
zXsyY@<sxe7#Zyp0L(Rp~>8-8jV6J&K@}z-J!j5n*r+zxd$izpW()e~qh2*ISgLmrr
zD$;L@ZrqM_=GWMYzgmxfZgC``=D0!lSq2$}Y@FPXo=o4go6+VQ>x5A6R*|qc6h&Tm
zLPUw>G;b&u!apzQseWSDpe3nJsPXfrZS^DxwXy>0?EK)nI%8L|JH~A=rSG~|Ql|Td
zBwI4ipA$;Z=bZ3~-972tmi6(mo_w=4OR*rsh4!{OD?S;9Z>m+g+P{<DVG}cQ9F%PD
zbTuwFbUZDU)m4nqo}tL$8W{DZVy+w%DQuZy`gU~ELVuA`;31#pN|rurb9Rs$^1Z2v
zv_X9~&%GGN9Tg|~<)Hq#(Ur#qeupCMZ1e3s!ZH?{XY5C+SI$Ro4V7K>>|y=jhpRQY
zHW*!>kv+r2QL6Uf+_81fvCYYJnaag+ydRav;?B*^E#|7rG_)}%h}UBh#J%{u^xiTf
zE6OzX|A)w{L|1fi8^;sen#0;cQ@f4h9SNZgzMj?42VM9qJHyLrI1?b#{B*89oU$;#
zFo5WX`zbJ9V%xO2>Xp|pT5dfo4`pn(@z=JN59Y>tnh~sVXc-<pH#N<HTXBUbUM!DB
zu3EHa1kH3}>%%mb@Ixrm|LlPH3`2cn+H;?odAiU2g*Zg9jsW`Z5N8L}uSsM7g^t~O
zaiRG{5yp1ypD^HmGF0fG0f0atNhwK4$oGQ4VF*CNh4S=5b4x45KWTnTFL}%mPfEwb
zE1|4{wavmv*@f__#l{(3PslFs8$TE-WQy?JJRU6>u{5!b7fE6p(IOU0tj5)!r3)|B
zyJAQE`|=u>N6yF%7sg;6F2@!6Mz`AFa=G;y(X*=sxrXx;8>Vw-)iXi~;L6Kvnrg2&
z_XkTqtT==@+q&av-=x0W?hA(J>I~e94c*m!xcg{&Cuc}uyEsT&BeFOkiX|1NATDZg
zM9!|^4S!kw<VjxFmFhH^u%8r`CFrH7fD@iJT5l-WF~yn`OE#Bnuo0AWrRPL3LkVQ<
zx>G$nm(`<YzVN?n(-{!vc!>YBnI>K}ZLY|7{ng9v<qRQ#G*SdZSzO?UiXf5_eM>L6
zbkVpUe;JholKQ$?#DZxTzS()RBV#peI#tI~<_VYMur2|xT<soRIO`L#%bnZf{6Zd*
zmWsUE+3on?DHYt;qIoZHYJGL^>CpPd?(XY%&7$r*=Pm1sD1$iKbbgcDwb_wN)hf9&
zm^mCT>oamzyFg1q>q~XJEq*4V?8o7C?6K6NODwv&bsu))LlRe$wOO3VuROMS9C&Qr
zt#pcHUdWg!+3I=Hqf!6L2Qm%z!YQ9T0@{+e%vSHMN0(eonK-;Xjx=FlD#WIm7axld
z5-&Z8^UNDAP&{JqenRTUIj5(O#Zn)aRL}LyJBm0wrQ|Ovn`#cy&wp9tdg3@`U&_x$
zhTNfPoT+Jgja=WWx}$D00r7>k*YJ_-#~8&zr=ts&2q1~eBK2K|f4`*v(%|nUG}4{n
zIP}h(^pdS#o+xd=PsTz;PSSk4mC@oJOE%Y}7OQXK6u5j-20s)22;KI{=fu$cM?#;?
zS)#{vOGFlnbkM0$FN27Q=9^OZ4b<?rq*|JMGEU|{#uT$-ePwJ?7kbWxIGvkPHN|y>
zqS{VJ*|+MyHNQx;<R8V3rBFJ0n)+bP5?@*W_U-cgjcBPFoyNRoaZJ}l$z1Le;k)&I
zbLB;P@W)ZhJN8d5Ir8?x4#(fuB`MWhuo&JueALU-yE(G9ehiV+7|q^Fnq`j)5T-AR
zmW}G=Y)Ko?vNN*f5eeMWLVB*!fjn`m-Of?wrL__YT!|mpFyxO|pxn{MPLD36t;7(Z
zIWmRvcO0z`+AO^ZV!yxpfDUKqp~KWDy*w;#SP<5Uk5-V?Npu}Ax6C<19Y4+L@17#m
z-|A4Sk$#xJi%2q<MEBcGMylRxUs@~f*U#}-*G?||`rmoKg6T;Qe2Kfy$CG*_%{|*>
z;|_P(Z(0F=6aAM;i~t4-pf8CC^qqi_k&ypdslrfzi(ArgSwh+N37t|%Tvqd2&+*um
zKc-GaZfNR6@EddOtY1(}uK4k*vO^eRf<>HLEHuo_-U^&vWgn^Ns3(g+6mFNH9~%Xn
zjlA8}JY2~)na1%+kwV>0KjaomHDZL^)P;lg(JlGsd5;a;+J{Av8_3Z_8JpUe`kMRZ
zuEA87g(J@37Frb>H42@Ubtpk*v?|?oq=Qd|h9pp?Cl3w<cdYKbAk)o8RB41vFyx0j
zaDR8}TzrxxZmjpH@@g`wL~%)qDp5(HOr4hkxM<ku(Vk3y6Ow3v5?$*ib8h6O(+#>^
zYbaa(b~BfeE?c-Q_yH#xFW`h!=?<|9Gg|)I77M?7$_%S6-SNd3ACkGNY&S#z`JoFv
zA7%aJc}TDfQdE!VWjNlRH2V-+C_v9?0@m%WDkIfl-QT_y-MH)Bf0kE}SL;!G6s5kS
zsDN++T9@tgvO-yzRBUFrnna=)(y;m{zPR=sFGJ>>MPBP`vXCZ&^5w27%`2haZV{+h
zDm&!a_>>{zu~4I~1=H5Didn%%>uFP$@*_7@p2aRxavkk88p-?ZA!SbOWNQay9NC)>
zuG5PqzFu*Qu$9Rv@dP#dk%iSEgT>y2<a?I`l5k_g#bKwL7R*k#7Npdg(oo;4ak#4A
zKBA}4&{czTA8h5F@D<++(R#zFgoTs-iEsazqxcfG!!o#z&9tbezk;+aSXK6SQ9SwX
z*a>&Ou-(tj@9TQg+w88E)X+x$^9JeVSs>+EVbU85r{FucyWX;hMBY4{E@(G9Ja--=
zvojz5**-{3@3GIgrR$_q@qE=q|FjtLq|rF~3s(N7tp3AATVE~G1?@wo{ialpti75=
zb=YEr46;;iQexzsf+Lh7?QipRwzb{m-uywd2`hT=Q;<ABa`8pbjqMRbk&JvgJHpVr
zyZ3Lk_d`jy)}!$6vfqI+k^VE8^Q}}9s%&eT3TvSU8Lkou3TsVllRa`?5P<ep=Cv-i
ziZgPk4uzF72eh0X%-TzZl^&t~eNK<Uf$)!0qOj|LOvL;98?LoC5)f{MPNVmYn2H{S
zoF0XWJJ6}nK1~&h1`)axCih&BakZ67qE$hnm1?b(N^(Eczr6k@iz4E(iSB<~HtjQn
z>7c&@#Qwj;{vr(e9C90SNh&MZF4IYPLZ8D}XzBFF>Ie$Ft2EyFwKe9UHb$A8dW?(!
z0s}Wj12>$zl^K~+GBkXv2_Q8(W`O~hAaVVWMD+LDhKMwtQT3gH_D}bf)$WUNsu|vj
z`&iVI_9S8(5tup4<c|B^WEH>wr?p#7mu+lUP_9NTkSdBKlMC(MWPDXW9H?0w_Mz6(
zn^R9OOKLVoNp)F1u=L*Y-TBpFBU$&tVt;G)PqjFSSjW2vFP|+rN-(0c8|+t&?p!-_
zGOBEGEa1_2l>l5xMPTxaEb`37<7ay7dcDsxT-4{>iZXBow^W@QG!`VqKGBtrJARzP
zEkz1UTs|p2^x9w7r_%zdF(ViM!jc+Oeg8au+M?LU`MnlTRIYG{0W67T3f~uX^ftZ#
zh>TsZ%MA7;0DyyK*k;r4K9F*lo{G0ab0l1tsTYuM5)St#Rl$kuG(M5yYZleh&zukJ
zSQczGj1-Ujp*S3~WZp~l$e>d`Gy-wf$&*ev?tKu~EQU8yfa-caoc7%_&iIC{uyuZ4
zUpI1Uv#)7G-&eYLq|5qjQ>J7-%F}PVx;8DmaHJS!Wu+9&i_W$nqbNVz`zBXPc~$r+
zyzh~pK`vHzZs-1Snt`MbCQ+-E5A}^`TTcrsX&rH3>}osSIH0bk%%i5mW34CoV*A#p
z&BasJWx1t!R>QW7AsbqTFDJnm7Y#xcF7cr6sgGEj&L`}Q_t*PIFp-}KZ1_!CFXrxN
zB40$`Er(!p!+TGm@>)~+KfNPGk|aw+n=Eqs-Bf(r=g}(S#H_!3&3GvfZDv%aSW#>-
zn3!atI5Btk-TZo;Szz1%lZN2(%WVrzR-Xp*Gh!*#&wCt8$zIEUepHa$Ju>=x`Mcl|
z{pw=j>GJOzKNhMoW&0n`bzOFEXxI%9bD^%BzfzuVarDx)^zL&A5BbmWBJAo4vL@83
z2HS^!`a*3U>}eWq;3Q+a*1hml<CM3&n>kGux+Jq0R|>kOoVhrznF+Pj>w(c<qxmRL
z@CBj|p@Pqj-K@-%eOoz{bn5;UhwC%HCl&RJUVE1HelG6g=M~t~{CaUKnwQ2gGaI+4
zt7OLUU;HqN^jBR=@;jEky1dQNh-Q^`(Zue;u>3K*rGjkI&7hiz?ZTb|%mf=W<<{L?
z7b+5pMF-a}8*)_cNg@?8PcVGR>&8wO;s<KoEUU!NrHJVy?;Exv-P`}b`%Wv;r~ifb
K^XfIi@IL@`06Osi
literal 0
HcmV?d00001
diff --git a/logo.svg b/logo.svg
deleted file mode 100644
index 7d7cf7c..0000000
--- a/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="57" height="66" viewBox="471.5 467 57 66" enable-background="new 471.5 467 57 66"><path opacity=".2" fill="#303030" d="M528.5 504.965c0 16.634-13.123 27.615-28.24 27.615-10.29 0-19.894-5.523-24.978-14.167l.605-.027c1.313 1.192 3.39 2.58 7.404 2.515 4.77-.064 5.645-.875 9.855-2.756 22.716-10.17 26.925-19.457 27.736-21.59s2.013-5.587.756-9.415c-.242-.737-.42-1.333-.54-1.808-3.018-3.372-6.017-5.225-6.92-5.784-.14-.093-.29-.177-.43-.26l.44.26c2.01 1.247 14.314 8.782 14.314 25.417z"/><path fill="#fff" d="M509.09 518.507c1.006 0 2.077.065 2.83.568.756.503 1.193 1.63 1.445 2.263.25.634 0 1.006-.503 1.258-.438.25-.503.12-.94-.69-.44-.81-.82-1.63-3.01-1.63s-2.887.755-3.948 1.63c-1.062.876-1.443 1.193-1.825.69s-.253-1.006.437-1.63 1.825-1.63 2.888-2.077c1.06-.45 1.62-.383 2.625-.383zm-10.413 7.152c1.257 1.005 3.14 1.825 7.153 1.825 4.015 0 6.836-1.137 8.094-2.077.568-.438.82-.065.875.187.056.25.186.624-.252 1.07-.316.317-3.194 2.33-6.594 2.636-3.4.31-7.964.504-10.73-2.01-.438-.44-.316-1.07 0-1.323.317-.25.568-.438.94-.438.374.008.317.008.513.13z"/><path opacity=".2" fill="#aaa" d="M520.89 496.545c-.81 2.133-5.02 11.42-27.735 21.59-4.21 1.88-5.085 2.69-9.854 2.756-4.013.066-6.09-1.32-7.403-2.514l-.605.028h-.01c-2.393-4.042-3.78-8.783-3.78-13.952 0-7.852 2.97-13.654 6.287-17.687.11-.13.213-.26.325-.382 2.683-3.148 5.55-5.17 7.218-6.203.038-.028.075-.047.112-.065.42-.25.754-.447.987-.568 2.757-1.51 4.77-2.263 7.963-4.77.12-.092.242-.186.354-.288l.008-.01c.875-.754 1.64-1.76 2.18-3.4v-.008c.325-.97.567-2.16.716-3.65l.02.018c2.253 2.69 4.954 5.886 6.89 7.144.69.447 1.38.848 2.068 1.202l.3.15c2.243 1.126 4.507 1.945 6.807 3.333l.428.26c.903.56 3.902 2.412 6.92 5.784.12.475.298 1.07.54 1.807 1.274 3.837.073 7.292-.737 9.425z"/><path opacity=".5" fill="#333" d="M514.176 479.538c-3.26-2.077-6.464-2.887-9.603-4.955-1.938-1.267-4.64-4.47-6.893-7.162-.438 4.332-1.686 6.148-3.26 7.35-3.195 2.515-5.207 3.26-7.963 4.77-2.338 1.256-14.958 8.726-14.958 24.913 0 5.17 1.387 9.91 3.77 13.96 5.077 8.635 14.68 14.158 24.97 14.158 15.126 0 28.24-10.98 28.24-27.614 0-9.127-3.707-15.526-7.386-19.633-3.016-3.382-6.015-5.217-6.918-5.785zm7.627 7.34c4.117 5.15 6.213 11.23 6.213 18.077 0 3.968-.755 7.712-2.245 11.148-1.414 3.25-3.444 6.13-6.053 8.56-5.15 4.806-12.062 7.45-19.475 7.45-3.67 0-7.265-.698-10.692-2.086-3.372-1.36-6.398-3.297-9.016-5.774-5.532-5.225-8.57-12.257-8.57-19.8 0-6.716 2.18-12.695 6.483-17.753 3.288-3.865 6.836-6.007 8.196-6.743.67-.363 1.285-.69 1.89-.997 1.892-.97 3.68-1.89 6.14-3.818 1.312-.997 2.71-2.58 3.305-6.585 2.077 2.468 4.48 5.234 6.314 6.426 1.63 1.08 3.307 1.835 4.918 2.562 1.527.69 3.11 1.406 4.676 2.403l.056.037c4.62 2.84 7.06 5.896 7.86 6.892z"/><path opacity=".5" fill="#fff" d="M497.98 468.678c.874 2.58.753 3.893.753 4.452 0 .56-.307 2.077-1.313 2.832-.438.317-.568.568-.568.624 0 .25.568.438.568 1.006 0 .69-.317 2.077-3.642 5.393-3.325 3.316-8.103 6.278-11.8 8.103-3.698 1.826-5.468 1.686-5.97.81s.185-2.83 2.514-5.392l9.667-6.278 9.164-6.398.503-2.44"/><path fill="#fff" d="M497.98 468.613c-.57 4.145-1.826 5.393-3.512 6.715-2.83 2.133-5.588 3.446-6.212 3.763-1.63.82-7.535 4.08-10.608 8.784-.94 1.444 0 2.012.186 2.133.187.12 2.33.372 6.9-2.385 4.574-2.757 6.595-4.387 9.175-7.078 1.377-1.444 1.573-2.263 1.573-2.636 0-.438-.316-.624-.82-.754-.25-.065-.316-.187 0-.373.317-.186 1.622-.82 1.938-1.07.318-.25 1.827-1.257 1.882-2.887.065-1.63-.056-2.766-.503-4.21zm-14.112 45.628c.065-4.898 4.648-9.472 10.422-9.536 7.348-.065 12.424 7.283 16.13 7.208 3.14-.064 9.166-6.212 12.118-6.212 3.14 0 4.014 3.26 4.014 5.206 0 1.938-.623 5.458-2.133 7.656-1.51 2.198-2.44 3.008-4.2 2.888-2.264-.187-6.78-7.21-9.67-7.35-3.64-.12-11.547 7.6-17.75 7.6-3.763 0-4.9-.567-6.147-1.378-1.92-1.312-2.85-3.315-2.785-6.08z"/></svg>
diff --git a/templates/system/breadcrumb.html.twig b/templates/system/breadcrumb.html.twig
index 9811a86..e89c94f 100644
--- a/templates/system/breadcrumb.html.twig
+++ b/templates/system/breadcrumb.html.twig
@@ -10,7 +10,7 @@
*/
#}
{% if breadcrumb %}
- {{ pattern('breadcrumb', {
+ {{ include('ui_suite_protocol:breadcrumb', {
items: breadcrumb,
-}) }}
+}, with_context: false) }}
{% endif %}
diff --git a/templates/system/menu-local-task.html.twig b/templates/system/menu-local-task.html.twig
index c3ea510..d97be18 100644
--- a/templates/system/menu-local-task.html.twig
+++ b/templates/system/menu-local-task.html.twig
@@ -17,9 +17,9 @@
*/
#}
{% set variant = is_active ? 'primary' : 'neutral' %}
-{{ pattern('button', {
+{{ include('ui_suite_protocol:button', {
variant: variant,
attributes: attributes,
label: link,
size: 'small',
-}) }}
+}, with_context: false) }}
diff --git a/templates/system/page.html.twig b/templates/system/page.html.twig
index c589c59..cdae2e1 100644
--- a/templates/system/page.html.twig
+++ b/templates/system/page.html.twig
@@ -36,12 +36,12 @@
*/
#}
{% if page.header_logo or page.header_menu or page.header_download %}
- {{ pattern('navigation', {
+ {{ include('ui_suite_protocol:navigation', {
attributes: create_attribute(),
logo: page.header_logo,
menu: page.header_menu,
download: page.header_download,
-}) }}
+}, with_context: false) }}
{% endif %}
{% set main_attributes = create_attribute({role: 'main', class: ['mzp-l-content']}) %}
@@ -70,7 +70,7 @@
</main>
{% if page.footer_logo or page.footer_sections or page.footer_language or page.footer_social or page.footer_license or page.footer_terms %}
- {{ pattern('footer', {
+ {{ include('ui_suite_protocol:footer', {
attributes: create_attribute(),
logo: page.footer_logo,
sections: page.footer_sections,
@@ -78,5 +78,5 @@
social: page.footer_social,
license: page.footer_license,
terms: page.footer_terms,
-}) }}
+}, with_context: false) }}
{% endif %}
diff --git a/templates/system/status-messages.html.twig b/templates/system/status-messages.html.twig
index e63914d..fc18cbd 100644
--- a/templates/system/status-messages.html.twig
+++ b/templates/system/status-messages.html.twig
@@ -31,11 +31,11 @@
{% set variant = (type == 'error') ? 'error' : variant %}
{% for message in messages %}
- {{ pattern('notification_bar', {
+ {{ include('ui_suite_protocol:notification_bar', {
variant: variant,
attributes: attributes,
message: message,
- }) }}
+ }, with_context: false) }}
{% endfor %}
{% endfor %}
diff --git a/templates/ui_patterns_library/patterns-meta-information.html.twig b/templates/ui_patterns_library/patterns-meta-information.html.twig
deleted file mode 100644
index 15aef0c..0000000
--- a/templates/ui_patterns_library/patterns-meta-information.html.twig
+++ /dev/null
@@ -1,52 +0,0 @@
-{#
-/**
- * @file
- * UI Pattern meta information.
- */
-#}
-
-{% if pattern is not empty %}
-
- <p class="pattern-preview__description">{{ pattern.description }}</p>
-
- {# Pattern fields descriptions. #}
- {% if pattern.fields or pattern.additional.settings %}
- <table class="pattern-preview__fields mzp-u-data-table">
- <thead>
- <tr>
- <th>{{ 'Name'|t }}</th>
- <th>{{ 'Label'|t }}</th>
- <th>{{ 'Type'|t }}</th>
- <th>{{ 'Description'|t }} / {{ 'Options'|t }}</th>
- </tr>
- </thead>
- <tbody>
- {% for field in pattern.fields %}
- <tr>
- <td><code>{{ field.name }}</code></td>
- <td>{{ field.label }}</td>
- <td><code>slot</code></td>
- <td>{{ field.description }}</td>
- </tr>
- {% endfor %}
- {% for name, setting in pattern.additional.settings %}
- <tr>
- <td><code>{{ name }}</code></td>
- <td>{{ setting.label }}</td>
- <td><code>{{ setting.type }}</code></td>
- <td>{{ setting.description }}
- {% if setting.options %}
- <ul>
- {% for key, label in setting.options %}
- <li>{{ key }}: {{ label }}</li>
- {% endfor %}
- </ul>
- {% endif %}
- </td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- {% endif %}
-
-{% endif %}
diff --git a/templates/ui_patterns_library/patterns-overview-page.html.twig b/templates/ui_patterns_library/patterns-overview-page.html.twig
deleted file mode 100644
index 64162f7..0000000
--- a/templates/ui_patterns_library/patterns-overview-page.html.twig
+++ /dev/null
@@ -1,42 +0,0 @@
-{#
-/**
- * @file
- * UI Pattern library page template, override this in your theme.
- */
-#}
-
-{% if patterns is not empty %}
-<div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-left">
-
-<div class="mzp-l-sidebar">
- <nav class="mzp-c-sidemenu">
- {% for group_name, group_patterns in patterns %}
- {% if patterns|length > 1 %}
- <h3 class="mzp-c-sidemenu-title">{{ group_name }}</h3>
- {% endif %}
- <ul>
- {% for pattern_name, pattern in group_patterns %}
- <li>
- <a href="#{{ pattern_name }}">{{ pattern.label }}</a>
- </li>
- {% endfor %}
- </ul>
- {% endfor %}
- </nav>
-</div>
-
-<div class="mzp-l-main">
- {% for group_patterns in patterns %}
- {% for pattern_name, pattern in group_patterns %}
- <div class="pattern-preview pattern-preview__{{ pattern.definition.id }}">
- {# Pattern name and description. #}
- <h2 class="pattern-preview__label" id="{{ pattern_name }}"><a href="{{ url('ui_patterns.patterns.single', {name: pattern.definition.id}) }}">{{ pattern.definition.label }}</a></h2>
- {{ pattern.meta }}
- {{ pattern.rendered }}
- </div>
- <hr style="clear: both">
- {% endfor %}
- {% endfor %}
-</div>
-
-{% endif %}
diff --git a/templates/ui_patterns_library/patterns-single-page.html.twig b/templates/ui_patterns_library/patterns-single-page.html.twig
deleted file mode 100644
index 2bf9032..0000000
--- a/templates/ui_patterns_library/patterns-single-page.html.twig
+++ /dev/null
@@ -1,13 +0,0 @@
-{#
-/**
- * @file
- * UI Pattern library standalone page, override this in your theme.
- */
-#}
-
-{% if pattern is not empty %}
- <div class="pattern-preview pattern-preview__{{ pattern.definition.id }} mb-5">
- {{ pattern.meta }}
- {{ pattern.rendered }}
- </div>
-{% endif %}
diff --git a/templates/ui_patterns_library/patterns-variant-meta-information.html.twig b/templates/ui_patterns_library/patterns-variant-meta-information.html.twig
deleted file mode 100644
index 092f182..0000000
--- a/templates/ui_patterns_library/patterns-variant-meta-information.html.twig
+++ /dev/null
@@ -1,13 +0,0 @@
-{#
-/**
- * @file
- * UI Pattern variant meta information.
- */
-#}
-
-{% if variant is not empty %}
-<div>
- <h3 class="mzp-u-title-xs">{{ variant.label }} (<code>{{ variant.name }}</code>)</h3>
- {{ variant.description }}
-</div>
-{% endif %}
diff --git a/templates/ui_patterns_library/ui-patterns-component-table.html.twig b/templates/ui_patterns_library/ui-patterns-component-table.html.twig
new file mode 100644
index 0000000..501d28b
--- /dev/null
+++ b/templates/ui_patterns_library/ui-patterns-component-table.html.twig
@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ * UI Pattern meta information.
+ */
+#}
+{% if component.slots or component.props %}
+ <table class="mzp-u-data-table" style="width: 100%;">
+ <thead>
+ <tr>
+ <th scope="col">{{ 'Name'|t }}</th>
+ <th scope="col">{{ 'Label'|t }}</th>
+ <th scope="col">{{ 'Type'|t }}</th>
+ <th scope="col">{{ 'Description'|t }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for slot_id, slot in component.slots %}
+ <tr class="ui_patterns_component_table__slot">
+ <td>
+ <code>{{ slot_id }}</code>
+ </td>
+ <td>{{ slot.title }}</td>
+ <td>{{ 'Slot'|t }}</td>
+ <td>{{ slot.description }}</td>
+ </tr>
+ {% endfor %}
+ {% for prop_id, prop in component.props.properties %}
+ {% if prop_id != 'attributes' and prop_id != 'variant' %}
+ <tr class="ui_patterns_component_table__prop">
+ <td>
+ <code>{{ prop_id }}</code>
+ </td>
+ <td>{{ prop.title }}</td>
+ <td>{{ prop.ui_patterns.type_definition.label }}</td>
+ <td>
+ {%- for line in prop.ui_patterns.summary -%}
+ {{- line -}}
+ <br>
+ {%- endfor -%}
+ </td>
+ </tr>
+ {% endif %}
+ {% endfor %}
+ </tbody>
+ </table>
+{% endif %}
--
GitLab
From d321ec4f7c52ecbb997b7dc93e0f3dd3da65720d Mon Sep 17 00:00:00 2001
From: Pierre <pierredureau@yahoo.fr>
Date: Mon, 3 Mar 2025 11:29:09 +0100
Subject: [PATCH 3/5] Move links out of descriptions
---
components/article/article.component.yml | 4 +++-
components/billboard/billboard.component.yml | 4 +++-
components/breadcrumb/breadcrumb.component.yml | 4 +++-
components/button/button.component.yml | 4 +++-
components/call_out/call_out.component.yml | 4 +++-
components/card/card.component.yml | 4 +++-
components/card_layout/card_layout.component.yml | 4 +++-
components/details/details.component.yml | 4 +++-
components/emphasis_box/emphasis_box.component.yml | 4 +++-
components/footer/footer.component.yml | 4 +++-
components/menu/menu.component.yml | 4 +++-
components/menu_item/menu_item.component.yml | 4 +++-
components/menu_list/menu_list.component.yml | 4 +++-
components/menu_panel/menu_panel.component.yml | 4 +++-
components/navigation/navigation.component.yml | 4 +++-
components/newsletter/newsletter.component.yml | 4 +++-
components/notification_bar/notification_bar.component.yml | 4 +++-
components/picto/picto.component.yml | 4 +++-
components/section_heading/section_heading.component.yml | 4 +++-
components/sidebar_menu/sidebar_menu.component.yml | 4 +++-
components/split/split.component.yml | 4 +++-
components/video/video.component.yml | 4 +++-
22 files changed, 66 insertions(+), 22 deletions(-)
diff --git a/components/article/article.component.yml b/components/article/article.component.yml
index d3a1120..aaeef3d 100644
--- a/components/article/article.component.yml
+++ b/components/article/article.component.yml
@@ -1,5 +1,7 @@
name: Article
-description: "A long-form body of text. This is typically multiple paragraphs, often with subheadings, and should be the primary content on the page. https://protocol.mozilla.org/components/detail/article.html"
+description: "A long-form body of text. This is typically multiple paragraphs, often with subheadings, and should be the primary content on the page."
+links:
+ - https://protocol.mozilla.org/components/detail/article.html
slots:
title:
title: Title
diff --git a/components/billboard/billboard.component.yml b/components/billboard/billboard.component.yml
index d6cc78f..63e8869 100644
--- a/components/billboard/billboard.component.yml
+++ b/components/billboard/billboard.component.yml
@@ -1,5 +1,7 @@
name: Billboard
-description: "A billboard style call-out with image, text and link. The image and copy stack vertically on small screens, and run full width horizontally on larger screens. https://protocol.mozilla.org/components/detail/billboard.html"
+description: "A billboard style call-out with image, text and link. The image and copy stack vertically on small screens, and run full width horizontally on larger screens."
+links:
+ - https://protocol.mozilla.org/components/detail/billboard.html
variants:
right:
title: "Right (Default)"
diff --git a/components/breadcrumb/breadcrumb.component.yml b/components/breadcrumb/breadcrumb.component.yml
index 0f6601c..a2d11a0 100644
--- a/components/breadcrumb/breadcrumb.component.yml
+++ b/components/breadcrumb/breadcrumb.component.yml
@@ -1,5 +1,7 @@
name: Breadcrumb
-description: "A type of navigation menu used to provide a list of links based on current page within the site hierarchy, allowing users to visit previous pages from the current page. https://protocol.mozilla.org/components/detail/breadcrumb.html"
+description: "A type of navigation menu used to provide a list of links based on current page within the site hierarchy, allowing users to visit previous pages from the current page."
+links:
+ - https://protocol.mozilla.org/components/detail/breadcrumb.html
props:
type: object
properties:
diff --git a/components/button/button.component.yml b/components/button/button.component.yml
index c55a9e2..9fa967b 100644
--- a/components/button/button.component.yml
+++ b/components/button/button.component.yml
@@ -1,5 +1,7 @@
name: Button
-description: "For actions in forms, dialogs, and more with support for multiple sizes, states, and more. https://protocol.mozilla.org/components/detail/button--primary.html"
+description: "For actions in forms, dialogs, and more with support for multiple sizes, states, and more."
+links:
+ - https://protocol.mozilla.org/components/detail/button--primary.html
variants:
primary:
title: "Primary (Default)"
diff --git a/components/call_out/call_out.component.yml b/components/call_out/call_out.component.yml
index 43b92eb..2e7f189 100644
--- a/components/call_out/call_out.component.yml
+++ b/components/call_out/call_out.component.yml
@@ -1,5 +1,7 @@
name: "Call out"
-description: "A vertical call out section containing a logo, headline, description and a call-to-action button. https://protocol.mozilla.org/components/detail/call-out.html"
+description: "A vertical call out section containing a logo, headline, description and a call-to-action button."
+links:
+ - https://protocol.mozilla.org/components/detail/call-out.html
variants:
default:
title: Default
diff --git a/components/card/card.component.yml b/components/card/card.component.yml
index 0bb8b20..5d70d8f 100644
--- a/components/card/card.component.yml
+++ b/components/card/card.component.yml
@@ -1,5 +1,7 @@
name: Card
-description: "A Card is a unit of content featuring an image along with a title and description, wrapped in a block-level link. https://protocol.mozilla.org/components/detail/card.html"
+description: "A Card is a unit of content featuring an image along with a title and description, wrapped in a block-level link."
+links:
+ - https://protocol.mozilla.org/components/detail/card.html
variants:
extra_small:
title: "Extra small"
diff --git a/components/card_layout/card_layout.component.yml b/components/card_layout/card_layout.component.yml
index 2a1b2e5..80f35be 100644
--- a/components/card_layout/card_layout.component.yml
+++ b/components/card_layout/card_layout.component.yml
@@ -1,5 +1,7 @@
name: "Card layout"
-description: "A layout class for displaying card components in different arrangements. https://protocol.mozilla.org/components/detail/card-layout--overview.html"
+description: "A layout class for displaying card components in different arrangements."
+links:
+ - https://protocol.mozilla.org/components/detail/card-layout--overview.html
group: Layout
variants:
hero:
diff --git a/components/details/details.component.yml b/components/details/details.component.yml
index 71dbede..20ba617 100644
--- a/components/details/details.component.yml
+++ b/components/details/details.component.yml
@@ -1,5 +1,7 @@
name: Details
-description: "Native details and summary support. https://protocol.mozilla.org/components/detail/details.html"
+description: "Native details and summary support."
+links:
+ - https://protocol.mozilla.org/components/detail/details.html
group: Basic
slots:
content:
diff --git a/components/emphasis_box/emphasis_box.component.yml b/components/emphasis_box/emphasis_box.component.yml
index a5f7c65..0025280 100644
--- a/components/emphasis_box/emphasis_box.component.yml
+++ b/components/emphasis_box/emphasis_box.component.yml
@@ -1,5 +1,7 @@
name: "Emphasis box"
-description: "A visual wrapper used around some CTAs and forms in both marketing and application contexts. https://protocol.mozilla.org/components/detail/emphasis-box.html"
+description: "A visual wrapper used around some CTAs and forms in both marketing and application contexts."
+links:
+ - https://protocol.mozilla.org/components/detail/emphasis-box.html
slots:
content:
title: Content
diff --git a/components/footer/footer.component.yml b/components/footer/footer.component.yml
index 4296b9d..ce2e219 100644
--- a/components/footer/footer.component.yml
+++ b/components/footer/footer.component.yml
@@ -1,5 +1,7 @@
name: Footer
-description: "A page footer component, containing common links to complement primary navigation and flexible structure. It is best viewed with “full view†as it’s meant to take up the full width of the page. https://protocol.mozilla.org/components/detail/footer.html"
+description: "A page footer component, containing common links to complement primary navigation and flexible structure. It is best viewed with “full view†as it’s meant to take up the full width of the page."
+links:
+ - https://protocol.mozilla.org/components/detail/footer.html
group: Footer
slots:
logo:
diff --git a/components/menu/menu.component.yml b/components/menu/menu.component.yml
index 062b4da..0f38121 100644
--- a/components/menu/menu.component.yml
+++ b/components/menu/menu.component.yml
@@ -1,5 +1,7 @@
name: Menu
-description: "An expandable menu used in the Navigation organism, consisting of menu panels. https://protocol.mozilla.org/components/detail/menu.html"
+description: "An expandable menu used in the Navigation organism, consisting of menu panels."
+links:
+ - https://protocol.mozilla.org/components/detail/menu.html
group: Navigation
slots:
panels:
diff --git a/components/menu_item/menu_item.component.yml b/components/menu_item/menu_item.component.yml
index 7c190a1..381f13a 100644
--- a/components/menu_item/menu_item.component.yml
+++ b/components/menu_item/menu_item.component.yml
@@ -1,5 +1,7 @@
name: "Menu item"
-description: "A menu item with link, title, description, icon and a list of secondary links. Each Menu Item should have a link destination. To use only in a menu component. https://protocol.mozilla.org/components/detail/menu-item.html"
+description: "A menu item with link, title, description, icon and a list of secondary links. Each Menu Item should have a link destination. To use only in a menu component."
+links:
+ - https://protocol.mozilla.org/components/detail/menu-item.html
group: Navigation
slots:
title:
diff --git a/components/menu_list/menu_list.component.yml b/components/menu_list/menu_list.component.yml
index 7f7ae27..c60cf07 100644
--- a/components/menu_list/menu_list.component.yml
+++ b/components/menu_list/menu_list.component.yml
@@ -1,5 +1,7 @@
name: "Menu list"
-description: "A sort title, when clicked, expands a list of links. https://protocol.mozilla.org/components/detail/menu-list.html"
+description: "A sort title, when clicked, expands a list of links."
+links:
+ - https://protocol.mozilla.org/components/detail/menu-list.html
variants:
default:
title: Default
diff --git a/components/menu_panel/menu_panel.component.yml b/components/menu_panel/menu_panel.component.yml
index 08400b8..58f3342 100644
--- a/components/menu_panel/menu_panel.component.yml
+++ b/components/menu_panel/menu_panel.component.yml
@@ -1,5 +1,7 @@
name: "(Menu panel)"
-description: "An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule. https://protocol.mozilla.org/components/detail/menu.html"
+description: "An expandable menu used in the Navigation organism, consisting of Menu Items and an optional Card molecule."
+links:
+ - https://protocol.mozilla.org/components/detail/menu.html
group: Navigation
slots:
first_col:
diff --git a/components/navigation/navigation.component.yml b/components/navigation/navigation.component.yml
index b971cb1..28e30de 100644
--- a/components/navigation/navigation.component.yml
+++ b/components/navigation/navigation.component.yml
@@ -1,5 +1,7 @@
name: Navigation
-description: "Main site Navigation, containing Menu and Secondary Download Button components. https://protocol.mozilla.org/components/detail/navigation--default.html"
+description: "Main site Navigation, containing Menu and Secondary Download Button components."
+links:
+ - https://protocol.mozilla.org/components/detail/navigation--default.html
group: Navigation
slots:
logo:
diff --git a/components/newsletter/newsletter.component.yml b/components/newsletter/newsletter.component.yml
index 522805e..eb0c32b 100644
--- a/components/newsletter/newsletter.component.yml
+++ b/components/newsletter/newsletter.component.yml
@@ -1,5 +1,7 @@
name: Newsletter
-description: "The standard newsletter subscription form. The standard newsletter subscription form. https://protocol.mozilla.org/components/detail/newsletter--default.html"
+description: "The standard newsletter subscription form. The standard newsletter subscription form."
+links:
+ - https://protocol.mozilla.org/components/detail/newsletter--default.html
slots:
image:
title: Image
diff --git a/components/notification_bar/notification_bar.component.yml b/components/notification_bar/notification_bar.component.yml
index 4b5ffdc..d046a17 100644
--- a/components/notification_bar/notification_bar.component.yml
+++ b/components/notification_bar/notification_bar.component.yml
@@ -1,5 +1,7 @@
name: "Notification bar"
-description: "Provides contextual feedback messages. The message should be short, usually a single sentence. The bar can include an optional button to dismiss the notification. https://protocol.mozilla.org/components/detail/notification-bar--default.html"
+description: "Provides contextual feedback messages. The message should be short, usually a single sentence. The bar can include an optional button to dismiss the notification."
+links:
+ - https://protocol.mozilla.org/components/detail/notification-bar--default.html
variants:
default:
title: Default
diff --git a/components/picto/picto.component.yml b/components/picto/picto.component.yml
index 3e487b1..d7d0482 100644
--- a/components/picto/picto.component.yml
+++ b/components/picto/picto.component.yml
@@ -1,5 +1,7 @@
name: Picto
-description: "A small block of content featuring a pictographic icon, headline, and body. https://protocol.mozilla.org/components/detail/picto.html"
+description: "A small block of content featuring a pictographic icon, headline, and body."
+links:
+ - https://protocol.mozilla.org/components/detail/picto.html
variants:
default:
title: Default
diff --git a/components/section_heading/section_heading.component.yml b/components/section_heading/section_heading.component.yml
index 531cea9..25aa6f2 100644
--- a/components/section_heading/section_heading.component.yml
+++ b/components/section_heading/section_heading.component.yml
@@ -1,5 +1,7 @@
name: "Section heading"
-description: "Use section headings help organize your page content into sections. https://protocol.mozilla.org/components/detail/section-heading.html"
+description: "Use section headings help organize your page content into sections."
+links:
+ - https://protocol.mozilla.org/components/detail/section-heading.html
slots:
content:
title: Content
diff --git a/components/sidebar_menu/sidebar_menu.component.yml b/components/sidebar_menu/sidebar_menu.component.yml
index 178d5a7..e2143a3 100644
--- a/components/sidebar_menu/sidebar_menu.component.yml
+++ b/components/sidebar_menu/sidebar_menu.component.yml
@@ -1,5 +1,7 @@
name: "Sidebar menu"
-description: "Local navigation for a subset of pages or section of a website, intended to appear in a sidebar adjacent to the main content. It can accommodate multiple categories/sub-sections in a two-level hierarchy with titles corresponding to the top level page of each sub-section. The menu summary reflects the current page, shown when the menu is collapsed in small viewports. The menu label should be the title of the site section. https://protocol.mozilla.org/components/detail/sidebar-menu.html"
+description: "Local navigation for a subset of pages or section of a website, intended to appear in a sidebar adjacent to the main content. It can accommodate multiple categories/sub-sections in a two-level hierarchy with titles corresponding to the top level page of each sub-section. The menu summary reflects the current page, shown when the menu is collapsed in small viewports. The menu label should be the title of the site section."
+links:
+ - https://protocol.mozilla.org/components/detail/sidebar-menu.html
slots:
label:
title: "Menu label"
diff --git a/components/split/split.component.yml b/components/split/split.component.yml
index 68e02b7..02d51af 100644
--- a/components/split/split.component.yml
+++ b/components/split/split.component.yml
@@ -1,5 +1,7 @@
name: Split
-description: 'A full-width page section with text on one side and a single piece of media (an image or video) on the other, hence "split" into two columns. It''s highly customizable with a lot of optional classes to support different layout variations. https://protocol.mozilla.org/components/detail/split--default.html'
+description: 'A full-width page section with text on one side and a single piece of media (an image or video) on the other, hence "split" into two columns. It''s highly customizable with a lot of optional classes to support different layout variations.'
+links:
+ - https://protocol.mozilla.org/components/detail/split--default.html
variants:
default:
title: Default
diff --git a/components/video/video.component.yml b/components/video/video.component.yml
index 5c8cba8..c1cfa46 100644
--- a/components/video/video.component.yml
+++ b/components/video/video.component.yml
@@ -1,5 +1,7 @@
name: Video
-description: "A responsive container for embedded video. The video is scaled to the width of its container and maintains its aspect ratio. https://protocol.mozilla.org/patterns/atoms/video.html"
+description: "A responsive container for embedded video. The video is scaled to the width of its container and maintains its aspect ratio."
+links:
+ - https://protocol.mozilla.org/patterns/atoms/video.html
slots:
content:
title: Content
--
GitLab
From 4baf898500a8912414a8a71ba1133d7153600c0a Mon Sep 17 00:00:00 2001
From: Pierre <pierredureau@yahoo.fr>
Date: Mon, 3 Mar 2025 12:35:44 +0100
Subject: [PATCH 4/5] Add content component for page.html.twig
---
components/content/content.component.yml | 16 ++++++
.../content/content.no_sidebar.story.yml | 9 ++++
.../content/content.sidebar_left.story.yml | 14 +++++
.../content/content.sidebar_right.story.yml | 16 ++++++
components/content/content.twig | 15 ++++++
templates/system/page.html.twig | 54 +++++++------------
ui_suite_protocol.info.yml | 3 +-
ui_suite_protocol.theme | 2 +-
8 files changed, 90 insertions(+), 39 deletions(-)
create mode 100644 components/content/content.component.yml
create mode 100644 components/content/content.no_sidebar.story.yml
create mode 100644 components/content/content.sidebar_left.story.yml
create mode 100644 components/content/content.sidebar_right.story.yml
create mode 100644 components/content/content.twig
diff --git a/components/content/content.component.yml b/components/content/content.component.yml
new file mode 100644
index 0000000..3228087
--- /dev/null
+++ b/components/content/content.component.yml
@@ -0,0 +1,16 @@
+name: "Content layout"
+description: "A block with a main column and one sidebar on either the left or right. A single page should only have one main section and one sidebar."
+group: Layout
+links:
+ - "https://protocol.mozilla.org/components/detail/main-with-sidebar--default"
+slots:
+ main:
+ title: Main
+ sidebar:
+ title: Sidebar
+props:
+ type: object
+ properties:
+ right_sidebar:
+ title: "Right sidebar?"
+ type: boolean
diff --git a/components/content/content.no_sidebar.story.yml b/components/content/content.no_sidebar.story.yml
new file mode 100644
index 0000000..8c7e05f
--- /dev/null
+++ b/components/content/content.no_sidebar.story.yml
@@ -0,0 +1,9 @@
+name: No sidebar
+description: "This story can be altered by the current page layout."
+slots:
+ main:
+ type: html_tag
+ tag: div
+ value: Main
+ attributes:
+ style: "border: 4px solid slateblue; padding: 16px"
diff --git a/components/content/content.sidebar_left.story.yml b/components/content/content.sidebar_left.story.yml
new file mode 100644
index 0000000..e2a1a14
--- /dev/null
+++ b/components/content/content.sidebar_left.story.yml
@@ -0,0 +1,14 @@
+name: Sidebar on the left
+slots:
+ main:
+ type: html_tag
+ tag: div
+ value: Main
+ attributes:
+ style: "border: 4px solid slateblue; padding: 16px"
+ sidebar:
+ type: html_tag
+ tag: div
+ value: Sidebar
+ attributes:
+ style: "border: 4px solid lightseagreen; padding: 16px"
diff --git a/components/content/content.sidebar_right.story.yml b/components/content/content.sidebar_right.story.yml
new file mode 100644
index 0000000..daa9a02
--- /dev/null
+++ b/components/content/content.sidebar_right.story.yml
@@ -0,0 +1,16 @@
+name: Sidebar on the right
+slots:
+ main:
+ type: html_tag
+ tag: div
+ value: Main
+ attributes:
+ style: "border: 4px solid slateblue; padding: 16px"
+ sidebar:
+ type: html_tag
+ tag: div
+ value: Sidebar
+ attributes:
+ style: "border: 4px solid lightseagreen; padding: 16px"
+props:
+ right_sidebar: true
diff --git a/components/content/content.twig b/components/content/content.twig
new file mode 100644
index 0000000..ebc531d
--- /dev/null
+++ b/components/content/content.twig
@@ -0,0 +1,15 @@
+{% set attributes = sidebar ? attributes.addClass('mzp-has-sidebar', right_sidebar ? 'mzp-l-sidebar-right' : 'mzp-l-sidebar-left') : attributes %}
+
+<div{{ attributes.addClass('mzp-l-content') }}>
+
+ <main class="mzp-l-main">
+ {{ main }}
+ </main>
+
+ {% if sidebar %}
+ <aside class="mzp-l-sidebar">
+ {{ sidebar }}
+ </aside>
+ {% endif %}
+
+</div>
diff --git a/templates/system/page.html.twig b/templates/system/page.html.twig
index cdae2e1..b8e70ee 100644
--- a/templates/system/page.html.twig
+++ b/templates/system/page.html.twig
@@ -37,46 +37,28 @@
#}
{% if page.header_logo or page.header_menu or page.header_download %}
{{ include('ui_suite_protocol:navigation', {
- attributes: create_attribute(),
- logo: page.header_logo,
- menu: page.header_menu,
- download: page.header_download,
-}, with_context: false) }}
+ logo: page.header_logo,
+ menu: page.header_menu,
+ download: page.header_download,
+ }, with_context: false) }}
{% endif %}
-{% set main_attributes = create_attribute({role: 'main', class: ['mzp-l-content']}) %}
-{% set main_attributes = page.sidebar_first ? main_attributes.addClass('mzp-has-sidebar', 'mzp-l-sidebar-left') : main_attributes %}
-{% set main_attributes = page.sidebar_second ? main_attributes.addClass('mzp-has-sidebar', 'mzp-l-sidebar-right') : main_attributes %}
+<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
-<main{{ main_attributes }}>
- <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
-
- <div class="mzp-l-main">
- {{ page.content }}
- </div>{# /.layout-content #}
-
- {% if page.sidebar_first %}
- <aside class="mzp-l-sidebar" role="complementary">
- {{ page.sidebar_first }}
- </aside>
- {% endif %}
-
- {% if page.sidebar_second %}
- <aside class="mzp-l-sidebar" role="complementary">
- {{ page.sidebar_second }}
- </aside>
- {% endif %}
-
-</main>
+{% if page.content or page.sidebar %}
+ {{ include('ui_suite_protocol:content', {
+ main: page.content,
+ sidebar: page.sidebar,
+ }, with_context: false) }}
+{% endif %}
{% if page.footer_logo or page.footer_sections or page.footer_language or page.footer_social or page.footer_license or page.footer_terms %}
{{ include('ui_suite_protocol:footer', {
- attributes: create_attribute(),
- logo: page.footer_logo,
- sections: page.footer_sections,
- language: page.footer_language,
- social: page.footer_social,
- license: page.footer_license,
- terms: page.footer_terms,
-}, with_context: false) }}
+ logo: page.footer_logo,
+ sections: page.footer_sections,
+ language: page.footer_language,
+ social: page.footer_social,
+ license: page.footer_license,
+ terms: page.footer_terms,
+ }, with_context: false) }}
{% endif %}
diff --git a/ui_suite_protocol.info.yml b/ui_suite_protocol.info.yml
index 212fb23..49185eb 100644
--- a/ui_suite_protocol.info.yml
+++ b/ui_suite_protocol.info.yml
@@ -16,8 +16,7 @@ regions:
header_menu: "Header menu"
header_download: "Header download"
content: "Content"
- sidebar_first: "Sidebar first"
- sidebar_second: "Sidebar second"
+ sidebar: "Sidebar"
footer_logo: "Footer logo"
footer_sections: "Footer sections"
footer_language: "Footer language"
diff --git a/ui_suite_protocol.theme b/ui_suite_protocol.theme
index a3b8090..9c92dcf 100644
--- a/ui_suite_protocol.theme
+++ b/ui_suite_protocol.theme
@@ -15,7 +15,7 @@ use Drupal\Core\Render\Element;
*/
function ui_suite_protocol_form_alter(array &$form, FormStateInterface $form_state, string $form_id): void {
$form['#attributes']['class'][] = 'mzp-c-form';
- // Style form buttons like button patterns.
+ // Style form buttons like button components.
if (isset($form['actions'])) {
$actions = Element::children($form['actions']);
foreach ($actions as $action) {
--
GitLab
From b4183b6d10c593b4744d9d8334eef93ec9b8e276 Mon Sep 17 00:00:00 2001
From: Pierre <pierredureau@yahoo.fr>
Date: Mon, 3 Mar 2025 12:36:05 +0100
Subject: [PATCH 5/5] Cnvert UI examples
---
ui_suite_protocol.ui_examples.yml | 38 +++++++++++++++++++------------
1 file changed, 23 insertions(+), 15 deletions(-)
diff --git a/ui_suite_protocol.ui_examples.yml b/ui_suite_protocol.ui_examples.yml
index 3d5b5bf..f5a32a2 100644
--- a/ui_suite_protocol.ui_examples.yml
+++ b/ui_suite_protocol.ui_examples.yml
@@ -1,18 +1,26 @@
billboard:
label: Billboard examples
- description: "Two billboards interspersed with card components. https://protocol.moz.works/demos/billboard.html"
+ description: "Two billboards interspersed with card components."
+ links:
+ - https://protocol.moz.works/demos/billboard.html
render:
- - "#type": pattern_preview
- "#id": billboard
- - "#type": pattern
- "#id": card_layout
- "#fields":
- "cards":
- - "#type": pattern_preview
- "#id": card
- - "#type": pattern_preview
- "#id": card
- "#variant": half
- - "#type": pattern_preview
- "#id": billboard
- "#variant": left
+ - type: component
+ component: "ui_suite_protocol:billboard"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:card_layout"
+ slots:
+ cards:
+ - type: component
+ component: "ui_suite_protocol:card"
+ story: preview
+ - type: component
+ component: "ui_suite_protocol:card"
+ story: preview
+ props:
+ variant: half
+ - type: component
+ component: "ui_suite_protocol:billboard"
+ story: preview
+ props:
+ variant: left
--
GitLab