Merge branch 'master' into fix-hover

microlinkhq · Jun 18, 2020 · 32f4dd3 · 32f4dd3
2 parents 3b12e42 + 74e53d6
commit 32f4dd3
Show file tree

Hide file tree

Showing 19 changed files with 157 additions and 91 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0](https://github.com/microlinkhq/sdk/compare/v5.3.5...v5.4.0) (2020-06-18)
+
+
+### Bug Fixes
+
+* build reference ([40f8a7d](https://github.com/microlinkhq/sdk/commit/40f8a7d2e9936b823ea1e2cfdabf0df7ee2fcb44))
+
+
+### Features
+
+* allow customization via CSS variables ([ca5e43d](https://github.com/microlinkhq/sdk/commit/ca5e43dce9937804ad9096c2277c430ebaa60043)), closes [#235](https://github.com/microlinkhq/sdk/issues/235)
+
+
+
+
+
 ## [5.3.5](https://github.com/microlinkhq/sdk/compare/v5.3.4...v5.3.5) (2020-06-15)
 
 

diff --git a/lerna.json b/lerna.json
@@ -3,5 +3,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "5.3.5"
+  "version": "5.4.0"
 }
diff --git a/packages/hover-react/CHANGELOG.md b/packages/hover-react/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0](http://github.com/microlinkhq/sdk/tree/master/packages/hover-react/compare/v5.3.5...v5.4.0) (2020-06-18)
+
+
+### Features
+
+* allow customization via CSS variables ([ca5e43d](http://github.com/microlinkhq/sdk/tree/master/packages/hover-react/commit/ca5e43dce9937804ad9096c2277c430ebaa60043)), closes [#235](http://github.com/microlinkhq/sdk/tree/master/packages/hover-react/issues/235)
+
+
+
+
+
 ## [5.3.5](http://github.com/microlinkhq/sdk/tree/master/packages/hover-react/compare/v5.3.4...v5.3.5) (2020-06-15)
 
 **Note:** Version bump only for package @microlink/hover-react

diff --git a/packages/hover-react/package.json b/packages/hover-react/package.json
@@ -2,7 +2,7 @@
   "name": "@microlink/hover-react",
   "description": "Turn links into beautiful previews.",
   "homepage": "https://microlink.io/docs/sdk/integrations/hover-react/",
-  "version": "5.3.5",
+  "version": "5.4.0",
   "main": "dist/microlink.js",
   "module": "dist/microlink.module.js",
   "jsnext:main": "dist/microlink.module.js",
@@ -26,7 +26,7 @@
     "previsualization"
   ],
   "dependencies": {
-    "@microlink/react": "^5.3.2"
+    "@microlink/react": "^5.4.0"
   },
   "devDependencies": {
     "@babel/core": "latest",

diff --git a/packages/hover-react/src/index.js b/packages/hover-react/src/index.js
@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import React from 'react'
 
 const PopOver = styled.div`
+  --microlink-hover-background-color: var(--microlink-background-color, white);
+
   position: absolute;
   overflow: hidden;
   visibility: hidden;
@@ -16,8 +18,16 @@ const PopOver = styled.div`
   padding: 0.5rem;
   border-radius: 4px;
 
+  .microlink_card {
+    border: 0;
+  }
+
+  border: 1px solid var(--microlink-border-color, #e1e8ed);
+  background-color: var(--microlink-hover-background-color);
+
   &:hover {
     box-shadow: rgba(0, 0, 0, 0.12) 0px 30px 60px;
+    border-color: var(--microlink-hover-border-color, #f5f8fa);
   }
 `
 
@@ -31,23 +41,6 @@ const Wrapper = styled.span`
     visibility: visible;
     opacity: 1;
   }
-
-  .microlink_card {
-    border: none;
-  }
-
-  .microlink_card:hover {
-    background-color: inherit;
-  }
-
-  .microlink_hover {
-    background-color: white;
-    border: 1px solid #e1e8ed;
-  }
-
-  .microlink_hover:hover {
-    border-color: #f5f8fa;
-  }
 `
 
 const withHover = ({ LinkComponent, ...props }) => (
@@ -59,7 +52,7 @@ const withHover = ({ LinkComponent, ...props }) => (
   </Wrapper>
 )
 
-const MicrolinkHover = (LinkComponent, microlinkProps) => (props) =>
+const MicrolinkHover = (LinkComponent, microlinkProps) => props =>
   withHover({ LinkComponent, ...microlinkProps, ...props })
 
 MicrolinkHover.withHover = withHover

diff --git a/packages/hover-react/stories/index.js b/packages/hover-react/stories/index.js
@@ -118,16 +118,10 @@ storiesOf('decorator', module)
     const MicrolinkHoverLink = withMicrolinkHover(Link)
 
     const CustomCenter = styled(Center)`
+    --microlink-border-color: #666;
+    --microlink-hover-border-color: #999;
       color: white;
       background: #1a1a1a;
-
-      .microlink_card {
-        border-color: #999;
-      }
-
-      .microlink_card:hover {
-        border-color: #666;
-      }
     `
 
     return (

diff --git a/packages/hover-vanilla/CHANGELOG.md b/packages/hover-vanilla/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0](http://github.com/microlinkhq/sdk/tree/master/packages/hover-vanilla/compare/v5.3.5...v5.4.0) (2020-06-18)
+
+
+### Bug Fixes
+
+* build reference ([40f8a7d](http://github.com/microlinkhq/sdk/tree/master/packages/hover-vanilla/commit/40f8a7d2e9936b823ea1e2cfdabf0df7ee2fcb44))
+
+
+### Features
+
+* allow customization via CSS variables ([ca5e43d](http://github.com/microlinkhq/sdk/tree/master/packages/hover-vanilla/commit/ca5e43dce9937804ad9096c2277c430ebaa60043)), closes [#235](http://github.com/microlinkhq/sdk/tree/master/packages/hover-vanilla/issues/235)
+
+
+
+
+
 ## [5.3.5](http://github.com/microlinkhq/sdk/tree/master/packages/hover-vanilla/compare/v5.3.4...v5.3.5) (2020-06-15)
 
 

diff --git a/packages/hover-vanilla/docs/collectednotes.html b/packages/hover-vanilla/docs/collectednotes.html
@@ -325,22 +325,12 @@ <h3 class="title is-size-4">Christian Gill</h3>
       </section>
    </body>
    <style>
-    .microlink_hover,
-    .microlink_card,
-    .microlink_hover:hover,
-    .microlink_card:hover {
-      background: #1A1A1A !important;
-      color: white;
+    :root {
+      --microlink-background-color: #1A1A1A;
+      --microlink-color: white;
+      --microlink-border-color: #666;
+      --microlink-hover-border-color: #999;
     }
-
-    .microlink_hover {
-      border-color: #666 !important;
-    }
-
-    .microlink_hover:hover {
-      border-color: #999 !important;
-    }
-
    </style>
    <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
    <script src="./dist/microlink.js"></script>

diff --git a/packages/hover-vanilla/docs/index.html b/packages/hover-vanilla/docs/index.html
@@ -52,11 +52,16 @@
   <meta property="og:title" content="@microlink/hover-vanilla">
   <meta property="og:description" content="Turns any URL into instant hover preview ✨">
   <meta property="og:image" content="https://cdn.microlink.io/logo/banner.png">
+  <meta property="og:video:secure_url" content="https://hover-vanilla.microlink.io/assets/video/demo.mp4">
   <meta property="og:logo" content="https://cdn.microlink.io/logo/trim.png">
   <meta property="og:site_name" content="Microlink">
   <meta property="og:type" content="website">
 
   <style>
+    :root {
+      --pink: #EA407B;
+    }
+
     * {
       -webkit-font-smoothing: antialiased;
       text-rendering: optimizeLegibility;
@@ -69,13 +74,21 @@
     }
 
     .pink {
-      color: #EA407B;
+      color: var(--pink) !important;
+    }
+
+    .b--pink {
+      border-color: var(--pink) !important;
     }
 
     .gray {
       color: #ADB5BD;
     }
 
+    .silver {
+      color: #495057;
+    }
+
     .sans-serif {
     font-family: 'Inter', sans-serif;
     }
@@ -87,40 +100,53 @@
 </head>
 <body class="pa3 w-100 sans-serif bg-white mw8 mauto">
   <header class="tc">
-    <h1 class="fw6 f2 f1-l">@microlink/hover-vanilla</h1>
-    <h3 class="fw4 f3 ph3">Turns any URL into instant hover preview ✨</h3>
-    <a rel="noopener noreferrer" target="_blank" href='https://hover-react.microlink.io' class="link blue f5 ph2">React version</a>
-    <span> | </span>
-    <a rel="noopener noreferrer" target="_blank" href='https://github.com/microlinkhq/sdk' class="link blue f5 ph2">See on GitHub</a>
+    <h1 class="fw6 f3 f2-l mb3">@microlink/hover-vanilla</h1>
+    <h3 class="fw4 f5 f4-l ph3 mt3">Turns any URL into instant hover preview ✨</h3>
   </header>
 
-  <section class="pt3 ph4 pt5-l ph6-l tc">
-    <div class="mauto mw6 pattern-dots-md gray-light">
-      <video style="transform:translate(30px, 30px);" class="mw6" width="100%" src="/assets/video/demo.mp4" controls="" autoplay="" muted="" loop=""></video>
+  <section class="pv4 ph4 ph6-l tc">
+    <div class="mauto mw6 pattern-dots-md pink">
+      <video style="transform:translate(30px, 30px);" width="100%" src="/assets/video/demo.mp4" controls="" autoplay="" muted="" loop=""></video>
     </div>
   </section>
 
-  <section class="pt3 ph4 pt5-l ph6-l">
-    <h3 class="mt3 f3 fw6">Installation</h3>
+  <section class="pt4 ph4 ph6-l tc">
+    <a rel="noopener noreferrer" target="_blank" href='https://hover-react.microlink.io' class="link blue f5 ph2">React version</a>
+    <span> | </span>
+    <a rel="noopener noreferrer" target="_blank" href='https://github.com/microlinkhq/sdk' class="link blue f5 ph2">See on GitHub</a>
+  </section>
 
+  <section class="pt3 ph4 pt4-l ph6-l">
+    <h3 class="mt3 f3 fw6">Installation</h3>
 
     <div class="pl3">
-      <pre class="pv3 pink lh-copy mw7 ba">
+      <pre class="dark-gray lh-copy f6 code pv3 b--pink lh-copy mw7 ba">
+  <span class="gray">&#x3C;!-- customize style --&#x3E;</span>
+  &#x3C;style&#x3E;
+    :root {
+      --microlink-background-color: #1A1A1A;
+      --microlink-color: white;
+      --microlink-border-color: #666;
+      --microlink-hover-border-color: #999;
+    }
+  &#x3C;/style&#x3E;
+
+  <span class="gray">&#x3C;!-- load @microlink/hover-vanilla --&#x3E;</span>
   &lt;script src=&quot;https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js,npm/@microlink/hover-vanilla@latest/dist/microlink.min.js&quot;&gt;&lt;/script&gt;
 
+  <span class="gray">&#x3C;!-- intialize `microlinkHover` --&#x3E;</span>
   &#x3C;script&#x3E;
     document.addEventListener(&#x27;DOMContentLoaded&#x27;, function (event) {
       microlinkHover(&#x27;.content a&#x27;, {
-        // https://microlink.io/docs/sdk/parameters/media/
+        <span class="gray">// See https://microlink.io/docs/sdk/parameters/media/</span>
         media: [&#x27;iframe&#x27;, &#x27;video&#x27;, &#x27;audio&#x27;, &#x27;image&#x27;, &#x27;logo&#x27;]
       })
     })
-  &#x3C;/script&#x3E;
-      </pre>
+  &#x3C;/script&#x3E;</pre>
     </div>
   <figcaption class="f7 gray pt2 tc">Just add the above to your main markup before the closing &lt;/body&gt; tag.</figcaption>
   </section>
-  <section class="pt3 ph4 pt5-l ph6-l">
+  <section class="pt3 ph4 pt4-l ph6-l">
     <h3 class="mt3 f3 fw6">Showcase</h3>
     <p class="pl3 lh-copy mw7">
       <a class="f3 link light-blue b no-underline dib ph2 pv1" href="https://kikobeats.com/human-apis/">kikobeats.com</a>

diff --git a/packages/hover-vanilla/docs/joshwcomeau.html b/packages/hover-vanilla/docs/joshwcomeau.html
@@ -415,21 +415,13 @@
 
         }</script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/gatsby/a-static-future/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-bddf6d2174c695bf0f6e.js"],"component---src-components-template-tutorial-template-tutorial-js":["/component---src-components-template-tutorial-template-tutorial-js-1532e3a0c9dc5ed5a60c.js"],"component---src-components-template-article-template-article-js":["/component---src-components-template-article-template-article-js-4f66df55445cd475edf1.js"],"component---src-components-template-newsletter-template-newsletter-js":["/component---src-components-template-newsletter-template-newsletter-js-610bed13388a5c6f3453.js"],"component---src-components-template-newsletter-template-newsletter-raw-js":["/component---src-components-template-newsletter-template-newsletter-raw-js-afbebb7bcb91e9c99d10.js"],"component---src-components-template-snippet-template-snippet-js":["/component---src-components-template-snippet-template-snippet-js-cc6058c1b4c6914e3405.js"],"component---src-pages-404-js":["/component---src-pages-404-js-09829ef19676e8529e19.js"],"component---src-components-template-latest-template-latest-js":["/component---src-components-template-latest-template-latest-js-6c821b03ef7f8de7e6cf.js"],"component---src-components-template-content-grouped-template-content-grouped-js":["/component---src-components-template-content-grouped-template-content-grouped-js-7d8d18f67424f3765ff7.js"],"component---src-components-template-category-list-template-category-list-js":["/component---src-components-template-category-list-template-category-list-js-d93abe34aff914ecf286.js"],"component---src-pages-admin-js":["/component---src-pages-admin-js-65c7e15c6969b85646bd.js"],"component---src-pages-confirmed-js":["/component---src-pages-confirmed-js-1b721c45b2b5daf8da02.js"],"component---src-pages-index-js":["/component---src-pages-index-js-5342d8b93a94ce7417d0.js"],"component---src-pages-opted-out-js":["/component---src-pages-opted-out-js-46c42769db5002a42929.js"],"component---src-pages-react-europe-talk-2020-js":["/component---src-pages-react-europe-talk-2020-js-1c3c8a7a52b8f07e8bc7.js"],"component---src-pages-snippets-js":["/component---src-pages-snippets-js-7a832b176002308b522e.js"],"component---src-pages-subscribe-js":["/component---src-pages-subscribe-js-3b24bbf183e0f374bea1.js"],"component---src-pages-uses-js":["/component---src-pages-uses-js-cce93f558dcd52d89111.js"]};/*]]>*/</script><script src="/component---src-components-template-article-template-article-js-4f66df55445cd475edf1.js" async=""></script><script src="/32d30cd0b1e1944f31e8b2047e3dec7df4b8121e-2467bb6b59efe92557ab.js" async=""></script><script src="/90d6c6b69f5d928ea670fe336787fe862b806062-6490d29d325f151dae86.js" async=""></script><script src="/app-bddf6d2174c695bf0f6e.js" async=""></script><script src="/4544e8b5-1a44f4f4841982c0898e.js" async=""></script><script src="/styles-fb2a6d404e3a75ee756a.js" async=""></script><script src="/framework-e29ec6706c45aab429d7.js" async=""></script><script src="/webpack-runtime-2f665d42e0fbc7d2c4a1.js" async=""></script></body>
 
-
-<style>
-  .microlink_hover,
-  .microlink_card,
-  .microlink_hover:hover,
-  .microlink_card:hover {
-    background: #0E151C !important;
-    color: white;
-  }
-  .microlink_hover {
-    border-color: #364049 !important;
-  }
-  .microlink_hover:hover {
-    border-color: #999 !important;
-  }
+  <style>
+    :root {
+      --microlink-background-color: #0E151C;
+      --microlink-color: white;
+      --microlink-border-color: #364049;
+      --microlink-hover-border-color: #999;
+    }
   </style>
   <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
   <script src="./dist/microlink.js"></script>

diff --git a/packages/hover-vanilla/package.json b/packages/hover-vanilla/package.json
@@ -2,7 +2,7 @@
   "name": "@microlink/hover-vanilla",
   "description": "Turn links into beautiful previews.",
   "homepage": "https://microlink.io/docs/sdk/integrations/hover-vanilla/",
-  "version": "5.3.5",
+  "version": "5.4.0",
   "main": "dist/microlink.js",
   "module": "dist/microlink.module.js",
   "jsnext:main": "dist/microlink.module.js",
@@ -27,7 +27,7 @@
     "previsualization"
   ],
   "dependencies": {
-    "@microlink/hover-react": "^5.3.5"
+    "@microlink/hover-react": "^5.4.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "latest",

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0](http://github.com/microlinkhq/sdk/tree/master/packages/react/compare/v5.3.5...v5.4.0) (2020-06-18)
+
+
+### Features
+
+* allow customization via CSS variables ([ca5e43d](http://github.com/microlinkhq/sdk/tree/master/packages/react/commit/ca5e43dce9937804ad9096c2277c430ebaa60043)), closes [#235](http://github.com/microlinkhq/sdk/tree/master/packages/react/issues/235)
+
+
+
+
+
 ## [5.3.2](http://github.com/microlinkhq/sdk/tree/master/packages/react/compare/v5.3.1...v5.3.2) (2020-06-14)
 
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -2,7 +2,7 @@
   "name": "@microlink/react",
   "description": "Turn links into beautiful previews.",
   "homepage": "https://microlink.io/docs/sdk/integrations/react/",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "main": "dist/microlink.js",
   "module": "dist/microlink.module.js",
   "jsnext:main": "dist/microlink.module.js",