@tenancy.nz/ui 1.1.5 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,26 +7,36 @@ var react = require('@emotion/react');
7
7
  var styles = require('@mui/material/styles');
8
8
  var IconButton = require('@mui/material/IconButton');
9
9
  var Button_styled = require('./Button.styled.cjs');
10
+ var object = require('./object.cjs');
10
11
  require('@mui/material/Button');
11
- require('./object.cjs');
12
12
  require('./boolean.cjs');
13
13
 
14
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
14
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
15
15
  var sizeStyles = function sizeStyles(_ref) {
16
16
  var size = _ref.size;
17
17
  return react.css(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n"])), size === "small" && react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers._taggedTemplateLiteral(["\n font-size: 24px;\n "]))), size === "medium" && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers._taggedTemplateLiteral(["\n font-size: 30px;\n "]))), size === "large" && react.css(_templateObject4 || (_templateObject4 = _rollupPluginBabelHelpers._taggedTemplateLiteral(["\n font-size: 36px;\n "]))));
18
18
  };
19
- var StyledIconButton = styles.styled(IconButton)(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteral(["\n ", "\n"])), function (_ref2) {
20
- var disabled = _ref2.disabled,
21
- edges = _ref2.edges,
22
- size = _ref2.size,
19
+ var hoverStyles = function hoverStyles(_ref2) {
20
+ var color = _ref2.color,
23
21
  theme = _ref2.theme;
24
- return react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers._taggedTemplateLiteral(["\n && {\n padding: 4px;\n ", "\n ", "\n ", "\n }\n "])), disabled && Button_styled.disabledStyles, Button_styled.edgesStyles({
22
+ return react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers._taggedTemplateLiteral(["\n &:hover,\n &:active {\n background-color: var(--IconButton-hoverBg) !important;\n color: ", ";\n }\n"])), object.getObjectProp(theme, "vars.palette.".concat(color, ".main")));
23
+ };
24
+ var StyledIconButton = styles.styled(IconButton)(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers._taggedTemplateLiteral(["\n ", "\n"])), function (_ref3) {
25
+ var color = _ref3.color,
26
+ disabled = _ref3.disabled,
27
+ edges = _ref3.edges,
28
+ size = _ref3.size,
29
+ theme = _ref3.theme;
30
+ return react.css(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers._taggedTemplateLiteral(["\n && {\n padding: 4px;\n ", "\n ", "\n ", "\n ", "\n }\n "])), disabled && Button_styled.disabledStyles, Button_styled.edgesStyles({
25
31
  edges: edges,
26
32
  theme: theme
27
33
  }), sizeStyles({
28
34
  size: size
35
+ }), hoverStyles({
36
+ color: color,
37
+ theme: theme
29
38
  }));
30
39
  });
31
40
 
32
41
  exports.default = StyledIconButton;
42
+ exports.hoverStyles = hoverStyles;
@@ -110,10 +110,13 @@ var palette = {
110
110
  var breakpoints = {
111
111
  values: {
112
112
  xs: 0,
113
+ mob: 520,
113
114
  sm: 768,
114
115
  md: 992,
115
116
  lg: 1280,
116
- xl: 1920
117
+ mlg: 1400,
118
+ elg: 1580,
119
+ xl: 1900
117
120
  }
118
121
  };
119
122
  var typography = {
@@ -3,26 +3,35 @@ import { css } from '@emotion/react';
3
3
  import { styled } from '@mui/material/styles';
4
4
  import IconButton from '@mui/material/IconButton';
5
5
  import { disabledStyles, edgesStyles } from './Button.styled.js';
6
+ import { getObjectProp } from './object.js';
6
7
  import '@mui/material/Button';
7
- import './object.js';
8
8
  import './boolean.js';
9
9
 
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
11
11
  var sizeStyles = function sizeStyles(_ref) {
12
12
  var size = _ref.size;
13
13
  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n"])), size === "small" && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 24px;\n "]))), size === "medium" && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 30px;\n "]))), size === "large" && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 36px;\n "]))));
14
14
  };
15
- var StyledIconButton = styled(IconButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref2) {
16
- var disabled = _ref2.disabled,
17
- edges = _ref2.edges,
18
- size = _ref2.size,
15
+ var hoverStyles = function hoverStyles(_ref2) {
16
+ var color = _ref2.color,
19
17
  theme = _ref2.theme;
20
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n && {\n padding: 4px;\n ", "\n ", "\n ", "\n }\n "])), disabled && disabledStyles, edgesStyles({
18
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &:hover,\n &:active {\n background-color: var(--IconButton-hoverBg) !important;\n color: ", ";\n }\n"])), getObjectProp(theme, "vars.palette.".concat(color, ".main")));
19
+ };
20
+ var StyledIconButton = styled(IconButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref3) {
21
+ var color = _ref3.color,
22
+ disabled = _ref3.disabled,
23
+ edges = _ref3.edges,
24
+ size = _ref3.size,
25
+ theme = _ref3.theme;
26
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n && {\n padding: 4px;\n ", "\n ", "\n ", "\n ", "\n }\n "])), disabled && disabledStyles, edgesStyles({
21
27
  edges: edges,
22
28
  theme: theme
23
29
  }), sizeStyles({
24
30
  size: size
31
+ }), hoverStyles({
32
+ color: color,
33
+ theme: theme
25
34
  }));
26
35
  });
27
36
 
28
- export { StyledIconButton as default };
37
+ export { StyledIconButton as default, hoverStyles };
@@ -106,10 +106,13 @@ var palette = {
106
106
  var breakpoints = {
107
107
  values: {
108
108
  xs: 0,
109
+ mob: 520,
109
110
  sm: 768,
110
111
  md: 992,
111
112
  lg: 1280,
112
- xl: 1920
113
+ mlg: 1400,
114
+ elg: 1580,
115
+ xl: 1900
113
116
  }
114
117
  };
115
118
  var typography = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tenancy.nz/ui",
3
- "version": "1.1.5",
3
+ "version": "1.1.6",
4
4
  "description": "Library of React UI components for tenancy.co.nz apps.",
5
5
  "author": "Tenancy.co.nz <monty@tenancy.co.nz>",
6
6
  "keywords": [