mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-28 01:45:20 +03:00
Merge pull request #355 from NoRedInk/fix-style-precedence
Fix style precedence in Nri.Ui.Heading.V2
This commit is contained in:
commit
d79f23b558
@ -22,60 +22,88 @@ import Nri.Ui.Fonts.V1 as Fonts
|
||||
|
||||
|
||||
{-| Make a first-level heading (styled like a top-level heading by default.)
|
||||
|
||||
Use this to upgrade from `Nri.Ui.Text.V2.heading`.
|
||||
|
||||
-}
|
||||
h1 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h1 attrs content =
|
||||
view Html.Styled.h1 (style Top :: attrs) content
|
||||
h1 =
|
||||
view Html.Styled.h1
|
||||
{ style = Top
|
||||
, css = []
|
||||
, attributes = []
|
||||
}
|
||||
|
||||
|
||||
{-| Make a second-level heading (styled like a tagline by default.)
|
||||
|
||||
Use this to upgrade from `Nri.Ui.Text.V2.tagline`.
|
||||
|
||||
-}
|
||||
h2 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h2 attrs content =
|
||||
view Html.Styled.h2 (style Tagline :: attrs) content
|
||||
h2 =
|
||||
view Html.Styled.h2
|
||||
{ style = Tagline
|
||||
, css = []
|
||||
, attributes = []
|
||||
}
|
||||
|
||||
|
||||
{-| Make a third-level heading (styled like a subhead by default.)
|
||||
|
||||
Use this to upgrade from `Nri.Ui.Text.V2.subHeading`.
|
||||
|
||||
-}
|
||||
h3 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h3 attrs content =
|
||||
view Html.Styled.h3 (style Subhead :: attrs) content
|
||||
h3 =
|
||||
view Html.Styled.h3
|
||||
{ style = Subhead
|
||||
, css = []
|
||||
, attributes = []
|
||||
}
|
||||
|
||||
|
||||
{-| Make a fourth-level heading (styled like a small heading by default.)
|
||||
|
||||
Use this to upgrade from `Nri.Ui.Text.V2.smallHeading`.
|
||||
|
||||
-}
|
||||
h4 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h4 attrs content =
|
||||
view Html.Styled.h4 (style Small :: attrs) content
|
||||
h4 =
|
||||
view Html.Styled.h4
|
||||
{ style = Small
|
||||
, css = []
|
||||
, attributes = []
|
||||
}
|
||||
|
||||
|
||||
{-| Make a fifth-level heading (styled like a small heading by default.)
|
||||
-}
|
||||
h5 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h5 attrs content =
|
||||
view Html.Styled.h5 (style Small :: attrs) content
|
||||
h5 =
|
||||
view Html.Styled.h5
|
||||
{ style = Small
|
||||
, css = []
|
||||
, attributes = []
|
||||
}
|
||||
|
||||
|
||||
view : (List (Html.Styled.Attribute msg) -> List (Html msg) -> Html msg) -> List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
view tag customizations content =
|
||||
view :
|
||||
(List (Html.Styled.Attribute msg) -> List (Html msg) -> Html msg)
|
||||
-> Customizations msg
|
||||
-> List (Attribute msg)
|
||||
-> List (Html msg)
|
||||
-> Html msg
|
||||
view tag customizations attrs content =
|
||||
let
|
||||
( finalStyle, attributes ) =
|
||||
List.foldr
|
||||
(\wrapped ( style_, attrs ) ->
|
||||
case wrapped of
|
||||
Style_ newStyle ->
|
||||
( newStyle, attrs )
|
||||
|
||||
Css css_ ->
|
||||
( style_, Html.Styled.Attributes.css css_ :: attrs )
|
||||
|
||||
Attribute_ attribute ->
|
||||
( style_, attribute :: attrs )
|
||||
)
|
||||
( Top, [] )
|
||||
customizations
|
||||
final =
|
||||
List.foldl customize customizations attrs
|
||||
in
|
||||
tag (Html.Styled.Attributes.css [ getStyles finalStyle ] :: attributes) content
|
||||
tag
|
||||
(Html.Styled.Attributes.css [ getStyles final.style, Css.batch final.css ]
|
||||
:: final.attributes
|
||||
)
|
||||
content
|
||||
|
||||
|
||||
type Attribute msg
|
||||
@ -117,6 +145,26 @@ customAttr =
|
||||
Attribute_
|
||||
|
||||
|
||||
type alias Customizations msg =
|
||||
{ style : Style
|
||||
, css : List Css.Style
|
||||
, attributes : List (Html.Styled.Attribute msg)
|
||||
}
|
||||
|
||||
|
||||
customize : Attribute msg -> Customizations msg -> Customizations msg
|
||||
customize attr customizations =
|
||||
case attr of
|
||||
Style_ newStyle ->
|
||||
{ customizations | style = newStyle }
|
||||
|
||||
Css css_ ->
|
||||
{ customizations | css = customizations.css ++ css_ }
|
||||
|
||||
Attribute_ attribute ->
|
||||
{ customizations | attributes = customizations.attributes ++ [ attribute ] }
|
||||
|
||||
|
||||
|
||||
-- Style
|
||||
|
||||
|
@ -6,8 +6,10 @@ module Examples.Text exposing (example)
|
||||
|
||||
-}
|
||||
|
||||
import Css
|
||||
import Html.Styled as Html
|
||||
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Heading.V2 as Heading
|
||||
import Nri.Ui.Text.V4 as Text
|
||||
|
||||
@ -41,5 +43,15 @@ example =
|
||||
, Heading.h2 [] [ Html.text "Paragraph styles for user-authored content" ]
|
||||
, Text.ugMediumBody [ Html.text <| "This is an ugMediumBody. " ++ longerBody ]
|
||||
, Text.ugSmallBody [ Html.text <| "This is an ugSmallBody. " ++ longerBody ]
|
||||
|
||||
---------------
|
||||
, Html.hr [] []
|
||||
, Heading.h2 [] [ Html.text "Headings with overrides" ]
|
||||
, Heading.h2
|
||||
[ Heading.style Heading.Top ]
|
||||
[ Html.text "I'm an H2 with the top style!" ]
|
||||
, Heading.h2
|
||||
[ Heading.css [ Css.color Colors.highlightPurpleDark ] ]
|
||||
[ Html.text "I have a custom color!" ]
|
||||
]
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user