[WIP] FEATURE: merge share and invite actions together (#7021)

This commit also:
- removes [+ New Topic] behaviour from share, this feature has been duplicated in composer actions, months ago
- introduces our new experimental spacing standard for css: eg: `s(2)`
- introduces a new panel UI for modals

test/javascripts/acceptance/share-and-invite-desktop-test.js.es6

@@ -0,0 +1,88 @@
+import { acceptance } from "helpers/qunit-helpers";
+
+acceptance("Share and Invite modal - desktop", {
+  loggedIn: true
+});
+
+QUnit.test("Topic footer button", async assert => {
+  await visit("/t/internationalization-localization/280");
+
+  assert.ok(
+    exists("#topic-footer-button-share-and-invite"),
+    "the button exists"
+  );
+
+  await click("#topic-footer-button-share-and-invite");
+
+  assert.ok(exists(".share-and-invite.modal"), "it shows the modal");
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-tab.share"),
+    "it shows the share tab"
+  );
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-tab.share.is-active"),
+    "it activates the share tab by default"
+  );
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-tab.invite"),
+    "it shows the invite tab"
+  );
+
+  assert.equal(
+    find(".share-and-invite.modal .modal-panel.share .title").text(),
+    "Topic: Internationalization / localization",
+    "it shows the topic title"
+  );
+
+  assert.ok(
+    find(".share-and-invite.modal .modal-panel.share .topic-share-url")
+      .val()
+      .includes("/t/internationalization-localization/280?u=eviltrout"),
+    "it shows the topic sharing url"
+  );
+
+  assert.equal(
+    find(".share-and-invite.modal .social-link").length,
+    3,
+    "it shows social sources"
+  );
+
+  await click(".share-and-invite.modal .modal-tab.invite");
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-panel.invite .send-invite:disabled"),
+    "send invite button is disabled"
+  );
+
+  assert.ok(
+    exists(
+      ".share-and-invite.modal .modal-panel.invite .generate-invite-link:disabled"
+    ),
+    "generate invite button is disabled"
+  );
+});
+
+QUnit.test("Post date link", async assert => {
+  await visit("/t/internationalization-localization/280");
+  await click("#post_2 .post-info.post-date a");
+
+  assert.ok(exists(".share-and-invite.modal"), "it shows the modal");
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-tab.share"),
+    "it shows the share tab"
+  );
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-tab.share.single-tab"),
+    "it shows only one tab"
+  );
+
+  assert.ok(
+    !exists(".share-and-invite.modal .modal-tab.invite"),
+    "it doesn’t show the invite tab"
+  );
+});

test/javascripts/acceptance/share-and-invite-mobile-test.js.es6

@@ -0,0 +1,77 @@
+import { acceptance } from "helpers/qunit-helpers";
+
+acceptance("Share and Invite modal - mobile", {
+  loggedIn: true,
+  mobileView: true
+});
+
+QUnit.test("Topic footer mobile button", async assert => {
+  await visit("/t/internationalization-localization/280");
+
+  assert.ok(
+    !exists("#topic-footer-button-share-and-invite"),
+    "the button doesn’t exist"
+  );
+
+  const subject = selectKit(".topic-footer-mobile-dropdown");
+  await subject.expand();
+  await subject.selectRowByValue("share-and-invite");
+
+  assert.ok(exists(".share-and-invite.modal"), "it shows the modal");
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-tab.share"),
+    "it shows the share tab"
+  );
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-tab.share.is-active"),
+    "it activates the share tab by default"
+  );
+
+  assert.ok(
+    !exists(".share-and-invite.modal .modal-tab.invite"),
+    "it doesn’t show the invite tab"
+  );
+
+  assert.equal(
+    find(".share-and-invite.modal .modal-panel.share .title").text(),
+    "Topic: Internationalization / localization",
+    "it shows the topic title"
+  );
+
+  assert.ok(
+    find(".share-and-invite.modal .modal-panel.share .topic-share-url")
+      .val()
+      .includes("/t/internationalization-localization/280?u=eviltrout"),
+    "it shows the topic sharing url"
+  );
+
+  assert.equal(
+    find(".share-and-invite.modal .social-link").length,
+    3,
+    "it shows social sources"
+  );
+});
+
+QUnit.test("Post date link", async assert => {
+  await visit("/t/internationalization-localization/280");
+  await click("#post_2 .post-info.post-date a");
+
+  assert.ok(exists(".share-and-invite.modal"), "it shows the modal");
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-tab.share"),
+    "it shows the share tab"
+  );
+
+  assert.ok(
+    exists(".share-and-invite.modal .modal-tab.share.single-tab"),
+    "it shows only one tab"
+  );
+
+  assert.ok(
+    !exists(".share-and-invite.modal .modal-tab.invite"),
+    "it doesn’t show the invite tab"
+  );
+});

