make card clickable (#398)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.4.10",
+  "version": "4.4.11",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

src/components/Card/Card.css

@@ -8,6 +8,14 @@
   overflow: hidden;
 }
 
+.tyk-card--selectable {
+  cursor: pointer;
+}
+
+.tyk-card--selected {
+  border: 1px solid var(--color-primary-base);
+}
+
 .tyk-card__header {
   align-items: center;
   display: flex;

src/components/Card/Card.test.js

@@ -158,4 +158,87 @@ describe('Card', () => {
       .and('have.class', cssClasses.card)
       .and('have.class', customClass);
   });
+
+
+
+  describe('Card - Selected and Selectable', () => {
+    const cssClassesSelected = {
+      selected: 'tyk-card--selected',
+      selectable: 'tyk-card--selectable',
+    };
+
+    const selectors = {
+      card: `.${cssClasses.card}`,
+      selected: `.${cssClassesSelected.selected}`,
+      selectable: `.${cssClassesSelected.selectable}`,
+    };
+
+    it('should render with the "selected" class when selected prop is true', () => {
+      cy.mount(
+        <Card selected>
+          <Card.Body>
+            <Card.Title>Selected Card</Card.Title>
+          </Card.Body>
+        </Card>,
+      )
+        .get(selectors.card)
+        .should('exist')
+        .and('have.class', cssClassesSelected.selected);
+    });
+
+    it('should not render the "selected" class when selected prop is false', () => {
+      cy.mount(
+        <Card>
+          <Card.Body>
+            <Card.Title>Not Selected Card</Card.Title>
+          </Card.Body>
+        </Card>,
+      )
+        .get(selectors.card)
+        .should('exist')
+        .and('not.have.class', cssClassesSelected.selected);
+    });
+
+    it('should render with the "selectable" class when onSelect prop is provided', () => {
+      cy.mount(
+        <Card onSelect={() => {}}>
+          <Card.Body>
+            <Card.Title>Selectable Card</Card.Title>
+          </Card.Body>
+        </Card>,
+      )
+        .get(selectors.card)
+        .should('exist')
+        .and('have.class', cssClassesSelected.selectable);
+    });
+
+    it('should not render the "selectable" class when onSelect prop is not provided', () => {
+      cy.mount(
+        <Card>
+          <Card.Body>
+            <Card.Title>Not Selectable Card</Card.Title>
+          </Card.Body>
+        </Card>,
+      )
+        .get(selectors.card)
+        .should('exist')
+        .and('not.have.class', cssClassesSelected.selectable);
+    });
+
+    it('should trigger onSelect callback when selectable card is clicked', () => {
+      const onSelectSpy = cy.spy().as('onSelectSpy');
+
+      cy.mount(
+        <Card onSelect={onSelectSpy}>
+          <Card.Body>
+            <Card.Title>Selectable Card</Card.Title>
+          </Card.Body>
+        </Card>,
+      )
+        .get(selectors.card)
+        .click();
+
+      cy.get('@onSelectSpy').should('have.been.calledOnce');
+    });
+  });
 });

src/components/Card/Readme.md

@@ -1,14 +1,33 @@
 
 *Card component*
 ```js
+import { useState } from 'react';
 import Button from '../Button';
 import Icon from '../Icon';
 import Pill from '../Pill';
 import Column from '../../layout/Column';
 import Row from '../../layout/Row';
 
+const [isCardActive, setIsCardActive] = useState(false);
+
 <Row>
+  <Column size="sm-6 md-6 lg-6" className="bottom-buffer-large">
+    <Card onSelect={() => {setIsCardActive(!isCardActive)}} selected={isCardActive}>
+      <Card.Body>
+        <Card.Title>Clickable Card title</Card.Title>
+        <Card.SubTitle>Card subtitle</Card.SubTitle>
+      </Card.Body>
+    </Card>
+  </Column>
   <Column size="sm-12" className="bottom-buffer-large">
+  <Card>
+      <Card.Body>
+        <Card.Title>Card title</Card.Title>
+        <Card.SubTitle>Card subtitle</Card.SubTitle>
+        <Card.Summary maxLines="auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
+        </Card.Summary>
+      </Card.Body>
+    </Card>
     <Card>
       <Card.Header
         right={(

src/components/Card/index.js

@@ -12,10 +12,22 @@ import CardTitleIcon from './CardTitleIcon';
 function Card({
   className = '',
   height = 'auto',
+  onSelect,
+  selected,
   children,
 }) {
+
   return (
-    <div style={{ height }} className={`tyk-card ${className}`}>
+    <div
+      style={{ height }}
+      className={
+        `tyk-card
+         ${selected ? 'tyk-card--selected' : ''}
+         ${onSelect ? 'tyk-card--selectable' : ''}
+         ${className || ''}`
+      }
+      {...(onSelect ? { onClick: onSelect } : {})}
+    >
       {children}
     </div>
   );