Merge pull request #224 from ably/edx-371-dropdown-menu

[EDX-371] Dropdown menu component
ably · Oct 13, 2022 · 6aed484 · 6aed484
2 parents 6c890c6 + 0d89184
commit 6aed484
Show file tree

Hide file tree

Showing 19 changed files with 393 additions and 39 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (8.7.0.dev.b3aa10e)
+    ably-ui (8.7.0.dev.24cbbe4)
       view_component (>= 2.33, < 2.50)
 
 GEM

diff --git a/README.md b/README.md
@@ -284,7 +284,7 @@ To deploy a review app with your in-progress code, you can use the `pre-release`
 
 ```bash
 # in root
-./pre-release
+scripts/pre-release.sh
 ```
 
 This will do a couple of things:

diff --git a/cypress/integration/core/dropdown_menu/__snapshots__/snapshot.js.snap b/cypress/integration/core/dropdown_menu/__snapshots__/snapshot.js.snap
@@ -0,0 +1,16 @@
+exports[`Flash Snapshot Test > renders correcty #0`] = `
+<div id="dropdown-menu" class="relative">
+  <button
+    id="menu-trigger"
+    class="text-h3 flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg"
+  >
+    <span class="leading-normal">Dropdown Menu Trigger</span
+    ><svg
+      class="text-cool-black transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"
+      style="width: 1.25rem; height: 1.25rem;"
+    >
+      <use xlink:href="#sprite-icon-gui-disclosure-arrow"></use>
+    </svg>
+  </button>
+</div>
+`;
diff --git a/cypress/integration/core/dropdown_menu/behaviour.js b/cypress/integration/core/dropdown_menu/behaviour.js
@@ -0,0 +1,14 @@
+describe("Dropdown Menu", () => {
+  describe("Menu Trigger", () => {
+    it("should open when clicked", () => {
+      cy.viewport("macbook-16");
+
+      cy.visit("/components/dropdown-menu")
+        .get("#dropdown-menu")
+        .contains("Dropdown Menu Trigger")
+        .click()
+        .get("#menu-content")
+        .contains("Using plain HTML");
+    });
+  });
+});
diff --git a/cypress/integration/core/dropdown_menu/snapshot.js b/cypress/integration/core/dropdown_menu/snapshot.js
@@ -0,0 +1,15 @@
+import { fixSnapshotSpec } from "../../../support";
+
+beforeEach(fixSnapshotSpec(__filename));
+
+describe("Flash Snapshot Test", () => {
+  beforeEach(() => {
+    cy.visit("/components/dropdown-menu");
+    cy.viewport("macbook-16");
+  });
+
+  it("renders correcty", () => {
+    const dropdownMenuId = "#dropdown-menu";
+    cy.get(dropdownMenuId).toMatchSnapshot();
+  });
+});
diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb
@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '8.7.0.dev.b3aa10e'
+  VERSION = '8.7.0.dev.24cbbe4'
 end
