feat: Panel (#32)

* feat: Panel

* chore: Renamed component

* fix: Missing value by rebase

src/components/Checkbox/index.tsx

@@ -13,7 +13,7 @@ const Checkbox = styled.input.attrs({ type: "checkbox" })`
   border: 0;
   border-radius: 8px;
   background-color: ${({ theme }) => theme.colors.input};
-  box-shadow: inset 0px 2px 2px -1px rgba(74, 74, 104, 0.1);
+  box-shadow: ${({ theme }) => theme.shadows.inset};
 
   &:after {
     content: "";

src/components/ColorBox/index.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "styled-components";
+import ColorBox from "./index";
+
+const Row = styled.div`
+  margin-bottom: 32px;
+
+  & > button + button {
+    margin-left: 16px;
+  }
+`;
+
+export default {
+  title: "ColorBox",
+  component: ColorBox,
+  argTypes: {},
+};
+
+export const Default: React.FC = () => {
+  return (
+    <div style={{ padding: "32px", width: "500px" }}>
+      <Row>
+        <ColorBox>ColorBox</ColorBox>
+      </Row>
+    </div>
+  );
+};

src/components/ColorBox/index.tsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+const Panel = styled.div`
+  background-color: ${({ theme }) => theme.colors.input};
+  border-radius: 16px;
+  box-shadow: ${({ theme }) => theme.shadows.inset};
+  color: ${({ theme }) => theme.colors.text};
+  padding: 16px;
+`;
+
+export default Panel;

src/components/Toggle/StyledToggle.tsx

@@ -34,7 +34,7 @@ const StyledToggle = styled.div<{ checked: boolean }>`
   align-items: center;
   background-color: ${({ theme, checked }) => theme.colors[checked ? "success" : "input"]};
   border-radius: 24px;
-  box-shadow: inset 0px 2px 2px -1px rgba(74, 74, 104, 0.1);
+  box-shadow: ${({ theme }) => theme.shadows.inset};
   cursor: pointer;
   display: inline-flex;
   height: 40px;

src/index.ts

@@ -5,10 +5,11 @@ export { default as Card } from "./components/Card";
 export { default as Checkbox } from "./components/Checkbox";
 export { default as Heading } from "./components/Heading";
 export * from "./components/Layouts";
-export { default as Link } from "./components/Link";
 export * from "./components/Svg";
 export { default as Tag } from "./components/Tag";
 export { default as Text } from "./components/Text";
+export { default as Link } from "./components/Link";
+export { default as ColorBox } from "./components/ColorBox";
 export { default as Toggle } from "./components/Toggle";
 export { default as ResetCSS } from "./ResetCSS";
 

src/styled.d.ts

@@ -22,6 +22,7 @@ export type Shadows = {
   success: string;
   warning: string;
   focus: string;
+  inset: string;
 };
 
 export type Colors = {

src/theme/base.ts

@@ -16,6 +16,7 @@ export const shadows = {
   success: "0px 0px 0px 1px #31D0AA, 0px 0px 0px 4px rgba(49, 208, 170, 0.2)",
   warning: "0px 0px 0px 1px #ED4B9E, 0px 0px 0px 4px rgba(237, 75, 158, 0.2)",
   focus: "0px 0px 0px 1px #7645D9, 0px 0px 0px 4px rgba(118, 69, 217, 0.6)",
+  inset: "inset 0px 2px 2px -1px rgba(74, 74, 104, 0.1)",
 };
 
 const spacing: Spacing = [0, 4, 8, 16, 24, 32, 48, 64];