@cypress-design/react-accordion 0.4.4 → 1.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 (9) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/Accordion.tsx +3 -3
  3. package/AccordionReact.cy.tsx +3 -3
  4. package/CHANGELOG.md +13 -0
  5. package/dist/index.es.mjs +53 -18
  6. package/dist/index.es.mjs.map +1 -1
  7. package/dist/index.umd.js +53 -18
  8. package/dist/index.umd.js.map +1 -1
  9. package/package.json +5 -5
package/.turbo/turbo-build.log CHANGED
@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
2
2
  $ rollup -c ./rollup.config.mjs
3
3
  
4
4
  ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
5
- created ./dist/index.umd.js, ./dist/index.es.mjs in 16.8s
5
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 14.2s
6
6
  $ tsc --project ./tsconfig.build.json
package/Accordion.tsx CHANGED
@@ -43,7 +43,7 @@ export const Accordion: React.FC<
43
43
  <summary
44
44
  className={clsx(
45
45
  CssClasses.summary,
46
- headingClassName ?? CssClasses.summaryColor
46
+ headingClassName ?? CssClasses.summaryColor,
47
47
  )}
48
48
  >
49
49
  <span className={CssClasses.summaryDiv}>
@@ -58,7 +58,7 @@ export const Accordion: React.FC<
58
58
  <span
59
59
  className={clsx(
60
60
  titleClassName ?? CssClasses.summaryTitleColor,
61
- CssClasses.summaryTitle
61
+ CssClasses.summaryTitle,
62
62
  )}
63
63
  >
64
64
  {title}
@@ -67,7 +67,7 @@ export const Accordion: React.FC<
67
67
  <span
68
68
  className={clsx(
69
69
  CssClasses.summaryDescription,
70
- descriptionClassName ?? CssClasses.summaryDescriptionColor
70
+ descriptionClassName ?? CssClasses.summaryDescriptionColor,
71
71
  )}
72
72
  >
73
73
  {description}
package/AccordionReact.cy.tsx CHANGED
@@ -16,7 +16,7 @@ describe('Accordion', () => {
16
16
 
17
17
  it('can be passed an icon as a prop', () => {
18
18
  mount(
19
- <Accordion title="hi" icon={IconActionQuestionMarkCircle}></Accordion>
19
+ <Accordion title="hi" icon={IconActionQuestionMarkCircle}></Accordion>,
20
20
  ).get('summary svg')
21
21
  })
22
22
 
@@ -31,7 +31,7 @@ describe('Accordion', () => {
31
31
  fillColor="red-50"
32
32
  />
33
33
  }
34
- ></Accordion>
34
+ ></Accordion>,
35
35
  ).get('[data-cy=icon-element]')
36
36
  })
37
37
 
@@ -47,7 +47,7 @@ describe('Accordion', () => {
47
47
  fillColor="red-50"
48
48
  />
49
49
  }
50
- ></Accordion>
50
+ ></Accordion>,
51
51
  ).get('[data-cy=icon-element]')
52
52
 
53
53
  cy.get('summary').find('svg').should('have.length', 2)
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @cypress-design/react-accordion
2
2
 
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
12
+ - @cypress-design/constants-accordion@1.0.0
13
+ - @cypress-design/react-icon@1.0.0
14
+ - @cypress-design/details-animation@1.0.0
15
+
3
16
  ## 0.4.4
4
17
 
5
18
  ### Patch Changes
package/dist/index.es.mjs CHANGED
@@ -18,7 +18,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18
18
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19
19
  PERFORMANCE OF THIS SOFTWARE.
20
20
  ***************************************************************************** */
21
- /* global Reflect, Promise */
21
+ /* global Reflect, Promise, SuppressedError, Symbol */
22
22
 
23
23
 
24
24
  var __assign$1 = function() {
@@ -42,7 +42,12 @@ function __rest$1(s, e) {
42
42
  t[p[i]] = s[p[i]];
43
43
  }
44
44
  return t;
45
- }
45
+ }
46
+
47
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
48
+ var e = new Error(message);
49
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
50
+ };
46
51
 
47
52
  const CssClasses = {
48
53
  summary: 'details-none card open:rounded-b-none',
@@ -73,7 +78,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
73
78
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
74
79
  PERFORMANCE OF THIS SOFTWARE.
75
80
  ***************************************************************************** */
76
- /* global Reflect, Promise */
81
+ /* global Reflect, Promise, SuppressedError, Symbol */
77
82
 
78
83
 
79
84
  var __assign = function() {
@@ -97,10 +102,15 @@ function __rest(s, e) {
97
102
  t[p[i]] = s[p[i]];
98
103
  }
99
104
  return t;
100
- }
105
+ }
106
+
107
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
108
+ var e = new Error(message);
109
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
110
+ };
101
111
 
