@doodl/slate 1.21.4 → 1.22.2

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.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)
+
+
+### Features
+
+* Add basic style customisation through custom CSS properties ([d549499](https://bitbucket.org/doodlltd/slate/commit/d5494998c7afc634a217dca874ab02b17f31eafc))
+* Add react components with modular styles ([0b5a5eb](https://bitbucket.org/doodlltd/slate/commit/0b5a5eb3f90079bce7c30005881162261dff05eb))
+
+### [1.21.5](https://bitbucket.org/doodlltd/slate/compare/v1.21.4...v1.21.5) (2021-09-01)
+
+
+### Bug Fixes
+
+* Resolve missing accessible name from accordion toggle button ([71d22fa](https://bitbucket.org/doodlltd/slate/commit/71d22fa87461efd1d506e11b3c3610ea7fa57b20))
+
 ### [1.21.4](https://bitbucket.org/doodlltd/slate/compare/v1.21.3...v1.21.4) (2021-09-01)
 
 ### [1.21.3](https://bitbucket.org/doodlltd/slate/compare/v1.21.2...v1.21.3) (2021-08-19)

package/js/dist/accordion/accordion.js

@@ -115,6 +115,8 @@ var AccordionRow = /*#__PURE__*/function () {
         _classPrivateFieldGet(_this, _toggleElement).className = _classPrivateFieldGet(_this, _options).toggleBtnClass;
         _classPrivateFieldGet(_this, _toggleElement).innerHTML = _classPrivateFieldGet(_this, _options).toggleHTML;
 
+        _classPrivateFieldGet(_this, _toggleElement).setAttribute("aria-label", "Expand Menu");
+
         _classPrivateFieldGet(_this, _toggleElement).addEventListener("click", _this.toggleRow);
 
         _this.element.parentNode.appendChild(_classPrivateFieldGet(_this, _toggleElement));

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

@@ -0,0 +1,24 @@
+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 classNames from 'classnames';
+import styles from '../../../../scss/css-modules/container.module.scss';
+
+var Container = function Container(props) {
+  var _classNames;
+
+  var children = props.children,
+      _props$center = props.center,
+      center = _props$center === void 0 ? false : _props$center,
+      _props$horizontalPadd = props.horizontalPadding,
+      horizontalPadding = _props$horizontalPadd === void 0 ? false : _props$horizontalPadd,
+      _props$wide = props.wide,
+      wide = _props$wide === void 0 ? false : _props$wide,
+      className = props.className;
+  var containerClass = classNames(styles['container'], (_classNames = {}, _defineProperty(_classNames, styles['center'], center), _defineProperty(_classNames, styles['horizontal-padding'], horizontalPadding), _defineProperty(_classNames, styles['wide'], wide), _classNames), className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: containerClass
+  }, children);
+};
+
+export default Container;

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

@@ -0,0 +1,35 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 classNames from "classnames";
+import styles from '../../../../scss/css-modules/grid.module.scss';
+
+var GridItem = function GridItem(props) {
+  var children = props.children,
+      className = props.className,
+      _props$component = props.component,
+      Component = _props$component === void 0 ? 'div' : _props$component,
+      _props$sizes = props.sizes,
+      sizes = _props$sizes === void 0 ? "" : _props$sizes;
+  var slateGridClassName = styles.slateGridClassName; // Extract dynamic grid item width classname from styles
+
+  var gridSizes = sizes.split(" ").map(function (size) {
+    return styles["".concat(slateGridClassName, "--item-width-").concat(size)];
+  });
+  var gridItemClasses = classNames.apply(void 0, _toConsumableArray(gridSizes).concat([className]));
+  return /*#__PURE__*/React.createElement(Component, {
+    className: gridItemClasses
+  }, children);
+};
+
+export default GridItem;

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

@@ -0,0 +1,43 @@
+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; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 classNames from 'classnames';
+import styles from '../../../../scss/css-modules/grid.module.scss';
+
+var Grid = function Grid(props) {
+  var _ref;
+
+  var children = props.children,
+      _props$component = props.component,
+      Component = _props$component === void 0 ? 'div' : _props$component,
+      _props$center = props.center,
+      center = _props$center === void 0 ? false : _props$center,
+      gridClassName = props.gridClassName,
+      _props$sizes = props.sizes,
+      sizes = _props$sizes === void 0 ? "" : _props$sizes,
+      _props$verticalCenter = props.verticalCenter,
+      verticalCenter = _props$verticalCenter === void 0 ? false : _props$verticalCenter;
+  var slateGridClassName = styles.slateGridClassName; // Extract dynamic grid width classname from styles
+
+  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]));
+  return /*#__PURE__*/React.createElement(Component, {
+    className: gridClasses
+  }, children);
+};
+
+export default Grid;

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

@@ -0,0 +1,27 @@
+var _excluded = ["children", "component", "className", "gridClassName"];
+
+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 classNames from "classnames";
+import Grid from ".";
+import styles from '../../../../scss/css-modules/grid.module.scss';
+
+var PaddedGrid = function PaddedGrid(props) {
+  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, {
+    className: paddedGridClasses
+  }, /*#__PURE__*/React.createElement(Grid, gridProps, children));
+};
+
+export default PaddedGrid;

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

@@ -0,0 +1,28 @@
+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 classNames from 'classnames';
+import styles from '../../../../scss/css-modules/section.module.scss';
+
+var Section = function Section(props) {
+  var _classNames;
+
+  var children = props.children,
+      _props$component = props.component,
+      Component = _props$component === void 0 ? 'section' : _props$component,
+      className = props.className,
+      _props$removeBottomPa = props.removeBottomPadding,
+      removeBottomPadding = _props$removeBottomPa === void 0 ? false : _props$removeBottomPa,
+      _props$removeTopPaddi = props.removeTopPadding,
+      removeTopPadding = _props$removeTopPaddi === void 0 ? false : _props$removeTopPaddi,
+      _props$removeLeftPadd = props.removeLeftPadding,
+      removeLeftPadding = _props$removeLeftPadd === void 0 ? false : _props$removeLeftPadd,
+      _props$removeRightPad = props.removeRightPadding,
+      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
+  }, children);
+};
+
+export default Section;

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

