Keep the premium flag around

src/Nri/Ui/Checkbox/V3.elm

@@ -122,13 +122,13 @@ buildCheckbox assets modifierClasses model labelContent =
                         , display inlineBlock
                         , case model.selected of
                             Selected ->
-                                backgroundImage (assetPathUrl assets.checkboxChecked_svg)
+                                backgroundImage assets.checkboxChecked_svg
 
                             NotSelected ->
-                                backgroundImage (assetPathUrl assets.checkboxUnchecked_svg)
+                                backgroundImage assets.checkboxUnchecked_svg
 
                             PartiallySelected ->
-                                backgroundImage (assetPathUrl assets.checkboxCheckedPartially_svg)
+                                backgroundImage assets.checkboxCheckedPartially_svg
                         , Css.batch <|
                             case colorTheme of
                                 Gray ->
@@ -145,7 +145,7 @@ buildCheckbox assets modifierClasses model labelContent =
                 { containerClasses = toClassList (modifierClasses ++ [ "LockOnInsideClass" ])
                 , labelStyles =
                     css
-                        [ backgroundImage (assetPathUrl assets.checkboxLockOnInside_svg)
+                        [ backgroundImage assets.checkboxLockOnInside_svg
                         , backgroundRepeat noRepeat
                         , backgroundSize (px 24)
                         , color Colors.gray20
@@ -168,7 +168,7 @@ buildCheckbox assets modifierClasses model labelContent =
                 }
 
             Premium ->
-                { containerClasses = toClassList (modifierClasses ++ [ "SquareClass", "PremiumClass" ])
+                { containerClasses = toClassList (modifierClasses ++ [ "SquareClass" ])
                 , labelStyles = premiumLabelStyles assets.iconPremiumFlag_svg model
                 , labelClasses = labelClass model.selected
                 , labelContent = labelContent
@@ -289,7 +289,7 @@ premiumLabelStyles image model =
                 , width (px 26)
                 , height (px 24)
                 , marginLeft (px 8)
-                , backgroundImage (assetPathUrl image)
+                , backgroundImage image
                 , backgroundRepeat noRepeat
                 , backgroundPosition Css.center
                 ]
@@ -302,16 +302,6 @@ premiumLabelStyles image model =
         )
 
 
-assetPathUrl : Asset -> BackgroundImage {}
-assetPathUrl =
-    url << Nri.Ui.AssetPath.Css.url
-
-
-indeterminateAttr : RootHtml.Attribute msg
-indeterminateAttr =
-    RootAttributes.property "indeterminate" (Json.Encode.bool True)
-
-
 {-| -}
 type Theme
     = Square ColorTheme
@@ -333,7 +323,11 @@ type alias Assets r =
         , checkboxChecked_svg : Asset
         , checkboxCheckedPartially_svg : Asset
         , iconPremiumUnlocked_png : Asset
-        , iconPremiumLocked_png : Asset
         , checkboxLockOnInside_svg : Asset
         , iconPremiumFlag_svg : Asset
     }
+
+
+backgroundImage =
+    Nri.Ui.AssetPath.Css.url
+        >> property "background-image"

src/Nri/Ui/PremiumCheckbox/V1.elm

@@ -7,7 +7,10 @@ module Nri.Ui.PremiumCheckbox.V1 exposing (PremiumConfig, premium)
 -}
 
 import Accessibility.Styled as Html
+import Css exposing (..)
+import Html.Styled.Attributes as Attributes exposing (css)
 import Nri.Ui.AssetPath exposing (Asset(..))
+import Nri.Ui.AssetPath.Css
 import Nri.Ui.Checkbox.V3 as Checkbox
 import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
 
@@ -55,19 +58,41 @@ premium assets config =
             else
                 Checkbox.Square Checkbox.Default
     in
-    Checkbox.viewWithLabel assets
+    Html.span []
-        { identifier = config.id
+        [ Checkbox.viewWithLabel assets
-        , label = config.label
+            { identifier = config.id
-        , setterMsg =
+            , label = config.label
-            if isLocked then
+            , setterMsg =
-                \_ -> config.onLockedClick
+                if isLocked then
-            else
+                    \_ -> config.onLockedClick
-                config.onChange
+                else
-        , selected = config.selected
+                    config.onChange
-        , disabled = config.disabled
+            , selected = config.selected
-        , theme = theme
+            , disabled = config.disabled
-        , noOpMsg = config.noOpMsg
+            , theme = theme
-        }
+            , noOpMsg = config.noOpMsg
+            }
+        , if
+            (isLocked && config.showFlagWhenLocked)
+                || (not isLocked && config.contentPremiumLevel /= Free)
+          then
+            Html.div
+                [ Attributes.class "checkbox-PremiumClass"
+                , css
+                    [ property "content" "''"
+                    , display inlineBlock
+                    , width (px 26)
+                    , height (px 24)
+                    , marginLeft (px 8)
+                    , backgroundImage assets.iconPremiumFlag_svg
+                    , backgroundRepeat noRepeat
+                    , backgroundPosition Css.center
+                    ]
+                ]
+                []
+          else
+            Html.text ""
+        ]
 
 
 {-| The assets used in this module.
@@ -82,3 +107,8 @@ type alias Assets r =
         , checkboxLockOnInside_svg : Asset
         , iconPremiumFlag_svg : Asset
     }
+
+
+backgroundImage =
+    Nri.Ui.AssetPath.Css.url
+        >> property "background-image"