diff --git a/elm.json b/elm.json index f734a24a..5a786133 100644 --- a/elm.json +++ b/elm.json @@ -50,6 +50,7 @@ "Nri.Ui.PremiumCheckbox.V2", "Nri.Ui.PremiumCheckbox.V3", "Nri.Ui.PremiumCheckbox.V4", + "Nri.Ui.PremiumCheckbox.V5", "Nri.Ui.SegmentedControl.V6", "Nri.Ui.SegmentedControl.V7", "Nri.Ui.Select.V5", diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm new file mode 100644 index 00000000..6186afe6 --- /dev/null +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -0,0 +1,150 @@ +module Nri.Ui.PremiumCheckbox.V5 exposing (view, Pennant(..)) + +{-| + +@docs view, Pennant + + +# Changes from V4 + + - inlines the Config + - renames render function from `premium` to `view` + - removes dependency on Assets + +-} + +import Accessibility.Styled as Html exposing (Html) +import Css exposing (..) +import Html.Styled exposing (fromUnstyled) +import Html.Styled.Attributes as Attributes exposing (css) +import Nri.Ui.Checkbox.V5 as Checkbox +import Svg exposing (..) +import Svg.Attributes exposing (..) + + +{-| Premium is the yellow "P" pennant +PremiumWithWriting is the yellow "P+" pennant +-} +type Pennant + = Premium + | PremiumWithWriting + + +{-| A checkbox that should be used for premium content + + - `onChange`: A message for when the user toggles the checkbox + - `onLockedClick`: A message for when the user clicks a checkbox they don't have PremiumLevel for. + If you get this message, you should show an `Nri.Ui.Premium.Model.view` + +-} +view : + { label : String + , id : String + , selected : Checkbox.IsSelected + , disabled : Bool + , isLocked : Bool + , pennant : Pennant + , onChange : Bool -> msg + , onLockedClick : msg + } + -> Html msg +view config = + Html.div + [ css + [ displayFlex + , alignItems center + ] + ] + [ Checkbox.viewWithLabel + { identifier = config.id + , label = config.label + , setterMsg = + if config.isLocked then + \_ -> config.onLockedClick + + else + config.onChange + , selected = config.selected + , disabled = config.disabled + , theme = + if config.isLocked then + Checkbox.Locked + + else + Checkbox.Square + } + , case config.pennant of + Premium -> + premiumFlag + + PremiumWithWriting -> + premiumWithWritingFlag + ] + + +premiumFlag : Html msg +premiumFlag = + svg + [ version "1.1" + , id "Layer_1" + , Svg.Attributes.width "25" + , Svg.Attributes.height "19" + , Svg.Attributes.viewBox "0 0 25 19" + , Svg.Attributes.style "margin-left: 8px;" + ] + [ Svg.title [] [ text "Premium" ] + , Svg.style [] [ text " .premium-flag-st0{fill:#FEC709;} .premium-flag-st1{fill:#146AFF;} " ] + , g [ id "Page-1" ] + [ g + [ id "icon_x2F_p-mini-pennant-yellow" + , Svg.Attributes.transform "translate(0.000000, -3.000000)" + ] + [ g + [ id "Group" + , Svg.Attributes.transform "translate(0.000000, 3.750000)" + ] + [ polygon + [ id "Fill-2" + , class "premium-flag-st0" + , points "12.7,0 0,0 0,13.8 0,15.8 0,17.5 7.3,17.5 24.8,17.5 19.4,8.1 24.8,0 " + ] + [] + , Svg.path + [ id "P" + , class "premium-flag-st1" + , d "M7.5,3.8h4.2c1.1,0,1.9,0.3,2.5,0.8s0.9,1.2,0.9,2.1s-0.3,1.6-0.9,2.1c-0.6,0.5-1.4,0.8-2.5,0.8H9.3 v4.1H7.5V3.8z M11.5,8.1c0.6,0,1.1-0.1,1.4-0.4c0.3-0.3,0.5-0.6,0.5-1.1c0-0.5-0.2-0.9-0.5-1.1c-0.3-0.3-0.8-0.4-1.4-0.4H9.3v3 H11.5z" + ] + [] + ] + ] + ] + ] + |> fromUnstyled + + +premiumWithWritingFlag : Html msg +premiumWithWritingFlag = + svg + [ Svg.Attributes.width "25" + , Svg.Attributes.height "18" + , Svg.Attributes.viewBox "0 0 25 18" + , Svg.Attributes.style "margin-left: 8px;" + ] + [ Svg.title [] [ text "Premium with Writing" ] + , g + [ Svg.Attributes.fill "none" + , fillRule "evenodd" + ] + [ Svg.path + [ Svg.Attributes.fill "#FEC709" + , d "M12.662 0H0v17.5h24.777l-5.384-9.423L24.777 0z" + ] + [] + , Svg.path + [ Svg.Attributes.fill "#146AFF" + , d "M2.5 3.75h4.249c1.054 0 1.874.254 2.461.763.587.509.88 1.203.88 2.083 0 .88-.296 1.577-.887 2.09-.591.514-1.41.77-2.454.77H4.274v4.084H2.5V3.75zm4.043 4.331c.614 0 1.079-.126 1.395-.378.316-.252.474-.616.474-1.093 0-.486-.155-.855-.467-1.107-.312-.252-.78-.378-1.402-.378h-2.27v2.956h2.27zM12.85 7h1.31c.152 0 .278.127.278.288V9.57h2.283c.152 0 .279.127.279.28v1.31a.281.281 0 0 1-.279.278h-2.283v2.283a.281.281 0 0 1-.278.279h-1.31a.281.281 0 0 1-.28-.279v-2.283h-2.282A.283.283 0 0 1 10 11.16V9.85c0-.153.127-.28.288-.28h2.282V7.288c0-.161.127-.288.28-.288z" + ] + [] + ] + ] + |> fromUnstyled diff --git a/src/Nri/Ui/SpriteSheet.elm b/src/Nri/Ui/SpriteSheet.elm index 1949291b..bfea904c 100644 --- a/src/Nri/Ui/SpriteSheet.elm +++ b/src/Nri/Ui/SpriteSheet.elm @@ -50,8 +50,12 @@ checkmark = , width "100%" , height "100%" ] - [ Svg.style [] [ Svg.text " .st0{fill:currentcolor;} " ] - , Svg.path [ id "check-white", class "st0", d "M7.6,17.1c-0.5,0-1-0.2-1.4-0.6l-5.6-5.4c-0.8-0.8-0.8-2-0.1-2.8c0.8-0.8,2-0.8,2.8-0.1l4.1,4 L18.2,0.7c0.8-0.8,2-0.9,2.8-0.1s0.9,2,0.1,2.8l-12,13C8.7,16.9,8.2,17.1,7.6,17.1C7.7,17.1,7.6,17.1,7.6,17.1" ] [] + [ Svg.path + [ id "check-white" + , fill "currentcolor" + , d "M7.6,17.1c-0.5,0-1-0.2-1.4-0.6l-5.6-5.4c-0.8-0.8-0.8-2-0.1-2.8c0.8-0.8,2-0.8,2.8-0.1l4.1,4 L18.2,0.7c0.8-0.8,2-0.9,2.8-0.1s0.9,2,0.1,2.8l-12,13C8.7,16.9,8.2,17.1,7.6,17.1C7.7,17.1,7.6,17.1,7.6,17.1" + ] + [] ] |> fromUnstyled |> NriSvg.fromHtml @@ -70,7 +74,7 @@ bulb = , width "100%" , height "100%" ] - [ Svg.style [] [ Svg.text " .st0{fill:#FEC709;} " ] + [ Svg.style [] [ Svg.text ".blub-st0{fill:#FEC709;} " ] , g [ id "feedback" ] [ g [ id "dot-tip", transform "translate(-261.000000, -371.000000)" ] [ g @@ -79,18 +83,78 @@ bulb = ] [ g [ id "icon_x2F_bulb-yellow", transform "translate(0.859754, 0.051946)" ] [ g [ id "Group", transform "translate(0.461538, 0.000000)" ] - [ Svg.path [ id "Fill-1", class "st0", d "M21.6,12.5H19c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6c0.3,0,0.6-0.3,0.6-0.6 S21.9,12.5,21.6,12.5z" ] [] - , Svg.path [ id "Fill-2", class "st0", d "M18.1,9.3c0.1,0,0.2,0,0.3-0.1l2.3-1.4C20.9,7.7,21,7.3,20.8,7c-0.2-0.3-0.5-0.4-0.8-0.2 l-2.3,1.4c-0.2,0.1-0.3,0.4-0.3,0.7C17.6,9.1,17.8,9.3,18.1,9.3L18.1,9.3z" ] [] - , Svg.path [ id "Fill-3", class "st0", d "M17.1,2c-0.3-0.2-0.6-0.1-0.8,0.2l-1.5,2.2h0c-0.1,0.1-0.1,0.3-0.1,0.5c0,0.2,0.1,0.3,0.2,0.4 c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.3-0.1,0.4-0.3l1.5-2.2C17.4,2.6,17.4,2.2,17.1,2L17.1,2z" ] [] - , Svg.path [ id "Fill-4", class "st0", d "M6.7,5.4c0.2,0,0.4-0.1,0.5-0.3c0.1-0.2,0.1-0.4,0-0.6L5.7,2.2v0C5.6,2.1,5.4,2,5.3,1.9 C5.1,1.9,5,1.9,4.9,2C4.7,2.1,4.6,2.3,4.6,2.4c0,0.2,0,0.3,0.1,0.4l1.5,2.2C6.3,5.3,6.5,5.4,6.7,5.4L6.7,5.4z" ] [] - , Svg.path [ id "Fill-5", class "st0", d "M4,8.2L1.7,6.8C1.5,6.7,1.1,6.8,1,7C0.8,7.3,0.9,7.6,1.2,7.8l2.3,1.4c0.1,0.1,0.3,0.1,0.4,0.1 C4,9.2,4.1,9.1,4.2,9c0.1-0.1,0.1-0.3,0.1-0.5C4.2,8.4,4.1,8.2,4,8.2L4,8.2z" ] [] - , Svg.path [ id "Fill-6", class "st0", d "M20.6,17.8l-2.2-1.4c-0.3-0.2-0.6-0.1-0.8,0.2c-0.2,0.3-0.1,0.6,0.2,0.8l2.3,1.4 c0.3,0.1,0.6,0,0.7-0.2C21,18.3,20.9,18,20.6,17.8L20.6,17.8z" ] [] - , Svg.path [ id "Fill-7", class "st0", d "M3.5,16.4l-2.3,1.4h0C1.1,17.8,1,18,0.9,18.1c0,0.2,0,0.3,0.1,0.5c0.1,0.1,0.2,0.2,0.4,0.3 c0.1,0,0.3,0,0.4-0.1L4,17.4c0.3-0.2,0.3-0.5,0.2-0.8C4.1,16.4,3.7,16.3,3.5,16.4L3.5,16.4z" ] [] - , Svg.path [ id "Fill-8", class "st0", d "M3.7,13.1c0-0.3-0.3-0.6-0.6-0.6H0.6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6 c0.1,0,0.3-0.1,0.4-0.2C3.7,13.4,3.7,13.2,3.7,13.1L3.7,13.1z" ] [] - , Svg.path [ id "Fill-9", class "st0", d "M10.7,3.9c0.3,0,0.6-0.3,0.6-0.6V0.6C11.3,0.3,11,0,10.7,0c-0.3,0-0.6,0.3-0.6,0.6v2.7 c0,0.2,0.1,0.3,0.2,0.4S10.6,3.9,10.7,3.9L10.7,3.9z" ] [] - , Svg.path [ id "Fill-10", class "st0", d "M13.4,20.2H8.9c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6h4.5c0.3,0,0.6-0.3,0.6-0.6 C14,20.5,13.7,20.2,13.4,20.2z" ] [] - , Svg.path [ id "Fill-11", class "st0", d "M10,23.5v0.3c0,0.4,0.3,0.7,0.6,0.7h0.9c0.4,0,0.6-0.3,0.6-0.7v-0.3c0.7,0,1.3-0.7,1.3-1.4 H8.8C8.9,22.8,9.4,23.4,10,23.5L10,23.5z" ] [] - , Svg.path [ id "Fill-12", class "st0", d "M11.2,6.7c-3.1,0-5.6,2.7-5.6,6v0c0,0.8,0.1,1.5,0.4,2.3c0,0.1,0.1,0.2,0.1,0.3h0 c0.2,0.6,0.6,1.1,1,1.6l1.4,2.3h5.4l1.4-2.3c0.4-0.5,0.7-1,1-1.6c0-0.1,0.1-0.2,0.1-0.3h0c0.3-0.7,0.4-1.5,0.4-2.3 C16.8,9.4,14.3,6.7,11.2,6.7L11.2,6.7z M10.9,9c-0.6,0-1.2,0.2-1.7,0.5c-1.1,0.7-1.6,1.9-1.7,3.5v0c0,0.3-0.3,0.6-0.6,0.6 c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4c0-2.7,1.3-4,2.3-4.6c0.7-0.4,1.4-0.6,2.2-0.7c0.3,0,0.6,0.3,0.6,0.6 C11.5,8.7,11.2,9,10.9,9L10.9,9z" ] [] + [ Svg.path + [ id "Fill-1" + , class "blub-st0" + , d "M21.6,12.5H19c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6c0.3,0,0.6-0.3,0.6-0.6 S21.9,12.5,21.6,12.5z" + ] + [] + , Svg.path + [ id "Fill-2" + , class "blub-st0" + , d "M18.1,9.3c0.1,0,0.2,0,0.3-0.1l2.3-1.4C20.9,7.7,21,7.3,20.8,7c-0.2-0.3-0.5-0.4-0.8-0.2 l-2.3,1.4c-0.2,0.1-0.3,0.4-0.3,0.7C17.6,9.1,17.8,9.3,18.1,9.3L18.1,9.3z" + ] + [] + , Svg.path + [ id "Fill-3" + , class "blub-st0" + , d "M17.1,2c-0.3-0.2-0.6-0.1-0.8,0.2l-1.5,2.2h0c-0.1,0.1-0.1,0.3-0.1,0.5c0,0.2,0.1,0.3,0.2,0.4 c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.3-0.1,0.4-0.3l1.5-2.2C17.4,2.6,17.4,2.2,17.1,2L17.1,2z" + ] + [] + , Svg.path + [ id "Fill-4" + , class "blub-st0" + , d "M6.7,5.4c0.2,0,0.4-0.1,0.5-0.3c0.1-0.2,0.1-0.4,0-0.6L5.7,2.2v0C5.6,2.1,5.4,2,5.3,1.9 C5.1,1.9,5,1.9,4.9,2C4.7,2.1,4.6,2.3,4.6,2.4c0,0.2,0,0.3,0.1,0.4l1.5,2.2C6.3,5.3,6.5,5.4,6.7,5.4L6.7,5.4z" + ] + [] + , Svg.path + [ id "Fill-5" + , class "blub-st0" + , d "M4,8.2L1.7,6.8C1.5,6.7,1.1,6.8,1,7C0.8,7.3,0.9,7.6,1.2,7.8l2.3,1.4c0.1,0.1,0.3,0.1,0.4,0.1 C4,9.2,4.1,9.1,4.2,9c0.1-0.1,0.1-0.3,0.1-0.5C4.2,8.4,4.1,8.2,4,8.2L4,8.2z" + ] + [] + , Svg.path + [ id "Fill-6" + , class "blub-st0" + , d "M20.6,17.8l-2.2-1.4c-0.3-0.2-0.6-0.1-0.8,0.2c-0.2,0.3-0.1,0.6,0.2,0.8l2.3,1.4 c0.3,0.1,0.6,0,0.7-0.2C21,18.3,20.9,18,20.6,17.8L20.6,17.8z" + ] + [] + , Svg.path + [ id "Fill-7" + , class "blub-st0" + , d "M3.5,16.4l-2.3,1.4h0C1.1,17.8,1,18,0.9,18.1c0,0.2,0,0.3,0.1,0.5c0.1,0.1,0.2,0.2,0.4,0.3 c0.1,0,0.3,0,0.4-0.1L4,17.4c0.3-0.2,0.3-0.5,0.2-0.8C4.1,16.4,3.7,16.3,3.5,16.4L3.5,16.4z" + ] + [] + , Svg.path + [ id "Fill-8" + , class "blub-st0" + , d "M3.7,13.1c0-0.3-0.3-0.6-0.6-0.6H0.6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6 c0.1,0,0.3-0.1,0.4-0.2C3.7,13.4,3.7,13.2,3.7,13.1L3.7,13.1z" + ] + [] + , Svg.path + [ id "Fill-9" + , class "blub-st0" + , d "M10.7,3.9c0.3,0,0.6-0.3,0.6-0.6V0.6C11.3,0.3,11,0,10.7,0c-0.3,0-0.6,0.3-0.6,0.6v2.7 c0,0.2,0.1,0.3,0.2,0.4S10.6,3.9,10.7,3.9L10.7,3.9z" + ] + [] + , Svg.path + [ id "Fill-10" + , class "blub-st0" + , d "M13.4,20.2H8.9c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6h4.5c0.3,0,0.6-0.3,0.6-0.6 C14,20.5,13.7,20.2,13.4,20.2z" + ] + [] + , Svg.path + [ id "Fill-11" + , class "blub-st0" + , d "M10,23.5v0.3c0,0.4,0.3,0.7,0.6,0.7h0.9c0.4,0,0.6-0.3,0.6-0.7v-0.3c0.7,0,1.3-0.7,1.3-1.4 H8.8C8.9,22.8,9.4,23.4,10,23.5L10,23.5z" + ] + [] + , Svg.path + [ id "Fill-12" + , class "blub-st0" + , d "M11.2,6.7c-3.1,0-5.6,2.7-5.6,6v0c0,0.8,0.1,1.5,0.4,2.3c0,0.1,0.1,0.2,0.1,0.3h0 c0.2,0.6,0.6,1.1,1,1.6l1.4,2.3h5.4l1.4-2.3c0.4-0.5,0.7-1,1-1.6c0-0.1,0.1-0.2,0.1-0.3h0c0.3-0.7,0.4-1.5,0.4-2.3 C16.8,9.4,14.3,6.7,11.2,6.7L11.2,6.7z M10.9,9c-0.6,0-1.2,0.2-1.7,0.5c-1.1,0.7-1.6,1.9-1.7,3.5v0c0,0.3-0.3,0.6-0.6,0.6 c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4c0-2.7,1.3-4,2.3-4.6c0.7-0.4,1.4-0.6,2.2-0.7c0.3,0,0.6,0.3,0.6,0.6 C11.5,8.7,11.2,9,10.9,9L10.9,9z" + ] + [] ] ] ] diff --git a/styleguide-app/Assets.elm b/styleguide-app/Assets.elm index 80f821bd..afecb3bf 100644 --- a/styleguide-app/Assets.elm +++ b/styleguide-app/Assets.elm @@ -32,8 +32,6 @@ type alias Assets = , help : String , hint_png : Asset , iconFlag_png : Asset - , iconPremiumFlag_svg : Asset - , iconPremiumWithWritingFlag_svg : Asset , icons_equals_svg : Asset , icons_xBlue_svg : Asset , key : String @@ -104,8 +102,6 @@ assets = , help = "icon-help" , hint_png = Asset "assets/images/hint.png" , iconFlag_png = Asset "assets/images/icon-flag.png" - , iconPremiumFlag_svg = Asset "assets/images/icon_premium_flag.svg" - , iconPremiumWithWritingFlag_svg = Asset "assets/images/icon_premium_writing_flag.svg" , icons_equals_svg = Asset "assets/images/equals.svg" , icons_xBlue_svg = Asset "assets/images/x-blue.svg" , key = "icon-key" diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 27f8bb1e..97551040 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -6,14 +6,13 @@ module Examples.Checkbox exposing (Msg, State, example, init, update) -} -import Assets exposing (assets) import Css import Html.Styled as Html exposing (..) import Html.Styled.Attributes exposing (css) import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) import Nri.Ui.Checkbox.V5 as Checkbox import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) -import Nri.Ui.PremiumCheckbox.V4 as PremiumCheckbox +import Nri.Ui.PremiumCheckbox.V5 as PremiumCheckbox import Set exposing (Set) @@ -80,7 +79,7 @@ update msg state = type alias PremiumExampleConfig = { disabled : Bool , teacherPremiumLevel : PremiumLevel - , pennant : Maybe PremiumCheckbox.Pennant + , pennant : PremiumCheckbox.Pennant } @@ -176,8 +175,7 @@ viewPremiumCheckboxes : State -> Html Msg viewPremiumCheckboxes state = let checkbox config = - PremiumCheckbox.premium - assets + PremiumCheckbox.view { label = config.label , id = "premium-checkbox-" ++ config.label , selected = @@ -194,10 +192,24 @@ viewPremiumCheckboxes state = } in Html.div [] - [ checkbox { label = "Identify Adjectives 1 (Free)", disabled = False, isLocked = False, pennant = Nothing } - , checkbox { label = "Identify Adjectives 2 (Premium)", disabled = False, isLocked = False, pennant = Just PremiumCheckbox.Premium } - , checkbox { label = "Revising Wordy Phrases 1 (Writing)", disabled = False, isLocked = True, pennant = Just PremiumCheckbox.PremiumWithWriting } - , checkbox { label = "Revising Wordy Phrases 2 (Writing) (Disabled)", disabled = True, isLocked = True, pennant = Just PremiumCheckbox.PremiumWithWriting } + [ checkbox + { label = "Identify Adjectives 2 (Premium)" + , disabled = False + , isLocked = False + , pennant = PremiumCheckbox.Premium + } + , checkbox + { label = "Revising Wordy Phrases 1 (Writing)" + , disabled = False + , isLocked = True + , pennant = PremiumCheckbox.PremiumWithWriting + } + , checkbox + { label = "Revising Wordy Phrases 2 (Writing) (Disabled)" + , disabled = True + , isLocked = True + , pennant = PremiumCheckbox.PremiumWithWriting + } ] diff --git a/styleguide-app/assets/images/icon_premium_flag.svg b/styleguide-app/assets/images/icon_premium_flag.svg deleted file mode 100644 index 031e291b..00000000 --- a/styleguide-app/assets/images/icon_premium_flag.svg +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3bcb4a83ca4e7c4739748a81d5f56fbedf9d9925fe1db8e9fe2e4312c3fa21d2 -size 1069 diff --git a/styleguide-app/assets/images/icon_premium_writing_flag.svg b/styleguide-app/assets/images/icon_premium_writing_flag.svg deleted file mode 100644 index 6dd6d2c3..00000000 --- a/styleguide-app/assets/images/icon_premium_writing_flag.svg +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:16221aee450224605f8a4aae798ed2ebbba3698fac2dc101d0132729e8f5cdce -size 817