@cloudflare/component-card 4.0.11 → 4.0.12

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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/es/CardDrawers.js +8 -7
  3. package/lib/CardDrawers.js +8 -7
  4. package/package.json +2 -2
  5. package/src/CardDrawers.js +8 -7
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.0.12](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.11...@cloudflare/component-card@4.0.12) (2021-11-15)
7
+
8
+ **Note:** Version bump only for package @cloudflare/component-card
9
+
10
+
11
+
12
+
13
+
6
14
  ## [4.0.11](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-card@4.0.10...@cloudflare/component-card@4.0.11) (2021-11-15)
7
15
 
8
16
  **Note:** Version bump only for package @cloudflare/component-card
package/es/CardDrawers.js CHANGED
@@ -56,7 +56,7 @@ class CardDrawers extends React.Component {
56
56
  const triggers = [];
57
57
  const drawers = [];
58
58
  this.props.drawers.forEach((_ref) => {
59
- let drawerId = _ref.id,
59
+ let drawerIdProps = _ref.id,
60
60
  name = _ref.name,
61
61
  content = _ref.content,
62
62
  drawerComponent = _ref.drawerComponent,
@@ -66,8 +66,9 @@ class CardDrawers extends React.Component {
66
66
 
67
67
  // The component used for the drawer can be overridden
68
68
  const Drawer = drawerComponent || CardDrawer;
69
+ const triggerId = `trigger-${this._cardId}-${drawerIdProps}`;
70
+ const drawerId = `drawer-${this._cardId}-${drawerIdProps}`;
69
71
  const isActive = drawerId === active;
70
- const id = `card-${this._cardId}-drawer-${drawerId}`;
71
72
  onClick && this.addToggleFunction(drawerId, onClick);
72
73
 
73
74
  if (!content && !href) {
@@ -76,20 +77,20 @@ class CardDrawers extends React.Component {
76
77
  console.error('Drawer items must have either `content` or `href` property, but not both.');
77
78
  } else {
78
79
  triggers.push(content ? /*#__PURE__*/React.createElement(CardToolbarDrawerTrigger, {
79
- key: drawerId,
80
- id: id,
80
+ key: triggerId,
81
+ id: triggerId,
81
82
  isActive: isActive,
82
83
  onClick: () => this.handleLinkClick(drawerId),
83
84
  ariaControls: drawerId,
84
85
  ariaExpanded: isActive
85
86
  }, name) : /*#__PURE__*/React.createElement(CardToolbarLink, {
86
- id: id,
87
+ id: triggerId,
87
88
  href: href
88
89
  }, name));
89
90
  content && drawers.push( /*#__PURE__*/React.createElement(Drawer, _extends({
90
- id: drawerId,
91
91
  key: drawerId,
92
- "aria-labelledby": id,
92
+ id: drawerId,
93
+ "aria-labelledby": triggerId,
93
94
  isActive: isActive,
94
95
  addToggleFunction: this.addToggleFunction.bind(this, drawerId)
95
96
  }, rest), isActive && content));
package/lib/CardDrawers.js CHANGED
@@ -112,7 +112,7 @@ var CardDrawers = /*#__PURE__*/function (_React$Component) {
112
112
  var triggers = [];
113
113
  var drawers = [];
114
114
  this.props.drawers.forEach(function (_ref2) {
115
- var drawerId = _ref2.id,
115
+ var drawerIdProps = _ref2.id,
116
116
  name = _ref2.name,
117
117
  content = _ref2.content,
118
118
  drawerComponent = _ref2.drawerComponent,
@@ -122,8 +122,9 @@ var CardDrawers = /*#__PURE__*/function (_React$Component) {
122
122
 
123
123
  // The component used for the drawer can be overridden
124
124
  var Drawer = drawerComponent || _CardDrawer.default;
125
+ var triggerId = "trigger-".concat(_this3._cardId, "-").concat(drawerIdProps);
126
+ var drawerId = "drawer-".concat(_this3._cardId, "-").concat(drawerIdProps);
125
127
  var isActive = drawerId === active;
126
- var id = "card-".concat(_this3._cardId, "-drawer-").concat(drawerId);
127
128
  onClick && _this3.addToggleFunction(drawerId, onClick);
128
129
 
129
130
  if (!content && !href) {
@@ -132,8 +133,8 @@ var CardDrawers = /*#__PURE__*/function (_React$Component) {
132
133
  console.error('Drawer items must have either `content` or `href` property, but not both.');
133
134
  } else {
134
135
  triggers.push(content ? /*#__PURE__*/_react.default.createElement(_CardToolbarDrawerTrigger.default, {
135
- key: drawerId,
136
- id: id,
136
+ key: triggerId,
137
+ id: triggerId,
137
138
  isActive: isActive,
138
139
  onClick: function onClick() {
139
140
  return _this3.handleLinkClick(drawerId);
@@ -141,13 +142,13 @@ var CardDrawers = /*#__PURE__*/function (_React$Component) {
141
142
  ariaControls: drawerId,
142
143
  ariaExpanded: isActive
143
144
  }, name) : /*#__PURE__*/_react.default.createElement(_CardToolbarLink.default, {
144
- id: id,
145
+ id: triggerId,
145
146
  href: href
146
147
  }, name));
147
148
  content && drawers.push( /*#__PURE__*/_react.default.createElement(Drawer, _extends({
148
- id: drawerId,
149
149
  key: drawerId,
150
- "aria-labelledby": id,
150
+ id: drawerId,
151
+ "aria-labelledby": triggerId,
151
152
  isActive: isActive,
152
153
  addToggleFunction: _this3.addToggleFunction.bind(_this3, drawerId)
153
154
  }, rest), isActive && content));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudflare/component-card",
3
3
  "description": "Cloudflare Card Component",
4
- "version": "4.0.11",
4
+ "version": "4.0.12",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "James Kyle <jkyle@cloudflare.com>",
@@ -31,5 +31,5 @@
31
31
  "test-coverage": "stratus test --coverage",
32
32
  "test-watch": "stratus test --watch"
33
33
  },
34
- "gitHead": "2ee21b47b66137477e1ae4798a440e90319bfe2d"
34
+ "gitHead": "3c93419b5ec7702dc1f5da2d871c9ac707f8b468"
35
35
  }
package/src/CardDrawers.js CHANGED
@@ -60,7 +60,7 @@ class CardDrawers extends React.Component {
60
60
 
61
61
  this.props.drawers.forEach(
62
62
  ({
63
- id: drawerId,
63
+ id: drawerIdProps,
64
64
  name,
65
65
  content,
66
66
  drawerComponent,
@@ -70,8 +70,9 @@ class CardDrawers extends React.Component {
70
70
  }) => {
71
71
  // The component used for the drawer can be overridden
72
72
  const Drawer = drawerComponent || CardDrawer;
73
+ const triggerId = `trigger-${this._cardId}-${drawerIdProps}`;
74
+ const drawerId = `drawer-${this._cardId}-${drawerIdProps}`;
73
75
  const isActive = drawerId === active;
74
- const id = `card-${this._cardId}-drawer-${drawerId}`;
75
76
 
76
77
  onClick && this.addToggleFunction(drawerId, onClick);
77
78
  if (!content && !href) {
@@ -86,8 +87,8 @@ class CardDrawers extends React.Component {
86
87
  triggers.push(
87
88
  content ? (
88
89
  <CardToolbarDrawerTrigger
89
- key={drawerId}
90
- id={id}
90
+ key={triggerId}
91
+ id={triggerId}
91
92
  isActive={isActive}
92
93
  onClick={() => this.handleLinkClick(drawerId)}
93
94
  ariaControls={drawerId}
@@ -96,7 +97,7 @@ class CardDrawers extends React.Component {
96
97
  {name}
97
98
  </CardToolbarDrawerTrigger>
98
99
  ) : (
99
- <CardToolbarLink id={id} href={href}>
100
+ <CardToolbarLink id={triggerId} href={href}>
100
101
  {name}
101
102
  </CardToolbarLink>
102
103
  )
@@ -105,9 +106,9 @@ class CardDrawers extends React.Component {
105
106
  content &&
106
107
  drawers.push(
107
108
  <Drawer
108
- id={drawerId}
109
109
  key={drawerId}
110
- aria-labelledby={id}
110
+ id={drawerId}
111
+ aria-labelledby={triggerId}
111
112
  isActive={isActive}
112
113
  addToggleFunction={this.addToggleFunction.bind(this, drawerId)}
113
114
  {...rest}