@platformatic/ui-components 0.1.13 → 0.1.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.
- package/dist/assets/index.fcbe6de7.js +797 -0
- package/dist/index.html +2 -2
- package/dist/main.css +20 -52
- package/dist/platformatic-ui.css +1 -0
- package/index.js +21 -17
- package/package.json +1 -1
- package/src/components/Button.jsx +19 -0
- package/src/components/Button.module.css +17 -0
- package/src/components/Input.jsx +10 -0
- package/src/components/Input.module.css +7 -0
- package/src/stories/Button.stories.jsx +53 -22
- package/src/stories/Input.stories.jsx +15 -0
- package/dist/assets/index.133cf9fb.css +0 -1
- package/dist/assets/index.97014e0d.js +0 -797
- package/src/stories/Button.jsx +0 -50
- package/src/stories/button.css +0 -30
package/dist/index.html
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index.
|
|
8
|
-
<link rel="stylesheet" href="/
|
|
7
|
+
<script type="module" crossorigin src="/assets/index.fcbe6de7.js"></script>
|
|
8
|
+
<link rel="stylesheet" href="/platformatic-ui.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/dist/main.css
CHANGED
|
@@ -540,10 +540,6 @@ video {
|
|
|
540
540
|
}
|
|
541
541
|
}
|
|
542
542
|
|
|
543
|
-
.static {
|
|
544
|
-
position: static;
|
|
545
|
-
}
|
|
546
|
-
|
|
547
543
|
.m-3 {
|
|
548
544
|
margin: 0.75rem;
|
|
549
545
|
}
|
|
@@ -553,11 +549,6 @@ video {
|
|
|
553
549
|
margin-bottom: 1rem;
|
|
554
550
|
}
|
|
555
551
|
|
|
556
|
-
.my-8 {
|
|
557
|
-
margin-top: 2rem;
|
|
558
|
-
margin-bottom: 2rem;
|
|
559
|
-
}
|
|
560
|
-
|
|
561
552
|
.mx-auto {
|
|
562
553
|
margin-left: auto;
|
|
563
554
|
margin-right: auto;
|
|
@@ -568,10 +559,6 @@ video {
|
|
|
568
559
|
margin-bottom: 1.25rem;
|
|
569
560
|
}
|
|
570
561
|
|
|
571
|
-
.mr-2 {
|
|
572
|
-
margin-right: 0.5rem;
|
|
573
|
-
}
|
|
574
|
-
|
|
575
562
|
.mr-5 {
|
|
576
563
|
margin-right: 1.25rem;
|
|
577
564
|
}
|
|
@@ -580,12 +567,12 @@ video {
|
|
|
580
567
|
margin-left: 1rem;
|
|
581
568
|
}
|
|
582
569
|
|
|
583
|
-
.
|
|
584
|
-
margin-
|
|
570
|
+
.mr-2 {
|
|
571
|
+
margin-right: 0.5rem;
|
|
585
572
|
}
|
|
586
573
|
|
|
587
|
-
.
|
|
588
|
-
margin-
|
|
574
|
+
.mr-1 {
|
|
575
|
+
margin-right: 0.25rem;
|
|
589
576
|
}
|
|
590
577
|
|
|
591
578
|
.flex {
|
|
@@ -600,10 +587,6 @@ video {
|
|
|
600
587
|
display: contents;
|
|
601
588
|
}
|
|
602
589
|
|
|
603
|
-
.h-screen {
|
|
604
|
-
height: 100vh;
|
|
605
|
-
}
|
|
606
|
-
|
|
607
590
|
.w-full {
|
|
608
591
|
width: 100%;
|
|
609
592
|
}
|
|
@@ -612,10 +595,6 @@ video {
|
|
|
612
595
|
width: 2.25rem;
|
|
613
596
|
}
|
|
614
597
|
|
|
615
|
-
.w-80 {
|
|
616
|
-
width: 20rem;
|
|
617
|
-
}
|
|
618
|
-
|
|
619
598
|
.grow {
|
|
620
599
|
flex-grow: 1;
|
|
621
600
|
}
|
|
@@ -628,10 +607,6 @@ video {
|
|
|
628
607
|
flex-direction: column;
|
|
629
608
|
}
|
|
630
609
|
|
|
631
|
-
.place-items-center {
|
|
632
|
-
place-items: center;
|
|
633
|
-
}
|
|
634
|
-
|
|
635
610
|
.items-center {
|
|
636
611
|
align-items: center;
|
|
637
612
|
}
|
|
@@ -644,14 +619,14 @@ video {
|
|
|
644
619
|
justify-content: space-around;
|
|
645
620
|
}
|
|
646
621
|
|
|
647
|
-
.gap-2 {
|
|
648
|
-
gap: 0.5rem;
|
|
649
|
-
}
|
|
650
|
-
|
|
651
622
|
.gap-4 {
|
|
652
623
|
gap: 1rem;
|
|
653
624
|
}
|
|
654
625
|
|
|
626
|
+
.gap-2 {
|
|
627
|
+
gap: 0.5rem;
|
|
628
|
+
}
|
|
629
|
+
|
|
655
630
|
.gap-10 {
|
|
656
631
|
gap: 2.5rem;
|
|
657
632
|
}
|
|
@@ -661,6 +636,10 @@ video {
|
|
|
661
636
|
column-gap: 1rem;
|
|
662
637
|
}
|
|
663
638
|
|
|
639
|
+
.rounded-full {
|
|
640
|
+
border-radius: 9999px;
|
|
641
|
+
}
|
|
642
|
+
|
|
664
643
|
.border {
|
|
665
644
|
border-width: 1px;
|
|
666
645
|
}
|
|
@@ -675,6 +654,10 @@ video {
|
|
|
675
654
|
border-color: rgb(33 250 144 / var(--tw-border-opacity));
|
|
676
655
|
}
|
|
677
656
|
|
|
657
|
+
.p-2 {
|
|
658
|
+
padding: 0.5rem;
|
|
659
|
+
}
|
|
660
|
+
|
|
678
661
|
.px-4 {
|
|
679
662
|
padding-left: 1rem;
|
|
680
663
|
padding-right: 1rem;
|
|
@@ -695,21 +678,6 @@ video {
|
|
|
695
678
|
line-height: 1.75rem;
|
|
696
679
|
}
|
|
697
680
|
|
|
698
|
-
.text-4xl {
|
|
699
|
-
font-size: 2.25rem;
|
|
700
|
-
line-height: 2.5rem;
|
|
701
|
-
}
|
|
702
|
-
|
|
703
|
-
.text-3xl {
|
|
704
|
-
font-size: 1.875rem;
|
|
705
|
-
line-height: 2.25rem;
|
|
706
|
-
}
|
|
707
|
-
|
|
708
|
-
.text-6xl {
|
|
709
|
-
font-size: 3.75rem;
|
|
710
|
-
line-height: 1;
|
|
711
|
-
}
|
|
712
|
-
|
|
713
681
|
.font-semibold {
|
|
714
682
|
font-weight: 600;
|
|
715
683
|
}
|
|
@@ -727,14 +695,14 @@ video {
|
|
|
727
695
|
color: rgb(33 250 144 / var(--tw-text-opacity));
|
|
728
696
|
}
|
|
729
697
|
|
|
730
|
-
.text-
|
|
698
|
+
.text-dark-green {
|
|
731
699
|
--tw-text-opacity: 1;
|
|
732
|
-
color: rgb(
|
|
700
|
+
color: rgb(2 120 63 / var(--tw-text-opacity));
|
|
733
701
|
}
|
|
734
702
|
|
|
735
|
-
.text-
|
|
703
|
+
.text-white {
|
|
736
704
|
--tw-text-opacity: 1;
|
|
737
|
-
color: rgb(
|
|
705
|
+
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
738
706
|
}
|
|
739
707
|
|
|
740
708
|
.text-error-red {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._input_1v03r_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._input_1v03r_1>input:focus{outline:2px solid transparent;outline-offset:2px}._padded_1atg3_1{padding:.625rem .5rem}._bordered_1ece3_1{border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity));padding:.25rem .5rem;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._main_sk3z1_1{display:flex;align-items:center;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._data_sk3z1_5{display:flex;width:100%;flex-direction:column}._stats-header_19k8x_1{display:flex;align-items:center;justify-content:space-between;font-weight:700}._stats-main-stat_19k8x_4{display:flex;align-items:center;justify-content:center;gap:1rem}._tabbed-container_129x6_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_129x6_5{margin-bottom:1rem;display:flex;height:4rem;justify-content:space-between;text-transform:uppercase;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_129x6_5:hover{cursor:pointer}._selected-tab_129x6_8{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.m-3{margin:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mr-5{margin-right:1.25rem}.ml-4{margin-left:1rem}.mr-2{margin-right:.5rem}.mr-1{margin-right:.25rem}.flex{display:flex}.grid{display:grid}.contents{display:contents}.w-full{width:100%}.w-9{width:2.25rem}.grow{flex-grow:1}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:1rem}.gap-2{gap:.5rem}.gap-10{gap:2.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-error-red{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}.border-main-green{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}.p-2{padding:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-light{font-weight:300}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Light.ttf) format("truetype");font-weight:300}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Regular.ttf) format("truetype");font-weight:500}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/static/Montserrat-Bold.ttf) format("truetype");font-weight:700}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}.bordered{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}.padded{padding:.625rem .5rem}.api-footer{margin-left:2.25rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .5rem .5rem 1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.api-status{justify-self:end}.bordered-box{margin-bottom:1rem;flex:1 1 0%;row-gap:1rem;--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity));padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}
|
package/index.js
CHANGED
|
@@ -4,47 +4,51 @@ import ApiSummary from './src/components/ApiSummary'
|
|
|
4
4
|
import ApiDetails from './src/components/ApiDetail'
|
|
5
5
|
import BorderedBox from './src/components/BorderedBox'
|
|
6
6
|
import BorderedText from './src/components/BorderedText'
|
|
7
|
-
import
|
|
7
|
+
import Box from './src/components/Box'
|
|
8
|
+
import Button from './src/components/Button'
|
|
9
|
+
import FollowUs from './src/components/FollowUs'
|
|
10
|
+
import FrontpageBackground from './sr/components/FrontpageBackground'
|
|
8
11
|
import GHLoginButton from './src/components/GHLoginButton'
|
|
12
|
+
import HorizontalSeparator from './src/components/HorizontalSeparator'
|
|
13
|
+
import Input from './src/components/Input'
|
|
9
14
|
import Layout from './src/components/layouts/Layout'
|
|
15
|
+
import List from './src/components/List'
|
|
16
|
+
import ListElement from './src/components/ListElement'
|
|
10
17
|
import LoginButton from './src/components/LoginButton'
|
|
11
|
-
import
|
|
18
|
+
import Logo from './src/components/Logo'
|
|
12
19
|
import Playground from './src/components/Playground'
|
|
13
20
|
import PullRequest from './src/components/PullRequest'
|
|
14
21
|
import SearchBar from './src/components/SearchBar'
|
|
15
22
|
import Status from './src/components/Status'
|
|
16
23
|
import TabbedWindow from './src/components/TabbedWindow'
|
|
17
24
|
import TextWithLabel from './src/components/TextWithLabel'
|
|
25
|
+
import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
|
|
18
26
|
import Versions from './src/components/Versions'
|
|
19
27
|
import VerticalSeparator from './src/components/VerticalSeparator'
|
|
20
|
-
import FollowUs from './src/components/FollowUs'
|
|
21
|
-
import List from './src/components/List'
|
|
22
|
-
import ListElement from './src/components/ListElement'
|
|
23
|
-
import Logo from './src/components/Logo'
|
|
24
|
-
import Box from './src/components/Box'
|
|
25
|
-
import FrontpageBackground from './src/components/FrontpageBackground'
|
|
26
28
|
export {
|
|
27
29
|
ApiSummary,
|
|
28
30
|
ApiDetails,
|
|
29
31
|
BorderedBox,
|
|
30
32
|
BorderedText,
|
|
31
|
-
|
|
33
|
+
Box,
|
|
34
|
+
Button,
|
|
35
|
+
FollowUs,
|
|
36
|
+
FrontpageBackground,
|
|
32
37
|
HorizontalSeparator,
|
|
38
|
+
GHLoginButton,
|
|
39
|
+
Input,
|
|
33
40
|
Layout,
|
|
41
|
+
List,
|
|
42
|
+
ListElement,
|
|
34
43
|
LoginButton,
|
|
35
|
-
|
|
44
|
+
Logo,
|
|
36
45
|
Playground,
|
|
37
46
|
PullRequest,
|
|
38
47
|
SearchBar,
|
|
39
48
|
Status,
|
|
40
49
|
TabbedWindow,
|
|
41
50
|
TextWithLabel,
|
|
51
|
+
TwoColumnsLayout,
|
|
42
52
|
Versions,
|
|
43
|
-
VerticalSeparator
|
|
44
|
-
FollowUs,
|
|
45
|
-
List,
|
|
46
|
-
ListElement,
|
|
47
|
-
Logo,
|
|
48
|
-
Box,
|
|
49
|
-
FrontpageBackground
|
|
53
|
+
VerticalSeparator
|
|
50
54
|
}
|
package/package.json
CHANGED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import styles from './Button.module.css'
|
|
2
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
3
|
+
export default function Button ({ icon, label, onClick, primary, color, ...props }) {
|
|
4
|
+
let buttonClass = 'primary'
|
|
5
|
+
if (!primary) {
|
|
6
|
+
buttonClass = 'secondary'
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
let colorClass = 'green'
|
|
10
|
+
if (color === 'red') {
|
|
11
|
+
colorClass = 'red'
|
|
12
|
+
}
|
|
13
|
+
return (
|
|
14
|
+
<button className={`${styles.button} ${styles[buttonClass + '-' + colorClass]}`}>
|
|
15
|
+
{icon ? <FontAwesomeIcon icon={icon} className='mr-2' data-testid='button-icon' /> : null}
|
|
16
|
+
<span>{label}</span>
|
|
17
|
+
</button>
|
|
18
|
+
)
|
|
19
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.button {
|
|
2
|
+
@apply py-2 px-2 rounded text-center cursor-pointer
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.primary-green {
|
|
6
|
+
@apply text-main-dark-blue bg-light-green;
|
|
7
|
+
}
|
|
8
|
+
.secondary-green {
|
|
9
|
+
@apply border-main-green text-main-green bg-none border border-solid box-border rounded-md font-normal;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.primary-red {
|
|
13
|
+
@apply text-main-dark-blue bg-error-red;
|
|
14
|
+
}
|
|
15
|
+
.secondary-red {
|
|
16
|
+
@apply border-error-red text-error-red bg-none border border-solid box-border rounded-md font-normal;
|
|
17
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import styles from './Input.module.css'
|
|
3
|
+
import commonStyles from './Common.module.css'
|
|
4
|
+
export default function Input ({ placeholder, value, name }) {
|
|
5
|
+
return (
|
|
6
|
+
<div className={`${styles.inputContainer} ${commonStyles.padded}`}>
|
|
7
|
+
<input type='text' name={name} value={value} placeholder={placeholder} className='grow' />
|
|
8
|
+
</div>
|
|
9
|
+
)
|
|
10
|
+
}
|
|
@@ -1,40 +1,71 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict'
|
|
2
|
+
import { faCheck } from '@fortawesome/free-solid-svg-icons'
|
|
3
|
+
import Button from '../components/Button'
|
|
2
4
|
|
|
3
|
-
import { Button } from './Button'
|
|
4
|
-
|
|
5
|
-
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
6
5
|
export default {
|
|
7
|
-
title: '
|
|
6
|
+
title: 'Platformatic/Button',
|
|
8
7
|
component: Button,
|
|
9
|
-
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
|
|
10
8
|
argTypes: {
|
|
11
|
-
|
|
9
|
+
label: {
|
|
10
|
+
type: 'string',
|
|
11
|
+
control: 'text'
|
|
12
|
+
},
|
|
13
|
+
primary: {
|
|
14
|
+
type: 'boolean'
|
|
15
|
+
},
|
|
16
|
+
color: {
|
|
17
|
+
type: 'string',
|
|
18
|
+
control: {
|
|
19
|
+
type: 'radio',
|
|
20
|
+
options: ['green', 'red']
|
|
21
|
+
}
|
|
22
|
+
}
|
|
12
23
|
}
|
|
13
24
|
}
|
|
14
25
|
|
|
15
|
-
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
|
16
26
|
const Template = (args) => <Button {...args} />
|
|
17
27
|
|
|
18
|
-
export const
|
|
28
|
+
export const PrimaryGreen = Template.bind({})
|
|
19
29
|
// More on args: https://storybook.js.org/docs/react/writing-stories/args
|
|
20
|
-
|
|
30
|
+
PrimaryGreen.args = {
|
|
21
31
|
primary: true,
|
|
22
|
-
label: '
|
|
32
|
+
label: 'Primary Green',
|
|
33
|
+
color: 'green'
|
|
23
34
|
}
|
|
24
35
|
|
|
25
|
-
export const
|
|
26
|
-
|
|
27
|
-
|
|
36
|
+
export const SecondaryGreen = Template.bind({})
|
|
37
|
+
SecondaryGreen.args = {
|
|
38
|
+
primary: false,
|
|
39
|
+
label: 'Secondary Green',
|
|
40
|
+
color: 'green'
|
|
28
41
|
}
|
|
29
42
|
|
|
30
|
-
export const
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
label: '
|
|
43
|
+
export const PrimaryWithIcon = Template.bind({})
|
|
44
|
+
PrimaryWithIcon.args = {
|
|
45
|
+
primary: true,
|
|
46
|
+
label: 'Primary with Icon',
|
|
47
|
+
icon: faCheck
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export const SecondaryWithIcon = Template.bind({})
|
|
51
|
+
SecondaryWithIcon.args = {
|
|
52
|
+
primary: false,
|
|
53
|
+
label: 'Secondary with Icon',
|
|
54
|
+
icon: faCheck
|
|
55
|
+
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export const PrimaryRed = Template.bind({})
|
|
59
|
+
// More on args: https://storybook.js.org/docs/react/writing-stories/args
|
|
60
|
+
PrimaryRed.args = {
|
|
61
|
+
primary: true,
|
|
62
|
+
label: 'Primary Red',
|
|
63
|
+
color: 'red'
|
|
34
64
|
}
|
|
35
65
|
|
|
36
|
-
export const
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
label: '
|
|
66
|
+
export const SecondaryRed = Template.bind({})
|
|
67
|
+
SecondaryRed.args = {
|
|
68
|
+
primary: false,
|
|
69
|
+
label: 'Secondary Red',
|
|
70
|
+
color: 'red'
|
|
40
71
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import Input from '../components/Input'
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Platformatic/Input',
|
|
5
|
+
component: Input
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const Template = (args) => <Input {...args} />
|
|
9
|
+
|
|
10
|
+
export const Default = Template.bind({})
|
|
11
|
+
|
|
12
|
+
Default.args = {
|
|
13
|
+
name: 'test',
|
|
14
|
+
placeholder: 'Platformatic'
|
|
15
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._input_1v03r_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._input_1v03r_1>input:focus{outline:2px solid transparent;outline-offset:2px}._padded_650jz_1{padding:.625rem .5rem}._bordered_650jz_5{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered_1ece3_1{border-radius:.375rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity));padding:.25rem .5rem;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._borderedBox_1fd0d_1{margin-bottom:1rem;flex:1 1 0%;row-gap:1rem;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity));padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._stats-header_w45a1_1{display:flex;align-items:center;justify-content:space-between;font-weight:700}._stats-main-stat_w45a1_4{display:flex;align-items:center;justify-content:center;gap:1rem}._container_pqngl_1{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._label_pqngl_4{margin-right:.5rem;font-weight:100}._text_pqngl_7{font-weight:600}._main_172rv_1{display:flex;flex-direction:column;row-gap:1rem}._footer_kawbk_1{margin-left:2.25rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .5rem .5rem 1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._main_1uwu5_1{display:flex;align-items:center;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._data_1uwu5_5{display:flex;width:100%;flex-direction:column}._status_1uwu5_9{justify-self:end}._tabbed-container_1r9tv_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_1r9tv_5{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_1r9tv_5:hover{cursor:pointer}._tab_1r9tv_1{margin-right:1rem;min-width:105px;text-align:center}._selected-tab_1r9tv_11{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_1r9tv_15{height:100vh}._container_sn6pf_1{display:flex;flex-direction:column}._id_sn6pf_4{font-size:1.25rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._header_sn6pf_7{margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between}._title_sn6pf_10{display:flex;align-items:center;-moz-column-gap:1rem;column-gap:1rem}._footer_sn6pf_13,._status_sn6pf_16{display:flex;align-items:center}._unavailable_sn6pf_19{opacity:.3}._icons_sn6pf_22{display:flex;justify-content:space-between;-moz-column-gap:.5rem;column-gap:.5rem}._icons_sn6pf_22>*:hover{cursor:pointer}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.static{position:static}.m-3{margin:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-8{margin-top:2rem;margin-bottom:2rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mr-2{margin-right:.5rem}.mr-5{margin-right:1.25rem}.ml-4{margin-left:1rem}.mt-24{margin-top:6rem}.mb-16{margin-bottom:4rem}.flex{display:flex}.grid{display:grid}.contents{display:contents}.h-screen{height:100vh}.w-full{width:100%}.w-9{width:2.25rem}.w-80{width:20rem}.grow{flex-grow:1}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.place-items-center{place-items:center}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-10{gap:2.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.border{border-width:1px}.border-error-red{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}.border-main-green{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}.px-4{padding-left:1rem;padding-right:1rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-light{font-weight:300}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}@font-face{font-family:Montserrat;src:local("Montserrat"),url(./fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format("truetype");font-weight:100 900}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}
|