Adds example view illustrating Menu regression

NoRedInk · Jan 26, 2024 · 76977da · 76977da
1 parent 65578a9
commit 76977da
Showing 1 changed file with 61 additions and 0 deletions.
diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm
@@ -388,6 +388,67 @@ view ellieLinkConfig state =
                     ]
           }
         ]
+    , Heading.h2
+        [ Heading.plaintext "Menu trigger base styles"
+        , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ]
+        ]
+    , Table.view []
+        [ Table.string
+            { header = "Trigger type"
+            , value = .menu
+            , width = Css.pct 30
+            , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle, Css.fontWeight Css.bold ]
+            , sort = Nothing
+            }
+        , Table.custom
+            { header = text "Example"
+            , view = .example
+            , width = Css.px 300
+            , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ]
+            , sort = Nothing
+            }
+        ]
+        [ { menu = "Menu.defaultTrigger"
+          , example =
+                Menu.view (FocusAndToggle "defaultTrigger")
+                    [ Menu.defaultTrigger "Log in" []
+                    , Menu.isOpen (isOpen "defaultTrigger")
+                    ]
+                    []
+          }
+        , { menu = "Menu.button"
+          , example =
+                Menu.view (FocusAndToggle "button")
+                    [ Menu.button "Log in" []
+                    , Menu.isOpen (isOpen "button")
+                    ]
+                    []
+          }
+        , { menu = "Menu.clickableText"
+          , example =
+                Menu.view (FocusAndToggle "clickableText")
+                    [ Menu.clickableText "Log in" []
+                    , Menu.isOpen (isOpen "clickableText")
+                    ]
+                    []
+          }
+        , { menu = "Menu.clickableSvg with UiIcon.gear"
+          , example =
+                Menu.view (FocusAndToggle "clickableSvg")
+                    [ Menu.clickableSvg "Log in" UiIcon.gear []
+                    , Menu.isOpen (isOpen "clickableSvg")
+                    ]
+                    []
+          }
+        , { menu = "Menu.clickableSvgWithoutIndicator with UiIcon.gear"
+          , example =
+                Menu.view (FocusAndToggle "clickableSvgWithoutIndicator")
+                    [ Menu.clickableSvgWithoutIndicator "Log in" UiIcon.gear []
+                    , Menu.isOpen (isOpen "clickableSvgWithoutIndicator")
+                    ]
+                    []
+          }
+        ]
     ]