@doodl/slate 1.22.1 → 1.22.4

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.22.4](https://bitbucket.org/doodlltd/slate/compare/v1.22.3...v1.22.4) (2022-04-07)
+
+### [1.22.3](https://bitbucket.org/doodlltd/slate/compare/v1.22.2...v1.22.3) (2022-02-13)
+
+
+### Bug Fixes
+
+* Flag default breakpoints as SCSS defaults ([f380ddc](https://bitbucket.org/doodlltd/slate/commit/f380ddce65ef6287b040e2a2a796ebf0eecbc29d))
+
+### [1.22.2](https://bitbucket.org/doodlltd/slate/compare/v1.22.1...v1.22.2) (2021-12-22)
+
+
+### Bug Fixes
+
+* Assign property inheritance to variable properties if the value is a property map ([71a9287](https://bitbucket.org/doodlltd/slate/commit/71a9287b2846bbccb4ffd19e185d26542dbdca3c))
+* Ensure $key is not required to assign a variable property ([02c419f](https://bitbucket.org/doodlltd/slate/commit/02c419f0ce5c58fc329b13c1520c23813179d7d4))
+* Nested map-get doesn't work on older Sass compilers ([1b9c98b](https://bitbucket.org/doodlltd/slate/commit/1b9c98be844a6bc096aa7d9a1f9c4560d0ebd3ec))
+
 ### [1.22.1](https://bitbucket.org/doodlltd/slate/compare/v1.22.0...v1.22.1) (2021-12-22)
 
 ## [1.22.0](https://bitbucket.org/doodlltd/slate/compare/v1.21.5...v1.22.0) (2021-12-16)

package/js/dist/react-components/grid/grid-item.js

@@ -10,11 +10,11 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from "classnames";
 import styles from '../../../../scss/css-modules/grid.module.scss';
 
-var GridItem = function GridItem(props) {
+var GridItem = function GridItem(props, ref) {
   var children = props.children,
       className = props.className,
       _props$component = props.component,
@@ -28,8 +28,9 @@ var GridItem = function GridItem(props) {
   });
   var gridItemClasses = classNames.apply(void 0, _toConsumableArray(gridSizes).concat([className]));
   return /*#__PURE__*/React.createElement(Component, {
+    ref: ref,
     className: gridItemClasses
   }, children);
 };
 
-export default GridItem;
+export default /*#__PURE__*/forwardRef(GridItem);

package/js/dist/react-components/grid/index.js

@@ -12,14 +12,15 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styles from '../../../../scss/css-modules/grid.module.scss';
 
-var Grid = function Grid(props) {
+var Grid = function Grid(props, ref) {
   var _ref;
 
   var children = props.children,
+      className = props.className,
       _props$component = props.component,
       Component = _props$component === void 0 ? 'div' : _props$component,
       _props$center = props.center,
@@ -34,10 +35,11 @@ var Grid = function Grid(props) {
   var gridSizes = sizes.split(" ").map(function (size) {
     return styles["".concat(slateGridClassName, "-width-").concat(size)];
   });
-  var gridClasses = classNames.apply(void 0, [styles[slateGridClassName]].concat(_toConsumableArray(gridSizes), [(_ref = {}, _defineProperty(_ref, styles['center'], center), _defineProperty(_ref, styles['verticalCenter'], verticalCenter), _ref), gridClassName]));
+  var gridClasses = classNames.apply(void 0, [styles[slateGridClassName]].concat(_toConsumableArray(gridSizes), [(_ref = {}, _defineProperty(_ref, styles.center, center), _defineProperty(_ref, styles.verticalCenter, verticalCenter), _ref), className, gridClassName]));
   return /*#__PURE__*/React.createElement(Component, {
+    ref: ref,
     className: gridClasses
   }, children);
 };
 
-export default Grid;
+export default /*#__PURE__*/forwardRef(Grid);

package/js/dist/react-components/grid/padded-grid.js

@@ -1,27 +1,27 @@
-var _excluded = ["children", "component", "className", "gridClassName"];
+var _excluded = ["children", "component", "className"];
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from "classnames";
 import Grid from ".";
 import styles from '../../../../scss/css-modules/grid.module.scss';
 
-var PaddedGrid = function PaddedGrid(props) {
+var PaddedGrid = function PaddedGrid(props, ref) {
   var children = props.children,
       _props$component = props.component,
       Component = _props$component === void 0 ? 'div' : _props$component,
       className = props.className,
-      gridClassName = props.gridClassName,
       gridProps = _objectWithoutProperties(props, _excluded);
 
   var slatePaddedGridClassName = styles.slatePaddedGridClassName;
   var paddedGridClasses = classNames(styles[slatePaddedGridClassName], className);
   return /*#__PURE__*/React.createElement(Component, {
+    ref: ref,
     className: paddedGridClasses
   }, /*#__PURE__*/React.createElement(Grid, gridProps, children));
 };
 
-export default PaddedGrid;
+export default /*#__PURE__*/forwardRef(PaddedGrid);

package/js/dist/react-components/section/index.js

@@ -1,13 +1,13 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import styles from '../../../../scss/css-modules/section.module.scss';
-
-var Section = function Section(props) {
+var Section = /*#__PURE__*/forwardRef(function (props, ref) {
   var _classNames;
 
-  var children = props.children,
+  var id = props.id,
+      children = props.children,
       _props$component = props.component,
       Component = _props$component === void 0 ? 'section' : _props$component,
       className = props.className,
@@ -21,8 +21,9 @@ var Section = function Section(props) {
       removeRightPadding = _props$removeRightPad === void 0 ? false : _props$removeRightPad;
   var classes = classNames(styles.section, (_classNames = {}, _defineProperty(_classNames, styles['remove-bottom-padding'], removeBottomPadding), _defineProperty(_classNames, styles['remove-top-padding'], removeTopPadding), _defineProperty(_classNames, styles['remove-left-padding'], removeLeftPadding), _defineProperty(_classNames, styles['remove-right-padding'], removeRightPadding), _classNames), className);
   return /*#__PURE__*/React.createElement(Component, {
-    className: classes
+    id: id,
+    className: classes,
+    ref: ref
   }, children);
-};
-
+});
 export default Section;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@doodl/slate",
-    "version": "1.22.1",
+    "version": "1.22.4",
     "description": "",
     "main": "./js/dist/index.js",
     "module": "./js/dist/index.js",

package/scss/_helpers.scss

@@ -77,7 +77,7 @@
 
 @function extract-value($string) {
 
-    @if type-of($string) == "map" {
+    @if is-property-map($string) {
         @return map-get($string,default);
     }
 
@@ -91,7 +91,7 @@
 
 @function extract-property($string) {
 
-    @if type-of($string) == "map" {
+    @if is-property-map($string) {
       @return map-get($string,property);
     }
 
@@ -112,6 +112,14 @@
     @return $string;
 }
 
+@function is-property-map($value) {
+  @if type-of($value) == "map" and map-has-key($value,default) and map-has-key($value,property) {
+    @return true;
+  }
+
+  @return false;
+}
+
 @function build-colour-map($key, $colour) {
     @return (
       100: (property: --#{$key}--100, default: scale-color($colour,$lightness: -40%)),
@@ -129,11 +137,11 @@
 }
 
 @function colour-property-from-map($map,$tint: 500) {
-    @return var(#{map-get($map,$tint,property)},#{map-get($map,$tint,default)});
+    @return var(#{map-get(map-get($map,$tint),property)},#{map-get(map-get($map,$tint),default)});
 }
 
 @mixin define-global-property-alias($key, $property) {
-  @if is-property($property) or type-of($property) == "map" {
+  @if is-property($property) or is-property-map($property) {
     $_property: extract-property($property);
     @at-root {
         :root {
@@ -149,7 +157,7 @@
   }
 }
 
-@mixin assign-variable-property($property, $value, $key, $keyPrefix: "",$keySuffix: "") {
+@mixin assign-variable-property($property, $value, $key: 0, $keyPrefix: "",$keySuffix: "") {
 
     $_value: #{extract-value($value)};
 
@@ -163,7 +171,7 @@
           @if variable-exists(slate-autogenerate-global-property-aliases) {
             @include define-global-property-alias(#{$keyPrefix}#{$key}#{$keySuffix},$value);
           }
-        } @else if is-property($value) {
+        } @else if is-property($value) or is-property-map($value) {
           // Assign the CSS custom property so that the value is inherited
           $_customProperty: #{extract-property($value)};
           #{$property}: var(#{$_customProperty}, $_value);

package/scss/_mixins.scss

@@ -104,7 +104,7 @@
         $_colour: $colour;
     } @else {
         $_bg: "";
-        @if type-of($background) == "map" {
+        @if is-property-map($background) {
             $_bg: map-get($background,default);
         } @else {
             $_bg: guarantee-colour-value($background);
@@ -154,7 +154,7 @@
     @if $background--hover != 0 {
         $_background-colour--hover: $background--hover;
     } @else {
-        @if type-of($_background-colour) == "map" {
+        @if is-property-map($_background-colour) {
             // Use the default value to determine a lightness
             $_bg-lightness: lightness(map-get($_background-colour,default));
             @if $_bg-lightness < 20 {

package/scss/variables/_breakpoints.scss

@@ -10,14 +10,14 @@ $slate-breakpoints: (
     medium: $slate-breakpoints-medium,
     large: $slate-breakpoints-large,
     x-large: $slate-breakpoints-x-large
-);
+) !default;
 
 $slate-media-queries: (
     small: screen and (min-width: $slate-breakpoints-small),
     medium: screen and (min-width: $slate-breakpoints-medium),
     large: screen and (min-width: $slate-breakpoints-large),
     x-large: screen and (min-width: $slate-breakpoints-x-large)
-);
+) !default;
 
 :export {
     small: $slate-breakpoints-small;