Adding Hover Tile system component

components/system/SystemPage.js

@@ -265,6 +265,7 @@ export default class SystemPage extends React.Component {
           />
           <SidebarLink url={url} href="/_/system/dropdowns" title="Dropdowns" />
           <SidebarLink url={url} href="/_/system/globe" title="Globe" />
+          <SidebarLink url={url} href="/_/system/hover-tile" title="Hover Tile" />
           <SidebarLink url={url} href="/_/system/icons" title="Icons" />
           <SidebarLink url={url} href="/_/system/inputs" title="Inputs" />
           <SidebarLink

components/system/components/HoverTile.js

@@ -0,0 +1,91 @@
+import * as React from 'react';
+
+import { css } from "@emotion/react";
+
+const STYLES_TILE = css`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform .6s, box-shadow .65s ease;
+  transform-style: preserve-3d;
+  z-index: -1;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: white;
+`;
+
+const STYLES_TILE_CONTAINER = css`
+  width: 300px;
+  height: 300px;
+  position: relative;
+  perspective: 600px;
+  display: inline-block;
+`;
+
+export class HoverTile extends React.Component {
+  constructor(props) {
+    super(props);
+    
+    this.state = {
+      tileStyle: {},
+    };
+
+    this.containerRef = React.createRef();
+  }
+
+  handleMovement = e => {
+    const { offsetLeft, offsetTop } = this.containerRef.current;
+    const width = this.props.width ? this.props.width : 300;
+    const height = this.props.height ? this.props.height : 300;
+    const relativeX = e.pageX - offsetLeft;
+    const relativeY = e.pageY - offsetTop;
+
+    let xP = (((relativeX / width) - .5) * 10);
+    let yP = (((relativeY / height) - .5) * 10);
+
+    if (xP >= 0 && yP >= 0) {
+      this.setTransform(4, 4);
+    } else if (xP < 0 && yP >= 0) {
+      this.setTransform(-4, 4);
+    } else if (xP < 0 && yP < 0) {
+      this.setTransform(-4, -4);
+    } else {
+      this.setTransform(4, -4);
+    }
+  };
+
+  handleExit = () => {
+    this.setState({ tileStyle: { 'transform': 'none', 'boxShadow': 'none' } });
+  };
+
+  setTransform = (x, y) => {
+    this.setState({
+      tileStyle: {
+        'transform': `scale(.97) rotateY(${x}deg) rotateX(${y * -1}deg)`,
+        'boxShadow': `${((x * -1) * .75)}px ${((y * -1) * 1.2)}px 25px rgba(0, 0, 0, .15)`,
+      }
+    })
+  };
+
+  render() {
+    return (
+      <div 
+        css={STYLES_TILE_CONTAINER}
+        style={{ width: this.props.width, height: this.props.height }}
+        onMouseEnter={this.handleMovement}
+        onMouseMove={this.handleMovement}
+        onMouseLeave={this.handleExit}
+        ref={this.containerRef}
+      >
+        <div
+          css={STYLES_TILE}
+          style={{...this.state.tileStyle, ...this.props.style}}
+        >
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+};

components/system/index.js

@@ -35,6 +35,7 @@ import { CardTabGroup } from "~/components/system/components/CardTabGroup";
 import { CheckBox } from "~/components/system/components/CheckBox";
 import { CodeTextarea } from "~/components/system/components/CodeTextarea";
 import { DatePicker } from "~/components/system/components/DatePicker";
+import { HoverTile } from '~/components/system/components/HoverTile';
 import { Input } from "~/components/system/components/Input";
 import { ListEditor } from "~/components/system/components/ListEditor";
 import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
@@ -113,6 +114,7 @@ export {
   GlobalModal,
   GlobalCarousel,
   GlobalNotification,
+  HoverTile,
   Input,
   ListEditor,
   PopoverNavigation,

pages/_/system/hover-tile.js

@@ -0,0 +1,105 @@
+import * as React from "react";
+import * as System from "~/components/system";
+
+import Group from "~/components/system/Group";
+import SystemPage from "../../../components/system/SystemPage";
+import ViewSourceLink from "~/components/system/ViewSourceLink";
+import CodeBlock from '~/components/system/CodeBlock';
+
+export default class SystemHoverTile extends React.Component {
+  render() {
+    return (
+      <SystemPage
+        title="SDS: Hover Tile"
+        description="..."
+        url="https://slate.host/_/system/hover-tile"
+      >
+        <System.H1>
+          Hover Tile <ViewSourceLink file="system/hover-tile.js" />
+        </System.H1>
+        <br />
+        <br />
+        <System.P>The Hover Tile component is an animated, moving container.</System.P>
+        <br />
+        <br />
+        <br />
+        <System.H2>Imports</System.H2>
+        <hr />
+        <br />
+        <System.P>Import React and the Hover Tile Component.</System.P>
+        <br />
+        <br />
+        <CodeBlock>
+          {`import * as React from "react";
+import { HoverTile } from "slate-react-system";`}
+        </CodeBlock>
+        <br />
+        <br />
+        <System.H2>Usage</System.H2>
+        <hr />
+        <br />
+        <System.P>Declare the Hover Tile component.</System.P>
+        <CodeBlock>
+          {`class Example extends React.Component {
+  render() {
+    return (
+      <HoverTile style={{ padding: 24 }}>
+        Example Content
+      </HoverTile>
+    );
+  }
+}`}
+        </CodeBlock>
+        <br />
+        <br />
+        <System.H2>Output</System.H2>
+        <hr />
+        <br />
+        <System.HoverTile style={{ padding: 24 }}>
+          Example Content
+        </System.HoverTile>
+        <br />
+        <br />
+        <br />
+        <System.H2>Accepted React Properties</System.H2>
+        <hr />
+        <br />
+        <Group title="Hover Tiles">
+          <System.Table
+            data={{
+              columns: [
+                { key: "a", name: "Name", width: "128px" },
+                { key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
+                { key: "c", name: "Default", width: "88px" },
+                { key: "d", name: "Description", width: "100%" },
+              ],
+              rows: [
+                {
+                  id: 1,
+                  a: "width",
+                  b: "number",
+                  c: "300",
+                  d: "Hover Tile width",
+                },
+                {
+                  id: 2,
+                  a: "height",
+                  b: "number",
+                  c: "300",
+                  d: "Hover Tile height",
+                },
+                {
+                  id: 3,
+                  a: "style",
+                  b: "Object",
+                  c: "{}",
+                  d: "Style object used to style the Hover Tile (background-color, etc.)",
+                },
+              ],
+            }}
+          />
+        </Group>
+      </SystemPage>
+    );
+  }
+}