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.AssignmentIcon as AssignmentIcon
|
||||
import Examples.Button as Button
|
||||
import Examples.Callout as Callout
|
||||
import Examples.Checkbox as Checkbox
|
||||
import Examples.ClickableSvg as ClickableSvg
|
||||
import Examples.ClickableText as ClickableText
|
||||
@ -96,25 +95,6 @@ all =
|
||||
ButtonState 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
|
||||
)
|
||||
@ -752,7 +732,6 @@ type State
|
||||
= AccordionState Accordion.State
|
||||
| AssignmentIconState AssignmentIcon.State
|
||||
| ButtonState Button.State
|
||||
| CalloutState Callout.State
|
||||
| CheckboxState Checkbox.State
|
||||
| ClickableSvgState ClickableSvg.State
|
||||
| ClickableTextState ClickableText.State
|
||||
@ -792,7 +771,6 @@ type Msg
|
||||
= AccordionMsg Accordion.Msg
|
||||
| AssignmentIconMsg AssignmentIcon.Msg
|
||||
| ButtonMsg Button.Msg
|
||||
| CalloutMsg Callout.Msg
|
||||
| CheckboxMsg Checkbox.Msg
|
||||
| ClickableSvgMsg ClickableSvg.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