From 3aaaa2416da3241c6c56c003422ce29b61cbfa92 Mon Sep 17 00:00:00 2001
From: Dan George <dan.george@jisc.ac.uk>
Date: Mon, 21 Jun 2021 16:15:30 +0100
Subject: [PATCH 1/2] Add Select border to TextExample component

---
 .../JiscTextExample.stories.js                | 48 +++++++++++++++++++
 src/components/JiscTextExample/index.jsx      | 24 +++++++++-
 2 files changed, 70 insertions(+), 2 deletions(-)

diff --git a/src/components/JiscTextExample/JiscTextExample.stories.js b/src/components/JiscTextExample/JiscTextExample.stories.js
index c224f06..e762daa 100644
--- a/src/components/JiscTextExample/JiscTextExample.stories.js
+++ b/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>
+    </>
+    
+);
+
+
diff --git a/src/components/JiscTextExample/index.jsx b/src/components/JiscTextExample/index.jsx
index 3cef399..1ccf49c 100644
--- a/src/components/JiscTextExample/index.jsx
+++ b/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,22 @@ const useStyles = ({ backgroundImage, backgroundColor }) => {
                     position: 'absolute',
                     right: '-80px',
                     bottom: 0
-                }
+                },
+                '& :focus': {
+                    '& .MuiCardActionArea-focusHighlight': {
+                        opacity: 0.8,
+                        border: 4,
+                        borderStyle: 'solid',
+                        borderColor: '#4BE5B0',
+                        background: 'transparent'
+                    }
+                },
+                '& .MuiCardActionArea-root': {
+                    opacity: 1,
+                    position: 'absolute',
+                    left: '0px',
+                    height: '160px'
+                },
             },
             textContainer: {
                 color: 'white',
@@ -103,7 +119,8 @@ const JiscTextExample = ({
     showTwitter,
     showEssay,
     showFilm,
-    showAction
+    showAction,
+    children
 }) => {
     const classes = useStyles({ backgroundColor, backgroundImage, imageHeight })();
 
@@ -176,6 +193,9 @@ const JiscTextExample = ({
                     <Typography className={classes.cardTitle}>{exampleTextType}</Typography>
                 </Container>
             )}
+
+            {children}
+
         </Container>
     );
 };

From b10da1e5598ee8d11a1ab14f398afd7bacbc4c24 Mon Sep 17 00:00:00 2001
From: Dan George <dan.george@jisc.ac.uk>
Date: Tue, 3 Aug 2021 11:27:22 +0100
Subject: [PATCH 2/2] Fix Card Select issue

---
 src/components/JiscCard/index.jsx        |  3 ++-
 src/components/JiscTextExample/index.jsx | 21 +++++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/JiscCard/index.jsx b/src/components/JiscCard/index.jsx
index 034d6a3..756d725 100644
--- a/src/components/JiscCard/index.jsx
+++ b/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'
                 },
diff --git a/src/components/JiscTextExample/index.jsx b/src/components/JiscTextExample/index.jsx
index 1ccf49c..4bda653 100644
--- a/src/components/JiscTextExample/index.jsx
+++ b/src/components/JiscTextExample/index.jsx
@@ -27,20 +27,21 @@ const useStyles = ({ backgroundImage, backgroundColor }) => {
                     right: '-80px',
                     bottom: 0
                 },
-                '& :focus': {
-                    '& .MuiCardActionArea-focusHighlight': {
+                '@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'
-                    }
-                },
-                '& .MuiCardActionArea-root': {
-                    opacity: 1,
-                    position: 'absolute',
-                    left: '0px',
-                    height: '160px'
+                        background: 'transparent',
+                    },    
                 },
             },
             textContainer: {