test/javascripts/acceptance/topic-test.js.es6

@@ -22,29 +22,6 @@ acceptance("Topic", {
   }
 });
 
-QUnit.test("Share Popup", async assert => {
-  await visit("/t/internationalization-localization/280");
-  assert.ok(!exists("#share-link.visible"), "it is not visible");
-
-  await click("button[data-share-url]");
-  assert.ok(exists("#share-link.visible"), "it shows the popup");
-
-  await click("#share-link .close-share");
-  assert.ok(!exists("#share-link.visible"), "it closes the popup");
-
-  // TODO tgxworld This fails on Travis but we need to push the security fix out
-  // first.
-  // click('#topic-footer-buttons .btn.create');
-  // fillIn('.d-editor-input', '<h2><div data-share-url="something">Click</button><h2>');
-  //
-  // click('#reply-control .btn.create');
-  // click('h2 div[data-share-url]');
-  //
-  // andThen(() => {
-  //   ok(!exists('#share-link.visible'), 'it does not show the popup');
-  // });
-});
-
 QUnit.test("Showing and hiding the edit controls", async assert => {
   await visit("/t/internationalization-localization/280");
 
@@ -98,69 +75,6 @@ QUnit.test("Marking a topic as wiki", async assert => {
   assert.ok(find("a.wiki").length === 1, "it shows the wiki icon");
 });
 
-QUnit.test("Reply as new topic", async assert => {
-  await visit("/t/internationalization-localization/280");
-  await click("button.share:eq(0)");
-  await click(".reply-as-new-topic a");
-
-  assert.ok(exists(".d-editor-input"), "the composer input is visible");
-
-  assert.equal(
-    find(".d-editor-input")
-      .val()
-      .trim(),
-    `Continuing the discussion from [Internationalization / localization](${
-      window.location.origin
-    }/t/internationalization-localization/280):`,
-    "it fills composer with the ring string"
-  );
-  assert.equal(
-    selectKit(".category-chooser")
-      .header()
-      .value(),
-    "2",
-    "it fills category selector with the right category"
-  );
-});
-
-QUnit.test("Reply as new message", async assert => {
-  await visit("/t/pm-for-testing/12");
-  await click("button.share:eq(0)");
-  await click(".reply-as-new-topic a");
-
-  assert.ok(exists(".d-editor-input"), "the composer input is visible");
-
-  assert.equal(
-    find(".d-editor-input")
-      .val()
-      .trim(),
-    `Continuing the discussion from [PM for testing](${
-      window.location.origin
-    }/t/pm-for-testing/12):`,
-    "it fills composer with the ring string"
-  );
-
-  const targets = find(".item span", ".composer-fields");
-
-  assert.equal(
-    $(targets[0]).text(),
-    "someguy",
-    "it fills up the composer with the right user to start the PM to"
-  );
-
-  assert.equal(
-    $(targets[1]).text(),
-    "test",
-    "it fills up the composer with the right user to start the PM to"
-  );
-
-  assert.equal(
-    $(targets[2]).text(),
-    "Group",
-    "it fills up the composer with the right group to start the PM to"
-  );
-});
-
 QUnit.test("Visit topic routes", async assert => {
   await visit("/t/12");
 

test/javascripts/components/share-button-test.js.es6

@@ -1,15 +0,0 @@
-import componentTest from "helpers/component-test";
-moduleForComponent("share-button", { integration: true });
-
-componentTest("share button", {
-  template: '{{share-button url="https://eviltrout.com"}}',
-
-  test(assert) {
-    assert.ok(this.$(`button.share`).length, "it has all the classes");
-
-    assert.ok(
-      this.$(`button[data-share-url="https://eviltrout.com"]`).length,
-      "it has the data attribute for sharing"
-    );
-  }
-});

test/javascripts/fixtures/topic.js.es6

@@ -2136,6 +2136,7 @@ export default {
     pinned: false,
     pinned_at: null,
     details: {
+      can_invite_via_email: true,
       auto_close_at: null,
       auto_close_hours: null,
       auto_close_based_on_last_post: false,