aidos-ui 3.0.12 → 3.0.14

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 (45) hide show
  1. package/dist/BaseButton.d.ts +1 -0
  2. package/dist/BaseButton.js +2 -1
  3. package/dist/BaseButton.js.map +1 -1
  4. package/dist/BaseLink.d.ts +1 -0
  5. package/dist/BaseLink.js +2 -1
  6. package/dist/BaseLink.js.map +1 -1
  7. package/dist/Button.d.ts +1 -0
  8. package/dist/Button.js +2 -2
  9. package/dist/Button.js.map +1 -1
  10. package/dist/DarkMode.js +1 -1
  11. package/dist/DarkMode.js.map +1 -1
  12. package/dist/DesignBook.js +2 -2
  13. package/dist/DesignBook.js.map +1 -1
  14. package/dist/Dialog.js +1 -1
  15. package/dist/Dialog.js.map +1 -1
  16. package/dist/Interactable.d.ts +3 -2
  17. package/dist/Interactable.js +62 -20
  18. package/dist/Interactable.js.map +1 -1
  19. package/dist/Link.d.ts +1 -0
  20. package/dist/Link.js +2 -2
  21. package/dist/Link.js.map +1 -1
  22. package/dist/ListButtonItem.js +2 -2
  23. package/dist/ListButtonItem.js.map +1 -1
  24. package/dist/ListLinkItem.js +1 -1
  25. package/dist/ListLinkItem.js.map +1 -1
  26. package/dist/Sublist.js +1 -1
  27. package/dist/Sublist.js.map +1 -1
  28. package/dist/Tabs.js +1 -1
  29. package/dist/Tabs.js.map +1 -1
  30. package/package.json +1 -1
  31. package/src/BaseButton.tsx +3 -0
  32. package/src/BaseLink.tsx +3 -0
  33. package/src/Button.tsx +7 -1
  34. package/src/DarkMode.tsx +1 -1
  35. package/src/DesignBook.tsx +10 -10
  36. package/src/Dialog.tsx +1 -1
  37. package/src/Interactable.tsx +69 -20
  38. package/src/Link.tsx +8 -2
  39. package/src/ListButtonItem.tsx +2 -2
  40. package/src/ListLinkItem.tsx +1 -1
  41. package/src/Sublist.tsx +1 -2
  42. package/src/Tabs.tsx +1 -1
  43. package/src/docs/searchIndex.ts +1 -1
  44. package/src/pages/Button.mdx +53 -5
  45. package/src/pages/Link.mdx +37 -5
package/src/pages/Button.mdx CHANGED
@@ -12,23 +12,29 @@ The `Button` component can be used for the user to take actions with a single cl
12
12
  The basic `Button` comes in three main variants, each of them with a specific intent in mind. It also support a "disabled" variant, for cases where the button is not actionable.
13
13
 
14
14
  - Positive: actions that are going to create something or strongly agree
15
- - Secondary: actions that are less central to the user experience
15
+ - Primary: actions that are less central to the user experience
16
16
  - Negative: actions that are going to delete data or remove something
17
+ - Dark: primary actions in a dark theme
18
+ - Light: primary actions in a light theme
17
19
  - Disabled: actions that are not available
18
20
 
19
21
  <Row gap="large" align="center" padding="large" justify="center">
20
22
  <Button label="Positive" color="positive" onClick={() => {}} />
21
- <Button label="Secondary" color="secondary" onClick={() => {}} />
23
+ <Button label="Primary" color="primary" onClick={() => {}} />
22
24
  <Button label="Negative" color="negative" onClick={() => {}} />
23
25
  <Button label="Disabled" color="positive" disabled onClick={() => {}} />
26
+ <Button label="Dark" color="dark" onClick={() => {}} />
27
+ <Button label="Light" color="light" onClick={() => {}} />
24
28
  </Row>
25
29
 
