From 53f75129367f42d5e719fc8a9156fda4d4c2cd87 Mon Sep 17 00:00:00 2001 From: ekachxaidze98 <65679299+ekachxaidze98@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:00:47 +0400 Subject: [PATCH] Core 4784 UI docs page (#1075) (#1076) * CORE-4784: create dropdown * CORE-4784: docs update * merge master --- components/docs-select/index.jsx | 58 ++ components/docs-select/styles.module.scss | 35 + components/layout/layout.jsx | 8 +- package-lock.json | 12 +- public/images/dropArrow.svg | 6 + report.20230517.140705.4715.0.001.json | 643 ------------------ .../data-providers-guide/index.jsx | 81 +-- .../data-providers-guide/styles.module.scss | 29 +- .../membership-documentation/index.jsx | 80 +-- .../styles.module.scss | 29 +- 10 files changed, 249 insertions(+), 732 deletions(-) create mode 100644 components/docs-select/index.jsx create mode 100644 components/docs-select/styles.module.scss create mode 100644 public/images/dropArrow.svg delete mode 100644 report.20230517.140705.4715.0.001.json diff --git a/components/docs-select/index.jsx b/components/docs-select/index.jsx new file mode 100644 index 000000000..7a8dc176e --- /dev/null +++ b/components/docs-select/index.jsx @@ -0,0 +1,58 @@ +import React, { useEffect, useRef, useState } from 'react' + +import styles from './styles.module.scss' +import arrow from '../../public/images/dropArrow.svg' + +const DocumentSelect = ({ list, handleSelect, selectedOption }) => { + const [showOptions, setShowOptions] = useState(false) + const dropdownRef = useRef(null) + + const onSelectOptionClick = (option) => { + handleSelect(option) + setShowOptions(false) + } + + const handleClickOutside = (event) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target)) + setShowOptions(false) + } + + useEffect(() => { + document.addEventListener('click', handleClickOutside) + + return () => { + document.removeEventListener('click', handleClickOutside) + } + }, []) + + return ( +
+ {/* eslint-disable-next-line max-len */} + {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} +
setShowOptions(!showOptions)} + className={styles.documentSelectLabel} + > + {selectedOption} + +
+ {showOptions && ( + + )} +
+ ) +} + +export default DocumentSelect diff --git a/components/docs-select/styles.module.scss b/components/docs-select/styles.module.scss new file mode 100644 index 000000000..698d92ca9 --- /dev/null +++ b/components/docs-select/styles.module.scss @@ -0,0 +1,35 @@ +.document-select { + position: relative; +} + +.document-select-label { + color: #212121; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 130%; + letter-spacing: 0.036px; + padding: 0 35px; +} + +.arrow { + margin-left: 30px; +} + +.document-dropdown { + width: 100%; + position: absolute; + top: 45px; + background: #fff; + border-radius: 0 0 2px 2px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.25); +} + +.document-item { + padding: 10px 30px; + cursor: pointer; +} + +.document-item:hover { + background: #eee; +} diff --git a/components/layout/layout.jsx b/components/layout/layout.jsx index 67b4b1f84..b93dd3c74 100644 --- a/components/layout/layout.jsx +++ b/components/layout/layout.jsx @@ -1,10 +1,12 @@ import React, { useCallback } from 'react' import { Header, Footer } from '@oacore/design' +import { useRouter } from 'next/router' import Head from './head' import SkipToContent from '../skip-to-content' const Layout = ({ title, description, children, onNavigate }) => { + const router = useRouter() const handleHeaderClick = useCallback( (event) => { const linkElement = event.target.closest('a') @@ -22,8 +24,10 @@ const Layout = ({ title, description, children, onNavigate }) => {