@financial-times/o-typography - npm Package Compare versions

Comparing version 6.3.3 to 6.3.4

origami.json

@@ -54,2 +54,8 @@ {
 		{
+			"name": "links",
+			"title": "Links",
+			"template": "demos/src/links.mustache",
+			"description": ""
+		},
+		{
 			"name": "body",
@@ -56,0 +62,0 @@ "title": "Body",

package.json

@@ -28,3 +28,3 @@ {
 	"name": "@financial-times/o-typography",
-	"version": "6.3.3",
+	"version": "6.3.4",
 	"dependencies": {
@@ -44,4 +44,4 @@ "fontfaceobserver": "^2.0.9",
 		"eslint-config-origami-component": "^2.0.1",
-		"origami-ci-tools": "^1.3.8"
+		"origami-ci-tools": "^1.3.12"
 	}
 }

README.md

@@ -50,5 +50,16 @@ # o-typography [![Build Status](https://circleci.com/gh/Financial-Times/o-typography.png?style=shield&circle-token=9ca314332de2a9b6a80eb8477e097d9acbc96e0b)](https://circleci.com/gh/Financial-Times/o-typography) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)
 <a class="o-typography-link" href="#" >Some link.</a>
+<a class="o-typography-link o-typography-link--external" href="#" >Some external link.</a>
 <!-- etc. -->
 ```
 
+An external link _may_ open in a new window/tab with `target="_blank"` but we recommend against this for most cases as it may disorientate users (see the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG20-TECHS/G200.html) for advice on when it may be appropriate to open in a new window/tab). Use the `rel="noreferrer noopener"` attribute with `target="_blank"` to avoid [exploitation of the `window.opener` API](https://mathiasbynens.github.io/rel-noopener/).
+
+```html
+<a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html" rel="noreferrer noopener" target="_blank" class="o-typography-link o-typography-link--external">Some external link (opens a new window/tab).</a>
+```
+
+See the [demos](http://registry.origami.ft.com/components/o-typography) for a full list of the classes provided and their effects.
+
+### Wrapper Class
+
 `o-typography` also provides wrapper classes. These reduce the need for developers to apply styles to specific elements. By using a wrapper, body styles get applied to the HTML element and descendent typographic elements: h1, h2, h3, h4, h5, p, a, footer, strong, em, small, sup, sub, ul, ol, li.
@@ -55,0 +66,0 @@

No alert changes

Improved metrics

Total package byte prevSize

132255

increased by0.8%

Lines of code

383

increased by1.59%

Number of lines in readme file

517

increased by2.17%

No dependency changes