diff --git a/packages/react-microlink/package.json b/packages/react-microlink/package.json index 7f0917184..006b5343a 100644 --- a/packages/react-microlink/package.json +++ b/packages/react-microlink/package.json @@ -33,7 +33,6 @@ "previsualization" ], "dependencies": { - "extract-domain": "~2.0.3", "nanoclamp": "~1.2.6" }, "devDependencies": { diff --git a/packages/react-microlink/src/components/Card/CardContent.js b/packages/react-microlink/src/components/Card/CardContent.js index 03dce754a..52dc0df21 100644 --- a/packages/react-microlink/src/components/Card/CardContent.js +++ b/packages/react-microlink/src/components/Card/CardContent.js @@ -1,10 +1,18 @@ +/* global URL */ + import React from 'react' import styled, { css } from 'styled-components' -import extractDomain from 'extract-domain' import CardText from './CardText' import { media } from '../../utils' +const REGEX_STRIP_WWW = /^www\./ + +const getHostname = href => { + const { hostname } = new URL(href) + return hostname.replace(REGEX_STRIP_WWW, '') +} + const isLarge = cardSize => cardSize === 'large' const largeContentStyle = css` @@ -68,7 +76,7 @@ export default ({ title, description, url, cardSize, className }) => ( {description} - {extractDomain(url)} + {getHostname(url)} ) diff --git a/packages/react-microlink/stories/data.js b/packages/react-microlink/stories/data.js index 4ff866734..377561181 100644 --- a/packages/react-microlink/stories/data.js +++ b/packages/react-microlink/stories/data.js @@ -9,7 +9,9 @@ export const urls = [ 'http://es.engadget.com/2017/10/23/meizu-m6-note-analisis-review-fotos', 'https://www.nytimes.com/2017/09/19/learning/whats-going-on-in-this-graph-sept-19-2017.html', 'https://gizmodo.com/drone-video-of-border-wall-prototypes-accidentally-show-1819710328', - 'https://www.bbc.com/news/technology-40762328' + 'https://www.bbc.com/news/technology-40762328', + 'https://browserless.js.org', + 'https://xn--vi8hl0c.ws/' ] export const urlsVideo = [