@toptal/picasso-table 2.0.1 → 2.0.2

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 +3 -3
  2. package/src/Table/story/ExpandableRows.example.tsx +46 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-table",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "description": "Toptal UI components library - Table",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -22,10 +22,10 @@
22
22
  },
23
23
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
24
24
  "dependencies": {
25
- "@toptal/picasso-collapse": "2.0.0",
25
+ "@toptal/picasso-collapse": "2.0.1",
26
26
  "@toptal/picasso-shared": "15.0.0",
27
27
  "@toptal/picasso-typography": "3.0.0",
28
- "@toptal/picasso-button": "3.0.1",
28
+ "@toptal/picasso-button": "3.0.2",
29
29
  "@toptal/picasso-icons": "1.6.0",
30
30
  "@toptal/picasso-utils": "1.0.3",
31
31
  "ap-style-title-case": "^1.1.2"
package/src/Table/story/ExpandableRows.example.tsx CHANGED
@@ -23,6 +23,51 @@ const StyledArrowDownMinor16 = styled(
23
23
  transform: rotate(${({ expanded }) => (expanded ? '180deg' : '0deg')});
24
24
  `
25
25
 
26
+ const DynamicContent = () => {
27
+ const [isLoaded, setLoaded] = React.useState(false)
28
+
29
+ React.useEffect(() => {
30
+ setTimeout(() => {
31
+ setLoaded(true)
32
+ }, 1000)
33
+ })
34
+
35
+ return (
36
+ <Container className='max-w-[500px]'>
37
+ {isLoaded ? (
38
+ <Typography size='small'>
39
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi placeat
40
+ dolorem provident, aut aspernatur doloribus eos reiciendis molestiae
41
+ ab quidem ad facilis animi dolorum quis laborum possimus temporibus
42
+ debitis maiores ullam neque? Tempora rem eligendi ex consectetur
43
+ impedit eos optio illum voluptates. Quis expedita, rerum reiciendis
44
+ hic quae molestiae sit doloribus, beatae assumenda illo non iste
45
+ itaque deleniti! Expedita ducimus, deleniti accusantium iusto adipisci
46
+ nesciunt inventore! Laborum, repudiandae temporibus eligendi
47
+ blanditiis laudantium suscipit. Tempore culpa, consequuntur placeat,
48
+ inventore cumque vitae recusandae at consequatur praesentium
49
+ asperiores sunt porro beatae, ipsa dicta laboriosam quae voluptatum.
50
+ Magnam animi ea sint ex, ipsum explicabo. Lorem ipsum dolor sit amet
51
+ consectetur adipisicing elit. Modi placeat dolorem provident, aut
52
+ aspernatur doloribus eos reiciendis molestiae ab quidem ad facilis
53
+ animi dolorum quis laborum possimus temporibus debitis maiores ullam
54
+ neque? Tempora rem eligendi ex consectetur impedit eos optio illum
55
+ voluptates. Quis expedita, rerum reiciendis hic quae molestiae sit
56
+ doloribus, beatae assumenda illo non iste itaque deleniti! Expedita
57
+ ducimus, deleniti accusantium iusto adipisci nesciunt inventore!
58
+ Laborum, repudiandae temporibus eligendi blanditiis laudantium
59
+ suscipit. Tempore culpa, consequuntur placeat, inventore cumque vitae
60
+ recusandae at consequatur praesentium asperiores sunt porro beatae,
61
+ ipsa dicta laboriosam quae voluptatum. Magnam animi ea sint ex, ipsum
62
+ explicabo. Lorem ipsum dolor sit amet consectetur adipisicing elit.
63
+ </Typography>
64
+ ) : (
65
+ <Typography size='small'>Loading dynamic content...</Typography>
66
+ )}
67
+ </Container>
68
+ )
69
+ }
70
+
26
71
  const ExpandableContent = () => (
27
72
  <Container padded={SPACING_4}>
28
73
  <Tabs value={1}>
@@ -61,6 +106,7 @@ const ExpandableContent = () => (
61
106
  <Container top={SPACING_4}>
62
107
  <Tag>$2k Design Credit</Tag>
63
108
  </Container>
109
+ <DynamicContent />
64
110
  </Container>
65
111
  )
66
112