💀 begin removing the Attribute concept

src/Nri/Ui/Modal/V9.elm

@@ -159,10 +159,16 @@ info config getFocusable model =
     let
         appliedAttrs =
             List.foldl (\(Attribute f) acc -> f acc)
-                (defaults config.wrapMsg config.visibleTitle config.title)
+                { visibleTitle = config.visibleTitle
-                [ overlayColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.navy)
+                , overlayColor = Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.navy
-                , titleAttribute Colors.navy config.visibleTitle
+                , wrapMsg = config.wrapMsg
-                , getFocusable
+                , modalStyle = modalStyle
+                , titleString = config.title
+                , titleStyles = titleStyle Colors.navy config.visibleTitle
+                , autofocusOn = Default
+                , content = \_ -> text ""
+                }
+                [ getFocusable
                     { viewContent = viewContent config.visibleTitle
                     , closeButton = closeButton config.wrapMsg
                     }
@@ -189,10 +195,16 @@ warning config getFocusable model =
     let
         appliedAttrs =
             List.foldl (\(Attribute f) acc -> f acc)
-                (defaults config.wrapMsg config.visibleTitle config.title)
+                { visibleTitle = config.visibleTitle
-                [ overlayColor (Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.gray20)
+                , overlayColor = Nri.Ui.Colors.Extra.withAlpha 0.9 Colors.gray20
-                , titleAttribute Colors.red config.visibleTitle
+                , wrapMsg = config.wrapMsg
-                , getFocusable
+                , modalStyle = modalStyle
+                , titleString = config.title
+                , titleStyles = titleStyle Colors.red config.visibleTitle
+                , autofocusOn = Default
+                , content = \_ -> text ""
+                }
+                [ getFocusable
                     { viewContent = viewContent config.visibleTitle
                     , closeButton = closeButton config.wrapMsg
                     }
@@ -223,35 +235,26 @@ type alias Config msg =
     }
 
 
-defaults : (Msg -> msg) -> Bool -> String -> Config msg
+modalStyle : Style
-defaults wrapMsg visibleTitle t =
+modalStyle =
-    { visibleTitle = visibleTitle
+    batch
-    , overlayColor = rgba 128 0 70 0.7
+        [ -- Border
-    , wrapMsg = wrapMsg
+          borderRadius (px 20)
-    , modalStyle =
+        , border3 (px 2) solid (rgb 127 0 127)
-        batch
+        , boxShadow5 zero (px 1) (px 10) zero (rgba 0 0 0 0.35)
-            [ -- Border
-              borderRadius (px 20)
-            , border3 (px 2) solid (rgb 127 0 127)
-            , boxShadow5 zero (px 1) (px 10) zero (rgba 0 0 0 0.35)
 
-            -- Spacing
+        -- Spacing
-            , margin2 (px 50) auto
+        , margin2 (px 50) auto
-            , padding (px 20)
+        , padding (px 20)
 
-            -- Size
+        -- Size
-            , minHeight (vh 40)
+        , minHeight (vh 40)
-            , width (px 600)
+        , width (px 600)
-            , backgroundColor Colors.white
+        , backgroundColor Colors.white
 
-            -- the modal should grow up to the viewport minus a 50px margin
+        -- the modal should grow up to the viewport minus a 50px margin
-            , maxHeight (calc (pct 100) minus (px 100))
+        , maxHeight (calc (pct 100) minus (px 100))
-            ]
+        ]
-    , titleString = t
-    , titleStyles = []
-    , autofocusOn = Default
-    , content = \_ -> text ""
-    }
 
 
 {-| -}
@@ -259,24 +262,6 @@ type Attribute msg
     = Attribute (Config msg -> Config msg)
 
 
-{-| -}
-overlayColor : Color -> Attribute msg
-overlayColor color =
-    Attribute (\config -> { config | overlayColor = color })
-
-
-{-| -}
-title : String -> Attribute msg
-title t =
-    Attribute (\config -> { config | titleString = t })
-
-
-{-| -}
-titleStyles : List Style -> Attribute msg
-titleStyles styles =
-    Attribute (\config -> { config | titleStyles = styles })
-
-
 {-| -}
 multipleFocusableElementView :
     ({ firstFocusableElement : List (Html.Attribute msg)
@@ -322,32 +307,30 @@ onlyFocusableElementView f =
         )
 
 
-titleAttribute : Color -> Bool -> Attribute msg
+titleStyle : Color -> Bool -> List Style
-titleAttribute titleColor visibleTitle =
+titleStyle titleColor visibleTitle =
     if visibleTitle then
-        titleStyles
+        [ Fonts.baseFont
-            [ Fonts.baseFont
+        , Css.fontWeight (Css.int 700)
-            , Css.fontWeight (Css.int 700)
+        , Css.paddingTop (Css.px 40)
-            , Css.paddingTop (Css.px 40)
+        , Css.paddingBottom (Css.px 20)
-            , Css.paddingBottom (Css.px 20)
+        , Css.margin Css.zero
-            , Css.margin Css.zero
+        , Css.fontSize (Css.px 20)
-            , Css.fontSize (Css.px 20)
+        , Css.textAlign Css.center
-            , Css.textAlign Css.center
+        , Css.color titleColor
-            , Css.color titleColor
+        ]
-            ]
 
     else
-        titleStyles
+        [ -- https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-            [ -- https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+          Css.property "clip" "rect(1px, 1px, 1px, 1px)"
-              Css.property "clip" "rect(1px, 1px, 1px, 1px)"
+        , Css.position Css.absolute
-            , Css.position Css.absolute
+        , Css.height (Css.px 1)
-            , Css.height (Css.px 1)
+        , Css.width (Css.px 1)
-            , Css.width (Css.px 1)
+        , Css.overflow Css.hidden
-            , Css.overflow Css.hidden
+        , Css.margin (Css.px -1)
-            , Css.margin (Css.px -1)
+        , Css.padding Css.zero
-            , Css.padding Css.zero
+        , Css.border Css.zero
-            , Css.border Css.zero
+        ]
-            ]