NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-28 18:24:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix the styling for logos, which are sometimes quite broad

Browse Source
This commit is contained in:
Tessa Kelly 2019-10-29 18:47:38 -07:00
parent e0e0790079
commit 51239fefc7
2 changed files with 50 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
styleguide-app/Examples/IconExamples.elm
View File

@ -1,4 +1,4 @@
module Examples.IconExamples exposing (view)
module Examples.IconExamples exposing (view, viewWithCustomStyles)
import Css
import Html.Styled as Html exposing (Html)
@ -11,6 +11,20 @@ import Nri.Ui.Text.V4 as Text
view : String -> List ( String, Svg.Svg ) -> Html msg
view headerText icons =
let
defaultStyles =
[ Css.height (Css.px 25)
, Css.width (Css.px 25)
, Css.margin (Css.px 4)
, Css.color Colors.gray45
]
in
viewWithCustomStyles headerText
(List.map (\( name, svg ) -> ( name, svg, defaultStyles )) icons)
viewWithCustomStyles : String -> List ( String, Svg.Svg, List Css.Style ) -> Html msg
viewWithCustomStyles headerText icons =
Html.section [ css [ Css.displayFlex, Css.alignItems Css.center ] ]
[ Html.div
[ css
@ -32,8 +46,8 @@ view headerText icons =
]
viewIcon : ( String, Svg.Svg ) -> Html msg
viewIcon ( name, icon ) =
viewIcon : ( String, Svg.Svg, List Css.Style ) -> Html msg
viewIcon ( name, icon, style ) =
Html.div
[ css
[ Css.displayFlex
@ -41,15 +55,6 @@ viewIcon ( name, icon ) =
, Css.margin (Css.px 8)
]
]
[ Html.div
[ css
[ Css.height (Css.px 25)
, Css.width (Css.px 25)
, Css.margin (Css.px 4)
, Css.color Colors.gray45
]
]
[ Svg.toHtml icon
]
[ Html.div [ css style ] [ Svg.toHtml icon ]
, Text.smallBody [ Html.text name ]
]

38
styleguide-app/Examples/Logo.elm
View File

@ -6,6 +6,7 @@ module Examples.Logo exposing (example)
-}
import Css
import Examples.IconExamples as IconExamples
import ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Colors.V1 as Colors
@ -18,13 +19,38 @@ example =
{ name = "Nri.Ui.Logo.V1"
, category = Icons
, content =
[ IconExamples.view "NRI"
[ ( "noredink", Logo.noredink )
[ IconExamples.viewWithCustomStyles "NRI"
[ ( "noredink"
, Logo.noredink
, [ Css.height (Css.px 25)
, Css.width (Css.px 100)
, Css.margin (Css.px 4)
]
)
]
, IconExamples.view "Social Media & SSO"
[ ( "facebook", Logo.facebook )
, ( "twitter", Logo.twitter )
, ( "clever", Logo.clever )
, IconExamples.viewWithCustomStyles "Social Media & SSO"
[ ( "facebook"
, Logo.facebook
, defaults
)
, ( "twitter", Logo.twitter, defaults )
, ( "clever"
, Logo.clever
, [ Css.height (Css.px 25)
, Css.width (Css.px 100)
, Css.margin (Css.px 4)
, Css.color Colors.azure
]
)
]
]
}
defaults : List Css.Style
defaults =
[ Css.height (Css.px 25)
, Css.width (Css.px 25)
, Css.margin (Css.px 4)
, Css.color Colors.azure
]