@cloudflare/component-header 4.0.60 → 5.0.0

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +938 -2982
  2. package/es/Hamburger.js +38 -32
  3. package/es/Header.js +19 -16
  4. package/es/NavItem.js +10 -7
  5. package/es/NavList.js +17 -14
  6. package/lib/index.js +8 -8
  7. package/package.json +10 -10
package/es/Hamburger.js CHANGED
@@ -3,39 +3,45 @@ import PropTypes from 'prop-types';
3
3
  import { Icon } from '@cloudflare/component-icon';
4
4
  import { createComponent } from '@cloudflare/style-container';
5
5
  import { Button } from '@cloudflare/elements';
6
- const Wrapper = createComponent(({
7
- theme,
8
- alwaysShow
9
- }) => ({
10
- height: '100%',
11
- display: 'flex',
12
- alignItems: 'center',
13
- borderRight: `1px solid ${theme.colors.gray[8]}`,
14
- padding: theme.space[3],
15
- userSelect: 'none',
16
- cursor: 'pointer',
17
- color: theme.colors.gray[1],
18
- backgroundColor: theme.colors.background,
19
- '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
20
- tabletWide: {
21
- display: !alwaysShow && 'none'
22
- }
23
- }), Button);
6
+ var Wrapper = createComponent(_ref => {
7
+ var {
8
+ theme,
9
+ alwaysShow
10
+ } = _ref;
11
+ return {
12
+ height: '100%',
13
+ display: 'flex',
14
+ alignItems: 'center',
15
+ borderRight: "1px solid ".concat(theme.colors.gray[8]),
16
+ padding: theme.space[3],
17
+ userSelect: 'none',
18
+ cursor: 'pointer',
19
+ color: theme.colors.gray[1],
20
+ backgroundColor: theme.colors.background,
21
+ '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
22
+ tabletWide: {
23
+ display: !alwaysShow && 'none'
24
+ }
25
+ };
26
+ }, Button);
24
27
 
25
- const Hamburger = ({
26
- onClick,
27
- label,
28
- icon,
29
- alwaysShow
30
- }) => /*#__PURE__*/React.createElement(Wrapper, {
31
- "data-testid": "hamburger-menu",
32
- alwaysShow: alwaysShow,
33
- onClick: onClick
34
- }, /*#__PURE__*/React.createElement(Icon, {
35
- label: label,
36
- size: 24,
37
- type: icon
38
- }));
28
+ var Hamburger = _ref2 => {
29
+ var {
30
+ onClick,
31
+ label,
32
+ icon,
33
+ alwaysShow
34
+ } = _ref2;
35
+ return /*#__PURE__*/React.createElement(Wrapper, {
36
+ "data-testid": "hamburger-menu",
37
+ alwaysShow: alwaysShow,
38
+ onClick: onClick
39
+ }, /*#__PURE__*/React.createElement(Icon, {
40
+ label: label,
41
+ size: 24,
42
+ type: icon
43
+ }));
44
+ };
39
45
 
