NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-25 22:53:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use the premium flag svgs

Browse Source
This commit is contained in:
Tessa Kelly 2019-06-03 17:08:22 -07:00
parent 991e7eb985
commit a706c83927
1 changed files with 18 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/Nri/Ui/PremiumCheckbox/V5.elm
View File

@ -6,8 +6,9 @@ module Nri.Ui.PremiumCheckbox.V5 exposing (PremiumConfig, premium, Pennant(..))
-} -}
import Accessibility.Styled as Html import Accessibility.Styled as Html exposing (Html)
import Css exposing (..) import Css exposing (..)
import Html.Styled exposing (fromUnstyled)
import Html.Styled.Attributes as Attributes exposing (css) import Html.Styled.Attributes as Attributes exposing (css)
import Nri.Ui.Checkbox.V5 as Checkbox import Nri.Ui.Checkbox.V5 as Checkbox
import Svg exposing (..) import Svg exposing (..)
@ -43,7 +44,7 @@ type Pennant
{-| A checkbox that should be used for premium content {-| A checkbox that should be used for premium content
-} -}
premium : PremiumConfig msg -> Html.Html msg premium : PremiumConfig msg -> Html msg
premium config = premium config =
Html.div Html.div
[ css [ css
@ -70,35 +71,18 @@ premium config =
Checkbox.Square Checkbox.Square
} }
, case config.pennant of , case config.pennant of
Just pennant -> Just Premium ->
Html.div premiumFlag
[ Attributes.class "premium-checkbox-V5__PremiumClass"
, css
[ property "content" "''"
, Css.display inlineBlock
, Css.width (px 26)
, Css.height (px 24)
, marginLeft (px 8)
-- , backgroundImage Just PremiumWithWriting ->
-- (case pennant of premiumWithWritingFlag
-- Premium ->
-- assets.iconPremiumFlag_svg
-- PremiumWithWriting ->
-- assets.iconPremiumWithWritingFlag_svg
-- )
, backgroundRepeat noRepeat
, backgroundPosition center
]
]
[]
Nothing -> Nothing ->
Html.text "" Html.text ""
] ]
premiumFlag : Svg msg premiumFlag : Html msg
premiumFlag = premiumFlag =
svg svg
[ version "1.1" [ version "1.1"
@ -106,9 +90,10 @@ premiumFlag =
, x "0px" , x "0px"
, y "0px" , y "0px"
, Svg.Attributes.viewBox "0 0 25 19" , Svg.Attributes.viewBox "0 0 25 19"
, Svg.Attributes.style "enable-background:new 0 0 25 19;" , Svg.Attributes.style "enable-background:new 0 0 25 19;margin-left: 8px;"
] ]
[ Svg.style [] [ text " .st0{fill:#FEC709;} .st1{fill:#146AFF;} " ] [ Svg.title [] [ text "Premium" ]
, Svg.style [] [ text " .st0{fill:#FEC709;} .st1{fill:#146AFF;} " ]
, g [ id "Page-1" ] , g [ id "Page-1" ]
[ g [ id "icon_x2F_p-mini-pennant-yellow", Svg.Attributes.transform "translate(0.000000, -3.000000)" ] [ g [ id "icon_x2F_p-mini-pennant-yellow", Svg.Attributes.transform "translate(0.000000, -3.000000)" ]
[ g [ g
@ -131,16 +116,19 @@ premiumFlag =
] ]
] ]
] ]
|> fromUnstyled
premiumWithWriting : Svg msg premiumWithWritingFlag : Html msg
premiumWithWriting = premiumWithWritingFlag =
svg svg
[ Svg.Attributes.width "25" [ Svg.Attributes.width "25"
, Svg.Attributes.height "18" , Svg.Attributes.height "18"
, Svg.Attributes.viewBox "0 0 25 18" , Svg.Attributes.viewBox "0 0 25 18"
, Svg.Attributes.style "margin-left: 8px;"
] ]
[ g [ Svg.title [] [ text "Premium with Writing" ]
, g
[ Svg.Attributes.fill "none" [ Svg.Attributes.fill "none"
, fillRule "evenodd" , fillRule "evenodd"
] ]
@ -156,3 +144,4 @@ premiumWithWriting =
[] []
] ]
] ]
|> fromUnstyled