diff --git a/package.json b/package.json index 11e0b397..a10f1ca7 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "file-loader": "^6.2.0", "identity-obj-proxy": "^3.0.0", "jest": "^26.6.3", + "jest-styled-components": "^7.0.4", "prettier": "^2.1.0", "react": "^16.13.0", "react-docgen-typescript-loader": "^3.7.2", diff --git a/tests/__snapshots__/storybook.test.js.snap b/tests/__snapshots__/storybook.test.js.snap index b28680a4..a0540eb5 100644 --- a/tests/__snapshots__/storybook.test.js.snap +++ b/tests/__snapshots__/storybook.test.js.snap @@ -1,6 +1,95 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` +.c0.MuiAccordion-root { + border-radius: 8px; + border: 2px solid #E8E7E6; + border-bottom: 2px solid #E8E7E6; + margin-bottom: 16px; + overflow: hidden; +} + +.c0.MuiAccordion-root:before { + height: 0; +} + +.c0.MuiAccordion-root:first-child { + border-top: 2px solid #E8E7E6; +} + +.c0.MuiAccordion-root.Mui-expanded { + margin: 0 0 16px 0; +} + +.c0.MuiAccordion-root .MuiAccordionDetails-root { + padding: 16px; +} + +.c1.MuiAccordionSummary-root.Mui-expanded { + min-height: 48px; + border-bottom: 2px solid #E8E7E6; + background-color: #F7F5F5; +} + +.c1.MuiAccordionSummary-root:hover { + background-color: #F7F5F5; +} + +.c1.MuiAccordionSummary-root .MuiAccordionSummary-content.Mui-expanded { + margin: 0; +} + +.c1.MuiAccordionSummary-root .MuiIconButton-root { + font-size: 0; + padding: 16px; +} + +.c3 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c3 .icon-color { + fill: #B2B5B2; +} + +.c4 { + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + color: #001428; + margin: 0; + font-weight: normal; + font-size: 16px; + line-height: 22px; + text-align: start; +} + +.c5 { + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + color: #001428; + margin: 0; + font-weight: normal; + font-size: 14px; + line-height: 20px; + text-align: start; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 svg { + margin: 0 6px 0 0; +} +

Transaction 1 @@ -131,7 +220,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -143,12 +232,12 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `

Transaction 2 @@ -261,7 +350,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -273,12 +362,12 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `

Transaction 3 @@ -391,7 +480,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -406,16 +495,113 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` `; exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` +.c0 { + box-shadow: 1px 2px 10px 0 rgba(40,54,61,0.18); + border-radius: 8px; + padding: 24px; + background-color: #ffffff; + position: relative; +} + +.c1.MuiAccordion-root { + border-radius: 0; + border: none; + border-bottom: 2px solid #E8E7E6; + margin-bottom: 0; + overflow: hidden; +} + +.c1.MuiAccordion-root:before { + height: 0; +} + +.c1.MuiAccordion-root:first-child { + border-top: 2px solid #E8E7E6; +} + +.c1.MuiAccordion-root.Mui-expanded { + margin: 0; +} + +.c1.MuiAccordion-root .MuiAccordionDetails-root { + padding: 16px; +} + +.c2.MuiAccordionSummary-root.Mui-expanded { + min-height: 48px; + border-bottom: 2px solid #E8E7E6; + background-color: #F7F5F5; +} + +.c2.MuiAccordionSummary-root:hover { + background-color: #F7F5F5; +} + +.c2.MuiAccordionSummary-root .MuiAccordionSummary-content.Mui-expanded { + margin: 0; +} + +.c2.MuiAccordionSummary-root .MuiIconButton-root { + font-size: 0; + padding: 16px; +} + +.c4 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c4 .icon-color { + fill: #B2B5B2; +} + +.c5 { + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + color: #001428; + margin: 0; + font-weight: normal; + font-size: 16px; + line-height: 22px; + text-align: start; +} + +.c6 { + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + color: #001428; + margin: 0; + font-weight: normal; + font-size: 14px; + line-height: 20px; + text-align: start; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c3 svg { + margin: 0 6px 0 0; +} +

Transaction 1 @@ -528,7 +714,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -540,12 +726,12 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `

Transaction 2 @@ -658,7 +844,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -670,12 +856,12 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `

Transaction 3 @@ -788,7 +974,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -803,18 +989,150 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` `; exports[`Storyshots Data Display/Card Card Disabled 1`] = ` +.c0 { + box-shadow: 1px 2px 10px 0 rgba(40,54,61,0.18); + border-radius: 8px; + padding: 24px; + background-color: #ffffff; + position: relative; +} + +.c1 { + opacity: 0.5; + position: absolute; + height: 100%; + width: 100%; + background-color: #ffffff; + z-index: 1; + top: 0; + left: 0; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + border-radius: 50%; + height: 36px; + width: 36px; + background-color: #008C73; +} + +.c6 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c6 .icon-color { + fill: #B2B5B2; +} + +.c3 { + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + color: #ffffff; + margin: 0; + font-weight: normal; + font-size: 16px; + line-height: 22px; + text-align: start; +} + +.c8 { + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + color: #001428; + margin: 0; + font-weight: normal; + font-size: 16px; + line-height: 22px; + text-align: start; +} + +.c4 { + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 20px; + line-height: 26px; + font-weight: normal; + margin: 18px 0; +} + +.c7 { + margin-right: 5px; +} + +.c5.c5 { + height: 52px; + color: #001428; + background-color: transparent; + border: 2px solid #001428; +} + +.c5.c5.MuiButton-root { + min-width: 240px; + padding: 0 48px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c5.c5.Mui-disabled { + color: #ffffff; +} + +.c5.c5 path.icon-color { + fill: #ffffff; +} + +.c5.c5:disabled { + opacity: 0.5; +} + +.c5.c5 path.icon-color { + fill: #001428; +} + +.c5.c5.Mui-disabled { + color: #001428; +} + +.c5.c5:hover { + color: #ffffff; + background-color: #5D6D74; + border: 2px solid #5D6D74; +} + +.c5.c5:hover path.icon-color { + fill: #ffffff; +} +

@@ -822,12 +1140,12 @@ exports[`Storyshots Data Display/Card Card Disabled 1`] = `

Some text

  • Owner 1

    @@ -6224,17 +8254,71 @@ exports[`Storyshots Ethereum/Eth hash Info With Name 1`] = ` `; exports[`Storyshots Ethereum/Eth hash Info With Short Address 1`] = ` +.c3 { + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + color: #001428; + margin: 0; + font-weight: normal; + font-size: 14px; + line-height: 20px; + text-align: start; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c2 *:not(:first-child) { + margin-left: 8px; +} +

    , -
    , -
    , -
    ,
    , -
    , @@ -6509,11 +8693,434 @@ Array [ `; exports[`Storyshots Inputs/Button Disabled Button 1`] = ` +.c1.c1 { + height: 36px; + color: #ffffff; + background-color: #008C73; + box-shadow: 1px 2px 10px rgba(40,54,61,0.18); +} + +.c1.c1.MuiButton-root { + min-width: 130px; + padding: 0 24px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c1.c1.Mui-disabled { + color: #ffffff; +} + +.c1.c1 path.icon-color { + fill: #ffffff; +} + +.c1.c1:disabled { + opacity: 0.5; +} + +.c1.c1:hover { + background-color: #005546; +} + +.c2.c2 { + height: 36px; + color: #ffffff; + background-color: #001428; + box-shadow: 1px 2px 10px rgba(40,54,61,0.18); +} + +.c2.c2.MuiButton-root { + min-width: 130px; + padding: 0 24px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c2.c2.Mui-disabled { + color: #ffffff; +} + +.c2.c2 path.icon-color { + fill: #ffffff; +} + +.c2.c2:disabled { + opacity: 0.5; +} + +.c2.c2 path.icon-color { + color: #ffffff; +} + +.c2.c2:hover { + background-color: #5D6D74; +} + +.c2.c2:hover path.icon-color { + color: #ffffff; +} + +.c3.c3 { + height: 36px; + color: #ffffff; + background-color: #DB3A3D; + box-shadow: 1px 2px 10px rgba(40,54,61,0.18); +} + +.c3.c3.MuiButton-root { + min-width: 130px; + padding: 0 24px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c3.c3.Mui-disabled { + color: #ffffff; +} + +.c3.c3 path.icon-color { + fill: #ffffff; +} + +.c3.c3:disabled { + opacity: 0.5; +} + +.c3.c3:hover { + background-color: #C31717; +} + +.c4.c4 { + height: 36px; + color: #008C73; + background-color: transparent; +} + +.c4.c4.MuiButton-root { + min-width: 130px; + padding: 0 24px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c4.c4.Mui-disabled { + color: #ffffff; +} + +.c4.c4 path.icon-color { + fill: #ffffff; +} + +.c4.c4:disabled { + opacity: 0.5; +} + +.c4.c4 path.icon-color { + fill: #008C73; +} + +.c4.c4.Mui-disabled { + color: #008C73; +} + +.c4.c4:hover { + color: #005546; + background-color: #F7F5F5; +} + +.c4.c4:hover path.icon-color { + fill: #005546; +} + +.c5.c5 { + height: 36px; + color: #001428; + background-color: transparent; +} + +.c5.c5.MuiButton-root { + min-width: 130px; + padding: 0 24px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c5.c5.Mui-disabled { + color: #ffffff; +} + +.c5.c5 path.icon-color { + fill: #ffffff; +} + +.c5.c5:disabled { + opacity: 0.5; +} + +.c5.c5 path.icon-color { + fill: #001428; +} + +.c5.c5.Mui-disabled { + color: #001428; +} + +.c5.c5:hover { + color: #5D6D74; + background-color: #F7F5F5; +} + +.c5.c5:hover path.icon-color { + fill: #5D6D74; +} + +.c6.c6 { + height: 36px; + color: #DB3A3D; + background-color: transparent; +} + +.c6.c6.MuiButton-root { + min-width: 130px; + padding: 0 24px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c6.c6.Mui-disabled { + color: #ffffff; +} + +.c6.c6 path.icon-color { + fill: #ffffff; +} + +.c6.c6:disabled { + opacity: 0.5; +} + +.c6.c6 path.icon-color { + fill: #DB3A3D; +} + +.c6.c6.Mui-disabled { + color: #DB3A3D; +} + +.c6.c6:hover { + color: #C31717; + background-color: #F7F5F5; +} + +.c6.c6:hover path.icon-color { + fill: #C31717; +} + +.c7.c7 { + height: 36px; + color: #008C73; + background-color: transparent; + border: 2px solid #008C73; +} + +.c7.c7.MuiButton-root { + min-width: 130px; + padding: 0 24px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c7.c7.Mui-disabled { + color: #ffffff; +} + +.c7.c7 path.icon-color { + fill: #ffffff; +} + +.c7.c7:disabled { + opacity: 0.5; +} + +.c7.c7 path.icon-color { + fill: #008C73; +} + +.c7.c7.Mui-disabled { + color: #008C73; +} + +.c7.c7:hover { + color: #ffffff; + background-color: #005546; + border: 2px solid #005546; +} + +.c7.c7:hover path.icon-color { + fill: #ffffff; +} + +.c8.c8 { + height: 36px; + color: #001428; + background-color: transparent; + border: 2px solid #001428; +} + +.c8.c8.MuiButton-root { + min-width: 130px; + padding: 0 24px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c8.c8.Mui-disabled { + color: #ffffff; +} + +.c8.c8 path.icon-color { + fill: #ffffff; +} + +.c8.c8:disabled { + opacity: 0.5; +} + +.c8.c8 path.icon-color { + fill: #001428; +} + +.c8.c8.Mui-disabled { + color: #001428; +} + +.c8.c8:hover { + color: #ffffff; + background-color: #5D6D74; + border: 2px solid #5D6D74; +} + +.c8.c8:hover path.icon-color { + fill: #ffffff; +} + +.c9.c9 { + height: 36px; + color: #DB3A3D; + background-color: transparent; + border: 2px solid #DB3A3D; +} + +.c9.c9.MuiButton-root { + min-width: 130px; + padding: 0 24px; + font-family: 'Averta','Roboto','Helvetica Neue','Arial','Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','-apple-system','BlinkMacSystemFont',sans-serif; + font-size: 16px; + line-height: 22px; + text-transform: none; + border-radius: 8px; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; +} + +.c9.c9.Mui-disabled { + color: #ffffff; +} + +.c9.c9 path.icon-color { + fill: #ffffff; +} + +.c9.c9:disabled { + opacity: 0.5; +} + +.c9.c9 path.icon-color { + fill: #DB3A3D; +} + +.c9.c9.Mui-disabled { + color: #DB3A3D; +} + +.c9.c9:hover { + color: #ffffff; + background-color: #C31717; + border: 2px solid #C31717; +} + +.c9.c9:hover path.icon-color { + fill: #ffffff; +} + +.c0 button { + margin: 10px; +} +
    , -