From 7cc7a549d92d14b6e356f3bddc10ee2f466f3b12 Mon Sep 17 00:00:00 2001 From: Ben Dansby Date: Tue, 7 Sep 2021 08:42:38 -0700 Subject: [PATCH] delete callout --- src/Nri/Ui/Callout/V1.elm | 199 ---------------------------- styleguide-app/Examples.elm | 22 --- styleguide-app/Examples/Callout.elm | 78 ----------- 3 files changed, 299 deletions(-) delete mode 100644 src/Nri/Ui/Callout/V1.elm delete mode 100644 styleguide-app/Examples/Callout.elm diff --git a/src/Nri/Ui/Callout/V1.elm b/src/Nri/Ui/Callout/V1.elm deleted file mode 100644 index ba7c5597..00000000 --- a/src/Nri/Ui/Callout/V1.elm +++ /dev/null @@ -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 ] - ] diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 61cbe501..5de1e63c 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -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 diff --git a/styleguide-app/Examples/Callout.elm b/styleguide-app/Examples/Callout.elm deleted file mode 100644 index bf490215..00000000 --- a/styleguide-app/Examples/Callout.elm +++ /dev/null @@ -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" ] - ] - }