@agilant/toga-blox 1.0.27 → 1.0.28
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/components/Card/DUMMYPRODUCTDATA.json +1 -2
- package/dist/components/Card/templates/CounterContentCardTemplate.js +2 -2
- package/dist/components/Card/templates/HorizontalCardTemplate.js +3 -3
- package/dist/components/Card/templates/ItemCardTemplate.js +2 -2
- package/dist/components/Card/templates/KitContentCardTemplate.js +2 -2
- package/dist/components/Card/templates/ShippingAddressCardTemplate.js +2 -2
- package/dist/components/Card/templates/VerticalCardTemplate.js +2 -2
- package/dist/components/CounterButton/CounterButton.js +2 -2
- package/dist/components/GetSupport/GetSupport.js +2 -2
- package/dist/components/Header/Header.stories.js +3 -3
- package/dist/components/Input/Input.js +2 -2
- package/dist/components/Input/Input.stories.js +4 -4
- package/dist/components/Input/Input.test.js +2 -2
- package/dist/components/Page/ViewPageTemplate.stories.js +3 -3
- package/dist/components/Page/ViewPageTemplate.test.js +2 -2
- package/dist/components/PageSection/PageSection.d.ts +1 -1
- package/dist/components/PageSection/PageSection.stories.js +3 -3
- package/dist/components/PageSection/PageSections.test.js +3 -13
- package/dist/components/SearchInput/SearchInput.js +2 -2
- package/dist/components/Text/Text.js +2 -2
- package/dist/components/Text/Text.stories.js +0 -7
- package/dist/components/Text/Text.test.js +1 -7
- package/dist/components/Text/Text.types.d.ts +0 -1
- package/dist/main.css +1 -0
- package/package.json +1 -1
- package/dist/components/BaseButton/BaseButton.d.ts +0 -4
- package/dist/components/BaseButton/BaseButton.js +0 -49
- package/dist/components/BaseButton/BaseButton.stories.d.ts +0 -12
- package/dist/components/BaseButton/BaseButton.stories.js +0 -200
- package/dist/components/BaseButton/BaseButton.test.d.ts +0 -1
- package/dist/components/BaseButton/BaseButton.test.js +0 -57
- package/dist/components/BaseButton/BaseButton.types.d.ts +0 -24
- package/dist/components/BaseButton/BaseButton.types.js +0 -1
- package/dist/components/BaseButton/index.d.ts +0 -2
- package/dist/components/BaseButton/index.js +0 -2
- package/dist/components/ImageContainer/ImageContainer.d.ts +0 -4
- package/dist/components/ImageContainer/ImageContainer.js +0 -6
- package/dist/components/ImageContainer/ImageContainer.stories.d.ts +0 -7
- package/dist/components/ImageContainer/ImageContainer.stories.js +0 -88
- package/dist/components/ImageContainer/ImageContainer.test.d.ts +0 -1
- package/dist/components/ImageContainer/ImageContainer.test.js +0 -63
- package/dist/components/ImageContainer/ImageContainer.types.d.ts +0 -11
- package/dist/components/ImageContainer/ImageContainer.types.js +0 -1
package/dist/main.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif;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,pre,samp{font-family:ui-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:initial}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:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-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,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{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}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--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:#3b82f680;--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%}@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}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-right-2{right:-.5rem}.-right-4{right:-1rem}.-top-1{top:-.25rem}.bottom-1{bottom:.25rem}.left-1{left:.25rem}.left-2{left:.5rem}.left-3{left:.75rem}.right-0{right:0}.right-1{right:.25rem}.top-0{top:0}.top-1{top:.25rem}.top-16{top:4rem}.top-2{top:.5rem}.top-3{top:.75rem}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\[1000\]{z-index:1000}.order-first{order:-9999}.col-span-6{grid-column:span 6/span 6}.m-0{margin:0}.m-2{margin:.5rem}.m-4{margin:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-20{margin-top:5rem;margin-bottom:5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-8{margin-top:2rem;margin-bottom:2rem}.my-auto{margin-top:auto;margin-bottom:auto}.-ml-\[20px\]{margin-left:-20px}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.mr-2{margin-right:.5rem}.mr-8{margin-right:2rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-18px{height:18px}.h-2{height:.5rem}.h-20{height:5rem}.h-3{height:.75rem}.h-36{height:9rem}.h-4{height:1rem}.h-42px{height:42px}.h-6{height:1.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-\[100\%\]{height:100%}.h-\[100px\]{height:100px}.h-\[30px\]{height:30px}.h-\[32px\]{height:32px}.h-\[80px\]{height:80px}.h-\[fit-content\]{height:-moz-fit-content;height:fit-content}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-0{max-height:0}.max-h-60{max-height:15rem}.max-h-96{max-height:24rem}.max-h-\[300px\]{max-height:300px}.max-h-fit{max-height:-moz-fit-content;max-height:fit-content}.max-h-full{max-height:100%}.min-h-20{min-height:5rem}.min-h-72{min-height:18rem}.min-h-96{min-height:24rem}.min-h-fit{min-height:-moz-fit-content;min-height:fit-content}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-18px{width:18px}.w-2\/3{width:66.666667%}.w-20{width:5rem}.w-24{width:6rem}.w-26px{width:26px}.w-3{width:.75rem}.w-3\/4{width:75%}.w-36{width:9rem}.w-4{width:1rem}.w-40{width:10rem}.w-42px{width:42px}.w-48{width:12rem}.w-6{width:1.5rem}.w-60{width:15rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-\[10\%\]{width:10%}.w-\[100px\]{width:100px}.w-\[200px\]{width:200px}.w-\[30px\]{width:30px}.w-\[344px\]{width:344px}.w-\[40rem\]{width:40rem}.w-\[80px\]{width:80px}.w-\[fit-content\]{width:-moz-fit-content;width:fit-content}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\[120px\]{min-width:120px}.min-w-\[200px\]{min-width:200px}.min-w-full{min-width:100%}.min-w-navDropDown{min-width:25em}.max-w-72{max-width:18rem}.max-w-\[320px\]{max-width:320px}.max-w-\[408px\]{max-width:408px}.max-w-lg{max-width:32rem}.max-w-pageSectionMaxWidth{max-width:1500px}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-items-center{justify-items:center}.gap-1{gap:.25rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[4px\]{gap:4px}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-12{row-gap:3rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity))}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-scroll{overflow-x:scroll}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-x{border-left-width:1px;border-right-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-none{border-style:none}.border-\[\#00B9A8\]{--tw-border-opacity:1;border-color:rgb(0 185 168/var(--tw-border-opacity))}.border-\[\#DFE4EA\]{--tw-border-opacity:1;border-color:rgb(223 228 234/var(--tw-border-opacity))}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128/var(--tw-border-opacity))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.border-orange-500{--tw-border-opacity:1;border-color:rgb(249 115 22/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-red-600{--tw-border-opacity:1;border-color:rgb(220 38 38/var(--tw-border-opacity))}.border-slate-50{--tw-border-opacity:1;border-color:rgb(248 250 252/var(--tw-border-opacity))}.border-teal-500{--tw-border-opacity:1;border-color:rgb(20 184 166/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-b-blue-700{--tw-border-opacity:1;border-bottom-color:rgb(29 78 216/var(--tw-border-opacity))}.border-b-teal-700{--tw-border-opacity:1;border-bottom-color:rgb(15 118 110/var(--tw-border-opacity))}.bg-\[\#9ca3af\]{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.bg-\[\#DAF8E6\]{--tw-bg-opacity:1;background-color:rgb(218 248 230/var(--tw-bg-opacity))}.bg-\[\#DBEAFE\]{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.bg-blue-800{--tw-bg-opacity:1;background-color:rgb(30 64 175/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity))}.bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity))}.bg-teal-700{--tw-bg-opacity:1;background-color:rgb(15 118 110/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(250 204 21/var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-none{background-image:none}.from-cyan-700{--tw-gradient-from:#0e7490 var(--tw-gradient-from-position);--tw-gradient-to:#0e749000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-900{--tw-gradient-to:#1e3a8a var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-no-repeat{background-repeat:no-repeat}.fill-current{fill:currentColor}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[8px\]{padding-left:8px;padding-right:8px}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-\[4px\]{padding-top:4px;padding-bottom:4px}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-1{padding-left:.25rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace}.font-sans{font-family:ui-sans-serif}.font-serif{font-family:ui-serif}.text-11px{font-size:11px}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl,.text-4xl{font-size:2.25rem}.text-4xl{line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[18px\]{line-height:18px}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}.text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity))}.text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity))}.text-teal-700{--tw-text-opacity:1;color:rgb(15 118 110/var(--tw-text-opacity))}.text-teal-800{--tw-text-opacity:1;color:rgb(17 94 89/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-yellow-300{--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid #0000;outline-offset:2px}.outline{outline-style:solid}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[max-height\]{transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.delay-150{transition-delay:.15s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-2:hover{border-width:2px}.hover\:border-none:hover{border-style:none}.hover\:border-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.hover\:border-blue-700:hover{--tw-border-opacity:1;border-color:rgb(29 78 216/var(--tw-border-opacity))}.hover\:border-gray-400:hover{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.hover\:border-green-500:hover{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity))}.hover\:border-green-900:hover{--tw-border-opacity:1;border-color:rgb(20 83 45/var(--tw-border-opacity))}.hover\:border-red-700:hover{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.hover\:border-teal-500:hover{--tw-border-opacity:1;border-color:rgb(20 184 166/var(--tw-border-opacity))}.hover\:border-teal-600:hover{--tw-border-opacity:1;border-color:rgb(13 148 136/var(--tw-border-opacity))}.hover\:bg-\[\#FFEBEE\]:hover{--tw-bg-opacity:1;background-color:rgb(255 235 238/var(--tw-bg-opacity))}.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:bg-green-500:hover{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.hover\:bg-slate-300:hover{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.hover\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity))}.hover\:bg-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110/var(--tw-bg-opacity))}.hover\:bg-teal-800:hover{--tw-bg-opacity:1;background-color:rgb(17 94 89/var(--tw-bg-opacity))}.hover\:bg-none:hover{background-image:none}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.hover\:text-green-500:hover{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-inner:hover{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.group:hover .group-hover\:bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.group:hover .group-hover\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.group:hover .group-hover\:text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity))}@media not all and (min-width:1280px){.max-xl\:flex{display:flex}.max-xl\:hidden{display:none}.max-xl\:justify-end{justify-content:flex-end}.max-xl\:gap-1{gap:.25rem}.max-xl\:gap-10{gap:2.5rem}.max-xl\:px-2{padding-left:.5rem;padding-right:.5rem}.max-xl\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media not all and (min-width:1024px){.max-lg\:flex{display:flex}.max-lg\:w-full{width:100%}.max-lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.max-lg\:flex-col{flex-direction:column}.max-lg\:justify-between{justify-content:space-between}.max-lg\:justify-items-center{justify-items:center}.max-lg\:gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.max-lg\:gap-y-12{row-gap:3rem}.max-lg\:gap-y-24{row-gap:6rem}.max-lg\:text-xl{font-size:1.25rem;line-height:1.75rem}.max-lg\:transition-none{transition-property:none}.max-lg\:hover\:transform-none:hover{transform:none}}@media not all and (min-width:768px){.max-md\:flex{display:flex}.max-md\:hidden{display:none}.max-md\:gap-12{gap:3rem}.max-md\:p-0{padding:0}.max-md\:text-sm{font-size:.875rem;line-height:1.25rem}}@media not all and (min-width:640px){.max-sm\:mb-1{margin-bottom:.25rem}.max-sm\:mb-2{margin-bottom:.5rem}.max-sm\:flex{display:flex}.max-sm\:hidden{display:none}.max-sm\:w-1\/2{width:50%}.max-sm\:w-3\/4{width:75%}.max-sm\:w-\[90\%\]{width:90%}.max-sm\:w-full{width:100%}.max-sm\:flex-row{flex-direction:row}.max-sm\:flex-col{flex-direction:column}.max-sm\:items-end{align-items:flex-end}.max-sm\:justify-between{justify-content:space-between}.max-sm\:gap-8{gap:2rem}.max-sm\:p-2{padding:.5rem}.max-sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.max-sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.max-sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:640px){.sm\:static{position:static}.sm\:left-5{left:1.25rem}.sm\:top-5{top:1.25rem}.sm\:m-20{margin:5rem}.sm\:m-5{margin:1.25rem}.sm\:mb-0{margin-bottom:0}.sm\:mb-2{margin-bottom:.5rem}.sm\:mb-4{margin-bottom:1rem}.sm\:mb-5{margin-bottom:1.25rem}.sm\:ml-5{margin-left:1.25rem}.sm\:mt-0{margin-top:0}.sm\:mt-20{margin-top:5rem}.sm\:mt-4{margin-top:1rem}.sm\:mt-auto{margin-top:auto}.sm\:h-20{height:5rem}.sm\:h-64{height:16rem}.sm\:h-8{height:2rem}.sm\:h-\[100px\]{height:100px}.sm\:h-\[120px\]{height:120px}.sm\:h-\[255px\]{height:255px}.sm\:h-\[300px\]{height:300px}.sm\:h-\[350px\]{height:350px}.sm\:h-\[40px\]{height:40px}.sm\:h-\[500px\]{height:500px}.sm\:h-auto{height:auto}.sm\:w-24{width:6rem}.sm\:w-8{width:2rem}.sm\:w-\[100px\]{width:100px}.sm\:w-\[120px\]{width:120px}.sm\:w-\[244px\]{width:244px}.sm\:w-\[300px\]{width:300px}.sm\:w-auto{width:auto}.sm\:min-w-\[150px\]{min-width:150px}.sm\:max-w-\[408px\]{max-width:408px}.sm\:max-w-full{max-width:100%}.sm\:flex-row{flex-direction:row}.sm\:p-3{padding:.75rem}.sm\:p-4{padding:1rem}.sm\:p-6{padding:1.5rem}.sm\:px-3{padding-left:.75rem;padding-right:.75rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:px-\[14px\]{padding-left:14px;padding-right:14px}.sm\:py-2{padding-top:.5rem;padding-bottom:.5rem}.sm\:py-\[8px\]{padding-top:8px;padding-bottom:8px}.sm\:pb-5{padding-bottom:1.25rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:768px){.md\:p-8{padding:2rem}.md\:text-3xl{font-size:2.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:max-h-view-page{max-height:1000px}.lg\:gap-10{gap:2.5rem}.lg\:p-10{padding:2.5rem}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1536px){.\32xl\:flex{display:flex}}.rtl\:space-x-reverse:where([dir=rtl],[dir=rtl] *)>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.\[\&\:has\(\:focus-visible\)\]\:ring-2:has(:focus-visible){--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(2px + 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)}
|
package/package.json
CHANGED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
const BaseButton = ({ onClick, text, fontFamily, backgroundColor, customWidth, customHeight, shape, borderColor, icon, additionalClasses, type = "button", to, href, isDisabled = false, hasShadow, as: Element = "button", hoverBackground, hoverFontColor, hoverUnderline = false, hoverBorderColor, iconClasses, ...props }) => {
|
|
3
|
-
const baseBaseButtonClasses = "flex items-center justify-center";
|
|
4
|
-
const hoverClasses = !isDisabled
|
|
5
|
-
? `${hoverBackground} ${hoverFontColor} ${hoverUnderline ? "underline underline-offset-4" : ""} ${hoverBorderColor}`
|
|
6
|
-
: "";
|
|
7
|
-
const buttonColorClasses = `${backgroundColor} ${borderColor}`;
|
|
8
|
-
const cursorClasses = isDisabled
|
|
9
|
-
? "cursor-not-allowed opacity-50"
|
|
10
|
-
: "cursor-pointer";
|
|
11
|
-
const textStyleClasses = `${fontFamily}`;
|
|
12
|
-
const buttonShapeClasses = shape;
|
|
13
|
-
const buttonClasses = `
|
|
14
|
-
${baseBaseButtonClasses}
|
|
15
|
-
${buttonColorClasses}
|
|
16
|
-
${buttonShapeClasses}
|
|
17
|
-
${textStyleClasses}
|
|
18
|
-
${hoverClasses}
|
|
19
|
-
${cursorClasses}
|
|
20
|
-
${hasShadow ? "shadow-md" : ""}
|
|
21
|
-
${customWidth}
|
|
22
|
-
${customHeight}
|
|
23
|
-
${additionalClasses}
|
|
24
|
-
`.trim();
|
|
25
|
-
const handleClick = (e) => {
|
|
26
|
-
if (isDisabled) {
|
|
27
|
-
e.preventDefault();
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
onClick?.(e);
|
|
31
|
-
};
|
|
32
|
-
const baseProps = {
|
|
33
|
-
className: buttonClasses,
|
|
34
|
-
onClick: handleClick,
|
|
35
|
-
"aria-disabled": isDisabled ? "true" : "false",
|
|
36
|
-
};
|
|
37
|
-
let ElementProps = { ...baseProps };
|
|
38
|
-
if (Element === "a" && href) {
|
|
39
|
-
ElementProps = { ...baseProps, href };
|
|
40
|
-
}
|
|
41
|
-
else if (Element === "button") {
|
|
42
|
-
ElementProps = { ...baseProps, type };
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
45
|
-
ElementProps = { ...baseProps };
|
|
46
|
-
}
|
|
47
|
-
return (_jsxs(Element, { ...ElementProps, ...props, children: [icon && _jsx("span", { className: iconClasses, children: icon }), text] }));
|
|
48
|
-
};
|
|
49
|
-
export default BaseButton;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Meta } from "@storybook/react";
|
|
2
|
-
declare const _default: Meta;
|
|
3
|
-
export default _default;
|
|
4
|
-
export declare const Default: any;
|
|
5
|
-
export declare const Compass: any;
|
|
6
|
-
export declare const Disabled: any;
|
|
7
|
-
export declare const WithIcon: any;
|
|
8
|
-
export declare const IconOnly: any;
|
|
9
|
-
export declare const ClearCartButton: any;
|
|
10
|
-
export declare const RightIconButton: any;
|
|
11
|
-
export declare const ConfirmRequestButton: any;
|
|
12
|
-
export declare const FourButtonsRow: any;
|
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import BaseButton from "./BaseButton";
|
|
3
|
-
import Text from "../Text/Text";
|
|
4
|
-
import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
|
|
5
|
-
export default {
|
|
6
|
-
title: "Components/BaseButton",
|
|
7
|
-
component: BaseButton,
|
|
8
|
-
argTypes: {
|
|
9
|
-
onClick: {
|
|
10
|
-
table: {
|
|
11
|
-
disable: true,
|
|
12
|
-
},
|
|
13
|
-
control: "none",
|
|
14
|
-
},
|
|
15
|
-
text: {
|
|
16
|
-
control: "none",
|
|
17
|
-
description: "The main text displayed on the button.",
|
|
18
|
-
},
|
|
19
|
-
fontFamily: {
|
|
20
|
-
control: "none",
|
|
21
|
-
description: "The font family of the button text.",
|
|
22
|
-
},
|
|
23
|
-
backgroundColor: {
|
|
24
|
-
control: "none",
|
|
25
|
-
description: "The background color of the button. Use Tailwind CSS color classes.",
|
|
26
|
-
},
|
|
27
|
-
borderColor: {
|
|
28
|
-
control: "none",
|
|
29
|
-
description: "The color of the border of the button. Use Tailwind CSS border color classes.",
|
|
30
|
-
},
|
|
31
|
-
shape: {
|
|
32
|
-
control: "none",
|
|
33
|
-
description: "The shape of the button. Use Tailwind CSS border radius classes.",
|
|
34
|
-
},
|
|
35
|
-
hoverBackground: {
|
|
36
|
-
control: "none",
|
|
37
|
-
description: "The background color of the button on hover. Use Tailwind CSS color classes.",
|
|
38
|
-
},
|
|
39
|
-
hoverFontColor: {
|
|
40
|
-
control: "none",
|
|
41
|
-
description: "The text color of the button on hover. Use Tailwind CSS color classes.",
|
|
42
|
-
},
|
|
43
|
-
hoverUnderline: {
|
|
44
|
-
control: "none",
|
|
45
|
-
description: "Whether the text is underlined on hover.",
|
|
46
|
-
},
|
|
47
|
-
hoverBorderColor: {
|
|
48
|
-
control: "none",
|
|
49
|
-
description: "The border color of the button on hover. Use Tailwind CSS border color classes.",
|
|
50
|
-
},
|
|
51
|
-
isDisabled: {
|
|
52
|
-
control: "none",
|
|
53
|
-
description: "Whether the button is disabled and cannot be clicked.",
|
|
54
|
-
},
|
|
55
|
-
hasShadow: {
|
|
56
|
-
control: "none",
|
|
57
|
-
description: "Tailwind CSS class to add a shadow to the button.",
|
|
58
|
-
},
|
|
59
|
-
customWidth: {
|
|
60
|
-
control: "none",
|
|
61
|
-
description: "Custom width for the button. Can be a Tailwind CSS class.",
|
|
62
|
-
},
|
|
63
|
-
customHeight: {
|
|
64
|
-
control: "none",
|
|
65
|
-
description: "Custom height for the button. Can be a Tailwind CSS class.",
|
|
66
|
-
},
|
|
67
|
-
additionalClasses: {
|
|
68
|
-
control: "none",
|
|
69
|
-
description: "Additional Tailwind CSS classes to apply to the button.",
|
|
70
|
-
},
|
|
71
|
-
icon: {
|
|
72
|
-
control: "none",
|
|
73
|
-
description: "An optional icon element to display inside the button.",
|
|
74
|
-
},
|
|
75
|
-
iconClasses: {
|
|
76
|
-
control: "none",
|
|
77
|
-
description: "Classes for styling the icon inside the button.",
|
|
78
|
-
},
|
|
79
|
-
as: {
|
|
80
|
-
control: "none",
|
|
81
|
-
description: "Defines the type of element to render, such as a 'button', 'a', or a React Router 'Link'.",
|
|
82
|
-
},
|
|
83
|
-
href: {
|
|
84
|
-
control: "none",
|
|
85
|
-
description: "If 'as' is 'a', this specifies the 'href' for an anchor element.",
|
|
86
|
-
},
|
|
87
|
-
to: {
|
|
88
|
-
control: "none",
|
|
89
|
-
description: "If 'as' is 'Link', this specifies the 'to' prop for React Router 'Link'.",
|
|
90
|
-
},
|
|
91
|
-
},
|
|
92
|
-
tags: ["autodocs"],
|
|
93
|
-
parameters: {
|
|
94
|
-
docs: {
|
|
95
|
-
description: {
|
|
96
|
-
component: "The `BaseButton` component is a versatile button component that supports different types of elements like `button`, `a`, and `Link` from React Router. It's highly customizable with Tailwind CSS classes.",
|
|
97
|
-
},
|
|
98
|
-
},
|
|
99
|
-
layout: "centered",
|
|
100
|
-
},
|
|
101
|
-
};
|
|
102
|
-
const Template = (args) => _jsx(BaseButton, { ...args });
|
|
103
|
-
export const Default = Template.bind({});
|
|
104
|
-
Default.args = {
|
|
105
|
-
text: "Default Button",
|
|
106
|
-
backgroundColor: "bg-blue-600",
|
|
107
|
-
fontFamily: "font-sans",
|
|
108
|
-
borderColor: "border-none",
|
|
109
|
-
shape: "rounded-md",
|
|
110
|
-
hoverBackground: "hover:bg-blue-700",
|
|
111
|
-
hoverFontColor: "hover:text-black",
|
|
112
|
-
onClick: () => alert("Button clicked!"),
|
|
113
|
-
additionalClasses: "p-2",
|
|
114
|
-
};
|
|
115
|
-
export const Compass = Template.bind({});
|
|
116
|
-
Compass.args = {
|
|
117
|
-
text: _jsx(Text, { size: "", color: "", text: "Compass Button", fontFamily: "" }),
|
|
118
|
-
backgroundColor: "bg-green-400",
|
|
119
|
-
fontFamily: "font-sans",
|
|
120
|
-
shape: "rounded-md",
|
|
121
|
-
borderColor: "border-none",
|
|
122
|
-
hoverBackground: "hover:bg-green-700",
|
|
123
|
-
hoverFontColor: "hover:text-white",
|
|
124
|
-
hoverBorderColor: "hover:border-green-900",
|
|
125
|
-
hoverUnderline: false,
|
|
126
|
-
onClick: () => alert("Button clicked!"),
|
|
127
|
-
as: "a",
|
|
128
|
-
href: "#",
|
|
129
|
-
additionalClasses: "p-2",
|
|
130
|
-
};
|
|
131
|
-
export const Disabled = Template.bind({});
|
|
132
|
-
Disabled.args = {
|
|
133
|
-
...Default.args,
|
|
134
|
-
text: _jsx(Text, { size: "", color: "", text: "Disabled Button", fontFamily: "" }),
|
|
135
|
-
isDisabled: true,
|
|
136
|
-
};
|
|
137
|
-
export const WithIcon = Template.bind({});
|
|
138
|
-
WithIcon.args = {
|
|
139
|
-
...Default.args,
|
|
140
|
-
text: (_jsx(Text, { size: "", color: "", text: "Button with icon", fontFamily: "", additionalClasses: "pl-2" })),
|
|
141
|
-
icon: getFontAwesomeIcon("coffee"),
|
|
142
|
-
shape: "rounded-none",
|
|
143
|
-
hoverUnderline: false,
|
|
144
|
-
onClick: () => alert("Button clicked!"),
|
|
145
|
-
iconClasses: "pl-2",
|
|
146
|
-
};
|
|
147
|
-
export const IconOnly = Template.bind({});
|
|
148
|
-
IconOnly.args = {
|
|
149
|
-
fontFamily: "font-sans",
|
|
150
|
-
shape: "rounded",
|
|
151
|
-
hoverBackground: "hover:bg-gray-100",
|
|
152
|
-
hoverUnderline: false,
|
|
153
|
-
icon: getFontAwesomeIcon("trash"),
|
|
154
|
-
additionalClasses: "flex justify-center items-center px-4 py-3 bg-gray-50",
|
|
155
|
-
onClick: () => alert("Icon button clicked!"),
|
|
156
|
-
};
|
|
157
|
-
export const ClearCartButton = Template.bind({});
|
|
158
|
-
ClearCartButton.args = {
|
|
159
|
-
text: _jsx(Text, { size: "", color: "", text: "Clear Cart", fontFamily: "" }),
|
|
160
|
-
fontFamily: "font-sans",
|
|
161
|
-
shape: "rounded-md",
|
|
162
|
-
hoverBackground: "hover:bg-gray-100",
|
|
163
|
-
hoverFontColor: "hover:text-black",
|
|
164
|
-
hoverBorderColor: "hover:border-red-700",
|
|
165
|
-
hoverUnderline: false,
|
|
166
|
-
icon: getFontAwesomeIcon("trash"),
|
|
167
|
-
iconClasses: "order-first",
|
|
168
|
-
additionalClasses: "px-5 py-6 bg-gray-50 border-red-500 gap-2",
|
|
169
|
-
onClick: () => alert("Cart Cleared!"),
|
|
170
|
-
};
|
|
171
|
-
export const RightIconButton = Template.bind({});
|
|
172
|
-
RightIconButton.args = {
|
|
173
|
-
text: _jsx(Text, { size: "", color: "text-white", text: "Next", fontFamily: "" }),
|
|
174
|
-
backgroundColor: "bg-gray-500",
|
|
175
|
-
shape: "rounded-md",
|
|
176
|
-
hoverBackground: "hover:bg-gray-700",
|
|
177
|
-
hoverFontColor: "hover:text-white",
|
|
178
|
-
hoverBorderColor: "hover:border-blue-700",
|
|
179
|
-
hoverUnderline: false,
|
|
180
|
-
icon: getFontAwesomeIcon("arrowRight"),
|
|
181
|
-
additionalClasses: "px-6 py-3 flex-row-reverse",
|
|
182
|
-
iconClasses: "ml-2 text-white",
|
|
183
|
-
onClick: () => alert("Next clicked!"),
|
|
184
|
-
};
|
|
185
|
-
export const ConfirmRequestButton = Template.bind({});
|
|
186
|
-
ConfirmRequestButton.args = {
|
|
187
|
-
text: _jsx(Text, { size: "", color: "", text: "CONFIRM REQUEST", fontFamily: "" }),
|
|
188
|
-
backgroundColor: "bg-[#9ca3af]",
|
|
189
|
-
fontFamily: "font-sans",
|
|
190
|
-
borderColor: "border-none",
|
|
191
|
-
shape: "rounded-md",
|
|
192
|
-
hoverUnderline: false,
|
|
193
|
-
isDisabled: true,
|
|
194
|
-
additionalClasses: "py-3 px-6",
|
|
195
|
-
};
|
|
196
|
-
export const FourButtonsRow = Template.bind({});
|
|
197
|
-
FourButtonsRow.args = {};
|
|
198
|
-
FourButtonsRow.decorators = [
|
|
199
|
-
(Story) => (_jsxs("div", { className: "flex divide-x divide-gray-200 rounded-md overflow-hidden border border-gray-200", children: [_jsx(BaseButton, { text: "All", backgroundColor: "bg-teal-600", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverUnderline: false, additionalClasses: "py-2 px-4 text-white", onClick: () => alert("All clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("boxes", "mr-2"), "Bundles"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Bundles clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("clipboard", "mr-2"), "Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Categories clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("plus", "mr-2"), "Custom Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Custom Categories clicked!") })] })),
|
|
200
|
-
];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { render, screen, fireEvent } from "@testing-library/react";
|
|
3
|
-
import { describe, expect, test, vi } from "vitest";
|
|
4
|
-
import Button from "./BaseButton";
|
|
5
|
-
import { MemoryRouter } from "react-router-dom";
|
|
6
|
-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
7
|
-
import { faCheck } from "@fortawesome/free-solid-svg-icons";
|
|
8
|
-
describe("Button", () => {
|
|
9
|
-
test("renders correctly", () => {
|
|
10
|
-
render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Default Button", backgroundColor: "green", shape: "outline" }) }));
|
|
11
|
-
expect(screen.getByText("Default Button")).toBeInTheDocument();
|
|
12
|
-
});
|
|
13
|
-
test("is clickable", () => {
|
|
14
|
-
const mockOnClick = vi.fn();
|
|
15
|
-
render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Clickable Button", backgroundColor: "green", shape: "outline", onClick: mockOnClick }) }));
|
|
16
|
-
fireEvent.click(screen.getByText("Clickable Button"));
|
|
17
|
-
expect(mockOnClick).toHaveBeenCalled();
|
|
18
|
-
});
|
|
19
|
-
test("has correct text", () => {
|
|
20
|
-
render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Default Button", backgroundColor: "green", shape: "outline" }) }));
|
|
21
|
-
expect(screen.getByText("Default Button")).toHaveTextContent("Default Button");
|
|
22
|
-
});
|
|
23
|
-
test("renders the button with an icon", () => {
|
|
24
|
-
render(_jsx(Button, { text: "Search Button", icon: _jsx(FontAwesomeIcon, { icon: faCheck }) }));
|
|
25
|
-
const buttonElement = screen.getByText("Search Button");
|
|
26
|
-
expect(buttonElement).toHaveTextContent("Search Button");
|
|
27
|
-
const iconElement = screen.getByRole("img", { hidden: true }); // Search for <svg> with role="img"
|
|
28
|
-
expect(iconElement).toBeInTheDocument();
|
|
29
|
-
});
|
|
30
|
-
});
|
|
31
|
-
describe("Disabled Button", () => {
|
|
32
|
-
test("is disabled", () => {
|
|
33
|
-
render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Disabled Button", backgroundColor: "green", shape: "outline", isDisabled: true }) }));
|
|
34
|
-
expect(screen.getByText("Disabled Button")).toHaveAttribute("aria-disabled", "true");
|
|
35
|
-
});
|
|
36
|
-
test("handleClick is not triggered when button is disabled", () => {
|
|
37
|
-
const mockOnClick = vi.fn();
|
|
38
|
-
render(_jsx(MemoryRouter, { children: _jsx(Button, { text: "Disabled Button", backgroundColor: "blue", isDisabled: true, onClick: mockOnClick }) }));
|
|
39
|
-
const button = screen.getByText("Disabled Button");
|
|
40
|
-
fireEvent.click(button);
|
|
41
|
-
expect(mockOnClick).not.toHaveBeenCalled();
|
|
42
|
-
});
|
|
43
|
-
});
|
|
44
|
-
describe("Anchor Button", () => {
|
|
45
|
-
test("renders as an anchor tag with correct attributes when Element='a'", () => {
|
|
46
|
-
render(_jsx(Button, { text: "Anchor Button", as: "a", href: "/test-link" }));
|
|
47
|
-
const anchorElement = screen.getByText("Anchor Button");
|
|
48
|
-
expect(anchorElement.tagName).toBe("A");
|
|
49
|
-
expect(anchorElement).toHaveAttribute("href", "/test-link");
|
|
50
|
-
});
|
|
51
|
-
test("renders as an anchor tag without href attribute", () => {
|
|
52
|
-
render(_jsx(Button, { text: "Anchor Button", as: "a" }));
|
|
53
|
-
const anchorElement = screen.getByText("Anchor Button");
|
|
54
|
-
expect(anchorElement.tagName).toBe("A");
|
|
55
|
-
expect(anchorElement).not.toHaveAttribute("href", "/test-link");
|
|
56
|
-
});
|
|
57
|
-
});
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React, { ElementType } from "react";
|
|
2
|
-
export interface BaseButtonProps {
|
|
3
|
-
onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
4
|
-
text?: string | JSX.Element;
|
|
5
|
-
fontFamily?: string;
|
|
6
|
-
backgroundColor?: string;
|
|
7
|
-
borderColor?: string;
|
|
8
|
-
customWidth?: string;
|
|
9
|
-
customHeight?: string;
|
|
10
|
-
shape?: string;
|
|
11
|
-
icon?: JSX.Element | null;
|
|
12
|
-
additionalClasses?: string;
|
|
13
|
-
type?: "button" | "submit" | "reset";
|
|
14
|
-
to?: string;
|
|
15
|
-
href?: string;
|
|
16
|
-
isDisabled?: boolean;
|
|
17
|
-
hasShadow?: string;
|
|
18
|
-
as?: ElementType | string;
|
|
19
|
-
hoverBackground?: string;
|
|
20
|
-
hoverFontColor?: string;
|
|
21
|
-
hoverUnderline?: boolean;
|
|
22
|
-
hoverBorderColor?: string;
|
|
23
|
-
iconClasses?: string;
|
|
24
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
const ImageContainer = (props) => {
|
|
3
|
-
const { imageUrl, backgroundColor, borderRadius, size, alternativeText, userInitials, additionalClasses, style, imageClasses, } = props;
|
|
4
|
-
return (_jsx("div", { style: style, className: `${borderRadius} ${backgroundColor} ${size} flex items-center justify-center overflow-hidden ${additionalClasses}`, children: imageUrl ? (_jsx("img", { src: imageUrl, alt: alternativeText, className: `${imageClasses}` })) : (_jsx("p", { className: `text-xs text-white w-full h-full flex justify-center items-center `, children: userInitials || "N/A" })) }));
|
|
5
|
-
};
|
|
6
|
-
export default ImageContainer;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Meta } from "@storybook/react";
|
|
2
|
-
declare const _default: Meta;
|
|
3
|
-
export default _default;
|
|
4
|
-
export declare const Default: any;
|
|
5
|
-
export declare const ProfileIcon: any;
|
|
6
|
-
export declare const WithoutImage: any;
|
|
7
|
-
export declare const WithInlineBackgroundColor: any;
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import ImageContainer from "./ImageContainer";
|
|
3
|
-
export default {
|
|
4
|
-
title: "Components/ImageContainer",
|
|
5
|
-
component: ImageContainer,
|
|
6
|
-
tags: ["autodocs"],
|
|
7
|
-
parameters: {
|
|
8
|
-
layout: "centered",
|
|
9
|
-
},
|
|
10
|
-
argTypes: {
|
|
11
|
-
imageUrl: {
|
|
12
|
-
control: "none",
|
|
13
|
-
description: "Image url of the image.",
|
|
14
|
-
},
|
|
15
|
-
backgroundColor: {
|
|
16
|
-
control: "none",
|
|
17
|
-
description: "Background color if the image is not present.",
|
|
18
|
-
},
|
|
19
|
-
borderRadius: {
|
|
20
|
-
control: "none",
|
|
21
|
-
description: "Styles for the content.",
|
|
22
|
-
},
|
|
23
|
-
size: {
|
|
24
|
-
control: "none",
|
|
25
|
-
description: "Size of the container.",
|
|
26
|
-
},
|
|
27
|
-
profileIcon: {
|
|
28
|
-
control: "none",
|
|
29
|
-
description: "Profile icon image.",
|
|
30
|
-
},
|
|
31
|
-
alternativeText: {
|
|
32
|
-
control: "none",
|
|
33
|
-
description: "Alternative text for the image.",
|
|
34
|
-
},
|
|
35
|
-
userInitials: {
|
|
36
|
-
control: "none",
|
|
37
|
-
description: "User initials if there is no image.",
|
|
38
|
-
},
|
|
39
|
-
additionalClasses: {
|
|
40
|
-
control: "none",
|
|
41
|
-
description: "Additional styling classes of the image container.",
|
|
42
|
-
},
|
|
43
|
-
tyle: {
|
|
44
|
-
control: {
|
|
45
|
-
type: "object", // Text input control
|
|
46
|
-
},
|
|
47
|
-
description: "Inline CSS styles to be added.",
|
|
48
|
-
defaultValue: "",
|
|
49
|
-
},
|
|
50
|
-
imageClasses: {
|
|
51
|
-
control: "none",
|
|
52
|
-
description: "Additional styling classes of the image.",
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
};
|
|
56
|
-
const Template = (args) => (_jsx(ImageContainer, { ...args }));
|
|
57
|
-
export const Default = Template.bind({});
|
|
58
|
-
Default.args = {
|
|
59
|
-
imageUrl: "data:image/jpeg;base64,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",
|
|
60
|
-
borderRadius: "rounded-md",
|
|
61
|
-
size: "size-80",
|
|
62
|
-
alternativeText: "image",
|
|
63
|
-
};
|
|
64
|
-
export const ProfileIcon = Template.bind({});
|
|
65
|
-
ProfileIcon.args = {
|
|
66
|
-
imageUrl: "https://img.freepik.com/premium-vector/avatar-profile-icon-flat-style-female-user-profile-vector-illustration-isolated-background-women-profile-sign-business-concept_157943-38866.jpg",
|
|
67
|
-
borderRadius: "rounded-full",
|
|
68
|
-
size: "h-[75px] w-[75px]",
|
|
69
|
-
alternativeText: "profile image",
|
|
70
|
-
};
|
|
71
|
-
export const WithoutImage = Template.bind({});
|
|
72
|
-
WithoutImage.args = {
|
|
73
|
-
imageUrl: "",
|
|
74
|
-
borderRadius: "rounded-full",
|
|
75
|
-
size: "h-14 w-14",
|
|
76
|
-
alternativeText: "",
|
|
77
|
-
userInitials: "AS",
|
|
78
|
-
backgroundColor: "bg-gray-500",
|
|
79
|
-
};
|
|
80
|
-
export const WithInlineBackgroundColor = Template.bind({});
|
|
81
|
-
WithInlineBackgroundColor.args = {
|
|
82
|
-
imageUrl: "",
|
|
83
|
-
borderRadius: "rounded-full",
|
|
84
|
-
size: "h-14 w-14",
|
|
85
|
-
alternativeText: "",
|
|
86
|
-
userInitials: "AS",
|
|
87
|
-
style: { backgroundColor: "hsl(354,94%,74%)" },
|
|
88
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { describe, it, expect, test } from "vitest";
|
|
3
|
-
import { render, screen } from "@testing-library/react";
|
|
4
|
-
import ImageContainer from "./ImageContainer";
|
|
5
|
-
describe("ImageContainer Component", () => {
|
|
6
|
-
const testUrl = "https://via.placeholder.com/150";
|
|
7
|
-
it("renders an image when a valid imageUrl is provided", () => {
|
|
8
|
-
const { getByAltText } = render(_jsx(ImageContainer, { imageUrl: testUrl, borderRadius: "rounded-md", size: "size-80", alternativeText: "image" }));
|
|
9
|
-
const image = getByAltText("image");
|
|
10
|
-
expect(image).toBeInTheDocument();
|
|
11
|
-
expect(image).toHaveAttribute("src", testUrl);
|
|
12
|
-
});
|
|
13
|
-
it("renders fallback text when no imageUrl is provided", () => {
|
|
14
|
-
const { getByText } = render(_jsx(ImageContainer, { imageUrl: "", userInitials: "AB" }));
|
|
15
|
-
const userInitials = getByText("AB");
|
|
16
|
-
expect(userInitials).toBeInTheDocument();
|
|
17
|
-
});
|
|
18
|
-
it("applies rounded-full class when borderRadius is rounded-full", () => {
|
|
19
|
-
const { container, getByAltText } = render(_jsx(ImageContainer, { imageUrl: testUrl, alternativeText: "Profile icon", borderRadius: "rounded-full" }));
|
|
20
|
-
const imageElement = container.querySelector("div");
|
|
21
|
-
expect(imageElement).toHaveClass("rounded-full");
|
|
22
|
-
});
|
|
23
|
-
});
|
|
24
|
-
describe("ImageContainer - inline styles ", () => {
|
|
25
|
-
test("applies inline style BackgroundColor style when provided", () => {
|
|
26
|
-
const inlineBackgroundColor = "rgb(255, 0, 0)";
|
|
27
|
-
render(_jsx(ImageContainer, { imageUrl: "", style: { backgroundColor: inlineBackgroundColor }, borderRadius: "rounded-full", size: "w-10 h-10", userInitials: "AB", additionalClasses: "shadow-md" }));
|
|
28
|
-
const container = screen.getByText("AB").parentElement;
|
|
29
|
-
expect(container).toHaveStyle(`background-color: ${inlineBackgroundColor}`);
|
|
30
|
-
});
|
|
31
|
-
test("does not apply inline style when inlineBackgroundColor is not provided but applies backgroundColor prop", () => {
|
|
32
|
-
const backgroundColor = "bg-blue-500";
|
|
33
|
-
render(_jsx(ImageContainer, { imageUrl: "", backgroundColor: backgroundColor, borderRadius: "rounded-full", size: "w-10 h-10", userInitials: "AB", additionalClasses: "shadow-md" }));
|
|
34
|
-
const container = screen.getByText("AB").parentElement;
|
|
35
|
-
expect(container).not.toHaveStyle(`background-color: ${backgroundColor}`);
|
|
36
|
-
});
|
|
37
|
-
});
|
|
38
|
-
describe("ImageContainer - userInitials", () => {
|
|
39
|
-
test("renders userInitials when imageUrl is not provided", () => {
|
|
40
|
-
render(_jsx(ImageContainer, { imageUrl: "", userInitials: "AB", borderRadius: "rounded-full", size: "w-10 h-10", backgroundColor: "bg-blue-500" }));
|
|
41
|
-
// Assert that user initials are displayed
|
|
42
|
-
const initials = screen.getByText("AB");
|
|
43
|
-
expect(initials).toBeInTheDocument();
|
|
44
|
-
expect(initials).toHaveTextContent("AB");
|
|
45
|
-
});
|
|
46
|
-
test("renders default fallback text when userInitials is not provided", () => {
|
|
47
|
-
render(_jsx(ImageContainer, { imageUrl: "", userInitials: "", borderRadius: "rounded-full", size: "w-10 h-10", backgroundColor: "bg-blue-500" }));
|
|
48
|
-
// Assert that default fallback text is displayed
|
|
49
|
-
const fallbackText = screen.getByText("N/A");
|
|
50
|
-
expect(fallbackText).toBeInTheDocument();
|
|
51
|
-
expect(fallbackText).toHaveTextContent("N/A");
|
|
52
|
-
});
|
|
53
|
-
test("does not render userInitials when imageUrl is provided", () => {
|
|
54
|
-
render(_jsx(ImageContainer, { imageUrl: "https://via.placeholder.com/150", userInitials: "AB", borderRadius: "rounded-full", size: "w-10 h-10", backgroundColor: "bg-blue-500" }));
|
|
55
|
-
// Assert that user initials are not displayed
|
|
56
|
-
const initials = screen.queryByText("AB");
|
|
57
|
-
expect(initials).not.toBeInTheDocument();
|
|
58
|
-
// Assert that the image is displayed instead
|
|
59
|
-
const image = screen.getByRole("img");
|
|
60
|
-
expect(image).toBeInTheDocument();
|
|
61
|
-
expect(image).toHaveAttribute("src", "https://via.placeholder.com/150");
|
|
62
|
-
});
|
|
63
|
-
});
|