@doodl/slate 1.22.2 → 1.22.5

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.5](https://bitbucket.org/doodlltd/slate/compare/v1.22.4...v1.22.5) (2022-05-26)
+
+
+### Bug Fixes
+
+* Resolve colour behaviour of default contained buttons ([9fe80a6](https://bitbucket.org/doodlltd/slate/commit/9fe80a6411fb0af3b4e5cc6fa5a52a7a14531fc2))
+
+### [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)
 
 

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.2",
+    "version": "1.22.5",
     "description": "",
     "main": "./js/dist/index.js",
     "module": "./js/dist/index.js",

package/scss/_mixins.scss

@@ -119,9 +119,9 @@
         } @else {
             $_colour: $slate-button-colour--contrast;
         }
-
-        @include assign-variable-property(color, $_colour, $key, #{$keyPrefix}colour--, $keySuffix);
     }
+
+    @include assign-variable-property(color, $_colour, $key, #{$keyPrefix}colour--, $keySuffix);
 }
 
 @mixin contained-button(

package/scss/core/_button.scss

@@ -109,11 +109,17 @@
     }
 
     &.contained {
+        // Edge case for default contained button, where we will usually want
+        // to retain the default button colour on hover
+        $_default-button-colour-override--contained--hover: $slate-button-colour;
+        @if $slate-button-colour-override--contained--hover != 0 {
+            $_default-button-colour-override--contained--hover: $slate-button-colour-override--contained--hover;
+        }
         @include contained-button(
             $slate-button-background--contained,
             $slate-button-colour,
             $slate-button-background-override--contained--hover,
-            $slate-button-colour-override--contained--hover,
+            $_default-button-colour-override--contained--hover,
             $slate-button-border-colour-override--contained,
             $slate-button-border-colour-override--contained--hover,
         );

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;

package/scss/variables/_button.scss

@@ -82,7 +82,7 @@ $slate-button-border-colour-bad-override--contained: 0 !default;
 $slate-button-border-colour-bad-override--contained--hover: 0 !default;
 ////
 
-$slate-button-lighten-amount: 20 !default;
+$slate-button-lighten-amount: 90 !default;
 $slate-button-darken-amount: 15 !default;
 $slate-button-box-shadow--active: inset 0.05em 0.05em 0.5em !default; // Don't include the colour here
 $slate-button-background--contained: scale-color($slate-button-colour, $lightness: $slate-button-lighten-amount) !default;