@guardian/src-foundations - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"main": "dist/foundations.js",
@@ -5,0 +5,0 @@ "module": "dist/foundations.esm.js",

README.md

@@ -13,3 +13,3 @@ # Foundations
 
-### [Palette](https://zeroheight.com/2a1e5182b/p/606d47)
+### [Palette](https://zeroheight.com/2a1e5182b/p/938810)
 
@@ -19,9 +19,11 @@ ```ts
 
-const backgroundColour = css`
-	background-color: ${palette.neutral[97]};
+const backgroundColor = css`
+    background-color: ${palette.neutral[97]};
 `
 ```
 
-### [Media queries](https://zeroheight.com/2a1e5182b/p/14af24)
+### Media queries
 
+**_DEPRECATED!_** Please import media queries from [`@guardian/src-utilities`](https://github.com/guardian/source-components/tree/master/packages/utilities#media-queries)
+
 ```ts
@@ -31,15 +33,15 @@ import { mobileLandscape, from, until } from "@guardian/src-foundations"
 const styles = css`
-	padding: 0 10px;
+    padding: 0 10px;
 
-	${mobileLandscape} {
-		padding: 0 20px;
-	}
+    ${mobileLandscape} {
+        padding: 0 20px;
+    }
 
-	${from.phablet.until.desktop} {
-		padding: 0 32px;
-	}
+    ${from.phablet.until.desktop} {
+        padding: 0 32px;
+    }
 
-	${until.wide} {
-		padding: 0 40px;
-	}
+    ${until.wide} {
+        padding: 0 40px;
+    }
 `
@@ -52,22 +54,53 @@ ```
 .class-name {
-	padding: 0 10px;
+    padding: 0 10px;
 }
 
 @media (min-width: 480px) {
-	.class-name {
-		padding: 0 20px;
-	}
+    .class-name {
+        padding: 0 20px;
+    }
 }
 
 @media (min-width: 660px) and (max-width: 980px) {
-	.class-name {
-		padding: 0 32px;
-	}
+    .class-name {
+        padding: 0 32px;
+    }
 }
 
 @media (max-width: 1300px) {
-	.class-name {
-		padding: 0 40px;
-	}
+    .class-name {
+        padding: 0 40px;
+    }
 }
 ```
+
+### Visually Hidden
+
+**_DEPRECATED!_** Please import `visuallyHidden` from [`@guardian/src-utilities`](https://github.com/guardian/source-components/tree/master/packages/utilities#visually-hidden)
+
+For elements that should not appear to sighted users, but are useful to assistive technology users.
+
+```ts
+import { visuallyHidden } from "@guardian/src-foundations"
+
+const label = css`
+    ${visuallyHidden};
+`
+```
+
+### Focus Halo
+
+**_DEPRECATED!_** Please import `focusHalo` from [`@guardian/src-utilities`](https://github.com/guardian/source-components/tree/master/packages/utilities#focus-halo)
+
+This mixin provides a [clear focus state](https://zeroheight.com/2a1e5182b/p/08dc26/t/314e46) for
+elements that may receive keyboard focus.
+
+```ts
+import { focusHalo } from "@guardian/src-foundations"
+
+const input = css`
+    ${focusHalo};
+    width: 200px;
+    height: 44px;
+`
+```

No alert changes

Improved metrics

Total package byte prevSize

36839

increased by3.04%

Number of lines in readme file

103

increased by47.14%

No dependency changes