From dd2f3980401fa86e4301608626f998cc32974b04 Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Wed, 19 Jun 2024 15:37:42 +0400 Subject: [PATCH 01/16] chore: footer implementation --- package-lock.json | 292 ++++++++++++++++++ package.json | 3 + .../CustomAccordion/custom-accordion.scss | 79 +++++ src/components/CustomAccordion/index.tsx | 36 +++ src/components/Footer/Footer.module.scss | 208 +++++++++---- src/components/Footer/index.tsx | 205 ++++++++++-- static/img/logo.png | Bin 0 -> 2324 bytes 7 files changed, 728 insertions(+), 95 deletions(-) create mode 100644 src/components/CustomAccordion/custom-accordion.scss create mode 100644 src/components/CustomAccordion/index.tsx create mode 100644 static/img/logo.png diff --git a/package-lock.json b/package-lock.json index 6a0cce5a4..faa2729e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,9 @@ "name": "deriv-api-docs", "version": "0.0.0", "dependencies": { + "@deriv-com/quill-ui": "^1.10.26", "@deriv/deriv-api": "^1.0.11", + "@deriv/quill-icons": "^1.22.10", "@deriv/ui": "^0.8.0", "@docusaurus/core": "^3.3.2", "@docusaurus/plugin-client-redirects": "^3.3.2", @@ -17,6 +19,7 @@ "@easyops-cn/docusaurus-search-local": "^0.40.1", "@hookform/resolvers": "^2.9.10", "@mdx-js/react": "^3.0.0", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-tabs": "^1.0.2", "@textea/json-viewer": "^3.4.1", @@ -2563,6 +2566,49 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@deriv-com/quill-ui": { + "version": "1.10.26", + "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.26.tgz", + "integrity": "sha512-LmRrNd9prSKtA0AtWXCZNot21dG4zGU07vamdylmhv/jHmBnnPzxSSfPf30nC3Rb+llHbrUCfrpC+e7WECWXiw==", + "dependencies": { + "@deriv/quill-icons": "^1.22.10", + "@headlessui/react": "^1.7.18", + "react-calendar": "^5.0.0", + "react-swipeable": "^6.2.1", + "react-tiny-popover": "^8.0.4", + "usehooks-ts": "^3.0.2", + "uuid": "^9.0.1" + }, + "optionalDependencies": { + "@rollup/rollup-linux-x64-gnu": "^4.9.6" + } + }, + "node_modules/@deriv-com/quill-ui/node_modules/usehooks-ts": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz", + "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==", + "dependencies": { + "lodash.debounce": "^4.0.8" + }, + "engines": { + "node": ">=16.15.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, + "node_modules/@deriv-com/quill-ui/node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@deriv/api-types": { "version": "1.0.292", "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.292.tgz", @@ -2579,6 +2625,15 @@ "rxjs": "^7.8.1" } }, + "node_modules/@deriv/quill-icons": { + "version": "1.22.10", + "resolved": "https://registry.npmjs.org/@deriv/quill-icons/-/quill-icons-1.22.10.tgz", + "integrity": "sha512-BtyMfKln7iBcTcERiaj3t8ADMplCOfE3J184Asaa/9RnE42e5JtehkYw78lwinYTBTzr1sL5tK0GRNlziFNRKw==", + "peerDependencies": { + "react": ">= 16", + "react-dom": ">= 16" + } + }, "node_modules/@deriv/ui": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@deriv/ui/-/ui-0.8.0.tgz", @@ -3845,6 +3900,22 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@headlessui/react": { + "version": "1.7.19", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz", + "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==", + "dependencies": { + "@tanstack/react-virtual": "^3.0.0-beta.60", + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@hookform/resolvers": { "version": "2.9.11", "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-2.9.11.tgz", @@ -5500,6 +5571,37 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-accordion": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz", + "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collapsible": "1.0.3", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-arrow": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", @@ -5553,6 +5655,36 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", + "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", @@ -6252,6 +6384,18 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz", + "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ] + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -6574,6 +6718,31 @@ "node": ">=14.16" } }, + "node_modules/@tanstack/react-virtual": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.5.1.tgz", + "integrity": "sha512-jIsuhfgy8GqA67PdWqg73ZB2LFE+HD9hjWL1L6ifEIZVyZVAKpYmgUG4WsKQ005aEyImJmbuimPiEvc57IY0Aw==", + "dependencies": { + "@tanstack/virtual-core": "3.5.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.5.1.tgz", + "integrity": "sha512-046+AUSiDru/V9pajE1du8WayvBKeCvJ2NmKPy/mR8/SbKKrqmSbj7LJBfXE+nSq4f5TBXvnCzu0kcYebI9WdQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@testing-library/dom": { "version": "10.1.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz", @@ -7926,6 +8095,14 @@ "@xtuc/long": "4.2.2" } }, + "node_modules/@wojtekmaj/date-utils": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz", + "integrity": "sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==", + "funding": { + "url": "https://github.com/wojtekmaj/date-utils?sponsor=1" + } + }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -9424,6 +9601,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -12961,6 +13143,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-user-locale": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/get-user-locale/-/get-user-locale-2.3.2.tgz", + "integrity": "sha512-O2GWvQkhnbDoWFUJfaBlDIKUEdND8ATpBXD6KXcbhxlfktyD/d8w6mkzM/IlQEqGZAMz/PW6j6Hv53BiigKLUQ==", + "dependencies": { + "mem": "^8.0.0" + }, + "funding": { + "url": "https://github.com/wojtekmaj/get-user-locale?sponsor=1" + } + }, "node_modules/git-raw-commits": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.11.tgz", @@ -17754,6 +17947,17 @@ "tmpl": "1.0.5" } }, + "node_modules/map-age-cleaner": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz", + "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==", + "dependencies": { + "p-defer": "^1.0.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/map-obj": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz", @@ -18402,6 +18606,29 @@ "node": ">= 0.6" } }, + "node_modules/mem": { + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz", + "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==", + "dependencies": { + "map-age-cleaner": "^0.1.3", + "mimic-fn": "^3.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sindresorhus/mem?sponsor=1" + } + }, + "node_modules/mem/node_modules/mimic-fn": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz", + "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/memfs": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz", @@ -21170,6 +21397,14 @@ "node": ">=12.20" } }, + "node_modules/p-defer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", + "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==", + "engines": { + "node": ">=4" + } + }, "node_modules/p-limit": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", @@ -22601,6 +22836,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-calendar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/react-calendar/-/react-calendar-5.0.0.tgz", + "integrity": "sha512-bHcE5e5f+VUKLd4R19BGkcSQLpuwjKBVG0fKz74cwPW5xDfNsReHdDbfd4z3mdjuUuZzVtw4Q920mkwK5/ZOEg==", + "dependencies": { + "@wojtekmaj/date-utils": "^1.1.3", + "clsx": "^2.0.0", + "get-user-locale": "^2.2.1", + "warning": "^4.0.0" + }, + "funding": { + "url": "https://github.com/wojtekmaj/react-calendar?sponsor=1" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-calendar/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -22955,6 +23222,14 @@ } } }, + "node_modules/react-swipeable": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-6.2.2.tgz", + "integrity": "sha512-Oz7nSFrssvq2yvy05aNL3F+yBUqSvLsK6x1mu+rQFOpMdQVnt4izKt1vyjvvTb70q6GQOaSpaB6qniROW2MAzQ==", + "peerDependencies": { + "react": "^16.8.3 || ^17 || ^18" + } + }, "node_modules/react-table": { "version": "7.8.0", "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz", @@ -22987,6 +23262,15 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "dev": true }, + "node_modules/react-tiny-popover": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/react-tiny-popover/-/react-tiny-popover-8.0.4.tgz", + "integrity": "sha512-pn0Y/G0gyMdYTBEWSKCCnaZsXAa54PkfnRE4fnMM5633SSClYrXxwXKc6vPYgJ9shLatGginxMjnhXq6guZmng==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -26527,6 +26811,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", diff --git a/package.json b/package.json index 90e3d03bd..3a60b8edc 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,9 @@ "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,md,json}' --config ./.prettierrc" }, "dependencies": { + "@deriv-com/quill-ui": "^1.10.26", "@deriv/deriv-api": "^1.0.11", + "@deriv/quill-icons": "^1.22.10", "@deriv/ui": "^0.8.0", "@docusaurus/core": "^3.3.2", "@docusaurus/plugin-client-redirects": "^3.3.2", @@ -30,6 +32,7 @@ "@easyops-cn/docusaurus-search-local": "^0.40.1", "@hookform/resolvers": "^2.9.10", "@mdx-js/react": "^3.0.0", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.0.2", "@radix-ui/react-tabs": "^1.0.2", "@textea/json-viewer": "^3.4.1", diff --git a/src/components/CustomAccordion/custom-accordion.scss b/src/components/CustomAccordion/custom-accordion.scss new file mode 100644 index 000000000..17df1cba6 --- /dev/null +++ b/src/components/CustomAccordion/custom-accordion.scss @@ -0,0 +1,79 @@ +.accordion_root { + margin: 16px; + margin-top: 48px; + display: flex; + flex-direction: column; + + &__item { + overflow: hidden; + margin-top: 2px; + border-radius: 24px; + } +} + +.accordion_header { + display: flex; + background-color: transparent; + + [data-state='open'] { + background-color: var(--opacity-black-75); + } + + &__trigger { + font-family: inherit; + padding: 24px; + height: 42px; + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 16px; + line-height: 1; + } + + .accordion_chevron { + transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1); + } + + [data-state='open'] > .accordion_chevron { + transform: rotate(180deg); + } +} + +.accordion_content { + overflow: hidden; + background-color: var(--opacity-black-75); + + &__text { + padding: 16px 18px; + font-size: 14px; + font-weight: 400; + } + + &[data-state='open'] { + animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1); + } + + &[data-state='closed'] { + animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1); + background-color: transparent; + } +} + +@keyframes slideDown { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } +} + +@keyframes slideUp { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } +} diff --git a/src/components/CustomAccordion/index.tsx b/src/components/CustomAccordion/index.tsx new file mode 100644 index 000000000..4e134018e --- /dev/null +++ b/src/components/CustomAccordion/index.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { StandaloneChevronDownRegularIcon } from '@deriv/quill-icons'; +import * as Accordion from '@radix-ui/react-accordion'; +import './custom-accordion.scss'; + +type TCustomAccordionProps = { + items: Array<{ header: string; content: React.ReactNode }>; +}; + +const AccordionTrigger: React.FC = ({ children }) => ( + + + {children} + + + +); + +const AccordionContent: React.FC = ({ children }) => ( + +
{children}
+ +); + +const CustomAccordion: React.FC = ({ items }) => ( + + {items.map((item) => ( + + {item.header} + {item.content} + + ))} + +); + +export default CustomAccordion; diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss index abbe47e6b..34d419e02 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -1,78 +1,158 @@ @use 'src/styles/utility' as *; .FooterContainer { - background-color: #414652; display: flex; - flex-direction: row; - padding: rem(4.4); - justify-content: space-evenly; - margin-top: rem(2.5); - - @media screen and (max-width: 992px) { - flex-direction: column; - gap: rem(4); - padding: rem(4); - } + flex-direction: column; + justify-content: center; + align-items: center; + background-color: var(--core-color-solid-slate-50, #fff); + margin-bottom: rem(4.8); +} + +.FooterBody { + display: flex; + gap: rem(9.6); + margin-bottom: rem(4.8); + padding: 0 rem(4.8); +} + +.FooterLogo { + background-size: contain; + display: inline-block; + position: relative; + align-self: flex-start; + gap: 24px; +} + +.Section1 { + display: flex; + flex-direction: column; + width: 120px; + height: 100px; + margin-bottom: rem(4.8); +} + +.SectionTitle { + font-family: 'Ubuntu', sans-serif; + font-size: rem(1.6) !important; + color: var(--core-color-solid-slate-1400, #000); + text-align: left; + margin-bottom: rem(1.6); +} + +.List { + list-style: none; + padding: 0; +} + +ul li { + margin-bottom: rem(1.6) !important; + display: flex; + align-items: flex-start; + gap: 8px; +} + +h3 { + align-items: left; +} + +a { + color: var(--core-color-opacity-black-600, rgba(0, 0, 0, 0.72)); +} + +.Link { + color: #000; + text-decoration: none; + margin-bottom: rem(1.6); +} +.SectionContent { + color: #000; + font-size: rem(1.4); + margin-bottom: rem(1.6); +} + +.Communities { + display: flex; + flex-direction: column; + gap: rem(1.6); +} + +.CommunityButton { + font-size: 14px; + font-weight: 700; + line-height: 22px; + display: flex; + gap: 10px; +} + +.Box { + border: 1px solid #ddd; + padding: rem(1.6); + border-radius: rem(2.4); + width: 320px !important; +} + +.EmailButton { + font-size: 14px; + font-weight: 700; + line-height: 22px; + display: flex; +} + +.MobileAccordion { + display: none; +} + +@media (max-width: 1244px) { .FooterBody { + gap: rem(3.6); + } +} + +@media (max-width: 996px) { + .FooterContainer { display: flex; - flex-direction: column; align-items: center; - gap: rem(1); - .FooterContent { - font-family: 'Ubuntu', sans-serif; - font-size: rem(3.2); - color: var(--ifm-color-white); - @media screen and (max-width: 992px) { - font-size: rem(2.4); - } - } - .FooterBodyContent { - color: var(--ifm-color-white); - font-weight: 400; - text-align: center; - @media screen and (max-width: 992px) { - font-size: rem(1.6); - } - } + } + .FooterBody { + padding: 0 0 !important; + grid-template-columns: 2fr; + gap: 24px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } - .FooterBodyContentEmail { - color: var(--ifm-color-white); - font-weight: 400; - @media screen and (max-width: 992px) { - font-size: rem(1.4); - } - } - .Email { - color: var(--ifm-color-danger); - padding: 0 rem(0.5); - } - .Communities { - display: flex; - align-items: center; - gap: rem(1.7); - } - .communityButton { - font-family: 'Ubuntu', sans-serif; - color: var(--ifm-color-white); - border: 2px solid var(--ifm-color-secondary-darkest); - padding: rem(0.8) rem(1.6); - border-radius: rem(1.7); - font-size: rem(1.4); - font-weight: bold; - text-decoration: none; - cursor: pointer; - white-space: nowrap; + .FooterLogo { + display: flex; + gap: 24px; + align-self: center; + } + + @media (max-width: 600px) { + .MobileAccordion { + display: block; + width: 100%; + margin-bottom: 16px; } - .Telegram { - display: flex; + + .FooterBody { + padding: 0 0 !important; justify-content: center; - align-items: center; - gap: rem(0.8); - } - .TelegramIcon { - width: rem(2); - height: rem(1.657); + gap: 24px; } } + + .Section1:nth-child(1), + .Section1:nth-child(2) { + display: none; + } + + .MobileAccordion { + display: block; + width: 100%; + margin: 0; + } } diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 0f10b85ae..d5893c4f5 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,43 +1,186 @@ import React from 'react'; import { Text } from '@deriv/ui'; import styles from './Footer.module.scss'; +import { LabelPairedArrowUpRightSmRegularIcon } from '@deriv/quill-icons'; +import { Button } from '@deriv-com/quill-ui'; +import { SocialTelegramBlackIcon } from '@deriv/quill-icons'; +import { LabelPairedEnvelopeCaptionBoldIcon } from '@deriv/quill-icons'; +import CustomAccordion from '../CustomAccordion'; const Footer = () => { + const accordionItems = [ + { + header: 'API', + content: ( + + ), + }, + { + header: 'Deriv.com', + content: ( + + ), + }, + ]; + return ( ); }; + export default Footer; diff --git a/static/img/logo.png b/static/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..abf67b411cae315a6d4be4b5a8d1fb2b8470fb48 GIT binary patch literal 2324 zcmV+v3G4QWP)907YT?DqZ8VdsR^@0%bc;VKVihXmhO3={3o*@v-f->9H+(a7+~tkdQ3> z1E^Q^Soum_EuaZt$|Cu8H#7VGX7?>0B_;47&cHPJes{tqTtBgm{H&MwJKZiP5 z`^Da`o6isac{*>MqqkUm%AI~^=l+I?%%%~h4O-hYiILLT*=fHR4)>2!++o(}GzH9H zFc@FifCfFpl}w+&TSOD3J}wS~I6{S_(KkK+8UEj!w=UNk8Q__hv4+D(q(k}~ZnxT> z;I~bcN=kB+V~#uWfLUlj@~Bv!U+3p+5l!6tlo4~iE-&0tq~25Vxp>;mdMKvHJ~tZZi=)3WS0J3l(Awky#$0cAVzIk zt~l<<0w!ocN)OXS@1itYW^%r!D|bZI2db(-B(OuGL2NEpQ+uW*hP0Ij=F&D6c=QMoB38A`|ub@kFcNlzSHY4o6+4#3X{ski)L= zS^$_s#nl;(P(7%}T_eVft#e>L98(PS&(cK67s@h1ZkhL+2VQ z`J2YIPmc~hca(^bxHq1}e{r8z0)W&YWurnu5Bu}ytbSX=WfBm*G+qUsE?-;4uOe$; z8vnU3_n`Nv7!78?B?T%NnUw~6dHsKR&5|kj=z04sS^(P1pg*X9FAMhMxHVPkc2PD^ zjwih@4qL5zHd&H6*x@51ZM8Jyr8B+GO$3KRq)@RMlUyU zowMe(wjO!L>zkBir1%EmLi?0G*NH%0W29E6{>)=(V(Zaqz9+2LuH1fvvGl5zmMf0L zfee8z|2l60aM-f8efO8vVT_KNQpq(VO;efi4b1Or#lF#a2$CMsPbv{2^Fizr3+J>3 z)IM^;^z{5mH{8nvMre5*3e86?7@EOukQW%2HB-9ZXQGTRU=D?z%WF&s(M?5CfP{2B z#VGUo{LpV3<~HgAoy^Lerf7}}9KBJKuA|@CC17=wz6{9OP|a5Q@ax94Zl1Y#Mr!D| zOraV4c5;86vN)8@sp#bb#=Q*XO3!2pUJFv-xxB`Z!m*Wbu16x>^P=dpY0Zoa1N*3y zla_KMl+GOQC&aTz!MX;Glff{;@e>_K5=Q@TTsu7Kxh02ZqVVnTbq%IlQHkrWXx zsCr?`P*1tisU=7}C#fs?zEcHjjExS~K4kS)&%^^K6L`^QhtC>{b#nUplkMGmK{`}c&Evmc0!&ZzK)#86J_7c_!rrTmjs@%E=qM1oEQ>3;mu>HS>0)U06LyI0#6cE zL92ByacPQzd>;6G908K^qiS@Kmou-g89Q-!o)a(f1qJr$Pk4BJ^WQcQ@~nHykP{-& zt(0$xD|kt$L(_AKCO9Tt?@w^z)zxHlHffyso3RszB=Q=27g$h=91cp4&BjUZF6L8G z62C*rE)19%#7R?iW2X=ThwQUV`!iF6;>WPqFN~j7S6~F>XD~U zghY#jB<%;$cttv0G(rne-2}%bm1j83HyZZgqJ$e3jp#GqD{1n789u>!5HLs`0`-w^ zU5&vpTrk~J+wi?aAEdRm;49OX0%w_QSTVlTdsE6td@AFYo1!W_8}4`Y^2+Z?V0>Ws zA($S>Kr|W~9y|)(LwtmYXj1V)$ojvL3DtwNC13(lOHhMA37#+FnNz4<(|-9_?7Kvt ul~*e^jF3%h0QM5MZZ9F?8HvxFbNUwFh7t|Ia7gh00000 Date: Thu, 20 Jun 2024 09:49:51 +0400 Subject: [PATCH 02/16] fix: test --- jest.config.js | 5 +- .../Footer/__tests__/Footer.test.tsx | 66 ++++++++----------- src/components/Footer/index.tsx | 8 +-- .../__tests__/ApiExplorer.test.tsx | 2 +- 4 files changed, 38 insertions(+), 43 deletions(-) diff --git a/jest.config.js b/jest.config.js index b2e090aaa..530dd5ea9 100644 --- a/jest.config.js +++ b/jest.config.js @@ -21,7 +21,9 @@ module.exports = { ], '^.+\\.mjs$': 'babel-jest', }, - transformIgnorePatterns: ['node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme)'], + transformIgnorePatterns: [ + 'node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme|@deriv-com/quill-ui)', + ], moduleNameMapper: { '@theme/(.*)': '@docusaurus/theme-classic/src/theme/$1', @@ -33,6 +35,7 @@ module.exports = { '@docusaurus/plugin-content-docs/client': '@docusaurus/plugin-content-docs/src/client/index.ts', '@site/(.*)': '/$1', '\\.(css|scss|sass|less)$': 'identity-obj-proxy', + '@deriv-com/quill-ui': 'node_modules/@deriv-com/quill-ui/dist/main.js', }, moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'mjs', 'json'], rootDir: '.', diff --git a/src/components/Footer/__tests__/Footer.test.tsx b/src/components/Footer/__tests__/Footer.test.tsx index 49c6a2244..6334fcb7b 100644 --- a/src/components/Footer/__tests__/Footer.test.tsx +++ b/src/components/Footer/__tests__/Footer.test.tsx @@ -1,46 +1,38 @@ import React from 'react'; -import '@testing-library/jest-dom'; -import { cleanup, render, screen, RenderResult, within } from '@site/src/test-utils'; -import Footer from '../'; -import userEvent from '@testing-library/user-event'; +import { render, screen, fireEvent } from '@testing-library/react'; +import Footer from '../index'; -describe('HeroHeader', () => { - let render_result: RenderResult; - beforeEach(() => { - render_result = render(