Language selection expansion panel tooltip (#471)

* [QOL] Added language selection tooltip

Author: Toorain

src/components/pages/Settings/Language/GameLanguageSelection/GameLanguageSelection.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { Typography } from '@material-ui/core'
+
+const GameLanguageSelection = () => (
+  <Typography paragraph>
+    To select a language, go to the Expansion tab above and use the edit button
+    to select the language for each Expansion.
+  </Typography>
+)
+
+export default connect()(React.memo(GameLanguageSelection))

src/components/pages/Settings/Language/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import useExpansionHandling from 'hooks/useExpansionHandling'
+
+import ExpansionPanel from 'components/molecules/ExpansionPanel'
+import GameLanguageSelection from './GameLanguageSelection/GameLanguageSelection'
+
+const Language = () => {
+  const { expanded, createExpansionHandler } = useExpansionHandling()
+  const expansionKey = 'languageSelectionSet'
+  const expansionHandler = createExpansionHandler(expansionKey)
+
+  return (
+    <ExpansionPanel
+      expanded={expanded}
+      expansionHandler={expansionHandler}
+      expansionKey={expansionKey}
+      summary="Language Selection"
+      data-test="LanguageSelection"
+    >
+      <GameLanguageSelection />
+    </ExpansionPanel>
+  )
+}
+
+export default React.memo(Language)

src/components/pages/Settings/index.tsx

@@ -2,11 +2,13 @@ import React from 'react'
 
 import Expansions from './Expansions'
 import Supply from './Supply'
+import Language from './Language'
 
 const Settings = () => (
   <React.Fragment>
     <Expansions />
     <Supply />
+    <Language />
   </React.Fragment>
 )