Add fork-awesome-stack.tsx and extract types

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/common/fork-awesome/fork-awesome-stack.tsx

@@ -0,0 +1,23 @@
+import React, { ReactElement } from 'react'
+import { ForkAwesomeIcon, ForkAwesomeIconProps } from './fork-awesome-icon'
+import { IconSize } from './types'
+
+export interface ForkAwesomeStackProps {
+  size?: IconSize
+  children: ReactElement<ForkAwesomeIconProps> | Array<ReactElement<ForkAwesomeIconProps>>
+}
+
+export const ForkAwesomeStack: React.FC<ForkAwesomeStackProps> = ({ size, children }) => {
+  return (
+    <span className={`fa-stack ${size ? 'fa-' : ''}${size ?? ''}`}>
+      {
+        React.Children.map(children, (child) => {
+          if (!React.isValidElement<ForkAwesomeIconProps>(child)) {
+            return null
+          }
+          return <ForkAwesomeIcon {...child.props} stacked={true}/>
+        })
+      }
+    </span>
+  )
+}

src/components/common/icon-button/icon-button.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { Button, ButtonProps } from 'react-bootstrap'
-import { ForkAwesomeIcon, IconName } from '../fork-awesome/fork-awesome-icon'
+import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
 import './icon-button.scss'
+import { IconName } from '../fork-awesome/types'
 
 export interface IconButtonProps extends ButtonProps {
   icon: IconName

src/components/common/links/external-link.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { ForkAwesomeIcon, IconName } from '../fork-awesome/fork-awesome-icon'
+import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
+import { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import { LinkWithTextProps } from './types'
 

src/components/common/links/internal-link.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { ForkAwesomeIcon, IconName } from '../fork-awesome/fork-awesome-icon'
+import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
+import { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 import { LinkWithTextProps } from './types'
 

src/components/common/modals/common-modal.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { ForkAwesomeIcon, IconName } from '../fork-awesome/fork-awesome-icon'
+import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
+import { IconName } from '../fork-awesome/types'
 import { ShowIf } from '../show-if/show-if'
 
 export interface CommonModalProps {

src/components/editor/document-bar/document-info/document-info-line.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { ForkAwesomeIcon, IconName } from '../../../common/fork-awesome/fork-awesome-icon'
+import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import { IconName } from '../../../common/fork-awesome/types'
 
 export interface DocumentInfoLineProps {
   icon: IconName

src/components/editor/document-bar/document-info/document-info-time-line.tsx

@@ -1,7 +1,7 @@
 import { Moment } from 'moment'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { IconName } from '../../../common/fork-awesome/fork-awesome-icon'
+import { IconName } from '../../../common/fork-awesome/types'
 import { DocumentInfoLine } from './document-info-line'
 import './document-info-time-line.scss'
 import { TimeFromNow } from './time-from-now'

src/components/history-page/entry-menu/dropdown-item-with-deletion-modal.tsx

@@ -1,7 +1,8 @@
 import React, { Fragment, useState } from 'react'
 import { Dropdown } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { ForkAwesomeIcon, IconName } from '../../common/fork-awesome/fork-awesome-icon'
+import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
+import { IconName } from '../../common/fork-awesome/types'
 import { DeletionModal } from '../../common/modals/deletion-modal'
 
 export interface DropdownItemWithDeletionModalProps {

src/components/history-page/sort-button/sort-button.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ButtonProps } from 'react-bootstrap'
-import { IconName } from '../../common/fork-awesome/fork-awesome-icon'
+import { IconName } from '../../common/fork-awesome/types'
 import { IconButton } from '../../common/icon-button/icon-button'
 
 export enum SortModeEnum {

src/components/login-page/auth/social-link-button/social-link-button.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { ForkAwesomeIcon, IconName } from '../../../common/fork-awesome/fork-awesome-icon'
+import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import './social-link-button.scss'
+import { IconName } from '../../../common/fork-awesome/types'
 
 export interface SocialButtonProps {
   backgroundClass: string,

src/components/login-page/auth/via-one-click.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../redux'
-import { IconName } from '../../common/fork-awesome/fork-awesome-icon'
+import { IconName } from '../../common/fork-awesome/types'
 import { SocialLinkButton } from './social-link-button/social-link-button'
 
 export enum OneClickType {

src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
-import { IconName } from '../../../common/fork-awesome/fork-awesome-icon'
+import { IconName } from '../../../common/fork-awesome/types'
 import { ShowIf } from '../../../common/show-if/show-if'
 import './one-click-embedding.scss'