From c38a5ec6825fc57130638700fc6fda3a8ed89fbb Mon Sep 17 00:00:00 2001 From: Mirna Wong <89008547+mirnawong1@users.noreply.github.com> Date: Thu, 23 May 2024 15:40:11 +0100 Subject: [PATCH] Revert "updates the expandable component" --- website/src/components/expandable/index.js | 89 ++++++------------- .../components/expandable/styles.module.css | 74 ++------------- website/src/theme/MDXComponents/index.js | 4 +- website/static/js/headerLinkCopy.js | 2 +- 4 files changed, 37 insertions(+), 132 deletions(-) diff --git a/website/src/components/expandable/index.js b/website/src/components/expandable/index.js index 1e971c1e182..eb1dc966ad1 100644 --- a/website/src/components/expandable/index.js +++ b/website/src/components/expandable/index.js @@ -1,22 +1,23 @@ /* eslint-disable */ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import styles from './styles.module.css'; function slugify(text) { return text.toString().toLowerCase() - .normalize('NFD') // normalize to nfd unicode form - .replace(/[\u0300-\u036f]/g, '') // remove diacritics - .replace(/\s+/g, '-') // replace spaces with - - .replace(/[^\w\-]+/g, '') // remove all non-word chars - .replace(/\-\-+/g, '-') // replace multipl - with a single - - .replace(/^-+/, '') // trim - from the start - .replace(/-+$/, ''); // trim - from the end + .normalize('NFD') // Normalize to NFD Unicode form + .replace(/[\u0300-\u036f]/g, '') // Remove diacritics + .replace(/\s+/g, '-') // Replace spaces with - + .replace(/[^\w\-]+/g, '') // Remove all non-word chars + .replace(/\-\-+/g, '-') // Replace multiple - with single - + .replace(/^-+/, '') // Trim - from start + .replace(/-+$/, ''); // Trim - from end } -function Expandable({ children, alt_header = null }) { - if (!alt_header) { return null; } +function expandable({ children, alt_header = null }) { + if(!alt_header) { return null; } const [isOn, setOn] = useState(false); + // generate a slug from the alt_header const anchorId = slugify(alt_header); const handleToggleClick = (event) => { @@ -24,65 +25,27 @@ function Expandable({ children, alt_header = null }) { setOn(current => !current); }; - const handleCopyClick = (event) => { - event.preventDefault(); - event.stopPropagation(); - const url = `${window.location.href.split('#')[0]}#${anchorId}`; - navigator.clipboard.writeText(url).then(() => { - showCopyPopup(); - }); - }; - - const showCopyPopup = () => { - const popup = document.createElement('div'); - popup.classList.add('copy-popup'); - popup.innerText = 'Link copied!'; - - // Add close button ('x') - const closeButton = document.createElement('span'); - closeButton.classList.add('close-button'); - closeButton.innerHTML = ' ×'; // '×' symbol for 'x' - closeButton.addEventListener('click', () => { - if (document.body.contains(popup)) { - document.body.removeChild(popup); - } - }); - popup.appendChild(closeButton); - - document.body.appendChild(popup); - - setTimeout(() => { - if (document.body.contains(popup)) { - document.body.removeChild(popup); - } - }, 3000); -}; - -useEffect(() => { - if (window.location.hash === `#${anchorId}`) { - setOn(true); - const element = document.getElementById(anchorId); - if (element) { - element.scrollIntoView({ behavior: 'smooth' }); - } - } -}, [anchorId]); - return ( -
-
+ -
+ {alt_header} + +
{children}
); } -export default Expandable; +export default expandable; diff --git a/website/src/components/expandable/styles.module.css b/website/src/components/expandable/styles.module.css index 394418e41ee..9345b7986e3 100644 --- a/website/src/components/expandable/styles.module.css +++ b/website/src/components/expandable/styles.module.css @@ -4,49 +4,14 @@ text-decoration: none; transition: text-decoration 0.3s; /* Smooth transition */ font-weight: 600; - margin-bottom: 10px; + margin-bottom: 20px; } -:local(.header) { - display: flex; - align-items: center; +:local(.link:hover) :local(.headerText), +:local(.link:focus) :local(.headerText) { + text-decoration: underline; cursor: pointer; - color: rgba(18, 12, 12, 0.862); - font-weight: 550; - margin-bottom: 10px; - text-decoration: none; - } - - - :local(.copyIcon) { - width: 12px; - height: 12px; - background-image: url('/img/copy.png'); - background-size: contain; - background-repeat: no-repeat; - opacity: 0; - transition: opacity 0.3s ease-in-out; - margin-left: 4px; - vertical-align: middle; - cursor: pointer; - } - - :local(.header:hover) :local(.copyIcon) { - opacity: 1; - } - - .copy-popup { - position: fixed; - top: 10px; - left: 50%; - transform: translateX(-50%); - background-color: #047377; - color: rgb(236, 236, 236); - padding: 10px; - border-radius: 5px; - z-index: 9999; - } - +} :local(.toggle)::before { content: ''; @@ -81,29 +46,10 @@ border-color: rgb(253, 153, 83); } -:local(.copyPopup) { - position: fixed; - top: 20px; - left: 50%; - transform: translateX(-50%); - background-color: #000; - color: #fff; - padding: 10px; - border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - z-index: 1000; - opacity: 0; - transition: opacity 0.3s ease-in-out; - } - - :local(.copyPopup.show) { - opacity: 1; - } - .expandableContainer :local(.body) { - margin-top: 2px; + margin-top: 10px; margin-left: .5em; - padding: 5px; + padding: 10px; background-color: transparent; } @@ -112,10 +58,6 @@ color: rgba(255, 255, 255, 0.801); /* White text in dark mode */ } -:local(html[data-theme='dark'] details .headerText) { - color: rgba(18, 12, 12, 0.862); /* this adds black text inside details in dark mode */ - } - :local(.body > p:last-child) { margin-bottom: 0px; @@ -139,6 +81,6 @@ } .expandableContainer { - margin-bottom: 5px; /* Adjust this value as needed to create space */ + margin-bottom: 10px; /* Adjust this value as needed to create space */ } \ No newline at end of file diff --git a/website/src/theme/MDXComponents/index.js b/website/src/theme/MDXComponents/index.js index e284fb2653f..4104632d28c 100644 --- a/website/src/theme/MDXComponents/index.js +++ b/website/src/theme/MDXComponents/index.js @@ -44,7 +44,7 @@ import dbtEditor from '@site/src/components/dbt-editor'; import Icon from '@site/src/components/icon'; import Lifecycle from '@site/src/components/lifeCycle'; import detailsToggle from '@site/src/components/detailsToggle'; -import Expandable from '@site/src/components/expandable'; +import expandable from '@site/src/components/expandable'; import ConfettiTrigger from '@site/src/components/confetti/'; const MDXComponents = { @@ -96,7 +96,7 @@ const MDXComponents = { Icon: Icon, Lifecycle: Lifecycle, detailsToggle: detailsToggle, - Expandable: Expandable, + expandable: expandable, ConfettiTrigger: ConfettiTrigger, }; export default MDXComponents; diff --git a/website/static/js/headerLinkCopy.js b/website/static/js/headerLinkCopy.js index 59a6140eb0f..3f7b33b59fb 100644 --- a/website/static/js/headerLinkCopy.js +++ b/website/static/js/headerLinkCopy.js @@ -8,7 +8,7 @@ window.addEventListener("load", copyHeader); // separating function from eventlistener to understand they are two separate things function copyHeader () { - const headers = document.querySelectorAll("h2.anchor, h3.anchor, h4.anchor"); + const headers = document.querySelectorAll("h2.anchor, h3.anchor, .expandable-anchor.anchor"); headers.forEach((header) => { header.style.cursor = "pointer";