Merge pull request #278 from skilldeliver/add-typography-id

Add Typography component with ID and link button
podkrepi-bg · Jun 22, 2021 · ba56c0a · ba56c0a
2 parents f0aa370 + d72ade0
commit ba56c0a
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 34 deletions.
diff --git a/frontend/src/components/about-project/sections/TechStack.tsx b/frontend/src/components/about-project/sections/TechStack.tsx
@@ -1,5 +1,7 @@
 import { useTranslation } from 'next-i18next'
-import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { Box, createStyles, Grid, makeStyles, Theme, Typography } from '@material-ui/core'
+
+import Heading from 'components/common/Heading'
 
 const rows = [
   {
@@ -24,8 +26,12 @@ const rows = [
   },
 ]
 
-const useStyles = makeStyles(() =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    heading: {
+      paddingTop: theme.spacing(10),
+      paddingBottom: theme.spacing(7),
+    },
     list: {
       listStyle: 'disc',
       paddingLeft: '2rem',
@@ -38,9 +44,15 @@ export default function TechStack() {
   const classes = useStyles()
   return (
     <Box my={'5rem'}>
-      <Typography variant="h3" component="h2" align="center">
+      <Heading
+        id="tech-stack"
+        variant="h3"
+        component="h2"
+        align="center"
+        className={classes.heading}
+        linkable>
         {t('about-project:tech-stack.title')}
-      </Typography>
+      </Heading>
       <Grid container direction="column" component="section">
         <Grid item container justify="center" spacing={2}>
           {rows.map(({ label, items }, section: number) => (

diff --git a/frontend/src/components/about-project/sections/Timeline.tsx b/frontend/src/components/about-project/sections/Timeline.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'next-i18next'
-import { createStyles, Grid, makeStyles, Theme, Typography } from '@material-ui/core'
+import { createStyles, Grid, makeStyles, Theme } from '@material-ui/core'
 import { Timeline as TimelineMaterial } from '@material-ui/lab'
 import {
   Folder,
@@ -14,6 +14,7 @@ import {
 import { socialUrls } from 'common/routes'
 import PodkrepiIcon from 'components/brand/PodkrepiIcon'
 import ExternalLink from 'components/common/ExternalLink'
+import Heading from 'components/common/Heading'
 
 import HandIcon from '../icons/HandIcon'
 import TimelineItem from './TimelineItem'
@@ -24,7 +25,8 @@ import ChecklistIcon from '../icons/ChecklistIcon'
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     heading: {
-      marginBottom: theme.spacing(5),
+      paddingTop: theme.spacing(10),
+      paddingBottom: theme.spacing(7),
     },
     container: {
       textAlign: 'center',
@@ -41,9 +43,15 @@ export default function Timeline() {
 
   return (
     <Grid container direction="column" component="section" className={classes.container}>
-      <Typography variant="h3" component="h2" className={classes.heading}>
+      <Heading
+        id="our-story"
+        variant="h3"
+        component="h2"
+        align="center"
+        className={classes.heading}
+        linkable>
         {t('about-project:timeline')}
-      </Typography>
+      </Heading>
       <Grid item>
         <TimelineMaterial align="alternate" className={classes.timelineWrapper}>
           <TimelineItem Icon={PlayCircleFilledWhite} title={t('about-project:october-2020-title')}>

diff --git a/frontend/src/components/about-project/sections/WhatIsDone.tsx b/frontend/src/components/about-project/sections/WhatIsDone.tsx
@@ -6,6 +6,7 @@ import { createStyles, Grid, makeStyles, Theme, Typography } from '@material-ui/
 import { ibanNumber } from 'common/iban'
 import { staticUrls } from 'common/routes'
 import ExternalLink from 'components/common/ExternalLink'
+import Heading from 'components/common/Heading'
 
 import ActivityIcon from '../icons/ActivityIcon'
 import MeetingsIcon from '../icons/MeetingsIcon'
@@ -15,7 +16,8 @@ import InvestedHoursIcon from '../icons/InvestedHoursIcon'
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     heading: {
-      marginBottom: theme.spacing(5),
+      paddingTop: theme.spacing(10),
+      paddingBottom: theme.spacing(7),
     },
     container: {
       marginBottom: theme.spacing(12),
@@ -129,9 +131,9 @@ export default function WhatIsDone() {
 
   return (
     <Grid container direction="column" component="section" className={classes.container}>
-      <Typography variant="h3" component="h2" className={classes.heading}>
+      <Heading id="what-is-done" variant="h3" component="h2" className={classes.heading} linkable>
         {t('about-project:whatIsDoneTitle')}
-      </Typography>
+      </Heading>
       <Grid item container className={classes.icons}>
         <Grid item xs={12} sm={4}>
           <ActivityIcon Icon={VolunteersIcon} count="17" description={t('about-project:members')} />

diff --git a/frontend/src/components/about/DiscordImage.tsx b/frontend/src/components/about/DiscordImage.tsx
@@ -22,12 +22,11 @@ export default function DiscordImage() {
         <Image
           src="/img/discord-team-image.png"
           alt="Podkrepi.bg team in Discord voice conference call"
-          width = {880}
-          height = {475.475}
-          objectFit = "contain"
+          width={880}
+          height={475.475}
+          objectFit="contain"
         />
       </div>
-
     </ExternalLink>
   )
 }
diff --git a/frontend/src/components/about/sections/PrinciplesThatUniteUs.tsx b/frontend/src/components/about/sections/PrinciplesThatUniteUs.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { useTranslation } from 'next-i18next'
-import { Grid, Typography, Theme, makeStyles, createStyles } from '@material-ui/core'
+import { Grid, Theme, makeStyles, createStyles } from '@material-ui/core'
+
+import Heading from 'components/common/Heading'
 
 import PrincipleCard from './PrincipleCard'
 import AwarenessIcon from '../icons/AwarenessIcon'
@@ -26,9 +28,15 @@ export default function PrinciplesThatUniteUs() {
   return (
     <Grid container spacing={1}>
       <Grid xs={12} item>
-        <Typography variant="h4" component="h2" align="center" className={classes.title}>
+        <Heading
+          id="principles-that-unite-us"
+          variant="h4"
+          component="h2"
+          align="center"
+          className={classes.title}
+          linkable>
           {t('about:principlesThatUniteUs.title')}
-        </Typography>
+        </Heading>
       </Grid>
       <Grid item xs={12} sm={6}>
         <PrincipleCard

diff --git a/frontend/src/components/common/Heading.tsx b/frontend/src/components/common/Heading.tsx
@@ -0,0 +1,52 @@
+import { PropsWithChildren, useState } from 'react'
+
+import { Theme, Typography, TypographyProps } from '@material-ui/core'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
+import LinkIcon from '@material-ui/icons/Link'
+
+import LinkIconButton from 'components/common/LinkIconButton'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    linkIcon: {
+      transform: 'rotate(-45deg)',
+      color: theme.palette.primary.main,
+      '&:hover': {
+        color: theme.palette.primary.dark,
+      },
+    },
+    hideLinkIcon: {
+      visibility: 'hidden',
+    },
+  }),
+)
+
+type Linkable =
+  | {
+      id: string
+      linkable: true
+    }
+  | { linkable?: false }
+
+type HeadingParams = PropsWithChildren<TypographyProps & Linkable> & { component?: string }
+
+export default function Heading({ children, id, linkable, ...props }: HeadingParams) {
+  const [linkIconIsShown, setlinkIconIsShown] = useState(false)
+  const classes = useStyles()
+
+  return (
+    <div
+      id={id}
+      onMouseEnter={() => setlinkIconIsShown(true)}
+      onMouseLeave={() => setlinkIconIsShown(false)}>
+      <Typography {...props}>
+        {children}
+        {linkable && (
+          <LinkIconButton href={`#${id}`} className={linkIconIsShown ? '' : classes.hideLinkIcon}>
+            <LinkIcon className={classes.linkIcon} />
+          </LinkIconButton>
+        )}
+      </Typography>
+    </div>
+  )
+}
diff --git a/frontend/src/components/index/sections/ActivitySection.tsx b/frontend/src/components/index/sections/ActivitySection.tsx
@@ -4,10 +4,13 @@ import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'
 
+import Heading from 'components/common/Heading'
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     heading: {
-      marginBottom: theme.spacing(5),
+      paddingTop: theme.spacing(10),
+      paddingBottom: theme.spacing(7),
       color: theme.palette.primary.dark,
     },
     container: {
@@ -26,9 +29,9 @@ export default function ActivitySection() {
 
   return (
     <Grid container direction="column" component="section" className={classes.container}>
-      <Typography variant="h5" component="h2" className={classes.heading}>
+      <Heading id="what-we-do" variant="h5" component="h2" className={classes.heading} linkable>
         {t('index:activity-section.heading')}
-      </Typography>
+      </Heading>
       <Grid item>
         <Typography variant="body2">{t('index:activity-section.content')}</Typography>
       </Grid>

diff --git a/frontend/src/components/index/sections/Jumbotron.tsx b/frontend/src/components/index/sections/Jumbotron.tsx
@@ -4,8 +4,8 @@ import { Grid, Typography } from '@material-ui/core'
 import { makeStyles, createStyles, darken, useTheme } from '@material-ui/core/styles'
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'
 import { Favorite } from '@material-ui/icons'
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import Image from "next/image"
+import useMediaQuery from '@material-ui/core/useMediaQuery'
+import Image from 'next/image'
 
 import { routes } from 'common/routes'
 import LinkButton from 'components/common/LinkButton'
@@ -93,11 +93,12 @@ type JumbotronProps = {
 export default function Jumbotron({ scrollTo }: JumbotronProps) {
   const classes = useStyles()
   const { t } = useTranslation()
-  const theme = useTheme();
+  const theme = useTheme()
   //Check if the media query is match and breakpoint is up sm device
-  const matches = useMediaQuery(theme.breakpoints.up('sm'));
-  const imgSource = matches ? '/img/jumbotron-background-image-desktop.jpg' :
-                              '/img/header-image-mobile.jpg';
+  const matches = useMediaQuery(theme.breakpoints.up('sm'))
+  const imgSource = matches
+    ? '/img/jumbotron-background-image-desktop.jpg'
+    : '/img/header-image-mobile.jpg'
 
   const executeScroll = () => {
     if (scrollTo.current) {

diff --git a/frontend/src/components/index/sections/TeamChartSection.tsx b/frontend/src/components/index/sections/TeamChartSection.tsx
@@ -1,13 +1,15 @@
-import { Grid, Typography, Box } from '@material-ui/core'
+import { Grid, Box } from '@material-ui/core'
 import { useTranslation } from 'next-i18next'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
+import Heading from 'components/common/Heading'
 import TeamPie from 'components/index/helpers/chart/TeamPie'
 
 const useStyles = makeStyles((theme) =>
   createStyles({
     heading: {
-      marginBottom: theme.spacing(5),
+      paddingTop: theme.spacing(10),
+      paddingBottom: theme.spacing(7),
       color: theme.palette.primary.dark,
       fontWeight: 500,
     },
@@ -22,9 +24,9 @@ const TeamChartSection = () => {
     <Box component="section" mb={10} textAlign="center">
       <Grid container direction="column" justify="center" spacing={3}>
         <Grid item>
-          <Typography variant="h5" component="h2" className={classes.heading}>
+          <Heading id="team-chart" variant="h5" component="h2" className={classes.heading} linkable>
             {t('index:team-chart-section.heading')}
-          </Typography>
+          </Heading>
         </Grid>
         <Grid item>
           <Box textAlign="center" overflow="hidden">

diff --git a/frontend/src/components/index/sections/TeamSection.tsx b/frontend/src/components/index/sections/TeamSection.tsx
@@ -3,11 +3,13 @@ import { Grid, Typography } from '@material-ui/core'
 import { makeStyles, createStyles } from '@material-ui/core/styles'
 
 import DiscordImage from 'components/about/DiscordImage'
+import Heading from 'components/common/Heading'
 
 const useStyles = makeStyles((theme) =>
   createStyles({
     heading: {
-      marginBottom: theme.spacing(5),
+      paddingTop: theme.spacing(10),
+      paddingBottom: theme.spacing(7),
       color: theme.palette.primary.dark,
       fontWeight: 500,
     },
@@ -30,9 +32,9 @@ export default function TeamSection() {
       justify="center"
       component="section"
       className={classes.container}>
-      <Typography variant="h5" component="h2" className={classes.heading}>
+      <Heading id="who-we-are" variant="h5" component="h2" className={classes.heading} linkable>
         {t('index:team-section.heading')}
-      </Typography>
+      </Heading>
       <Grid container>
         <Grid item>
           <Typography variant="body2">{t('index:team-section.content')}</Typography>