@guardian/src-foundations - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

dist/foundations.esm.js

@@ -61,7 +61,2 @@ var fontSizes = [12, 15, 17, 20, 24, 28, 34, 42, 50, 70];
 var size = [24, 36, 44];
-var breakpoints = [740, 980, 1140, 1300]; // Diverges from https://system-ui.com
-// At these widths, there are tweaks to the
-// fluid grid on mobile devices
-
-var tweakpoints = [375, 480, 660];
 var transitions = [".2s cubic-bezier(.64, .57, .67, 1.53)", ".3s ease-in-out", ".65s ease-in-out"];
@@ -75,94 +70,2 @@
 
-var visuallyHidden = "\n\tposition: absolute;\n\topacity: 0;\n\theight: 0;\n\twidth: 0;\n\ttop: 0;\n\tleft: 0;\n";
-var focusHalo = "\n\toutline: 0;\n\tbox-shadow: 0 0 0 5px #00B2FF;\n\tz-index: 9;\n";
-
-var breakpointMap = {
-  mobileMedium: tweakpoints[0],
-  mobileLandscape: tweakpoints[1],
-  phablet: tweakpoints[2],
-  tablet: breakpoints[0],
-  desktop: breakpoints[1],
-  leftCol: breakpoints[2],
-  wide: breakpoints[3]
-};
-
-var minWidth = function minWidth(from) {
-  return "@media (min-width: ".concat("".concat(from, "px"), ")");
-};
-
-var maxWidth = function maxWidth(until) {
-  return "@media (max-width: ".concat("".concat(until - 1, "px"), ")");
-};
-
-var minWidthMaxWidth = function minWidthMaxWidth(from, until) {
-  return "@media (min-width: ".concat("".concat(from, "px"), ") and (max-width: ", "".concat(until - 1, "px"), ")");
-}; // e.g. until.*
-
-
-var until = {
-  mobileMedium: maxWidth(breakpointMap.mobileMedium),
-  mobileLandscape: maxWidth(breakpointMap.mobileLandscape),
-  phablet: maxWidth(breakpointMap.phablet),
-  tablet: maxWidth(breakpointMap.tablet),
-  desktop: maxWidth(breakpointMap.desktop),
-  leftCol: maxWidth(breakpointMap.leftCol),
-  wide: maxWidth(breakpointMap.wide) // e.g. from.*.until.*
-
-};
-var from = {
-  mobileMedium: {
-    until: {
-      mobileLandscape: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.mobileLandscape),
-      phablet: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.phablet),
-      tablet: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.tablet),
-      desktop: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.desktop),
-      leftCol: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.wide)
-    }
-  },
-  mobileLandscape: {
-    until: {
-      phablet: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.phablet),
-      tablet: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.tablet),
-      desktop: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.desktop),
-      leftCol: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.wide)
-    }
-  },
-  phablet: {
-    until: {
-      tablet: minWidthMaxWidth(breakpointMap.phablet, breakpointMap.tablet),
-      desktop: minWidthMaxWidth(breakpointMap.phablet, breakpointMap.desktop),
-      leftCol: minWidthMaxWidth(breakpointMap.phablet, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.phablet, breakpointMap.wide)
-    }
-  },
-  tablet: {
-    until: {
-      desktop: minWidthMaxWidth(breakpointMap.tablet, breakpointMap.desktop),
-      leftCol: minWidthMaxWidth(breakpointMap.tablet, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.tablet, breakpointMap.wide)
-    }
-  },
-  desktop: {
-    until: {
-      leftCol: minWidthMaxWidth(breakpointMap.desktop, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.desktop, breakpointMap.wide)
-    }
-  },
-  leftCol: {
-    until: {
-      wide: minWidthMaxWidth(breakpointMap.leftCol, breakpointMap.wide)
-    }
-  } // min-widths
-
-};
-var mobileMedium = minWidth(breakpointMap.mobileMedium);
-var mobileLandscape = minWidth(breakpointMap.mobileLandscape);
-var phablet = minWidth(breakpointMap.phablet);
-var tablet = minWidth(breakpointMap.tablet);
-var desktop = minWidth(breakpointMap.desktop);
-var leftCol = minWidth(breakpointMap.leftCol);
-var wide = minWidth(breakpointMap.wide);
-
 var palette = {
@@ -390,2 +293,2 @@ brand: {
 
-export { body, bodySizes, breakpointMap as breakpoints, desktop, focusHalo, from, headline, headlineSizes, leftCol, mobileLandscape, mobileMedium, palette, phablet, size$1 as size, space$1 as space, tablet, textSans, textSansSizes, transitions$1 as transitions, until, visuallyHidden, wide };
+export { body, bodySizes, headline, headlineSizes, palette, size$1 as size, space$1 as space, textSans, textSansSizes, transitions$1 as transitions };

dist/foundations.js

@@ -65,7 +65,2 @@ 'use strict';
 var size = [24, 36, 44];
-var breakpoints = [740, 980, 1140, 1300]; // Diverges from https://system-ui.com
-// At these widths, there are tweaks to the
-// fluid grid on mobile devices
-
-var tweakpoints = [375, 480, 660];
 var transitions = [".2s cubic-bezier(.64, .57, .67, 1.53)", ".3s ease-in-out", ".65s ease-in-out"];
@@ -79,94 +74,2 @@
 
-var visuallyHidden = "\n\tposition: absolute;\n\topacity: 0;\n\theight: 0;\n\twidth: 0;\n\ttop: 0;\n\tleft: 0;\n";
-var focusHalo = "\n\toutline: 0;\n\tbox-shadow: 0 0 0 5px #00B2FF;\n\tz-index: 9;\n";
-
-var breakpointMap = {
-  mobileMedium: tweakpoints[0],
-  mobileLandscape: tweakpoints[1],
-  phablet: tweakpoints[2],
-  tablet: breakpoints[0],
-  desktop: breakpoints[1],
-  leftCol: breakpoints[2],
-  wide: breakpoints[3]
-};
-
-var minWidth = function minWidth(from) {
-  return "@media (min-width: ".concat("".concat(from, "px"), ")");
-};
-
-var maxWidth = function maxWidth(until) {
-  return "@media (max-width: ".concat("".concat(until - 1, "px"), ")");
-};
-
-var minWidthMaxWidth = function minWidthMaxWidth(from, until) {
-  return "@media (min-width: ".concat("".concat(from, "px"), ") and (max-width: ", "".concat(until - 1, "px"), ")");
-}; // e.g. until.*
-
-
-var until = {
-  mobileMedium: maxWidth(breakpointMap.mobileMedium),
-  mobileLandscape: maxWidth(breakpointMap.mobileLandscape),
-  phablet: maxWidth(breakpointMap.phablet),
-  tablet: maxWidth(breakpointMap.tablet),
-  desktop: maxWidth(breakpointMap.desktop),
-  leftCol: maxWidth(breakpointMap.leftCol),
-  wide: maxWidth(breakpointMap.wide) // e.g. from.*.until.*
-
-};
-var from = {
-  mobileMedium: {
-    until: {
-      mobileLandscape: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.mobileLandscape),
-      phablet: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.phablet),
-      tablet: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.tablet),
-      desktop: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.desktop),
-      leftCol: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.mobileMedium, breakpointMap.wide)
-    }
-  },
-  mobileLandscape: {
-    until: {
-      phablet: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.phablet),
-      tablet: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.tablet),
-      desktop: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.desktop),
-      leftCol: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.mobileLandscape, breakpointMap.wide)
-    }
-  },
-  phablet: {
-    until: {
-      tablet: minWidthMaxWidth(breakpointMap.phablet, breakpointMap.tablet),
-      desktop: minWidthMaxWidth(breakpointMap.phablet, breakpointMap.desktop),
-      leftCol: minWidthMaxWidth(breakpointMap.phablet, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.phablet, breakpointMap.wide)
-    }
-  },
-  tablet: {
-    until: {
-      desktop: minWidthMaxWidth(breakpointMap.tablet, breakpointMap.desktop),
-      leftCol: minWidthMaxWidth(breakpointMap.tablet, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.tablet, breakpointMap.wide)
-    }
-  },
-  desktop: {
-    until: {
-      leftCol: minWidthMaxWidth(breakpointMap.desktop, breakpointMap.leftCol),
-      wide: minWidthMaxWidth(breakpointMap.desktop, breakpointMap.wide)
-    }
-  },
-  leftCol: {
-    until: {
-      wide: minWidthMaxWidth(breakpointMap.leftCol, breakpointMap.wide)
-    }
-  } // min-widths
-
-};
-var mobileMedium = minWidth(breakpointMap.mobileMedium);
-var mobileLandscape = minWidth(breakpointMap.mobileLandscape);
-var phablet = minWidth(breakpointMap.phablet);
-var tablet = minWidth(breakpointMap.tablet);
-var desktop = minWidth(breakpointMap.desktop);
-var leftCol = minWidth(breakpointMap.leftCol);
-var wide = minWidth(breakpointMap.wide);
-
 var palette = {
@@ -396,21 +299,9 @@ brand: {
 exports.bodySizes = bodySizes;
-exports.breakpoints = breakpointMap;
-exports.desktop = desktop;
-exports.focusHalo = focusHalo;
-exports.from = from;
 exports.headline = headline;
 exports.headlineSizes = headlineSizes;
-exports.leftCol = leftCol;
-exports.mobileLandscape = mobileLandscape;
-exports.mobileMedium = mobileMedium;
 exports.palette = palette;
-exports.phablet = phablet;
 exports.size = size$1;
 exports.space = space$1;
-exports.tablet = tablet;
 exports.textSans = textSans;
 exports.textSansSizes = textSansSizes;
 exports.transitions = transitions$1;
-exports.until = until;
-exports.visuallyHidden = visuallyHidden;
-exports.wide = wide;

index.ts

 export * from "./animation"
-export * from "./helpers"
-export * from "./media-queries"
 export * from "./palette"
@@ -5,0 +3,0 @@ export * from "./size"

package.json

 {
 	"name": "@guardian/src-foundations",
-	"version": "0.2.4",
+	"version": "0.3.0",
 	"main": "dist/foundations.js",
@@ -15,5 +15,3 @@ "module": "dist/foundations.esm.js",
 		"animation.ts",
-		"helpers.ts",
 		"index.ts",
-		"media-queries.ts",
 		"palette.ts",
@@ -20,0 +18,0 @@ "size.ts",

README.md

@@ -22,82 +22,1 @@ # Foundations
 ```
-
-### Media queries
-
-**_DEPRECATED!_** Please import media queries from [`@guardian/src-utilities`](https://github.com/guardian/source-components/tree/master/packages/utilities#media-queries)
-
-```ts
-import { mobileLandscape, from, until } from "@guardian/src-foundations"
-
-const styles = css`
-    padding: 0 10px;
-
-    ${mobileLandscape} {
-        padding: 0 20px;
-    }
-
-    ${from.phablet.until.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
-
-**_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

Worsened metrics

Total package byte prevSize

23318

decreased by-36.7%

Number of package files

11

decreased by-15.38%

Lines of code

907

decreased by-27.67%

Number of lines in readme file

22

decreased by-78.64%

No dependency changes