diff --git a/modules-config.js b/modules-config.js
@@ -38,6 +38,7 @@ module.exports = [
       "MeganavSearchSuggestions",
       "MeganavSearchPanel",
       "MeganavSearchAutocomplete",
+      "DropdownMenu",
     ],
   },
   {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.7.0-dev.b3aa10e",
+  "version": "8.7.0-dev.24cbbe4",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

diff --git a/preview/Gemfile b/preview/Gemfile
@@ -37,7 +37,7 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '8.7.0.dev.b3aa10e', require: 'ably_ui'
+gem 'ably-ui', '8.7.0.dev.24cbbe4', require: 'ably_ui'
 
 # https://stackoverflow.com/questions/71191685/visit-psych-nodes-alias-unknown-alias-default-psychbadalias
 gem 'psych', '< 4'

diff --git a/preview/Gemfile.lock b/preview/Gemfile.lock
@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (8.7.0.dev.b3aa10e)
+    ably-ui (8.7.0.dev.24cbbe4)
       view_component (>= 2.33, < 2.50)
     actioncable (6.0.5.1)
       actionpack (= 6.0.5.1)
@@ -175,7 +175,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
-  ably-ui (= 8.7.0.dev.b3aa10e)
+  ably-ui (= 8.7.0.dev.24cbbe4)
   bootsnap (>= 1.4.2)
   byebug
   dotenv-rails

diff --git a/preview/app/controllers/components_controller.rb b/preview/app/controllers/components_controller.rb
@@ -5,11 +5,11 @@ def show
 
     if template_exists?(template)
       render template,
-             locals: {
-               framework: framework,
-               component_parameters:
-                 component_parameters(component_name.underscore)
-             }
+              locals: {
+                framework: framework,
+                component_parameters:
+                  component_parameters(component_name.underscore)
+              }
     else
       render status: 404, plain: "#{template} not found"
     end
@@ -20,24 +20,24 @@ def meganav
     template = "meganav_#{framework}.html.erb"
 
     render template,
-           locals: {
-             props: meganav_props,
-             notice_props: notice_props,
-             notice_config: notice_config,
-             framework: framework,
-             component_parameters: component_parameters('meganav')
-           }
-  end
+            locals: {
+              props: meganav_props,
+              notice_props: notice_props,
+              notice_config: notice_config,
+              framework: framework,
+              component_parameters: component_parameters('meganav')
+            }
+    end
 
   def footer
     template = "footer_#{framework}.html.erb"
 
     render template,
-           locals: {
-             props: framework == 'react' ? footer_react_props : {},
-             framework: framework,
-             component_parameters: component_parameters('footer')
-           }
+            locals: {
+              props: framework == 'react' ? footer_react_props : {},
+              framework: framework,
+              component_parameters: component_parameters('footer')
+            }
   end
 
   def icon
@@ -128,14 +128,14 @@ def icon
     other_icons = %w[quote]
 
     render template,
-           locals: {
-             core_icons: core_icons,
-             display_icons: display_icons,
-             social_icons: social_icons,
-             other_icons: other_icons,
-             framework: framework,
-             component_parameters: component_parameters('icon')
-           }
+            locals: {
+              core_icons: core_icons,
+              display_icons: display_icons,
+              social_icons: social_icons,
+              other_icons: other_icons,
+              framework: framework,
+              component_parameters: component_parameters('icon')
+            }
   end
 
   private

diff --git a/preview/app/javascript/packs/application.js b/preview/app/javascript/packs/application.js
@@ -12,6 +12,7 @@ import FeaturedLink from "@ably/ui/core/FeaturedLink";
 import CustomerLogos from "@ably/ui/core/CustomerLogos";
 import Loader from "@ably/ui/core/Loader";
 import Logo from "@ably/ui/core/Logo";
+import DropdownMenu from "@ably/ui/core/DropdownMenu";
 
 import {
   reactRenderer,
@@ -53,7 +54,8 @@ document.addEventListener("DOMContentLoaded", () => {
     FeaturedLink,
     CustomerLogos,
     Loader,
-    Logo
+    Logo,
+    DropdownMenu,
   });
 
   // Fetch additional data, trigger a re-render for components subscribed to store

diff --git a/preview/app/javascript/packs/dropdown-menu-react.js b/preview/app/javascript/packs/dropdown-menu-react.js
@@ -0,0 +1,52 @@
+// We disable this rule here because we are linking to the same domain
+/* eslint-disable react/jsx-no-target-blank */
+import React from "react";
+import Icon from "@ably/ui/core/Icon";
+
+import DropdownMenu from "@ably/ui/core/DropdownMenu";
+
+import { renderComponent } from "@ably/ui/core/scripts";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const DropdownMenuPreview = () => {
+    return (
+      <DropdownMenu>
+        <DropdownMenu.Trigger additionalTriggerCSS="text-h3">
+          Dropdown Menu Trigger
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content anchorPosition="left">
+          <DropdownMenu.Link
+            url="https://ably.com/"
+            title="Using DropdownMenuLink Component"
+            subtitle="This is using the inbuilt component which takes props for title, subtitle, icon name & children."
+            iconName="icon-gui-link-arrow"
+          >
+            <p className="text-p3">I am a child! 🐣</p>
+          </DropdownMenu.Link>
+          <DropdownMenu.Link
+            url="https://ably.com/"
+            title="Using DropdownMenuLink Component - no icon, subtitle or children"
+          />
+          <a
+            href="https://ably.com/docs"
+            target="_blank"
+            className="group block p-8 hover:bg-light-grey hover:text-cool-black rounded"
+          >
+            <p className="ui-featured-link group-hover:text-gui-hover font-light text-cool-black">
+              Using plain HTML
+              <Icon
+                name="icon-gui-link-arrow"
+                size="1rem"
+                color="text-cool-black"
+                additionalCSS="ui-featured-link-icon group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"
+              />
+            </p>
+          </a>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    );
+  };
+
+  const node = document.querySelector("#dropdown-menu-container");
+  renderComponent(DropdownMenuPreview, {}, node);
+});