1
1
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-18 11:11:38 +03:00

delete callout

This commit is contained in:
Ben Dansby 2021-09-07 08:42:38 -07:00
parent 794d2fb032
commit 7cc7a549d9
3 changed files with 0 additions and 299 deletions
src/Nri/Ui/Callout
styleguide-app

View File

@ -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 ]
]

View File

@ -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

View File

@ -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" ]
]
}