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

Add the icon and title to the view

Browse Source
This commit is contained in:
Tessa Kelly 2019-04-04 18:41:05 -07:00
parent 98eff48478
commit ff675ad8fc
2 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/Nri/Ui/SlideModal/V1.elm
View File

@ -4,21 +4,23 @@ import Accessibility.Styled as Html exposing (..)
import Accessibility.Styled.Role as Role
import Accessibility.Styled.Widget as Widget
import Css
import Css.Global exposing (Snippet, body, children, descendants, everything, selector)
import Css.Global
import Html.Styled
import Html.Styled.Attributes exposing (css)
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.Colors.V1 as Colors
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Icon.V3 as Icon
import Nri.Ui.Text.V2 as Text
view { content, onDismiss, footerContent, width } =
view { icon, title, content, onDismiss, footerContent, width } =
Nri.Ui.styled div
"modal-backdrop-container"
(Css.backgroundColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Nri.Ui.Colors.V1.navy)
(Css.backgroundColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.navy)
:: [ Css.height (Css.vh 100)
, Css.left Css.zero
, Css.overflow Css.hidden
@ -37,13 +39,13 @@ view { content, onDismiss, footerContent, width } =
[ Nri.Ui.styled div
"modal-container"
[ Css.width (Css.px 600)
, Css.minHeight (Css.px 400)
, 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.backgroundColor Colors.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
@ -58,6 +60,8 @@ view { content, onDismiss, footerContent, width } =
[ Css.Global.body
[ Css.overflow Css.hidden ]
]
, viewIcon icon
, Text.subHeading [ Html.text title ]
, viewContent content
, viewFooter footerContent
]
@ -110,3 +114,23 @@ viewFooter footerContent =
)
footerContent
)
viewIcon : Html msg -> Html msg
viewIcon svg =
div
[ css
[ Css.width (Css.px 100)
, Css.height (Css.px 100)
, Css.displayFlex
, Css.alignItems Css.center
, Css.justifyContent Css.center
, Css.Global.children
[ Css.Global.svg
[ Css.maxHeight (Css.px 100)
, Css.width (Css.px 100)
]
]
]
]
[ svg ]

13
styleguide-app/Examples/SlideModal.elm
View File

@ -12,6 +12,7 @@ import Css exposing (..)
import Html.Styled.Attributes exposing (css)
import ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Button.V8 as Button
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.SlideModal.V1 as SlideModal
@ -81,7 +82,17 @@ modalLaunchButton =
viewModal : Html Msg
viewModal =
SlideModal.view
{ content = text "This is where the content goes!"
{ icon =
div
[ css
[ Css.backgroundColor Colors.gray45
, Css.height (pct 100)
, Css.width (pct 100)
]
]
[]
, title = "Welcome to Self-Review, FirstName!"
, content = text "This is where the content goes!"
, onDismiss = Just DismissModal
, width = Nothing
, footerContent =