@platformatic/ui-components 0.1.18 → 0.1.19
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 +27 -46
- package/dist/platformatic-ui.css +1 -0
- package/index.js +2 -0
- package/package.json +1 -1
- package/src/components/DropDown.jsx +35 -0
- package/src/components/DropDown.module.css +23 -0
- package/src/stories/DropDown.stories.jsx +43 -0
- package/dist/assets/index.d77cda9b.js +0 -797
- package/dist/assets/index.f6d5761c.css +0 -1
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 {
|
|
@@ -596,8 +583,8 @@ video {
|
|
|
596
583
|
display: grid;
|
|
597
584
|
}
|
|
598
585
|
|
|
599
|
-
.
|
|
600
|
-
|
|
586
|
+
.contents {
|
|
587
|
+
display: contents;
|
|
601
588
|
}
|
|
602
589
|
|
|
603
590
|
.w-full {
|
|
@@ -608,10 +595,6 @@ video {
|
|
|
608
595
|
width: 2.25rem;
|
|
609
596
|
}
|
|
610
597
|
|
|
611
|
-
.w-80 {
|
|
612
|
-
width: 20rem;
|
|
613
|
-
}
|
|
614
|
-
|
|
615
598
|
.grow {
|
|
616
599
|
flex-grow: 1;
|
|
617
600
|
}
|
|
@@ -624,10 +607,6 @@ video {
|
|
|
624
607
|
flex-direction: column;
|
|
625
608
|
}
|
|
626
609
|
|
|
627
|
-
.place-items-center {
|
|
628
|
-
place-items: center;
|
|
629
|
-
}
|
|
630
|
-
|
|
631
610
|
.items-center {
|
|
632
611
|
align-items: center;
|
|
633
612
|
}
|
|
@@ -636,14 +615,18 @@ video {
|
|
|
636
615
|
justify-content: space-between;
|
|
637
616
|
}
|
|
638
617
|
|
|
639
|
-
.
|
|
640
|
-
|
|
618
|
+
.justify-around {
|
|
619
|
+
justify-content: space-around;
|
|
641
620
|
}
|
|
642
621
|
|
|
643
622
|
.gap-4 {
|
|
644
623
|
gap: 1rem;
|
|
645
624
|
}
|
|
646
625
|
|
|
626
|
+
.gap-2 {
|
|
627
|
+
gap: 0.5rem;
|
|
628
|
+
}
|
|
629
|
+
|
|
647
630
|
.gap-10 {
|
|
648
631
|
gap: 2.5rem;
|
|
649
632
|
}
|
|
@@ -653,6 +636,10 @@ video {
|
|
|
653
636
|
column-gap: 1rem;
|
|
654
637
|
}
|
|
655
638
|
|
|
639
|
+
.rounded-full {
|
|
640
|
+
border-radius: 9999px;
|
|
641
|
+
}
|
|
642
|
+
|
|
656
643
|
.border {
|
|
657
644
|
border-width: 1px;
|
|
658
645
|
}
|
|
@@ -667,6 +654,10 @@ video {
|
|
|
667
654
|
border-color: rgb(33 250 144 / var(--tw-border-opacity));
|
|
668
655
|
}
|
|
669
656
|
|
|
657
|
+
.p-2 {
|
|
658
|
+
padding: 0.5rem;
|
|
659
|
+
}
|
|
660
|
+
|
|
670
661
|
.px-4 {
|
|
671
662
|
padding-left: 1rem;
|
|
672
663
|
padding-right: 1rem;
|
|
@@ -682,19 +673,9 @@ video {
|
|
|
682
673
|
line-height: 1;
|
|
683
674
|
}
|
|
684
675
|
|
|
685
|
-
.text-
|
|
686
|
-
font-size:
|
|
687
|
-
line-height:
|
|
688
|
-
}
|
|
689
|
-
|
|
690
|
-
.text-3xl {
|
|
691
|
-
font-size: 1.875rem;
|
|
692
|
-
line-height: 2.25rem;
|
|
693
|
-
}
|
|
694
|
-
|
|
695
|
-
.text-6xl {
|
|
696
|
-
font-size: 3.75rem;
|
|
697
|
-
line-height: 1;
|
|
676
|
+
.text-xl {
|
|
677
|
+
font-size: 1.25rem;
|
|
678
|
+
line-height: 1.75rem;
|
|
698
679
|
}
|
|
699
680
|
|
|
700
681
|
.font-semibold {
|
|
@@ -714,14 +695,14 @@ video {
|
|
|
714
695
|
color: rgb(33 250 144 / var(--tw-text-opacity));
|
|
715
696
|
}
|
|
716
697
|
|
|
717
|
-
.text-
|
|
698
|
+
.text-dark-green {
|
|
718
699
|
--tw-text-opacity: 1;
|
|
719
|
-
color: rgb(
|
|
700
|
+
color: rgb(2 120 63 / var(--tw-text-opacity));
|
|
720
701
|
}
|
|
721
702
|
|
|
722
|
-
.text-
|
|
703
|
+
.text-white {
|
|
723
704
|
--tw-text-opacity: 1;
|
|
724
|
-
color: rgb(
|
|
705
|
+
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
725
706
|
}
|
|
726
707
|
|
|
727
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
|
@@ -7,6 +7,7 @@ import BorderedText from './src/components/BorderedText'
|
|
|
7
7
|
import Box from './src/components/Box'
|
|
8
8
|
import Button from './src/components/Button'
|
|
9
9
|
import DetailedMetric from './src/components/DetailedMetric'
|
|
10
|
+
import DropDown from './src/components/DropDown'
|
|
10
11
|
import FollowUs from './src/components/FollowUs'
|
|
11
12
|
import FrontpageBackground from './src/components/FrontpageBackground'
|
|
12
13
|
import GHLoginButton from './src/components/GHLoginButton'
|
|
@@ -35,6 +36,7 @@ export {
|
|
|
35
36
|
Box,
|
|
36
37
|
Button,
|
|
37
38
|
DetailedMetric,
|
|
39
|
+
DropDown,
|
|
38
40
|
FollowUs,
|
|
39
41
|
FrontpageBackground,
|
|
40
42
|
HorizontalSeparator,
|
package/package.json
CHANGED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
import React, { useState } from 'react'
|
|
4
|
+
import styles from './DropDown.module.css'
|
|
5
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
6
|
+
import { faChevronLeft, faChevronDown } from '@fortawesome/free-solid-svg-icons'
|
|
7
|
+
export default function DropDown (props) {
|
|
8
|
+
const { header, items, align = 'left' } = props
|
|
9
|
+
const [open, setOpen] = useState(false)
|
|
10
|
+
function handleOpen () {
|
|
11
|
+
setOpen(!open)
|
|
12
|
+
}
|
|
13
|
+
return (
|
|
14
|
+
<div className={`${styles.dropDown} ${styles[align]}`}>
|
|
15
|
+
<span className={styles.header} onClick={handleOpen}>
|
|
16
|
+
{header}
|
|
17
|
+
{!open && <FontAwesomeIcon className={styles.arrow} icon={faChevronLeft} />}
|
|
18
|
+
{open && <FontAwesomeIcon className={styles.arrow} icon={faChevronDown} />}
|
|
19
|
+
</span>
|
|
20
|
+
{open && (
|
|
21
|
+
<div className={styles.menu}>
|
|
22
|
+
{items.map((item, index) => {
|
|
23
|
+
return (
|
|
24
|
+
<div className={styles.item} key={index}>
|
|
25
|
+
{item}
|
|
26
|
+
</div>
|
|
27
|
+
)
|
|
28
|
+
})}
|
|
29
|
+
</div>
|
|
30
|
+
)}
|
|
31
|
+
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
)
|
|
35
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.dropDown {
|
|
2
|
+
@apply mx-4 relative flex flex-col;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.right {
|
|
6
|
+
@apply items-end;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.left {
|
|
10
|
+
@apply items-start;
|
|
11
|
+
}
|
|
12
|
+
.arrow {
|
|
13
|
+
@apply ml-2;
|
|
14
|
+
}
|
|
15
|
+
.header {
|
|
16
|
+
@apply hover:cursor-pointer
|
|
17
|
+
}
|
|
18
|
+
.menu {
|
|
19
|
+
@apply absolute border-solid border border-main-green p-4 bg-dark-blue mt-8 rounded-md;
|
|
20
|
+
}
|
|
21
|
+
.item {
|
|
22
|
+
@apply mb-2
|
|
23
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
import DropDown from '../components/DropDown'
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Platformatic/DropDown',
|
|
5
|
+
component: DropDown,
|
|
6
|
+
decorators: [dd => <div className='text-white'>{dd()}</div>]
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Template = (args) => <DropDown {...args} />
|
|
10
|
+
export const DefaultAlignment = Template.bind({})
|
|
11
|
+
|
|
12
|
+
DefaultAlignment.args = {
|
|
13
|
+
header: 'My Menu',
|
|
14
|
+
items: [
|
|
15
|
+
<span key='1'>Menu 1</span>,
|
|
16
|
+
<span key='2'>Menu 2</span>,
|
|
17
|
+
<span key='3'>This is a very long menu item</span>
|
|
18
|
+
]
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const AlignRight = Template.bind({})
|
|
22
|
+
|
|
23
|
+
AlignRight.args = {
|
|
24
|
+
header: 'My Menu',
|
|
25
|
+
align: 'right',
|
|
26
|
+
items: [
|
|
27
|
+
<span key='1'>Menu 1</span>,
|
|
28
|
+
<span key='2'>Menu 2</span>,
|
|
29
|
+
<span key='3'>This is a very long menu item</span>
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export const AlignLeft = Template.bind({})
|
|
34
|
+
|
|
35
|
+
AlignLeft.args = {
|
|
36
|
+
header: 'My Menu',
|
|
37
|
+
align: 'left',
|
|
38
|
+
items: [
|
|
39
|
+
<span key='1'>Menu 1</span>,
|
|
40
|
+
<span key='2'>Menu 2</span>,
|
|
41
|
+
<span key='3'>This is a very long menu item</span>
|
|
42
|
+
]
|
|
43
|
+
}
|