@@ -0,0 +1,39 @@
+var _excluded = ["align", "children", "component", "wide", "fullWidth", "removeHorizontalPadding", "removeVerticalPadding"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+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 classNames from 'classnames';
+import styles from '../../../../scss/css-modules/typography.module.scss';
+
+var Typography = function Typography(props) {
+  var _classNames;
+
+  var _props$align = props.align,
+      align = _props$align === void 0 ? "center" : _props$align,
+      children = props.children,
+      _props$component = props.component,
+      Component = _props$component === void 0 ? 'div' : _props$component,
+      _props$wide = props.wide,
+      wide = _props$wide === void 0 ? false : _props$wide,
+      _props$fullWidth = props.fullWidth,
+      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
+      _props$removeHorizont = props.removeHorizontalPadding,
+      removeHorizontalPadding = _props$removeHorizont === void 0 ? false : _props$removeHorizont,
+      _props$removeVertical = props.removeVerticalPadding,
+      removeVerticalPadding = _props$removeVertical === void 0 ? false : _props$removeVertical,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var typographyClasses = classNames(styles.typography, (_classNames = {}, _defineProperty(_classNames, styles['align-left'], align === "left"), _defineProperty(_classNames, styles['align-right'], align === "right"), _defineProperty(_classNames, styles.wide, wide), _defineProperty(_classNames, styles['full-width'], fullWidth), _defineProperty(_classNames, styles['remove-horizontal-padding'], removeHorizontalPadding), _defineProperty(_classNames, styles['remove-vertical-padding'], removeVerticalPadding), _classNames));
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: typographyClasses
+  }, rest), children);
+};
+
+export default Typography;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@doodl/slate",
-    "version": "1.21.4",
+    "version": "1.22.2",
     "description": "",
     "main": "./js/dist/index.js",
     "module": "./js/dist/index.js",
@@ -28,14 +28,20 @@
     "homepage": "https://bitbucket.org/doodlltd/slate#readme",
     "devDependencies": {
         "@babel/cli": "^7.10.4",
+        "@babel/preset-react": "^7.16.5",
         "@doodl/common-js-config": "^1.7.0",
         "@doodl/eslint-config": "npm:@doodl/common-js-config@^1.7.0",
         "standard-version": "^9.1.1"
     },
     "dependencies": {
+        "classnames": "^2.3.1",
         "core-js": "^3.6.5",
         "domready": "^1.0.8",
         "gsap": "^3.4.2",
         "lodash": "^4.17.19"
+    },
+    "peerDependencies": {
+        "react": ">=16.13.1 <=18",
+        "react-dom": ">=16.13.1 <=18"
     }
 }

package/scss/_helpers.scss

