Merge pull request #1605 from NoRedInk/correct-button-under-ul

Move locked premium button under li
NoRedInk · Jan 23, 2024 · eb774ce · eb774ce
2 parents f6d833d + 49592c7
commit eb774ce
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/component-catalog/src/Examples/SideNav.elm b/component-catalog/src/Examples/SideNav.elm
@@ -18,6 +18,7 @@ import EllieLink
 import Example exposing (Example)
 import Html.Styled.Attributes exposing (css)
 import Nri.Ui.Colors.V1 as Colors
+import Nri.Ui.Data.PremiumDisplay as PremiumDisplay
 import Nri.Ui.Heading.V3 as Heading
 import Nri.Ui.SideNav.V5 as SideNav
 import Nri.Ui.Spacing.V1 as Spacing
@@ -201,6 +202,56 @@ view ellieLinkConfig state =
             , SideNav.entry "Sham Assignment" []
             ]
         ]
+    , Heading.h2
+        [ Heading.plaintext "Premium Display"
+        , Heading.css [ Css.marginTop Spacing.verticalSpacerPx ]
+        ]
+    , SideNav.view
+        { isCurrentRoute = \route -> route == "/subchildren-unlocked"
+        , routeToString = identity
+        , onSkipNav = SkipToContent
+        }
+        [ SideNav.navLabel "Premium Display"
+        , SideNav.navId "premium-display-sidenav"
+        ]
+        (premiumDisplayEntries "/"
+            ++ [ SideNav.entryWithChildren "As subchildren"
+                    []
+                    (premiumDisplayEntries "/subchildren")
+               , SideNav.compactGroup "In a compact group"
+                    []
+                    (premiumDisplayEntries "/compact")
+               ]
+        )
+    ]
+
+
+premiumDisplayEntries : String -> List (SideNav.Entry String Msg)
+premiumDisplayEntries hrefPrefix =
+    [ SideNav.entry "Free"
+        [ SideNav.premiumDisplay
+            PremiumDisplay.Free
+            (ConsoleLog "Clicked Free SideNav Entry")
+        , SideNav.href (hrefPrefix ++ "-free")
+        ]
+    , SideNav.entry "Unlocked"
+        [ SideNav.premiumDisplay
+            PremiumDisplay.PremiumUnlocked
+            (ConsoleLog "Clicked PremiumUnlocked SideNav Entry")
+        , SideNav.href (hrefPrefix ++ "-unlocked")
+        ]
+    , SideNav.entry "Locked"
+        [ SideNav.premiumDisplay
+            PremiumDisplay.PremiumLocked
+            (ConsoleLog "Clicked PremiumLocked SideNav Entry")
+        , SideNav.href (hrefPrefix ++ "-locked")
+        ]
+    , SideNav.entry "Vouchered"
+        [ SideNav.premiumDisplay
+            PremiumDisplay.PremiumVouchered
+            (ConsoleLog "Clicked PremiumVouchered SideNav Entry")
+        , SideNav.href (hrefPrefix ++ "-vouchered")
+        ]
     ]
 
 

diff --git a/src/Nri/Ui/SideNav/V5.elm b/src/Nri/Ui/SideNav/V5.elm
@@ -20,6 +20,7 @@ module Nri.Ui.SideNav.V5 exposing
   - uses `ul>li` for the structure
   - adds `aria-current="true"` to the parent of the current page
   - expose missing import
+  - correct locked premium content to match `ul>li` structure
 
 
 ### Changes from V4
@@ -448,7 +449,7 @@ viewSidebarEntry config extraStyles entry_ =
     case entry_ of
         Entry children entryConfig ->
             if entryConfig.premiumDisplay == PremiumDisplay.PremiumLocked then
-                viewLockedEntry extraStyles entryConfig
+                li [] [ viewLockedEntry extraStyles entryConfig ]
 
             else if anyLinkDescendants (isCurrentRoute config) children then
                 let