Merge pull request #22 from weaponsforge/dev

v1.0.5

components/countries/index.js

@@ -0,0 +1,26 @@
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import CountryList from '@/domain/profile/countrylist'
+
+function CountriesComponent ({
+  countries,
+  handleSelectCountry
+}) {
+  return (
+    <Container maxWidth='lg' sx={{ margin: 'auto', textAlign: 'center' }}>
+      <Typography variant='h3'>
+        Country Profile
+      </Typography>
+      <Typography variant='h5' sx={{ marginBottom: '48px' }}>
+        Select a country to view its profile
+      </Typography>
+
+      <CountryList
+        countries={countries}
+        handleSelectCountry={handleSelectCountry}
+      />
+    </Container>
+  )
+}
+
+export default CountriesComponent

components/profiletabs/index.js

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
+import Container from '@mui/material/Container'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+
+import NavigationTabs from '@/domain/profiletabs/navigationtabs'
+import TabPanel from '@/domain/profiletabs/tabpanel'
+
+// Main tab sections
+import GHGEmmissions from '@/domain/profiletabs/sections/ghgemmissions'
+import ClimateRisks from '@/domain/profiletabs/sections/climaterisks'
+import ClimateChange from '@/domain/profiletabs/sections/climatechange'
+import ArticleText from '@/components/common/layout/articletext'
+import styles from './styles'
+
+function ProfileTabsComponent ({
+  country,
+  // countries,
+  textData,
+  donutData,
+  barData,
+  // handleSelectCountry
+}) {
+  const [tab, setTab] = useState(0)
+
+  return (
+    <Grid container>
+      {/** Header */}
+      <Grid item xs={12} sx={styles.headerContainer}>
+        <Container maxWidth='lg' sx={styles.headerContent}>
+          <Box sx={styles.headerTitle}>
+            <Box>
+              <Typography variant='h1'>
+                {country}
+              </Typography>
+              <Typography variant='h4'>
+                Country Profile
+              </Typography>
+            </Box>
+
+            <Link href='/countries' passHref>
+              <Button variant='outlined'>
+                Countries
+              </Button>
+            </Link>
+          </Box>
+
+          <NavigationTabs
+            onTabSelect={(newValue) => {
+              setTab(newValue)
+            }}
+          />
+        </Container>
+      </Grid>
+
+      <Grid item xs={12}>
+        <Container maxWidth='lg'>
+          <TabPanel value={tab} index={0}>
+            <GHGEmmissions
+              donutData={donutData}
+              textData={textData[0]}
+            />
+          </TabPanel>
+          <TabPanel value={tab} index={1}>
+            <ClimateRisks barData={barData} textData={textData[0]} />
+          </TabPanel>
+          <TabPanel value={tab} index={2}>
+            <ClimateChange barData={barData} textData={textData[0]} />
+          </TabPanel>
+          <TabPanel value={tab} index={3}>
+            <ArticleText {...textData[1]} />
+          </TabPanel>
+          <TabPanel value={tab} index={4}>
+            <ArticleText {...textData[2]} />
+          </TabPanel>
+        </Container>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ProfileTabsComponent

components/profiletabs/styles.js

@@ -0,0 +1,39 @@
+const styles = {
+  headerContainer: {
+    backgroundColor: theme => theme.palette.primary.main,
+    height: '270px'
+  },
+  headerContent: {
+    paddingBottom: 0,
+    '& h1': {
+      lineHeight: '60px',
+    },
+    '& h1, h3, h4': {
+      color: '#fff',
+      fontFamily: 'Bebas Neue',
+      fontWeight: 'normal'
+    },
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
+  },
+  headerTitle: {
+    marginTop: theme => theme.spacing(9),
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    '& button': {
+      height: '50px',
+      backgroundColor: theme => theme.palette.primary.light,
+      '&:hover': {
+        backgroundColor: '#fff'
+      }
+    },
+    '& a': {
+      textDecoration: 'none'
+    }
+  }
+}
+
+export default styles

domain/profile/countrybutton/index.js

@@ -2,7 +2,7 @@ import Button from '@mui/material/Button'
 import { styled } from '@mui/material/styles'
 
 const CountryButton = styled((props) => (
-  <Button {...props} />
+  <Button {...props} color='tertiary' />
   /* eslint-disable no-unused-vars */
 ))(({ theme }) => ({
   width: '150px'

domain/profiletabs/a11yprops/index.js

@@ -0,0 +1,8 @@
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  }
+}
+
+export default a11yProps

domain/profiletabs/linktab/index.js

@@ -0,0 +1,18 @@
+import Tab from '@mui/material/Tab'
+import styles from './styles'
+
+function LinkTab (props) {
+  return (
+    <Tab
+      sx={styles.tab}
+      component='a'
+      wrapped
+      onClick={(e) => {
+        e.preventDefault()
+      }}
+      {...props}
+    />
+  )
+}
+
+export default LinkTab

domain/profiletabs/linktab/styles.js

@@ -0,0 +1,19 @@
+const styles = {
+  tab: {
+    color: '#fff',
+    textTransform: 'capitalize',
+    '&:hover': {
+      color: '#fff',
+      opacity: 1,
+    },
+    '&.Mui-selected': {
+      color: '#fff',
+      fontWeight: theme => theme.typography.fontWeightMedium,
+    },
+    '&.Mui-focusVisible': {
+      backgroundColor: '#d1eaff',
+    },
+  }
+}
+
+export default styles

domain/profiletabs/navigationtabs/index.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types'
+import { useState } from 'react'
+import Box from '@mui/material/Box'
+import Tabs from '@mui/material/Tabs'
+import LinkTab from '../linktab'
+import styles from './styles'
+
+function NavigationTabs ({ onTabSelect }) {
+  const [value, setValue] = useState(0)
+
+  const handleChange = (e, newValue) => {
+    setValue(newValue)
+
+    if (onTabSelect) {
+      onTabSelect(newValue)
+    }
+  }
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Tabs
+        value={value}
+        onChange={handleChange}
+        aria-label='navigation tabs'
+        sx={styles.tabs}
+        variant='fullWidth'
+        scrollButtons
+        allowScrollButtonsMobile
+      >
+        <LinkTab label='Greenhouse Gas (GHG) Emmissions' href='#' />
+        <LinkTab label='Climate Risks' href='#' />
+        <LinkTab label='Climate Change and Vulnerability' href='#' />
+        <LinkTab label='Adaptation and Mitigation Priorities' href='#' />
+        <LinkTab label='Financing and Opportunities for ADB' href='#' />
+      </Tabs>
+    </Box>
+  )
+}
+
+NavigationTabs.propTypes = {
+  onTabSelect: PropTypes.func
+}
+
+export default NavigationTabs

domain/profiletabs/navigationtabs/styles.js

@@ -0,0 +1,15 @@
+const styles = {
+  tabs: {
+    '& .MuiTabs-indicator': {
+      border: theme => `2px solid ${theme.palette.secondary.main}`,
+      backgroundColor: theme => theme.palette.primary.dark,
+      borderShadow: `
+      rgb(255 255 255) 0px 0px 0px 0px,
+      rgb(0 0 0 / 5%) 0px 0px 0px 1px,
+      rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 5%)
+      0px 4px 6px -2px !important`
+    },
+  }
+}
+
+export default styles

domain/profiletabs/sections/climatechange/index.js

@@ -0,0 +1,34 @@
+import Grid from '@mui/material/Grid'
+import LineGraph from '@/components/common/ui/charts/line'
+import Typography from '@mui/material/Typography'
+import SubContentText from '@/components/common/layout/subtcontenttext'
+
+function ClimateChange ({ barData, textData }) {
+  return (
+    <Grid container sx={{ marginTop: '56px' }}>
+      {/** Climate Change and Vulnerability Section */}
+      <Grid item xs={12}>
+        <Typography variant="h4">
+            Climate Change Scenarios
+        </Typography>
+      </Grid>
+
+      <Grid item xs={12} sm={7}>
+        <SubContentText
+          {...textData}
+          title='Climate Change and Vulnerability'
+        />
+      </Grid>
+
+      <Grid item xs={12} sm={5}>
+        <LineGraph
+          {...barData}
+          width={300}
+          height={300}
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ClimateChange

domain/profiletabs/sections/climaterisks/index.js

@@ -0,0 +1,34 @@
+import Grid from '@mui/material/Grid'
+import BarChart from '@/components/common/ui/charts/bar'
+import Typography from '@mui/material/Typography'
+import SubContentText from '@/components/common/layout/subtcontenttext'
+
+function ClimateRisks ({ barData, textData }) {
+  return (
+    <Grid container sx={{ marginTop: '56px' }}>
+      {/** Climate Risks  Section */}
+      <Grid item xs={12}>
+        <Typography variant="h4">
+            Climate Change Scenarios
+        </Typography>
+      </Grid>
+
+      <Grid item xs={12} sm={7}>
+        <SubContentText
+          {...textData}
+          title='Climate Risks'
+        />
+      </Grid>
+
+      <Grid item xs={12} sm={5}>
+        <BarChart
+          {...barData}
+          width={300}
+          height={300}
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ClimateRisks

domain/profiletabs/sections/ghgemmissions/index.js

@@ -0,0 +1,24 @@
+import Grid from '@mui/material/Grid'
+import DonutChart from '@/components/common/ui/charts/donut'
+import SubContentText from '@/components/common/layout/subtcontenttext'
+
+function GHGEmmissions ({ donutData, textData }) {
+  return (
+    <Grid container sx={{ marginTop: '56px' }}>
+      {/** Greehouse Gas (GHG) Emmissions Section */}
+      <Grid item xs={12} sm={5}>
+        <DonutChart
+          {...donutData}
+          width={300}
+          height={300}
+        />
+      </Grid>
+
+      <Grid item xs={12} sm={7}>
+        <SubContentText {...textData} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default GHGEmmissions

domain/profiletabs/tabpanel/index.js

@@ -0,0 +1,23 @@
+import Box from '@mui/material/Box'
+
+function TabPanel(props) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          {children}
+        </Box>
+      )}
+    </div>
+  )
+}
+
+export default TabPanel

pages/_document.js

@@ -16,6 +16,7 @@ export default class MyDocument extends Document {
             rel="stylesheet"
             href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
           />
+          <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet" />
           {/* Inject MUI styles first to match with the prepend: true configuration. */}
           {this.props.emotionStyleTags}
         </Head>