Merge branch 'master' of https://github.com/uswitch/trustyle into for…

…m-and-panel-styling

src/compounds/hero-card/.npmignore

@@ -0,0 +1,6 @@
+**/*
+
+!lib/*
+!package.json
+!README.md
+!LICENSE

src/compounds/hero-card/.npmrc

@@ -0,0 +1 @@
+package-lock=false

src/compounds/hero-card/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@uswitch/trustyle.hero-card",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "ts:main": "src/index.tsx",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@emotion/core": "^10.0.27",
+    "react": "^16.7.0"
+  },
+  "dependencies": {
+    "@uswitch/trustyle-utils.get": "^1.0.5",
+    "@uswitch/trustyle.button-link": "^1.0.3"
+  }
+}

src/compounds/hero-card/src/index.tsx

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+
+import * as React from 'react'
+import { jsx, Styled } from 'theme-ui'
+import { ButtonLink } from '@uswitch/trustyle.button-link'
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  title: string
+  ctaText: string
+  children: React.ReactNode
+}
+
+const styles = (element?: string) =>
+  `compounds.heroCard.variants${element ? `.${element}` : ''}`
+
+const HeroCard: React.FC<Props> = ({ title, ctaText, children }) => {
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        variant: styles()
+      }}
+    >
+      <div sx={{ variant: styles('flexContainer') }}>
+        <Styled.h1>{title}</Styled.h1>
+        <ButtonLink
+          variant="primary"
+          size="small"
+          sx={{ variant: styles('buttonLink'), display: ['none', 'initial'] }}
+        >
+          {ctaText}
+        </ButtonLink>
+      </div>
+      <div
+        sx={{
+          variant: styles('links')
+        }}
+      >
+        {children}
+      </div>
+      <ButtonLink
+        variant="primary"
+        size="small"
+        sx={{ variant: styles('buttonLink'), display: ['initial', 'none'] }}
+      >
+        {ctaText}
+      </ButtonLink>
+    </div>
+  )
+}
+
+export default HeroCard

src/compounds/hero-card/src/stories.tsx

@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import * as React from 'react'
+import { jsx } from 'theme-ui'
+import { text } from '@storybook/addon-knobs'
+
+import AllThemes, { permutationsGenerator } from '../../../utils/all-themes'
+import { LinkList, LinkListItem } from '../../../elements/link-list/src'
+import { FilledArrow } from '../../../elements/icon/src/filled-arrow'
+
+import HeroCard from '.'
+
+export default {
+  title: 'Compounds|HeroCard'
+}
+
+const title: string = text(
+  'Headline',
+  'Use a travel credit card to avoid spending fees abroad.'
+)
+const ctaText: string = text('CTA', 'Compare Credit Cards')
+const arrow = <FilledArrow color="" />
+
+export const ExampleWithKnobs = () => {
+  return (
+    <HeroCard ctaText={ctaText} title={title}>
+      <LinkList variant="quickLinks">
+        <LinkListItem icon={arrow}>Car Insurance</LinkListItem>
+        <LinkListItem icon={arrow}>Home Insurance</LinkListItem>
+        <LinkListItem icon={arrow}>Income Protection Insurance</LinkListItem>
+      </LinkList>
+    </HeroCard>
+  )
+}
+
+ExampleWithKnobs.story = {
+  parameters: {
+    percy: { skip: true }
+  }
+}
+
+export const AutomatedTests = () => {
+  const permutations = permutationsGenerator({
+    variant: ['primary']
+  })
+
+  return (
+    <AllThemes>
+      {permutations.map((p, i) => (
+        <ExampleWithKnobs key={i} />
+      ))}
+    </AllThemes>
+  )
+}

src/elements/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uswitch/trustyle.button",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "main": "lib/index.js",
   "ts:main": "src/index.tsx",

src/elements/button/src/index.tsx

@@ -37,11 +37,14 @@ const invertTheme = (theme: any, variant: any = {}) => {
     borderColor,
     borderWidth: 2,
     borderStyle: 'solid',
-    ':hover': {
-      backgroundColor: hoverColor
-    },
-    ':hover:not(:disabled)': {
-      backgroundColor: hoverColor
+    '@media (hover: hover)': {
+      // prevents sticky hover bug on iOS
+      ':hover': {
+        backgroundColor: hoverColor
+      },
+      ':hover:not(:disabled)': {
+        backgroundColor: hoverColor
+      }
     }
   }
 }

src/elements/link-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uswitch/trustyle.link-list",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "main": "lib/index.js",
   "ts:main": "src/index.tsx",

src/elements/link-list/src/index.tsx

@@ -24,25 +24,29 @@ export const LinkList: React.FC<ListLinkProps> = ({
 }) => {
   return (
     <div className={className} sx={{ variant: styles(variant) }}>
-      <div
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          variant: styles(variant, 'header')
-        }}
-      >
-        {icon}
-        <Styled.h3
-          as="h2"
+      {(title || icon) && (
+        <header
           sx={{
-            paddingTop: 'xs',
-            paddingBottom: 'xs',
-            margin: 0
+            display: 'flex',
+            alignItems: 'center',
+            variant: styles(variant, 'header')
           }}
         >
-          {title}
-        </Styled.h3>
-      </div>
+          {icon}
+          {title && (
+            <Styled.h3
+              as="h2"
+              sx={{
+                paddingTop: 'xs',
+                paddingBottom: 'xs',
+                margin: 0
+              }}
+            >
+              {title}
+            </Styled.h3>
+          )}
+        </header>
+      )}
       <ul
         sx={{
           padding: 0,

src/themes/bankrate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uswitch/trustyle.bankrate-theme",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "license": "MIT",
   "main": "index.js",
   "publishConfig": {

src/themes/bankrate/theme.json

@@ -44,7 +44,8 @@
   "fontWeights": {
     "base": 400,
     "light": 300,
-    "bold": 600
+    "bold": 600,
+    "heading": 500
   },
 
   "space": {
@@ -78,7 +79,7 @@
 
     "grey-0": "#FFFFFF",
     "grey-05": "#F7F7F7",
-    "grey-10": "#F2F2F3",
+    "grey-10": "#F2F2F7",
     "grey-20": "#DFDFE1",
     "grey-30": "#C2C4C8",
     "grey-40": "#ADAFB3",
@@ -145,6 +146,7 @@
         "color": "white"
       },
       "height": 420,
+      "boxSizing": "border-box",
       "*": {
         "zIndex": 1
       },
@@ -239,6 +241,8 @@
     "card": {
       "itemsPerRow": [1],
       "base": {
+        "backgroundColor": "grey-10",
+        "transition": "all 0.3s ease",
         "width": "100%",
         "height": "100%",
         "borderStyle": "solid",
@@ -297,6 +301,24 @@
             "variant": "compounds.card.base.link"
           },
           "variant": "compounds.card.base"
+        },
+        "horizontal": {
+          "variant": "compounds.card.base",
+          "display": "flex",
+          "flexDirection": "row-reverse",
+          "alignItems": "start",
+          "image": {
+            "pt": "lg",
+            "width": 250
+          },
+
+          "content": {
+            "width": 670,
+            "variant": "compounds.card.base.content"
+          },
+          "link": {
+            "variant": "compounds.card.base.link"
+          }
         }
       }
     },
@@ -350,10 +372,9 @@
     },
 
     "side-nav": {
-      "pl": 0,
-      "ml": 0,
+      "paddingLeft": 0,
+      "marginLeft": 0,
       "border": 0,
-
       "layout": {
         "flexDirection": ["column-reverse", "column-reverse", "column-reverse"],
         "text": [12, 12, 12],
@@ -641,6 +662,12 @@
     "image-link": {
       "height": [48, 48],
       "width": [48, 48]
+    },
+    "link": {
+      "fontWeight": "base"
+    },
+    "text": {
+      "fontWeight": "base"
     }
   },
 
@@ -769,67 +796,63 @@
       "fontFamily": "heading",
       "color": "grey-90",
       "lineHeight": "heading",
-      "fontWeight": "base"
+      "fontWeight": "heading",
+      "m": 0
     },
 
     "h1": {
       "variant": "styles.heading",
       "fontSize": ["xxl", "xxxl"],
-      "marginTop": 0,
-      "marginBottom": "sm"
+      "my": "md"
     },
 
     "h2": {
       "variant": "styles.heading",
       "fontSize": ["xl", "xxl"],
-      "marginTop": "md",
-      "marginBottom": "sm"
+      "my": "md"
     },
 
     "h3": {
       "variant": "styles.heading",
       "fontSize": ["lg", "xl"],
-      "marginY": "sm"
+      "my": "sm"
     },
 
     "h4": {
       "variant": "styles.heading",
       "fontSize": ["md", "lg"],
-      "marginTop": 0,
-      "marginBottom": "sm"
+      "my": "sm"
     },
 
     "h5": {
       "variant": "styles.heading",
       "fontSize": ["sm","md"],
-      "marginTop": 0,
-      "marginBottom": "sm"
+      "my": "sm"
     },
 
     "h6": {
       "variant": "styles.heading",
       "fontSize": "sm",
-      "marginTop": 0,
-      "marginBottom": "sm"
+      "my": "sm"
     },
 
     "p": {
-      "mt": 0,
-      "mb": "base"
+      "mb": "sm",
+      "lineHeight": "base"
     },
 
     "root": {
       "fontFamily": "base",
-      "fontSize": "base",
+      "fontSize": "md",
       "fontWeight": "base",
       "lineHeight": "base",
-      "color": "grey-100",
+      "color": "grey-80",
       "-webkit-font-smoothing": "antialiased",
       "-moz-osx-font-smoothing": "grayscale"
     },
 
     "a": {
-      "color": "inherit",
+      "color": "brand",
       "stroke": "currentColor",
       "textDecoration": "underline",
       "transition": "opacity 0.2s ease",