Merge pull request #106 from monicavarhale/globalFooter

feat(Footer & Flyout): Create Footer and Flyout component in prism

catalog/pages/icons/index.js

@@ -10,7 +10,13 @@ import {
   VenueIcon,
   VipIcon,
   CrossIcon,
-  StarIcon
+  StarIcon,
+  TwitterIcon,
+  InstagramIcon,
+  YoutubeIcon,
+  FacebookIcon,
+  USIcon,
+  CAIcon
 } from "../../../src/components/Icons/index";
 import { Container, Row, Column } from "../../../src/components/Grid";
 import colors from "../../../src/theme/colors";
@@ -42,6 +48,12 @@ export default {
     VipIcon,
     CrossIcon,
     StarIcon,
+    TwitterIcon,
+    InstagramIcon,
+    FacebookIcon,
+    YoutubeIcon,
+    USIcon,
+    CAIcon,
     Container,
     Row,
     Column,

catalog/pages/icons/index.md

@@ -107,6 +107,39 @@ rows:
     <div style={iconStyle}><ParkingIcon size={26} color="#000"><title>Parking Icon</title></ParkingIcon></div>
     <div style={iconLabelStyle}>Parking Icon</div>
   </Column>
+
+  <Column medium={3}>
+    <div style={iconStyle}><TwitterIcon size={26} color="#000"><title>Twitter Icon</title></TwitterIcon></div>
+    <div style={iconLabelStyle}>Twitter Icon</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={iconStyle}><FacebookIcon size={26} color="#000"><title>Facebook Icon</title></FacebookIcon></div>
+    <div style={iconLabelStyle}>Facebook Icon</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={iconStyle}><InstagramIcon size={26} color="#000"><title>Instagram Icon</title></InstagramIcon></div>
+    <div style={iconLabelStyle}>Instagram Icon</div>
+  </Column>
 </Row>
+
+<Row>
+<Column medium={3}>
+    <div style={iconStyle}><YoutubeIcon size={26} color="#000"><title>Youtube Icon</title></YoutubeIcon></div>
+    <div style={iconLabelStyle}>Youtube Icon</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={iconStyle}><USIcon height={13} width={22}><title>US Icon</title></USIcon></div>
+    <div style={iconLabelStyle}>US Icon</div>
+  </Column>
+
+   <Column medium={3}>
+    <div style={iconStyle}><CAIcon height={13} width={22}><title>CA Icon</title></CAIcon></div>
+    <div style={iconLabelStyle}>CA Icon</div>
+  </Column>
+</Row>
+
 </Container>
 ```

src/components/Icons/CA.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { PropTypes } from "prop-types";
+
+const CAIcon = ({ height, width, children, ...props }) => (
+  <svg {...props} height={height} width={width} viewBox="0 0 640 480">
+    {children}
+    <g transform="translate(74.118) scale(.9375)">
+      <path fill="#fff" d="M81.137 0h362.276v512H81.137z" />
+      <path
+        fill="#bf0a30"
+        d="M-100 0H81.138v512H-100zm543.413 0H624.55v512H443.414zM135.31 247.41l-14.067 4.808 65.456 57.446c4.95 14.764-1.72 19.116-5.97 26.86l71.06-9.02-1.85 71.512 14.718-.423-3.21-70.918 71.13 8.432c-4.402-9.297-8.32-14.233-4.247-29.098l65.414-54.426-11.447-4.144c-9.36-7.222 4.044-34.784 6.066-52.178 0 0-38.195 13.135-40.698 6.262l-9.727-18.685-34.747 38.17c-3.796.91-5.413-.6-6.304-3.808l16.053-79.766-25.42 14.297c-2.128.91-4.256.125-5.658-2.355l-24.45-49.06-25.21 50.95c-1.9 1.826-3.803 2.037-5.382.796l-24.204-13.578 14.53 79.143c-1.156 3.14-3.924 4.025-7.18 2.324l-33.216-37.737c-4.345 6.962-7.29 18.336-13.033 20.885-5.744 2.387-24.98-4.823-37.873-7.637 4.404 15.895 18.176 42.302 9.46 50.957z"
+      />
+    </g>
+  </svg>
+);
+
+CAIcon.displayName = "CAIcon";
+
+CAIcon.defaultProps = {
+  children: null
+};
+
+CAIcon.propTypes = {
+  height: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  children: PropTypes.node
+};
+
+export default CAIcon;

src/components/Icons/Checkmark.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const Checkmark = ({ size, color, ...props }) => (
+const Checkmark = ({ size, color, children, ...props }) => (
   <svg
     {...props}
     viewBox="0 0 24 28"
@@ -14,6 +14,7 @@ const Checkmark = ({ size, color, ...props }) => (
     fill="none"
     fillRule="evenodd"
   >
+    {children}
     <path d="M5.215 12.219l4.437 4.439 9.514-9.433" />
   </svg>
 );
@@ -22,12 +23,14 @@ Checkmark.displayName = "Checkmark";
 
 Checkmark.defaultProps = {
   size: 24,
-  color: "currentcolor"
+  color: "currentcolor",
+  children: null
 };
 
 Checkmark.propTypes = {
   size: PropTypes.number,
-  color: PropTypes.string
+  color: PropTypes.string,
+  children: PropTypes.node
 };
 
 export default Checkmark;

src/components/Icons/Cross.js

@@ -1,21 +1,24 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const CrossIcon = ({ size, color, ...props }) => (
+const CrossIcon = ({ size, color, children, ...props }) => (
   <svg {...props} viewBox="0 0 12 12" width={size} height={size} fill={color}>
+    {children}
     <path d="M6.563 6.203l4.523 4.516a.384.384 0 0 1 .117.281c0 .11-.039.203-.117.281a.378.378 0 0 1-.137.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.136-.09L6 6.766 1.484 11.28a.378.378 0 0 1-.136.09.417.417 0 0 1-.297 0 .378.378 0 0 1-.137-.09A.384.384 0 0 1 .797 11c0-.11.039-.203.117-.281l4.524-4.516L.913 1.68a.384.384 0 0 1-.117-.282c0-.109.039-.203.117-.28A.388.388 0 0 1 1.2 1c.112 0 .207.04.285.117L6 5.633l4.516-4.516A.388.388 0 0 1 10.8 1c.112 0 .207.04.285.117a.384.384 0 0 1 .117.281c0 .11-.039.204-.117.282L6.562 6.203z" />
   </svg>
 );
 
 CrossIcon.displayName = "CrossIcon";
 
 CrossIcon.defaultProps = {
-  color: "currentColor"
+  color: "currentColor",
+  children: null
 };
 
 CrossIcon.propTypes = {
   size: PropTypes.number.isRequired,
-  color: PropTypes.string
+  color: PropTypes.string,
+  children: PropTypes.node
 };
 
 export default CrossIcon;

src/components/Icons/Facebook.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { PropTypes } from "prop-types";
+
+const FacebookIcon = ({ size, color, children, ...props }) => (
+  <svg {...props} viewBox="0 0 7 14" width={size} height={size} fill={color}>
+    {children}
+    <path d="M6.418 4.38H4.232V2.978c0-.528.357-.65.608-.65h1.543V.007L4.258 0C1.9 0 1.364 1.73 1.364 2.836V4.38H0V6.77h1.364v6.76h2.868V6.77h1.936l.25-2.39z" />
+  </svg>
+);
+
+FacebookIcon.displayName = "FacebookIcon";
+
+FacebookIcon.defaultProps = {
+  color: "currentcolor",
+  children: null
+};
+
+FacebookIcon.propTypes = {
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default FacebookIcon;

src/components/Icons/Instagram.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { PropTypes } from "prop-types";
+
+const InstagramIcon = ({ size, color, children, ...props }) => (
+  <svg {...props} viewBox="0 0 14 14" width={size} height={size} fill={color}>
+    {children}
+    <g fill={color} fillRule="nonzero">
+      <path d="M7.056 3.486c-1.96 0-3.584 1.565-3.584 3.514 0 1.949 1.596 3.514 3.584 3.514S10.64 8.922 10.64 7c0-1.922-1.624-3.514-3.584-3.514zm0 5.765C5.796 9.251 4.76 8.235 4.76 7c0-1.235 1.036-2.251 2.296-2.251 1.26 0 2.296 1.016 2.296 2.251 0 1.235-1.036 2.251-2.296 2.251z" />
+      <ellipse cx="10.78" cy="3.404" rx="1" ry="1" />
+      <path d="M12.88 1.345C12.152.604 11.116.22 9.94.22H4.172C1.736.22.112 1.812.112 4.2v5.627c0 1.18.392 2.197 1.176 2.938.756.713 1.764 1.07 2.912 1.07h5.712c1.204 0 2.212-.384 2.94-1.07.756-.714 1.148-1.73 1.148-2.91V4.2c0-1.153-.392-2.141-1.12-2.855zm-.168 8.51c0 .85-.252 1.537-.756 2.004-.504.466-1.204.714-2.044.714H4.2c-.84 0-1.54-.248-2.044-.714-.504-.494-.756-1.18-.756-2.032V4.2c0-.824.252-1.51.756-2.004.476-.467 1.204-.714 2.044-.714h5.768c.84 0 1.54.247 2.044.742.476.494.756 1.18.756 1.976v5.655h-.056z" />
+    </g>
+  </svg>
+);
+
+InstagramIcon.displayName = "InstagramIcon";
+
+InstagramIcon.defaultProps = {
+  color: "currentcolor",
+  children: null
+};
+
+InstagramIcon.propTypes = {
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default InstagramIcon;

src/components/Icons/Ticket.js

@@ -1,8 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const TicketIcon = ({ size, color, ...props }) => (
+const TicketIcon = ({ size, color, children, ...props }) => (
   <svg width={size} height={size} viewBox="0 0 26 26" {...props}>
+    {children}
     <g fill="none" fillRule="evenodd" transform="translate(1 .85)">
       <circle cx="12" cy="12.15" r="12.5" fill="#FAFAFA" stroke="#E0E0E0" />
       <path
@@ -16,12 +17,14 @@ const TicketIcon = ({ size, color, ...props }) => (
 TicketIcon.displayName = "TicketIcon";
 
 TicketIcon.defaultProps = {
-  color: "currentColor"
+  color: "currentColor",
+  children: null
 };
 
 TicketIcon.propTypes = {
   size: PropTypes.number.isRequired,
-  color: PropTypes.string
+  color: PropTypes.string,
+  children: PropTypes.node
 };
 
 export default TicketIcon;

src/components/Icons/Twitter.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { PropTypes } from "prop-types";
+
+const TwitterIcon = ({ size, color, children, ...props }) => (
+  <svg {...props} viewBox="0 0 14 12" width={size} height={size} fill={color}>
+    {children}
+    <path d="M14 1.353a5.704 5.704 0 0 1-1.65.454A2.89 2.89 0 0 0 13.613.211c-.555.33-1.17.57-1.824.7A2.862 2.862 0 0 0 9.693 0 2.879 2.879 0 0 0 6.82 2.885c0 .226.025.446.074.657A8.141 8.141 0 0 1 .975.528a2.881 2.881 0 0 0-.39 1.45c0 1.001.508 1.884 1.279 2.402a2.852 2.852 0 0 1-1.301-.361v.037c0 1.397.99 2.563 2.304 2.828a2.87 2.87 0 0 1-1.298.05 2.877 2.877 0 0 0 2.683 2.003A5.746 5.746 0 0 1 0 10.132a8.103 8.103 0 0 0 4.403 1.297c5.283 0 8.172-4.397 8.172-8.21 0-.124-.002-.249-.008-.373A5.846 5.846 0 0 0 14 1.353z" />
+  </svg>
+);
+
+TwitterIcon.displayName = "TwitterIcon";
+
+TwitterIcon.defaultProps = {
+  color: "currentcolor",
+  children: null
+};
+
+TwitterIcon.propTypes = {
+  size: PropTypes.number.isRequired,
+  color: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default TwitterIcon;