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/package-lock.json b/package-lock.json index a5b33fa07..faa2729e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "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", @@ -18,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", @@ -2564,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", @@ -3855,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", @@ -5510,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", @@ -5563,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", @@ -6262,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", @@ -6584,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", @@ -7936,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", @@ -9434,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", @@ -12971,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", @@ -17764,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", @@ -18412,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", @@ -21180,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", @@ -22611,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", @@ -22965,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", @@ -22997,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", @@ -26537,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 075dce8c4..3a60b8edc 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "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", @@ -31,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..5428eb754 --- /dev/null +++ b/src/components/CustomAccordion/custom-accordion.scss @@ -0,0 +1,80 @@ +.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; + font-weight: 400; + } + + .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..0485d824c 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/Footer/Footer.module.scss @@ -1,78 +1,229 @@ @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); + flex-direction: column; + justify-content: center; + align-items: center; + background-color: var(--core-color-solid-slate-50, #fff); + margin-bottom: rem(4.8); - @media screen and (max-width: 992px) { + .FooterBody { + display: flex; flex-direction: column; - gap: rem(4); - padding: rem(4); + margin-bottom: rem(4.8); } - .FooterBody { + .FooterSection { + display: flex; + flex-direction: row; + gap: rem(9.6); + } + + .FooterLogo { + background-size: contain; + display: inline-block; + position: relative; + align-self: flex-start; + padding-bottom: rem(4.8); + 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)); + text-decoration: underline; + white-space: nowrap; + } + + .Link { + display: flex; 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); - } - } + gap: 8px; + color: #000; + text-decoration: none; + margin-bottom: rem(1.6); + } - .FooterBodyContentEmail { - color: var(--ifm-color-white); - font-weight: 400; - @media screen and (max-width: 992px) { - font-size: rem(1.4); - } + .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: 16px; + border-radius: rem(2.4); + width: 284px !important; + } + + .EmailButton { + font-size: 14px; + font-weight: 700; + line-height: 22px; + display: flex; + max-width: 382px; + } + + .MobileAccordion { + display: none; + } + + @media (max-width: 1244px) { + .FooterSection { + gap: rem(3.6); } - .Email { - color: var(--ifm-color-danger); - padding: 0 rem(0.5); + } + + @media (max-width: 1090px) { + .FooterSection { + gap: rem(1.8); } - .Communities { + } + + @media (max-width: 996px) { + .FooterContainer { 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; + + .CommunityButton { + display: grid; + width: 100%; } - .Telegram { + + .EmailButton { + display: grid; + } + .FooterSection { + padding: 32px; + grid-template-columns: 2fr; + gap: rem(2.4); display: flex; + flex-direction: row; + flex-wrap: wrap; justify-content: center; - align-items: center; - gap: rem(0.8); } - .TelegramIcon { - width: rem(2); - height: rem(1.657); + + h3 { + margin-bottom: 0px !important; + } + + .FooterBody { + display: flex; + width: 100%; + padding: 32px; + } + + p { + text-align: left; + margin-bottom: 0px !important; + } + + .Box { + display: flex; + flex-direction: column; + gap: 16px; + flex: 1 0 0; + padding-left: 64px; + padding-right: 64px; + } + + .FooterLogo { + display: flex; + gap: 24px; + padding-bottom: 0px; + } + + @media (max-width: 600px) { + .MobileAccordion { + display: block; + width: 100%; + margin-bottom: 16px; + } + + .Box { + align-items: center; + } + + p { + text-align: center; + } + + h3 { + text-align: center; + } + + .EmailButton { + display: flex; + width: 100%; + } + .FooterSection { + justify-content: center; + gap: 24px; + padding: 32px; + } + } + + .LogoWrapper { + align-self: center; + } + + .Section1:nth-child(1), + .Section1:nth-child(2) { + display: none; + } + + .MobileAccordion { + display: block; + width: 100%; + margin: 0; } } } diff --git a/src/components/Footer/__tests__/Footer.test.tsx b/src/components/Footer/__tests__/Footer.test.tsx index 49c6a2244..4ed47e1ca 100644 --- a/src/components/Footer/__tests__/Footer.test.tsx +++ b/src/components/Footer/__tests__/Footer.test.tsx @@ -1,46 +1,35 @@ 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(