From cfa0a6ede6c68c1ba677a31c7634ff19617cd152 Mon Sep 17 00:00:00 2001 From: brookeangel Date: Thu, 24 Oct 2019 14:29:19 -0700 Subject: [PATCH 1/2] Add Nri.Ui.Pennant.V1 --- elm.json | 1 + src/Nri/Ui/Pennant/V1.elm | 48 +++++++++++++++++++++++++++++ src/Nri/Ui/PremiumCheckbox/V6.elm | 44 +------------------------- styleguide-app/Examples/Pennant.elm | 30 ++++++++++++++++++ styleguide-app/NriModules.elm | 2 ++ 5 files changed, 82 insertions(+), 43 deletions(-) create mode 100644 src/Nri/Ui/Pennant/V1.elm create mode 100644 styleguide-app/Examples/Pennant.elm diff --git a/elm.json b/elm.json index 803e1759..3f5bba0b 100644 --- a/elm.json +++ b/elm.json @@ -58,6 +58,7 @@ "Nri.Ui.Page.V2", "Nri.Ui.Page.V3", "Nri.Ui.Palette.V1", + "Nri.Ui.Pennant.V1", "Nri.Ui.PremiumCheckbox.V1", "Nri.Ui.PremiumCheckbox.V2", "Nri.Ui.PremiumCheckbox.V3", diff --git a/src/Nri/Ui/Pennant/V1.elm b/src/Nri/Ui/Pennant/V1.elm new file mode 100644 index 00000000..27f757de --- /dev/null +++ b/src/Nri/Ui/Pennant/V1.elm @@ -0,0 +1,48 @@ +module Nri.Ui.Pennant.V1 exposing (premiumFlag) + +{-| Used for indicating Premium content +-} + +import Accessibility.Styled exposing (Html) +import Svg.Styled as Svg exposing (..) +import Svg.Styled.Attributes as SvgAttr exposing (..) + + +{-| -} +premiumFlag : Html msg +premiumFlag = + svg + [ version "1.1" + , id "Layer_1" + , SvgAttr.width "25" + , SvgAttr.height "19" + , SvgAttr.viewBox "0 0 25 19" + , SvgAttr.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" + , SvgAttr.transform "translate(0.000000, -3.000000)" + ] + [ g + [ id "Group" + , SvgAttr.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" + ] + [] + ] + ] + ] + ] diff --git a/src/Nri/Ui/PremiumCheckbox/V6.elm b/src/Nri/Ui/PremiumCheckbox/V6.elm index cde9075d..177fbbd8 100644 --- a/src/Nri/Ui/PremiumCheckbox/V6.elm +++ b/src/Nri/Ui/PremiumCheckbox/V6.elm @@ -17,11 +17,9 @@ content to be "checked"! 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 (..) +import Nri.Ui.Pennant.V1 exposing (premiumFlag) {-| A checkbox that should be used for premium content @@ -73,43 +71,3 @@ view config = else Html.text "" ] - - -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 diff --git a/styleguide-app/Examples/Pennant.elm b/styleguide-app/Examples/Pennant.elm new file mode 100644 index 00000000..37a49d5e --- /dev/null +++ b/styleguide-app/Examples/Pennant.elm @@ -0,0 +1,30 @@ +module Examples.Pennant exposing (example) + +{-| + +@docs example + +-} + +import Css exposing (..) +import Html.Styled as Html exposing (Html) +import Html.Styled.Attributes exposing (css) +import ModuleExample exposing (Category(..), ModuleExample) +import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Pennant.V1 as Pennant + + +{-| -} +example : ModuleExample msg +example = + { name = "Nri.Ui.Pennant.V1" + , category = Icons + , content = + [ Html.div [ css [ displayFlex, alignItems center ] ] + [ Html.span [ css [ Fonts.baseFont, Css.fontSize (Css.px 16) ] ] + [ Html.text "A premiumFlag indicates that content is Premium" + ] + , Pennant.premiumFlag + ] + ] + } diff --git a/styleguide-app/NriModules.elm b/styleguide-app/NriModules.elm index 3ca0e904..efb4e263 100644 --- a/styleguide-app/NriModules.elm +++ b/styleguide-app/NriModules.elm @@ -16,6 +16,7 @@ import Examples.Heading import Examples.Icon import Examples.Modal import Examples.Page +import Examples.Pennant import Examples.SegmentedControl import Examples.Select import Examples.Slide @@ -311,6 +312,7 @@ nriThemedModules model = , Examples.SortableTable.example SortableTableMsg model.sortableTableState , Examples.Tabs.example TabsExampleMsg model.tabsExampleState , Examples.Tooltip.example TooltipExampleMsg model.tooltipExampleState + , Examples.Pennant.example ] From 80bcd1a2a65eba4cbc9b91a2357202a7cbf2dd27 Mon Sep 17 00:00:00 2001 From: brookeangel Date: Thu, 24 Oct 2019 14:33:01 -0700 Subject: [PATCH 2/2] add docs --- src/Nri/Ui/Pennant/V1.elm | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Nri/Ui/Pennant/V1.elm b/src/Nri/Ui/Pennant/V1.elm index 27f757de..acb86936 100644 --- a/src/Nri/Ui/Pennant/V1.elm +++ b/src/Nri/Ui/Pennant/V1.elm @@ -1,6 +1,9 @@ module Nri.Ui.Pennant.V1 exposing (premiumFlag) {-| Used for indicating Premium content + +@docs premiumFlag + -} import Accessibility.Styled exposing (Html)