Merge pull request #156 from ably/web-2213-discord-icon-link

[WEB-2213] Add discord icon link too footer

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (6.5.3)
+    ably-ui (6.5.3.dev.0ab7c2f)
       view_component (>= 2.33, < 2.50)
 
 GEM

cypress/integration/core/footer/__snapshots__/snapshots.js.snap

@@ -261,7 +261,12 @@ exports[`Footer Snapshot Test > react > test case common to both #0`] = `
           class="h-24 pr-24 text-cool-black hover:text-icon-github"
           href="https://github.com/ably/"
           ><svg class=" " style="width: 1.5rem; height: 1.5rem;">
-            <use xlink:href="#sprite-github"></use></svg
+            <use xlink:href="#sprite-github"></use></svg></a
+        ><a
+          class="h-24 pr-24 text-cool-black hover:text-icon-discord"
+          href="https://discord.com/invite/wPnfgACt"
+          ><svg class=" " style="width: 1.5rem; height: 1.5rem;">
+            <use xlink:href="#sprite-discord"></use></svg
         ></a>
         <div class="border-l border-mid-grey h-40"></div>
         <a
@@ -581,6 +586,14 @@ exports[`Footer Snapshot Test > view component > test case common to both #0`] =
             <use xlink:href="#sprite-github"></use>
           </svg>
         </a>
+        <a
+          class="h-24 pr-24 text-cool-black hover:text-icon-discord"
+          href="https://discord.com/invite/wPnfgACt"
+        >
+          <svg class=" " style="width: 1.5rem; height: 1.5rem">
+            <use xlink:href="#sprite-discord"></use>
+          </svg>
+        </a>
         <div class="border-l border-mid-grey h-40"></div>
         <a
           class="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"

cypress/integration/core/uptime/__snapshots__/snapshots.js.snap

@@ -947,7 +947,12 @@ exports[`Footer Snapshot Test > react > test case common to both #0`] = `
           class="h-24 pr-24 text-cool-black hover:text-icon-github"
           href="https://github.com/ably/"
           ><svg class=" " style="width: 1.5rem; height: 1.5rem;">
-            <use xlink:href="#sprite-github"></use></svg
+            <use xlink:href="#sprite-github"></use></svg></a
+        ><a
+          class="h-24 pr-24 text-cool-black hover:text-icon-discord"
+          href="https://discord.com/invite/wPnfgACt"
+          ><svg class=" " style="width: 1.5rem; height: 1.5rem;">
+            <use xlink:href="#sprite-discord"></use></svg
         ></a>
         <div class="border-l border-mid-grey h-40"></div>
         <a

lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '6.5.3'
+  VERSION = '6.5.3.dev.0ab7c2f'
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "6.5.3",
+  "version": "6.5.3-dev.0ab7c2f",
   "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",

preview/Gemfile

@@ -36,4 +36,4 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '6.5.3', require: 'ably_ui'
+gem 'ably-ui', '6.5.3.dev.0ab7c2f', require: 'ably_ui'

preview/Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (6.5.3)
+    ably-ui (6.5.3.dev.0ab7c2f)
       view_component (>= 2.33, < 2.50)
     actioncable (6.0.3.4)
       actionpack (= 6.0.3.4)
@@ -169,7 +169,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  ably-ui (= 6.5.3)
+  ably-ui (= 6.5.3.dev.0ab7c2f)
   bootsnap (>= 1.4.2)
   byebug
   listen (~> 3.2)

preview/package.json

@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "6.5.3",
+    "@ably/ui": "6.5.3-dev.0ab7c2f",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",

preview/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/[email protected]":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-6.5.3.tgz#ca3a36c9652c0b849eaca81a824c89b1bea07177"
-  integrity sha512-wVdpqo8ZQU0YFTd6LAkmIKKyPy5UK3NOKs90VNJ8oudbaqb4ZQrmpNHdFQyE0mAYMWK6U8Lf7BeTSpyuP1A9nA==
+"@ably/[email protected]-dev.0ab7c2f":
+  version "6.5.3-dev.0ab7c2f"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-6.5.3-dev.0ab7c2f.tgz#b7fedca2cf81355dd7c0f6615fb2536f6c811b18"
+  integrity sha512-qVFPkvnEJqd0MpiZzThxwX3L/fNVg66kXn2+wmdQt2aEx+8gTa3nqDSOF11NMTfqGqx4mF6WuBbMbhhwaESKJg==
   dependencies:
     array-flat-polyfill "^1.0.1"
     deepmerge "^4.2.2"

src/core/Footer/component.html.erb

@@ -173,6 +173,9 @@
         <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
           <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
         </a>
+        <a class="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.com/invite/wPnfgACt">
+          <%= render(AblyUi::Core::Icon.new(name: "discord", size: "1.5rem")) %>
+        </a>
         <div class="border-l border-mid-grey h-40"></div>
         <a
           class="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"

src/core/Footer/component.jsx

@@ -268,6 +268,9 @@ export default function Footer({ paths, urlBase }) {
             <a className="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
               <Icon name="github" size="1.5rem" />
             </a>
+            <a className="h-24 pr-24 text-cool-black hover:text-icon-discord" href="https://discord.com/invite/wPnfgACt">
+              <Icon name="discord" size="1.5rem" />
+            </a>
             <div className="border-l border-mid-grey h-40"></div>
             <a
               className="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"

src/core/styles/properties.css

@@ -43,6 +43,7 @@
     --icon-color-twitter: #2caae1;
     --icon-color-glassdoor: #0baa41;
     --icon-color-github: #000000;
+    --icon-color-discord: #5865f2;
 
     --gradient-active-orange: linear-gradient(
       61.2deg,

tailwind.config.js

@@ -81,6 +81,7 @@ module.exports = {
       "icon-twitter": "var(--icon-color-twitter)",
       "icon-glassdoor": "var(--icon-color-glassdoor)",
       "icon-github": "var(--icon-color-github)",
+      "icon-discord": "var(--icon-color-discord)",
     },
     fontFamily: {
       sans: ["NEXT Book", "Arial", "Helvetica", "sans-serif"],