diff --git a/elm.json b/elm.json index 4b26d53c..449bd410 100644 --- a/elm.json +++ b/elm.json @@ -3,7 +3,7 @@ "name": "NoRedInk/noredink-ui", "summary": "UI Widgets we use at NRI", "license": "BSD-3-Clause", - "version": "6.19.0", + "version": "6.20.1", "exposed-modules": [ "Nri.Ui.Alert.V2", "Nri.Ui.Alert.V3", @@ -12,6 +12,7 @@ "Nri.Ui.BannerAlert.V2", "Nri.Ui.BannerAlert.V3", "Nri.Ui.BannerAlert.V4", + "Nri.Ui.BannerAlert.V5", "Nri.Ui.ClickableText.V1", "Nri.Ui.ClickableText.V2", "Nri.Ui.Button.V3", diff --git a/src/Nri/Ui/BannerAlert/V4.elm b/src/Nri/Ui/BannerAlert/V4.elm index 815071da..935b82ee 100644 --- a/src/Nri/Ui/BannerAlert/V4.elm +++ b/src/Nri/Ui/BannerAlert/V4.elm @@ -7,6 +7,7 @@ module Nri.Ui.BannerAlert.V4 exposing (alert, error, neutral, success) -} import Accessibility.Styled as Html exposing (Html) +import Accessibility.Styled.Widget as Widget import Css import Css.Global import Html.Styled.Attributes as Attributes exposing (css) @@ -26,7 +27,7 @@ alert = { backgroundColor = Colors.sunshine , color = Colors.navy , icon = - { backgroundColor = Colors.yellow + { backgroundColor = Colors.ochre , height = Css.px 25 , asset = exclamationMark } @@ -100,6 +101,7 @@ banner config alertMessage dismissMsg = [ css [ Css.displayFlex , Css.justifyContent Css.center + , Css.alignItems Css.center , Css.backgroundColor config.backgroundColor , Css.color config.color ] @@ -122,13 +124,7 @@ banner config alertMessage dismissMsg = [ icon config.icon , notification alertMessage ] - , Html.span - [ css - [ Css.display Css.inlineBlock - , Css.float Css.right - ] - ] - [ maybeDismissButton ] + , maybeDismissButton ] @@ -136,24 +132,23 @@ dismissButton : msg -> Html msg dismissButton msg = Nri.Ui.styled Html.div "dismiss-button-container" - [ Css.position Css.relative - , Css.top (Css.px 5) - , Css.right Css.zero - , Css.padding (Css.px 25) + [ Css.padding (Css.px 25) ] [] [ Html.button [ Html.Styled.Events.onClick msg + , Widget.label "Dismiss banner" , css [ Css.borderWidth Css.zero , Css.backgroundColor Css.unset , Css.color Colors.azure , Css.width (Css.px 30) , Css.height (Css.px 30) + , Css.padding2 Css.zero (Css.px 7) + , Css.cursor Css.pointer ] ] - [ -- TODO: add hidden text ("Dismiss banner") for what this is about - NriSvg.toHtml xSvg + [ NriSvg.toHtml xSvg ] ] @@ -192,13 +187,13 @@ icon config = notification : String -> Html msg notification message = - Html.div - [ css - [ Css.fontSize (Css.px 20) - , Css.fontWeight (Css.int 700) - , Css.lineHeight (Css.px 25) - , Css.maxWidth (Css.px 600) - , Nri.Ui.Fonts.V1.baseFont - ] + Nri.Ui.styled Html.div + "banner-alert-notification" + [ Css.fontSize (Css.px 20) + , Css.fontWeight (Css.int 700) + , Css.lineHeight (Css.px 27) + , Css.maxWidth (Css.px 600) + , Nri.Ui.Fonts.V1.baseFont ] + [] [ Html.text message ] diff --git a/src/Nri/Ui/BannerAlert/V5.elm b/src/Nri/Ui/BannerAlert/V5.elm new file mode 100644 index 00000000..cdedf63b --- /dev/null +++ b/src/Nri/Ui/BannerAlert/V5.elm @@ -0,0 +1,258 @@ +module Nri.Ui.BannerAlert.V5 exposing (alert, error, neutral, success, LinkConfig, BannerContent(..), Target(..)) + +{-| + +@docs alert, error, neutral, success, LinkConfig, BannerContent, Target + +-} + +import Accessibility.Styled as Html exposing (Html) +import Accessibility.Styled.Widget as Widget +import Css +import Css.Global +import Html.Styled.Attributes as Attributes exposing (css) +import Html.Styled.Events +import Nri.Ui +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Fonts.V1 +import Nri.Ui.SpriteSheet exposing (bulb, checkmark, exclamationMark, xSvg) +import Nri.Ui.Svg.V1 as NriSvg exposing (Svg) + + +{-| A type to capture either plain content, or a string which will include a url link. +-} +type BannerContent + = Plain String + | WithLink LinkConfig + + +{-| A banner to show error alerts +-} +alert : BannerContent -> Maybe msg -> Html msg +alert = + banner + { backgroundColor = Colors.sunshine + , color = Colors.navy + , icon = + { backgroundColor = Colors.ochre + , height = Css.px 25 + , asset = exclamationMark + } + } + + +{-| A banner to show error alerts +-} +error : BannerContent -> Maybe msg -> Html msg +error = + banner + { backgroundColor = Colors.purpleLight + , color = Colors.purpleDark + , icon = + { backgroundColor = Colors.purple + , height = Css.px 25 + , asset = exclamationMark + } + } + + +{-| A banner to show neutral alerts +-} +neutral : BannerContent -> Maybe msg -> Html msg +neutral = + banner + { backgroundColor = Colors.frost + , color = Colors.navy + , icon = + { backgroundColor = Colors.navy + , height = Css.px 32 + , asset = bulb + } + } + + +{-| A banner for success alerts +-} +success : BannerContent -> Maybe msg -> Html msg +success = + banner + { backgroundColor = Colors.greenLightest + , color = Colors.greenDarkest + , icon = + { backgroundColor = Colors.green + , height = Css.px 20 + , asset = checkmark + } + } + + +type alias StyleConfig = + { color : Css.Color + , backgroundColor : Css.Color + , icon : IconConfig + } + + +banner : StyleConfig -> BannerContent -> Maybe msg -> Html msg +banner config bannerContent dismissMsg = + let + maybeDismissButton = + case dismissMsg of + Nothing -> + Html.text "" + + Just msg -> + dismissButton msg + + alertMessage = + case bannerContent of + Plain string -> + Html.text string + + WithLink linkConfig -> + Html.div + [ css + [ Css.fontSize (Css.px 20) + , Css.fontWeight (Css.int 700) + , Css.lineHeight (Css.px 25) + , Css.maxWidth (Css.px 600) + , Nri.Ui.Fonts.V1.baseFont + ] + ] + [ Html.text linkConfig.prefixText + , Html.a + [ Attributes.href <| linkConfig.linkUrl + , targetToAttribute linkConfig.target + ] + [ Html.text linkConfig.linkText ] + , Html.text linkConfig.postfixText + ] + in + Html.div + [ css + [ Css.displayFlex + , Css.justifyContent Css.center + , Css.alignItems Css.center + , Css.backgroundColor config.backgroundColor + , Css.color config.color + ] + ] + [ Html.span + [ css + [ Css.alignItems Css.center + , Css.displayFlex + , Css.justifyContent Css.center + , Css.padding (Css.px 20) + , Css.width (Css.pct 100) + , Css.Global.children + [ Css.Global.button + [ Css.position Css.relative + , Css.right (Css.px 15) + ] + ] + ] + ] + [ icon config.icon + , notification alertMessage + ] + , maybeDismissButton + ] + + +dismissButton : msg -> Html msg +dismissButton msg = + Nri.Ui.styled Html.div + "dismiss-button-container" + [ Css.padding (Css.px 25) + ] + [] + [ Html.button + [ Html.Styled.Events.onClick msg + , Widget.label "Dismiss banner" + , css + [ Css.borderWidth Css.zero + , Css.backgroundColor Css.unset + , Css.color Colors.azure + , Css.width (Css.px 30) + , Css.height (Css.px 30) + , Css.padding2 Css.zero (Css.px 7) + , Css.cursor Css.pointer + ] + ] + [ NriSvg.toHtml xSvg + ] + ] + + +type alias IconConfig = + { backgroundColor : Css.Color + , height : Css.Px + , asset : Svg + } + + +icon : IconConfig -> Html msg +icon config = + Html.div + [ css + [ Css.boxSizing Css.borderBox + , Css.borderRadius (Css.pct 50) + , Css.color Colors.white + , Css.displayFlex + , Css.alignItems Css.center + , Css.justifyContent Css.center + , Css.width (Css.px 50) + , Css.height (Css.px 50) + , Css.marginRight (Css.px 20) + , Css.padding (Css.px 8) + , Css.flexShrink (Css.num 0) + , Css.backgroundColor config.backgroundColor + ] + ] + [ Html.div + [ css [ Css.height config.height ] + ] + [ NriSvg.toHtml config.asset ] + ] + + +notification : Html msg -> Html msg +notification message = + Nri.Ui.styled Html.div + "banner-alert-notification" + [ Css.fontSize (Css.px 20) + , Css.fontWeight (Css.int 700) + , Css.lineHeight (Css.px 27) + , Css.maxWidth (Css.px 600) + , Nri.Ui.Fonts.V1.baseFont + ] + [] + [ message ] + + +{-| Config describing a message containing an embedded link. +-} +type alias LinkConfig = + { prefixText : String + , linkText : String + , linkUrl : String + , postfixText : String + , target : Target + } + + +{-| The link target. Corresponds to values of "_blank" and "_self" +-} +type Target + = Blank + | Self + + +targetToAttribute : Target -> Html.Attribute msg +targetToAttribute linkTarget = + case linkTarget of + Blank -> + Attributes.target "_blank" + + Self -> + Attributes.target "_self" diff --git a/styleguide-app/Examples/BannerAlert.elm b/styleguide-app/Examples/BannerAlert.elm index 92aabb60..4f8fea4e 100644 --- a/styleguide-app/Examples/BannerAlert.elm +++ b/styleguide-app/Examples/BannerAlert.elm @@ -8,38 +8,49 @@ module Examples.BannerAlert exposing (example, State, init, Msg, update) import Html.Styled exposing (div, h3, text) import ModuleExample as ModuleExample exposing (Category(..), ModuleExample) -import Nri.Ui.BannerAlert.V4 as BannerAlert +import Nri.Ui.BannerAlert.V5 as BannerAlert example : (Msg -> msg) -> State -> ModuleExample msg example parentMsg state = - { name = "Nri.Ui.BannerAlert.V4" + { name = "Nri.Ui.BannerAlert.V5" , category = Messaging , content = [ if state.show then div [] [ h3 [] [ text "alert" ] - , BannerAlert.alert "This is a dismissable alert message!" (Just Dismiss) + , BannerAlert.alert (BannerAlert.Plain "This is a dismissable alert message!") (Just Dismiss) ] else div [] [ h3 [] [ text "success" ] - , BannerAlert.success "The alert message was dismissed. 👍" Nothing + , BannerAlert.success (BannerAlert.Plain "The alert message was dismissed. 👍") Nothing ] , h3 [] [ text "error" ] - , BannerAlert.error "This is an error message!" Nothing + , BannerAlert.error (BannerAlert.Plain "This is an error message!") Nothing + , h3 [] [ text "error with link" ] + , BannerAlert.error + (BannerAlert.WithLink + { prefixText = "Click " + , linkText = "here" + , linkUrl = "http://www.noredink.com" + , postfixText = " to check out NoRedInk." + , target = BannerAlert.Blank + } + ) + Nothing , h3 [] [ text "neutral" ] - , BannerAlert.neutral "This is a neutral message!" Nothing + , BannerAlert.neutral (BannerAlert.Plain "This is a neutral message!") Nothing , h3 [] [ text "success" ] , BannerAlert.success - """This is a success message! + (BannerAlert.Plain """This is a success message! Let's see what happens if there is a very long message! Wow, how successful! You're the biggest success I've ever seen! You should feel great about yourself! Give yourself a very big round of applause! - """ + """) Nothing ] |> List.map (Html.Styled.map parentMsg)