@platformatic/ui-components 0.3.6 → 0.4.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 (40) hide show
  1. package/.nvmrc +1 -1
  2. package/dist/assets/{index-BJ-rQoWR.css → index-K_bDNror.css} +1 -1
  3. package/dist/index.html +2 -2
  4. package/dist/main.css +14 -4
  5. package/package.json +11 -10
  6. package/src/stories/BorderedBox.stories.jsx +3 -1
  7. package/src/stories/Button.stories.jsx +224 -47
  8. package/src/stories/ButtonFullRounded.stories.jsx +31 -6
  9. package/src/stories/ButtonOnlyIcon.stories.jsx +13 -3
  10. package/src/stories/DropDown.stories.jsx +43 -20
  11. package/src/stories/InfoBox.stories.jsx +12 -3
  12. package/src/stories/{Introduction.stories.mdx → Introduction.mdx} +115 -117
  13. package/src/stories/List.stories.jsx +28 -5
  14. package/src/stories/ListElement.stories.jsx +2 -1
  15. package/src/stories/Loadable.stories.jsx +6 -5
  16. package/src/stories/LoadingSpinner.stories.jsx +4 -2
  17. package/src/stories/LogoDropDown.stories.jsx +38 -24
  18. package/src/stories/Modal.stories.jsx +72 -17
  19. package/src/stories/ModalDirectional.stories.jsx +12 -2
  20. package/src/stories/ModalStepsForward.stories.jsx +82 -13
  21. package/src/stories/PlatformaticIcon.stories.jsx +44 -9
  22. package/src/stories/SearchBar.stories.jsx +0 -1
  23. package/src/stories/SearchBarV2.stories.jsx +0 -1
  24. package/src/stories/Sidebar.stories.jsx +41 -10
  25. package/src/stories/TabbedWindow.stories.jsx +71 -31
  26. package/src/stories/TextWithLabel.stories.jsx +5 -1
  27. package/src/stories/Tooltip.stories.jsx +10 -2
  28. package/src/stories/TwoColumnsLayout.stories.jsx +7 -2
  29. package/src/stories/forms/Field.stories.jsx +53 -15
  30. package/src/stories/forms/Input.stories.jsx +8 -2
  31. package/src/stories/forms/InputWithSeparator.stories.jsx +31 -9
  32. package/src/stories/forms/Password.stories.jsx +5 -1
  33. package/src/stories/forms/Preview.stories.jsx +6 -1
  34. package/src/stories/forms/RadioGroup.stories.jsx +5 -1
  35. package/src/stories/forms/Select.stories.jsx +60 -38
  36. package/src/stories/forms/SelectWithInput.stories.jsx +78 -41
  37. package/src/stories/forms/ToggleSwitch.stories.jsx +14 -4
  38. package/src/stories/icons/Icons.stories.jsx +40 -13
  39. package/src/stories/logos/Logos.stories.jsx +9 -2
  40. /package/dist/assets/{index-YI7s19_T.js → index-DxEcxprd.js} +0 -0
package/src/stories/icons/Icons.stories.jsx CHANGED
@@ -48,22 +48,49 @@ const CircleCloseIconTemplate = (args) => <CircleCloseIcon {...args} />
48
48
  export const CircleCloseIconDefault = CircleCloseIconTemplate.bind({})
49
49
  CircleCloseIconDefault.args = {}
50
50
 
51
- const WorkspaceIconsTemplate = () => (
52
- [<WorkspaceStaticIcon key='a' />, <WorkspaceDynamicIcon key='b' />].map((component, index) => {
53
- const listElement = []
54
- listElement.push(React.cloneElement(component, { key: `0${index}` }))
55
- listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'main-green' }))
56
- listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'error-red' }))
57
- listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'error-red' }))
58
- listElement.push(React.cloneElement(component, { key: `4${index}`, color: 'main-dark-blue' }))
59
- listElement.push(React.cloneElement(component, { key: `5${index}`, size: 'small', color: 'main-dark-blue' }))
60
- return listElement
61
- })
62
- )
51
+ const WorkspaceIconsTemplate = () =>
52
+ [<WorkspaceStaticIcon key='a' />, <WorkspaceDynamicIcon key='b' />].map(
53
+ (component, index) => {
54
+ const listElement = []
55
+ listElement.push(React.cloneElement(component, { key: `0${index}` }))
56
+ listElement.push(
57
+ React.cloneElement(component, {
58
+ key: `1${index}`,
59
+ size: 'small',
60
+ color: 'main-green'
61
+ })
62
+ )
63
+ listElement.push(
64
+ React.cloneElement(component, { key: `2${index}`, color: 'error-red' })
65
+ )
66
+ listElement.push(
67
+ React.cloneElement(component, {
68
+ key: `3${index}`,
69
+ size: 'small',
70
+ color: 'error-red'
71
+ })
72
+ )
73
+ listElement.push(
74
+ React.cloneElement(component, {
75
+ key: `4${index}`,
76
+ color: 'main-dark-blue'
77
+ })
78
+ )
79
+ listElement.push(
80
+ React.cloneElement(component, {
81
+ key: `5${index}`,
82
+ size: 'small',
83
+ color: 'main-dark-blue'
84
+ })
85
+ )
86
+ return listElement
87
+ }
88
+ )
63
89
 
64
90
  export const WorkspaceIconsAll = WorkspaceIconsTemplate.bind({})
65
91
  WorkspaceIconsAll.args = {}
66
92
 
67
- const LargeIconsTemplate = () => ([<UpgradeIcon key='b' size='extra-large' />].map(component => component))
93
+ const LargeIconsTemplate = () =>
94
+ [<UpgradeIcon key='b' size='extra-large' />].map((component) => component)
68
95
  export const LargeIconsDefault = LargeIconsTemplate.bind({})
69
96
  LargeIconsDefault.args = {}
package/src/stories/logos/Logos.stories.jsx CHANGED
@@ -56,13 +56,20 @@ const AllLogosTemplate = (args) => {
56
56
  {logos.map((LogoComponent, index) => (
57
57
  <div style={row} key={index}>
58
58
  <div style={col}>
59
- <p style={paragraphClass}>#{index + 1}: {LogoComponent.name}</p>
59
+ <p style={paragraphClass}>
60
+ #{index + 1}: {LogoComponent.name}
61
+ </p>
60
62
  </div>
61
63
  <div style={col}>
62
64
  <LogoComponent key={LogoComponent.name} {...args} />
63
65
  </div>
64
66
  <div style={col}>
65
- <LogoComponent key={LogoComponent.name} width={142} height={63} {...args} />
67
+ <LogoComponent
68
+ key={LogoComponent.name}
69
+ width={142}
70
+ height={63}
71
+ {...args}
72
+ />
66
73
  </div>
67
74
  </div>
68
75
  ))}