forked from aws-amplify/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from jacoblogan/link-checker-update
Link checker update
- Loading branch information
Showing
66 changed files
with
3,565 additions
and
527 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,7 +30,6 @@ nbproject | |
| .project | ||
| .settings | ||
| .vs | ||
| .vscode | ||
| composer.lock | ||
| *.swp | ||
| *.swo | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. | ||
| // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp | ||
|
|
||
| // List of extensions which should be recommended for users of this workspace. | ||
| "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"], | ||
| // List of extensions recommended by VS Code that should not be recommended for users of this workspace. | ||
| "unwantedRecommendations": [] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| { | ||
| "editor.defaultFormatter": "esbenp.prettier-vscode", | ||
| "editor.formatOnSave": true, | ||
| "editor.insertSpaces": true, | ||
| "editor.tabSize": 2, | ||
| "files.insertFinalNewline": true, | ||
| "typescript.tsdk": "node_modules/typescript/lib", | ||
| "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, | ||
| "[typescript]": { | ||
| "editor.defaultFormatter": "esbenp.prettier-vscode" | ||
| }, | ||
| "[mdx]": { | ||
| "editor.wordWrap": "on" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { Icon } from '@aws-amplify/ui-react'; | ||
| import { MdHighlightAlt, MdExpandMore } from 'react-icons/md'; | ||
|
|
||
| export const Expand = () => { | ||
| return ( | ||
| <Icon aria-label="Expand"> | ||
| <MdExpandMore size={32} /> | ||
| </Icon> | ||
| ); | ||
| }; | ||
|
|
||
| export const DeepDive = () => { | ||
| return ( | ||
| <Icon aria-label="Deep Dive"> | ||
| <MdHighlightAlt size={'unset'} /> | ||
| </Icon> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import { useRef, useState, createElement, useEffect } from 'react'; | ||
| import { Details, Summary } from './styles'; | ||
| import { Expand, DeepDive } from './icons'; | ||
| import { trackExpanderOpen } from '../../utils/track'; | ||
|
|
||
| type AccordionProps = { | ||
| title?: string; | ||
| headingLevel?: string; | ||
| eyebrow?: string; | ||
| }; | ||
|
|
||
| const Accordion: React.FC<AccordionProps> = ({ | ||
| title, | ||
| headingLevel, | ||
| eyebrow, | ||
| children | ||
| }) => { | ||
| const [closeButton, setCloseButton] = useState(true); | ||
| const [initialHeight, setInitialHeight] = useState(0); | ||
| const [expandedHeight, setExpandedHeight] = useState(0); | ||
| const docsExpander = useRef<HTMLElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| const expander = docsExpander.current; | ||
|
|
||
| const initHeight = | ||
| expander?.children['docs-expander__summary']?.offsetHeight; | ||
| const expHeight = getHiddenHeight(expander); | ||
|
|
||
| setInitialHeight(initHeight); | ||
| setExpandedHeight(expHeight); | ||
|
|
||
| // Current decision is to leave the footer close on all expanders | ||
| // if (expandedHeight > window.innerHeight) { | ||
| // setCloseButton(true); | ||
| // } | ||
| }, [initialHeight, expandedHeight, closeButton]); | ||
|
|
||
| function getHiddenHeight(el) { | ||
| if (!el?.cloneNode) { | ||
| return null; | ||
| } | ||
|
|
||
| const clone = el.cloneNode(true); | ||
| clone.setAttribute('open', ''); | ||
| el.after(clone); | ||
| const height = clone.offsetHeight; | ||
| clone.remove(); | ||
| return height; | ||
| } | ||
|
|
||
| const headingId = title?.replace(/\s+/g, '-').toLowerCase(); | ||
| headingLevel = headingLevel ? 'h' + headingLevel : 'div'; | ||
| const expanderTitle = createElement( | ||
| headingLevel, | ||
| { | ||
| id: headingId, | ||
| className: 'docs-expander__title' | ||
| }, | ||
| title | ||
| ); | ||
|
|
||
| const anchor = createElement( | ||
| 'a', | ||
| { href: window.location.pathname + '#' + headingId }, | ||
| expanderTitle | ||
| ); | ||
|
|
||
| const collapse = [ | ||
| { | ||
| maxHeight: expandedHeight + 'px' | ||
| }, | ||
| { maxHeight: initialHeight + 'px' } | ||
| ]; | ||
|
|
||
| const expand = [ | ||
| { maxHeight: initialHeight + 'px' }, | ||
| { | ||
| maxHeight: expandedHeight + 'px' | ||
| } | ||
| ]; | ||
|
|
||
| const animationTiming = { | ||
| duration: 700, | ||
| iterations: 1 | ||
| }; | ||
|
|
||
| const closeAccordion = () => { | ||
| const expander = docsExpander.current; | ||
| if (expander) { | ||
| const scrollToLoc = expander.offsetTop - 48 - 70 - 10; // account for nav heights and 10px buffer | ||
|
|
||
| expander.animate(collapse, animationTiming); | ||
| window.scrollTo({ | ||
| left: 0, | ||
| top: scrollToLoc, | ||
| behavior: 'smooth' | ||
| }); | ||
| setTimeout(function() { | ||
| expander.removeAttribute('open'); | ||
| }, 700); | ||
| } | ||
| }; | ||
|
|
||
| const toggleAccordion = (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| const expander = docsExpander.current; | ||
| // Close accordion | ||
| if (expander?.hasAttribute('open')) { | ||
| expander?.animate(collapse, animationTiming); | ||
| setTimeout(function() { | ||
| expander.removeAttribute('open'); | ||
| }, 700); | ||
| } else { | ||
| // Open accordion | ||
| trackExpanderOpen(expander?.id.replace('-acc', '')); | ||
| expander?.setAttribute('open', ''); | ||
| expander?.animate(expand, animationTiming); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Details | ||
| id={headingId + '-acc'} | ||
| className="docs-expander" | ||
| ref={docsExpander} | ||
| > | ||
| <Summary | ||
| id="docs-expander__summary" | ||
| className="docs-expander__summary" | ||
| onClick={toggleAccordion} | ||
| > | ||
| <div className="docs-expander__eyebrow"> | ||
| <DeepDive /> | ||
| {eyebrow} | ||
| </div> | ||
| {anchor} | ||
| <div className="docs-expander__title__indicator"> | ||
| <Expand /> | ||
| </div> | ||
| </Summary> | ||
| <div id="docs-expander__body" className="docs-expander__body"> | ||
| {children} | ||
| </div> | ||
| {closeButton ? ( | ||
| <button | ||
| id="docs-expander__body__button" | ||
| className="docs-expander__body__button" | ||
| onClick={closeAccordion} | ||
| > | ||
| <Expand /> | ||
| </button> | ||
| ) : null} | ||
| </Details> | ||
| ); | ||
| }; | ||
|
|
||
| export default Accordion; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| export const Details = styled.details` | ||
| --border-color: var(--amplify-colors-teal-40); | ||
| --background-color: var(--amplify-colors-teal-10); | ||
| --background-color-hover: var(--amplify-colors-teal-20); | ||
| --border-radius: 0.25rem; | ||
| --padding-inline: 1.25rem; | ||
| --padding-block: 1rem; | ||
| --text-color: var(--amplify-colors-teal-90); | ||
| border-radius: var(--border-radius); | ||
| border: 1px solid var(--border-color); | ||
| text-align: left; | ||
| overflow: hidden; | ||
| &[open] .docs-expander__summary { | ||
| border-end-end-radius: 0; | ||
| border-end-start-radius: 0; | ||
| } | ||
| &[open] .docs-expander__title__indicator svg { | ||
| transform: rotate(-180deg); | ||
| } | ||
| .docs-expander__body { | ||
| padding-inline: var(--padding-inline); | ||
| padding-block: var(--padding-block); | ||
| background-color: white; | ||
| border-top: 1px solid var(--border-color); | ||
| border-end-end-radius: var(--border-radius); | ||
| border-end-start-radius: var(--border-radius); | ||
| } | ||
| .docs-expander__body__button { | ||
| outline: none; | ||
| width: 100%; | ||
| border-bottom: 1px solid var(--border-color); | ||
| background-color: var(--amplify-colors-teal-10); | ||
| transform: rotate(-180deg); | ||
| padding-inline: var(--padding-inline); | ||
| padding-block: var(--padding-block); | ||
| text-align: left; | ||
| .amplify-icon { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| } | ||
| .docs-expander__body__button:hover { | ||
| cursor: pointer; | ||
| } | ||
| button.tab-active { | ||
| border-bottom: 0.25rem solid var(--amplify-colors-teal-20); | ||
| } | ||
| `; | ||
|
|
||
| export const Summary = styled.summary` | ||
| position: relative; | ||
| background-color: var(--background-color); | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 0.25rem; | ||
| cursor: pointer; | ||
| padding-inline: var(--padding-inline); | ||
| padding-block: var(--padding-block); | ||
| color: var(--text-color); | ||
| transition: background-color 0.25s ease-in-out; | ||
| border-radius: var(--border-radius); | ||
| list-style: none; | ||
| &:hover { | ||
| cursor: pointer; | ||
| --background-color: var(--background-color-hover); | ||
| } | ||
| .docs-expander__eyebrow { | ||
| font-size: 0.625rem; | ||
| font-weight: bold; | ||
| text-transform: uppercase; | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| gap: 0.25rem; | ||
| .amplify-icon { | ||
| svg { | ||
| height: unset !important; | ||
| } | ||
| } | ||
| } | ||
| .docs-expander__title { | ||
| font-weight: bold; | ||
| font-size: 1rem; | ||
| margin: 0; | ||
| color: #000; | ||
| scroll-padding-top: 100px !important; | ||
| } | ||
| .docs-expander__button { | ||
| border: none; | ||
| appearance: none; | ||
| background-color: var(--amplify-colors-teal-20); | ||
| color: var(--amplify-colors-teal-90); | ||
| font-weight: bold; | ||
| font-size: 0.75rem; | ||
| border-radius: var(--border-radius); | ||
| padding-inline: 0.5rem; | ||
| padding-block: 0.25rem; | ||
| cursor: pointer; | ||
| } | ||
| .docs-expander__button:hover { | ||
| background-color: var(--amplify-colors-teal-40); | ||
| } | ||
| .docs-expander__title__indicator svg { | ||
| position: absolute; | ||
| right: var(--padding-inline); | ||
| top: 50%; | ||
| margin-top: -0.5rem; | ||
| transition: transform 0.25s ease-in-out; | ||
| } | ||
| `; |
Oops, something went wrong.