Merge pull request #384 from storybookjs/cardinal-inverse-link

add inverse styling for link and selectable variants of the cardinal

Author: winkerVSbecks

src/components/Cardinal.stories.tsx

@@ -51,10 +51,25 @@ export const AllCardinals = () => (
       text="Selectable"
       noPlural
     />
+    <div style={{ background: '#171C23', display: 'inline-block' }}>
+      <Cardinal
+        selectable
+        onHover={onHover}
+        onClick={onClick}
+        size="small"
+        count={14}
+        text="Selectable"
+        status="inverse"
+        noPlural
+      />
+    </div>
     <br />
     <Cardinal isLoading />
     <Cardinal count={37} text="Stories" />
     <Cardinal count={12} countLink="http://github.com" text="Commits" />
+    <div style={{ background: '#171C23', display: 'inline-block' }}>
+      <Cardinal count={12} countLink="http://github.com" text="Commits" status="inverse" />
+    </div>
     <Cardinal size="large" count={1} text="Story" />
     <Cardinal size="large" count={2} text="Story" />
   </div>

src/components/Cardinal.tsx

@@ -119,10 +119,20 @@ const CardinalInner = styled.div<CardinalInnerProps>`
     `};
 
   ${(props) =>
-    props.active &&
-    css`
-      background: ${background.app};
-    `};
+    props.selectable &&
+    (props.inverse
+      ? css`
+          &:hover {
+            background: rgba(255, 255, 255, 0.2);
+          }
+        `
+      : css`
+          cursor: pointer;
+
+          &:hover {
+            background: ${background.app};
+          }
+        `)};
 
   ${Count} {
     font-weight: ${(props) =>
@@ -138,6 +148,14 @@ const CardinalInner = styled.div<CardinalInnerProps>`
     line-height: ${(props) => (props.size === 'small' ? typography.size.s2 : typography.size.m1)}px;
     clear: both;
   }
+
+  ${(props) =>
+    props.inverse &&
+    css`
+      a {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    `}
 `;
 
 export interface CardinalProps {
@@ -176,7 +194,11 @@ export function Cardinal({
 }: CardinalProps) {
   let countValue = count;
   if (countLink) {
-    countValue = <Link href={countLink}>{count}</Link>;
+    countValue = (
+      <Link href={countLink} inverse={status === 'inverse'}>
+        {count}
+      </Link>
+    );
   }
   let events = {};
   if (selectable) {