@@ -0,0 +1,208 @@
+@function _hex-to-dec($string) {
+    $hex: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
+    $string: to-lower-case($string);
+
+    @if $string == "" {
+      $string: "ff";
+    }
+
+    $length: str-length($string);
+
+    $dec: 0;
+    @for $i from 1 through $length {
+      $factor: 1 + (15 * ($length - $i));
+      $index: index($hex, str-slice($string, $i, $i));
+      $dec: $dec + $factor * ($index - 1);
+    }
+  
+    @return $dec;
+  }
+
+@function _from-hex($string) {
+    $string-lower: to-lower-case($string);
+    $r: "";  $g: ""; $b: ""; $a: "";
+    $hex: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
+    $length: str-length($string);
+    $max: if($length == 4, 1, 2);
+  
+    // Check for length accuracy
+    @if $length != 4 and $length != 7 and $length != 9 {
+      @debug "Not accurate";
+      @return $string;
+    }
+  
+    // Loop from the second character (omitting #)
+    @for $i from 2 through $length {
+      $c: str-slice($string-lower, $i, $i);
+  
+      // If wrong character, return
+      @if index($hex, $c) == null {
+        @debug "Wrong character";
+        @return $string;
+      }
+  
+      @if      str-length($r) < $max {
+        $r: $r + $c;
+      } @else if str-length($g) < $max {
+        $g: $g + $c;
+      } @else if str-length($b) < $max {
+        $b: $b + $c;
+      } @else if str-length($a) < $max {
+        $a: $a + $c;
+      }
+    }
+  
+    @if $length == 4 {
+      $r: $r + $r;
+      $g: $g + $g;
+      $b: $b + $b;
+    }
+
+    @return rgba(_hex-to-dec($r), _hex-to-dec($g), _hex-to-dec($b),_hex-to-dec($a));
+}
+
+@function is-property($string) {
+    @return type-of($string) == "string" and str-index($string, "var") and str-index($string, ",");
+}
+
+@function str-trim($string) {
+    @if (str-slice($string, 1, 1) == ' ') {
+      @return str-trim(str-slice($string, 2));
+    } @else if (str-slice($string, str-length($string), -1) == ' ') {
+      @return str-trim(str-slice($string, 1, -2));
+    } @else {
+      @return $string;
+    }
+}
+
+@function extract-value($string) {
+
+    @if is-property-map($string) {
+        @return map-get($string,default);
+    }
+
+    @if not is-property($string) {
+        @return $string;
+    }
+    $result: str-slice($string,str-index($string,",")+1,str-index($string,")")-1);
+
+    @return str-trim($result);
+}
+
+@function extract-property($string) {
+
+    @if is-property-map($string) {
+      @return map-get($string,property);
+    }
+
+    @if not is-property($string) {
+        @return $string;
+    }
+    $result: str-slice($string, str-index($string,"--"),str-index($string,",")-1);
+
+    @return str-trim($result);
+}
+
+@function guarantee-colour-value($string) {
+    @if is-property($string) {
+        $original: extract-value($string);
+        @return _from-hex($original);
+    }
+
+    @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%)),
+      200: (property: --#{$key}--200, default: scale-color($colour,$lightness: -30%)),
+      300: (property: --#{$key}--300, default: scale-color($colour,$lightness: -20%)),
+      400: (property: --#{$key}--400, default: scale-color($colour,$lightness: -10%)),
+      500: (property: --#{$key}, default: $colour),
+      600: (property: --#{$key}--600, default: scale-color($colour,$lightness: 10%)),
+      700: (property: --#{$key}--700, default: scale-color($colour,$lightness: 20%)),
+      800: (property: --#{$key}--800, default: scale-color($colour,$lightness: 30%)),
+      900: (property: --#{$key}--900, default: scale-color($colour,$lightness: 40%)),
+      muted: (property: --#{$key}--muted, default: change-color($colour,$lightness: 94%)),
+      muted2: (property: --#{$key}--muted2, default: change-color($colour,$lightness: 90%))
+    );
+}
+
+@function colour-property-from-map($map,$tint: 500) {
+    @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 is-property-map($property) {
+    $_property: extract-property($property);
+    @at-root {
+        :root {
+            #{$key}: var(#{$_property});
+        }
+    }
+  }
+}
+
+@mixin define-global-property-alias-from-map($map,$keyPrefix: "", $keySuffix: "") {
+  @each $value, $key in $map {
+    @include define-global-property-alias(#{$keyPrefix}#{$key}#{$keySuffix},$value);
+  }
+}
+
+@mixin assign-variable-property($property, $value, $key: 0, $keyPrefix: "",$keySuffix: "") {
+
+    $_value: #{extract-value($value)};
+
+    // Fallback for browsers that don't support custom CSS properties
+    #{$property}: $_value;
+    @if variable-exists(slate-include-custom-properties) {
+        @if $key != 0 {
+          // Set value equal to generated custom property name, falling back to $_value if not defined
+          #{$property}: var(#{$keyPrefix}#{$key}#{$keySuffix}, $_value);
+          // Alias CSS custom property in :root so that values cascade by default
+          @if variable-exists(slate-autogenerate-global-property-aliases) {
+            @include define-global-property-alias(#{$keyPrefix}#{$key}#{$keySuffix},$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);
+        }
+    }
+}
+
+@mixin assign-variable-property-map($property,$map,$keyPrefix: "", $keySuffix:"") {
+    
+    $fallback: ();
+    $output: ();
+
+    @each $value, $key in $map {
+
+        $_value: extract-value($value);
+
+        @if $key {
+            $output: append($output,var(#{$keyPrefix}#{$key}#{$keySuffix},#{$_value}));
+            @if variable-exists(slate-autogenerate-global-property-aliases) {
+              // Alias CSS custom property in :root so that values cascade
+              @include define-global-property-alias(#{$keyPrefix}#{$key}#{$keySuffix},$value);
+            }
+        } @else {
+            $output: append($output,#{$_value});
+        }
+
+        $fallback: append($fallback,#{$_value});
+    }
+
+    #{$property}: $fallback;
+    @if variable-exists(slate-include-custom-properties) {
+      #{$property}: $output;
+    }
+}