@comicrelief/component-library 8.41.0 → 8.43.0

package/dist/theme/crTheme/theme.js

@@ -10,6 +10,7 @@ var _buttonColors = _interopRequireDefault(require("./buttonColors"));
 var _linkStyles = _interopRequireDefault(require("./linkStyles"));
 var _fontSizes = _interopRequireDefault(require("./fontSizes"));
 var _allBreakpoints = _interopRequireDefault(require("../shared/allBreakpoints"));
+var _breakpoints = _interopRequireDefault(require("../shared/breakpoints2026"));
 var _fontFamilies = _interopRequireDefault(require("../shared/fontFamilies"));
 var _default = exports.default = {
   color: _colors.default,
@@ -17,6 +18,7 @@ var _default = exports.default = {
   linkStyles: _linkStyles.default,
   fontSize: _fontSizes.default,
   allBreakpoints: _allBreakpoints.default,
+  breakpoints2026: _breakpoints.default,
   fontFamilies: _fontFamilies.default,
   font: {
     regular: 'Montserrat',

package/dist/theme/shared/breakpoints2026.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.breakpointValues2026 = void 0;
+/**
+ * Example Usage
+
+Make height: 200px from 1024px onwards:
+
+@media ${({ theme }) => theme.breakpoints2026('L')} {
+  height: 200px;
+}
+
+*/
+
+const breakpointValues2026 = exports.breakpointValues2026 = {
+  XS: 0,
+  S: 320,
+  M: 740,
+  L: 1024,
+  XL: 1440
+};
+var _default = size => {
+  if (size) {
+    return `(min-width: ${breakpointValues2026[size]}px)`;
+  }
+  return 'inherit';
+};
+exports.default = _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.41.0",
+  "version": "8.43.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/theme/crTheme/theme.js

@@ -3,6 +3,8 @@ import buttonColors from './buttonColors';
 import linkStyles from './linkStyles';
 import fontSize from './fontSizes';
 import allBreakpoints from '../shared/allBreakpoints';
+import breakpoints2026 from '../shared/breakpoints2026';
+
 import fontFamilies from '../shared/fontFamilies';
 
 export default {
@@ -11,6 +13,7 @@ export default {
   linkStyles,
   fontSize,
   allBreakpoints,
+  breakpoints2026,
   fontFamilies,
   font: {
     regular: 'Montserrat',

package/src/theme/shared/breakpoints2026.js

@@ -0,0 +1,25 @@
+/**
+ * Example Usage
+
+Make height: 200px from 1024px onwards:
+
+@media ${({ theme }) => theme.breakpoints2026('L')} {
+  height: 200px;
+}
+
+*/
+
+export const breakpointValues2026 = {
+  XS: 0,
+  S: 320,
+  M: 740,
+  L: 1024,
+  XL: 1440
+};
+
+export default size => {
+  if (size) {
+    return `(min-width: ${breakpointValues2026[size]}px)`;
+  }
+  return 'inherit';
+};