From 7bff7cf3d9bc84ab79594e861d8157012c1ddfdf Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Tue, 24 Mar 2020 11:43:39 -0700
Subject: [PATCH] Use pennant v2 in checkbox module

---
 src/Nri/Ui/PremiumCheckbox/V6.elm        | 19 +++++++++++++++----
 tests/Spec/Nri/Ui/PremiumCheckbox/V6.elm |  3 +--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/Nri/Ui/PremiumCheckbox/V6.elm b/src/Nri/Ui/PremiumCheckbox/V6.elm
index 177fbbd8..40699e70 100644
--- a/src/Nri/Ui/PremiumCheckbox/V6.elm
+++ b/src/Nri/Ui/PremiumCheckbox/V6.elm
@@ -8,6 +8,11 @@ This module is used when there may or may not be Premium
 content to be "checked"!
 
 
+# Patch changes
+
+  - Use Nri.Ui.Pennant.V2.premiumFlag instead of Nri.Ui.Pennant.V1.premiumFlag
+
+
 # Changes from V5
 
   - Allow checkbox to show pennant, or not, based on bool
@@ -16,10 +21,11 @@ content to be "checked"!
 -}
 
 import Accessibility.Styled as Html exposing (Html)
-import Css exposing (..)
+import Css
 import Html.Styled.Attributes as Attributes exposing (css)
 import Nri.Ui.Checkbox.V5 as Checkbox
-import Nri.Ui.Pennant.V1 exposing (premiumFlag)
+import Nri.Ui.Pennant.V2 exposing (premiumFlag)
+import Nri.Ui.Svg.V1 as Svg
 
 
 {-| A checkbox that should be used for premium content
@@ -43,8 +49,8 @@ view :
 view config =
     Html.div
         [ css
-            [ displayFlex
-            , alignItems center
+            [ Css.displayFlex
+            , Css.alignItems Css.center
             ]
         ]
         [ Checkbox.viewWithLabel
@@ -67,6 +73,11 @@ view config =
             }
         , if config.isPremium then
             premiumFlag
+                |> Svg.withLabel "Premium"
+                |> Svg.withWidth (Css.px 25)
+                |> Svg.withHeight (Css.px 30)
+                |> Svg.withCss [ Css.marginLeft (Css.px 8) ]
+                |> Svg.toHtml
 
           else
             Html.text ""
diff --git a/tests/Spec/Nri/Ui/PremiumCheckbox/V6.elm b/tests/Spec/Nri/Ui/PremiumCheckbox/V6.elm
index 28c51d3c..3b17fb60 100644
--- a/tests/Spec/Nri/Ui/PremiumCheckbox/V6.elm
+++ b/tests/Spec/Nri/Ui/PremiumCheckbox/V6.elm
@@ -91,8 +91,7 @@ spec =
                         , isLocked = False
                         , isPremium = True
                         }
-                        |> Query.find [ Selector.tag "title" ]
-                        |> Query.has [ Selector.text "Premium" ]
+                        |> Query.has [ Selector.attribute (Attributes.attribute "aria-label" "Premium") ]
             , test "is not disabled when disabled = False" <|
                 \() ->
                     premiumView