@ably/ui 12.0.0 → 13.0.0

package/README.md

@@ -80,7 +80,6 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
          1. Add postCSS import with `npm install postcss-import`
    1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
    1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
-   1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
 3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
 4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
 

package/core/Showcase/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,h,y,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["filter-grayscale","filter-none"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(h=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){h.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(y=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",y),function(){return l.parentNode.removeEventListener("wheel",y)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,y,h,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["grayscale","grayscale-0"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(y=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){y.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(h=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",h),function(){return l.parentNode.removeEventListener("wheel",h)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));

package/core/Uptime/component.css

@@ -30,8 +30,7 @@
   }
 
   .ui-uptime-day:hover {
-    filter: brightness(1.2);
-    @apply z-10;
+    @apply z-10 brightness-125;
   }
 
   .ui-uptime-day:hover span {

package/core/styles.css

@@ -583,10 +583,15 @@
 
   .ui-link-neutral {
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
+    @apply focus:text-charcoal-grey;
     @apply underline;
   }
 
+  /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
+  .ui-link-neutral:focus {
+    outline: 2px solid var(--color-neutral-000);
+  }
+
   .ui-figcaption {
     @apply font-mono text-p3 text-neutral-800;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "12.0.0",
+  "version": "13.0.0",
   "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",
@@ -43,8 +43,7 @@
     "postcss-loader": "^4.0.4",
     "prettier": "^2.3.0",
     "svg-spritemap-webpack-plugin": "^3.7.1",
-    "tailwindcss": "^2.0.1",
-    "tailwindcss-filters": "^3.0.0",
+    "tailwindcss": "^3.3.6",
     "webpack": "^5.3.2",
     "webpack-cli": "^4.2.0",
     "yargs": "^16.2.0"

package/src/core/Showcase/component.html.erb

@@ -13,7 +13,7 @@
                          type: 'button',
                          data: { id: 'showcase-control' },
                          aria: { controls: @random_id } do %>
-            <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'filter-none' : 'filter-grayscale', 'hover:filter-none'], srcset: [["#{company[:logo2x]}", "2x"]] %>
+            <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'grayscale-0' : 'grayscale', 'hover:grayscale-0'], srcset: [["#{company[:logo2x]}", "2x"]] %>
           <% end %>
         </li>
       <% end %>
@@ -40,7 +40,7 @@
 
             <div class="flex items-center">
               <div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
-                <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 filter-grayscale" %>
+                <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 grayscale" %>
               </div>
               <div>
                 <p class="ui-text-p2"><%= company[:author][:name] %></p>

package/src/core/Showcase/component.js

@@ -6,7 +6,7 @@ import "./component.css";
 const SLIDE_SHOW_INTERVAL = 5000;
 
 const updateLogoOpacity = (logos, currentIndex) => {
-  const visible = ["filter-grayscale", "filter-none"];
+  const visible = ["grayscale", "grayscale-0"];
   const opaque = [...visible].reverse();
   logos.forEach((logo, i) => {
     logo.classList.replace(...(i === currentIndex ? visible : opaque));

package/src/core/Uptime/component.css

@@ -30,8 +30,7 @@
   }
 
   .ui-uptime-day:hover {
-    filter: brightness(1.2);
-    @apply z-10;
+    @apply z-10 brightness-125;
   }
 
   .ui-uptime-day:hover span {

package/src/core/styles/text.css

@@ -153,10 +153,15 @@
 
   .ui-link-neutral {
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
+    @apply focus:text-charcoal-grey;
     @apply underline;
   }
 
+  /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
+  .ui-link-neutral:focus {
+    outline: 2px solid var(--color-neutral-000);
+  }
+
   .ui-figcaption {
     @apply font-mono text-p3 text-neutral-800;
   }

package/tailwind.config.js

@@ -1,19 +1,20 @@
 module.exports = {
-  purge: {
-    content: [
-      "./src/**/*.html.erb",
-      "./src/**/*.jsx",
-      "./src/**/*.js",
-      "./src/**/*.json",
-    ],
-    options: {
-      safelist: {
-        standard: ["w-1/2", "w-1/3", "w-1/4", "w-1/5", "w-1/6"],
-        greedy: [/^hljs.*/, /^ui-.*/],
-      },
-    },
-  },
-  darkMode: false,
+  content: [
+    "./src/**/*.html.erb",
+    "./src/**/*.jsx",
+    "./src/**/*.js",
+    "./src/**/*.json",
+    "./src/**/*.css",
+  ],
+  safelist: [
+    "w-1/2",
+    "w-1/3",
+    "w-1/4",
+    "w-1/5",
+    "w-1/6",
+    { pattern: /^hljs.*/ },
+    { pattern: /^ui-.*/ },
+  ],
   theme: {
     screens: {
       // CSS custom properties can't be used in media queries
@@ -299,10 +300,6 @@ module.exports = {
       full: "9999px",
       DEFAULT: "0.375rem",
     },
-    filter: {
-      none: "none",
-      grayscale: "grayscale(1)",
-    },
     extend: {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
@@ -314,7 +311,6 @@ module.exports = {
       },
       outline: {
         "gui-focus": "1.5px solid var(--color-gui-focus-outline)",
-        "gui-focus-neutral": "2px solid var(--color-neutral-000)",
       },
       width: {
         "extend-8": "calc(100% + var(--spacing-8))",
@@ -360,5 +356,5 @@ module.exports = {
   corePlugins: {
     preflight: false,
   },
-  plugins: [require("tailwindcss-filters")],
+  plugins: [],
 };

package/tailwind.extend.js

@@ -15,10 +15,7 @@ const ablyUItailwindConfig = (extend) => {
 
   const configWithPlugin = {
     ...ablyUIConfig,
-    purge: {
-      content: addPurgeContentPaths(),
-      options: ablyUIConfig.purge.options,
-    },
+    content: addPurgeContentPaths(),
   };
 
   return extend(configWithPlugin);