mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-18 03:01:41 +03:00
delete callout
This commit is contained in:
Ben Dansby
parent
794d2fb032
commit
7cc7a549d9
@ -1,199 +0,0 @@
|
|||||||
module Nri.Ui.Callout.V1 exposing
|
|
||||||
( Attribute, callout
|
|
||||||
, label
|
|
||||||
, containerCss, contentCss
|
|
||||||
, custom
|
|
||||||
)
|
|
||||||
|
|
||||||
{-|
|
|
||||||
|
|
||||||
|
|
||||||
# DEPRECATED: talk with your designer, but generally prefer `Message.large`, or consider adding `Message.medium`
|
|
||||||
|
|
||||||
@docs Attribute, callout
|
|
||||||
|
|
||||||
@docs label
|
|
||||||
|
|
||||||
@docs containerCss, contentCss
|
|
||||||
|
|
||||||
@docs custom
|
|
||||||
|
|
||||||
-}
|
|
||||||
|
|
||||||
import Css
|
|
||||||
import Css.Global
|
|
||||||
import Html.Styled as Html exposing (Html)
|
|
||||||
import Html.Styled.Attributes exposing (css)
|
|
||||||
import Nri.Ui.Colors.V1 as Colors
|
|
||||||
import Nri.Ui.Fonts.V1 as Fonts
|
|
||||||
|
|
||||||
|
|
||||||
{-| Attributes of callouts. Use functions like [`label`](#label) and
|
|
||||||
[`containerCss`](#containerCss) to construct these.
|
|
||||||
-}
|
|
||||||
type Attribute msg
|
|
||||||
= Label (Maybe (Html msg))
|
|
||||||
| ContentCss (List Css.Style)
|
|
||||||
| ContainerCss (List Css.Style)
|
|
||||||
| Custom (Html.Attribute msg)
|
|
||||||
|
|
||||||
|
|
||||||
{-| Label the callout.
|
|
||||||
|
|
||||||
label (Html.text "Hello, World")
|
|
||||||
|
|
||||||
-}
|
|
||||||
label : Html msg -> Attribute msg
|
|
||||||
label =
|
|
||||||
Label << Just
|
|
||||||
|
|
||||||
|
|
||||||
{-| Customize styles for the outermost element of the callout. Use this to
|
|
||||||
adjust margin and padding around the callout (it does not have any of either by
|
|
||||||
default, but it does set `box-size: border-box` on itself).
|
|
||||||
|
|
||||||
containerCss [ Css.marginBottom (Css.px 20) ]
|
|
||||||
|
|
||||||
These styles are applied after the default styles so you can override the
|
|
||||||
defaults when necessary without using `!important`
|
|
||||||
|
|
||||||
-}
|
|
||||||
containerCss : List Css.Style -> Attribute msg
|
|
||||||
containerCss =
|
|
||||||
ContainerCss
|
|
||||||
|
|
||||||
|
|
||||||
{-| Customize styles for the parent element of the content you provide. Use
|
|
||||||
this to override spacing inside the callout, if necessary.
|
|
||||||
|
|
||||||
contentCss [ Css.textTransform Css.uppercase ]
|
|
||||||
|
|
||||||
These styles are applied after the default styles so you can override the
|
|
||||||
defaults when necessary without using `!important`
|
|
||||||
|
|
||||||
-}
|
|
||||||
contentCss : List Css.Style -> Attribute msg
|
|
||||||
contentCss =
|
|
||||||
ContentCss
|
|
||||||
|
|
||||||
|
|
||||||
{-| Add custom attributes. This is your gateway to customize (or break) the
|
|
||||||
callout however you want, so be careful! If you find yourself doing this a lot,
|
|
||||||
please consider adding another `Attribute` constructor to the module.
|
|
||||||
|
|
||||||
custom (title "beta warning")
|
|
||||||
|
|
||||||
-}
|
|
||||||
custom : Html.Attribute msg -> Attribute msg
|
|
||||||
custom =
|
|
||||||
Custom
|
|
||||||
|
|
||||||
|
|
||||||
type alias Attrs msg =
|
|
||||||
{ label : Maybe (Html msg)
|
|
||||||
, containerCss : List Css.Style
|
|
||||||
, contentCss : List Css.Style
|
|
||||||
, customAttrs : List (Html.Attribute msg)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
defaultAttrs : Attrs msg
|
|
||||||
defaultAttrs =
|
|
||||||
{ label = Nothing
|
|
||||||
, containerCss = []
|
|
||||||
, contentCss = []
|
|
||||||
, customAttrs = []
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
customize : Attribute msg -> Attrs msg -> Attrs msg
|
|
||||||
customize attr attrs =
|
|
||||||
case attr of
|
|
||||||
Label text ->
|
|
||||||
{ attrs | label = text }
|
|
||||||
|
|
||||||
ContentCss css ->
|
|
||||||
{ attrs | contentCss = css }
|
|
||||||
|
|
||||||
ContainerCss css ->
|
|
||||||
{ attrs | containerCss = css }
|
|
||||||
|
|
||||||
Custom custom_ ->
|
|
||||||
{ attrs | customAttrs = custom_ :: attrs.customAttrs }
|
|
||||||
|
|
||||||
|
|
||||||
{-| Render a callout. Use this like any other HTML node, but with specific
|
|
||||||
attribute constructors.
|
|
||||||
|
|
||||||
callout
|
|
||||||
[ label (Html.text "BETA") ]
|
|
||||||
[ Html.text "This feature is still in beta. Careful of sharp edges." ]
|
|
||||||
|
|
||||||
-}
|
|
||||||
callout : List (Attribute msg) -> List (Html msg) -> Html msg
|
|
||||||
callout attrs children =
|
|
||||||
let
|
|
||||||
finalAttrs =
|
|
||||||
List.foldl customize defaultAttrs attrs
|
|
||||||
in
|
|
||||||
Html.div
|
|
||||||
(css
|
|
||||||
([ Css.boxSizing Css.borderBox
|
|
||||||
, Css.backgroundColor Colors.sunshine
|
|
||||||
, Css.displayFlex
|
|
||||||
, Css.flexDirection Css.row
|
|
||||||
, Css.minHeight (Css.px 42)
|
|
||||||
, Css.alignItems Css.stretch
|
|
||||||
, Css.border3 (Css.px 1) Css.solid Colors.highlightYellow
|
|
||||||
, Css.borderRadius (Css.px 4)
|
|
||||||
]
|
|
||||||
++ finalAttrs.containerCss
|
|
||||||
)
|
|
||||||
:: finalAttrs.customAttrs
|
|
||||||
)
|
|
||||||
[ case finalAttrs.label of
|
|
||||||
Just text ->
|
|
||||||
Html.div
|
|
||||||
[ css
|
|
||||||
[ -- position
|
|
||||||
Css.backgroundColor Colors.highlightYellow
|
|
||||||
, Css.color Colors.highlightYellowDark
|
|
||||||
, Css.padding2 Css.zero (Css.px 20)
|
|
||||||
, Css.displayFlex
|
|
||||||
, Css.alignItems Css.center
|
|
||||||
|
|
||||||
-- text
|
|
||||||
, Fonts.baseFont
|
|
||||||
, Css.fontWeight Css.bold
|
|
||||||
, Css.fontSize (Css.px 12)
|
|
||||||
]
|
|
||||||
]
|
|
||||||
[ text ]
|
|
||||||
|
|
||||||
Nothing ->
|
|
||||||
Html.text ""
|
|
||||||
, Html.div
|
|
||||||
[ css
|
|
||||||
([ -- position
|
|
||||||
Css.padding2 (Css.px 6) (Css.px 14)
|
|
||||||
, Css.displayFlex
|
|
||||||
, Css.alignItems Css.center
|
|
||||||
|
|
||||||
-- text
|
|
||||||
, Css.fontSize (Css.px 12)
|
|
||||||
, Css.color Colors.gray20
|
|
||||||
, Fonts.baseFont
|
|
||||||
|
|
||||||
-- children
|
|
||||||
, Css.Global.descendants
|
|
||||||
[ Css.Global.a
|
|
||||||
[ Css.color Colors.azure
|
|
||||||
, Css.textDecoration Css.none
|
|
||||||
]
|
|
||||||
]
|
|
||||||
]
|
|
||||||
++ finalAttrs.contentCss
|
|
||||||
)
|
|
||||||
]
|
|
||||||
[ Html.p [ css [ Css.margin Css.zero ] ] children ]
|
|
||||||
]
|
|
||||||
@ -4,7 +4,6 @@ import Example exposing (Example)
|
|||||||
import Examples.Accordion as Accordion
|
import Examples.Accordion as Accordion
|
||||||
import Examples.AssignmentIcon as AssignmentIcon
|
import Examples.AssignmentIcon as AssignmentIcon
|
||||||
import Examples.Button as Button
|
import Examples.Button as Button
|
||||||
import Examples.Callout as Callout
|
|
||||||
import Examples.Checkbox as Checkbox
|
import Examples.Checkbox as Checkbox
|
||||||
import Examples.ClickableSvg as ClickableSvg
|
import Examples.ClickableSvg as ClickableSvg
|
||||||
import Examples.ClickableText as ClickableText
|
import Examples.ClickableText as ClickableText
|
||||||
@ -96,25 +95,6 @@ all =
|
|||||||
ButtonState childState ->
|
ButtonState childState ->
|
||||||
Just childState
|
Just childState
|
||||||
|
|
||||||
_ ->
|
|
||||||
Nothing
|
|
||||||
)
|
|
||||||
, Callout.example
|
|
||||||
|> Example.wrapMsg CalloutMsg
|
|
||||||
(\msg ->
|
|
||||||
case msg of
|
|
||||||
CalloutMsg childMsg ->
|
|
||||||
Just childMsg
|
|
||||||
|
|
||||||
_ ->
|
|
||||||
Nothing
|
|
||||||
)
|
|
||||||
|> Example.wrapState CalloutState
|
|
||||||
(\msg ->
|
|
||||||
case msg of
|
|
||||||
CalloutState childState ->
|
|
||||||
Just childState
|
|
||||||
|
|
||||||
_ ->
|
_ ->
|
||||||
Nothing
|
Nothing
|
||||||
)
|
)
|
||||||
@ -752,7 +732,6 @@ type State
|
|||||||
= AccordionState Accordion.State
|
= AccordionState Accordion.State
|
||||||
| AssignmentIconState AssignmentIcon.State
|
| AssignmentIconState AssignmentIcon.State
|
||||||
| ButtonState Button.State
|
| ButtonState Button.State
|
||||||
| CalloutState Callout.State
|
|
||||||
| CheckboxState Checkbox.State
|
| CheckboxState Checkbox.State
|
||||||
| ClickableSvgState ClickableSvg.State
|
| ClickableSvgState ClickableSvg.State
|
||||||
| ClickableTextState ClickableText.State
|
| ClickableTextState ClickableText.State
|
||||||
@ -792,7 +771,6 @@ type Msg
|
|||||||
= AccordionMsg Accordion.Msg
|
= AccordionMsg Accordion.Msg
|
||||||
| AssignmentIconMsg AssignmentIcon.Msg
|
| AssignmentIconMsg AssignmentIcon.Msg
|
||||||
| ButtonMsg Button.Msg
|
| ButtonMsg Button.Msg
|
||||||
| CalloutMsg Callout.Msg
|
|
||||||
| CheckboxMsg Checkbox.Msg
|
| CheckboxMsg Checkbox.Msg
|
||||||
| ClickableSvgMsg ClickableSvg.Msg
|
| ClickableSvgMsg ClickableSvg.Msg
|
||||||
| ClickableTextMsg ClickableText.Msg
|
| ClickableTextMsg ClickableText.Msg
|
||||||
|
|||||||
@ -1,78 +0,0 @@
|
|||||||
module Examples.Callout exposing (example, State, Msg)
|
|
||||||
|
|
||||||
{-|
|
|
||||||
|
|
||||||
@docs example, State, Msg
|
|
||||||
|
|
||||||
-}
|
|
||||||
|
|
||||||
import Accessibility.Styled exposing (text)
|
|
||||||
import Category exposing (Category(..))
|
|
||||||
import Css
|
|
||||||
import Example exposing (Example)
|
|
||||||
import Html.Styled as Html
|
|
||||||
import Html.Styled.Attributes exposing (href, title)
|
|
||||||
import KeyboardSupport exposing (Direction(..), Key(..))
|
|
||||||
import Nri.Ui.Callout.V1 as Callout exposing (callout)
|
|
||||||
import Nri.Ui.Heading.V2 as Heading
|
|
||||||
|
|
||||||
|
|
||||||
type alias State =
|
|
||||||
()
|
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
|
||||||
type alias Msg =
|
|
||||||
()
|
|
||||||
|
|
||||||
|
|
||||||
{-| -}
|
|
||||||
example : Example State Msg
|
|
||||||
example =
|
|
||||||
{ name = "Callout"
|
|
||||||
, version = 1
|
|
||||||
, categories = [ Messaging ]
|
|
||||||
, keyboardSupport = []
|
|
||||||
, state = ()
|
|
||||||
, update = \_ state -> ( state, Cmd.none )
|
|
||||||
, subscriptions = \_ -> Sub.none
|
|
||||||
, view =
|
|
||||||
\() ->
|
|
||||||
[ Heading.h2 [ Heading.style Heading.Top ]
|
|
||||||
[ text "DEPRECATED: talk with your designer, but generally prefer `Message.large`, or consider adding `Message.medium`"
|
|
||||||
]
|
|
||||||
, -- PLAIN
|
|
||||||
Html.h3 [] [ Html.text "Originally Designed Use Case" ]
|
|
||||||
, callout
|
|
||||||
[ Callout.label (Html.text "BETA")
|
|
||||||
, Callout.custom (title "beta warning")
|
|
||||||
]
|
|
||||||
[ Html.text "This tab is still a work in progress; some of your student's information may be missing."
|
|
||||||
, Html.br [] []
|
|
||||||
, Html.text "To share your thoughts and help us improve the experience, "
|
|
||||||
, Html.a [ href "#" ] [ Html.text "click here" ]
|
|
||||||
, Html.text "."
|
|
||||||
]
|
|
||||||
|
|
||||||
-- WITH SIDE TEXT
|
|
||||||
, Html.h3 [] [ Html.text "Without side text" ]
|
|
||||||
, callout
|
|
||||||
[ Callout.custom (title "no side text") ]
|
|
||||||
[ Html.text "I feel weird without my side text!" ]
|
|
||||||
|
|
||||||
-- WITH CSS CUSTOMIZATIONS
|
|
||||||
, Html.h3 [] [ Html.text "With CSS customizations" ]
|
|
||||||
, callout
|
|
||||||
[ Callout.containerCss [ Css.margin (Css.px 20) ]
|
|
||||||
, Callout.label (Html.text "HMMM")
|
|
||||||
, Callout.custom (title "margin")
|
|
||||||
]
|
|
||||||
[ Html.text "My container styles are customized to add margin around the callout" ]
|
|
||||||
, callout
|
|
||||||
[ Callout.contentCss [ Css.textTransform Css.uppercase ]
|
|
||||||
, Callout.label (Html.text "WOW!")
|
|
||||||
, Callout.custom (title "yelling")
|
|
||||||
]
|
|
||||||
[ Html.text "My content styles are customized to yell about everything" ]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user