102
112
  var compileReactIconProperties = function (_a) {
103
- var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
113
+ var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, alt = _a.alt, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name", "alt"]);
104
114
  var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
105
115
  if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
106
116
  attrName !== 'name') {
@@ -111,8 +121,27 @@ var compileReactIconProperties = function (_a) {
111
121
  }
112
122
  return newAttributes;
113
123
  }, {});
124
+ // eslint-disable-next-line react-hooks/rules-of-hooks
125
+ React.useEffect(function () {
126
+ var iconFileId = "".concat(name, "_").concat(size);
127
+ if (defs) {
128
+ if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
129
+ return;
130
+ }
131
+ var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
132
+ svgElement.setAttribute('data-cy-svg-defs', iconFileId);
133
+ svgElement.setAttribute('width', '0');
134
+ svgElement.setAttribute('height', '0');
135
+ svgElement.innerHTML = defs;
136
+ document.body.appendChild(svgElement);
137
+ }
138
+ }, [defs, name, size]);
114
139
  var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
115
- __html: body,
140
+ __html: alt
141
+ ? "<title>".concat(alt.replace(/[><]/g, function (s) {
142
+ return s === '>' ? '&gt;' : '&lt;';
143
+ }), "</title>").concat(body)
144
+ : body,
116
145
  }, className: undefined }, filteredAttributes);
117
146
  if (attributes.className) {
118
147
  compiledClasses.push(attributes.className);
@@ -122,21 +151,27 @@ var compileReactIconProperties = function (_a) {
122
151
  }
123
152
  return componentProps;
124
153
  };
125
- var IconChevronDownSmall = function (props) {
126
- var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["8", "16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
127
- var iconBodies = {
128
- "8": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 2.5 3 3 3-3\" class=\"icon-dark\"/>",
129
- "16": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m4 6 4 4 4-4\" class=\"icon-dark\"/>"
130
- };
131
- var body = iconBodies[size];
154
+
155
+ function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
156
+ var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
157
+ var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, cleanProps), { availableSizes: availableSizes, interactiveColorsOnGroup: interactiveColorsOnGroup })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
158
+ var _b = iconBodiesAndDefs[size] || {}, body = _b.body, defs = _b.defs;
132
159
  if (!body) {
133
- throw Error("Icon \"chevron-down-small\" is not available in size ".concat(size));
160
+ throw Error("Icon \"".concat(name, "\" is not available in size ").concat(size));
134
161
  }
135
- return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
136
- };
162
+ return compileReactIconProperties(__assign(__assign({}, cleanProps), { name: name, size: size, body: body, defs: defs, compiledClasses: compiledClasses }));
163
+ }
164
+ var IconChevronDownSmall = function (props) { return React.createElement('svg', useIconProps(props, {
165
+ "8": {
166
+ "body": "<path d=\"m1 2.5 3 3 3-3\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
167
+ },
168
+ "16": {
169
+ "body": "<path d=\"m4 6 4 4 4-4\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
170
+ }
171
+ }, ["8", "16"], "chevron-down-small")); };
137
172
 
138
173
 
139
- /* <wind-keep class="filter"> */
174
+ /* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
140
175
 
141
176
  var Accordion = function (_a) {
142
177
  var title = _a.title, description = _a.description, Icon = _a.icon, iconEl = _a.iconEl, _b = _a.separator, separator = _b === void 0 ? false : _b, children = _a.children, headingClassName = _a.headingClassName, titleClassName = _a.titleClassName, descriptionClassName = _a.descriptionClassName, fullWidthContent = _a.fullWidthContent, rest = __rest$1(_a, ["title", "description", "icon", "iconEl", "separator", "children", "headingClassName", "titleClassName", "descriptionClassName", "fullWidthContent"]);
@@ -163,4 +198,4 @@ var Accordion = function (_a) {
163
198
  export { Accordion as default };
164
199
  //# sourceMappingURL=index.es.mjs.map
165
200
 
166
- /* <wind-keep class="flex-grow grow pr-[16px] open:rounded-b-none flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px] bg-white text-[18px] leading-[28px] font-medium text-indigo-500 block text-[14px] leading-[20px] font-normal text-gray-700 mr-[24px] flex-shrink-0 w-[1px] h-[40px] bg-gray-100 mr-[16px] transition transform rotate-0 open:rotate-180 border border-gray-100 rounded-b-md border-t-0 py-[16px]"> */
201
+ /* <wind-keep class="flex-grow grow pr-[16px] open:icon-dark-gray-500 details-none card open:rounded-b-none flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px] bg-white text-[18px] leading-[28px] font-medium text-indigo-500 block text-[14px] leading-[20px] font-normal text-gray-700 mr-[24px] flex-shrink-0 w-[1px] h-[40px] bg-gray-100 mr-[16px] transition transform rotate-0 open:rotate-180 border border-gray-100 rounded-b-md border-t-0 py-[16px]"> */