26
30
  ```js
27
31
  <Row gap="large" align="center" padding="large" justify="center">
28
32
  <Button label="Positive" color="positive" onClick={() => {}} />
29
- <Button label="Secondary" color="secondary" onClick={() => {}} />
33
+ <Button label="Primary" color="primary" onClick={() => {}} />
30
34
  <Button label="Negative" color="negative" onClick={() => {}} />
31
35
  <Button label="Disabled" color="positive" disabled onClick={() => {}} />
36
+ <Button label="Dark" color="dark" onClick={() => {}} />
37
+ <Button label="Light" color="light" onClick={() => {}} />
32
38
  </Row>
33
39
  ```
34
40
 
@@ -40,17 +46,59 @@ The bare `Button` variants fulfill the same function than the basic counterparts
40
46
 
41
47
  <Row gap="large" align="center" padding="large" justify="center">
42
48
  <Button bare label="Positive" color="positive" onClick={() => {}} />
43
- <Button bare label="Secondary" color="secondary" onClick={() => {}} />
49
+ <Button bare label="Primary" color="primary" onClick={() => {}} />
44
50
  <Button bare label="Negative" color="negative" onClick={() => {}} />
45
51
  <Button bare label="Disabled" color="positive" disabled onClick={() => {}} />
52
+ <Button bare label="Dark" color="dark" onClick={() => {}} />
53
+ <Button bare label="Light" color="light" onClick={() => {}} />
46
54
  </Row>
47
55
 
48
56
  ```js
49
57
  <Row gap="large" align="center" padding="large" justify="center">
50
58
  <Button bare label="Positive" color="positive" onClick={() => {}} />
51
- <Button bare label="Secondary" color="secondary" onClick={() => {}} />
59
+ <Button bare label="Primary" color="primary" onClick={() => {}} />
52
60
  <Button bare label="Negative" color="negative" onClick={() => {}} />
53
61
  <Button bare label="Disabled" color="positive" disabled onClick={() => {}} />
62
+ <Button bare label="Dark" color="dark" onClick={() => {}} />
63
+ <Button bare label="Light" color="light" onClick={() => {}} />
64
+ </Row>
65
+ ```
66
+
67
+ ## Border
68
+
69
+ The `Button` can have a border which will match the current text color
70
+
71
+ <Row gap="large" align="center" padding="large" justify="center">
72
+ <Button border bare label="Positive" color="positive" onClick={() => {}} />
73
+ <Button border bare label="Primary" color="primary" onClick={() => {}} />
74
+ <Button border bare label="Negative" color="negative" onClick={() => {}} />
75
+ <Button
76
+ border
77
+ bare
78
+ label="Disabled"
79
+ color="positive"
80
+ disabled
81
+ onClick={() => {}}
82
+ />
83
+ <Button border bare label="Dark" color="dark" onClick={() => {}} />
84
+ <Button border bare label="Light" color="light" onClick={() => {}} />
85
+ </Row>
86
+
87
+ ```js
88
+ <Row gap="large" align="center" padding="large" justify="center">
89
+ <Button border bare label="Positive" color="positive" onClick={() => {}} />
90
+ <Button border bare label="Primary" color="primary" onClick={() => {}} />
91
+ <Button border bare label="Negative" color="negative" onClick={() => {}} />
92
+ <Button
93
+ border
94
+ bare
95
+ label="Disabled"
96
+ color="positive"
97
+ disabled
98
+ onClick={() => {}}
99
+ />
100
+ <Button border bare label="Dark" color="dark" onClick={() => {}} />
101
+ <Button border bare label="Light" color="light" onClick={() => {}} />
54
102
  </Row>
55
103
  ```
56
104
 
package/src/pages/Link.mdx CHANGED
@@ -12,23 +12,29 @@ The `Link` component looks the same as the `Button` component and the only diffe
12
12
  The basic `Link` comes in three main variants, each of them with a specific intent in mind. It also support a "disabled" variant, for cases where the button is not actionable.
13
13
 
