diff --git a/packages/pancake-uikit/.storybook/preview.js b/packages/pancake-uikit/.storybook/preview.js index 83185f477..b02154891 100644 --- a/packages/pancake-uikit/.storybook/preview.js +++ b/packages/pancake-uikit/.storybook/preview.js @@ -14,6 +14,7 @@ const globalDecorator = (StoryFn) => ( export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, + layout: "fullscreen", }; const themes = [ diff --git a/packages/pancake-uikit/jest.config.js b/packages/pancake-uikit/jest.config.js index d3842cb63..5c352bee2 100644 --- a/packages/pancake-uikit/jest.config.js +++ b/packages/pancake-uikit/jest.config.js @@ -3,6 +3,7 @@ module.exports = { testPathIgnorePatterns: ["/node_modules/", "/dist/", "/.storybook/"], setupFilesAfterEnv: ["/src/setupTests.js"], transform: { - '\\.(js|jsx)?$': 'babel-jest', + "\\.(js|jsx)?$": "babel-jest", + "^.+\\.svg$": "/svgTransform.js", }, }; diff --git a/packages/pancake-uikit/src/__tests__/widgets/__snapshots__/menu.test.tsx.snap b/packages/pancake-uikit/src/__tests__/widgets/__snapshots__/menu.test.tsx.snap new file mode 100644 index 000000000..1f2e3ba3a --- /dev/null +++ b/packages/pancake-uikit/src/__tests__/widgets/__snapshots__/menu.test.tsx.snap @@ -0,0 +1,3193 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + + .c5 { + margin-left: 24px; +} + +.c6 { + padding-top: 4px; + padding-bottom: 4px; +} + +.c18 { + width: 100%; +} + +.c21 { + margin-right: 12px; +} + +.c25 { + margin-top: 4px; +} + +.c33 { + margin-top: 57px; + padding-left: 12px; +} + +.c36 { + margin-right: 20px; +} + +.c40 { + padding: 40px 16px; + margin-bottom: 44px; +} + +.c43 { + width: 100%; +} + +.c45 { + display: block; +} + +.c47 { + margin-bottom: 42px; +} + +.c54 { + display: none; +} + +.c55 { + padding-bottom: 42px; + margin-bottom: 0; +} + +.c70 { + height: 100%; +} + +.c73 { + width: 100%; + height: 100%; +} + +.c80 { + margin-bottom: 24px; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c19 { + 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: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c20 { + 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; +} + +.c34 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -webkit-justify-content: start; + -ms-flex-pack: start; + justify-content: start; +} + +.c41 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c44 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c48 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; +} + +.c56 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; +} + +.c63 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c65 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c71 { + 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; +} + +.c74 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: space-around; + -webkit-justify-content: space-around; + -ms-flex-pack: space-around; + justify-content: space-around; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c81 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c4 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #280D5F; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c14 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #7A6EAA; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c23 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #280D5F; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-right: 8px; +} + +.c28 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #7A6EAA; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-right: 0.5rem; +} + +.c59 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #B8ADD2; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c60 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #B8ADD2; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-right: 24px; +} + +.c72 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #FFB237; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c75 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #FFFFFF; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.c77 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #B8ADD2; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-right: 0.5rem; +} + +.c84 { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + fill: #FFFFFF; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + margin-left: 0.5rem; +} + +.c15 { + color: #FFB237; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + font-size: 14px; +} + +.c24 { + color: #7A6EAA; + font-size: 16px; + font-weight: 600; + line-height: 1.5; +} + +.c51 { + color: #F4EEFF; + font-size: 16px; + font-weight: 400; + line-height: 1.5; +} + +.c53 { + color: #FFB237; + font-size: 16px; + font-weight: 400; + line-height: 1.5; +} + +.c58 { + color: #1FC7D4; + font-size: 16px; + font-weight: 600; + line-height: 1.5; + margin-right: 24px; +} + +.c62 { + color: #1FC7D4; + font-size: 16px; + font-weight: 600; + line-height: 1.5; + margin-right: 0; +} + +.c78 { + color: #B8ADD2; + font-size: 16px; + font-weight: 400; + line-height: 1.5; +} + +.c82 { + color: #B8ADD2; + font-size: 16px; + font-weight: 600; + line-height: 1.5; +} + +.c12 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0; + background: transparent; + color: #7A6EAA; + cursor: pointer; + font-weight: 400; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + height: 48px; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + outline: 0; + padding-left: 16px; + padding-right: 16px; + width: 100%; +} + +.c12:hover:not(:disabled) { + background-color: #EFF4F5; +} + +.c12:active:not(:disabled) { + opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); +} + +.c10:first-child > .c11 { + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} + +.c10:last-child > .c11 { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; +} + +.c17 { + border-color: #E7E3EB; + border-style: solid; + border-width: 1px 0 0; + margin: 4px 0; +} + +.c9 { + background-color: #FFFFFF; + border: 1px solid #E7E3EB; + border-radius: 16px; + padding-bottom: 4px; + padding-top: 4px; + pointer-events: auto; + width: 280px; + visibility: visible; + z-index: 1001; + pointer-events: none; + visibility: hidden; +} + +.c16 { + border-radius: 16px; + padding: 0 8px; + border: 2px solid; + border-color: #FFB237; + box-shadow: none; + color: #FFB237; + margin-left: 8px; +} + +.c52 { + 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; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; +} + +.c52:hover { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c30 { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + display: none; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: absolute; + -webkit-transform: translate(-50%,0); + -ms-transform: translate(-50%,0); + transform: translate(-50%,0); + left: 50%; + bottom: auto; + background-color: #FFFFFF; + box-shadow: 0px 2px 12px -8px rgba(25,19,38,0.1),0px 1px 1px rgba(25,19,38,0.05); + padding: 16px; + max-height: 400px; + overflow-y: auto; + z-index: 10; + border-radius: 4px; +} + +.c61 { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + display: none; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: absolute; + -webkit-transform: translate(-50%,0); + -ms-transform: translate(-50%,0); + transform: translate(-50%,0); + left: 50%; + bottom: 100%; + background-color: #FFFFFF; + box-shadow: 0px 2px 12px -8px rgba(25,19,38,0.1),0px 1px 1px rgba(25,19,38,0.05); + padding: 16px; + max-height: 400px; + overflow-y: auto; + z-index: 10; + border-radius: 4px; +} + +.c79 { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + display: none; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: absolute; + -webkit-transform: translate(-50%,0); + -ms-transform: translate(-50%,0); + transform: translate(-50%,0); + left: 100%; + bottom: 100%; + background-color: #FFFFFF; + box-shadow: 0px 2px 12px -8px rgba(25,19,38,0.1),0px 1px 1px rgba(25,19,38,0.05); + padding: 16px; + max-height: 400px; + overflow-y: auto; + z-index: 10; + border-radius: 4px; +} + +.c26 { + position: relative; +} + +.c26:hover .c29, +.c26:focus-within .c29 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c42 { + background: #27262c; +} + +.c49 { + list-style: none; + margin-bottom: 40px; +} + +.c50 { + font-size: 16px; + margin-bottom: 8px; + text-transform: capitalize; +} + +.c50:first-child { + color: #9A6AFF; + font-weight: 600; + text-transform: uppercase; +} + +.c46 { + margin-bottom: 24px; +} + +.c64 { + border-color: #383241; + border-top-width: 1px; + border-bottom-width: 1px; + border-style: solid; + padding: 24px 0; + margin-bottom: 24px; +} + +.c57 { + border-bottom: 1px solid #383241; +} + +.c69 { + background-color: #FFFFFF; + border-radius: 50%; + cursor: pointer; + height: 26px; + left: 3px; + position: absolute; + top: 3px; + -webkit-transition: left 200ms ease-in; + transition: left 200ms ease-in; + width: 26px; + z-index: 1; +} + +.c67 { + cursor: pointer; + opacity: 0; + height: 100%; + position: absolute; + width: 100%; + z-index: 3; +} + +.c67:checked + .c68 { + left: calc(100% - 30px); +} + +.c67:focus + .c68 { + box-shadow: 0px 0px 0px 1px #7645D9,0px 0px 0px 4px rgba(118,69,217,0.6); +} + +.c67:hover + .c68:not(:disabled):not(:checked) { + box-shadow: 0px 0px 0px 1px #7645D9,0px 0px 0px 4px rgba(118,69,217,0.6); +} + +.c66 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #BDC2C4; + border-radius: 24px; + box-shadow: inset 0px 2px 2px -1px rgba(74,74,104,0.1); + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + height: 32px; + position: relative; + -webkit-transition: background-color 200ms; + transition: background-color 200ms; + width: 56px; +} + +.c27 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0; + border-radius: 16px; + box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-family: inherit; + font-size: 16px; + font-weight: 600; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-letter-spacing: 0.03em; + -moz-letter-spacing: 0.03em; + -ms-letter-spacing: 0.03em; + letter-spacing: 0.03em; + line-height: 1; + opacity: 1; + outline: 0; + -webkit-transition: background-color 0.2s,opacity 0.2s; + transition: background-color 0.2s,opacity 0.2s; + height: 20px; + font-size: 12px; + padding: 0 8px; + background-color: transparent; + color: #1FC7D4; + box-shadow: none; +} + +.c27:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) { + opacity: 0.65; +} + +.c27:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { + opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; +} + +.c27:disabled, +.c27.pancake-button--disabled { + background-color: #E9EAEB; + border-color: #E9EAEB; + box-shadow: none; + color: #BDC2C4; + cursor: not-allowed; +} + +.c31 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0; + border-radius: 16px; + box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-family: inherit; + font-size: 16px; + font-weight: 600; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-letter-spacing: 0.03em; + -moz-letter-spacing: 0.03em; + -ms-letter-spacing: 0.03em; + letter-spacing: 0.03em; + line-height: 1; + opacity: 1; + outline: 0; + -webkit-transition: background-color 0.2s,opacity 0.2s; + transition: background-color 0.2s,opacity 0.2s; + height: 48px; + padding: 0 24px; + background-color: transparent; + color: #1FC7D4; + box-shadow: none; + width: sm; + height: sm; +} + +.c31:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) { + opacity: 0.65; +} + +.c31:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { + opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; +} + +.c31:disabled, +.c31.pancake-button--disabled { + background-color: #E9EAEB; + border-color: #E9EAEB; + box-shadow: none; + color: #BDC2C4; + cursor: not-allowed; +} + +.c76 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0; + border-radius: 16px; + box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-family: inherit; + font-size: 16px; + font-weight: 600; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-letter-spacing: 0.03em; + -moz-letter-spacing: 0.03em; + -ms-letter-spacing: 0.03em; + letter-spacing: 0.03em; + line-height: 1; + opacity: 1; + outline: 0; + -webkit-transition: background-color 0.2s,opacity 0.2s; + transition: background-color 0.2s,opacity 0.2s; + height: 48px; + padding: 0 24px; + background-color: transparent; + color: #1FC7D4; + box-shadow: none; +} + +.c76:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) { + opacity: 0.65; +} + +.c76:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { + opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; +} + +.c76:disabled, +.c76.pancake-button--disabled { + background-color: #E9EAEB; + border-color: #E9EAEB; + box-shadow: none; + color: #BDC2C4; + cursor: not-allowed; +} + +.c83 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0; + border-radius: 16px; + box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset; + cursor: pointer; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + font-family: inherit; + font-size: 16px; + font-weight: 600; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-letter-spacing: 0.03em; + -moz-letter-spacing: 0.03em; + -ms-letter-spacing: 0.03em; + letter-spacing: 0.03em; + line-height: 1; + opacity: 1; + outline: 0; + -webkit-transition: background-color 0.2s,opacity 0.2s; + transition: background-color 0.2s,opacity 0.2s; + height: 32px; + padding: 0 16px; + background-color: #1FC7D4; + color: white; +} + +.c83:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) { + opacity: 0.65; +} + +.c83:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { + opacity: 0.85; + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + box-shadow: none; +} + +.c83:disabled, +.c83.pancake-button--disabled { + background-color: #E9EAEB; + border-color: #E9EAEB; + box-shadow: none; + color: #BDC2C4; + cursor: not-allowed; +} + +.c32 { + color: #280D5F; + padding: 0 8px; + border-radius: 8px; +} + +.c22 { + 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; +} + +.c22 svg { + -webkit-transition: -webkit-transform 0.3s; + -webkit-transition: transform 0.3s; + transition: transform 0.3s; +} + +.c22:hover svg { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); +} + +.c7 { + position: relative; +} + +.c8 { + position: relative; + 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; + color: #7A6EAA; + font-size: 16px; + font-weight: 400; + padding: 0 16px; + height: 48px; +} + +.c8:hover { + background: #EFF4F5; + border-radius: 16px; +} + +.c13 { + position: relative; + 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; + color: #7A6EAA; + font-size: 16px; + font-weight: 400; + padding: 0 16px; + height: 48px; +} + +.c13:after { + content: ""; + border-radius: 100%; + background: #FFB237; + height: 8px; + width: 8px; + margin-left: 12px; +} + +.c13:hover { + background: #EFF4F5; + border-radius: 16px; +} + +.c37 { + position: relative; + 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; + color: #7A6EAA; + font-size: 16px; + font-weight: 400; + padding: 4px 4px 0px 4px; + height: 42px; +} + +.c37:hover { + background: #EFF4F5; +} + +.c35 { + background-color: rgba(255,255,255,0.7); + box-shadow: inset 0px -2px 0px -8px rgba(133,133,133,0.1); + overflow-x: scroll; + -ms-overflow-style: none; +} + +.c35::-webkit-scrollbar { + display: none; +} + +.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 .mobile-icon { + width: 32px; +} + +.c3 .desktop-icon { + width: 160px; + display: none; +} + +.c3 .right-eye { + -webkit-animation-delay: 20ms; + animation-delay: 20ms; +} + +.c3:hover .left-eye, +.c3:hover .right-eye { + -webkit-transform-origin: center 60%; + -ms-transform-origin: center 60%; + transform-origin: center 60%; + -webkit-animation-name: beoKdG; + animation-name: beoKdG; + -webkit-animation-duration: 350ms; + animation-duration: 350ms; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +.c0 { + position: relative; + width: 100%; +} + +.c1 { + position: fixed; + top: 0; + left: 0; + -webkit-transition: top 0.2s; + transition: top 0.2s; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + height: 56px; + background-color: #FFFFFF; + border-bottom: 1px solid #E7E3EB; + z-index: 20; + -webkit-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + padding-left: 16px; + padding-right: 16px; +} + +.c38 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c39 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-transition: margin-top 0.2s,margin-left 0.2s cubic-bezier(0.4,0,0.2,1); + transition: margin-top 0.2s,margin-left 0.2s cubic-bezier(0.4,0,0.2,1); + -webkit-transform: translate3d(0,0,0); + -ms-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + max-width: 100%; +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c33 { + padding-left: 0px; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c40 { + padding: 56px 40px 32px 40px; + margin-bottom: 0px; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c43 { + width: 1200px; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c45 { + display: none; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c47 { + margin-bottom: 36px; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c54 { + display: block; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c55 { + padding-bottom: 32px; + margin-bottom: 32px; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c80 { + margin-bottom: 0; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c34 { + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c48 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c63 { + -webkit-order: 3; + -ms-flex-order: 3; + order: 3; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c65 { + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; + } +} + +@media screen and (min-width:370px) { + +} + +@media screen and (min-width:576px) { + .c81 { + -webkit-order: 2; + -ms-flex-order: 2; + order: 2; + } +} + +@media screen and (min-width:852px) { + .c49 { + margin-bottom: 0px; + } +} + +@media screen and (min-width:576px) { + .c64 { + border-top-width: 0; + border-bottom-width: 0; + padding: 0 0; + margin-bottom: 0; + } +} + +@media screen and (min-width:968px) { + .c3 .mobile-icon { + display: none; + } +} + +@media screen and (min-width:968px) { + .c3 .desktop-icon { + display: block; + } +} + +
+ +
+
+
+ + Exchange + +
+
+
+
+ + Liquidity + +
+
+
+
+
+ body +
+
+
+ + + + + + + + + + + + + + + + + + +
+
+ + + +
+ + + + + + + + + + + + + + + + + + +
+
+
+ + + + + +
+ + + +
+ + English + + + Bahasa Indonesia + + + 中文 + + + Tiếng Việt + + + Italiano + + + русский + + + Türkiye + + + Português + + + Español + + + 日本語 + + + Français + + + Announcements + + + Whale Alert + +
+
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+
+ + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ $0.232 +
+ +
+ + Buy CAKE + + + + +
+
+
+
+
+
+
+ +`; diff --git a/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx index da11cf9dd..eb798b30b 100644 --- a/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx +++ b/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx @@ -3,6 +3,8 @@ import noop from "lodash/noop"; import { BrowserRouter } from "react-router-dom"; import { renderWithTheme } from "../../testHelpers"; import { Menu, menuConfig, Language } from "../../widgets/Menu"; +import { footerLinks } from "../../components/Footer/config"; +import { SubMenuItemsType } from "../../components/SubMenuItems/types"; /** * @see https://jestjs.io/docs/en/manual-mocks @@ -38,2293 +40,16 @@ it("renders correctly", () => { currentLang="en-US" cakePriceUsd={0.23158668932877668} links={menuConfig} + subLinks={menuConfig[0].items as SubMenuItemsType[]} + footerLinks={footerLinks} + activeItem="Trade" + activeSubItem="Exchange" + buyCakeLabel="Buy CAKE" > body ); - expect(asFragment()).toMatchInlineSnapshot(` - - .c46 { - position: fixed; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - background-color: #452a7a; - -webkit-transition: opacity 0.4s; - transition: opacity 0.4s; - opacity: 0.6; - z-index: 10; - pointer-events: initial; - } - - .c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } - - .c38 { - 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; - } - - .c5 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - fill: #7A6EAA; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - } - - .c7 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - fill: #280D5F; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - } - - .c12 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - fill: #280D5F; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-right: 8px; - } - - .c31 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - fill: #7A6EAA; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-right: 24px; - } - - .c40 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - fill: #BDC2C4; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - } - - .c41 { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; - fill: #7A6EAA; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - margin-right: 0.5rem; - } - - .c3 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 0; - border-radius: 16px; - box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-family: inherit; - font-size: 16px; - font-weight: 600; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-letter-spacing: 0.03em; - -moz-letter-spacing: 0.03em; - -ms-letter-spacing: 0.03em; - letter-spacing: 0.03em; - line-height: 1; - opacity: 1; - outline: 0; - -webkit-transition: background-color 0.2s,opacity 0.2s; - transition: background-color 0.2s,opacity 0.2s; - height: 48px; - padding: 0 24px; - background-color: transparent; - color: #1FC7D4; - box-shadow: none; - width: sm; - height: sm; - margin-right: 24px; - } - - .c3:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) { - opacity: 0.65; - } - - .c3:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { - opacity: 0.85; - -webkit-transform: translateY(1px); - -ms-transform: translateY(1px); - transform: translateY(1px); - box-shadow: none; - } - - .c3:disabled, - .c3.pancake-button--disabled { - background-color: #E9EAEB; - border-color: #E9EAEB; - box-shadow: none; - color: #BDC2C4; - cursor: not-allowed; - } - - .c37 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 0; - border-radius: 16px; - box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-family: inherit; - font-size: 16px; - font-weight: 600; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-letter-spacing: 0.03em; - -moz-letter-spacing: 0.03em; - -ms-letter-spacing: 0.03em; - letter-spacing: 0.03em; - line-height: 1; - opacity: 1; - outline: 0; - -webkit-transition: background-color 0.2s,opacity 0.2s; - transition: background-color 0.2s,opacity 0.2s; - height: 48px; - padding: 0 24px; - background-color: transparent; - color: #1FC7D4; - box-shadow: none; - } - - .c37:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) { - opacity: 0.65; - } - - .c37:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { - opacity: 0.85; - -webkit-transform: translateY(1px); - -ms-transform: translateY(1px); - transform: translateY(1px); - box-shadow: none; - } - - .c37:disabled, - .c37.pancake-button--disabled { - background-color: #E9EAEB; - border-color: #E9EAEB; - box-shadow: none; - color: #BDC2C4; - cursor: not-allowed; - } - - .c44 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 0; - border-radius: 16px; - box-shadow: 0px -1px 0px 0px rgba(14,14,44,0.4) inset; - cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - font-family: inherit; - font-size: 16px; - font-weight: 600; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-letter-spacing: 0.03em; - -moz-letter-spacing: 0.03em; - -ms-letter-spacing: 0.03em; - letter-spacing: 0.03em; - line-height: 1; - opacity: 1; - outline: 0; - -webkit-transition: background-color 0.2s,opacity 0.2s; - transition: background-color 0.2s,opacity 0.2s; - height: 48px; - padding: 0 24px; - background-color: transparent; - color: #1FC7D4; - box-shadow: none; - width: sm; - height: sm; - } - - .c44:hover:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled):not(:active) { - opacity: 0.65; - } - - .c44:active:not(:disabled):not(.pancake-button--disabled):not(.pancake-button--disabled) { - opacity: 0.85; - -webkit-transform: translateY(1px); - -ms-transform: translateY(1px); - transform: translateY(1px); - box-shadow: none; - } - - .c44:disabled, - .c44.pancake-button--disabled { - background-color: #E9EAEB; - border-color: #E9EAEB; - box-shadow: none; - color: #BDC2C4; - cursor: not-allowed; - } - - .c4 { - color: #280D5F; - padding: 0 8px; - border-radius: 8px; - } - - .c6 { - 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; - } - - .c6 .mobile-icon { - width: 32px; - } - - .c6 .desktop-icon { - width: 160px; - display: none; - } - - .c6 .right-eye { - -webkit-animation-delay: 20ms; - animation-delay: 20ms; - } - - .c6:hover .left-eye, - .c6:hover .right-eye { - -webkit-transform-origin: center 60%; - -ms-transform-origin: center 60%; - transform-origin: center 60%; - -webkit-animation-name: beoKdG; - animation-name: beoKdG; - -webkit-animation-duration: 350ms; - animation-duration: 350ms; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - } - - .c18 { - color: #ED4B9E; - font-size: 14px; - font-weight: 400; - line-height: 1.5; - font-size: 14px; - } - - .c20 { - color: #FFB237; - font-size: 14px; - font-weight: 400; - line-height: 1.5; - font-size: 14px; - } - - .c23 { - color: #31D0AA; - font-size: 14px; - font-weight: 400; - line-height: 1.5; - font-size: 14px; - } - - .c29 { - color: #7A6EAA; - font-size: 16px; - font-weight: 600; - line-height: 1.5; - } - - .c35 { - color: #1FC7D4; - font-size: 16px; - font-weight: 600; - line-height: 1.5; - margin-right: 0; - } - - .c39 { - color: #BDC2C4; - font-size: 16px; - font-weight: 400; - line-height: 1.5; - margin-left: 4px; - margin-right: 4px; - } - - .c42 { - color: #7A6EAA; - font-size: 16px; - font-weight: 400; - line-height: 1.5; - } - - .c13 { - color: #7A6EAA; - -webkit-transition: color 0.4s; - transition: color 0.4s; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - } - - .c11 { - cursor: pointer; - 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; - height: 48px; - padding: 0 16px; - font-size: 16px; - background-color: transparent; - color: #7A6EAA; - box-shadow: inset 4px 0px 0px #1FC7D4; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - } - - .c11 a { - 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; - width: 100%; - height: 100%; - } - - .c11 svg { - fill: #7A6EAA; - } - - .c11:hover { - background-color: #EFF4F5; - } - - .c11.rainbow { - background-clip: text; - -webkit-animation: fKQuCC 3s ease-in-out infinite; - animation: fKQuCC 3s ease-in-out infinite; - background: linear-gradient(139.73deg,#E5FDFF 0%,#F3EFFF 100%); - background-size: 400% 100%; - } - - .c15 { - cursor: pointer; - 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; - height: 48px; - padding: 0 16px; - font-size: 16px; - background-color: transparent; - color: #7A6EAA; - box-shadow: none; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - } - - .c15 a { - 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; - width: 100%; - height: 100%; - } - - .c15 svg { - fill: #7A6EAA; - } - - .c15:hover { - background-color: #EFF4F5; - } - - .c15.rainbow { - background-clip: text; - -webkit-animation: fKQuCC 3s ease-in-out infinite; - animation: fKQuCC 3s ease-in-out infinite; - background: linear-gradient(139.73deg,#E5FDFF 0%,#F3EFFF 100%); - background-size: 400% 100%; - } - - .c17 { - cursor: pointer; - 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; - height: 48px; - padding: 0 32px; - font-size: 14px; - background-color: #FAF9FA; - color: #7A6EAA; - box-shadow: none; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - } - - .c17 a { - 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; - width: 100%; - height: 100%; - } - - .c17 svg { - fill: #7A6EAA; - } - - .c17:hover { - background-color: #EFF4F5; - } - - .c17.rainbow { - background-clip: text; - -webkit-animation: fKQuCC 3s ease-in-out infinite; - animation: fKQuCC 3s ease-in-out infinite; - background: linear-gradient(139.73deg,#E5FDFF 0%,#F3EFFF 100%); - background-size: 400% 100%; - } - - .c25 { - cursor: pointer; - 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; - height: 48px; - padding: 0 32px; - font-size: 14px; - background-color: #FAF9FA; - color: #7A6EAA; - box-shadow: inset 4px 0px 0px #1FC7D4; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - } - - .c25 a { - 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; - width: 100%; - height: 100%; - } - - .c25 svg { - fill: #7A6EAA; - } - - .c25:hover { - background-color: #EFF4F5; - } - - .c25.rainbow { - background-clip: text; - -webkit-animation: fKQuCC 3s ease-in-out infinite; - animation: fKQuCC 3s ease-in-out infinite; - background: linear-gradient(139.73deg,#E5FDFF 0%,#F3EFFF 100%); - background-size: 400% 100%; - } - - .c19 { - border-radius: 16px; - padding: 0 8px; - border: 2px solid; - border-color: #ED4B9E; - box-shadow: none; - color: #ED4B9E; - margin-left: 8px; - } - - .c21 { - border-radius: 16px; - padding: 0 8px; - border: 2px solid; - border-color: #FFB237; - box-shadow: none; - color: #FFB237; - margin-left: 8px; - } - - .c24 { - border-radius: 16px; - padding: 0 8px; - border: 2px solid; - border-color: #31D0AA; - box-shadow: none; - color: #31D0AA; - margin-left: 8px; - } - - .c14 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - } - - .c16 { - max-height: 0; - -webkit-transition: max-height 0.3s ease-out; - transition: max-height 0.3s ease-out; - overflow: hidden; - border-color: transparent; - border-style: solid; - border-width: 1px 0; - } - - .c22 { - max-height: 96px; - -webkit-transition: max-height 0.3s ease-out; - transition: max-height 0.3s ease-out; - overflow: hidden; - border-color: rgba(133,133,133,0.1); - border-style: solid; - border-width: 1px 0; - } - - .c10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - overflow-y: auto; - overflow-x: hidden; - height: 100%; - } - - .c28 { - 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; - } - - .c28 svg { - -webkit-transition: -webkit-transform 0.3s; - -webkit-transition: transform 0.3s; - transition: transform 0.3s; - } - - .c28:hover svg { - -webkit-transform: scale(1.2); - -ms-transform: scale(1.2); - transform: scale(1.2); - } - - .c33 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - display: none; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: absolute; - -webkit-transform: translate(-50%,0); - -ms-transform: translate(-50%,0); - transform: translate(-50%,0); - left: 50%; - bottom: 100%; - background-color: #FFFFFF; - box-shadow: 0px 2px 12px -8px rgba(25,19,38,0.1),0px 1px 1px rgba(25,19,38,0.05); - padding: 16px; - max-height: 400px; - overflow-y: auto; - z-index: 10; - border-radius: 4px; - } - - .c43 { - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - display: none; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - position: absolute; - -webkit-transform: translate(-50%,0); - -ms-transform: translate(-50%,0); - transform: translate(-50%,0); - left: 100%; - bottom: 100%; - background-color: #FFFFFF; - box-shadow: 0px 2px 12px -8px rgba(25,19,38,0.1),0px 1px 1px rgba(25,19,38,0.05); - padding: 16px; - max-height: 400px; - overflow-y: auto; - z-index: 10; - border-radius: 4px; - } - - .c30 { - position: relative; - } - - .c30:hover .c32, - .c30:focus-within .c32 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } - - .c34 { - 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; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - } - - .c34:hover { - -webkit-text-decoration: underline; - text-decoration: underline; - } - - .c26 { - -webkit-flex: none; - -ms-flex: none; - flex: none; - padding: 8px 4px; - background-color: #FFFFFF; - border-top: solid 2px rgba(133,133,133,0.1); - } - - .c36 { - 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: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 48px; - padding: 0 8px; - } - - .c27 { - 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: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 48px; - padding: 0 16px; - } - - .c9 { - position: fixed; - padding-top: 80px; - top: 0; - left: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - background-color: #FFFFFF; - width: 240px; - height: 100%; - -webkit-transition: padding-top 0.2s,width 0.2s cubic-bezier(0.4,0,0.2,1); - transition: padding-top 0.2s,width 0.2s cubic-bezier(0.4,0,0.2,1); - border-right: 2px solid rgba(133,133,133,0.1); - z-index: 11; - overflow: initial; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - } - - .c0 { - position: relative; - width: 100%; - } - - .c1 { - position: fixed; - top: 0; - left: 0; - -webkit-transition: top 0.2s; - transition: top 0.2s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding-left: 8px; - padding-right: 16px; - width: 100%; - height: 64px; - background-color: #FFFFFF; - border-bottom: solid 2px rgba(133,133,133,0.1); - z-index: 20; - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - } - - .c8 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } - - .c45 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - margin-top: 64px; - -webkit-transition: margin-top 0.2s,margin-left 0.2s cubic-bezier(0.4,0,0.2,1); - transition: margin-top 0.2s,margin-left 0.2s cubic-bezier(0.4,0,0.2,1); - -webkit-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - max-width: 100%; - } - - .c47 { - position: fixed; - height: 100%; - } - - @media screen and (min-width:968px) { - .c6 .mobile-icon { - display: none; - } - } - - @media screen and (min-width:968px) { - .c6 .desktop-icon { - display: block; - } - } - - @media screen and (min-width:968px) { - .c9 { - border-right: 2px solid rgba(133,133,133,0.1); - width: 240px; - } - } - - @media screen and (min-width:968px) { - .c45 { - margin-left: 240px; - max-width: calc(100% - 240px); - } - } - - @media screen and (min-width:968px) { - .c47 { - display: none; - } - } - -
- -
-
-
-
- - - - -
- Home -
- -
-
-
- - - -
- Trade -
- - - -
-
-
- -
- Exchange -
- -
-
- -
- Liquidity -
- -
-
-
-
- - - - - - - -
- Farms -
-
- LIVE -
- -
-
- - - - - -
- Pools -
- -
-
- - - - -
- Lottery -
- -
-
- - - - -
- NFT -
- -
-
- - - - -
- Team Battle -
-
- SOON -
- -
-
-
- - - -
- Profile & Teams -
-
- LIVE -
- - - -
-
-
- -
- Leaderboard -
-
- NEW -
- -
-
- -
- YourProfile -
- -
-
-
-
-
- - - - -
- Info -
- - - -
-
-
- -
- Overview -
- -
-
- -
- Tokens -
- -
-
- -
- Pairs -
- -
-
- -
- Accounts -
- -
-
-
-
-
- - - -
- IFO -
- - - -
-
-
- -
- Next -
- -
-
- -
- History -
- -
-
-
-
-
- - - -
- More -
- - - -
-
-
- -
- Voting -
- -
-
- -
- Github -
- -
-
- -
- Docs -
- -
-
- -
- Blog -
- -
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- $0.232 -
- -
-
- - - -
- - English - - - Bahasa Indonesia - - - 中文 - - - Tiếng Việt - - - Italiano - - - русский - - - Türkiye - - - Português - - - Español - - - 日本語 - - - Français - - - Announcements - - - Whale Alert - -
-
- - - - - -
-
-
- -
- -
- - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
- body -
- -
- - `); + expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/pancake-uikit/src/components/BottomNav/BottomNav.tsx b/packages/pancake-uikit/src/components/BottomNav/BottomNav.tsx new file mode 100644 index 000000000..e7cba11b4 --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNav/BottomNav.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import BottomNavItem from "../BottomNavItem"; +import StyledBottomNav from "./styles"; +import { Box } from "../Box"; +import DropdownMenu from "../DropdownMenu/DropdownMenu"; +import { BottomNavProps } from "./types"; + +const BottomNav: React.FC = ({ items = [], activeItem = "", activeSubItem = "", ...props }) => { + return ( + + {items.map(({ label, items: menuItems, href, icon, showOnMobile = true, showItemsOnMobile = true }) => { + return ( + showOnMobile && ( + + + + + + ) + ); + })} + + ); +}; + +export default BottomNav; diff --git a/packages/pancake-uikit/src/components/BottomNav/constants.ts b/packages/pancake-uikit/src/components/BottomNav/constants.ts new file mode 100644 index 000000000..d3ca67102 --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNav/constants.ts @@ -0,0 +1,3 @@ +const MAX_TIME_PRESSED = 500; + +export default MAX_TIME_PRESSED; diff --git a/packages/pancake-uikit/src/components/BottomNav/index.stories.tsx b/packages/pancake-uikit/src/components/BottomNav/index.stories.tsx new file mode 100644 index 000000000..b3bc25ed3 --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNav/index.stories.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { BrowserRouter } from "react-router-dom"; +import { Box } from "../Box"; +import BottomNav from "./BottomNav"; +import MenuItemsMock from "./mock"; +import { BottomNavProps } from "./types"; + +export default { + title: "Components/Menu/BottomNav", + component: BottomNav, + argTypes: { + activeItem: { + options: ["/swap", "/earn", "/win", "/nft"], + control: { type: "select" }, + }, + }, +}; + +const Template: React.FC = (args) => { + return ( + + + + + + ); +}; + +export const Default = Template.bind({}); +Default.args = { + items: MenuItemsMock, + activeItem: "/earn", + activeSubItem: "/swap", +}; diff --git a/packages/pancake-uikit/src/components/BottomNav/index.tsx b/packages/pancake-uikit/src/components/BottomNav/index.tsx new file mode 100644 index 000000000..3d547fccb --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNav/index.tsx @@ -0,0 +1 @@ +export { default } from "./BottomNav"; diff --git a/packages/pancake-uikit/src/components/BottomNav/mock.tsx b/packages/pancake-uikit/src/components/BottomNav/mock.tsx new file mode 100644 index 000000000..88dfc1710 --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNav/mock.tsx @@ -0,0 +1,40 @@ +import ItemsMock from "../DropdownMenu/mock"; +import { MenuItemsType } from "../MenuItems/types"; + +const MenuItemsMock: MenuItemsType[] = [ + { + label: "Swap", + href: "/swap", + icon: "Swap", + items: ItemsMock, + }, + { + label: "Earn", + href: "/earn", + icon: "Earn", + items: ItemsMock, + showItemsOnMobile: true, + }, + { + label: "Gagnez des jetons", + href: "/win", + icon: "Trophy", + items: ItemsMock, + showItemsOnMobile: true, + }, + { + label: "NFT", + href: "/nft", + icon: "Nft", + items: ItemsMock, + }, + { + label: "More", + href: "/more", + icon: "More", + items: ItemsMock, + showItemsOnMobile: true, + }, +]; + +export default MenuItemsMock; diff --git a/packages/pancake-uikit/src/components/BottomNav/styles.tsx b/packages/pancake-uikit/src/components/BottomNav/styles.tsx new file mode 100644 index 000000000..066eaa074 --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNav/styles.tsx @@ -0,0 +1,13 @@ +import styled from "styled-components"; +import { Flex } from "../Box"; + +const StyledBottomNavItem = styled(Flex)` + position: fixed; + bottom: 0px; + width: 100%; + padding: 5px 8px; + background: ${({ theme }) => theme.colors.backgroundAlt}; + border-top: 1px solid ${({ theme }) => theme.colors.cardBorder}; +`; + +export default StyledBottomNavItem; diff --git a/packages/pancake-uikit/src/components/BottomNav/types.ts b/packages/pancake-uikit/src/components/BottomNav/types.ts new file mode 100644 index 000000000..7662e964b --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNav/types.ts @@ -0,0 +1,8 @@ +import { BoxProps } from "../Box"; +import { MenuItemsType } from "../MenuItems/types"; + +export interface BottomNavProps extends BoxProps { + items: MenuItemsType[]; + activeItem?: string; + activeSubItem?: string; +} diff --git a/packages/pancake-uikit/src/components/BottomNavItem/BottomNavItem.tsx b/packages/pancake-uikit/src/components/BottomNavItem/BottomNavItem.tsx new file mode 100644 index 000000000..9a045c3fb --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNavItem/BottomNavItem.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { Flex } from "../Box"; +import AnimatedIconComponent from "../Svg/AnimatedIconComponent"; +import { StyledBottomNavItem, StyledBottomNavText } from "./styles"; +import { BottomNavItemProps } from "./types"; + +const BottomNavItem: React.FC = ({ + label, + iconName, + href, + showItemsOnMobile = false, + isActive = false, + ...props +}) => { + const bottomNavItemContent = ( + + {iconName && ( + + )} + + {label} + + + ); + + return showItemsOnMobile ? ( + + {bottomNavItemContent} + + ) : ( + + {bottomNavItemContent} + + ); +}; + +export default BottomNavItem; diff --git a/packages/pancake-uikit/src/components/BottomNavItem/index.stories.tsx b/packages/pancake-uikit/src/components/BottomNavItem/index.stories.tsx new file mode 100644 index 000000000..549d0bc07 --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNavItem/index.stories.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { BrowserRouter } from "react-router-dom"; +import { Flex } from "../Box"; +import BottomNavItem from "./BottomNavItem"; +import { BottomNavItemProps } from "./types"; + +export default { + title: "Components/Menu/BottomNavItem", + component: BottomNavItem, +}; + +const Template: React.FC = ({ ...args }) => { + return ( + + + + + + ); +}; + +export const Default = Template.bind({}); +Default.args = { + label: "Trade", + href: "/", + iconName: "Swap", + isActive: false, +}; diff --git a/packages/pancake-uikit/src/components/BottomNavItem/index.tsx b/packages/pancake-uikit/src/components/BottomNavItem/index.tsx new file mode 100644 index 000000000..05363a765 --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNavItem/index.tsx @@ -0,0 +1 @@ +export { default } from "./BottomNavItem"; diff --git a/packages/pancake-uikit/src/components/BottomNavItem/styles.tsx b/packages/pancake-uikit/src/components/BottomNavItem/styles.tsx new file mode 100644 index 000000000..1afe1a755 --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNavItem/styles.tsx @@ -0,0 +1,28 @@ +import styled from "styled-components"; +import { Text } from "../Text"; + +export const StyledBottomNavItem = styled.button` + display: block; + border: 0; + background: transparent; + cursor: pointer; + height: 44px; + padding: 4px 12px; + &:hover { + border-radius: 16px; + } + &:hover, + &:hover div { + background: ${({ theme }) => theme.colors.tertiary}; + } +`; + +export const StyledBottomNavText = styled(Text)` + display: -webkit-box; + overflow: hidden; + user-select: none; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + -webkit-user-select: none; + -webkit-touch-callout: none; +`; diff --git a/packages/pancake-uikit/src/components/BottomNavItem/types.ts b/packages/pancake-uikit/src/components/BottomNavItem/types.ts new file mode 100644 index 000000000..8aa50a116 --- /dev/null +++ b/packages/pancake-uikit/src/components/BottomNavItem/types.ts @@ -0,0 +1,7 @@ +export interface BottomNavItemProps { + label: string; + href: string; + iconName?: string; + isActive?: boolean; + showItemsOnMobile?: boolean; +} diff --git a/packages/pancake-uikit/src/widgets/Menu/components/CakePrice.tsx b/packages/pancake-uikit/src/components/CakePrice/CakePrice.tsx similarity index 65% rename from packages/pancake-uikit/src/widgets/Menu/components/CakePrice.tsx rename to packages/pancake-uikit/src/components/CakePrice/CakePrice.tsx index dd69f251f..730703455 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/CakePrice.tsx +++ b/packages/pancake-uikit/src/components/CakePrice/CakePrice.tsx @@ -1,10 +1,12 @@ import React from "react"; import styled from "styled-components"; -import { PancakeRoundIcon } from "../../../components/Svg"; -import Text from "../../../components/Text/Text"; -import Skeleton from "../../../components/Skeleton/Skeleton"; +import { PancakeRoundIcon } from "../Svg"; +import Text from "../Text/Text"; +import Skeleton from "../Skeleton/Skeleton"; +import { Colors } from "../../theme"; interface Props { + color?: keyof Colors; cakePriceUsd?: number; } @@ -21,14 +23,14 @@ const PriceLink = styled.a` } `; -const CakePrice: React.FC = ({ cakePriceUsd }) => { +const CakePrice: React.FC = ({ cakePriceUsd, color = "textSubtle" }) => { return cakePriceUsd ? ( - {`$${cakePriceUsd.toFixed(3)}`} + {`$${cakePriceUsd.toFixed(3)}`} ) : ( diff --git a/packages/pancake-uikit/src/components/DropdownMenu/DropdownMenu.tsx b/packages/pancake-uikit/src/components/DropdownMenu/DropdownMenu.tsx new file mode 100644 index 000000000..94d09354c --- /dev/null +++ b/packages/pancake-uikit/src/components/DropdownMenu/DropdownMenu.tsx @@ -0,0 +1,182 @@ +/* eslint-disable react/no-array-index-key */ +import React, { useEffect, useRef, useState } from "react"; +import { usePopper } from "react-popper"; +import { Link } from "react-router-dom"; +import isTouchDevice from "../../util/isTouchDevice"; +import { Box, Flex } from "../Box"; +import IconComponent from "../Svg/IconComponent"; +import { + DropdownMenuDivider, + DropdownMenuItem, + StyledDropdownMenu, + LinkStatus, + StyledDropdownMenuItemContainer, +} from "./styles"; +import { DropdownMenuItemType, DropdownMenuProps } from "./types"; + +const DropdownMenu: React.FC = ({ + children, + isBottomNav = false, + showItemsOnMobile = false, + activeItem = "", + items = [], + openMenuTimeout = 0, + ...props +}) => { + const [isOpen, setIsOpen] = useState(false); + const [targetRef, setTargetRef] = useState(null); + const [tooltipRef, setTooltipRef] = useState(null); + const hideTimeout = useRef(); + const isHoveringOverTooltip = useRef(false); + const hasItems = items.length > 0; + const clickTimeRef = useRef(openMenuTimeout); + const { styles, attributes } = usePopper(targetRef, tooltipRef, { + placement: isBottomNav ? "top" : "bottom-start", + modifiers: [{ name: "offset", options: { offset: [0, isBottomNav ? 6 : 0] } }], + }); + + /** + * See "useTooltip" + */ + useEffect(() => { + const showTooltip = (evt: MouseEvent | TouchEvent) => { + setIsOpen(true); + + if (evt.target === targetRef) { + clearTimeout(hideTimeout.current); + } + + if (evt.target === tooltipRef) { + isHoveringOverTooltip.current = true; + } + }; + + const hideTooltip = (evt: MouseEvent | TouchEvent) => { + const target = evt.target as Node; + return target && !tooltipRef?.contains(target) && setIsOpen(false); + }; + + const toggleTouch = (evt: TouchEvent) => { + const target = evt.target as Node; + const isTouchingTargetRef = target && targetRef?.contains(target); + const isTouchingTooltipRef = target && tooltipRef?.contains(target); + + if (isTouchingTargetRef) { + if (isOpen || openMenuTimeout === 0) { + setIsOpen((prevOpen) => !prevOpen); + } + } else if (isTouchingTooltipRef) { + // Don't close the menu immediately so it catches the event + setTimeout( + () => { + setIsOpen(false); + }, + isBottomNav ? 500 : 100 + ); + } else { + setIsOpen(false); + } + }; + + const handlePointerDown = (e: PointerEvent) => { + const target = e.target as Node; + const isTouchingTargetRef = target && targetRef?.contains(target); + + if (isTouchingTargetRef) { + clickTimeRef.current = e.timeStamp; + + setTimeout(() => { + if (clickTimeRef.current > 0) setIsOpen(true); + }, openMenuTimeout); + } + }; + + const handlePointerUp = () => { + clickTimeRef.current = 0; + }; + + if (isTouchDevice()) { + document.addEventListener("touchstart", toggleTouch); + if (openMenuTimeout > 0) { + document.addEventListener("pointerdown", handlePointerDown); + document.addEventListener("pointerup", handlePointerUp); + } + } else { + targetRef?.addEventListener("mouseenter", showTooltip); + targetRef?.addEventListener("mouseleave", hideTooltip); + tooltipRef?.addEventListener("mouseenter", showTooltip); + tooltipRef?.addEventListener("mouseleave", hideTooltip); + } + + return () => { + if (isTouchDevice()) { + document.removeEventListener("touchstart", toggleTouch); + if (openMenuTimeout > 0) { + document.removeEventListener("pointerdown", handlePointerDown); + document.removeEventListener("pointerup", handlePointerUp); + } + } else { + targetRef?.removeEventListener("mouseenter", showTooltip); + targetRef?.removeEventListener("mouseleave", hideTooltip); + tooltipRef?.removeEventListener("mouseenter", showTooltip); + tooltipRef?.removeEventListener("mouseleave", hideTooltip); + } + }; + }, [targetRef, tooltipRef, hideTimeout, isHoveringOverTooltip, setIsOpen, openMenuTimeout, isOpen, isBottomNav]); + + return ( + + {children} + {hasItems && ( + + {items.map( + ({ type = DropdownMenuItemType.INTERNAL_LINK, label, href = "/", status, ...itemProps }, index) => { + const MenuItemContent = ( + <> + {label} + {status && ( + + {status.text} + + )} + + ); + const isActive = href === activeItem; + return ( + + {type === DropdownMenuItemType.BUTTON && ( + + {MenuItemContent} + + )} + {type === DropdownMenuItemType.INTERNAL_LINK && ( + + {MenuItemContent} + + )} + {type === DropdownMenuItemType.EXTERNAL_LINK && ( + + + {label} + + + + )} + {type === DropdownMenuItemType.DIVIDER && } + + ); + } + )} + + )} + + ); +}; + +export default DropdownMenu; diff --git a/packages/pancake-uikit/src/components/DropdownMenu/index.stories.tsx b/packages/pancake-uikit/src/components/DropdownMenu/index.stories.tsx new file mode 100644 index 000000000..1ef003c4d --- /dev/null +++ b/packages/pancake-uikit/src/components/DropdownMenu/index.stories.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { BrowserRouter } from "react-router-dom"; +import { Box } from "../Box"; +import DropdownMenu from "./DropdownMenu"; +import ItemsMock from "./mock"; + +export default { + title: "Components/Menu/DropdownMenu", + component: DropdownMenu, +}; + +export const Default: React.FC = () => { + return ( + + + + Wallet + + + + ); +}; diff --git a/packages/pancake-uikit/src/components/DropdownMenu/index.tsx b/packages/pancake-uikit/src/components/DropdownMenu/index.tsx new file mode 100644 index 000000000..5c6db3df3 --- /dev/null +++ b/packages/pancake-uikit/src/components/DropdownMenu/index.tsx @@ -0,0 +1,2 @@ +export { default as DropdownMenu } from "./DropdownMenu"; +export type { DropdownMenuProps } from "./types"; diff --git a/packages/pancake-uikit/src/components/DropdownMenu/mock.tsx b/packages/pancake-uikit/src/components/DropdownMenu/mock.tsx new file mode 100644 index 000000000..48ee3811e --- /dev/null +++ b/packages/pancake-uikit/src/components/DropdownMenu/mock.tsx @@ -0,0 +1,28 @@ +import { noop } from "lodash"; +import { DropdownMenuItems, DropdownMenuItemType } from "./types"; + +const ItemsMock: DropdownMenuItems[] = [ + { + label: "Exchange", + href: "/swap", + }, + { + label: "Liquidity", + href: "/pool", + }, + { + label: "LP Migration", + href: "https://v1exchange.pancakeswap.finance/#/migrate", + type: DropdownMenuItemType.EXTERNAL_LINK, + }, + { + type: DropdownMenuItemType.DIVIDER, + }, + { + label: "Disconnect", + onClick: noop, + type: DropdownMenuItemType.BUTTON, + }, +]; + +export default ItemsMock; diff --git a/packages/pancake-uikit/src/components/DropdownMenu/styles.tsx b/packages/pancake-uikit/src/components/DropdownMenu/styles.tsx new file mode 100644 index 000000000..4070a8268 --- /dev/null +++ b/packages/pancake-uikit/src/components/DropdownMenu/styles.tsx @@ -0,0 +1,89 @@ +import styled, { DefaultTheme } from "styled-components"; +import { Colors } from "../../theme"; +import { Text } from "../Text"; +import { StyledDropdownMenuItemProps } from "./types"; + +const getTextColor = ({ + $isActive, + disabled, + theme, +}: StyledDropdownMenuItemProps & { theme: DefaultTheme; $isActive: boolean }) => { + if (disabled) return theme.colors.textDisabled; + if ($isActive) return theme.colors.secondary; + + return theme.colors.textSubtle; +}; + +export const DropdownMenuItem = styled.button` + align-items: center; + border: 0; + background: transparent; + color: ${({ theme, disabled, $isActive }) => getTextColor({ theme, disabled, $isActive })}; + cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")}; + font-weight: ${({ $isActive = false }) => ($isActive ? "600" : "400")}; + display: flex; + font-size: 16px; + height: 48px; + justify-content: space-between; + outline: 0; + padding-left: 16px; + padding-right: 16px; + width: 100%; + + &:hover:not(:disabled) { + background-color: ${({ theme }) => theme.colors.tertiary}; + } + + &:active:not(:disabled) { + opacity: 0.85; + transform: translateY(1px); + } +`; + +export const StyledDropdownMenuItemContainer = styled.div` + &:first-child > ${DropdownMenuItem} { + border-top-left-radius: 8px; + border-top-right-radius: 8px; + } + + &:last-child > ${DropdownMenuItem} { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + } +`; + +export const DropdownMenuDivider = styled.hr` + border-color: ${({ theme }) => theme.colors.cardBorder}; + border-style: solid; + border-width: 1px 0 0; + margin: 4px 0; +`; + +export const StyledDropdownMenu = styled.div<{ $isOpen: boolean; $isBottomNav: boolean }>` + background-color: ${({ theme }) => theme.card.background}; + border: 1px solid ${({ theme }) => theme.colors.cardBorder}; + border-radius: 16px; + padding-bottom: 4px; + padding-top: 4px; + pointer-events: auto; + width: ${({ $isBottomNav }) => ($isBottomNav ? "calc(100% - 32px)" : "280px")}; + visibility: visible; + z-index: 1001; + + ${({ $isOpen }) => + !$isOpen && + ` + pointer-events: none; + visibility: hidden; + `} +`; + +export const LinkStatus = styled(Text)<{ color: keyof Colors }>` + border-radius: ${({ theme }) => theme.radii.default}; + padding: 0 8px; + border: 2px solid; + border-color: ${({ theme, color }) => theme.colors[color]}; + box-shadow: none; + color: ${({ theme, color }) => theme.colors[color]}; + margin-left: 8px; +`; diff --git a/packages/pancake-uikit/src/components/DropdownMenu/types.ts b/packages/pancake-uikit/src/components/DropdownMenu/types.ts new file mode 100644 index 000000000..ae1c4777b --- /dev/null +++ b/packages/pancake-uikit/src/components/DropdownMenu/types.ts @@ -0,0 +1,37 @@ +import React from "react"; +import { Colors } from "../../theme"; +import { BoxProps } from "../Box"; + +export interface DropdownMenuProps extends BoxProps { + items?: DropdownMenuItems[]; + activeItem?: string; + isBottomNav?: boolean; + openMenuTimeout?: number; + showItemsOnMobile?: boolean; +} + +export interface StyledDropdownMenuItemProps extends React.ComponentPropsWithoutRef<"button"> { + disabled?: boolean; + isActive?: boolean; +} + +export enum DropdownMenuItemType { + INTERNAL_LINK, + EXTERNAL_LINK, + BUTTON, + DIVIDER, +} + +export interface LinkStatus { + text: string; + color: keyof Colors; +} + +export interface DropdownMenuItems { + label?: string | React.ReactNode; + href?: string; + onClick?: () => void; + type?: DropdownMenuItemType; + status?: LinkStatus; + disabled?: boolean; +} diff --git a/packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx b/packages/pancake-uikit/src/components/Footer/Components/SocialLinks.tsx similarity index 55% rename from packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx rename to packages/pancake-uikit/src/components/Footer/Components/SocialLinks.tsx index 65b061e28..8d95a9e41 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/SocialLinks.tsx +++ b/packages/pancake-uikit/src/components/Footer/Components/SocialLinks.tsx @@ -1,22 +1,25 @@ import React from "react"; -import { SvgProps } from "../../../components/Svg"; -import Flex from "../../../components/Box/Flex"; -import Dropdown from "../../../components/Dropdown/Dropdown"; -import Link from "../../../components/Link/Link"; -import * as IconModule from "../icons"; +import { darkColors } from "../../../theme"; +import { FlexProps } from "../../Box"; +import Flex from "../../Box/Flex"; +import Dropdown from "../../Dropdown/Dropdown"; +import Link from "../../Link/Link"; +import IconComponent from "../../Svg/IconComponent"; import { socials } from "../config"; -const Icons = IconModule as unknown as { [key: string]: React.FC }; - -const SocialLinks: React.FC = () => ( - +const SocialLinks: React.FC = ({ ...props }) => ( + {socials.map((social, index) => { - const Icon = Icons[social.icon]; - const iconProps = { width: "24px", color: "textSubtle", style: { cursor: "pointer" } }; + const iconProps = { + iconName: social.icon, + width: "20px", + color: darkColors.textSubtle, + style: { cursor: "pointer" }, + }; const mr = index < socials.length - 1 ? "24px" : 0; if (social.items) { return ( - }> + }> {social.items.map((item) => ( {item.label} @@ -27,7 +30,7 @@ const SocialLinks: React.FC = () => ( } return ( - + ); })} diff --git a/packages/pancake-uikit/src/components/Footer/Components/ThemeSwitcher.tsx b/packages/pancake-uikit/src/components/Footer/Components/ThemeSwitcher.tsx new file mode 100644 index 000000000..8f7d773d2 --- /dev/null +++ b/packages/pancake-uikit/src/components/Footer/Components/ThemeSwitcher.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import IconComponent from "../../Svg/IconComponent"; +import { Toggle } from "../../Toggle"; + +interface Props { + isDark: boolean; + toggleTheme: (isDark: boolean) => void; +} + +const ThemeSwitcher: React.FC = ({ isDark, toggleTheme }) => ( + toggleTheme(!isDark)} + scale="md" + startIcon={(isActive = false) => } + endIcon={(isActive = false) => } + /> +); + +export default React.memo(ThemeSwitcher, (prev, next) => prev.isDark === next.isDark); diff --git a/packages/pancake-uikit/src/components/Footer/Footer.tsx b/packages/pancake-uikit/src/components/Footer/Footer.tsx new file mode 100644 index 000000000..bfdc07ae1 --- /dev/null +++ b/packages/pancake-uikit/src/components/Footer/Footer.tsx @@ -0,0 +1,102 @@ +import React from "react"; +import { baseColors, darkColors, lightColors } from "../../theme/colors"; +import { Flex, Box } from "../Box"; +import { Link } from "../Link"; +import { + StyledFooter, + StyledIconMobileContainer, + StyledList, + StyledListItem, + StyledSocialLinks, + StyledToolsContainer, +} from "./styles"; +import { FooterProps } from "./types"; +import ThemeSwitcher from "./Components/ThemeSwitcher"; +import LangSelector from "../LangSelector/LangSelector"; +import CakePrice from "../CakePrice/CakePrice"; +import { LogoWithTextIcon, ArrowForwardIcon } from "../Svg"; +import { Button } from "../Button"; +import { Colors } from "../.."; + +const MenuItem: React.FC = ({ + items, + isDark, + toggleTheme, + currentLang, + langs, + setLang, + cakePriceUsd, + buyCakeLabel, + ...props +}) => { + return ( + + + + + + + {items?.map((item) => ( + + {item.label} + {item.items?.map(({ label, href, isHighlighted = false }) => ( + + + {label} + + + ))} + + ))} + + + + + + + + + + + + + + + + + + + + ); +}; + +export default MenuItem; diff --git a/packages/pancake-uikit/src/components/Footer/config.tsx b/packages/pancake-uikit/src/components/Footer/config.tsx new file mode 100644 index 000000000..0bac834a7 --- /dev/null +++ b/packages/pancake-uikit/src/components/Footer/config.tsx @@ -0,0 +1,163 @@ +import { Language } from "../LangSelector/types"; +import { FooterLinkType } from "./types"; + +export const footerLinks: FooterLinkType[] = [ + { + label: "About", + items: [ + { + label: "Contact", + href: "https://docs.pancakeswap.finance/contact-us", + }, + { + label: "Blog", + href: "https://pancakeswap.medium.com/", + }, + { + label: "Community", + href: "https://docs.pancakeswap.finance/contact-us/telegram", + }, + { + label: "CAKE", + href: "https://docs.pancakeswap.finance/tokenomics/cake", + }, + { + label: "—", + }, + { + label: "Online Store", + href: "https://pancakeswap.creator-spring.com/", + isHighlighted: true, + }, + ], + }, + { + label: "Help", + items: [ + { + label: "Customer", + href: "Support https://docs.pancakeswap.finance/contact-us/customer-support", + }, + { + label: "Troubleshooting", + href: "https://docs.pancakeswap.finance/help/troubleshooting", + }, + { + label: "Guides", + href: "https://docs.pancakeswap.finance/get-started", + }, + ], + }, + { + label: "Developers", + items: [ + { + label: "Github", + href: "https://github.com/pancakeswap", + }, + { + label: "Documentation", + href: "https://docs.pancakeswap.finance", + }, + { + label: "Bug Bounty", + href: "https://app.gitbook.com/@pancakeswap-1/s/pancakeswap/code/bug-bounty", + }, + { + label: "Audits", + href: "https://docs.pancakeswap.finance/help/faq#is-pancakeswap-safe-has-pancakeswap-been-audited", + }, + { + label: "Careers", + href: "https://docs.pancakeswap.finance/hiring/become-a-chef", + }, + ], + }, +]; + +export const socials = [ + { + label: "Twitter", + icon: "Twitter", + href: "https://twitter.com/pancakeswap", + }, + { + label: "Telegram", + icon: "Telegram", + items: [ + { + label: "English", + href: "https://t.me/pancakeswap", + }, + { + label: "Bahasa Indonesia", + href: "https://t.me/PancakeSwapIndonesia", + }, + { + label: "中文", + href: "https://t.me/PancakeSwap_CN", + }, + { + label: "Tiếng Việt", + href: "https://t.me/PancakeSwapVN", + }, + { + label: "Italiano", + href: "https://t.me/pancakeswap_ita", + }, + { + label: "русский", + href: "https://t.me/pancakeswap_ru", + }, + { + label: "Türkiye", + href: "https://t.me/pancakeswapturkiye", + }, + { + label: "Português", + href: "https://t.me/PancakeSwapPortuguese", + }, + { + label: "Español", + href: "https://t.me/PancakeswapEs", + }, + { + label: "日本語", + href: "https://t.me/pancakeswapjp", + }, + { + label: "Français", + href: "https://t.me/pancakeswapfr", + }, + { + label: "Announcements", + href: "https://t.me/PancakeSwapAnn", + }, + { + label: "Whale Alert", + href: "https://t.me/PancakeSwapWhales", + }, + ], + }, + { + label: "Reddit", + icon: "Reddit", + href: "https://reddit.com/r/pancakeswap", + }, + { + label: "Instagram", + icon: "Instagram", + href: "https://instagram.com/pancakeswap_official", + }, + { + label: "Github", + icon: "Github", + href: "https://github.com/pancakeswap/", + }, +]; + +export const langs: Language[] = [...Array(20)].map((_, i) => ({ + code: `en${i}`, + language: `English${i}`, + locale: `Locale${i}`, +})); diff --git a/packages/pancake-uikit/src/components/Footer/index.stories.tsx b/packages/pancake-uikit/src/components/Footer/index.stories.tsx new file mode 100644 index 000000000..9c72f594c --- /dev/null +++ b/packages/pancake-uikit/src/components/Footer/index.stories.tsx @@ -0,0 +1,31 @@ +import { noop } from "lodash"; +import React from "react"; +import { BrowserRouter } from "react-router-dom"; +import { langs, footerLinks } from "./config"; +import Footer from "./Footer"; +import { FooterProps } from "./types"; + +export default { + title: "Components/Menu/Footer", + component: Footer, +}; + +const Template: React.FC = ({ ...args }) => { + return ( + +