mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2025-01-08 07:27:44 +03:00
e2907d9ba2
* Use elm-css 16.0.0 * 💀 Ui.Checkbox V1 and V2 * s/Css.Foreign/Css.Global/g * 💀 Nri.Ui.Styles.V1 * 💀 BannerAlert.V1 * 💀 Modal.V1 * 💀 Dropdown.V1 * 💀 Select.V1 and V2 * 💀 Alert.V1 * 💀 Button.V1 and V2 * 💀 Divider.V1 * 💀 Icon.V1 and V2 * 💀 Outline.V1 * 💀 SegmentedControl.V1-V5 * 💀 TextArea.V1 and V2 * 💀 TextInput.V1 * delete the rest of the modules * actually more deletions * InputStyles v1 is unused * move to src-0.18 * do the 0.19 upgrade * select options are addressable by index * elm-css 16 * update scripts * elm-format * Update V2.elm * put the nbsp back * elm-format validation for both versions
55 lines
2.3 KiB
Elm
55 lines
2.3 KiB
Elm
module Nri.Ui exposing (styled)
|
|
|
|
{-| A collection of helpers for working with NoRedInk projects
|
|
|
|
@docs styled
|
|
|
|
-}
|
|
|
|
import Css exposing (Style)
|
|
import Html.Styled exposing (Attribute, Html)
|
|
import Html.Styled.Attributes exposing (attribute, css)
|
|
|
|
|
|
{-| Wrapper around [`Html.Styled.style`](http://package.elm-lang.org/packages/rtfeldman/elm-css/13.1.1/Html-Styled#styled) which adds a data-nri-description attribute to make it easier to tell from Inspect Element where in our code that element was defined.
|
|
|
|
Takes a function that creates an element, and pre-applies styles and a `data-nri-description` attribution to it.
|
|
|
|
bigButton : List (Attribute msg) -> List (Html msg) -> Html msg
|
|
bigButton =
|
|
styled button
|
|
"big button"
|
|
[ padding (px 30)
|
|
, fontWeight bold
|
|
]
|
|
|
|
view : Model -> Html msg
|
|
view model =
|
|
[ text "These two buttons are identical:"
|
|
, bigButton [] [ text "Hi!" ]
|
|
, button [ css [ padding (px 30), fontWeight bold ] ] [] [ text "Hi!" ]
|
|
]
|
|
|
|
Here, the bigButton function we've defined using styled button is identical to the normal button function, except that it has pre-applied the attribute of css [ padding (px 30), fontWeight bold ], as well as `(attribute "data-nri-description" "big button")`.
|
|
|
|
You can pass more attributes to bigButton as usual (including other css attributes). They will be applied after the pre-applied styles.
|
|
|
|
Note: normally `attributeMsg` will be the same as `msg`, but we need them to be different types for special cases when `fn` needs to do tricky things. For example, some elements from the Accessibility.Styled package use the following type signature:
|
|
|
|
div : List (Attribute Never) -> List (Html msg) -> Html msg
|
|
|
|
-}
|
|
styled : (List (Attribute attributeMsg) -> List (Html msg) -> Html msg) -> String -> List Style -> List (Attribute attributeMsg) -> List (Html msg) -> Html msg
|
|
styled fn description styles =
|
|
-- Cache the computed css style so we only have to do the hashing once.
|
|
-- Just like in https://github.com/rtfeldman/elm-css/pull/456
|
|
let
|
|
descriptionAttr =
|
|
attribute "data-nri-description" description
|
|
|
|
cssAttr =
|
|
css styles
|
|
in
|
|
\attrs children ->
|
|
fn (descriptionAttr :: cssAttr :: attrs) children
|