From 308e87ca7d4dab8477e49030aaea366a5462c12c Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Mon, 18 Jan 2021 21:39:24 +0000
Subject: [PATCH] feat(icon): icon with content components

---
 src/components/icon-with-content.js | 32 +++++++++++++++++++++++++++++
 src/components/icon.js              | 22 ++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/components/icon-with-content.js
 create mode 100644 src/components/icon.js

diff --git a/src/components/icon-with-content.js b/src/components/icon-with-content.js
new file mode 100644
index 0000000..c735940
--- /dev/null
+++ b/src/components/icon-with-content.js
@@ -0,0 +1,32 @@
+import React from "react";
+import styled from "styled-components";
+import { Icon } from "./";
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-y-sm);
+`;
+
+const IconWrapper = styled.div`
+  margin-right: var(--spacing-x-sm);
+`;
+
+const Content = styled.div`
+  p {
+    margin-bottom: 0;
+  }
+`;
+
+export default function IconWithContent({ children }) {
+  return (
+    <Container>
+      {children.map(child => {
+        if (child.type === Icon) {
+          return <IconWrapper key="icon">{child}</IconWrapper>;
+        }
+        return <Content key="content">{child}</Content>;
+      })}
+    </Container>
+  );
+}
diff --git a/src/components/icon.js b/src/components/icon.js
new file mode 100644
index 0000000..eab38cc
--- /dev/null
+++ b/src/components/icon.js
@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.span`
+  display: inline-block;
+  width: ${props => `var(--icon-size-${props.size})`};
+  height: ${props => `var(--icon-size-${props.size})`};
+  color: ${props => `var(--theme-color-${props.color})`};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export default function Icon({ children, size = "md", color }) {
+  return (
+    <Container size={size} color={color}>
+      {children}
+    </Container>
+  );
+}