diff --git a/components/url/README.md b/components/url/README.md new file mode 100644 index 00000000000..e6f542430b5 --- /dev/null +++ b/components/url/README.md @@ -0,0 +1,3 @@ +# URL component + +Component to display URLs in a page. diff --git a/components/url/bem.js b/components/url/bem.js new file mode 100644 index 00000000000..40f8ec5600d --- /dev/null +++ b/components/url/bem.js @@ -0,0 +1,14 @@ +/** + * @license EUPL-1.2 + * Copyright (c) 2021 Robbert Broersma + */ + +export const defaultArgs = { + link: false, + url: '', +}; + +export const URLTemplate = ({ url = '', link = false }) => + link + ? `${url}` + : `${url}`; diff --git a/components/url/bem.scss b/components/url/bem.scss new file mode 100644 index 00000000000..6eb2af0d87c --- /dev/null +++ b/components/url/bem.scss @@ -0,0 +1,9 @@ +/** + * @license EUPL-1.2 + * Copyright (c) 2021 Robbert Broersma + * Copyright (c) 2021 Gemeente Utrecht + */ + +.utrecht-url { + font-variant-ligatures: none; +} diff --git a/components/url/bem.stories.mdx b/components/url/bem.stories.mdx new file mode 100644 index 00000000000..cc266ac47d3 --- /dev/null +++ b/components/url/bem.stories.mdx @@ -0,0 +1,103 @@ + + +import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs"; +import { defaultArgs, URLTemplate } from "./bem"; +import "./bem.scss"; + + URLTemplate(args), + }, + percy: { skip: true }, + status: { + type: "WORK IN PROGRESS", + }, + }} +/> + +# URL + + + + {URLTemplate.bind({})} + + + + + +## URL with mixed left-to-right path + +When displaying an URL in HTML, explicitly mark the text directionality as left-to-right using `dir="ltr"`, to prevent trailing non-word characters such as `/` to be misplaced in a right-to-left document. A trailing slash might end up before `http:` when the URL is in right-to-left text such as Arabic. To maintain the correct rendering even in automated translations of a document, specifically mark URLs as `dir="ltr"` even when the document as a whole is already configured as such using ``. + + + + {URLTemplate.bind({})} + + + +## URL with mixed left-to-right top-level domain + + + + {URLTemplate.bind({})} + + + +## URL with common ligatures in top-level-domain + +It can be helpful to avoid rendering characters together as a ligatures, such as displaying `fi` as `fi`. The CSS property [`font-variant-ligatures`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) can be used to disable ligatures. + + + + {URLTemplate.bind({})} + + diff --git a/packages/component-library-css/src/bem.scss b/packages/component-library-css/src/bem.scss index 855a7555cf8..8d04c8894e9 100644 --- a/packages/component-library-css/src/bem.scss +++ b/packages/component-library-css/src/bem.scss @@ -72,3 +72,4 @@ @import "../../../components/textarea/bem"; @import "../../../components/textbox/bem"; @import "../../../components/unordered-list/bem"; +@import "../../../components/url/bem";