Add Select border to TextExample component

src/components/JiscCard/index.jsx

@@ -15,10 +15,11 @@ const useStyles = ({ backgroundColor }) => {
             style3: {},
             '@global': {
                 // Style 2
+
                 '[class*="MuiButtonBase"]:focus [class*="MuiCardActionArea-focusHighlight"]': {
                     opacity: '0.8',
-                    border: '4',
                     background: 'transparent',
+                    border: '4px',
                     borderColor: '#4BE5B0',
                     borderStyle: 'solid'
                 },

src/components/JiscTextExample/JiscTextExample.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { withA11y } from '@storybook/addon-a11y';
+import { CardActionArea, Grid} from '@material-ui/core';
 import JiscTextExample from './index.jsx';
 
 export default {
@@ -45,4 +46,51 @@ export const Custom = () => (
         backgroundImage='https://images.unsplash.com/photo-1435224654926-ecc9f7fa028c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80'
         showAction
     ></JiscTextExample>
+
 );
+
+export const Selected = () => (
+    <>
+    <Grid container spacing={3}>
+            <Grid item xs={4}>
+                <JiscTextExample
+                    exampleText='“Something that is outstanding is the fact that it has no real action…”'
+                    cardCategory='essay'
+                    exampleTextType='Essay Feedback'
+                    showEssay
+                    showAction
+                >
+                    <CardActionArea></CardActionArea>
+                </JiscTextExample>
+            </Grid>
+
+            <Grid item xs={4}>
+                <JiscTextExample
+                    exampleText='"Amazing piece of work from @Jisc working with publishers…"'
+                    cardCategory='twitter'
+                    exampleTextType='Example Tweet'
+                    showTwitter
+                    showAction
+                >
+                    <CardActionArea></CardActionArea>
+                </JiscTextExample>
+            </Grid>
+
+            <Grid item xs={4}>
+                <JiscTextExample
+                    exampleText='"You have a clever argument. Importantly, you build…"'
+                    cardCategory='film'
+                    exampleTextType='Film Review'
+                    showFilm
+                    showAction
+                >
+                    <CardActionArea></CardActionArea>
+                </JiscTextExample>
+            </Grid>
+
+        </Grid>
+    </>
+
+);
+
+

src/components/JiscTextExample/index.jsx

@@ -7,6 +7,7 @@ import jiscTheme from '../../theme.js';
 const useStyles = ({ backgroundImage, backgroundColor }) => {
     return makeStyles((theme) => {
         return {
+
             button: {
                 backgroundColor: '#f40'
             },
@@ -25,7 +26,23 @@ const useStyles = ({ backgroundImage, backgroundColor }) => {
                     position: 'absolute',
                     right: '-80px',
                     bottom: 0
-                }
+                },
+                '@global': {
+                    '[class*="MuiButtonBase-root"]': {
+                        opacity: 1,
+                        width:'100%',
+                        height:'160px',
+                        left:'0px',
+                        position:'absolute'
+                    },
+                    '[class*="MuiButtonBase-root"]:focus [class*="MuiCardActionArea-focusHighlight"]': {
+                        opacity: 0.8,
+                        border: 4,
+                        borderStyle: 'solid',
+                        borderColor: '#4BE5B0',
+                        background: 'transparent',
+                    },    
+                },
             },
             textContainer: {
                 color: 'white',
@@ -103,7 +120,8 @@ const JiscTextExample = ({
     showTwitter,
     showEssay,
     showFilm,
-    showAction
+    showAction,
+    children
 }) => {
     const classes = useStyles({ backgroundColor, backgroundImage, imageHeight })();
 
@@ -176,6 +194,9 @@ const JiscTextExample = ({
                     <Typography className={classes.cardTitle}>{exampleTextType}</Typography>
                 </Container>
             )}
+
+            {children}
+
         </Container>
     );
 };