diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index fac60fe9..fb2300ad 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -70,19 +70,9 @@ describe('UI tests', function () { } const skippedRules = { - 'Accordion': ['heading-order', 'region'], - 'Balloon': ['color-contrast', 'label'], - 'Checkbox': ['region'], - 'Loading': ['color-contrast'], - 'Menu': ['region'], - 'Modal': ['region'], - 'Message': ['region'], - 'Page': ['color-contrast', 'select-name'], - 'RadioButton': ['duplicate-id', 'region'], - 'SegmentedControl': ['region'], - 'Select': ['label'], + 'Accordion': ['heading-order'], + 'RadioButton': ['duplicate-id'], 'Switch': ['aria-allowed-attr'], - 'Tabs': ['region'], } const specialProcessing = { diff --git a/src/Nri/Ui/Balloon/V1.elm b/src/Nri/Ui/Balloon/V1.elm index bda78acf..f6ac2a65 100644 --- a/src/Nri/Ui/Balloon/V1.elm +++ b/src/Nri/Ui/Balloon/V1.elm @@ -326,8 +326,8 @@ balloonTheme theme = Green -> batch - [ backgroundColor Colors.greenDark - , border3 (px 1) solid Colors.greenDark + [ backgroundColor Colors.greenDarkest + , border3 (px 1) solid Colors.greenDarkest , Fonts.baseFont , fontSize (px 15) , color Colors.white @@ -439,8 +439,8 @@ arrowTheme theme = Green -> batch - [ backgroundColor Colors.greenDark - , border3 (px 1) solid Colors.greenDark + [ backgroundColor Colors.greenDarkest + , border3 (px 1) solid Colors.greenDarkest , Fonts.baseFont , fontSize (px 15) , color Colors.white diff --git a/src/Nri/Ui/Page/V3.elm b/src/Nri/Ui/Page/V3.elm index ef0c98ae..d2aa85b3 100644 --- a/src/Nri/Ui/Page/V3.elm +++ b/src/Nri/Ui/Page/V3.elm @@ -17,6 +17,7 @@ import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attributes import Http import Nri.Ui.Button.V10 as Button +import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Html.V3 exposing (viewIf) @@ -263,7 +264,7 @@ viewDetails detailsForEngineers = ] [] [ Html.styled Html.summary - [ color (hex "8F8F8F") ] + [ color Colors.gray45 ] [] [ Html.text "Details for NoRedInk engineers" ] , Html.styled Html.code diff --git a/styleguide-app/Examples/Balloon.elm b/styleguide-app/Examples/Balloon.elm index f868ed20..13f1c22a 100644 --- a/styleguide-app/Examples/Balloon.elm +++ b/styleguide-app/Examples/Balloon.elm @@ -12,7 +12,7 @@ import Debug.Control.Extra as ControlExtra import Debug.Control.View as ControlView import EllieLink import Example exposing (Example) -import Html.Styled exposing (Html, fromUnstyled, text) +import Html.Styled exposing (Html, text) import Nri.Ui.Balloon.V1 as Balloon @@ -50,18 +50,27 @@ example = {-| -} type alias State = - { copy : Control String - , attributes : Control (List ( String, Balloon.Attribute )) - } + Control Settings init : State init = - { copy = Control.string "Hello, world!" - , attributes = controlAttributes + controlSettings + + +type alias Settings = + { copy : String + , attributes : List ( String, Balloon.Attribute ) } +controlSettings : Control Settings +controlSettings = + Control.record Settings + |> Control.field "copy" (Control.string "Hello, world!") + |> Control.field "attributes" controlAttributes + + controlAttributes : Control (List ( String, Balloon.Attribute )) controlAttributes = ControlExtra.list @@ -117,20 +126,14 @@ paddingOptions = {-| -} type Msg - = SetCopy (Control String) - | SetAttributes (Control (List ( String, Balloon.Attribute ))) + = SetAttributes (Control Settings) update : Msg -> State -> ( State, Cmd Msg ) update msg state = case msg of - SetCopy copy -> - ( { state | copy = copy } - , Cmd.none - ) - SetAttributes attributes -> - ( { state | attributes = attributes } + ( attributes , Cmd.none ) @@ -138,22 +141,21 @@ update msg state = view : EllieLink.Config -> State -> List (Html Msg) view ellieLinkConfig state = let - copy = - Control.currentValue state.copy + currentValue = + Control.currentValue state in - [ Control.view SetCopy state.copy |> fromUnstyled - , ControlView.view + [ ControlView.view { ellieLinkConfig = ellieLinkConfig , name = moduleName , version = version , update = SetAttributes - , settings = state.attributes + , settings = state , toExampleCode = - \attrs -> + \{ copy, attributes } -> [ { sectionName = "Balloon" , code = "Balloon.balloon\n [ " - ++ String.join "\n , " (List.map Tuple.first attrs) + ++ String.join "\n , " (List.map Tuple.first attributes) ++ "\n ] " ++ "\n (text \"" ++ copy @@ -162,6 +164,6 @@ view ellieLinkConfig state = ] } , Balloon.balloon - (List.map Tuple.second (Control.currentValue state.attributes)) - (text copy) + (List.map Tuple.second currentValue.attributes) + (text currentValue.copy) ] diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm index fb0c1ab8..1e4e9a5b 100644 --- a/styleguide-app/Examples/Page.elm +++ b/styleguide-app/Examples/Page.elm @@ -54,7 +54,14 @@ example = , version = 3 , categories = [ Messaging ] , keyboardSupport = [] - , state = { httpError = CommonControls.httpError, recoveryText = initRecoveryText } + , state = + { httpError = + Control.record identity + |> Control.field "httpError" CommonControls.httpError + , recoveryText = + Control.record identity + |> Control.field "recoveryText" initRecoveryText + } , update = update , subscriptions = \_ -> Sub.none , preview = diff --git a/styleguide-app/Examples/Select.elm b/styleguide-app/Examples/Select.elm index 41a413b9..1242be93 100644 --- a/styleguide-app/Examples/Select.elm +++ b/styleguide-app/Examples/Select.elm @@ -85,7 +85,7 @@ type alias State = {-| -} init : State init = - { label = Control.string "Tortilla Selector" + { label = Control.record identity |> Control.field "label" (Control.string "Tortilla Selector") , attributes = initControls } diff --git a/styleguide-app/KeyboardSupport.elm b/styleguide-app/KeyboardSupport.elm index a6ac7b93..aa0ac3f5 100644 --- a/styleguide-app/KeyboardSupport.elm +++ b/styleguide-app/KeyboardSupport.elm @@ -39,6 +39,8 @@ view keyboardSupport = ] (List.map viewKeyboardActions keyboardSupport) ] + |> List.singleton + |> aside [] viewKeyboardActions : KeyboardSupport -> Html msg