@guardian/src-foundations - npm Package Compare versions

Comparing version 0.5.0-alpha.2 to 0.5.0-alpha.3

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "0.5.0-alpha.2",
+	"version": "0.5.0-alpha.3",
 	"main": "dist/foundations.js",
 	"module": "dist/foundations.esm.js",
 	"scripts": {
-		"build": "rollup --config",
+		"build": "yarn clean && rollup --config",
 		"watch": "rollup --config --watch",
@@ -14,2 +14,3 @@ "clean": "rm -rf dist",
 		"dist/**/*.js",
+		"mq/**/*.js",
 		"animation.ts",
@@ -16,0 +17,0 @@ "breakpoints.ts",

README.md

@@ -22,1 +22,101 @@ # Foundations
 ```
+
+### Media queries
+
+```ts
+import { from, until, between } from "@guardian/src-foundations/mq"
+
+const styles = css`
+    padding: 0 10px;
+
+    ${from.mobileLandscape} {
+        padding: 0 20px;
+    }
+
+    ${between.phablet.and.desktop} {
+        padding: 0 32px;
+    }
+
+    ${until.wide} {
+        padding: 0 40px;
+    }
+`
+```
+
+Output:
+
+```css
+.class-name {
+    padding: 0 10px;
+}
+
+@media (min-width: 480px) {
+    .class-name {
+        padding: 0 20px;
+    }
+}
+
+@media (min-width: 660px) and (max-width: 980px) {
+    .class-name {
+        padding: 0 32px;
+    }
+}
+
+@media (max-width: 1300px) {
+    .class-name {
+        padding: 0 40px;
+    }
+}
+```
+
+### 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/accessibility"
+
+const label = css`
+    ${visuallyHidden};
+`
+```
+
+Output:
+
+```css
+.class-name {
+    position: absolute;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    top: 0;
+    left: 0;
+}
+```
+
+### 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/accessibility"
+
+const input = css`
+    ${focusHalo};
+    width: 200px;
+    height: 44px;
+`
+```
+
+Output:
+
+```css
+.class-name {
+    outline: 0;
+    box-shadow: 0 0 0 5px #00b2ff;
+    z-index: 9;
+    width: 200px;
+    height: 44px;
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

30296

increased by23.27%

Number of package files

13

increased by8.33%

Lines of code

1034

increased by9.19%

Number of lines in readme file

122

increased by454.55%

No dependency changes