From 88855afc16f14c5cceae7938175311e658b5b459 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 16:42:41 -0700 Subject: [PATCH 01/14] cp V4.elm V5.elm --- src/Nri/Ui/PremiumCheckbox/V5.elm | 113 ++++++++++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 src/Nri/Ui/PremiumCheckbox/V5.elm diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm new file mode 100644 index 00000000..94122057 --- /dev/null +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -0,0 +1,113 @@ +module Nri.Ui.PremiumCheckbox.V4 exposing (PremiumConfig, premium, Pennant(..)) + +{-| + +@docs PremiumConfig, premium, Pennant + +-} + +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.V5 as Checkbox + + +{-| + + - `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` + +-} +type alias PremiumConfig msg = + { label : String + , id : String + , selected : Checkbox.IsSelected + , disabled : Bool + , isLocked : Bool + , pennant : Maybe Pennant + , onChange : Bool -> msg + , onLockedClick : msg + } + + +{-| 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 +-} +premium : Assets a -> PremiumConfig msg -> Html.Html msg +premium assets 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 + Just pennant -> + Html.div + [ Attributes.class "premium-checkbox-V1__PremiumClass" + , css + [ property "content" "''" + , display inlineBlock + , width (px 26) + , height (px 24) + , marginLeft (px 8) + , backgroundImage + (case pennant of + Premium -> + assets.iconPremiumFlag_svg + + PremiumWithWriting -> + assets.iconPremiumWithWritingFlag_svg + ) + , backgroundRepeat noRepeat + , backgroundPosition center + ] + ] + [] + + Nothing -> + Html.text "" + ] + + +{-| The assets used in this module. +-} +type alias Assets r = + { r + | iconPremiumFlag_svg : Asset + , iconPremiumWithWritingFlag_svg : Asset + } + + +backgroundImage : Asset -> Style +backgroundImage = + Nri.Ui.AssetPath.Css.url + >> property "background-image" From 51e953d0cf4446bb804857efec3a352d3e8deed3 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 16:46:26 -0700 Subject: [PATCH 02/14] Remove the assets from the premium checkbox --- src/Nri/Ui/PremiumCheckbox/V5.elm | 39 ++++++------------- styleguide-app/Assets.elm | 4 -- styleguide-app/Examples/Checkbox.elm | 4 +- .../assets/images/icon_premium_flag.svg | 3 -- .../images/icon_premium_writing_flag.svg | 3 -- 5 files changed, 12 insertions(+), 41 deletions(-) delete mode 100644 styleguide-app/assets/images/icon_premium_flag.svg delete mode 100644 styleguide-app/assets/images/icon_premium_writing_flag.svg diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index 94122057..0980203f 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -1,4 +1,4 @@ -module Nri.Ui.PremiumCheckbox.V4 exposing (PremiumConfig, premium, Pennant(..)) +module Nri.Ui.PremiumCheckbox.V5 exposing (PremiumConfig, premium, Pennant(..)) {-| @@ -9,8 +9,6 @@ module Nri.Ui.PremiumCheckbox.V4 exposing (PremiumConfig, premium, Pennant(..)) 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.V5 as Checkbox @@ -43,8 +41,8 @@ type Pennant {-| A checkbox that should be used for premium content -} -premium : Assets a -> PremiumConfig msg -> Html.Html msg -premium assets config = +premium : PremiumConfig msg -> Html.Html msg +premium config = Html.div [ css [ displayFlex @@ -72,21 +70,21 @@ premium assets config = , case config.pennant of Just pennant -> Html.div - [ Attributes.class "premium-checkbox-V1__PremiumClass" + [ Attributes.class "premium-checkbox-V5__PremiumClass" , css [ property "content" "''" , display inlineBlock , width (px 26) , height (px 24) , marginLeft (px 8) - , backgroundImage - (case pennant of - Premium -> - assets.iconPremiumFlag_svg - PremiumWithWriting -> - assets.iconPremiumWithWritingFlag_svg - ) + -- , backgroundImage + -- (case pennant of + -- Premium -> + -- assets.iconPremiumFlag_svg + -- PremiumWithWriting -> + -- assets.iconPremiumWithWritingFlag_svg + -- ) , backgroundRepeat noRepeat , backgroundPosition center ] @@ -96,18 +94,3 @@ premium assets config = Nothing -> Html.text "" ] - - -{-| The assets used in this module. --} -type alias Assets r = - { r - | iconPremiumFlag_svg : Asset - , iconPremiumWithWritingFlag_svg : Asset - } - - -backgroundImage : Asset -> Style -backgroundImage = - Nri.Ui.AssetPath.Css.url - >> property "background-image" 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..f876f98b 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) @@ -177,7 +176,6 @@ viewPremiumCheckboxes state = let checkbox config = PremiumCheckbox.premium - assets { label = config.label , id = "premium-checkbox-" ++ config.label , selected = 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 From 2ac4f889ffb3f28946c139c9defb0cb84f769999 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 16:50:51 -0700 Subject: [PATCH 03/14] Adds premium flag svg --- src/Nri/Ui/PremiumCheckbox/V5.elm | 43 ++++++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index 0980203f..6e82a948 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -10,6 +10,8 @@ import Accessibility.Styled as Html import Css exposing (..) import Html.Styled.Attributes as Attributes exposing (css) import Nri.Ui.Checkbox.V5 as Checkbox +import Svg exposing (..) +import Svg.Attributes exposing (..) {-| @@ -73,9 +75,9 @@ premium config = [ Attributes.class "premium-checkbox-V5__PremiumClass" , css [ property "content" "''" - , display inlineBlock - , width (px 26) - , height (px 24) + , Css.display inlineBlock + , Css.width (px 26) + , Css.height (px 24) , marginLeft (px 8) -- , backgroundImage @@ -94,3 +96,38 @@ premium config = Nothing -> Html.text "" ] + + +premiumFlag : Svg msg +premiumFlag = + svg + [ version "1.1" + , id "Layer_1" + , x "0px" + , y "0px" + , Svg.Attributes.viewBox "0 0 25 19" + , Svg.Attributes.style "enable-background:new 0 0 25 19;" + ] + [ Svg.style [] [ text " .st0{fill:#FEC709;} .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 "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 "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" + ] + [] + ] + ] + ] + ] From 991e7eb985741775ec3ff9d10b864aaa7d5d3aa3 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 16:52:06 -0700 Subject: [PATCH 04/14] Adds premium with writing svg --- src/Nri/Ui/PremiumCheckbox/V5.elm | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index 6e82a948..c12e30b4 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -131,3 +131,28 @@ premiumFlag = ] ] ] + + +premiumWithWriting : Svg msg +premiumWithWriting = + svg + [ Svg.Attributes.width "25" + , Svg.Attributes.height "18" + , Svg.Attributes.viewBox "0 0 25 18" + ] + [ 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" + ] + [] + ] + ] From a706c83927c76673e2ad35d4a602a2269ec2096b Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 17:08:22 -0700 Subject: [PATCH 05/14] Use the premium flag svgs --- src/Nri/Ui/PremiumCheckbox/V5.elm | 47 ++++++++++++------------------- 1 file changed, 18 insertions(+), 29 deletions(-) diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index c12e30b4..79f4585a 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -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 Html.Styled exposing (fromUnstyled) import Html.Styled.Attributes as Attributes exposing (css) import Nri.Ui.Checkbox.V5 as Checkbox import Svg exposing (..) @@ -43,7 +44,7 @@ type Pennant {-| A checkbox that should be used for premium content -} -premium : PremiumConfig msg -> Html.Html msg +premium : PremiumConfig msg -> Html msg premium config = Html.div [ css @@ -70,35 +71,18 @@ premium config = Checkbox.Square } , case config.pennant of - Just pennant -> - Html.div - [ Attributes.class "premium-checkbox-V5__PremiumClass" - , css - [ property "content" "''" - , Css.display inlineBlock - , Css.width (px 26) - , Css.height (px 24) - , marginLeft (px 8) + Just Premium -> + premiumFlag - -- , backgroundImage - -- (case pennant of - -- Premium -> - -- assets.iconPremiumFlag_svg - -- PremiumWithWriting -> - -- assets.iconPremiumWithWritingFlag_svg - -- ) - , backgroundRepeat noRepeat - , backgroundPosition center - ] - ] - [] + Just PremiumWithWriting -> + premiumWithWritingFlag Nothing -> Html.text "" ] -premiumFlag : Svg msg +premiumFlag : Html msg premiumFlag = svg [ version "1.1" @@ -106,9 +90,10 @@ premiumFlag = , x "0px" , y "0px" , 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 "icon_x2F_p-mini-pennant-yellow", Svg.Attributes.transform "translate(0.000000, -3.000000)" ] [ g @@ -131,16 +116,19 @@ premiumFlag = ] ] ] + |> fromUnstyled -premiumWithWriting : Svg msg -premiumWithWriting = +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;" ] - [ g + [ Svg.title [] [ text "Premium with Writing" ] + , g [ Svg.Attributes.fill "none" , fillRule "evenodd" ] @@ -156,3 +144,4 @@ premiumWithWriting = [] ] ] + |> fromUnstyled From 9e1cac3d0e78a0b37c9e069d16d5231ebbf101de Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 17:10:51 -0700 Subject: [PATCH 06/14] :art: inline the PremiumConfig --- src/Nri/Ui/PremiumCheckbox/V5.elm | 40 ++++++++++++++----------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index 79f4585a..d0f9d2be 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -1,8 +1,8 @@ -module Nri.Ui.PremiumCheckbox.V5 exposing (PremiumConfig, premium, Pennant(..)) +module Nri.Ui.PremiumCheckbox.V5 exposing (premium, Pennant(..)) {-| -@docs PremiumConfig, premium, Pennant +@docs premium, Pennant -} @@ -15,25 +15,6 @@ import Svg exposing (..) import Svg.Attributes exposing (..) -{-| - - - `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` - --} -type alias PremiumConfig msg = - { label : String - , id : String - , selected : Checkbox.IsSelected - , disabled : Bool - , isLocked : Bool - , pennant : Maybe Pennant - , onChange : Bool -> msg - , onLockedClick : msg - } - - {-| Premium is the yellow "P" pennant PremiumWithWriting is the yellow "P+" pennant -} @@ -43,8 +24,23 @@ type Pennant {-| 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` + -} -premium : PremiumConfig msg -> Html msg +premium : + { label : String + , id : String + , selected : Checkbox.IsSelected + , disabled : Bool + , isLocked : Bool + , pennant : Maybe Pennant + , onChange : Bool -> msg + , onLockedClick : msg + } + -> Html msg premium config = Html.div [ css From 7723c5d63ff8447a6f6eac8b19fc944ce377499d Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 17:11:28 -0700 Subject: [PATCH 07/14] :art: premium -> view --- src/Nri/Ui/PremiumCheckbox/V5.elm | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index d0f9d2be..b4e98a9b 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -1,8 +1,8 @@ -module Nri.Ui.PremiumCheckbox.V5 exposing (premium, Pennant(..)) +module Nri.Ui.PremiumCheckbox.V5 exposing (view, Pennant(..)) {-| -@docs premium, Pennant +@docs view, Pennant -} @@ -30,7 +30,7 @@ type Pennant If you get this message, you should show an `Nri.Ui.Premium.Model.view` -} -premium : +view : { label : String , id : String , selected : Checkbox.IsSelected @@ -41,7 +41,7 @@ premium : , onLockedClick : msg } -> Html msg -premium config = +view config = Html.div [ css [ displayFlex From f4dff90f066fa50a0e652a6b66ad3bf9430f0fb3 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 17:14:21 -0700 Subject: [PATCH 08/14] Make the pennant required --- src/Nri/Ui/PremiumCheckbox/V5.elm | 9 +++------ styleguide-app/Examples/Checkbox.elm | 26 ++++++++++++++++++++------ 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index b4e98a9b..359f3777 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -36,7 +36,7 @@ view : , selected : Checkbox.IsSelected , disabled : Bool , isLocked : Bool - , pennant : Maybe Pennant + , pennant : Pennant , onChange : Bool -> msg , onLockedClick : msg } @@ -67,14 +67,11 @@ view config = Checkbox.Square } , case config.pennant of - Just Premium -> + Premium -> premiumFlag - Just PremiumWithWriting -> + PremiumWithWriting -> premiumWithWritingFlag - - Nothing -> - Html.text "" ] diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index f876f98b..97551040 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -79,7 +79,7 @@ update msg state = type alias PremiumExampleConfig = { disabled : Bool , teacherPremiumLevel : PremiumLevel - , pennant : Maybe PremiumCheckbox.Pennant + , pennant : PremiumCheckbox.Pennant } @@ -175,7 +175,7 @@ viewPremiumCheckboxes : State -> Html Msg viewPremiumCheckboxes state = let checkbox config = - PremiumCheckbox.premium + PremiumCheckbox.view { label = config.label , id = "premium-checkbox-" ++ config.label , selected = @@ -192,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 + } ] From 1e6a274021bcee55fccf45802f928b88b292d9d5 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 17:22:25 -0700 Subject: [PATCH 09/14] Adds change details --- src/Nri/Ui/PremiumCheckbox/V5.elm | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index 359f3777..52206122 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -4,6 +4,13 @@ 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) From fc681c778187024050d4dd8d2a4d1eac68b9f161 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 3 Jun 2019 17:23:01 -0700 Subject: [PATCH 10/14] Expost Premium Checkbox V5 --- elm.json | 1 + 1 file changed, 1 insertion(+) diff --git a/elm.json b/elm.json index da5beb39..7de26de1 100644 --- a/elm.json +++ b/elm.json @@ -49,6 +49,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", From a1e333d83a67528fc50fa3903868a0ebbafa4ee3 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 12 Jun 2019 18:04:20 -0700 Subject: [PATCH 11/14] Fix polluted class namespace -- part 1 --- src/Nri/Ui/SpriteSheet.elm | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Nri/Ui/SpriteSheet.elm b/src/Nri/Ui/SpriteSheet.elm index 1949291b..09d272ef 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 From f6e89dace933761298e69f07375b21eeb0d4e504 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 12 Jun 2019 18:05:34 -0700 Subject: [PATCH 12/14] Fix likely future polluted namespace --- src/Nri/Ui/SpriteSheet.elm | 86 ++++++++++++++++++++++++++++++++------ 1 file changed, 73 insertions(+), 13 deletions(-) diff --git a/src/Nri/Ui/SpriteSheet.elm b/src/Nri/Ui/SpriteSheet.elm index 09d272ef..bfea904c 100644 --- a/src/Nri/Ui/SpriteSheet.elm +++ b/src/Nri/Ui/SpriteSheet.elm @@ -74,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 @@ -83,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" + ] + [] ] ] ] From 403e3aed69a123e666736a8303b4a3eddbdd4ea0 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 12 Jun 2019 18:10:57 -0700 Subject: [PATCH 13/14] Proactively avoid class collisions --- src/Nri/Ui/PremiumCheckbox/V5.elm | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index 52206122..8a2898b6 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -93,22 +93,25 @@ premiumFlag = , Svg.Attributes.style "enable-background:new 0 0 25 19;margin-left: 8px;" ] [ Svg.title [] [ text "Premium" ] - , Svg.style [] [ text " .st0{fill:#FEC709;} .st1{fill:#146AFF;} " ] + , 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 "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 "st0" + , 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 "st1" + , 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" ] [] From bae3a242773f25fa9d20dfae893e552296dc7fa8 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Wed, 12 Jun 2019 18:12:46 -0700 Subject: [PATCH 14/14] Fix the premium flag --- src/Nri/Ui/PremiumCheckbox/V5.elm | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Nri/Ui/PremiumCheckbox/V5.elm b/src/Nri/Ui/PremiumCheckbox/V5.elm index 8a2898b6..6186afe6 100644 --- a/src/Nri/Ui/PremiumCheckbox/V5.elm +++ b/src/Nri/Ui/PremiumCheckbox/V5.elm @@ -87,10 +87,10 @@ premiumFlag = svg [ version "1.1" , id "Layer_1" - , x "0px" - , y "0px" + , Svg.Attributes.width "25" + , Svg.Attributes.height "19" , Svg.Attributes.viewBox "0 0 25 19" - , Svg.Attributes.style "enable-background:new 0 0 25 19;margin-left: 8px;" + , Svg.Attributes.style "margin-left: 8px;" ] [ Svg.title [] [ text "Premium" ] , Svg.style [] [ text " .premium-flag-st0{fill:#FEC709;} .premium-flag-st1{fill:#146AFF;} " ]