Merge pull request #109 from ooHmartY/gradient-updates

feat(Gradient): Support spotlight gradients

catalog/pages/header/index.md

@@ -38,7 +38,9 @@ rows:
 ```react
 responsive: true
 ---
-<Header>
+<Header
+  withSpotLight
+>
     <Heading level={1}>
         <Heading.Strong>Generic</Heading.Strong>
         {" "}
@@ -53,7 +55,9 @@ responsive: true
 responsive: true
 ---
 <React.Fragment>
-  <HeaderWithImage>
+  <HeaderWithImage
+    withSpotLight
+  >
     <Column medium={7} large={8}>
       <Row>
         <Breadcrumb style={breadcrumbStyles}>
@@ -130,7 +134,7 @@ responsive: true
   <HeaderWithImage
     withUnderlay={true}
     backgroundImage="https://beta.tmol.co/s3images/City/losangeles_889.jpg"
-    backgroundImageProps={{ deg: { small: "40deg", medium: "39deg", large: "25deg" }, from: colors.defaultGradient.from, to: colors.heliotrope.base, style: { backgroundPosition: "center" } }}
+    backgroundImageProps={{ deg: { small: "40deg", medium: "39deg", large: "25deg" }, stops: [colors.defaultGradient.from, colors.heliotrope.base ], style: { backgroundPosition: "center" } }}
   >
     <Column medium={7} large={8}>
       <Heading level={1}>

src/components/Gradient/Angle.js

@@ -0,0 +1,65 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+const Angle = ({ className }) => (
+  <svg
+    viewBox="0 0 476 218"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    preserveAspectRatio="xMaxYMid meet"
+    className={className}
+  >
+    <defs>
+      <linearGradient
+        x1="21.6784013%"
+        y1="112.586732%"
+        x2="53.474493%"
+        y2="23.9282924%"
+        id="Angle-linearGradient-1"
+      >
+        <stop stopColor="#000000" stopOpacity="0" offset="0%" />
+        <stop stopColor="#000000" offset="100%" />
+        <stop stopColor="#000000" offset="100%" />
+      </linearGradient>
+    </defs>
+    <g
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+      opacity="0.0490513393"
+    >
+      <g
+        transform="translate(-1016.000000, -184.000000)"
+        fill="url(#Angle-linearGradient-1)"
+        fillRule="nonzero"
+      >
+        <g transform="translate(52.000000, 184.000000)">
+          <g transform="translate(-20.000000, 0.000000)">
+            <polygon
+              transform="translate(1222.334169, 109.000000) scale(-1, 1) translate(-1222.334169, -109.000000) "
+              points="984.668337 0 1460 218 984.668337 218"
+            />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+Angle.propTypes = {
+  className: PropTypes.string
+};
+
+Angle.defaultProps = {
+  className: ""
+};
+
+export default styled(Angle)`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: auto;
+`;

src/components/Gradient/SpotLight.js

@@ -0,0 +1,56 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+const SpotLight = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 1440 218"
+    preserveAspectRatio="xMinYMid meet"
+    className={className}
+  >
+    <defs>
+      <linearGradient id="a" x1="61.654%" x2="3.355%" y1="100%" y2="0%">
+        <stop offset="0%" stopColor="#024691" />
+        <stop offset="52.996%" stopColor="#BADBFE" />
+        <stop offset="100%" stopColor="#C56BFF" />
+      </linearGradient>
+      <linearGradient
+        id="c"
+        x1="74.395%"
+        x2=".532%"
+        y1="129.212%"
+        y2="-28.101%"
+      >
+        <stop offset="0%" stopOpacity="0" />
+        <stop offset="100%" stopOpacity=".4" />
+        <stop offset="100%" />
+        <stop offset="100%" stopOpacity=".4" />
+      </linearGradient>
+      <path id="b" d="M0 .748h138.365l1325.043 217.52H413.554z" />
+    </defs>
+    <g fill="none" fillRule="nonzero" opacity=".102" transform="translate(-20)">
+      <use fill="url(#a)" xlinkHref="#b" />
+      <use fill="url(#c)" xlinkHref="#b" />
+    </g>
+  </svg>
+);
+
+SpotLight.propTypes = {
+  className: PropTypes.string
+};
+
+SpotLight.defaultProps = {
+  className: ""
+};
+
+export default styled(SpotLight)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: 100%;
+`;