diff --git a/Makefile b/Makefile
index 24ecbfba12871bcd4583219877e40a3373ccfb17..6ce7ba6fb5213633898d3b4d2625e6e0425597ec 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/components/article/article.component.yml b/components/article/article.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..aaeef3de3b6eb13a52ffa2eb38a1ddb17db3b703
--- /dev/null
+++ b/components/article/article.component.yml
@@ -0,0 +1,31 @@
+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."
+links:
+ - 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 0000000000000000000000000000000000000000..c8b95fa0b8cf24270d7aeac658e7dc206ddfbfa9
--- /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 0000000000000000000000000000000000000000..63e8869bfdb1e94ba2c8f408a4f8a6811111fdb0
--- /dev/null
+++ b/components/billboard/billboard.component.yml
@@ -0,0 +1,40 @@
+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."
+links:
+ - 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 0000000000000000000000000000000000000000..cd7fab0a05528a4f63629fb8c0e192e652f635b4
--- /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 38eb026ae428ec32fb9cc5893625be1695fdeeec..f5419bc425187ea5dac59d6feccfec82f19e805a 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 0000000000000000000000000000000000000000..a2d11a03192981e9dfab879a0f76aed51a50aa39
--- /dev/null
+++ b/components/breadcrumb/breadcrumb.component.yml
@@ -0,0 +1,10 @@
+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."
+links:
+ - 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 0000000000000000000000000000000000000000..070173ed189a6fdc2ae0a9ba6fbe8e2f255ed5ff
--- /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 0000000000000000000000000000000000000000..9fa967bd9d181b4d8388646fb4936975733d81ce
--- /dev/null
+++ b/components/button/button.component.yml
@@ -0,0 +1,57 @@
+name: Button
+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)"
+ 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 0000000000000000000000000000000000000000..c850900aa022eb49655c5bcf6b42c2ffc9c66b43
--- /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 cbc205cb89e3bf5928799c690effe0e4086f1cb8..b2288ad2b0288c60a18f741269f137f2fe312e4a 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 0000000000000000000000000000000000000000..2e7f189c70c66e37ea528c36e2fa0a2021a5802a
--- /dev/null
+++ b/components/call_out/call_out.component.yml
@@ -0,0 +1,37 @@
+name: "Call out"
+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
+ 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 0000000000000000000000000000000000000000..1c539cc914110dac21c568cb2650ad062198f560
--- /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 26df63b0ded41b809eff9350c1d856449553e102..9c4d958e4bac5818d5f7ea219a4f67200e94659c 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 0000000000000000000000000000000000000000..5d70d8fee756165e8912f6d6bdc686306e4c00d4
--- /dev/null
+++ b/components/card/card.component.yml
@@ -0,0 +1,67 @@
+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."
+links:
+ - 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 0000000000000000000000000000000000000000..fadc702da5f0ce03aece07ff3e99e47afc57bd0a
--- /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 89f51d8f72a83aad09674c2f84a75950bbc6f089..b0eed0f21716ec3f6691f7bdbe4289b59b8c2954 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 0000000000000000000000000000000000000000..80f35be166715fa9ec55aea3c7d781c706c1c56a
--- /dev/null
+++ b/components/card_layout/card_layout.component.yml
@@ -0,0 +1,29 @@
+name: "Card layout"
+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:
+ 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 0000000000000000000000000000000000000000..c72572b70bda7c7ce103d768bb2ef3fa4e7ac644
--- /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 d3aaece2feedae8dc8ff4999cd5f6088ae1337f4..39ce4b1fa79854fa3cb49c22ca12a6d79f345346 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/content/content.component.yml b/components/content/content.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..322808723ea06b9de47c76decce50e793ddd6ab8
--- /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 0000000000000000000000000000000000000000..8c7e05fc3161f3c22f1e2df9262b3c0dc3e521c3
--- /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 0000000000000000000000000000000000000000..e2a1a14c0c44664e644931660f13c4ee850ee994
--- /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 0000000000000000000000000000000000000000..daa9a028a617877bdc34295414efe2a7e293454a
--- /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 0000000000000000000000000000000000000000..ebc531d082668e42438b0796754192a3352ff50a
--- /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/components/details/details.component.yml b/components/details/details.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..20ba6177b034509cb92809cfc4ffd4c5fd1c53f9
--- /dev/null
+++ b/components/details/details.component.yml
@@ -0,0 +1,12 @@
+name: Details
+description: "Native details and summary support."
+links:
+ - 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 0000000000000000000000000000000000000000..69b10a5c737485801b5481bb8ce3e0d67d71b009
--- /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 0000000000000000000000000000000000000000..e925fc6f2700a3e73eac5a06335ab3e022620c86
--- /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 0000000000000000000000000000000000000000..0025280545621eeb35b8d963611c46b515325204
--- /dev/null
+++ b/components/emphasis_box/emphasis_box.component.yml
@@ -0,0 +1,8 @@
+name: "Emphasis box"
+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
+ 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 0000000000000000000000000000000000000000..194b603d53b9a739884fe3e595eac0072f29f3dc
--- /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 0000000000000000000000000000000000000000..ce2e2199e220b7926000e69e96f18f5e2522fd22
--- /dev/null
+++ b/components/footer/footer.component.yml
@@ -0,0 +1,31 @@
+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."
+links:
+ - 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 0000000000000000000000000000000000000000..35b5dde0347c402ec8472f9c2366fcf3078471c0
--- /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 de3e21b291e85dbe0497189e9cd814ca92433e0e..4685de7e6fd571c5092aef745c05725c93577b97 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 0000000000000000000000000000000000000000..a9df0638fc46d87ddb23dd2ed484a0065abebc82
--- /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 0000000000000000000000000000000000000000..47af1f8a246c4d1d05e12ddcc71fe6671b12a853
--- /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 0000000000000000000000000000000000000000..0f38121d6e93d0f911fc9ea1203e025bb834079c
--- /dev/null
+++ b/components/menu/menu.component.yml
@@ -0,0 +1,20 @@
+name: Menu
+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:
+ 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 0000000000000000000000000000000000000000..85d5f4fffee8f191ce04250f8997a205ed26a4df
--- /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 ac2c2fc6a7df3b785bf6019f749be34bf7a88c4d..b24ae818a25747347fcc9c3be96b0eea90cf2e5a 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 0000000000000000000000000000000000000000..381f13ad5b19301ab8ddf3a43fa1596c0e847c08
--- /dev/null
+++ b/components/menu_item/menu_item.component.yml
@@ -0,0 +1,37 @@
+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."
+links:
+ - 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 0000000000000000000000000000000000000000..96ffa9eb79e06554e6943b915b91e223d372a419
--- /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 d987f79606be91bae129ded2e2d24c4a1d955446..64144e754f9919fe7e022c5a410e9a0eba3380e0 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 0000000000000000000000000000000000000000..c60cf07cec93dd2168e5f1daf8cb54714537db95
--- /dev/null
+++ b/components/menu_list/menu_list.component.yml
@@ -0,0 +1,24 @@
+name: "Menu list"
+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
+ 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 0000000000000000000000000000000000000000..77a51a25f9d855ae7f99d5e1fc36f635c13ec259
--- /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 0e85327f76319a231de5068f265afe0852be04c5..2f9b3be63472639eea8217a5ddf9b1ecf262f6e3 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 0000000000000000000000000000000000000000..58f334292f5bdaa2698a8f29ca7d29977dac63a9
--- /dev/null
+++ b/components/menu_panel/menu_panel.component.yml
@@ -0,0 +1,22 @@
+name: "(Menu panel)"
+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:
+ 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 0000000000000000000000000000000000000000..e4a82f895f0cc8c828685ccaeb4e961549bc2e66
--- /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 6e7de6c5677c1e6cf3a88c73859d4969f6c655f7..698a862181a5287f5c12ba491d7f479fe66623ed 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 0000000000000000000000000000000000000000..28e30de8ec8f6fb40ff283b693c91e81fa059820
--- /dev/null
+++ b/components/navigation/navigation.component.yml
@@ -0,0 +1,21 @@
+name: Navigation
+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:
+ 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 0000000000000000000000000000000000000000..5f4280679c6a3806b5047b93b4f055489384fff5
--- /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 68dcb2debd1080f6f6e65a499a97b1e2e1d3ab77..b1201a11afa869e70161c741ce102d91cfc2c429 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 0000000000000000000000000000000000000000..eb0c32befa6f5192876c9ab4bc33b9e17991945c
--- /dev/null
+++ b/components/newsletter/newsletter.component.yml
@@ -0,0 +1,35 @@
+name: Newsletter
+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
+ 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 0000000000000000000000000000000000000000..68264585e1c1a7494215774ed7ea38ab532ceff3
--- /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 fbc2f60c9ba3562aee8a8bfd4face6d8d1fca5ce..af12a73306117ceb409988f0e69cdd2617d68663 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 0000000000000000000000000000000000000000..d046a175515a1ca521a56e6a1a46545907039688
--- /dev/null
+++ b/components/notification_bar/notification_bar.component.yml
@@ -0,0 +1,35 @@
+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."
+links:
+ - 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 0000000000000000000000000000000000000000..9e7acf4a0ed018becbdf87d5e1ba3b3bedbccef3
--- /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 e4a3d2720a09a2a8a4e2d9deea8c89bbb04514d4..51e3c57e6ea27fa82d64a8a7cbb831635382117a 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 0000000000000000000000000000000000000000..d7d0482908276e26973f236fe834730a204027b4
--- /dev/null
+++ b/components/picto/picto.component.yml
@@ -0,0 +1,39 @@
+name: Picto
+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
+ 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 0000000000000000000000000000000000000000..9177dcad86e61bfdd93f070db2dcf509c964d52b
--- /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 0000000000000000000000000000000000000000..25aa6f28ffc4125ee8e6b6c35e7d6e741e2cd2f2
--- /dev/null
+++ b/components/section_heading/section_heading.component.yml
@@ -0,0 +1,26 @@
+name: "Section heading"
+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
+ 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 0000000000000000000000000000000000000000..dbbf2b852c8f68393d4a6f194cfa2342d579579e
--- /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 c2cdcf8878940309301af162a4a8a9b87b4280d6..1b3044dc2138beffdeed57b6042c4a074f2d924d 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 0000000000000000000000000000000000000000..e2143a31519884a7fcc951d49ed5d47b7b698398
--- /dev/null
+++ b/components/sidebar_menu/sidebar_menu.component.yml
@@ -0,0 +1,17 @@
+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."
+links:
+ - 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 0000000000000000000000000000000000000000..4f22f37a9519279b35000b14348f6278699509ca
--- /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 0cd94bf4c8e68642442b5854ec78f7785e32faa6..c73a86037f21aa8cd115ae5b03abe12cbdb3d97b 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 0000000000000000000000000000000000000000..02d51af1bc713865a62a98bb11e679963f4f186b
--- /dev/null
+++ b/components/split/split.component.yml
@@ -0,0 +1,45 @@
+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.'
+links:
+ - 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 0000000000000000000000000000000000000000..b984e02d72d04b85fe9799a172b7915537a4bccb
--- /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 e6c9c36283891d8a6a03e035a019e92fcb053ed6..88e33c7301bcad6df974ac5343c853cfd6ea1790 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 0000000000000000000000000000000000000000..c1cfa467b7af4002978241f4b96e5975aa3f9ee8
--- /dev/null
+++ b/components/video/video.component.yml
@@ -0,0 +1,8 @@
+name: Video
+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
+ 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 0000000000000000000000000000000000000000..185a9c445d46303fd32d4dd6738c136b9004890c
--- /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 928e2d918361882b227fdb64c71fda0fd82c99cb..421acfe55c7f0952f11db788df60d1ad7a3a5b1c 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/css/preview.css b/css/preview.css
index 1acd72e4a1d57c255f9e404bbf7aec35c09ca4b6..a6c75c6b1ec34fdb7b4574a5b8285d963031fe93 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
Binary files /dev/null and b/logo.png differ
diff --git a/logo.svg b/logo.svg
deleted file mode 100644
index 7d7cf7c6b1f1653979084fbcb2c57f4d71fa4596..0000000000000000000000000000000000000000
--- 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/layout--columns.html.twig b/templates/layout--columns.html.twig
deleted file mode 100644
index 4962e83091691255534c8b6b2d7a9fc7b8f0a463..0000000000000000000000000000000000000000
--- 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/overrides/ui_patterns_library/patterns-meta-information.html.twig b/templates/overrides/ui_patterns_library/patterns-meta-information.html.twig
deleted file mode 100644
index 4f32fb38d9d87b684cb118c6418ce4f504343daf..0000000000000000000000000000000000000000
--- a/templates/overrides/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/overrides/ui_patterns_library/patterns-overview-page.html.twig b/templates/overrides/ui_patterns_library/patterns-overview-page.html.twig
deleted file mode 100644
index 5eec0c3a4c1e3d64c956544ee5316b1ca828f375..0000000000000000000000000000000000000000
--- a/templates/overrides/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/overrides/ui_patterns_library/patterns-single-page.html.twig b/templates/overrides/ui_patterns_library/patterns-single-page.html.twig
deleted file mode 100644
index 2bf90321ddd4283479871bf9f6d147796adbe862..0000000000000000000000000000000000000000
--- a/templates/overrides/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/overrides/ui_patterns_library/patterns-variant-meta-information.html.twig b/templates/overrides/ui_patterns_library/patterns-variant-meta-information.html.twig
deleted file mode 100644
index 092f182fdd5914ff4f6f3951ebceb2ca0456380e..0000000000000000000000000000000000000000
--- a/templates/overrides/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/patterns/article/article.ui_patterns.yml b/templates/patterns/article/article.ui_patterns.yml
deleted file mode 100644
index a4d37806211c03f6cf2dacb68a3d7ce93957ab75..0000000000000000000000000000000000000000
--- 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 8c97565b6562569df6b5096ccd331b9a79aedc96..0000000000000000000000000000000000000000
--- 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 db77bf6f4f06e2cb121d2b4dbb6228910f960699..0000000000000000000000000000000000000000
--- 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 31e0dc2e4e83a4561530ba01ceb351a4881069fb..0000000000000000000000000000000000000000
--- 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 2a0944d45a2af543ba7087310fe1b87a218505e6..0000000000000000000000000000000000000000
--- 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 3cb6d2cdf37c7839488f82d13dffaf3628d90e82..0000000000000000000000000000000000000000
--- 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 d95843d3c660e7edd4b603fca9833f3eb375396e..0000000000000000000000000000000000000000
--- 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 bc4accecd938ded2a19a5cc72848002ceac1a46b..0000000000000000000000000000000000000000
--- 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 c9d1a852eb3aa768245d087d1ae4c8c700d949a9..0000000000000000000000000000000000000000
--- 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 492959b61feb4f649a909d0e7382bcc334f2b66f..0000000000000000000000000000000000000000
--- 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 de26c91540eadd1a3e58579aa370517dca561cc9..0000000000000000000000000000000000000000
--- 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 2fe6aaf9345dcc0f97c0071ddde8a44a7f2353f9..0000000000000000000000000000000000000000
--- 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 9315c81aa0b70401737cc0ffd5bc4c7896ae2220..0000000000000000000000000000000000000000
--- 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 864fc76cd083189d46df0306f7928d49d4d94376..0000000000000000000000000000000000000000
--- 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 b3879216fa38aad4960e52e00e57ecfb69333444..0000000000000000000000000000000000000000
--- 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 c5401727c1fb803d168b723069ed2e8b33635169..0000000000000000000000000000000000000000
--- 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 72d0bdaa9107c47f57dda63ff209b8eb3f6bc8ac..0000000000000000000000000000000000000000
--- 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 bd562b5de73efb3578dabd28547a4497db87d6d1..0000000000000000000000000000000000000000
--- 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 dde3cbb26f7a9064278bdb96148a189a5776bd5b..0000000000000000000000000000000000000000
--- 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 1641af3cc8c24920fe83b7cf7d1d6fbc8fdc3c73..0000000000000000000000000000000000000000
--- 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 81282d24dfcdcd4b759d21d9a052a2bcf08381e5..0000000000000000000000000000000000000000
--- 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 5cad9f262c705c499b7dd9fc6d2f8c7913e673f9..0000000000000000000000000000000000000000
--- 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 bc3a61c9361dc0a4c7dbe73fd76d2fa92bd525a5..0000000000000000000000000000000000000000
--- 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 0480e26b4c429e534246d09abe99a8e4763cc28f..0000000000000000000000000000000000000000
--- 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 68%
rename from templates/overrides/system/breadcrumb.html.twig
rename to templates/system/breadcrumb.html.twig
index 260696d79ab41b08656559c595ec5c4cfdf451be..e89c94fbb2b5312fcf053c7500eddeebecd9dffd 100644
--- a/templates/overrides/system/breadcrumb.html.twig
+++ b/templates/system/breadcrumb.html.twig
@@ -10,7 +10,7 @@
*/
#}
{% if breadcrumb %}
- {{ pattern('breadcrumb', {
- 'items': breadcrumb
-}) }}
+ {{ include('ui_suite_protocol:breadcrumb', {
+ items: breadcrumb,
+}, with_context: false) }}
{% 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 9dc2017428cf7ad0639e06af397583457c82b171..b4c115473a27a6f0939069346df640973bb964d4 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 76%
rename from templates/overrides/system/menu-local-task.html.twig
rename to templates/system/menu-local-task.html.twig
index fa084db31f2931ae2211cd7882cccadab01e8f9d..d97be180f894cdf78713095ee88651cab6f4fb8a 100644
--- a/templates/overrides/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', {
- 'variant': variant,
- 'attributes': attributes,
- 'label': link,
- 'size': 'small'
-}) }}
+{{ include('ui_suite_protocol:button', {
+ variant: variant,
+ attributes: attributes,
+ label: link,
+ size: 'small',
+}, with_context: false) }}
diff --git a/templates/overrides/system/page.html.twig b/templates/system/page.html.twig
similarity index 56%
rename from templates/overrides/system/page.html.twig
rename to templates/system/page.html.twig
index 9f722454b687f3308ddd748131749c9bbf1fecc3..b8e70eebf0f1626710fd37e538bca10ae1367d52 100644
--- a/templates/overrides/system/page.html.twig
+++ b/templates/system/page.html.twig
@@ -36,48 +36,29 @@
*/
#}
{% 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
-}) }}
+ {{ include('ui_suite_protocol:navigation', {
+ 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 %}
- {{ 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
-}) }}
+ {{ include('ui_suite_protocol:footer', {
+ 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/templates/overrides/system/status-messages.html.twig b/templates/system/status-messages.html.twig
similarity index 86%
rename from templates/overrides/system/status-messages.html.twig
rename to templates/system/status-messages.html.twig
index bcc920ec5a531a7ec67fe186212c3dbb918a0346..fc18cbdcbd307da119bf0bc3cc81a795f15c69c2 100644
--- a/templates/overrides/system/status-messages.html.twig
+++ b/templates/system/status-messages.html.twig
@@ -31,13 +31,12 @@
{% set variant = (type == 'error') ? 'error' : variant %}
{% for message in messages %}
- {{ pattern('notification_bar', {
- 'variant': variant,
- 'attributes': attributes,
- 'message': message
- }) }}
+ {{ include('ui_suite_protocol:notification_bar', {
+ variant: variant,
+ attributes: attributes,
+ message: message,
+ }, with_context: false) }}
{% 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 e81e3f4e99cbc30f2a7d3c074d393b5073fb922f..667bf62f41f549a3f2b9ef51e3b05696cba79a20 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/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 0000000000000000000000000000000000000000..501d28bc6f2ddbce32a60e1a99e2f1bba562072c
--- /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 %}
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 71fa1affc056897bc218ac0586dade1c232dbbbd..49185eb4885aafcc5255a98a51d8a720f2bf5f97 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:
@@ -18,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.layouts.yml b/ui_suite_protocol.layouts.yml
deleted file mode 100644
index b5592a61980cffc6b74751c4e7055ee1f73249f9..0000000000000000000000000000000000000000
--- 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 ede4234b35a949092abb39e657bad1057fd11f2d..9c92dcf555bb21a133a60f77c6333eb95aba22fa 100644
--- a/ui_suite_protocol.theme
+++ b/ui_suite_protocol.theme
@@ -2,33 +2,20 @@
/**
* @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().
*/
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) {
@@ -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"]);
-}
diff --git a/ui_suite_protocol.ui_examples.yml b/ui_suite_protocol.ui_examples.yml
index 3d5b5bfdfc3c23b2dead6fe2429f7f02058c4ac3..f5a32a2a31fe0727a4934caf692bd237a7e6cfd9 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