From 09555104a37300d2b6bce82f67d8effa366ff49a Mon Sep 17 00:00:00 2001 From: Brooke Date: Thu, 6 Sep 2018 08:13:16 -1000 Subject: [PATCH 1/6] fix no close button conundrum --- src/Nri/Ui/Modal/V2.elm | 48 +++++++++++++++++++++++++------ styleguide-app/Examples/Modal.elm | 13 +++++---- 2 files changed, 47 insertions(+), 14 deletions(-) diff --git a/src/Nri/Ui/Modal/V2.elm b/src/Nri/Ui/Modal/V2.elm index 98666e76..cdc7d32f 100644 --- a/src/Nri/Ui/Modal/V2.elm +++ b/src/Nri/Ui/Modal/V2.elm @@ -23,9 +23,11 @@ import Css.Foreign exposing (Snippet, body, children, descendants, everything, s import Html.Styled import Html.Styled.Events exposing (onClick) import Nri.Ui +import Nri.Ui.AssetPath exposing (Asset(..)) import Nri.Ui.Colors.Extra import Nri.Ui.Colors.V1 import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Icon.V3 as Icon {-| @@ -48,25 +50,29 @@ type alias Model msg = } +type alias Assets r = + { r | icons_xBlue_svg : Asset } + + type ModalType = Info | Warning {-| -} -info : Model msg -> Html msg -info = - view Info +info : Assets r -> Model msg -> Html msg +info assets = + view assets Info {-| -} -warning : Model msg -> Html msg -warning = - view Warning +warning : Assets r -> Model msg -> Html msg +warning assets = + view assets Warning -view : ModalType -> Model msg -> Html msg -view modalType { title, visibleTitle, content, onDismiss, footerContent, width } = +view : Assets r -> ModalType -> Model msg -> Html msg +view assets modalType { title, visibleTitle, content, onDismiss, footerContent, width } = Nri.Ui.styled div "modal-backdrop-container" ((case modalType of @@ -132,6 +138,12 @@ view modalType { title, visibleTitle, content, onDismiss, footerContent, width } [ Css.Foreign.body [ Css.overflow Css.hidden ] ] + , case onDismiss of + Just msg -> + closeButton assets msg + + Nothing -> + text "" , if visibleTitle then viewHeader modalType title else @@ -142,6 +154,26 @@ view modalType { title, visibleTitle, content, onDismiss, footerContent, width } ] +closeButton : Assets r -> msg -> Html msg +closeButton assets msg = + Nri.Ui.styled div + "close-button-container" + [ Css.position Css.absolute + , Css.top Css.zero + , Css.right Css.zero + , Css.padding (Css.px 25) + ] + [] + [ Icon.button + { alt = "Close" + , msg = msg + , icon = Icon.close assets + , disabled = False + , size = Icon.Medium + } + ] + + viewHeader : ModalType -> String -> Html msg viewHeader modalType title = Nri.Ui.styled Html.h3 diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm index 7cd7bdbe..cb3b280f 100644 --- a/styleguide-app/Examples/Modal.elm +++ b/styleguide-app/Examples/Modal.elm @@ -7,6 +7,7 @@ module Examples.Modal exposing (Msg, State, example, init, update) -} import Accessibility.Styled as Html exposing (Html, div, h3, p, text) +import Assets import Css exposing (..) import Html.Styled import Html.Styled.Attributes exposing (css) @@ -114,7 +115,7 @@ viewModal : ModalType -> Html Msg viewModal modal = case modal of InfoModal -> - Modal.info + Modal.info Assets.assets { title = "Info Modal" , visibleTitle = True , content = text "This is where the content goes!" @@ -127,7 +128,7 @@ viewModal modal = } WarningModal -> - Modal.warning + Modal.warning Assets.assets { title = "Warning Modal" , visibleTitle = True , content = text "This is where the content goes!" @@ -140,7 +141,7 @@ viewModal modal = } NoButtonModal -> - Modal.info + Modal.info Assets.assets { title = "No Buttons" , visibleTitle = True , content = text "This is where the content goes!" @@ -150,7 +151,7 @@ viewModal modal = } NoDismissModal -> - Modal.info + Modal.info Assets.assets { title = "No Dismiss" , visibleTitle = True , content = text "This is where the content goes!" @@ -163,7 +164,7 @@ viewModal modal = } NoHeading -> - Modal.info + Modal.info Assets.assets { title = "Hidden title" , onDismiss = Just DismissModal , visibleTitle = False @@ -182,7 +183,7 @@ viewModal modal = } ScrolledContentModal -> - Modal.info + Modal.info Assets.assets { title = "Scrolled Content" , onDismiss = Just DismissModal , visibleTitle = True From 53ce4d4624000cb3a9a2a0e44f5e18d4692307ca Mon Sep 17 00:00:00 2001 From: Tereza Sokol Date: Fri, 7 Sep 2018 11:42:14 -0400 Subject: [PATCH 2/6] Create basic table elements Done in order to add thead and tbody in only on place in the next commit --- src/Nri/Ui/Table/V2.elm | 57 +++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm index abb42c6e..1dc19aab 100644 --- a/src/Nri/Ui/Table/V2.elm +++ b/src/Nri/Ui/Table/V2.elm @@ -82,32 +82,15 @@ custom { header, view, width } = {-| Displays a table of data without a header row -} viewWithoutHeader : List (Column data msg) -> List data -> Html msg -viewWithoutHeader columns data = - table [] <| - List.map (viewRow columns) data +viewWithoutHeader columns = + tableWithoutHeader [] columns (viewRow columns) {-| Displays a table of data based on the provided column definitions -} view : List (Column data msg) -> List data -> Html msg -view columns data = - tableWithHeader [] columns <| - List.map (viewRow columns) data - - -viewHeaders : List (Column data msg) -> Html msg -viewHeaders columns = - tr - [ css headersStyles ] - (List.map viewRowHeader columns) - - -viewRowHeader : Column data msg -> Html msg -viewRowHeader (Column header _ width) = - th - [ css (width :: headerStyles) - ] - [ header ] +view columns = + tableWithHeader [] columns (viewRow columns) viewRow : List (Column data msg) -> data -> Html msg @@ -135,16 +118,14 @@ data is on its way and what it will look like when it arrives. -} viewLoading : List (Column data msg) -> Html msg viewLoading columns = - tableWithHeader loadingTableStyles columns <| - List.map (viewLoadingRow columns) (List.range 0 8) + tableWithHeader loadingTableStyles columns (viewLoadingRow columns) (List.range 0 8) {-| Display the loading table without a header row -} viewLoadingWithoutHeader : List (Column data msg) -> Html msg viewLoadingWithoutHeader columns = - table loadingTableStyles <| - List.map (viewLoadingRow columns) (List.range 0 8) + tableWithoutHeader loadingTableStyles columns (viewLoadingRow columns) (List.range 0 8) viewLoadingRow : List (Column data msg) -> Int -> Html msg @@ -173,14 +154,34 @@ stylesLoadingColumn rowIndex colIndex width = -- HELP +tableWithoutHeader : List Style -> List (Column data msg) -> (a -> Html msg) -> List a -> Html msg +tableWithoutHeader styles columns toRow data = + table styles + (List.map toRow data) + + +tableWithHeader : List Style -> List (Column data msg) -> (a -> Html msg) -> List a -> Html msg +tableWithHeader styles columns toRow data = + table styles + (tableHeader columns :: List.map toRow data) + + table : List Style -> List (Html msg) -> Html msg table styles = Html.table [ css (styles ++ tableStyles) ] -tableWithHeader : List Style -> List (Column data msg) -> List (Html msg) -> Html msg -tableWithHeader styles columns rows = - table styles (viewHeaders columns :: rows) +tableHeader : List (Column data msg) -> Html msg +tableHeader columns = + tr [ css headersStyles ] (List.map tableRowHeader columns) + + +tableRowHeader : Column data msg -> Html msg +tableRowHeader (Column header _ width) = + th + [ css (width :: headerStyles) + ] + [ header ] From 7624c340fb8ca94e70767f396785b5d7e23fa24c Mon Sep 17 00:00:00 2001 From: Tereza Sokol Date: Fri, 7 Sep 2018 11:43:07 -0400 Subject: [PATCH 3/6] Add thead and tbody --- src/Nri/Ui/Table/V2.elm | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/Nri/Ui/Table/V2.elm b/src/Nri/Ui/Table/V2.elm index 1dc19aab..ad999c41 100644 --- a/src/Nri/Ui/Table/V2.elm +++ b/src/Nri/Ui/Table/V2.elm @@ -157,13 +157,16 @@ stylesLoadingColumn rowIndex colIndex width = tableWithoutHeader : List Style -> List (Column data msg) -> (a -> Html msg) -> List a -> Html msg tableWithoutHeader styles columns toRow data = table styles - (List.map toRow data) + [ tableBody toRow data + ] tableWithHeader : List Style -> List (Column data msg) -> (a -> Html msg) -> List a -> Html msg tableWithHeader styles columns toRow data = table styles - (tableHeader columns :: List.map toRow data) + [ tableHeader columns + , tableBody toRow data + ] table : List Style -> List (Html msg) -> Html msg @@ -173,7 +176,10 @@ table styles = tableHeader : List (Column data msg) -> Html msg tableHeader columns = - tr [ css headersStyles ] (List.map tableRowHeader columns) + thead [] + [ tr [ css headersStyles ] + (List.map tableRowHeader columns) + ] tableRowHeader : Column data msg -> Html msg @@ -184,6 +190,11 @@ tableRowHeader (Column header _ width) = [ header ] +tableBody : (a -> Html msg) -> List a -> Html msg +tableBody toRow items = + tbody [] (List.map toRow items) + + -- STYLES From d3d54439d4aadccc2ec7e3ba292e28e76d05eaec Mon Sep 17 00:00:00 2001 From: Brooke Date: Fri, 7 Sep 2018 09:23:16 -0700 Subject: [PATCH 4/6] creates modal V3 --- elm-package.json | 1 + src/Nri/Ui/Modal/V3.elm | 245 ++++++++++++++++++++++++++++++ styleguide-app/Examples/Modal.elm | 4 +- 3 files changed, 248 insertions(+), 2 deletions(-) create mode 100644 src/Nri/Ui/Modal/V3.elm diff --git a/elm-package.json b/elm-package.json index a75f9f37..c2bd79ff 100644 --- a/elm-package.json +++ b/elm-package.json @@ -30,6 +30,7 @@ "Nri.Ui.InputStyles", "Nri.Ui.Modal.V1", "Nri.Ui.Modal.V2", + "Nri.Ui.Modal.V3", "Nri.Ui.Outline.V1", "Nri.Ui.Page.V1", "Nri.Ui.Palette.V1", diff --git a/src/Nri/Ui/Modal/V3.elm b/src/Nri/Ui/Modal/V3.elm new file mode 100644 index 00000000..32c84307 --- /dev/null +++ b/src/Nri/Ui/Modal/V3.elm @@ -0,0 +1,245 @@ +module Nri.Ui.Modal.V3 + exposing + ( Model + , info + , warning + ) + +{-| Changes from V2: + + - Add assets for close button + +@docs Model +@docs info +@docs warning + +-} + +import Accessibility.Styled as Html exposing (..) +import Accessibility.Styled.Role as Role +import Accessibility.Styled.Widget as Widget +import Css +import Css.Foreign exposing (Snippet, body, children, descendants, everything, selector) +import Html.Styled +import Html.Styled.Events exposing (onClick) +import Nri.Ui +import Nri.Ui.AssetPath exposing (Asset(..)) +import Nri.Ui.Colors.Extra +import Nri.Ui.Colors.V1 +import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Icon.V3 as Icon + + +{-| + + - `onDismiss`: If `Nothing`, the modal will not be dismissable + - `visibleTitle`: If `False`, the title will still be used for screen readers + - `content`: This will be placed in a `width:100%` div in the main area of the modal + - `footerContent`: The optional items here will be stacked below the main content area and center-aligned. + Commonly you will either give a list of Nri.Ui.Buttons, + or an empty list. + +-} +type alias Model msg = + { title : String + , visibleTitle : Bool + , content : Html msg + , footerContent : List (Html msg) + , onDismiss : Maybe msg + , width : Maybe Int + } + + +type alias Assets r = + { r | icons_xBlue_svg : Asset } + + +type ModalType + = Info + | Warning + + +{-| -} +info : Assets r -> Model msg -> Html msg +info assets = + view assets Info + + +{-| -} +warning : Assets r -> Model msg -> Html msg +warning assets = + view assets Warning + + +view : Assets r -> ModalType -> Model msg -> Html msg +view assets modalType { title, visibleTitle, content, onDismiss, footerContent, width } = + Nri.Ui.styled div + "modal-backdrop-container" + ((case modalType of + Info -> + Css.backgroundColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Nri.Ui.Colors.V1.navy) + + Warning -> + Css.backgroundColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Nri.Ui.Colors.V1.gray20) + ) + :: [ Css.height (Css.vh 100) + , Css.left Css.zero + , Css.overflow Css.hidden + , Css.position Css.fixed + , Css.top Css.zero + , Css.width (Css.pct 100) + , Css.zIndex (Css.int 200) + , Css.displayFlex + , Css.alignItems Css.center + , Css.justifyContent Css.center + ] + ) + [ Role.dialog + , Widget.label title + , Widget.modal True + ] + [ Nri.Ui.styled Html.Styled.div + "modal-click-catcher" + [ Css.bottom Css.zero + , Css.left Css.zero + , Css.position Css.absolute + , Css.right Css.zero + , Css.top Css.zero + ] + (case onDismiss of + Nothing -> + [] + + Just msg -> + [ onClick msg ] + ) + [] + , Nri.Ui.styled div + "modal-container" + [ Css.width (Css.px 600) + , Css.maxHeight <| Css.calc (Css.vh 100) Css.minus (Css.px 100) + , Css.padding4 (Css.px 35) Css.zero (Css.px 25) Css.zero + , Css.margin2 (Css.px 75) Css.auto + , Css.backgroundColor Nri.Ui.Colors.V1.white + , Css.borderRadius (Css.px 20) + , Css.property "box-shadow" "0 1px 10px 0 rgba(0, 0, 0, 0.35)" + , Css.position Css.relative -- required for closeButtonContainer + , Css.displayFlex + , Css.alignItems Css.center + , Css.flexDirection Css.column + , Css.flexWrap Css.noWrap + , Fonts.baseFont + ] + [] + [ -- This global