Skip to content

Commit

Permalink
refactor: refactorng after review
Browse files Browse the repository at this point in the history
  • Loading branch information
PKulkoRaccoonGang committed Sep 13, 2023
1 parent 241ebc7 commit e5db3f6
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 49 deletions.
2 changes: 1 addition & 1 deletion src/Breadcrumb/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: 'Breadcrumb'
title: 'Breadcrumbs'
type: 'component'
components:
- Breadcrumb
Expand Down
35 changes: 0 additions & 35 deletions www/src/components/PageEditBtn/constants.js

This file was deleted.

9 changes: 3 additions & 6 deletions www/src/components/PageEditBtn/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Hyperlink } from '~paragon-react';
import { PATH_TO_EDIT_PAGE, componentsNamesMap } from './constants';

function PageEditBtn({ componentTitle, ...props }) {
const pageEditUrl = componentsNamesMap[componentTitle]
? `${PATH_TO_EDIT_PAGE}/${componentsNamesMap[componentTitle]}`
: `${PATH_TO_EDIT_PAGE}/${componentTitle}/README.md`;
function PageEditBtn({ githubEditPath, ...props }) {
const pageEditUrl = `https://github.com/openedx/paragon/edit/master/src${githubEditPath}`;

const handlePageEditBtnClick = () => {
global.analytics.track('openedx.paragon.docs.page_edit.clicked');
Expand All @@ -29,7 +26,7 @@ function PageEditBtn({ componentTitle, ...props }) {
}

PageEditBtn.propTypes = {
componentTitle: PropTypes.string.isRequired,
githubEditPath: PropTypes.string.isRequired,
};

export default PageEditBtn;
23 changes: 16 additions & 7 deletions www/src/templates/component-page-template.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface IPageTemplate {
pageContext: {
scssVariablesData: Record<string, string>,
componentsUsageInsights: string[],
githubEditPath: string,
}
}

Expand All @@ -52,7 +53,7 @@ export type ShortCodesTypes = {

export default function PageTemplate({
data: { mdx, components: componentNodes },
pageContext: { scssVariablesData, componentsUsageInsights },
pageContext: { scssVariablesData, componentsUsageInsights, githubEditPath },
}: IPageTemplate) {
const isMobile = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
const [showMinimizedTitle, setShowMinimizedTitle] = useState(false);
Expand Down Expand Up @@ -99,7 +100,6 @@ export default function PageTemplate({
const usageInsightsUrl = 'usage-insights';

const sortedComponentNames = mdx.frontmatter?.components || [];
const componentTitle = mdx.frontmatter.title;
const filteredComponentsUsageInsights = componentsUsageInsights.map(componentName => componentName.replace(/\./g, ''));
const isUsageInsights = (sortedComponentNames as []).some(value => filteredComponentsUsageInsights.includes(value));

Expand Down Expand Up @@ -140,13 +140,22 @@ export default function PageTemplate({
<p className="small mb-0">{mdx.frontmatter.notes}</p>
</Alert>
)}
<div className="d-flex justify-content-between align-items-start">
<h1 className="mb-4">{mdx.frontmatter.title}</h1>
<Stack direction="horizontal" gap={3}>
<PageEditBtn componentTitle={componentTitle} />
<Stack
className="justify-content-between"
direction={!isMobile && 'horizontal'}
>
<h1 className={isMobile ? 'mb-2' : 'mb-4'}>
{mdx.frontmatter.title}
</h1>
<Stack
className="mb-4"
direction={!isMobile && 'horizontal'}
gap={3}
>
<PageEditBtn githubEditPath={githubEditPath} />
<LeaveFeedback />
</Stack>
</div>
</Stack>
<MDXProvider components={shortcodes}>
<MDXRenderer>{mdx.body}</MDXRenderer>
</MDXProvider>
Expand Down
3 changes: 3 additions & 0 deletions www/utils/createPages.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ async function createPages(graphql, actions, reporter) {
components
}
slug
fileAbsolutePath
}
}
}
Expand All @@ -47,6 +48,7 @@ async function createPages(graphql, actions, reporter) {
for (const { node } of components) {
const componentDir = node.slug.split('/')[0];
const variablesPath = path.resolve(__dirname, `../../src/${componentDir}/_variables.scss`);
const githubEditPath = node.fileAbsolutePath.split('src')[1];
let scssVariablesData = {};

if (fs.existsSync(variablesPath)) {
Expand All @@ -67,6 +69,7 @@ async function createPages(graphql, actions, reporter) {
components: node.frontmatter.components || [],
scssVariablesData,
componentsUsageInsights: Object.keys(componentsUsage),
githubEditPath,
},
});
}
Expand Down

0 comments on commit e5db3f6

Please sign in to comment.