From 18af70fe96dc7554ebf08faa7b7f1598666faff2 Mon Sep 17 00:00:00 2001 From: Brian Hicks Date: Wed, 1 Apr 2020 06:30:28 -0500 Subject: [PATCH] restore modules that were actually used --- elm.json | 17 +- script/deprecated-imports.csv | 14 + src/Nri/Ui/Alert/V2.elm | 121 +++++ src/Nri/Ui/Alert/V3.elm | 156 ++++++ src/Nri/Ui/BannerAlert/V2.elm | 114 ++++ src/Nri/Ui/BannerAlert/V3.elm | 138 +++++ src/Nri/Ui/Button/V3.elm | 780 +++++++++++++++++++++++++++ src/Nri/Ui/Button/V4.elm | 811 ++++++++++++++++++++++++++++ src/Nri/Ui/Button/V6.elm | 810 ++++++++++++++++++++++++++++ src/Nri/Ui/Button/V7.elm | 818 +++++++++++++++++++++++++++++ src/Nri/Ui/Heading/V1.elm | 199 +++++++ src/Nri/Ui/Modal/V2.elm | 213 ++++++++ src/Nri/Ui/Modal/V3.elm | 246 +++++++++ src/Nri/Ui/Page/V2.elm | 201 +++++++ src/Nri/Ui/SegmentedControl/V6.elm | 150 ++++++ src/Nri/Ui/Tabs/V3.elm | 368 +++++++++++++ src/Nri/Ui/TextArea/V3.elm | 202 +++++++ tests/elm-verify-examples.json | 15 + 18 files changed, 5372 insertions(+), 1 deletion(-) create mode 100644 src/Nri/Ui/Alert/V2.elm create mode 100644 src/Nri/Ui/Alert/V3.elm create mode 100644 src/Nri/Ui/BannerAlert/V2.elm create mode 100644 src/Nri/Ui/BannerAlert/V3.elm create mode 100644 src/Nri/Ui/Button/V3.elm create mode 100644 src/Nri/Ui/Button/V4.elm create mode 100644 src/Nri/Ui/Button/V6.elm create mode 100644 src/Nri/Ui/Button/V7.elm create mode 100644 src/Nri/Ui/Heading/V1.elm create mode 100644 src/Nri/Ui/Modal/V2.elm create mode 100644 src/Nri/Ui/Modal/V3.elm create mode 100644 src/Nri/Ui/Page/V2.elm create mode 100644 src/Nri/Ui/SegmentedControl/V6.elm create mode 100644 src/Nri/Ui/Tabs/V3.elm create mode 100644 src/Nri/Ui/TextArea/V3.elm diff --git a/elm.json b/elm.json index b8e45a09..a5866414 100644 --- a/elm.json +++ b/elm.json @@ -7,11 +7,19 @@ "exposed-modules": [ "Nri.Ui", "Nri.Ui.Accordion.V1", + "Nri.Ui.Alert.V2", + "Nri.Ui.Alert.V3", "Nri.Ui.Alert.V4", "Nri.Ui.AssetPath", "Nri.Ui.AssignmentIcon.V1", + "Nri.Ui.BannerAlert.V2", + "Nri.Ui.BannerAlert.V3", "Nri.Ui.BannerAlert.V6", + "Nri.Ui.Button.V3", + "Nri.Ui.Button.V4", "Nri.Ui.Button.V5", + "Nri.Ui.Button.V6", + "Nri.Ui.Button.V7", "Nri.Ui.Button.V8", "Nri.Ui.Button.V10", "Nri.Ui.Callout.V1", @@ -29,6 +37,7 @@ "Nri.Ui.Dropdown.V2", "Nri.Ui.Effects.V1", "Nri.Ui.Fonts.V1", + "Nri.Ui.Heading.V1", "Nri.Ui.Heading.V2", "Nri.Ui.Html.Attributes.V2", "Nri.Ui.Html.V3", @@ -38,7 +47,10 @@ "Nri.Ui.InputStyles.V2", "Nri.Ui.Logo.V1", "Nri.Ui.MasteryIcon.V1", + "Nri.Ui.Modal.V2", + "Nri.Ui.Modal.V3", "Nri.Ui.Modal.V8", + "Nri.Ui.Page.V2", "Nri.Ui.Page.V3", "Nri.Ui.Palette.V1", "Nri.Ui.Pennant.V2", @@ -46,6 +58,7 @@ "Nri.Ui.PremiumCheckbox.V2", "Nri.Ui.PremiumCheckbox.V3", "Nri.Ui.PremiumCheckbox.V6", + "Nri.Ui.SegmentedControl.V6", "Nri.Ui.SegmentedControl.V7", "Nri.Ui.SegmentedControl.V8", "Nri.Ui.Select.V5", @@ -60,9 +73,11 @@ "Nri.Ui.Table.V4", "Nri.Ui.Table.V5", "Nri.Ui.Tabs.V4", + "Nri.Ui.Tabs.V3", "Nri.Ui.Text.V2", "Nri.Ui.Text.V4", "Nri.Ui.Text.Writing.V1", + "Nri.Ui.TextArea.V3", "Nri.Ui.TextArea.V4", "Nri.Ui.TextInput.V3", "Nri.Ui.TextInput.V4", @@ -90,4 +105,4 @@ "avh4/elm-program-test": "3.1.0 <= v < 4.0.0", "elm-explorations/test": "1.2.0 <= v < 2.0.0" } -} \ No newline at end of file +} diff --git a/script/deprecated-imports.csv b/script/deprecated-imports.csv index 590210a3..36d7d642 100644 --- a/script/deprecated-imports.csv +++ b/script/deprecated-imports.csv @@ -1,7 +1,13 @@ filename,name,version src/EventExtras.elm,Html,DEPRECATED +src/Nri/Ui/Tabs/V3.elm,Accessibility.Aria,DEPRECATED +src/Nri/Ui/Tabs/V3.elm,Accessibility.Key,DEPRECATED +src/Nri/Ui/Tabs/V3.elm,Accessibility.Role,DEPRECATED +src/Nri/Ui/Tabs/V3.elm,Accessibility.Widget,DEPRECATED src/Nri/Ui/Page/V3.elm,Nri.Ui.Button,5 src/Nri/Ui/Page/V3.elm,Nri.Ui.Text,2 +src/Nri/Ui/Page/V2.elm,Nri.Ui.Button,5 +src/Nri/Ui/Page/V2.elm,Nri.Ui.Text,2 src/Nri/Ui/PremiumCheckbox/V3.elm,Nri.Ui.Checkbox,4 src/Nri/Ui/PremiumCheckbox/V2.elm,Nri.Ui.Checkbox,3 src/Nri/Ui/PremiumCheckbox/V1.elm,Nri.Ui.Checkbox,3 @@ -11,14 +17,22 @@ src/Nri/Ui/SlideModal/V2.elm,Nri.Ui.Text,2 src/Nri/Ui/SlideModal/V1.elm,Nri.Ui.Button,8 src/Nri/Ui/SlideModal/V1.elm,Nri.Ui.Icon,3 src/Nri/Ui/SlideModal/V1.elm,Nri.Ui.Text,2 +src/Nri/Ui/Alert/V3.elm,Nri.Ui.Icon,3 +src/Nri/Ui/Alert/V2.elm,Nri.Ui.Icon,3 src/Nri/Ui/Alert/V4.elm,Nri.Ui.Icon,3 src/Nri/Ui/SortableTable/V1.elm,Nri.Ui.Table,4 src/Nri/Ui/Html/Attributes/Extra.elm,Html,DEPRECATED src/Nri/Ui/Button/V8.elm,Html,DEPRECATED +src/Nri/Ui/Button/V3.elm,Nri.Ui.Icon,3 src/Nri/Ui/Button/V5.elm,Nri.Ui.Icon,3 +src/Nri/Ui/Button/V4.elm,Nri.Ui.Icon,3 +src/Nri/Ui/Button/V6.elm,Nri.Ui.Icon,4 +src/Nri/Ui/Button/V7.elm,Nri.Ui.Icon,4 +src/Nri/Ui/SegmentedControl/V6.elm,Nri.Ui.Icon,3 src/Nri/Ui/Icon/V3.elm,Accessibility.Role,DEPRECATED src/Nri/Ui/Icon/V3.elm,Html,DEPRECATED src/Nri/Ui/Icon/V5.elm,Accessibility.Role,DEPRECATED src/Nri/Ui/Icon/V5.elm,Html,DEPRECATED src/Nri/Ui/Icon/V4.elm,Accessibility.Role,DEPRECATED src/Nri/Ui/Icon/V4.elm,Html,DEPRECATED +src/Nri/Ui/Modal/V3.elm,Nri.Ui.Icon,3 diff --git a/src/Nri/Ui/Alert/V2.elm b/src/Nri/Ui/Alert/V2.elm new file mode 100644 index 00000000..c4373b02 --- /dev/null +++ b/src/Nri/Ui/Alert/V2.elm @@ -0,0 +1,121 @@ +module Nri.Ui.Alert.V2 exposing + ( error + , success + , tip + , warning + ) + +{-| UI components that highlight information to the user. + +@docs error +@docs success +@docs tip +@docs warning + +-} + +import Accessibility.Styled as Html exposing (Html) +import Css +import Css.Global +import Html.Styled exposing (fromUnstyled) +import Html.Styled.Attributes exposing (css) +import Markdown +import Nri.Ui +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Icon.V3 as Icon + + +{-| -} +error : { r | exclamation : String } -> String -> Html msg +error assets content = + alert + [ iconContainer [ Css.color Colors.purple ] + (Icon.decorativeIcon (Icon.exclamation assets)) + , viewAlertContent Colors.purpleDark content + ] + + +{-| -} +success : { r | checkmark : String } -> String -> Html msg +success assets content = + alert + [ iconContainer + [ Css.color Colors.white + , Css.backgroundColor Colors.green + , Css.Global.children [ Css.Global.svg [ Css.maxWidth (Css.px 12) ] ] + ] + (Icon.decorativeIcon (Icon.checkMarkSvg assets)) + , viewAlertContent Colors.greenDarkest content + ] + + +{-| -} +tip : { r | bulb : String } -> String -> Html msg +tip assets content = + alert + [ iconContainer [ Css.color Colors.yellow ] + (Icon.decorativeIcon (Icon.bulb assets)) + , viewAlertContent Colors.navy content + ] + + +{-| -} +warning : { r | exclamation : String } -> String -> Html msg +warning assets content = + alert + [ iconContainer [ Css.color Colors.red ] + (Icon.decorativeIcon (Icon.exclamation assets)) + , viewAlertContent Colors.red content + ] + + +alert : List (Html msg) -> Html msg +alert = + Nri.Ui.styled Html.div + "Nri-Ui-Alert-V2__alert" + [ Css.displayFlex + , Css.justifyContent Css.start + , Css.alignItems Css.center + , Css.paddingTop (Css.px 6) + , Css.paddingBottom (Css.px 8) + ] + [] + + +iconContainer : List Css.Style -> Html msg -> Html msg +iconContainer styles icon = + Nri.Ui.styled Html.div + "Nri-Ui-Alert-V2__iconContainer" + (styles + ++ [ -- Content positioning + Css.displayFlex + , Css.justifyContent Css.center + , Css.alignItems Css.center + , Css.marginRight (Css.px 5) + + -- Size + , Css.borderRadius (Css.px 13) + , Css.maxHeight (Css.px 20) + , Css.maxWidth (Css.px 20) + , Css.minHeight (Css.px 20) + , Css.minWidth (Css.px 20) + ] + ) + [] + [ icon ] + + +viewAlertContent : Css.ColorValue compatible -> String -> Html.Styled.Html msg +viewAlertContent color content = + Nri.Ui.styled Html.div + "Nri-Ui-Alert-V2__viewAlertContent" + [ Css.color color + , Fonts.baseFont + , Css.fontSize (Css.px 13) + , Css.lineHeight (Css.num 1.2) + , Css.listStyleType Css.none + , Css.Global.descendants [ Css.Global.p [ Css.margin Css.zero ] ] + ] + [] + (Markdown.toHtml Nothing content |> List.map fromUnstyled) diff --git a/src/Nri/Ui/Alert/V3.elm b/src/Nri/Ui/Alert/V3.elm new file mode 100644 index 00000000..434a9145 --- /dev/null +++ b/src/Nri/Ui/Alert/V3.elm @@ -0,0 +1,156 @@ +module Nri.Ui.Alert.V3 exposing + ( error + , success + , tip + , warning + ) + +{-| UI components that highlight information to the user. + +@docs error +@docs success +@docs tip +@docs warning + +-} + +import Accessibility.Styled as Html exposing (Html) +import Css +import Css.Global +import Html.Styled exposing (fromUnstyled) +import Html.Styled.Attributes exposing (css) +import Markdown +import Nri.Ui +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Fonts.V1 as Fonts +import Nri.Ui.Icon.V3 as Icon +import Nri.Ui.SpriteSheet exposing (bulb, checkmark, exclamationMark) +import Nri.Ui.Svg.V1 as NriSvg exposing (Svg) + + +{-| -} +error : String -> Html msg +error content = + alert + [ exclamation Colors.purple + , viewAlertContent Colors.purpleDark content + ] + + +{-| -} +success : String -> Html msg +success content = + alert + [ iconContainer + [ Css.color Colors.white + , Css.backgroundColor Colors.green + ] + (Html.div + [ css + [ Css.width (Css.px 12) + , Css.height (Css.px 12) + , Css.margin Css.auto + ] + ] + [ NriSvg.toHtml checkmark ] + ) + , viewAlertContent Colors.greenDarkest content + ] + + +{-| -} +tip : String -> Html msg +tip content = + alert + [ iconContainer [ Css.color Colors.yellow ] (NriSvg.toHtml bulb) + , viewAlertContent Colors.navy content + ] + + +{-| -} +warning : String -> Html msg +warning content = + alert + [ exclamation Colors.red + , viewAlertContent Colors.red content + ] + + +alert : List (Html msg) -> Html msg +alert = + Nri.Ui.styled Html.div + "Nri-Ui-Alert-V3__alert" + [ Css.displayFlex + , Css.justifyContent Css.start + , Css.alignItems Css.center + , Css.paddingTop (Css.px 6) + , Css.paddingBottom (Css.px 8) + ] + [] + + +exclamation : Css.Color -> Html msg +exclamation backgroundColor = + iconContainer + [ Css.color Colors.white + , Css.backgroundColor backgroundColor + ] + (Html.div + [ css [ Css.marginTop (Css.px 1), Css.height (Css.px 13) ] ] + [ NriSvg.toHtml exclamationMark ] + ) + + +iconContainer : List Css.Style -> Html msg -> Html msg +iconContainer styles icon = + Nri.Ui.styled Html.div + "Nri-Ui-Alert-V3__iconContainer" + (styles + ++ [ -- Content positioning + Css.marginRight (Css.px 5) + + -- Size + , Css.borderRadius (Css.px 13) + , Css.lineHeight iconContainerSize + , Css.maxHeight iconContainerSize + , Css.maxWidth iconContainerSize + , Css.minHeight iconContainerSize + , Css.minWidth iconContainerSize + ] + ) + [] + [ icon ] + + +viewAlertContent : Css.ColorValue compatible -> String -> Html.Styled.Html msg +viewAlertContent color content = + Nri.Ui.styled Html.div + "Nri-Ui-Alert-V3__viewAlertContent" + [ Css.color color + , Fonts.baseFont + , Css.fontSize (Css.px 13) + , Css.lineHeight iconContainerSize + , Css.listStyleType Css.none + + -- This global selector and overrides are necessary due to + -- old stylesheets used on the monolith that set the + -- `.txt p { font-size: 18px; }` -- without these overrides, + -- we may see giant ugly alerts. + -- Remove these if you want to! but be emotionally prepped + -- to deal with visual regressions. 🙏 + , Css.Global.descendants + [ Css.Global.p + [ Css.margin Css.zero + , Css.lineHeight iconContainerSize + , Css.fontSize (Css.px 13) + , Fonts.baseFont + ] + ] + ] + [] + (Markdown.toHtml Nothing content |> List.map fromUnstyled) + + +iconContainerSize : Css.Px +iconContainerSize = + Css.px 20 diff --git a/src/Nri/Ui/BannerAlert/V2.elm b/src/Nri/Ui/BannerAlert/V2.elm new file mode 100644 index 00000000..35861886 --- /dev/null +++ b/src/Nri/Ui/BannerAlert/V2.elm @@ -0,0 +1,114 @@ +module Nri.Ui.BannerAlert.V2 exposing + ( error + , neutral + , success + ) + +{-| + +@docs error +@docs neutral +@docs success + +-} + +import Accessibility.Styled as Accessibility +import Css exposing (..) +import Css.Global exposing (Snippet, children, descendants, everything, selector) +import Html.Styled as Html exposing (Html) +import Nri.Ui.Colors.V1 +import Nri.Ui.Fonts.V1 + + +{-| A banner to show error alerts +-} +error : String -> Html msg +error = + banner errorStyles + + +{-| A banner to show neutral alerts +-} +neutral : String -> Html msg +neutral = + banner neutralStyles + + +{-| A banner for success alerts +-} +success : String -> Html msg +success = + banner successStyles + + +banner : Css.Style -> String -> Html msg +banner bannerType alertMessage = + Html.styled Accessibility.div + [ bannerStyles, bannerType ] + [] + [ notification alertMessage ] + + +notification : String -> Html msg +notification message = + Html.styled Html.div [ alertMessageStyles ] [] [ Accessibility.text message ] + + +type CssClasses + = AlertMessage + | Banner + | Error + | Neutral + | Success + + +alertMessageStyles : Style +alertMessageStyles = + batch + [ Css.fontSize (Css.px 20) + , Css.fontWeight (Css.int 700) + , Css.lineHeight (Css.px 25) + , Css.maxWidth (Css.px 600) + , Nri.Ui.Fonts.V1.baseFont + ] + + +bannerStyles : Style +bannerStyles = + batch + [ Css.alignItems Css.center + , Css.displayFlex + , Css.justifyContent Css.center + , Css.padding (Css.px 20) + , Css.width (Css.pct 100) + , Css.Global.children + [ Css.Global.button + [ Css.position Css.absolute + , Css.right (Css.px 15) + ] + ] + ] + + +errorStyles : Style +errorStyles = + batch + [ Css.backgroundColor Nri.Ui.Colors.V1.purpleLight + , Css.color Nri.Ui.Colors.V1.purpleDark + ] + + +neutralStyles : Style +neutralStyles = + batch + [ Css.backgroundColor Nri.Ui.Colors.V1.frost + , Css.color Nri.Ui.Colors.V1.navy + ] + + +successStyles : Style +successStyles = + batch + [ Css.backgroundColor Nri.Ui.Colors.V1.greenLightest + , Css.color Nri.Ui.Colors.V1.greenDarkest + ] diff --git a/src/Nri/Ui/BannerAlert/V3.elm b/src/Nri/Ui/BannerAlert/V3.elm new file mode 100644 index 00000000..74843a36 --- /dev/null +++ b/src/Nri/Ui/BannerAlert/V3.elm @@ -0,0 +1,138 @@ +module Nri.Ui.BannerAlert.V3 exposing (error, neutral, success) + +{-| + +@docs error, neutral, success + +-} + +import Accessibility.Styled as Html exposing (Html) +import Css +import Css.Global +import Html.Styled.Attributes as Attributes exposing (css) +import Nri.Ui.Colors.V1 as Colors +import Nri.Ui.Fonts.V1 +import Nri.Ui.SpriteSheet exposing (bulb, checkmark, exclamationMark) +import Nri.Ui.Svg.V1 as NriSvg exposing (Svg) + + +{-| A banner to show error alerts +-} +error : String -> Html msg +error = + banner + { backgroundColor = Colors.purpleLight + , color = Colors.purpleDark + , icon = + { backgroundColor = Colors.purple + , height = Css.px 25 + , asset = exclamationMark + } + } + + +{-| A banner to show neutral alerts +-} +neutral : String -> Html msg +neutral = + banner + { backgroundColor = Colors.frost + , color = Colors.navy + , icon = + { backgroundColor = Colors.navy + , height = Css.px 32 + , asset = bulb + } + } + + +{-| A banner for success alerts +-} +success : String -> Html msg +success = + banner + { backgroundColor = Colors.greenLightest + , color = Colors.greenDarkest + , icon = + { backgroundColor = Colors.green + , height = Css.px 20 + , asset = checkmark + } + } + + +type alias Config = + { color : Css.Color + , backgroundColor : Css.Color + , icon : IconConfig + } + + +banner : Config -> String -> Html msg +banner config alertMessage = + Html.div + [ css + [ Css.alignItems Css.center + , Css.displayFlex + , Css.justifyContent Css.center + , Css.padding (Css.px 20) + , Css.width (Css.pct 100) + , Css.Global.children + [ Css.Global.button + [ Css.position Css.absolute + , Css.right (Css.px 15) + ] + ] + , Css.backgroundColor config.backgroundColor + , Css.color config.color + ] + ] + [ icon config.icon + , notification alertMessage + ] + + +type alias IconConfig = + { backgroundColor : Css.Color + , height : Css.Px + , asset : Svg + } + + +icon : IconConfig -> Html msg +icon config = + Html.div + [ css + [ Css.boxSizing Css.borderBox + , Css.borderRadius (Css.pct 50) + , Css.color Colors.white + , Css.displayFlex + , Css.alignItems Css.center + , Css.justifyContent Css.center + , Css.width (Css.px 50) + , Css.height (Css.px 50) + , Css.marginRight (Css.px 20) + , Css.padding (Css.px 8) + , Css.flexShrink (Css.num 0) + , Css.backgroundColor config.backgroundColor + ] + ] + [ Html.div + [ css [ Css.height config.height ] + ] + [ NriSvg.toHtml config.asset ] + ] + + +notification : String -> Html msg +notification message = + Html.div + [ css + [ Css.fontSize (Css.px 20) + , Css.fontWeight (Css.int 700) + , Css.lineHeight (Css.px 25) + , Css.maxWidth (Css.px 600) + , Nri.Ui.Fonts.V1.baseFont + ] + ] + [ Html.text message ] diff --git a/src/Nri/Ui/Button/V3.elm b/src/Nri/Ui/Button/V3.elm new file mode 100644 index 00000000..3530ae43 --- /dev/null +++ b/src/Nri/Ui/Button/V3.elm @@ -0,0 +1,780 @@ +module Nri.Ui.Button.V3 exposing + ( ButtonSize(..), ButtonStyle(..), ButtonState(..), ButtonContent + , ButtonConfig, button, customButton, delete, copyToClipboard, ToggleButtonConfig, toggleButton + , LinkConfig, link, linkSpa, linkExternal, linkWithMethod, linkWithTracking, linkExternalWithTracking + ) + +{-| + + +# Changes from V2: + + - Uses Html.Styled + - Removes buttonDeprecated + - Removes Tiny size + - Removes one-off Active hack + - Removes "submit" button - we just used that for forms that were partially in Elm + + +# About: + +Common NoRedInk buttons. For accessibility purposes, buttons that perform an +action on the current page should be HTML `