mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-11 06:31:38 +03:00
Merge pull request #394 from NoRedInk/zamboni/pennant-svg
Add Nri.Ui.Pennant.V1
This commit is contained in:
Brooke
GitHub
commit
036d11d4c6
1
elm.json
1
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",
|
||||
|
||||
51
src/Nri/Ui/Pennant/V1.elm
Normal file
51
src/Nri/Ui/Pennant/V1.elm
Normal file
@ -0,0 +1,51 @@
|
||||
module Nri.Ui.Pennant.V1 exposing (premiumFlag)
|
||||
|
||||
{-| Used for indicating Premium content
|
||||
|
||||
@docs premiumFlag
|
||||
|
||||
-}
|
||||
|
||||
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"
|
||||
]
|
||||
[]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
@ -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
|
||||
|
||||
30
styleguide-app/Examples/Pennant.elm
Normal file
30
styleguide-app/Examples/Pennant.elm
Normal file
@ -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
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -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
|
||||
]
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user