feat: URL component

nl-design-system · Oct 16, 2021 · 54e3e1e · 54e3e1e
1 parent 74ef6e1
commit 54e3e1e
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 0 deletions.
diff --git a/components/url/README.md 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
@@ -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
+    ? `<a class="utrecht-link utrecht-url" href="${url}" dir="ltr">${url}</a>`
+    : `<span class="utrecht-url" dir="ltr">${url}</span>`;
diff --git a/components/url/bem.scss 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
@@ -0,0 +1,103 @@
+<!--
+@license EUPL-1.2
+Copyright (c) 2021 Robbert Broersma
+-->
+
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { defaultArgs, URLTemplate } from "./bem";
+import "./bem.scss";
+
+<Meta
+  title="CSS Component/URL"
+  argTypes={{
+    url: {
+      description: "URL",
+      control: "text",
+    },
+    link: {
+      description: "Link",
+      control: "boolean",
+    },
+  }}
+  parameters={{
+    docs: {
+      transformSource: (_src, { args }) => URLTemplate(args),
+    },
+    percy: { skip: true },
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+  }}
+/>
+
+# URL
+
+<Canvas>
+  <Story
+    args={{
+      ...defaultArgs,
+      link: true,
+      url: "https://example.com/",
+    }}
+    name="URL"
+  >
+    {URLTemplate.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="URL" />
+
+## 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 `<html dir="ltr">`.
+
+<Canvas>
+  <Story
+    args={{
+      ...defaultArgs,
+      url: "https://example.com/الأمثلة/",
+    }}
+    name="URL with right-to-left path"
+    parameters={{
+      percy: { skip: true },
+    }}
+  >
+    {URLTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## URL with mixed left-to-right top-level domain
+
+<Canvas>
+  <Story
+    args={{
+      ...defaultArgs,
+      url: "https://example.شبكة/",
+    }}
+    name="URL with right-to-left top-level domain"
+    parameters={{
+      percy: { skip: true },
+    }}
+  >
+    {URLTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## 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 `ﬁ`. The CSS property [`font-variant-ligatures`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) can be used to disable ligatures.
+
+<Canvas>
+  <Story
+    args={{
+      ...defaultArgs,
+      url: "https://example.fi/",
+    }}
+    parameters={{
+      percy: { skip: false },
+    }}
+    name="URL with common ligatures in top-level-domain"
+  >
+    {URLTemplate.bind({})}
+  </Story>
+</Canvas>
diff --git 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";