14
14
  - Positive: actions that are going to create something or strongly agree
15
- - Secondary: actions that are less central to the user experience
15
+ - Primary: actions that are less central to the user experience
16
16
  - Negative: actions that are going to delete data or remove something
17
+ - Dark: primary actions in a dark theme
18
+ - Light: primary actions in a light theme
17
19
  - Disabled: actions that are not available
18
20
 
19
21
  <Row gap="large" align="center" padding="large" justify="center">
20
22
  <Link label="Positive" color="positive" href="/" />
21
- <Link label="Secondary" color="secondary" href="/" />
23
+ <Link label="Primary" color="primary" href="/" />
22
24
  <Link label="Negative" color="negative" href="/" />
23
25
  <Link label="Disabled" color="positive" disabled href="/" />
26
+ <Link label="Dark" color="dark" href="/" />
27
+ <Link label="Light" color="light" href="/" />
24
28
  </Row>
25
29
 
26
30
  ```js
27
31
  <Row gap="large" align="center" padding="large" justify="center">
28
32
  <Link label="Positive" color="positive" href="/" />
29
- <Link label="Secondary" color="secondary" href="/" />
33
+ <Link label="Primary" color="primary" href="/" />
30
34
  <Link label="Negative" color="negative" href="/" />
31
35
  <Link label="Disabled" color="positive" disabled href="/" />
36
+ <Link label="Dark" color="dark" href="/" />
37
+ <Link label="Light" color="light" href="/" />
32
38
  </Row>
33
39
  ```
34
40
 
@@ -40,18 +46,44 @@ The bare `Link` variants fulfill the same function than the basic counterparts b
40
46
 
41
47
  <Row gap="large" align="center" padding="large" justify="center">
42
48
  <Link bare label="Positive" color="positive" href="/" />
43
- <Link bare label="Secondary" color="secondary" href="/" />
49
+ <Link bare label="Primary" color="primary" href="/" />
44
50
  <Link bare label="Negative" color="negative" href="/" />
45
51
  <Link bare label="Disabled" color="positive" disabled href="/" />
52
+ <Link bare label="Dark" color="dark" href="/" />
53
+ <Link bare label="Light" color="light" href="/" />
46
54
  </Row>
47
55
 
48
56
  ```js
49
57
  <Row gap="large" align="center" padding="large" justify="center">
50
58
  <Link bare label="Positive" color="positive" href="/" />
51
- <Link bare label="Secondary" color="secondary" href="/" />
59
+ <Link bare label="Primary" color="primary" href="/" />
52
60
  <Link bare label="Negative" color="negative" href="/" />
53
61
  <Link bare label="Disabled" color="positive" disabled href="/" />
54
62
  </Row>
55
63
  ```
56
64
 
65
+ ## Border
66
+
67
+ The `Link` can have a border which will match the current text color
68
+
69
+ <Row gap="large" align="center" padding="large" justify="center">
70
+ <Link border bare label="Positive" color="positive" href="/" />
71
+ <Link border bare label="Primary" color="primary" href="/" />
72
+ <Link border bare label="Negative" color="negative" href="/" />
73
+ <Link border bare label="Disabled" color="positive" disabled href="/" />
74
+ <Link border bare label="Dark" color="dark" href="/" />
75
+ <Link border bare label="Light" color="light" href="/" />
76
+ </Row>
77
+
78
+ ```js
79
+ <Row gap="large" align="center" padding="large" justify="center">
80
+ <Link border bare label="Positive" color="positive" href="/" />
81
+ <Link border bare label="Primary" color="primary" href="/" />
82
+ <Link border bare label="Negative" color="negative" href="/" />
83
+ <Link border bare label="Disabled" color="positive" disabled href="/" />
84
+ <Link border bare label="Dark" color="dark" href="/" />
85
+ <Link border bare label="Light" color="light" href="/" />
86
+ </Row>
87
+ ```
88
+
57
89
  ---