feat: blue highlight when a package is selected

packages/my-joyent/src/components/package/index.js

@@ -16,20 +16,26 @@ const PackageStyled = styled(Card)`
   margin-bottom: ${remcalc(18)};
 `;
 
-const Package = ({ pack: { price, memory, vcpus, disk, group } }) => (
-  <PackageStyled transparent>
+const Package = ({
+      pack: { price, memory, vcpus, disk, group },
+      selected,
+      onClick
+    }) => (
+      <PackageStyled transparent selected={selected} onClick={onClick}>
         <CardView>
           <CardMeta>
-        <CardTitle>${price} per hour</CardTitle>
-        <CardSubTitle>{memory} GB RAM</CardSubTitle>
-        <CardSubTitle>{vcpus} vCPUs</CardSubTitle>
-        <CardSubTitle>{disk / 100} TB disk</CardSubTitle>
-        <CardSubTitle>SSD</CardSubTitle>
+            <CardTitle selected={selected}>${price} per hour</CardTitle>
+            <CardSubTitle selected={selected}>{memory} GB RAM</CardSubTitle>
+            <CardSubTitle selected={selected}>{vcpus} vCPUs</CardSubTitle>
+            <CardSubTitle selected={selected}>
+              {disk / 100} TB disk
+            </CardSubTitle>
+            <CardSubTitle selected={selected}>SSD</CardSubTitle>
 
-        <CardFooter>{group}</CardFooter>
+            <CardFooter selected={selected}>{group}</CardFooter>
           </CardMeta>
         </CardView>
       </PackageStyled>
-);
+    );
 
 export default Package;

packages/my-joyent/src/components/packages/list.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
 import { Col } from 'react-styled-flexboxgrid';
@@ -15,18 +15,45 @@ const ListStyled = styled.section`
   margin-right: -0.5rem;
   margin-left: -0.5rem;
 `;
-const Packages = ({ packages }) => (
+
+class Packages extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      selected: null
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(i) {
+    this.setState({
+      selected: i
+    });
+  }
+  render() {
+    const { packages } = this.props;
+    const { selected } = this.state;
+
+    return (
       <ListStyled>
         {packages.length > 0 ? (
-      packages.map(pack => (
-        <Col xs={12} sm={6} md={4} lg={3} key={pack.name}>
-          <Package pack={pack} />
+          packages.map((pack, i) => (
+            <Col xs={12} sm={6} md={4} lg={3} key={i}>
+              <Package
+                pack={pack}
+                onClick={() => this.handleClick(i)}
+                selected={selected === i}
+              />
             </Col>
           ))
         ) : (
           'There are no packages that meet your criteria'
         )}
       </ListStyled>
-);
+    );
+  }
+}
 
 export default Packages;

packages/ui-toolkit/src/card/card.js

@@ -42,6 +42,13 @@ const StyledCard = Row.extend`
     box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
     min-height: ${remcalc(185)};
     min-width: 292px;
+    cursor: pointer;
+    transition: all 300ms ease;
+  `};
+
+  ${is('transparent', 'selected')`
+    border: 1px solid ${props => props.theme.blue};
+    background: ${props => props.theme.tertiaryActive};
   `};
 
   ${is('stacked')`

packages/ui-toolkit/src/card/footer.js

@@ -1,4 +1,5 @@
 import { Subscriber } from 'react-broadcast';
+import is from 'styled-is';
 import styled from 'styled-components';
 import Baseline from '../baseline';
 import typography from '../typography';
@@ -26,11 +27,15 @@ const Span = styled.span`
   text-transform: uppercase;
 
   color: rgba(73, 73, 73, 0.5);
+
+  ${is('selected')`
+      color: rgba(41, 49, 194, 0.5);
+  `};
 `;
-const Footer = ({ children }) => {
+const Footer = ({ children, selected }) => {
   const render = () => (
     <StyledTitle name="card-footer">
-      <Span>{children}</Span>
+      <Span selected={selected}>{children}</Span>
     </StyledTitle>
   );
 

packages/ui-toolkit/src/card/title.js

@@ -37,6 +37,10 @@ const Container = styled.div`
     justify-content: center;
     padding: 0 ${remcalc(18)};
   `};
+
+    ${is('selected')`
+      color: ${props => props.theme.blue};
+    `};
 `;
 
 const Span = styled.span`

packages/ui-toolkit/src/card/usage.md

@@ -82,6 +82,35 @@ const {
 </Card>
 ```
 
+```
+const {
+  CardDescription,
+  CardHeader,
+  CardMeta,
+  CardOptions,
+  CardOutlet,
+  CardSubTitle,
+  CardTitle,
+  CardView,
+  CardGroupView,
+  CardFooter
+} = require('./');
+
+<Card transparent selected>
+  <CardView>
+    <CardMeta>
+      <CardTitle selected>$0.016 per hour</CardTitle>
+      <CardSubTitle selected>0.256 GB RAM</CardSubTitle>
+      <CardSubTitle selected>0.25 vCPUs</CardSubTitle>
+      <CardSubTitle selected>0.01 TB disk</CardSubTitle>
+      <CardSubTitle selected>SSD</CardSubTitle>
+
+      <CardFooter selected>Compute Optimise</CardFooter>
+    </CardMeta>
+  </CardView>
+</Card>
+```
+
 #### `headed`
 
 ```