Unify button styles (Part 1) (#2912)

* get updated button styles in & updated .btn-normal to .btn-primary * added missing file * fixed merge conflicts * removed 'yellow' and 'dark-yellow' SCSS variables * updated .btn-ghost to .button-secondary * updated .btn-pop to .button-pop * updated LinkButtonBlock's context * added migration file * styling tweaks + added inline comments * fixed linting errors * fixed migration file issue * renamed '.button-primary' to '.btn-primary' * added rule to override bootstrap's .btn-primary style * added rule to override bootstrap's .btn-priarystyle * renamed '.button-secondary' to '.btn-secondary' * renamed '.button-pop' to '.btn-pop' * updated migration file * added inline comments * fixed linting errors * Update main.scss
MozillaFoundation · Apr 1, 2019 · 122b479 · 122b479
1 parent 0820066
commit 122b479
Show file tree

Hide file tree

Showing 25 changed files with 292 additions and 108 deletions.
diff --git a/network-api/networkapi/templates/404.html b/network-api/networkapi/templates/404.html
@@ -11,7 +11,7 @@ <h1 class="h1-heading">Uh oh!</h1>
         </div>
         <p class="h5-black">Sorry, the page does not exist</p>
         <p><a href="mailto:network@mozillafoundation.org">Contact us</a> or ...</p>
-        <a href="/" class="btn btn-ghost">Go to home page</a>
+        <a href="/" class="btn btn-secondary">Go to home page</a>
       </div>
       <div class="col-md-5 pt-5 p-md-5 flex-first flex-md-last">
         <img src="/_images/404.svg" class="w-100" alt="Sad anthropomorphized 404">

diff --git a/network-api/networkapi/wagtailcustomization/templates/wagtailadmin/account/account.html b/network-api/networkapi/wagtailcustomization/templates/wagtailadmin/account/account.html
@@ -33,7 +33,7 @@
 
             <li class="row row-flush">
                 <div class="col6">
-                    <a href="https://gravatar.com/emails/" class="button button-primary">{% trans "Set gravatar" %}</a>
+                    <a href="https://gravatar.com/emails/" class="button btn-primary">{% trans "Set gravatar" %}</a>
                 </div>
 
                 <small class="col6">
@@ -44,7 +44,7 @@
             {% if show_change_password %}
                 <li class="row row-flush">
                     <div class="col6">
-                        <a href="{% url 'wagtailadmin_account_change_password' %}" class="button button-primary">{% trans "Change password" %}</a>
+                        <a href="{% url 'wagtailadmin_account_change_password' %}" class="button btn-primary">{% trans "Change password" %}</a>
                     </div>
 
                     <small class="col6">
@@ -55,7 +55,7 @@
             {% if show_notification_preferences %}
                 <li class="row row-flush">
                     <div class="col6">
-                        <a href="{% url 'wagtailadmin_account_notification_preferences' %}" class="button button-primary">{% trans "Notification preferences" %}</a>
+                        <a href="{% url 'wagtailadmin_account_notification_preferences' %}" class="button btn-primary">{% trans "Notification preferences" %}</a>
                     </div>
 
                     <small class="col6">
@@ -66,7 +66,7 @@
             {% if show_preferred_language_preferences %}
                 <li class="row row-flush">
                     <div class="col6">
-                        <a href="{% url 'wagtailadmin_account_language_preferences' %}" class="button button-primary">{% trans "Language preferences" %}</a>
+                        <a href="{% url 'wagtailadmin_account_language_preferences' %}" class="button btn-primary">{% trans "Language preferences" %}</a>
                     </div>
 
                     <small class="col6">

diff --git a/network-api/networkapi/wagtailpages/customblocks.py b/network-api/networkapi/wagtailpages/customblocks.py
@@ -18,12 +18,29 @@ class LinkButtonBlock(blocks.StructBlock):
     # should be used.
     styling = blocks.ChoiceBlock(
         choices=[
-            ('btn-normal', 'Normal button'),
-            ('btn-ghost', 'Ghost button'),
+            ('btn-primary', 'Primary button'),
+            ('btn-secondary', 'Secondary button'),
+            # Obsolete options to be removed in
+            # https://github.com/mozilla/foundation.mozilla.org/issues/2936
+            ('btn-normal', 'Normal button (Obsolete. Use \'primary button\' instead)'),
+            ('btn-ghost', 'Ghost button  (Obsolete. Use \'secondary button\' instead)'),
         ],
         default='btn-normal',
     )
 
+    # def get_context block to be removed in https://github.com/mozilla/foundation.mozilla.org/issues/2936
+    def get_context(self, value, parent_context=None):
+        context = super().get_context(value, parent_context=parent_context)
+        styling = value.get("styling")
+
+        if styling == 'btn-normal':
+            styling = 'btn-primary'
+        if styling == 'btn-ghost':
+            styling = 'btn-secondary'
+        context['styling'] = styling
+
+        return context
+
     class Meta:
         icon = 'link'
         template = 'wagtailpages/blocks/link_button_block.html'

diff --git a/network-api/networkapi/wagtailpages/migrations/0064_auto_20190329_2313.py b/network-api/networkapi/wagtailpages/migrations/0064_auto_20190329_2313.py
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/link_button_block.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/link_button_block.html
@@ -1,5 +1,5 @@
 {% load wagtailcore_tags %}
 
 <div class="my-default">
-  <a class="btn {{ block.value.styling }}" href="{{ block.value.URL }}">{{ block.value.label }}</a>
+  <a class="btn {{ styling }}" href="{{ value.URL }}">{{ value.label }}</a>
 </div>
diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/campaign_page.html
@@ -62,7 +62,7 @@ <h1>{{ block.value }}</h1>
         {% endif %}"
       >
         <div class="narrow-sticky-button-container hidden">
-          <a href="#cta-anchor" class="narrow-sticky-button btn">TAKE ACTION</a>
+          <a href="#cta-anchor" class="btn btn-primary d-block">TAKE ACTION</a>
         </div>
         <div class="sticky-cta">
           <div id="cta-anchor">

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/homepage.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/homepage.html
@@ -18,7 +18,7 @@
     <div class="col-sm-6">
       <h1 class="h1-heading">{{ page.hero_headline }}</h1>
       <div class="body-large mb-4">{{ page.hero_story_description | richtext }}</div>
-      <a class="btn btn-normal d-block d-sm-inline" href="{{page.hero_button_url}}">{{ page.hero_button_text }}</a>
+      <a class="btn btn-primary d-block d-sm-inline" href="{{page.hero_button_url}}">{{ page.hero_button_text }}</a>
     </div>
   </div>
   <div class="row">
@@ -85,7 +85,7 @@ <h5 class="mb-2">
   </div>
   <div class="row">
     <div class="col text-center mb-5">
-      <a class="btn btn-ghost" href="/news">View more news</a>
+      <a class="btn btn-secondary" href="/news">View more news</a>
     </div>
   </div>
   <div class="row">
@@ -140,7 +140,7 @@ <h4 class="h4-heading">Trending projects</h4>
 </div>
 <div class="row">
   <div class="col text-center mb-5">
-    <a class="btn btn-ghost mb-4" href="https://www.mozillapulse.org">More from our network</a>
+    <a class="btn btn-secondary mb-4" href="https://www.mozillapulse.org">More from our network</a>
     <a class="cta-link d-block d-md-none" href="https://www.mozillapulse.org/add">Add your project</a>
   </div>
 </div>

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/static/initiatives_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/static/initiatives_page.html
@@ -53,9 +53,9 @@ <h1 class="h1-heading">{{ page.header }}</h1>
       <div class="container">
         <h2 class="h2-heading">{{ section.sectionHeader }}</h2>
         <p class="body-large mb-4">{{ section.sectionCopy }}</p>
-        <a href="{{ section.sectionButtonURL }}" class="btn btn-ghost {% if section.sectionButtonURL2 and section.sectionButtonTitle2 %}mr-2 mb-2{% endif %}">{{ section.sectionButtonTitle }}</a>
+        <a href="{{ section.sectionButtonURL }}" class="btn btn-secondary {% if section.sectionButtonURL2 and section.sectionButtonTitle2 %}mr-2 mb-2{% endif %}">{{ section.sectionButtonTitle }}</a>
         {% if section.sectionButtonURL2 and section.sectionButtonTitle2 %}
-        <a href="{{ section.sectionButtonURL2 }}" class="btn btn-ghost mb-2">{{ section.sectionButtonTitle2 }}</a>
+        <a href="{{ section.sectionButtonURL2 }}" class="btn btn-secondary mb-2">{{ section.sectionButtonTitle2 }}</a>
         {% endif %}
       </div>
     </div>

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/static/participate_page2.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/static/participate_page2.html
@@ -14,7 +14,7 @@
         <h1 class="h1-heading">{{ page.ctaHeroHeader }}</h1>
         <div class="body-large">{{ page.ctaHeroSubhead | richtext }}</div>
         <p class="h6-heading commitment">{{ page.ctaCommitment }}</p>
-        <a class="btn btn-normal" href={{ page.ctaButtonURL }}>{{ page.ctaButtonTitle }}</a>
+        <a class="btn btn-primary" href={{ page.ctaButtonURL }}>{{ page.ctaButtonTitle }}</a>
       </div>
     </div>
   </div>

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/static/styleguide.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/static/styleguide.html
@@ -115,26 +115,6 @@ <h2 class="h1-heading">Colors</h2>
         </div>
       </div>
 
-      <div class="row">
-        <div class="col-sm-6 col-md-3 mb-3">
-          <div class="color-display d-flex flex-column h-100">
-            <div class="color-block w-100 px-2 py-5 yellow"></div>
-            <div class="p-2"><strong>(To be removed)<br/>Yellow ($yellow)</strong>
-              <div class="color-code small">#ffed00</div>
-              <div class="color-code small">rgba(255, 237, 0, 1)</div>
-            </div>
-          </div>
-        </div>
-        <div class="col-sm-6 col-md-3 mb-3">
-          <div class="color-display d-flex flex-column h-100">
-            <div class="color-block w-100 px-2 py-5 dark-yellow"></div>
-            <div class="p-2"><strong>(To be removed)<br/>Dark Yellow ($dark-yellow)</strong>
-              <div class="color-code small">#e7c121</div>
-              <div class="color-code small">rgba(231, 193, 33, 1)</div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div class="row">
         <div class="col-sm-6 col-md-3 mb-3">
           <div class="color-display d-flex flex-column h-100">
@@ -314,17 +294,71 @@ <h3 class="h2-heading mt-5">Dark Theme Anchors</h3>
         <a class="dark-theme" href="">link</a>
       </div>
 
+      <h2 class="h1-heading mt-5">Buttons</h2>
+      <hr class="hr-emphasis">
 
-      <h3 class="h2-heading mt-5">Buttons</h3>
+      <h3 class="h2-heading mt-5">Default</h3>
       <hr />
-      <div class="py-2">
-        <button class="btn btn-ghost">.btn-ghost</button>
+
+      <div class="mb-5">
+        <div class="my-2">
+          <button class="btn btn-primary">.btn-primary on <xmp class="d-inline"><button></xmp></button>
+        </div>
+        <div class="my-2">
+          <a class="btn btn-primary" href="">.btn-primary on <xmp class="d-inline"><a></xmp></a>
+        </div>
       </div>
-      <div class="py-2">
-        <button class="btn btn-normal">.btn-normal</button>
+
+      <div class="mb-5">
+        <div class="my-2">
+          <button class="btn btn-secondary">.btn-secondary on <xmp class="d-inline"><button></xmp></button>
+        </div>
+        <div class="my-2">
+          <a class="btn btn-secondary" href="">.btn-secondary on <xmp class="d-inline"><a></xmp></a>
+          <a class="btn btn-secondary" href="https://example.com">.btn-secondary on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
+        </div>
       </div>
-      <div class="py-2">
-        <button class="btn btn-pop">.btn-pop</button>
+
+      <div>
+        <div class="my-2">
+          <button class="btn btn-pop">.btn-pop on <xmp class="d-inline"><button></xmp></button>
+        </div>
+        <div class="my-2">
+          <a class="btn btn-pop" href="">.btn-pop on <xmp class="d-inline"><a></xmp></a>
+        </div>
+      </div>
+
+      <h3 class="h2-heading mt-5">Dark Theme</h3>
+      <hr />
+
+      <div class="p-3 bg-black">
+        <div class="mb-5">
+          <div class="my-2">
+            <button class="btn btn-primary dark-theme">.btn-primary on <xmp class="d-inline"><button></xmp></button>
+          </div>
+          <div class="my-2">
+            <a class="btn btn-primary dark-theme" href="">.btn-primary on <xmp class="d-inline"><a></xmp></a>
+          </div>
+        </div>
+
+        <div class="mb-5">
+          <div class="my-2">
+            <button class="btn btn-secondary dark-theme">.btn-secondary on <xmp class="d-inline"><button></xmp></button>
+          </div>
+          <div class="my-2">
+            <a class="btn btn-secondary dark-theme" href="">.btn-secondary on <xmp class="d-inline"><a></xmp></a>
+            <a class="btn btn-secondary dark-theme" href="https://example.com">on <xmp class="d-inline my-0 mx-1"><a></xmp> with external link</a>
+          </div>
+        </div>
+
+        <div>
+          <div class="my-2">
+            <button class="btn btn-pop dark-theme">.btn-pop on <xmp class="d-inline"><button></xmp></button>
+          </div>
+          <div class="my-2">
+            <a class="btn btn-pop dark-theme" href="">.btn-pop on <xmp class="d-inline"><a></xmp></a>
+          </div>
+        </div>
       </div>
 
       <h2 class="h1-heading mt-5">Components</h2>

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-cta.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-cta.html
@@ -10,7 +10,7 @@ <h3 class="">{{ title }}</h3>
     {% endif %}
 
     {% if link_url %}
-    <a class="btn btn-ghost" href="{{ link_url }}">{{ link_label }}</a>
+    <a class="btn btn-secondary" href="{{ link_url }}">{{ link_label }}</a>
     {% endif %}
 
     <div class="social-links d-flex">

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-large.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-large.html
@@ -12,6 +12,6 @@
     <h3 class="h2-heading">{{ title }}</h3>
     <div class="body-large">{{ description | richtext }}</div>
     <p class="commitment">{{ commitment }}</p>
-    <a href="{{ link_url }}" class="btn btn-ghost">{{ link_label }}</a>
+    <a href="{{ link_url }}" class="btn btn-secondary">{{ link_label }}</a>
   </div>
 </div>
diff --git a/source/images/glyphs/external.svg b/source/images/glyphs/external.svg
diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.jsx b/source/js/buyers-guide/components/creep-vote/creep-vote.jsx
@@ -214,7 +214,7 @@ export default class CreepVote extends React.Component {
             <button
               id="creep-vote-btn"
               type="submit"
-              className="btn btn-ghost mb-2"
+              className="btn btn-secondary mb-2"
               onClick={() => this.handleSubmitBtnClick()}
             >
               Vote & See Results

diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.scss b/source/js/buyers-guide/components/creep-vote/creep-vote.scss
@@ -21,7 +21,7 @@ $btn-shadow-width: 3px;
 
       color: #bbbbbb;
 
-      &.btn-ghost:hover {
+      &.btn-secondary:hover {
         cursor: auto;
         color: inherit;
         background: inherit;

diff --git a/source/js/components/join/join.jsx b/source/js/components/join/join.jsx
@@ -169,7 +169,7 @@ export default class JoinUs extends React.Component {
                         )}
                     </label>
                     <div>
-                      <button className="btn btn-normal join-btn">
+                      <button className="btn btn-primary join-btn">
                         Sign Up
                       </button>
                     </div>

diff --git a/source/js/components/petition/donation-modal.jsx b/source/js/components/petition/donation-modal.jsx
@@ -90,7 +90,7 @@ class DonationModal extends React.Component {
 
         <div className="text-center">
           <a
-            className="btn btn-normal"
+            className="btn btn-primary"
             href={this.donateURL}
             target="_blank"
             onClick={e => this.userElectedToDonate(e)}

diff --git a/source/js/components/petition/petition.jsx b/source/js/components/petition/petition.jsx
@@ -715,7 +715,7 @@ export default class Petition extends React.Component {
             <div className="mt-3">
               <button
                 disabled={disableFields}
-                className="col-12 btn btn-normal petition-btn"
+                className="col-12 btn btn-primary petition-btn"
               >
                 {get(`Add my name`)}
               </button>

diff --git a/source/js/components/petition/petition.scss b/source/js/components/petition/petition.scss
@@ -36,16 +36,6 @@
     @media (min-width: $bp-lg) {
       display: none;
     }
-
-    .narrow-sticky-button {
-      width: 100%;
-      background: $yellow;
-      color: $black;
-
-      &:hover {
-        background: $dark-yellow;
-      }
-    }
   }
 }
 

diff --git a/source/sass/colors.scss → source/sass/_variables.scss b/source/sass/colors.scss → source/sass/_variables.scss
@@ -1,7 +1,5 @@
 // [TODO] Old colors to be removed soon
 
-$yellow: rgb(255, 237, 0); // #ffed00
-$dark-yellow: rgb(231, 193, 33); // #e7c121
 $green: rgb(183, 212, 63); // #b7d43f
 
 // New standardized colors
@@ -20,3 +18,7 @@ $dark-red: #cc0011;
 $light-blue: #b7b9fa;
 $blue: #595cf3;
 $dark-blue: #0d10bf;
+
+// Font weight
+
+$btn-font-weight: 700;