@platformatic/ui-components 0.7.11 → 0.7.13
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-KFg_CKsg.js +40 -0
- package/dist/assets/index-TVRb_Qow.css +1 -0
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/components/BorderedBox.jsx +41 -10
- package/src/components/Common.module.css +33 -2
- package/src/components/constants.js +1 -0
- package/src/components/icons/DatabaseEditIcon.jsx +105 -0
- package/src/components/icons/OpenAPIEditsIcon.jsx +18 -15
- package/src/components/icons/index.js +2 -0
- package/src/stories/BorderedBox.stories.jsx +11 -1
- package/tailwind.config.cjs +1 -0
- package/dist/assets/index-DGOpiKCv.js +0 -40
- package/dist/assets/index-DVghlxYb.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._input_9kufh_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.25rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_9kufh_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_9kufh_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_9kufh_10{fill:#21fa90}._fillWhite_9kufh_13{fill:#fff}._input_9kufh_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_9kufh_19{padding-bottom:1rem;font-size:1.875rem;line-height:2.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._bordered_1mtp1_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_1mtp1_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_1mtp1_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--tertiary-blue_1mtp1_10{--tw-border-opacity: 1;border-color:rgb(37 136 228 / var(--tw-border-opacity))}._bordered--error-red_1mtp1_13{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_1mtp1_16{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_1mtp1_19{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_1mtp1_22{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._bordered--rich-black_1mtp1_25{--tw-border-opacity: 1;border-color:rgb(0 5 11 / var(--tw-border-opacity))}._bordered--transparent_1mtp1_28{border-style:none}._bordered--main-green-100_1mtp1_31{border-color:#21fa90}._bordered--main-dark-blue-100_1mtp1_34{border-color:#00283d}._bordered--tertiary-blue-100_1mtp1_37{border-color:#2588e4}._bordered--error-red-100_1mtp1_40{border-color:#fa2121}._bordered--warning-yellow-100_1mtp1_43{border-color:#feb928}._bordered--dark-blue-100_1mtp1_46{border-color:#00344f}._bordered--white-100_1mtp1_49{border-color:#fff}._bordered--rich-black-100_1mtp1_52{border-color:#00050b}._bordered--main-green-70_1mtp1_55{border-color:#21fa90b3}._bordered--main-dark-blue-70_1mtp1_58{border-color:#00283db3}._bordered--tertiary-blue-70_1mtp1_61{border-color:#2588e4b3}._bordered--error-red-70_1mtp1_64{border-color:#fa2121b3}._bordered--warning-yellow-70_1mtp1_67{border-color:#feb928b3}._bordered--dark-blue-70_1mtp1_70{border-color:#00344fb3}._bordered--white-70_1mtp1_73{border-color:#ffffffb3}._bordered--rich-black-70_1mtp1_76{border-color:#00050bb3}._bordered--main-green-30_1mtp1_79{border-color:#21fa904d}._bordered--main-dark-blue-30_1mtp1_82{border-color:#00283d4d}._bordered--error-red-30_1mtp1_85{border-color:#fa21214d}._bordered--warning-yellow-30_1mtp1_88{border-color:#feb9284d}._bordered--dark-blue-30_1mtp1_91{border-color:#00344f4d}._bordered--white-30_1mtp1_94{border-color:#ffffff4d}._bordered--rich-black-30_1mtp1_97{border-color:#00050b4d}._bordered--tertiary-blue-30_1mtp1_100{border-color:#2588e44d}._bordered--main-green-20_1mtp1_103{border-color:#21fa9033}._bordered--main-dark-blue-20_1mtp1_106{border-color:#00283d33}._bordered--error-red-20_1mtp1_109{border-color:#fa212133}._bordered--warning-yellow-20_1mtp1_112{border-color:#feb92833}._bordered--dark-blue-20_1mtp1_115{border-color:#00344f33}._bordered--white-20_1mtp1_118{border-color:#fff3}._bordered--rich-black-20_1mtp1_121{border-color:#00050b33}._bordered--tertiary-blue-20_1mtp1_124{border-color:#2588e433}._bordered--main-dark-blue-15_1mtp1_127{border-color:#00283d26}._bordered--white-15_1mtp1_130{border-color:#ffffff26}._bordered--rich-black-15_1mtp1_133{border-color:#00050b26}._bordered--tertiary-blue-15_1mtp1_136{border-color:#2588e426}._bordered--main-dark-blue-10_1mtp1_34{border-color:#00283d1a}._bordered--white-10_1mtp1_49{border-color:#ffffff1a}._bordered--rich-black-10_1mtp1_52{border-color:#00050b1a}._bordered--tertiary-blue-10_1mtp1_37{border-color:#2588e41a}._error-message_1mtp1_151{position:absolute;bottom:-1.25rem;width:-moz-max-content;width:max-content;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._padded_1mtp1_155{padding:.625rem .5rem}._text--error-red_1mtp1_158{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--error-red-70_1mtp1_161{color:#fa2121b3}._text--white_1mtp1_164{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--white-70_1mtp1_167{color:#ffffffb3}._text--dark-green_1mtp1_170{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}._text--dark-green-70_1mtp1_173{color:#02783fb3}._text--main-green_1mtp1_176{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-green-70_1mtp1_179{color:#21fa90b3}._text--light-green_1mtp1_182{--tw-text-opacity: 1;color:rgb(33 241 144 / var(--tw-text-opacity))}._text--light-green-70_1mtp1_185{color:#21f190b3}._text--main-dark-blue_1mtp1_188{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._text--main-dark-blue-70_1mtp1_191{color:#00283db3}._text--light-blue_1mtp1_194{--tw-text-opacity: 1;color:rgb(233 247 255 / var(--tw-text-opacity))}._text--light-blue-70_1mtp1_197{color:#e9f7ffb3}._text--rich-black_1mtp1_200{--tw-text-opacity: 1;color:rgb(0 5 11 / var(--tw-text-opacity))}._text--rich-black-70_1mtp1_203{color:#00050bb3}._text--base_1mtp1_207{font-size:1rem;line-height:1.5rem}._text--xs_1mtp1_210{font-size:.75rem;line-height:1rem}._background-color-main-green_1mtp1_214{--tw-bg-opacity: 1;background-color:rgb(33 250 144 / var(--tw-bg-opacity))}._background-color-light-green_1mtp1_217{--tw-bg-opacity: 1;background-color:rgb(33 241 144 / var(--tw-bg-opacity))}._background-color-dark-green_1mtp1_220{--tw-bg-opacity: 1;background-color:rgb(2 120 63 / var(--tw-bg-opacity))}._background-color-main-dark-blue_1mtp1_223{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._background-color-dark-blue_1mtp1_226{--tw-bg-opacity: 1;background-color:rgb(0 52 79 / var(--tw-bg-opacity))}._background-color-light-blue_1mtp1_229{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}._background-color-white_1mtp1_232{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}._background-color-error-red_1mtp1_235{--tw-bg-opacity: 1;background-color:rgb(250 33 33 / var(--tw-bg-opacity))}._background-color-tertiary-blue_1mtp1_238{--tw-bg-opacity: 1;background-color:rgb(37 136 228 / var(--tw-bg-opacity))}._background-color-warning-yellow_1mtp1_241{--tw-bg-opacity: 1;background-color:rgb(254 185 40 / var(--tw-bg-opacity))}._background-color-rich-black_1mtp1_244{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}._background-color-night_1mtp1_247{--tw-bg-opacity: 1;background-color:rgb(15 17 20 / var(--tw-bg-opacity))}._background-color-anti-flash-white_1mtp1_250{--tw-bg-opacity: 1;background-color:rgb(237 237 237 / var(--tw-bg-opacity))}._background-color-fire-engine-red_1mtp1_253{--tw-bg-opacity: 1;background-color:rgb(215 25 25 / var(--tw-bg-opacity))}._background-color-alternate-rich-black_1mtp1_256{--tw-bg-opacity: 1;background-color:rgb(18 23 29 / var(--tw-bg-opacity))}._background-color-transparent_1mtp1_259{background-color:transparent}._background-color-opaque-100_1mtp1_262{--tw-bg-opacity: 1 !important}._background-color-opaque-70_1mtp1_265{--tw-bg-opacity: .7 !important}._background-color-opaque-60_1mtp1_268{--tw-bg-opacity: .6 !important}._background-color-opaque-30_1mtp1_271{--tw-bg-opacity: .3 !important}._background-color-opaque-20_1mtp1_274{--tw-bg-opacity: .2 !important}._background-color-opaque-10_1mtp1_262{--tw-bg-opacity: .1 !important}._apply-opacity-30_1mtp1_280{opacity:.3}._padding--none_1mtp1_283{padding:0}._padding--small_1mtp1_286{padding:.25rem}._padding--medium_1mtp1_289{padding:.5rem}._padding--large_1mtp1_292{padding:1rem}._padding--extra-large_1mtp1_295{padding:1.5rem}._hover-background-color-opaque-main-green_1mtp1_298:hover{background-color:rgb(33 250 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-green_1mtp1_301:hover{background-color:rgb(33 241 144 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-dark-green_1mtp1_304:hover{background-color:rgb(2 120 63 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-main-dark-blue_1mtp1_307:hover{background-color:rgb(0 40 61 / var(--tw-bg-opacity));--tw-bg-opacity: .1 }._hover-background-color-opaque-dark-blue_1mtp1_310:hover{background-color:rgb(0 52 79 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-light-blue_1mtp1_313:hover{background-color:rgb(233 247 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-white_1mtp1_316:hover{background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-error-red_1mtp1_319:hover{background-color:rgb(250 33 33 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-tertiary-blue_1mtp1_322:hover{background-color:rgb(37 136 228 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-rich-black_1mtp1_325:hover{background-color:rgb(0 5 11 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._hover-background-color-opaque-night_1mtp1_328:hover{background-color:rgb(15 17 20 / var(--tw-bg-opacity));--tw-bg-opacity: .15 }._selected-background-color-main-green_1mtp1_331{background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-light-green_1mtp1_334{background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-dark-green_1mtp1_337{background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 !important}._selected-background-color-main-dark-blue_1mtp1_340{background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .1 }._selected-background-color-dark-blue_1mtp1_343{background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-light-blue_1mtp1_346{background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-rich-black_1mtp1_349{background-color:rgb(0 5 11 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-night_1mtp1_352{background-color:rgb(15 17 20 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-white_1mtp1_355{background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-error-red_1mtp1_358{background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._selected-background-color-tertiary-blue_1mtp1_361{background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important;--tw-bg-opacity: .15 }._fontSemiBold_1mtp1_365{font-weight:600}._fontLight_1mtp1_368{font-weight:300}._fullWidth_1mtp1_371{width:100%}._rich-black_thi2h_1>circle,._rich-black_thi2h_1>ellipse,._rich-black_thi2h_1>rect,._rich-black_thi2h_1>line,._rich-black_thi2h_1>path{stroke:#00050b}._important-rich-black_thi2h_9>circle,._important-rich-black_thi2h_9>ellipse,._important-rich-black_thi2h_9>rect,._important-rich-black_thi2h_9>line,._important-rich-black_thi2h_9>path{stroke:#00050b!important}._error-red_thi2h_17>circle,._error-red_thi2h_17>ellipse,._error-red_thi2h_17>rect,._error-red_thi2h_17>line,._error-red_thi2h_17>path{stroke:#fa2121}._important-error-red_thi2h_25>circle,._important-error-red_thi2h_25>ellipse,._important-error-red_thi2h_25>rect,._important-error-red_thi2h_25>line,._important-error-red_thi2h_25>path{stroke:#fa2121!important}._main-dark-blue_thi2h_33>circle,._main-dark-blue_thi2h_33>ellipse,._main-dark-blue_thi2h_33>rect,._main-dark-blue_thi2h_33>line,._main-dark-blue_thi2h_33>path{stroke:#00283d}._important-main-dark-blue_thi2h_41>circle,._important-main-dark-blue_thi2h_41>ellipse,._important-main-dark-blue_thi2h_41>rect,._important-main-dark-blue_thi2h_41>line,._important-main-dark-blue_thi2h_41>path{stroke:#00283d!important}._main-green_thi2h_49>circle,._main-green_thi2h_49>ellipse,._main-green_thi2h_49>rect,._main-green_thi2h_49>line,._main-green_thi2h_49>path{stroke:#21fa90}._important-main-green_thi2h_57>circle,._important-main-green_thi2h_57>ellipse,._important-main-green_thi2h_57>rect,._important-main-green_thi2h_57>line,._important-main-green_thi2h_57>path{stroke:#21fa90!important}._tertiary-blue_thi2h_65>circle,._tertiary-blue_thi2h_65>ellipse,._tertiary-blue_thi2h_65>rect,._tertiary-blue_thi2h_65>line,._tertiary-blue_thi2h_65>path{stroke:#2588e4}._important-tertiary-blue_thi2h_73>circle,._important-tertiary-blue_thi2h_73>ellipse,._important-tertiary-blue_thi2h_73>rect,._important-tertiary-blue_thi2h_73>line,._important-tertiary-blue_thi2h_73>path{stroke:#2588e4!important}._warning-yellow_thi2h_81>circle,._warning-yellow_thi2h_81>ellipse,._warning-yellow_thi2h_81>rect,._warning-yellow_thi2h_81>line,._warning-yellow_thi2h_81>path{stroke:#feb928}._important-warning-yellow_thi2h_89>circle,._important-warning-yellow_thi2h_89>ellipse,._important-warning-yellow_thi2h_89>rect,._important-warning-yellow_thi2h_89>line,._important-warning-yellow_thi2h_89>path{stroke:#feb928!important}._white_thi2h_97>circle,._white_thi2h_97>ellipse,._white_thi2h_97>rect,._white_thi2h_97>line,._white_thi2h_97>path{stroke:#fff}._important-white_thi2h_105>circle,._important-white_thi2h_105>ellipse,._important-white_thi2h_105>rect,._important-white_thi2h_105>line,._important-white_thi2h_105>path{stroke:#fff!important}._filled-rich-black_thi2h_113{fill:#00050b}._filled-white_thi2h_116{fill:#fff}._filled-error-red_thi2h_119{fill:#fa2121}._filled-main-dark-blue_thi2h_122{fill:#00283d}._filled-main-green_thi2h_125{fill:#21fa90}._filled-warning-yellow_thi2h_128{fill:#feb928}._filled-tertiary-blue_thi2h_131{fill:#2588e4}._fill-circle-green_thi2h_135>circle{fill:#fff}._fill-circle-main-dark-blue_thi2h_138>circle{fill:#00283d}._svgClassName_thi2h_141{display:block;flex-shrink:0;overflow-clip-margin:unset}._iconDisabled_thi2h_146{opacity:.3}._iconInactive_thi2h_150{opacity:.7}._strokeTransparent_thi2h_154{stroke:transparent!important}._cursorPointer_xwn7e_1{cursor:pointer}._pltTooltip_xwn7e_4{position:relative}._tabContainerClassName_1wta1_1{display:flex;width:100%;flex-direction:column;row-gap:.5rem;--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_1wta1_4{display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25em;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_1wta1_4:hover{cursor:pointer}._tab_1wta1_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:300;opacity:.7}._tab_1wta1_1:first-child{margin-left:0}._tab_1wta1_1:last-child{margin-right:0}._tab_1wta1_1:hover{opacity:1}._selected-tab_1wta1_10{font-weight:500;text-decoration-line:underline;text-underline-offset:8px;opacity:1}._tabContentClassName_1wta1_13{max-height:calc(100vH - 10rem);overflow-y:auto}._tab_1wta1_1:before{display:block;content:attr(title);font-weight:700;height:0;overflow:hidden;visibility:hidden}._style_18nkb_1{width:100%;border-bottom-width:0px;border-top-width:1px;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}._marginY-4_18nkb_8{margin-top:1rem;margin-bottom:1rem}._marginT-4_18nkb_12{margin-top:1rem}._marginB-4_18nkb_16{margin-bottom:1rem}._marginY-8_18nkb_20{margin-top:2rem;margin-bottom:2rem}._marginT-8_18nkb_24{margin-top:2rem}._marginB-8_18nkb_28{margin-bottom:2rem}._marginY-10_18nkb_32{margin-top:2.5rem;margin-bottom:2.5rem}._marginT-10_18nkb_36{margin-top:2.5rem}._marginB-10_18nkb_40{margin-bottom:2.5rem}._apply-opacity-20_18nkb_44{opacity:.2}._apply-opacity-30_18nkb_48{opacity:.3}._borderedBox_ljsv8_1{flex:1 1 0%;row-gap:1rem;border-radius:.375rem;padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._clickable_ljsv8_4{cursor:pointer}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}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-feature-settings:normal;font-variation-settings:normal;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-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([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}dialog{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}[hidden]{display:none}*,: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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::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-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--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: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 350px){.container{max-width:350px}}@media (min-width: 390px){.container{max-width:390px}}@media (min-width: 744px){.container{max-width:744px}}@media (min-width: 1240px){.container{max-width:1240px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1920px){.container{max-width:1920px}}.visible{visibility:visible}.relative{position:relative}.col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-screen{height:100vh}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.border{border-width:1px}.border-0{border-width:0px}.bg-rich-black{--tw-bg-opacity: 1;background-color:rgb(0 5 11 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-2{padding:.5rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.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-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.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))}.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))}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{background-color:transparent;font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.body--light-blue{--tw-bg-opacity: 1;background-color:rgb(233 247 255 / var(--tw-bg-opacity))}.body--main-dark-blue{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}.hover\:cursor-pointer:hover{cursor:pointer}
|
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" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-KFg_CKsg.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-TVRb_Qow.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -1,27 +1,58 @@
|
|
|
1
1
|
'use strict'
|
|
2
|
+
import React, { useEffect, useState } from 'react'
|
|
2
3
|
import PropTypes from 'prop-types'
|
|
3
4
|
import styles from './BorderedBox.module.css'
|
|
4
5
|
import commonStyles from './Common.module.css'
|
|
5
|
-
import
|
|
6
|
-
import { COLORS_BORDERED_BOX, DARK_BLUE, MAIN_GREEN, OPACITIES, OPACITY_100 } from './constants'
|
|
6
|
+
import { COLORS_BORDERED_BOX, DARK_BLUE, TRANSPARENT, OPACITIES, OPACITY_100 } from './constants'
|
|
7
7
|
function BorderedBox ({
|
|
8
8
|
classes = '',
|
|
9
|
-
color =
|
|
9
|
+
color = TRANSPARENT,
|
|
10
10
|
children = null,
|
|
11
11
|
backgroundColor = DARK_BLUE,
|
|
12
12
|
backgroundColorOpacity = OPACITY_100,
|
|
13
13
|
borderColorOpacity = OPACITY_100,
|
|
14
14
|
clickable = false,
|
|
15
|
-
onClick = () => {}
|
|
15
|
+
onClick = () => {},
|
|
16
|
+
internalOverHandling = false,
|
|
17
|
+
backgroundColorOver = null,
|
|
18
|
+
backgroundColorOpacityOver = null,
|
|
19
|
+
borderColorOpacityOver = null
|
|
16
20
|
}) {
|
|
17
|
-
const
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
const [over, setOver] = useState(false)
|
|
22
|
+
const [className, setClassName] = useState(normalClassName())
|
|
23
|
+
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
if (over) {
|
|
26
|
+
setClassName(overClassName())
|
|
27
|
+
} else {
|
|
28
|
+
setClassName(normalClassName())
|
|
29
|
+
}
|
|
30
|
+
}, [over])
|
|
31
|
+
|
|
32
|
+
function normalClassName () {
|
|
33
|
+
const borderColor = color === TRANSPARENT ? commonStyles[`bordered--${color}`] : commonStyles[`bordered--${color}-${borderColorOpacity}`]
|
|
34
|
+
const styledBackgroundColor = commonStyles[`background-color-${backgroundColor}`]
|
|
35
|
+
const opacity = commonStyles[`background-color-opaque-${backgroundColorOpacity}`]
|
|
36
|
+
let className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor} ${opacity}`
|
|
37
|
+
className += clickable ? ` ${styles.clickable}` : ''
|
|
38
|
+
return className
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function overClassName () {
|
|
42
|
+
const borderColor = color === TRANSPARENT ? commonStyles[`bordered--${color}`] : commonStyles[`bordered--${color}-${borderColorOpacityOver}`]
|
|
43
|
+
const styledBackgroundColor = commonStyles[`background-color-${backgroundColorOver}`]
|
|
44
|
+
const opacity = commonStyles[`background-color-opaque-${backgroundColorOpacityOver}`]
|
|
45
|
+
let className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor} ${opacity}`
|
|
46
|
+
className += clickable ? ` ${styles.clickable}` : ''
|
|
47
|
+
return className
|
|
48
|
+
}
|
|
22
49
|
|
|
23
50
|
return (
|
|
24
|
-
<div
|
|
51
|
+
<div
|
|
52
|
+
className={className}
|
|
53
|
+
onMouseOver={() => internalOverHandling && setOver(true)} onMouseLeave={() => internalOverHandling && setOver(false)}
|
|
54
|
+
onClick={() => clickable ? onClick() : {}}
|
|
55
|
+
>
|
|
25
56
|
{children}
|
|
26
57
|
</div>
|
|
27
58
|
)
|
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
.bordered--white {
|
|
23
23
|
@apply border-white;
|
|
24
24
|
}
|
|
25
|
+
.bordered--rich-black {
|
|
26
|
+
@apply border-rich-black;
|
|
27
|
+
}
|
|
28
|
+
.bordered--transparent {
|
|
29
|
+
@apply border-none;
|
|
30
|
+
}
|
|
25
31
|
.bordered--main-green-100 {
|
|
26
32
|
@apply border-main-green/100;
|
|
27
33
|
}
|
|
@@ -43,6 +49,9 @@
|
|
|
43
49
|
.bordered--white-100 {
|
|
44
50
|
@apply border-white/100;
|
|
45
51
|
}
|
|
52
|
+
.bordered--rich-black-100 {
|
|
53
|
+
@apply border-rich-black/100;
|
|
54
|
+
}
|
|
46
55
|
.bordered--main-green-70 {
|
|
47
56
|
@apply border-main-green/70;
|
|
48
57
|
}
|
|
@@ -64,6 +73,9 @@
|
|
|
64
73
|
.bordered--white-70 {
|
|
65
74
|
@apply border-white/70;
|
|
66
75
|
}
|
|
76
|
+
.bordered--rich-black-70 {
|
|
77
|
+
@apply border-rich-black/70;
|
|
78
|
+
}
|
|
67
79
|
.bordered--main-green-30 {
|
|
68
80
|
@apply border-main-green/30;
|
|
69
81
|
}
|
|
@@ -82,6 +94,9 @@
|
|
|
82
94
|
.bordered--white-30 {
|
|
83
95
|
@apply border-white/30;
|
|
84
96
|
}
|
|
97
|
+
.bordered--rich-black-30 {
|
|
98
|
+
@apply border-rich-black/30;
|
|
99
|
+
}
|
|
85
100
|
.bordered--tertiary-blue-30 {
|
|
86
101
|
@apply border-tertiary-blue/30;
|
|
87
102
|
}
|
|
@@ -103,6 +118,9 @@
|
|
|
103
118
|
.bordered--white-20 {
|
|
104
119
|
@apply border-white/20;
|
|
105
120
|
}
|
|
121
|
+
.bordered--rich-black-20 {
|
|
122
|
+
@apply border-rich-black/20;
|
|
123
|
+
}
|
|
106
124
|
.bordered--tertiary-blue-20 {
|
|
107
125
|
@apply border-tertiary-blue/20;
|
|
108
126
|
}
|
|
@@ -112,6 +130,9 @@
|
|
|
112
130
|
.bordered--white-15 {
|
|
113
131
|
@apply border-white/15;
|
|
114
132
|
}
|
|
133
|
+
.bordered--rich-black-15 {
|
|
134
|
+
@apply border-rich-black/15;
|
|
135
|
+
}
|
|
115
136
|
.bordered--tertiary-blue-15 {
|
|
116
137
|
@apply border-tertiary-blue/15;
|
|
117
138
|
}
|
|
@@ -121,11 +142,12 @@
|
|
|
121
142
|
.bordered--white-10 {
|
|
122
143
|
@apply border-white/10;
|
|
123
144
|
}
|
|
145
|
+
.bordered--rich-black-10 {
|
|
146
|
+
@apply border-rich-black/10;
|
|
147
|
+
}
|
|
124
148
|
.bordered--tertiary-blue-10 {
|
|
125
149
|
@apply border-tertiary-blue/10;
|
|
126
150
|
}
|
|
127
|
-
|
|
128
|
-
|
|
129
151
|
.error-message {
|
|
130
152
|
@apply absolute -bottom-5 text-error-red text-xs px-2 w-max;
|
|
131
153
|
}
|
|
@@ -222,6 +244,9 @@
|
|
|
222
244
|
.background-color-rich-black {
|
|
223
245
|
@apply bg-rich-black ;
|
|
224
246
|
}
|
|
247
|
+
.background-color-night {
|
|
248
|
+
@apply bg-night ;
|
|
249
|
+
}
|
|
225
250
|
.background-color-anti-flash-white {
|
|
226
251
|
@apply bg-anti-flash-white ;
|
|
227
252
|
}
|
|
@@ -300,6 +325,9 @@
|
|
|
300
325
|
.hover-background-color-opaque-rich-black{
|
|
301
326
|
@apply hover:bg-rich-black hover:bg-opacity-15;
|
|
302
327
|
}
|
|
328
|
+
.hover-background-color-opaque-night{
|
|
329
|
+
@apply hover:bg-night hover:bg-opacity-15;
|
|
330
|
+
}
|
|
303
331
|
.selected-background-color-main-green {
|
|
304
332
|
@apply !bg-main-green bg-opacity-15 !important;
|
|
305
333
|
}
|
|
@@ -321,6 +349,9 @@
|
|
|
321
349
|
.selected-background-color-rich-black {
|
|
322
350
|
@apply !bg-rich-black bg-opacity-15;
|
|
323
351
|
}
|
|
352
|
+
.selected-background-color-night {
|
|
353
|
+
@apply !bg-night bg-opacity-15;
|
|
354
|
+
}
|
|
324
355
|
.selected-background-color-white{
|
|
325
356
|
@apply !bg-white bg-opacity-15;
|
|
326
357
|
}
|
|
@@ -10,6 +10,7 @@ export const TERTIARY_BLUE = 'tertiary-blue'
|
|
|
10
10
|
export const ERROR_RED = 'error-red'
|
|
11
11
|
export const WARNING_YELLOW = 'warning-yellow'
|
|
12
12
|
export const RICH_BLACK = 'rich-black'
|
|
13
|
+
export const NIGHT = 'night'
|
|
13
14
|
export const ANTI_FLASH_WHITE = 'anti-flash-white'
|
|
14
15
|
export const FIRE_ENGINE_RED = 'fire-engine-red'
|
|
15
16
|
export const ALTERNATE_RICH_BLACK = 'alternate-rich-black'
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
5
|
+
|
|
6
|
+
const DatabaseEditIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
disabled = false,
|
|
10
|
+
inactive = false
|
|
11
|
+
}) => {
|
|
12
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
13
|
+
if (disabled) {
|
|
14
|
+
className += ` ${styles.iconDisabled}`
|
|
15
|
+
}
|
|
16
|
+
if (inactive) {
|
|
17
|
+
className += ` ${styles.iconInactive}`
|
|
18
|
+
}
|
|
19
|
+
let icon = <></>
|
|
20
|
+
|
|
21
|
+
switch (size) {
|
|
22
|
+
case SMALL:
|
|
23
|
+
icon = (
|
|
24
|
+
<svg
|
|
25
|
+
width={16}
|
|
26
|
+
height={16}
|
|
27
|
+
viewBox='0 0 16 16'
|
|
28
|
+
fill='none'
|
|
29
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
30
|
+
className={className}
|
|
31
|
+
>
|
|
32
|
+
<rect x='11.7522' y='7.2478' width='2' height='6.47059' transform='rotate(45 11.7522 7.2478)' stroke='none' strokeLinejoin='round' />
|
|
33
|
+
<path d='M8.59097 13.2373L7.17676 11.8231L6.63603 13.7781L8.59097 13.2373Z' stroke='none' strokeLinejoin='round' />
|
|
34
|
+
<path d='M12.2929 6.70711C12.6834 6.31658 13.3166 6.31658 13.7071 6.70711V6.70711C14.0976 7.09763 14.0976 7.7308 13.7071 8.12132L13.1664 8.66205L11.7522 7.24784L12.2929 6.70711Z' stroke='none' />
|
|
35
|
+
<path d='M6.50001 5.60541C8.9853 5.60541 11 4.79831 11 3.80271C11 2.8071 8.9853 2 6.50001 2C4.01472 2 2 2.8071 2 3.80271C2 4.79831 4.01472 5.60541 6.50001 5.60541Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M6.50001 8.36667C4.01501 8.36667 2 7.55953 2 6.56396' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<path d='M11 3.80273V6M2 3.80273V9.19735C2 10.0248 3.39187 10.7221 5.28863 10.934' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
</svg>
|
|
39
|
+
)
|
|
40
|
+
break
|
|
41
|
+
case MEDIUM:
|
|
42
|
+
icon = (
|
|
43
|
+
<svg
|
|
44
|
+
width={24}
|
|
45
|
+
height={24}
|
|
46
|
+
viewBox='0 0 24 24'
|
|
47
|
+
fill='none'
|
|
48
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
49
|
+
className={className}
|
|
50
|
+
>
|
|
51
|
+
<rect x='17.6284' y='10.8717' width='3' height='9.70588' transform='rotate(45 17.6284 10.8717)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
52
|
+
<path d='M12.8865 19.8561L10.7651 17.7347L9.95404 20.6672L12.8865 19.8561Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
53
|
+
<path d='M18.7929 9.70711C19.1834 9.31658 19.8166 9.31658 20.2071 9.70711L20.9142 10.4142C21.3047 10.8047 21.3047 11.4379 20.9142 11.8284L19.7496 12.9931L17.6282 10.8718L18.7929 9.70711Z' stroke='none' strokeWidth={1.5} />
|
|
54
|
+
<path d='M9.75002 8.40812C13.478 8.40812 16.5 7.19747 16.5 5.70406C16.5 4.21065 13.478 3 9.75002 3C6.02209 3 3 4.21065 3 5.70406C3 7.19747 6.02209 8.40812 9.75002 8.40812Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
55
|
+
<path d='M9.75002 12.5501C6.02251 12.5501 3 11.3394 3 9.84607' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M16.5 5.70398V8.99988M3 5.70398V13.7959C3 15.037 5.0878 16.083 7.93294 16.4008' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
</svg>
|
|
58
|
+
)
|
|
59
|
+
break
|
|
60
|
+
case LARGE:
|
|
61
|
+
icon = (
|
|
62
|
+
<svg
|
|
63
|
+
width={40}
|
|
64
|
+
height={40}
|
|
65
|
+
viewBox='0 0 40 40'
|
|
66
|
+
fill='none'
|
|
67
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
68
|
+
className={className}
|
|
69
|
+
>
|
|
70
|
+
<rect x='29.3806' y='18.1195' width='5' height='16.1765' transform='rotate(45 29.3806 18.1195)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
71
|
+
<path d='M21.4774 33.0934L17.9419 29.5579L16.5901 34.4452L21.4774 33.0934Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
72
|
+
<path d='M31.0858 16.4142C31.8668 15.6332 33.1332 15.6332 33.9142 16.4142L34.6213 17.1213C35.4024 17.9024 35.4024 19.1687 34.6213 19.9497L32.9159 21.6551L29.3804 18.1196L31.0858 16.4142Z' stroke='none' strokeWidth={2} />
|
|
73
|
+
<path d='M16.25 14.0135C22.4633 14.0135 27.5001 11.9958 27.5001 9.50676C27.5001 7.01775 22.4633 5 16.25 5C10.0368 5 5 7.01775 5 9.50676C5 11.9958 10.0368 14.0135 16.25 14.0135Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
74
|
+
<path d='M16.25 20.9168C10.0375 20.9168 5 18.899 5 16.41' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
75
|
+
<path d='M27.5001 9.50671V14.9999M5 9.50671V22.9933C5 25.0618 8.47967 26.805 13.2216 27.3348' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
76
|
+
</svg>
|
|
77
|
+
)
|
|
78
|
+
break
|
|
79
|
+
|
|
80
|
+
default:
|
|
81
|
+
break
|
|
82
|
+
}
|
|
83
|
+
return icon
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
DatabaseEditIcon.propTypes = {
|
|
87
|
+
/**
|
|
88
|
+
* color of text, icon and borders
|
|
89
|
+
*/
|
|
90
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
91
|
+
/**
|
|
92
|
+
* Size
|
|
93
|
+
*/
|
|
94
|
+
size: PropTypes.oneOf(SIZES),
|
|
95
|
+
/**
|
|
96
|
+
* disabled
|
|
97
|
+
*/
|
|
98
|
+
disabled: PropTypes.bool,
|
|
99
|
+
/**
|
|
100
|
+
* inactive
|
|
101
|
+
*/
|
|
102
|
+
inactive: PropTypes.bool
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export default DatabaseEditIcon
|
|
@@ -32,11 +32,12 @@ const OpenAPIEditsIcon = ({
|
|
|
32
32
|
xmlns='http://www.w3.org/2000/svg'
|
|
33
33
|
className={className}
|
|
34
34
|
>
|
|
35
|
-
<
|
|
36
|
-
<path d='
|
|
37
|
-
<path d='
|
|
38
|
-
<path d='
|
|
39
|
-
<path d='
|
|
35
|
+
<path d='M11.8177 3.31126C11.7452 3.34318 11.7571 3.41708 11.7378 3.47209C11.5187 4.09229 10.8778 4.41814 10.2259 4.22079C10.0841 4.17796 10.0059 4.20021 9.90539 4.29679C9.13013 5.04129 8.35048 5.78117 7.56775 6.51853C7.476 6.60504 7.44044 6.67054 7.48829 6.80239C7.67179 7.31174 7.46151 7.84419 6.9874 8.12553C6.52514 8.39973 5.90352 8.3359 5.51765 7.97478C5.12475 7.60652 5.0387 7.03922 5.30868 6.59538C5.5892 6.13432 6.16297 5.90966 6.69766 6.07259C6.85307 6.12004 6.94218 6.09442 7.05325 5.98735C7.82807 5.24285 8.60992 4.50465 9.39177 3.76644C9.46991 3.69254 9.50459 3.63585 9.46333 3.5187C9.239 2.88631 9.57703 2.25099 10.2289 2.05489C10.8852 1.85753 11.5499 2.20816 11.7531 2.85314C11.7702 2.90815 11.7426 2.98373 11.8181 3.01858V3.31084L11.8177 3.31126Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
36
|
+
<path d='M6.24678 2.88456C7.24812 2.88582 8.04665 3.12433 8.77714 3.58287C8.88118 3.64837 8.89567 3.68323 8.80128 3.77351C8.23191 4.32149 7.66692 4.87325 7.10633 5.42963C7.00799 5.52705 6.92151 5.54595 6.78279 5.51361C5.68662 5.25663 4.60538 6.04732 4.62337 7.10549C4.63523 7.79247 4.98467 8.3056 5.64009 8.58819C6.31877 8.88087 6.96848 8.78513 7.53127 8.31819C8.01329 7.91844 8.1902 7.39607 8.07607 6.79476C8.05236 6.67005 8.07782 6.58858 8.16913 6.5004C8.73368 5.95746 9.29647 5.41368 9.85092 4.86107C9.97559 4.73678 10.0173 4.77877 10.095 4.89761C11.0972 6.42524 10.901 8.56804 9.63581 9.90545C8.74685 10.8448 7.6397 11.3247 6.31789 11.3239C4.27833 11.3226 2.45562 9.85674 2.08204 7.93733C1.62592 5.59214 3.11148 3.45983 5.55053 2.9593C5.82139 2.90387 6.0962 2.87952 6.24678 2.88456Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
37
|
+
<path d='M6.72159 11.2175H11.0909H13C13.5523 11.2175 14 10.7697 14 10.2175V7.17395C14 6.62167 13.5523 6.17395 13 6.17395H11.8182' stroke='none' strokeLinecap='round' />
|
|
38
|
+
<path d='M11.0913 11.2175V12.6088' stroke='none' />
|
|
39
|
+
<path d='M9.63623 11.2175V12.6088' stroke='none' />
|
|
40
|
+
<path d='M12.5454 14.0001H8.54559V13.6088C8.54559 13.0565 8.9933 12.6088 9.54559 12.6088H10.7272H11.5454C12.0977 12.6088 12.5454 13.0565 12.5454 13.6088V14.0001Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
40
41
|
</svg>
|
|
41
42
|
)
|
|
42
43
|
break
|
|
@@ -50,11 +51,12 @@ const OpenAPIEditsIcon = ({
|
|
|
50
51
|
xmlns='http://www.w3.org/2000/svg'
|
|
51
52
|
className={className}
|
|
52
53
|
>
|
|
53
|
-
<
|
|
54
|
-
<path d='
|
|
55
|
-
<path d='
|
|
56
|
-
<path d='M16.
|
|
57
|
-
<path d='
|
|
54
|
+
<path d='M17.7265 4.96689C17.6178 5.01476 17.6356 5.12562 17.6066 5.20813C17.278 6.13844 16.3166 6.62722 15.3388 6.33118C15.1261 6.26693 15.0089 6.30032 14.8581 6.44519C13.6952 7.56194 12.5257 8.67176 11.3516 9.7778C11.214 9.90755 11.1607 10.0058 11.2324 10.2036C11.5077 10.9676 11.1923 11.7663 10.4811 12.1883C9.78771 12.5996 8.85528 12.5039 8.27647 11.9622C7.68712 11.4098 7.55806 10.5588 7.96303 9.89307C8.3838 9.20147 9.24445 8.8645 10.0465 9.10888C10.2796 9.18006 10.4133 9.14164 10.5799 8.98102C11.7421 7.86427 12.9149 6.75697 14.0877 5.64967C14.2049 5.53881 14.2569 5.45378 14.195 5.27805C13.8585 4.32947 14.3655 3.37648 15.3434 3.08234C16.3278 2.7863 17.3248 3.31224 17.6297 4.27971C17.6554 4.36222 17.6139 4.4756 17.7271 4.52788V4.96626L17.7265 4.96689Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
55
|
+
<path d='M9.37016 4.32678C10.8722 4.32867 12.07 4.68643 13.1657 5.37424C13.3218 5.4725 13.3435 5.52478 13.2019 5.6602C12.3479 6.48217 11.5004 7.30982 10.6595 8.14439C10.512 8.29052 10.3823 8.31886 10.1742 8.27036C8.52993 7.88488 6.90806 9.07092 6.93506 10.6582C6.95284 11.6886 7.477 12.4583 8.46013 12.8822C9.47816 13.3212 10.4527 13.1776 11.2969 12.4772C12.0199 11.8776 12.2853 11.094 12.1141 10.1921C12.0785 10.005 12.1167 9.88281 12.2537 9.75054C13.1005 8.93613 13.9447 8.12045 14.7764 7.29155C14.9634 7.10511 15.0259 7.1681 15.1425 7.34635C16.6458 9.6378 16.3515 12.852 14.4537 14.8581C13.1203 16.2671 11.4596 16.9871 9.47684 16.9858C6.41749 16.9839 3.68343 14.7851 3.12305 11.9059C2.43888 8.38814 4.66722 5.18969 8.3258 4.43889C8.73209 4.35575 9.1443 4.31922 9.37016 4.32678Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
56
|
+
<path d='M10.0824 16.8261H16.6364H20C20.5523 16.8261 21 16.3784 21 15.8261V10.2609C21 9.70858 20.5523 9.26086 20 9.26086H17.7273' stroke='none' strokeWidth='1.5' strokeLinecap='round' />
|
|
57
|
+
<path d='M16.6367 16.8262V18.9131' stroke='none' strokeWidth='1.5' />
|
|
58
|
+
<path d='M14.4541 16.8262V18.9131' stroke='none' strokeWidth='1.5' />
|
|
59
|
+
<path d='M18.8184 20.9999H12.8186V19.913C12.8186 19.3607 13.2663 18.913 13.8186 18.913H16.0911H17.8184C18.3706 18.913 18.8184 19.3607 18.8184 19.913V20.9999Z' stroke='none' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round' />
|
|
58
60
|
</svg>
|
|
59
61
|
)
|
|
60
62
|
break
|
|
@@ -68,11 +70,12 @@ const OpenAPIEditsIcon = ({
|
|
|
68
70
|
xmlns='http://www.w3.org/2000/svg'
|
|
69
71
|
className={className}
|
|
70
72
|
>
|
|
71
|
-
<
|
|
72
|
-
<path d='
|
|
73
|
-
<path d='
|
|
74
|
-
<path d='M27.
|
|
75
|
-
<path d='
|
|
73
|
+
<path d='M29.5441 8.27815C29.363 8.35794 29.3927 8.5427 29.3444 8.68022C28.7967 10.2307 27.1944 11.0454 25.5646 10.552C25.2102 10.4449 25.0148 10.5005 24.7635 10.742C22.8253 12.6032 20.8762 14.4529 18.9194 16.2963C18.69 16.5126 18.6011 16.6764 18.7207 17.006C19.1795 18.2794 18.6538 19.6105 17.4685 20.3138C16.3128 20.9993 14.7588 20.8398 13.7941 19.937C12.8119 19.0163 12.5968 17.5981 13.2717 16.4884C13.973 15.3358 15.4074 14.7742 16.7442 15.1815C17.1327 15.3001 17.3555 15.2361 17.6331 14.9684C19.5702 13.1071 21.5248 11.2616 23.4794 9.41611C23.6748 9.23135 23.7615 9.08963 23.6583 8.79674C23.0975 7.21578 23.9426 5.62747 25.5723 5.13723C27.2131 4.64383 28.8747 5.5204 29.3828 7.13285C29.4256 7.27037 29.3565 7.45933 29.5452 7.54646V8.2771L29.5441 8.27815Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
74
|
+
<path d='M15.6169 7.21133C18.1203 7.21448 20.1166 7.81076 21.9428 8.95711C22.203 9.12087 22.2392 9.20801 22.0032 9.43371C20.5798 10.8037 19.1673 12.1831 17.7658 13.574C17.52 13.8176 17.3038 13.8648 16.957 13.784C14.2165 13.1415 11.5134 15.1182 11.5584 17.7637C11.5881 19.4811 12.4617 20.7639 14.1002 21.4704C15.7969 22.2021 17.4212 21.9628 18.8282 20.7954C20.0332 19.796 20.4755 18.4901 20.1902 16.9868C20.1309 16.6751 20.1946 16.4714 20.4228 16.2509C21.8342 14.8936 23.2412 13.5341 24.6273 12.1526C24.939 11.8419 25.0432 11.9469 25.2375 12.244C27.7431 16.063 27.2525 21.42 24.0895 24.7636C21.8671 27.1119 19.0993 28.3118 15.7947 28.3097C10.6958 28.3066 6.13905 24.6418 5.20509 19.8433C4.0648 13.9803 7.7787 8.64953 13.8763 7.39819C14.5535 7.25962 15.2405 7.19874 15.6169 7.21133Z' fill='none' className={`${filledClassName} ${strokeTransparent}`} />
|
|
75
|
+
<path d='M16.804 28.0436H27.7273H34C34.5523 28.0436 35 27.5959 35 27.0436V16.4348C35 15.8825 34.5523 15.4348 34 15.4348H29.5455' stroke='none' strokeWidth='2' strokeLinecap='round' />
|
|
76
|
+
<path d='M27.7285 28.0437V31.522' stroke='none' strokeWidth='2' />
|
|
77
|
+
<path d='M24.0908 28.0437V31.522' stroke='none' strokeWidth='2' />
|
|
78
|
+
<path d='M31.3633 35H21.3637V32.5217C21.3637 31.9694 21.8114 31.5217 22.3637 31.5217H26.8178H30.3633C30.9156 31.5217 31.3633 31.9694 31.3633 32.5217V35Z' stroke='none' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
|
|
76
79
|
</svg>
|
|
77
80
|
)
|
|
78
81
|
break
|
|
@@ -68,6 +68,7 @@ import ConfigureDatabaseIcon from './ConfigureDatabaseIcon'
|
|
|
68
68
|
import CreateAppIcon from './CreateAppIcon'
|
|
69
69
|
import RunningAppIcon from './RunningAppIcon'
|
|
70
70
|
import DatabaseIcon from './DatabaseIcon'
|
|
71
|
+
import DatabaseEditIcon from './DatabaseEditIcon'
|
|
71
72
|
import DatabaseMigrationIcon from './DatabaseMigrationIcon'
|
|
72
73
|
import DepencenciesReloadIcon from './DepencenciesReloadIcon'
|
|
73
74
|
import DeploymentHistoryIcon from './DeploymentHistoryIcon'
|
|
@@ -255,6 +256,7 @@ export default {
|
|
|
255
256
|
CreateAppIcon,
|
|
256
257
|
RunningAppIcon,
|
|
257
258
|
DatabaseIcon,
|
|
259
|
+
DatabaseEditIcon,
|
|
258
260
|
DatabaseMigrationIcon,
|
|
259
261
|
DepencenciesReloadIcon,
|
|
260
262
|
DeploymentHistoryIcon,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
import BorderedBox from '../components/BorderedBox'
|
|
3
|
-
import { COLORS_BORDERED_BOX } from '../components/constants'
|
|
3
|
+
import { COLORS_BORDERED_BOX, ERROR_RED, OPACITY_30, OPACITY_100, TERTIARY_BLUE, WHITE } from '../components/constants'
|
|
4
4
|
export default {
|
|
5
5
|
title: 'Platformatic/BorderedBox',
|
|
6
6
|
component: BorderedBox,
|
|
@@ -33,3 +33,13 @@ export const White = Template.bind({})
|
|
|
33
33
|
White.args = {
|
|
34
34
|
color: 'white'
|
|
35
35
|
}
|
|
36
|
+
|
|
37
|
+
export const HandlingOver = Template.bind({})
|
|
38
|
+
HandlingOver.args = {
|
|
39
|
+
color: WHITE,
|
|
40
|
+
backgroundColor: ERROR_RED,
|
|
41
|
+
borderColorOpacity: OPACITY_30,
|
|
42
|
+
internalOverHandling: true,
|
|
43
|
+
borderColorOpacityOver: OPACITY_100,
|
|
44
|
+
backgroundColorOver: TERTIARY_BLUE
|
|
45
|
+
}
|
package/tailwind.config.cjs
CHANGED