donation modal followups (#1701)

* followups to the donate modal look and feel, and tests

env.default

@@ -55,6 +55,9 @@ CSP_MEDIA_SRC="'self'"
 CSP_CHILD_SRC='self' https://www.youtube.com/ https://s3.amazonaws.com/
 CSP_FORM_ACTION='self' https://www.mozilla.org/en-US/newsletter/
 
+# TEST ENVIRONMENT VALUES
+
+PETITION_TEST_CAMPAIGN_ID=""
 
 # REVIEW APPS SLACK BOT
 

network-api/networkapi/management/commands/load_fake_data.py

@@ -34,7 +34,8 @@
     CampaignPageFactory,
     HomepageFeaturedNewsFactory,
     HomepageFeaturedHighlightsFactory,
-    ParticipatePageFactory
+    ParticipatePageFactory,
+    DonationModalsFactory,
 )
 from networkapi.buyersguide.factory import ProductFactory
 
@@ -111,7 +112,7 @@ def handle(self, *args, **options):
         print('Generating five InternetHealthIssue')
         [InternetHealthIssue.objects.get_or_create(name=e) for e in internet_health_issues]
 
-        print('Generating News')
+        print('Generating Fake News')
         generate_fake_data(NewsFactory, 10)
 
         print('Generating highlights')
@@ -217,7 +218,10 @@ def handle(self, *args, **options):
             campaign_namespace = MiniSiteNameSpaceFactory.create(parent=home_page, title='campaigns', live=False)
 
         print('Generating Campaign Pages under namespace')
-        [CampaignPageFactory.create(parent=campaign_namespace) for i in range(5)]
+        campaigns = [CampaignPageFactory.create(parent=campaign_namespace) for i in range(5)]
+
+        print('Generating Donation Modals for Campaign Pages')
+        [DonationModalsFactory.create(page=campaign) for campaign in campaigns]
 
         try:
             wagtailpages_models.CampaignPage.objects.get(title='single-page')

network-api/networkapi/settings.py

@@ -47,6 +47,7 @@
     FILEBROWSER_DIRECTORY=(str, ''),
     HEROKU_APP_NAME=(str, ''),
     NETWORK_SITE_URL=(str, ''),
+    PETITION_TEST_CAMPAIGN_ID=(str, ''),
     PULSE_API_DOMAIN=(str, ''),
     PULSE_DOMAIN=(str, ''),
     SET_HSTS=bool,
@@ -485,3 +486,6 @@ def show_toolbar(request):
 
 # REQUIRED FOR AS LONG AS MEZZANINE HAS NOT BEEN FULLY PURGED
 TESTING = False
+
+# Used by load_fake_data to ensure we have petitions that actually work
+PETITION_TEST_CAMPAIGN_ID = env('PETITION_TEST_CAMPAIGN_ID')

network-api/networkapi/wagtailpages/factory.py

@@ -1,3 +1,4 @@
+from django.conf import settings
 from factory.django import DjangoModelFactory
 from wagtail_factories import (
     PageFactory,
@@ -39,6 +40,23 @@ class PetitionFactory(CTAFactory):
     class Meta:
         model = networkapi.wagtailpages.models.Petition
 
+    campaign_id = settings.PETITION_TEST_CAMPAIGN_ID
+
+
+class DonationModalFactory(DjangoModelFactory):
+    class Meta:
+        model = networkapi.wagtailpages.donation_modal.DonationModal
+
+    name = Faker('text', max_nb_chars=20)
+
+
+class DonationModalsFactory(DjangoModelFactory):
+    # note: plural!
+    class Meta:
+        model = networkapi.wagtailpages.donation_modal.DonationModals
+
+    donation_modal = SubFactory(DonationModalFactory)
+
 
 class SignupFactory(CTAFactory):
     class Meta:

source/js/components/petition/donation-modal.jsx

@@ -66,7 +66,7 @@ class DonationModal extends React.Component {
     return (
       <div className="modal-content" tabIndex="0">
         <div className="modal-header text-right">
-          <button className="close" data-dismiss="modal" aria-label="Close" onClick={e => this.props.onClose(e)}>
+          <button className="close" data-dismiss="modal" aria-label="Close" onClick={e => this.props.onClose(e)} tabIndex="0">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
@@ -81,13 +81,13 @@ class DonationModal extends React.Component {
         </div>
 
         <div className="text-center">
-          <a className="btn btn-normal" href={this.donateURL} target="_blank" onClick={e => this.userElectedToDonate(e)}>
+          <a className="btn btn-normal" href={this.donateURL} target="_blank" onClick={e => this.userElectedToDonate(e)} tabIndex="0">
             {this.props.donateText}
           </a>
         </div>
 
         <div className="text-center">
-          <button className="text dismiss" data-dismiss="modal" onClick={e => this.userElectedToShare(e)}>
+          <button className="text dismiss" data-dismiss="modal" onClick={e => this.userElectedToShare(e)} tabIndex="0">
             {this.props.shareText}
           </button>
         </div>

source/js/components/petition/donation-modal.scss

@@ -30,7 +30,11 @@
       padding: 0.5rem 0.5rem 0 0;
 
       .close {
-        float: right;
+        position: absolute;
+        right: 0.5rem;
+        width: 44px;
+        height: 44px;
+        text-align: center;
         font-size: 2.5rem;
         font-weight: normal;
         line-height: 1;
@@ -42,7 +46,7 @@
 
     .modal-body {
       margin-top: 0;
-      padding-top: 0;
+      padding-top: 1rem;
     }
 
     .modal-footer {