mirror of
https://github.com/explosion/spaCy.git
synced 2025-01-26 09:14:32 +03:00
Fix broken CSS classes
This commit is contained in:
Marcus Blättermann
parent
f6b43b6e7e
commit
6de49b9f1a
|
|
@ -26,12 +26,12 @@ const CodeBlock = (props) => (
|
|||
export default CodeBlock
|
||||
|
||||
export const Pre = (props) => {
|
||||
return <pre className={classes.pre}>{props.children}</pre>
|
||||
return <pre className={classes['pre']}>{props.children}</pre>
|
||||
}
|
||||
|
||||
export const InlineCode = ({ wrap = false, className, children, ...props }) => {
|
||||
const codeClassNames = classNames(classes.inlineCode, className, {
|
||||
[classes.wrap]: wrap || (isString(children) && children.length >= WRAP_THRESHOLD),
|
||||
const codeClassNames = classNames(classes['inline-code'], className, {
|
||||
[classes['wrap']]: wrap || (isString(children) && children.length >= WRAP_THRESHOLD),
|
||||
})
|
||||
return (
|
||||
<code className={codeClassNames} {...props}>
|
||||
|
|
@ -78,10 +78,10 @@ export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
|
|||
const annotClassNames = classNames(
|
||||
'type-annotation',
|
||||
`language-${lang}`,
|
||||
classes.inlineCode,
|
||||
classes.typeAnnotation,
|
||||
classes['inline-code'],
|
||||
classes['type-annotation'],
|
||||
{
|
||||
[classes.wrap]: code.length >= WRAP_THRESHOLD,
|
||||
[classes['wrap']]: code.length >= WRAP_THRESHOLD,
|
||||
}
|
||||
)
|
||||
return (
|
||||
|
|
@ -89,7 +89,7 @@ export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
|
|||
{elements.map((el, i) => (
|
||||
<Fragment key={i}>{linkType(el, !!link)}</Fragment>
|
||||
))}
|
||||
{meta && <span className={classes.typeAnnotationMeta}>{meta}</span>}
|
||||
{meta && <span className={classes['type-annotation-meta']}>{meta}</span>}
|
||||
</code>
|
||||
)
|
||||
}
|
||||
|
|
@ -134,7 +134,7 @@ function convertLine(line, i) {
|
|||
})
|
||||
return (
|
||||
<Fragment key={line}>
|
||||
<span data-prompt={i === 0 ? '$' : null} className={classes.cliArgSubtle}>
|
||||
<span data-prompt={i === 0 ? '$' : null} className={classes['cli-arg-subtle']}>
|
||||
python -m
|
||||
</span>{' '}
|
||||
<span>spacy</span>{' '}
|
||||
|
|
@ -142,9 +142,9 @@ function convertLine(line, i) {
|
|||
const isCmd = j === 0
|
||||
const url = isCmd ? `/api/cli#${item.replace(' ', '-')}` : null
|
||||
const isAbstract = isString(item) && /^\[(.+)\]$/.test(item)
|
||||
const itemClassNames = classNames(classes.cliArg, {
|
||||
[classes.cliArgHighlight]: isCmd,
|
||||
[classes.cliArgEmphasis]: isAbstract,
|
||||
const itemClassNames = classNames(classes['cli-arg'], {
|
||||
[classes['cli-arg-highlight']]: isCmd,
|
||||
[classes['cli-arg-emphasis']]: isAbstract,
|
||||
})
|
||||
const text = isAbstract ? item.slice(1, -1) : item
|
||||
return (
|
||||
|
|
@ -238,11 +238,11 @@ export class Code extends React.Component {
|
|||
render() {
|
||||
const { lang, title, executable, github, prompt, wrap, highlight, className, children } =
|
||||
this.props
|
||||
const codeClassNames = classNames(classes.code, className, `language-${lang}`, {
|
||||
[classes.wrap]: !!highlight || !!wrap || lang === 'cli',
|
||||
[classes.cli]: lang === 'cli',
|
||||
const codeClassNames = classNames(classes['code'], className, `language-${lang}`, {
|
||||
[classes['wrap']]: !!highlight || !!wrap || lang === 'cli',
|
||||
[classes['cli']]: lang === 'cli',
|
||||
})
|
||||
const ghClassNames = classNames(codeClassNames, classes.maxHeight)
|
||||
const ghClassNames = classNames(codeClassNames, classes['max-height'])
|
||||
const { Juniper } = this.state
|
||||
|
||||
if (github) {
|
||||
|
|
@ -264,7 +264,7 @@ export class Code extends React.Component {
|
|||
const html = formatCode(rawHtml, lang, prompt)
|
||||
return (
|
||||
<>
|
||||
{title && <h4 className={classes.title}>{title}</h4>}
|
||||
{title && <h4 className={classes['title']}>{title}</h4>}
|
||||
<code className={codeClassNames}>{html}</code>
|
||||
</>
|
||||
)
|
||||
|
|
@ -275,10 +275,10 @@ const JuniperWrapper = ({ Juniper, title, lang, children }) => {
|
|||
const { binderUrl, binderVersion } = siteMetadata
|
||||
const juniperTitle = title || 'Editable Code'
|
||||
return (
|
||||
<div className={classes.juniperWrapper}>
|
||||
<h4 className={classes.juniperTitle}>
|
||||
<div className={classes['juniper-wrapper']}>
|
||||
<h4 className={classes['juniper-title']}>
|
||||
{juniperTitle}
|
||||
<span className={classes.juniperMeta}>
|
||||
<span className={classes['juniper-meta']}>
|
||||
spaCy v{binderVersion} · Python 3 · via{' '}
|
||||
<Link to="https://mybinder.org/" hidden>
|
||||
Binder
|
||||
|
|
@ -291,10 +291,10 @@ const JuniperWrapper = ({ Juniper, title, lang, children }) => {
|
|||
branch={binderBranch}
|
||||
lang={lang}
|
||||
classNames={{
|
||||
cell: classes.juniperCell,
|
||||
input: classes.juniperInput,
|
||||
button: classes.juniperButton,
|
||||
output: classes.juniperOutput,
|
||||
cell: classes['juniper-cell'],
|
||||
input: classes['juniper-input'],
|
||||
button: classes['juniper-button'],
|
||||
output: classes['juniper-output'],
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ const Image = ({ src, alt, title, ...props }) => {
|
|||
// This is only needed for image types that are NOT handled by
|
||||
// gatsby-remark-images, i.e. mostly SVGs. The plugin adds formatting
|
||||
// and support for captions, so this normalises that behaviour.
|
||||
const linkClassNames = classNames('gatsby-resp-image-link', classes.imageLink)
|
||||
const linkClassNames = classNames('gatsby-resp-image-link', classes['image-link'])
|
||||
const markdownComponents = { code: InlineCode, p: Fragment, a: Link }
|
||||
return (
|
||||
<figure className="gatsby-resp-image-figure">
|
||||
|
|
@ -111,7 +111,7 @@ const GoogleSheet = ({ id, link, height, button = 'View full table' }) => {
|
|||
<iframe
|
||||
title={id}
|
||||
scrolling="no"
|
||||
className={classes.googleSheet}
|
||||
className={classes['google-sheet']}
|
||||
height={height}
|
||||
src={`https://docs.google.com/spreadsheets/d/e/${id}/pubhtml?widget=true&headers=false`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ or a report on the issue tracker. Thanks!`
|
|||
const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
|
||||
const [initialized, setInitialized] = useState(false)
|
||||
const [code, setCode] = useState(errorMsg)
|
||||
const codeClassNames = classNames(classes.code, classes.maxHeight, className)
|
||||
const codeClassNames = classNames(classes.code, classes['max-height'], className)
|
||||
|
||||
const rawUrl = url
|
||||
.replace('github.com', 'raw.githubusercontent.com')
|
||||
|
|
@ -46,7 +46,9 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
|
|||
<header className={classes.header}>
|
||||
<Link to={url} hidden>
|
||||
<Icon name="github" width={16} inline />
|
||||
<code className={classNames(classes.inlineCode, classes.inlineCodeDark)}>
|
||||
<code
|
||||
className={classNames(classes['inline-code'], classes['inline-code-dark'])}
|
||||
>
|
||||
{rawUrl.split('.com/')[1]}
|
||||
</code>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@ export const LandingHeader = ({ nightly, legacy, style = {}, children }) => {
|
|||
const wrapperStyle = { backgroundImage: `url(${pattern})` }
|
||||
const contentStyle = { backgroundImage: `url(${overlay})`, ...style }
|
||||
return (
|
||||
<header className={classes.header}>
|
||||
<div className={classes.headerWrapper} style={wrapperStyle}>
|
||||
<div className={classes.headerContent} style={contentStyle}>
|
||||
<header className={classes['header']}>
|
||||
<div className={classes['header-wrapper']} style={wrapperStyle}>
|
||||
<div className={classes['header-content']} style={contentStyle}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,17 +37,17 @@ export const LandingHeader = ({ nightly, legacy, style = {}, children }) => {
|
|||
)
|
||||
}
|
||||
|
||||
export const LandingTitle = ({ children }) => <h1 className={classes.title}>{children}</h1>
|
||||
export const LandingTitle = ({ children }) => <h1 className={classes['title']}>{children}</h1>
|
||||
|
||||
export const LandingSubtitle = ({ children }) => (
|
||||
<h2>
|
||||
<span className={classNames(classes.label, classes.subtitle)}>{children}</span>
|
||||
<span className={classNames(classes['label'], classes['subtitle'])}>{children}</span>
|
||||
</h2>
|
||||
)
|
||||
|
||||
export const LandingGrid = ({ cols = 3, blocks = false, style, children }) => (
|
||||
<Content className={classNames({ [classes.blocks]: blocks })}>
|
||||
<Grid cols={cols} narrow={blocks} className={classes.grid} style={style}>
|
||||
<Content className={classNames({ [classes['blocks']]: blocks })}>
|
||||
<Grid cols={cols} narrow={blocks} className={classes['grid']} style={style}>
|
||||
{children}
|
||||
</Grid>
|
||||
</Content>
|
||||
|
|
@ -56,8 +56,8 @@ export const LandingGrid = ({ cols = 3, blocks = false, style, children }) => (
|
|||
export const LandingCol = ({ children }) => <div>{children}</div>
|
||||
|
||||
export const LandingCard = ({ title, button, url, children }) => (
|
||||
<div className={classes.card}>
|
||||
<section className={classes.cardText}>
|
||||
<div className={classes['card']}>
|
||||
<section className={classes['card-text']}>
|
||||
{title && <H3>{title}</H3>}
|
||||
<p>{children}</p>
|
||||
</section>
|
||||
|
|
@ -70,14 +70,14 @@ export const LandingCard = ({ title, button, url, children }) => (
|
|||
)
|
||||
|
||||
export const LandingButton = ({ to, children }) => (
|
||||
<Button to={to} variant="primary" large className={classes.button}>
|
||||
<Button to={to} variant="primary" large className={classes['button']}>
|
||||
{children}
|
||||
</Button>
|
||||
)
|
||||
|
||||
export const LandingDemo = ({ title, children }) => {
|
||||
return (
|
||||
<div className={classes.demo}>
|
||||
<div className={classes['demo']}>
|
||||
<CodeBlock executable lang="python" title={title}>
|
||||
{children}
|
||||
</CodeBlock>
|
||||
|
|
@ -86,7 +86,7 @@ export const LandingDemo = ({ title, children }) => {
|
|||
}
|
||||
|
||||
export const LandingBannerGrid = ({ children }) => (
|
||||
<Grid cols={2} className={classes.bannerGrid}>
|
||||
<Grid cols={2} className={classes['banner-grid']}>
|
||||
{children}
|
||||
</Grid>
|
||||
)
|
||||
|
|
@ -102,11 +102,11 @@ export const LandingBanner = ({
|
|||
color,
|
||||
children,
|
||||
}) => {
|
||||
const contentClassNames = classNames(classes.bannerContent, {
|
||||
[classes.bannerContentSmall]: small,
|
||||
const contentClassNames = classNames(classes['banner-content'], {
|
||||
[classes['banner-content-small']]: small,
|
||||
})
|
||||
const textClassNames = classNames(classes.bannerText, {
|
||||
[classes.bannerTextSmall]: small,
|
||||
const textClassNames = classNames(classes['banner-text'], {
|
||||
[classes['banner-text-small']]: small,
|
||||
})
|
||||
const style = {
|
||||
'--color-theme': background,
|
||||
|
|
@ -115,13 +115,13 @@ export const LandingBanner = ({
|
|||
}
|
||||
const Heading = small ? H2 : H1
|
||||
return (
|
||||
<div className={classes.banner} style={style}>
|
||||
<div className={classes['banner']} style={style}>
|
||||
<Grid cols={small ? null : 3} narrow className={contentClassNames}>
|
||||
{(title || label) && (
|
||||
<Heading Component="h3" className={classes.bannerTitle}>
|
||||
<Heading Component="h3" className={classes['banner-title']}>
|
||||
{label && (
|
||||
<div className={classes.bannerLabel}>
|
||||
<span className={classes.label}>{label}</span>
|
||||
<div className={classes['banner-label']}>
|
||||
<span className={classes['label']}>{label}</span>
|
||||
</div>
|
||||
)}
|
||||
<Link to={to} hidden>
|
||||
|
|
@ -144,8 +144,13 @@ export const LandingBanner = ({
|
|||
}
|
||||
|
||||
export const LandingBannerButton = ({ to, small, children }) => (
|
||||
<div className={classes.bannerButton}>
|
||||
<Button to={to} variant="tertiary" large={!small} className={classes.bannerButtonElement}>
|
||||
<div className={classes['banner-button']}>
|
||||
<Button
|
||||
to={to}
|
||||
variant="tertiary"
|
||||
large={!small}
|
||||
className={classes['banner-button-element']}
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,12 +44,12 @@ export default function Link({
|
|||
const linkClassNames = classNames(classes.root, className, {
|
||||
[classes.hidden]: hidden,
|
||||
[classes.nowrap]: (withIcon && !sourceWithText) || icon === 'network',
|
||||
[classes.withIcon]: withIcon,
|
||||
[classes['with-icon']]: withIcon,
|
||||
})
|
||||
const Wrapper = ws ? Whitespace : Fragment
|
||||
const content = (
|
||||
<>
|
||||
{sourceWithText ? <span className={classes.sourceText}>{children}</span> : children}
|
||||
{sourceWithText ? <span className={classes['source-text']}>{children}</span> : children}
|
||||
{withIcon && <Icon name={icon} width={16} inline className={classes.icon} />}
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export const Ul = (props) => <ul className={classes.ul} {...props} />
|
|||
export const Li = ({ children, emoji, ...props }) => {
|
||||
const { hasIcon, content } = replaceEmoji(children)
|
||||
const liClassNames = classNames(classes.li, {
|
||||
[classes.liIcon]: hasIcon,
|
||||
[classes['li-icon']]: hasIcon,
|
||||
[classes.emoji]: emoji,
|
||||
})
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@ export default function Main({
|
|||
}) {
|
||||
const pattern = patterns[theme]
|
||||
const mainClassNames = classNames(classes.root, {
|
||||
[classes.withSidebar]: sidebar,
|
||||
[classes.withAsides]: asides,
|
||||
[classes['with-sidebar']]: sidebar,
|
||||
[classes['with-asides']]: asides,
|
||||
})
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default function Navigation({ title, items = [], section, search, alert,
|
|||
{!alert ? (
|
||||
logo
|
||||
) : (
|
||||
<span className={classes.hasAlert}>
|
||||
<span className={classes['has-alert']}>
|
||||
{logo} <span className={classes.alert}>{alert}</span>
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -52,7 +52,7 @@ export default function Navigation({ title, items = [], section, search, alert,
|
|||
{items.map(({ text, url }, i) => {
|
||||
const isActive = section && text.toLowerCase() === section
|
||||
const itemClassNames = classNames(classes.item, {
|
||||
[classes.isActive]: isActive,
|
||||
[classes['is-active']]: isActive,
|
||||
})
|
||||
return (
|
||||
<li key={i} className={itemClassNames}>
|
||||
|
|
|
|||
|
|
@ -86,14 +86,18 @@ const Quickstart = ({
|
|||
|
||||
return !data.length ? null : (
|
||||
<Container id={id}>
|
||||
<div className={classNames(classes.root, { [classes.hidePrompts]: !!hidePrompts })}>
|
||||
<div
|
||||
className={classNames(classes['root'], {
|
||||
[classes['hide-prompts']]: !!hidePrompts,
|
||||
})}
|
||||
>
|
||||
{title && (
|
||||
<H2 className={classes.title} name={id}>
|
||||
<H2 className={classes['title']} name={id}>
|
||||
<a href={`#${id}`}>{title}</a>
|
||||
</H2>
|
||||
)}
|
||||
|
||||
{description && <p className={classes.description}>{description}</p>}
|
||||
{description && <p className={classes['description']}>{description}</p>}
|
||||
|
||||
{data.map(
|
||||
({
|
||||
|
|
@ -112,21 +116,21 @@ const Quickstart = ({
|
|||
// Check if dropdown should be shown
|
||||
const dropdownGetter = showDropdown[id] || (() => true)
|
||||
return hidden ? null : (
|
||||
<div key={id} data-quickstart-group={id} className={classes.group}>
|
||||
<div key={id} data-quickstart-group={id} className={classes['group']}>
|
||||
<style data-quickstart-style={id} scoped>
|
||||
{styles[id] ||
|
||||
`[data-quickstart-results]>[data-quickstart-${id}] { display: none }`}
|
||||
</style>
|
||||
<div className={classes.legend}>
|
||||
<div className={classes['legend']}>
|
||||
{title}
|
||||
{help && (
|
||||
<span data-tooltip={help} className={classes.help}>
|
||||
<span data-tooltip={help} className={classes['help']}>
|
||||
{' '}
|
||||
<Icon name="help" width={16} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={classes.fields}>
|
||||
<div className={classes['fields']}>
|
||||
{options.map((option) => {
|
||||
const optionType = multiple ? 'checkbox' : 'radio'
|
||||
const checkedForId = checked[id] || []
|
||||
|
|
@ -151,7 +155,7 @@ const Quickstart = ({
|
|||
}}
|
||||
type={optionType}
|
||||
className={classNames(
|
||||
classes.input,
|
||||
classes['input'],
|
||||
classes[optionType]
|
||||
)}
|
||||
name={id}
|
||||
|
|
@ -160,7 +164,7 @@ const Quickstart = ({
|
|||
checked={checkedForId.includes(option.id)}
|
||||
/>
|
||||
<label
|
||||
className={classes.label}
|
||||
className={classes['label']}
|
||||
htmlFor={`quickstart-${option.id}`}
|
||||
>
|
||||
{option.title}
|
||||
|
|
@ -168,7 +172,7 @@ const Quickstart = ({
|
|||
{option.help && (
|
||||
<span
|
||||
data-tooltip={option.help}
|
||||
className={classes.help}
|
||||
className={classes['help']}
|
||||
>
|
||||
{' '}
|
||||
<Icon name="help" width={16} />
|
||||
|
|
@ -178,12 +182,12 @@ const Quickstart = ({
|
|||
</Fragment>
|
||||
)
|
||||
})}
|
||||
<span className={classes.fieldExtra}>
|
||||
<span className={classes['field-extra']}>
|
||||
{!!dropdown.length && (
|
||||
<select
|
||||
defaultValue={defaultValue}
|
||||
className={classNames(classes.select, {
|
||||
[classes.selectHidden]: !dropdownGetter(),
|
||||
className={classNames(classes['select'], {
|
||||
[classes['select-hidden']]: !dropdownGetter(),
|
||||
})}
|
||||
onChange={({ target }) => {
|
||||
const value = target.value
|
||||
|
|
@ -207,7 +211,7 @@ const Quickstart = ({
|
|||
{other && otherState[id] && (
|
||||
<input
|
||||
type="text"
|
||||
className={classes.textInput}
|
||||
className={classes['text-input']}
|
||||
placeholder="Type here..."
|
||||
onChange={({ target }) => setterFunc(target.value)}
|
||||
/>
|
||||
|
|
@ -218,10 +222,10 @@ const Quickstart = ({
|
|||
)
|
||||
}
|
||||
)}
|
||||
<pre className={classes.code}>
|
||||
<pre className={classes['code']}>
|
||||
<code
|
||||
className={classNames(classes.results, {
|
||||
[classes.small]: !!small,
|
||||
className={classNames(classes['results'], {
|
||||
[classes['small']]: !!small,
|
||||
[`language-${codeLang}`]: !!codeLang,
|
||||
})}
|
||||
data-quickstart-results=""
|
||||
|
|
@ -230,12 +234,12 @@ const Quickstart = ({
|
|||
{children}
|
||||
</code>
|
||||
|
||||
<menu className={classes.menu}>
|
||||
<menu className={classes['menu']}>
|
||||
{showCopy && (
|
||||
<button
|
||||
title="Copy to clipboard"
|
||||
onClick={onClickCopy}
|
||||
className={classes.iconButton}
|
||||
className={classes['icon-button']}
|
||||
>
|
||||
<Icon width={18} name={copySuccess ? 'accept' : 'clipboard'} />
|
||||
</button>
|
||||
|
|
@ -247,14 +251,16 @@ const Quickstart = ({
|
|||
)}`}
|
||||
title="Download file"
|
||||
download={download}
|
||||
className={classes.iconButton}
|
||||
className={classes['icon-button']}
|
||||
>
|
||||
<Icon width={18} name="download" />
|
||||
</a>
|
||||
)}
|
||||
</menu>
|
||||
</pre>
|
||||
{showCopy && <textarea ref={copyAreaRef} className={classes.copyArea} rows={1} />}
|
||||
{showCopy && (
|
||||
<textarea ref={copyAreaRef} className={classes['copy-area']} rows={1} />
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
|
|
@ -283,11 +289,11 @@ Quickstart.propTypes = {
|
|||
|
||||
const QS = ({ children, prompt = 'bash', divider = false, comment = false, ...props }) => {
|
||||
const qsClassNames = classNames({
|
||||
[classes.prompt]: !!prompt && !divider,
|
||||
[classes.bash]: prompt === 'bash' && !divider,
|
||||
[classes.python]: prompt === 'python' && !divider,
|
||||
[classes.divider]: !!divider,
|
||||
[classes.comment]: !!comment,
|
||||
[classes['prompt']]: !!prompt && !divider,
|
||||
[classes['bash']]: prompt === 'bash' && !divider,
|
||||
[classes['python']]: prompt === 'python' && !divider,
|
||||
[classes['divider']]: !!divider,
|
||||
[classes['comment']]: !!comment,
|
||||
})
|
||||
const attrs = Object.assign(
|
||||
{},
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@ function getActiveHeading(items, slug) {
|
|||
|
||||
const DropdownNavigation = ({ items, defaultValue }) => {
|
||||
return (
|
||||
<div className={classes.dropdown}>
|
||||
<Dropdown className={classes.dropdownSelect} defaultValue={defaultValue}>
|
||||
<div className={classes['dropdown']}>
|
||||
<Dropdown className={classes['dropdown-select']} defaultValue={defaultValue}>
|
||||
<option disabled>Select page...</option>
|
||||
{items.map((section, i) =>
|
||||
section.items.map(({ text, url }, j) => (
|
||||
|
|
@ -58,19 +58,19 @@ export default function Sidebar({ items = [], pageMenu = [], slug }) {
|
|||
}, [initialized])
|
||||
|
||||
return (
|
||||
<menu className={classNames('sidebar', classes.root)}>
|
||||
<h1 hidden aria-hidden="true" className={classNames('h0', classes.activeHeading)}>
|
||||
<menu className={classNames('sidebar', classes['root'])}>
|
||||
<h1 hidden aria-hidden="true" className={classNames('h0', classes['active-heading'])}>
|
||||
{activeHeading}
|
||||
</h1>
|
||||
<DropdownNavigation items={items} defaultValue={slug} />
|
||||
{items.map((section, i) => (
|
||||
<ul className={classes.section} key={i}>
|
||||
<li className={classes.label}>{section.label}</li>
|
||||
<ul className={classes['section']} key={i}>
|
||||
<li className={classes['label']}>{section.label}</li>
|
||||
{section.items.map(({ text, url, tag, onClick, menu, isActive }, j) => {
|
||||
const currentMenu = menu || pageMenu || []
|
||||
const active = isActive || slug === url
|
||||
const itemClassNames = classNames(classes.link, {
|
||||
[classes.isActive]: active,
|
||||
const itemClassNames = classNames(classes['link'], {
|
||||
[classes['is-active']]: active,
|
||||
'is-active': active,
|
||||
})
|
||||
|
||||
|
|
@ -86,11 +86,12 @@ export default function Sidebar({ items = [], pageMenu = [], slug }) {
|
|||
{tag && <Tag spaced>{tag}</Tag>}
|
||||
</Link>
|
||||
{active && !!currentMenu.length && (
|
||||
<ul className={classes.crumbs}>
|
||||
<ul className={classes['crumbs']}>
|
||||
{currentMenu.map((crumb) => {
|
||||
const currentActive = activeSection || currentMenu[0].id
|
||||
const crumbClassNames = classNames(classes.crumb, {
|
||||
[classes.crumbActive]: currentActive === crumb.id,
|
||||
const crumbClassNames = classNames(classes['crumb'], {
|
||||
[classes['crumb-active']]:
|
||||
currentActive === crumb.id,
|
||||
})
|
||||
return (
|
||||
<li className={crumbClassNames} key={crumb.id}>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export const Table = ({ fixed, className, ...props }) => {
|
|||
|
||||
export const Th = ({ children, ...props }) => {
|
||||
const isRotated = children && !isString(children) && children.type && children.type.name == 'Tx'
|
||||
const thClassNames = classNames(classes.th, { [classes.thRotated]: isRotated })
|
||||
const thClassNames = classNames(classes.th, { [classes['th-rotated']]: isRotated })
|
||||
return (
|
||||
<th className={thClassNames} {...props}>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default function Title({
|
|||
...props
|
||||
}) {
|
||||
const hasApiDetails = Object.values(apiDetails || {}).some((v) => v)
|
||||
const metaIconProps = { className: classes.metaIcon, width: 18 }
|
||||
const metaIconProps = { className: classes['meta-icon'], width: 18 }
|
||||
return (
|
||||
<header className={classes.root}>
|
||||
{(image || source) && (
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@ export const Label = ({ className, ...props }) => (
|
|||
)
|
||||
|
||||
export const InlineList = ({ Component = 'p', gutterBottom = true, className, children }) => {
|
||||
const listClassNames = classNames(classes.inlineList, className, {
|
||||
[classes.noGutter]: !gutterBottom,
|
||||
const listClassNames = classNames(classes['inline-list'], className, {
|
||||
[classes['no-gutter']]: !gutterBottom,
|
||||
})
|
||||
return <Component className={listClassNames}>{children}</Component>
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user