Merge branch 'feature/external-link-icon-class' into develop

waynestate · Jul 28, 2023 · d8cab0a · d8cab0a
2 parents 0f19133 + 6d07ad7
commit d8cab0a
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 0 deletions.
diff --git a/resources/images/external-link.svg b/resources/images/external-link.svg
diff --git a/resources/scss/components/_menu-icon.scss b/resources/scss/components/_menu-icon.scss
@@ -19,3 +19,41 @@
 .menu-icon:hover::after {
     @apply bg-gray-400 shadow-grey;
 }
+
+// For under menu items that have class to designate external link
+.main-menu .external {
+    a::after {
+        content: '(external link)';
+        font-size: 0;
+        background-image: url('/_resources/images/external-link.svg');
+        background-size: contain;
+        display: inline-block;
+        margin-left: 7px;
+        width: 11px;
+        height: 11px;
+        filter: invert(100%);
+        position: relative;
+        bottom: 1px;
+    }
+
+    @screen mt {
+        a::after {
+            filter: invert(0);
+        }
+    }
+}
+
+.external a.button div:first-of-type::after {
+    content: '(external link)';
+    font-size: 0;
+    background-image: url('/_resources/images/external-link.svg');
+    background-size: contain;
+    display: inline-block;
+    margin-left: 7px;
+    width: 11px;
+    height: 11px;
+    //filter: invert(100%);
+    position: relative;
+    top: -11px;
+    margin-bottom: -11px;
+}
diff --git a/styleguide/Pages/MenuExternal.php b/styleguide/Pages/MenuExternal.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Styleguide\Pages;
+
+use Factories\Page as PageFactory;
+
+class MenuExternal extends Page
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function getPageData()
+    {
+        return app(PageFactory::class)->create(1, true, [
+            'page' => [
+                'controller' => 'MenuTopController',
+                'title' => 'Menu external',
+                'id' => 103100102,
+                'content' => [
+                    'main' => '
+                        <h2>Setup</h2>
+                        <ul>
+                            <li>Add class "external" to menu links and under-menu items</li>
+                            <li>Suggestion: Use full url for any link considered external.</li>
+                        </ul>
+                    ',
+                ],
+            ],
+        ]);
+    }
+}
diff --git a/styleguide/menu.json b/styleguide/menu.json
@@ -371,6 +371,16 @@
                         "class_name": "",
                         "relative_url": "/styleguide/menu/top",
                         "submenu": []
+                    },
+                    "103100102": {
+                        "menu_item_id": 103100102,
+                        "is_active": 1,
+                        "page_id": 103100102,
+                        "target": "",
+                        "display_name": "External menu icon",
+                        "class_name": "external",
+                        "relative_url": "/styleguide/menu/external",
+                        "submenu": []
                     }
                 }
             },