diff --git a/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss b/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss index 24b3419b..f56995b7 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss +++ b/src/features/Apiexplorer/Schema/HighlightCode/HighlightCode.module.scss @@ -1,18 +1,26 @@ @use 'src/styles/utility' as *; .schemaRole { - background-color: rgba(255, 255, 255, 0.16); - border: none; - font-size: rem(1.4); - font-weight: 400; - line-height: rem(2.4); - color: var(--ifm-color-white); - height: fit-content; - padding: rem(0.5) rem(0.5); - margin: 0 rem(0.5); + background-color: rgba(255, 255, 255, 0.16); + border: none; + font-size: rem(1.4); + font-weight: 400; + line-height: rem(2.4); + color: var(--ifm-color-white); + height: fit-content; + padding: rem(0.5) rem(0.5); + margin: 0 rem(0.5); } - + .schemaCode { - color: var(--ifm-color-white); - font-size: rem(1.4); + color: var(--ifm-color-white); + font-size: rem(1.4); +} + +.schemaLink { + text-decoration: underline; + color: var(--ifm-link-white); + &:hover { + color: var(--ifm-link-white); + } } diff --git a/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx b/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx index 0607dac7..20e58409 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx +++ b/src/features/Apiexplorer/Schema/HighlightCode/__tests__/HighlightCode.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { HighlightCode } from '..'; import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; describe('HighlightCode', () => { it('should render HighlightCode properly', async () => { @@ -19,4 +20,13 @@ describe('HighlightCode', () => { const empty_highlight = render(); expect(empty_highlight.container.firstChild).toBe(null); }); + + it('should render page of the selected api call name in the description', async () => { + render(); + const api_call_name = screen.getByText(/residence_list/i); + + await userEvent.click(api_call_name); + + expect(api_call_name.closest('a')).toHaveAttribute('href', '#residence_list'); + }); }); diff --git a/src/features/Apiexplorer/Schema/HighlightCode/index.tsx b/src/features/Apiexplorer/Schema/HighlightCode/index.tsx index 030428f1..cb93af28 100644 --- a/src/features/Apiexplorer/Schema/HighlightCode/index.tsx +++ b/src/features/Apiexplorer/Schema/HighlightCode/index.tsx @@ -1,16 +1,34 @@ import React from 'react'; import clsx from 'clsx'; -import styles from './HighlightCode.module.scss'; +import { playground_requests } from '@site/src/utils/playground_requests'; import { SchemaDescriptionTypes } from '../RecursiveContent/SchemaDescription'; +import styles from './HighlightCode.module.scss'; export const HighlightCode = ({ description }: SchemaDescriptionTypes) => { if (!description) return null; const [first, code, ...rest] = description.split('`'); + + const has_api_call = playground_requests.some((el) => el.name === code); + return ( {first} - {code && {code}} + {code && ( + + {has_api_call ? ( + window.scrollTo(0, 0)} + className={styles.schemaLink} + > + {code} + + ) : ( + code + )} + + )} {rest.length > 0 && } );