Merge pull request #1607 from NoRedInk/tessa/add-clickable-text-menu-trigger-examples

Adds example view illustrating Menu regression

component-catalog/src/Examples/Menu.elm

@@ -388,6 +388,77 @@ 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.buttonId "defaultTrigger"
+                    , Menu.menuId "defaultTrigger"
+                    ]
+                    []
+          }
+        , { menu = "Menu.button"
+          , example =
+                Menu.view (FocusAndToggle "button")
+                    [ Menu.button "Log in" []
+                    , Menu.isOpen (isOpen "button")
+                    , Menu.buttonId "button"
+                    , Menu.menuId "button"
+                    ]
+                    []
+          }
+        , { menu = "Menu.clickableText"
+          , example =
+                Menu.view (FocusAndToggle "clickableText")
+                    [ Menu.clickableText "Log in" []
+                    , Menu.isOpen (isOpen "clickableText")
+                    , Menu.buttonId "clickableText"
+                    , Menu.menuId "clickableText"
+                    ]
+                    []
+          }
+        , { menu = "Menu.clickableSvg with UiIcon.gear"
+          , example =
+                Menu.view (FocusAndToggle "clickableSvg")
+                    [ Menu.clickableSvg "Log in" UiIcon.gear []
+                    , Menu.isOpen (isOpen "clickableSvg")
+                    , Menu.buttonId "clickableSvg"
+                    , Menu.menuId "clickableSvg"
+                    ]
+                    []
+          }
+        , { menu = "Menu.clickableSvgWithoutIndicator with UiIcon.gear"
+          , example =
+                Menu.view (FocusAndToggle "clickableSvgWithoutIndicator")
+                    [ Menu.clickableSvgWithoutIndicator "Log in" UiIcon.gear []
+                    , Menu.isOpen (isOpen "clickableSvgWithoutIndicator")
+                    , Menu.buttonId "clickableSvgWithoutIndicator"
+                    , Menu.menuId "clickableSvgWithoutIndicator"
+                    ]
+                    []
+          }
+        ]
     ]
 
 

deprecated-modules.csv

@@ -2,6 +2,7 @@ Nri.Ui.Accordion.V3,upgrade to V4
 Nri.Ui.Block.V4,upgrade to V6
 Nri.Ui.Block.V5,upgrade to V6
 Nri.Ui.Carousel.V1,upgrade to V2
+Nri.Ui.ClickableText.V3,upgrade to V4
 Nri.Ui.WhenFocusLeaves.V1,upgrade to V2
 Nri.Ui.Highlighter.V4,upgrade to V5
 Nri.Ui.Mark.V2,upgrade to V5

forbidden-imports.toml

@@ -88,6 +88,9 @@ hint = 'upgrade to V7'
 hint = 'upgrade to V2'
 usages = ['component-catalog-app/Examples/Tooltip.elm']
 
+[forbidden."Nri.Ui.ClickableText.V3"]
+hint = 'upgrade to V4'
+
 [forbidden."Nri.Ui.Container.V1"]
 hint = 'upgrade to V2'
 

package-lock.json

@@ -728,9 +728,9 @@
       "dev": true
     },
     "node_modules/axe-core": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz",
-      "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
+      "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -5351,9 +5351,9 @@
       "dev": true
     },
     "axe-core": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz",
-      "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
+      "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
       "dev": true
     },
     "balanced-match": {

package.json

@@ -30,7 +30,7 @@
     "@axe-core/puppeteer": "^4.4.3",
     "@percy/cli": "^1.4.0",
     "@percy/puppeteer": "^2.0.2",
-    "axe-core": "^4.7.0",
+    "axe-core": "^4.8.3",
     "browserify": "^17.0.0",
     "elm-test": "0.19.1-revision12",
     "expect": "29.5.0",

script/puppeteer-tests.js

@@ -230,6 +230,7 @@ describe("UI tests", function () {
   };
 
   const skippedRules = {
+    Block: ["scrollable-region-focusable"],
     // Loading's color contrast check seems to change behavior depending on whether Percy snapshots are taken or not
     Loading: ["color-contrast"],
     Outline: ["color-contrast"],