Add centering classes for Logo and Wordmark [fix #718] (#819)

mozilla · Jul 26, 2022 · 866628a · 866628a
1 parent 80c39a6
commit 866628a
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # HEAD
 
 ## Features
+* **component:** Add centering classes for Logo and Wordmark. (#718)
 * **docs:** Migrate Protocol documentation site to Fractal.
 * **node:** Create a Webpack config for compiling docs using Fractal.
 

diff --git a/assets/sass/protocol/components/logos/_logo.scss b/assets/sass/protocol/components/logos/_logo.scss
@@ -50,6 +50,24 @@ $logo-sizes: (
         margin-bottom: $layout-lg;
         width: $layout-xl;
     }
+
+    &.mzp-l-logo-center {
+        background-position: center top;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    &.mzp-l-logo-center-on-sm-md {
+        background-position: center top;
+        margin-left: auto;
+        margin-right: auto;
+
+        @media #{$mq-md} {
+            @include bidi(((background-position, top left, top right),));
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
 }
 
 @mixin logo($product, $dir, $layout-size, $logo-size) {

diff --git a/assets/sass/protocol/components/logos/_wordmark.scss b/assets/sass/protocol/components/logos/_wordmark.scss
@@ -51,6 +51,24 @@ $logo-sizes: (
         margin-bottom: $layout-lg;
         width: 521px;
     }
+
+    &.mzp-l-wordmark-center {
+        background-position: center top;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    &.mzp-l-wordmark-center-on-sm-md {
+        background-position: center top;
+        margin-left: auto;
+        margin-right: auto;
+
+        @media #{$mq-md} {
+            @include bidi(((background-position, top left, top right),));
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
 }
 
 @mixin wordmark($product, $dir, $layout-size, $logo-size) {

diff --git a/components/branding/logo/logo.config.yml b/components/branding/logo/logo.config.yml
@@ -0,0 +1,13 @@
+variants:
+  - name: Centered
+    notes: Add the class `mzp-l-logo-center` for a centered logo.
+    context:
+      layout: 'mzp-l-logo-center'
+      size: 'lg'
+  - name: Centered on Mobile
+    notes: Add the class `mzp-l-logo-center-on-sm-md` for a centered logo only
+      in small to medium viewports, changing to the standard alignment (with the
+      text direction) in larger viewports.
+    context:
+      layout: 'mzp-l-logo-center-on-sm-md'
+      size: 'lg'
diff --git a/components/branding/logo/logo.html b/components/branding/logo/logo.html
@@ -4,7 +4,8 @@
 # size          - Size class suffix (xs, sm, md, lg, xl)
 # product       - Product class suffix
 # label         - string
+# layout        - layout class (mzp-l-logo-center, mzp-l-logo-center-on-sm-md)
 #}
-<div class="mzp-c-logo mzp-t-logo-{% if size %}{{ size }}{% else %}md{% endif %} mzp-t-product-{% if product %}{{ product }}{% else %}firefox{%  endif %}">
+<div class="mzp-c-logo mzp-t-logo-{% if size %}{{ size }}{% else %}md{% endif %} mzp-t-product-{% if product %}{{ product }}{% else %}firefox{%  endif %}{% if layout %} {{ layout }}{% endif %}">
   {%- if label %}{{ label }}{% endif -%}
 </div>
diff --git a/components/branding/logo/readme.md b/components/branding/logo/readme.md
@@ -31,6 +31,14 @@ Product classes:
 - `mzp-t-product-pocket`
 - `mzp-t-product-relay`
 
+Logos are aligned with text by default (either left or right, depending on text
+direction). Some additional layout classes are available to center the logo on
+all viewports or only in small viewports.
+
+Layout classes:
+- `mzp-l-logo-center`
+- `mzp-l-logo-center-on-sm-md`
+
 ### Tips
 This component uses CSS image replacement to display a background image in place
 of the element’s text content. If you use the logo as meaningful content like a

diff --git a/components/branding/wordmark/readme.md b/components/branding/wordmark/readme.md
@@ -33,6 +33,14 @@ Product classes:
 - `mzp-t-product-pocket`
 - `mzp-t-product-relay`
 
+Wordmarks are aligned with text by default (either left or right, depending on
+text direction). Some additional layout classes are available to center the
+wordmark on all viewports or only in small viewports.
+
+Layout classes:
+- `mzp-l-wordmark-center`
+- `mzp-l-wordmark-center-on-sm-md`
+
 ### Tips
 This component uses CSS image replacement to display a background image in place
 of the element’s text content. If you use the wordmark as meaningful content like

diff --git a/components/branding/wordmark/wordmark.config.yml b/components/branding/wordmark/wordmark.config.yml
@@ -0,0 +1,13 @@
+variants:
+  - name: Centered
+    notes: Add the class `mzp-l-wordmark-center` for a centered wordmark.
+    context:
+      layout: 'mzp-l-wordmark-center'
+      size: 'lg'
+  - name: Centered on Mobile
+    notes: Add the class `mzp-l-wordmark-center-on-sm-md` for a centered wordmark
+      only in small to medium viewports, changing to the standard alignment (with
+      the text direction) in larger viewports.
+    context:
+      layout: 'mzp-l-wordmark-center-on-sm-md'
+      size: 'lg'
diff --git a/components/branding/wordmark/wordmark.html b/components/branding/wordmark/wordmark.html
@@ -4,7 +4,8 @@
 # size          - Size class suffix (xs, sm, md, lg, xl)
 # product       - Product class suffix
 # label         - string
+# layout        - layout class (mzp-l-wordmark-center, mzp-l-wordmark-center-on-sm-md)
 #}
-<div class="mzp-c-wordmark mzp-t-wordmark-{% if size %}{{ size }}{% else %}md{% endif %} mzp-t-product-{% if product %}{{ product }}{% else %}firefox{%  endif %}">
+<div class="mzp-c-wordmark mzp-t-wordmark-{% if size %}{{ size }}{% else %}md{% endif %} mzp-t-product-{% if product %}{{ product }}{% else %}firefox{%  endif %}{% if layout %} {{ layout }}{% endif %}">
   {%- if label %}{{ label }}{% else %}Firefox Browser{% endif -%}
 </div>