40
46
  Hamburger.propTypes = {
41
47
  label: PropTypes.string,
package/es/Header.js CHANGED
@@ -1,22 +1,25 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import { createComponent } from '@cloudflare/style-container';
3
3
  import { isMobile } from '@cloudflare/util-responsive';
4
- const Header = createComponent(({
5
- theme,
6
- sticky
7
- }) => ({
8
- backgroundColor: theme.colors.background,
9
- display: 'flex',
10
- justifyContent: 'space-between',
11
- color: theme.colors.gray[1],
12
- height: 63,
13
- top: 0,
14
- left: 0,
15
- position: sticky ? !isMobile() ? 'fixed' : 'static' : 'static',
16
- width: '100%',
17
- borderBottom: `1px solid ${theme.colors.gray[8]}`,
18
- zIndex: 1200
19
- }), 'header');
4
+ var Header = createComponent(_ref => {
5
+ var {
6
+ theme,
7
+ sticky
8
+ } = _ref;
9
+ return {
10
+ backgroundColor: theme.colors.background,
11
+ display: 'flex',
12
+ justifyContent: 'space-between',
13
+ color: theme.colors.gray[1],
14
+ height: 63,
15
+ top: 0,
16
+ left: 0,
17
+ position: sticky ? !isMobile() ? 'fixed' : 'static' : 'static',
18
+ width: '100%',
19
+ borderBottom: "1px solid ".concat(theme.colors.gray[8]),
20
+ zIndex: 1200
21
+ };
22
+ }, 'header');
20
23
  Header.propTypes = {
21
24
  children: PropTypes.node.isRequired,
22
25
  sticky: PropTypes.bool
package/es/NavItem.js CHANGED
@@ -1,9 +1,12 @@
1
1
  import { createComponent } from '@cloudflare/style-container';
2
- const NavItem = createComponent(({
3
- theme
4
- }) => ({
5
- display: 'inline-block',
6
- verticalAlign: 'middle',
7
- padding: theme.space[2]
8
- }), 'li');
2
+ var NavItem = createComponent(_ref => {
3
+ var {
4
+ theme
5
+ } = _ref;
6
+ return {
7
+ display: 'inline-block',
8
+ verticalAlign: 'middle',
9
+ padding: theme.space[2]
10
+ };
11
+ }, 'li');
9
12
  export default NavItem;
package/es/NavList.js CHANGED
@@ -1,16 +1,19 @@
1
1
  import { createComponent } from '@cloudflare/style-container';
2
- const NavList = createComponent(({
3
- theme
4
- }) => ({
5
- display: 'none',
6
- lineHeight: '42px',
7
- textAlign: 'right',
8
- margin: 0,
9
- padding: 0,
10
- marginRight: theme.space[4],
11
- listStyle: 'none',
12
- tablet: {
13
- display: 'block'
14
- }
15
- }), 'ul');
2
+ var NavList = createComponent(_ref => {
3
+ var {
4
+ theme
5
+ } = _ref;
6
+ return {
7
+ display: 'none',
8
+ lineHeight: '42px',
9
+ textAlign: 'right',
10
+ margin: 0,
11
+ padding: 0,
12
+ marginRight: theme.space[4],
13
+ listStyle: 'none',
14
+ tablet: {
15
+ display: 'block'
16
+ }
17
+ };
18
+ }, 'ul');
16
19
  export default NavList;
package/lib/index.js CHANGED
@@ -3,22 +3,16 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "Header", {
7
- enumerable: true,
8
- get: function get() {
9
- return _Header.default;
10
- }
11
- });
12
6
  Object.defineProperty(exports, "Hamburger", {
13
7
  enumerable: true,
14
8
  get: function get() {
15
9
  return _Hamburger.default;
16
10
  }
17
11
  });
18
- Object.defineProperty(exports, "NavList", {
12
+ Object.defineProperty(exports, "Header", {
19
13
  enumerable: true,
20
14
  get: function get() {
21
- return _NavList.default;
15
+ return _Header.default;
22
16
  }
23
17
  });
24
18
  Object.defineProperty(exports, "NavItem", {
@@ -27,6 +21,12 @@ Object.defineProperty(exports, "NavItem", {
27
21
  return _NavItem.default;
28
22
  }
29
23
  });
24
+ Object.defineProperty(exports, "NavList", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _NavList.default;
28
+ }
29
+ });
30
30
 
31
31
  var _Header = _interopRequireDefault(require("./Header"));
32
32
 
package/package.json CHANGED
@@ -1,23 +1,24 @@
1
1
  {
2
2
  "name": "@cloudflare/component-header",
3
3
  "description": "Cloudflare Header Component",
4
- "version": "4.0.60",
4
+ "version": "5.0.0",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "Vojtech Miksu <vojtech@miksu.cz>",
8
8
  "license": "BSD-3-Clause",
9
9
  "publishConfig": {
10
- "registry": "https://registry.npmjs.org/",
11
- "access": "public"
10
+ "access": "public",
11
+ "main": "lib/index.js",
12
+ "module": "es/index.js"
12
13
  },
13
14
  "dependencies": {
14
- "@cloudflare/component-icon": "^7.2.25",
15
- "@cloudflare/elements": "^1.12.8",
16
- "@cloudflare/style-container": "^7.8.46",
17
- "@cloudflare/util-responsive": "^1.2.64",
15
+ "@cloudflare/component-icon": "^8.0.0",
16
+ "@cloudflare/elements": "^2.0.0",
17
+ "@cloudflare/util-responsive": "^1.2.66",
18
18
  "prop-types": "^15.6.0"
19
19
  },
20
20
  "peerDependencies": {
21
+ "@cloudflare/style-container": "^7.9.0",
21
22
  "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
22
23
  },
23
24
  "stratus": {
@@ -30,6 +31,5 @@
30
31
  "test": "stratus test",
31
32
  "test-coverage": "stratus test --coverage",
32
33
  "test-watch": "stratus test --watch"
33
- },
34
- "gitHead": "db9637310d476ef91a50177d026526ca40cb9330"
35
- }
34
+ }
35
+ }