reorganize PagePathHierarchicalLink

apps/app/_obsolete/src/components/Navbar/GrowiSubNavigation.module.scss

@@ -27,13 +27,6 @@
       line-height: 1.4em;
     }
 
-    .grw-page-path-nav {
-      .separator {
-        margin-right: 0.2em;
-        margin-left: 0.2em;
-      }
-    }
-
     .btn-copy {
       &:not(:hover):not(:active) {
         background-color: transparent !important;

apps/app/src/components/PageList/PageListItemL.tsx

@@ -33,7 +33,7 @@ import { useIsDeviceSmallerThanLg } from '~/stores/ui';
 
 import { useSWRMUTxPageInfo, useSWRxPageInfo } from '../../stores/page';
 import { ForceHideMenuItems, PageItemControl } from '../Common/Dropdown/PageItemControl';
-import PagePathHierarchicalLink from '../PagePathHierarchicalLink';
+import { PagePathHierarchicalLink } from '../PagePathHierarchicalLink';
 
 type Props = {
   page: IPageWithSearchMeta | IPageWithMeta<IPageInfoForListing & IPageSearchMeta>,

apps/app/src/components/PagePathHierarchicalLink/PagePathHierarchicalLink.module.scss

@@ -0,0 +1,4 @@
+.separator {
+  margin-right: 0.2em;
+  margin-left: 0.2em;
+}

apps/app/src/components/PagePathHierarchicalLink.tsx → apps/app/src/components/PagePathHierarchicalLink/PagePathHierarchicalLink.tsx

@@ -3,7 +3,9 @@ import React, { memo, useCallback } from 'react';
 import Link from 'next/link';
 import urljoin from 'url-join';
 
-import LinkedPagePath from '../models/linked-page-path';
+import LinkedPagePath from '../../models/linked-page-path';
+
+import styles from './PagePathHierarchicalLink.module.scss';
 
 
 type PagePathHierarchicalLinkProps = {
@@ -16,8 +18,7 @@ type PagePathHierarchicalLinkProps = {
   isInnerElem?: boolean,
 };
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JSX.Element => {
+export const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JSX.Element => {
   const {
     linkedPagePath, linkedPagePathByHtml, basePath, isInTrash, isInnerElem,
   } = props;
@@ -26,7 +27,7 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
   const RootElm = useCallback(({ children }) => {
     return isInnerElem
       ? <>{children}</>
-      : <span className="grw-page-path-hierarchical-link text-break">{children}</span>;
+      : <span className="text-break">{children}</span>;
   }, [isInnerElem]);
 
   // render root element
@@ -43,7 +44,7 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
               <i className="icon-trash"></i>
             </Link>
           </span>
-          <span className="separator"><a href="/">/</a></span>
+          <span className={`separator ${styles.separator}`}><a href="/">/</a></span>
         </RootElm>
       )
       : (
@@ -51,7 +52,7 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
           <span className="path-segment">
             <Link href="/" prefetch={false}>
               <i className="icon-home"></i>
-              <span className="separator">/</span>
+              <span className={`separator ${styles.separator}`}>/</span>
             </Link>
           </span>
         </RootElm>
@@ -78,7 +79,7 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
         />
       ) }
       { isSeparatorRequired && (
-        <span className="separator">/</span>
+        <span className={`separator ${styles.separator}`}>/</span>
       ) }
 
       <Link href={href} prefetch={false} legacyBehavior>
@@ -93,7 +94,3 @@ const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkProps): JS
     </RootElm>
   );
 });
-PagePathHierarchicalLink.displayName = 'PagePathHierarchicalLink';
-
-
-export default PagePathHierarchicalLink;

apps/app/src/components/PagePathHierarchicalLink/index.ts

@@ -0,0 +1 @@
+export * from './PagePathHierarchicalLink';

apps/app/src/components/PagePathNav.tsx

@@ -8,7 +8,7 @@ import { useIsNotFound } from '~/stores/page';
 
 import LinkedPagePath from '../models/linked-page-path';
 
-import PagePathHierarchicalLink from './PagePathHierarchicalLink';
+import { PagePathHierarchicalLink } from './PagePathHierarchicalLink';
 
 const { isTrashPage } = pagePathUtils;
 

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -9,7 +9,7 @@ import { UserPicture, FootstampIcon } from '@growi/ui/dist/components';
 import { useKeywordManager } from '~/client/services/search-operation';
 import FormattedDistanceDate from '~/components/FormattedDistanceDate';
 import InfiniteScroll from '~/components/InfiniteScroll';
-import PagePathHierarchicalLink from '~/components/PagePathHierarchicalLink';
+import { PagePathHierarchicalLink } from '~/components/PagePathHierarchicalLink';
 import LinkedPagePath from '~/models/linked-page-path';
 import { useSWRINFxRecentlyUpdated } from '~/stores/page-listing';
 import loggerFactory from '~/utils/logger';

apps/app/src/styles/_page-path.scss

@@ -1,6 +0,0 @@
-.grw-page-path-hierarchical-link {
-  .separator {
-    margin-right: 0.2em;
-    margin-left: 0.2em;
-  }
-}

apps/app/src/styles/style-app.scss

@@ -23,7 +23,6 @@
 @import 'layout';
 @import 'mirror_mode';
 @import 'modal';
-@import 'page-path';
 @import 'tag';
 @import 'installer';