@toptal/picasso-show-more 1.0.13 → 1.0.15

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 (2) hide show
  1. package/package.json +5 -5
  2. package/src/ShowMore/__snapshots__/test.tsx.snap +30 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-show-more",
3
- "version": "1.0.13",
3
+ "version": "1.0.15",
4
4
  "description": "Toptal UI components library - ShowMore",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -22,9 +22,9 @@
22
22
  },
23
23
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
24
24
  "dependencies": {
25
- "@toptal/picasso-button": "1.0.13",
26
- "@toptal/picasso-icons": "1.1.0",
27
- "@toptal/picasso-typography": "2.0.0",
25
+ "@toptal/picasso-button": "2.0.1",
26
+ "@toptal/picasso-icons": "1.1.1",
27
+ "@toptal/picasso-typography": "2.0.1",
28
28
  "classnames": "^2.5.1",
29
29
  "react-truncate": "^2.4.0"
30
30
  },
@@ -40,7 +40,7 @@
40
40
  ".": "./dist-package/src/index.js"
41
41
  },
42
42
  "devDependencies": {
43
- "@toptal/picasso-test-utils": "1.1.0"
43
+ "@toptal/picasso-test-utils": "1.1.1"
44
44
  },
45
45
  "files": [
46
46
  "dist-package/**",
package/src/ShowMore/__snapshots__/test.tsx.snap CHANGED
@@ -23,17 +23,19 @@ exports[`ShowMore renders 1`] = `
23
23
  </span>
24
24
  </p>
25
25
  <button
26
- class="MuiButtonBase-root PicassoButton-small PicassoButtonAction-small PicassoButton-secondary PicassoButton-root PicassoButtonAction-root PicassoShowMore-toggleText"
26
+ aria-disabled="false"
27
+ class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
27
28
  data-component-type="button"
29
+ role="button"
28
30
  tabindex="0"
29
31
  type="button"
30
32
  >
31
33
  <span
32
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content PicassoButtonAction-content"
34
+ class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold text-blue text-md"
33
35
  >
34
36
  Show more
35
37
  <div
36
- class="PicassoButton-icon PicassoButtonAction-icon PicassoShowMore-iconWrapper PicassoButton-iconRight PicassoButtonAction-iconRight"
38
+ class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
37
39
  >
38
40
  <svg
39
41
  class="PicassoSvgChevronRight16-root PicassoShowMore-icon"
@@ -74,17 +76,19 @@ exports[`ShowMore when custom lessText text is specified should render with cust
74
76
  </span>
75
77
  </p>
76
78
  <button
77
- class="MuiButtonBase-root PicassoButton-small PicassoButtonAction-small PicassoButton-secondary PicassoButton-root PicassoButtonAction-root PicassoShowMore-toggleText"
79
+ aria-disabled="false"
80
+ class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
78
81
  data-component-type="button"
82
+ role="button"
79
83
  tabindex="0"
80
84
  type="button"
81
85
  >
82
86
  <span
83
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content PicassoButtonAction-content"
87
+ class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold text-blue text-md"
84
88
  >
85
89
  Show more
86
90
  <div
87
- class="PicassoButton-icon PicassoButtonAction-icon PicassoShowMore-iconWrapper PicassoButton-iconRight PicassoButtonAction-iconRight"
91
+ class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
88
92
  >
89
93
  <svg
90
94
  class="PicassoSvgChevronRight16-root PicassoShowMore-icon"
@@ -125,17 +129,19 @@ exports[`ShowMore when custom showMore text is specified should render with cust
125
129
  </span>
126
130
  </p>
127
131
  <button
128
- class="MuiButtonBase-root PicassoButton-small PicassoButtonAction-small PicassoButton-secondary PicassoButton-root PicassoButtonAction-root PicassoShowMore-toggleText"
132
+ aria-disabled="false"
133
+ class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
129
134
  data-component-type="button"
135
+ role="button"
130
136
  tabindex="0"
131
137
  type="button"
132
138
  >
133
139
  <span
134
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content PicassoButtonAction-content"
140
+ class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold text-blue text-md"
135
141
  >
136
142
  Display everything
137
143
  <div
138
- class="PicassoButton-icon PicassoButtonAction-icon PicassoShowMore-iconWrapper PicassoButton-iconRight PicassoButtonAction-iconRight"
144
+ class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
139
145
  >
140
146
  <svg
141
147
  class="PicassoSvgChevronRight16-root PicassoShowMore-icon"
@@ -190,17 +196,19 @@ exports[`ShowMore when initialExpanded prop is true should render expanded versi
190
196
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur est asperiores. Inventore quam vel neque voluptatum, tenetur consectetur sapiente veniam, sint expedita voluptate reiciendis illum numquam officia obcaecati dicta? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur est asperiores. Inventore quam vel neque voluptatum, tenetur consectetur sapiente veniam, sint expedita voluptate reiciendis illum numquam officia obcaecati dicta?
191
197
  </p>
192
198
  <button
193
- class="MuiButtonBase-root PicassoButton-small PicassoButtonAction-small PicassoButton-secondary PicassoButton-root PicassoButtonAction-root PicassoShowMore-toggleText"
199
+ aria-disabled="false"
200
+ class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
194
201
  data-component-type="button"
202
+ role="button"
195
203
  tabindex="0"
196
204
  type="button"
197
205
  >
198
206
  <span
199
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content PicassoButtonAction-content"
207
+ class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold text-blue text-md"
200
208
  >
201
209
  Show less
202
210
  <div
203
- class="PicassoButton-icon PicassoButtonAction-icon PicassoShowMore-iconWrapper PicassoButton-iconRight PicassoButtonAction-iconRight"
211
+ class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
204
212
  >
205
213
  <svg
206
214
  class="PicassoSvgChevronRight16-root PicassoShowMore-icon PicassoShowMore-expandedIcon"
@@ -241,17 +249,19 @@ exports[`ShowMore when initialExpanded prop is true when show less link is click
241
249
  </span>
242
250
  </p>
243
251
  <button
244
- class="MuiButtonBase-root PicassoButton-small PicassoButtonAction-small PicassoButton-secondary PicassoButton-root PicassoButtonAction-root PicassoShowMore-toggleText"
252
+ aria-disabled="false"
253
+ class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
245
254
  data-component-type="button"
255
+ role="button"
246
256
  tabindex="0"
247
257
  type="button"
248
258
  >
249
259
  <span
250
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content PicassoButtonAction-content"
260
+ class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold text-blue text-md"
251
261
  >
252
262
  Show more
253
263
  <div
254
- class="PicassoButton-icon PicassoButtonAction-icon PicassoShowMore-iconWrapper PicassoButton-iconRight PicassoButtonAction-iconRight"
264
+ class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
255
265
  >
256
266
  <svg
257
267
  class="PicassoSvgChevronRight16-root PicassoShowMore-icon"
@@ -280,17 +290,19 @@ exports[`ShowMore when show more link is clicked should render expanded version
280
290
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur est asperiores. Inventore quam vel neque voluptatum, tenetur consectetur sapiente veniam, sint expedita voluptate reiciendis illum numquam officia obcaecati dicta? Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis tenetur est asperiores. Inventore quam vel neque voluptatum, tenetur consectetur sapiente veniam, sint expedita voluptate reiciendis illum numquam officia obcaecati dicta?
281
291
  </p>
282
292
  <button
283
- class="MuiButtonBase-root PicassoButton-small PicassoButtonAction-small PicassoButton-secondary PicassoButton-root PicassoButtonAction-root PicassoShowMore-toggleText"
293
+ aria-disabled="false"
294
+ class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm PicassoShowMore-toggleText"
284
295
  data-component-type="button"
296
+ role="button"
285
297
  tabindex="0"
286
298
  type="button"
287
299
  >
288
300
  <span
289
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content PicassoButtonAction-content"
301
+ class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold text-blue text-md"
290
302
  >
291
303
  Show less
292
304
  <div
293
- class="PicassoButton-icon PicassoButtonAction-icon PicassoShowMore-iconWrapper PicassoButton-iconRight PicassoButtonAction-iconRight"
305
+ class="text-[1.2em] flex-1 w-4 h-4 text-graphite ml-[0.5rem] PicassoShowMore-iconWrapper"
294
306
  >
295
307
  <svg
296
308
  class="PicassoSvgChevronRight16-root PicassoShowMore-icon PicassoShowMore-expandedIcon"