From 72162edc9b0d44ff3a6eddfae9550ed684a9f8f4 Mon Sep 17 00:00:00 2001
From: RabbitDoge <72658581+RabbitDoge@users.noreply.github.com>
Date: Wed, 21 Oct 2020 12:57:27 +0900
Subject: [PATCH] feat: Layout (#21)
---
src/components/Layouts/BaseLayout.tsx | 21 +++++++++++++++
src/components/Layouts/CardsLayout.tsx | 13 +++++++++
src/components/Layouts/index.stories.tsx | 34 ++++++++++++++++++++++++
src/components/Layouts/index.tsx | 2 ++
src/index.ts | 2 +-
5 files changed, 71 insertions(+), 1 deletion(-)
create mode 100644 src/components/Layouts/BaseLayout.tsx
create mode 100644 src/components/Layouts/CardsLayout.tsx
create mode 100644 src/components/Layouts/index.stories.tsx
create mode 100644 src/components/Layouts/index.tsx
diff --git a/src/components/Layouts/BaseLayout.tsx b/src/components/Layouts/BaseLayout.tsx
new file mode 100644
index 000000000..85429b00d
--- /dev/null
+++ b/src/components/Layouts/BaseLayout.tsx
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+const GridLayout = styled.div`
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ grid-gap: 16px;
+ ${({ theme }) => theme.scales.mediaQueries.sm} {
+ grid-template-columns: repeat(8, 1fr);
+ grid-gap: 24px;
+ }
+ ${({ theme }) => theme.scales.mediaQueries.md} {
+ grid-template-columns: repeat(12, 1fr);
+ grid-gap: 24px;
+ }
+ ${({ theme }) => theme.scales.mediaQueries.lg} {
+ grid-template-columns: repeat(12, 1fr);
+ grid-gap: 32px;
+ }
+`;
+
+export default GridLayout;
diff --git a/src/components/Layouts/CardsLayout.tsx b/src/components/Layouts/CardsLayout.tsx
new file mode 100644
index 000000000..56049d215
--- /dev/null
+++ b/src/components/Layouts/CardsLayout.tsx
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import BaseLayout from "./BaseLayout";
+
+const GridLayout = styled(BaseLayout)`
+ & > div {
+ grid-column: span 6;
+ ${({ theme }) => theme.scales.mediaQueries.sm} {
+ grid-column: span 4;
+ }
+ }
+`;
+
+export default GridLayout;
diff --git a/src/components/Layouts/index.stories.tsx b/src/components/Layouts/index.stories.tsx
new file mode 100644
index 000000000..b6aefe358
--- /dev/null
+++ b/src/components/Layouts/index.stories.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+import { BaseLayout, CardsLayout } from ".";
+
+export default {
+ title: "Layouts",
+ argTypes: {},
+};
+
+const Stub = styled.div`
+ width: 100%;
+ background: #1fc7d4;
+ height: 300px;
+`;
+
+export const Base: React.FC = () => {
+ return (
+
+ {[...Array(24)].map((value) => (
+
+ ))}
+
+ );
+};
+
+export const Cards: React.FC = () => {
+ return (
+
+ {[...Array(10)].map((value) => (
+
+ ))}
+
+ );
+};
diff --git a/src/components/Layouts/index.tsx b/src/components/Layouts/index.tsx
new file mode 100644
index 000000000..54c7497fc
--- /dev/null
+++ b/src/components/Layouts/index.tsx
@@ -0,0 +1,2 @@
+export { default as BaseLayout } from "./BaseLayout";
+export { default as CardsLayout } from "./CardsLayout";
diff --git a/src/index.ts b/src/index.ts
index d71d81d25..479d649c5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,10 +1,10 @@
-// eslint-disable-next-line import/prefer-default-export
export { default as Button } from "./components/Button";
export { default as ButtonMenu } from "./components/ButtonMenu";
export { default as ButtonMenuItem } from "./components/ButtonMenu/ButtonMenuItem";
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 Text } from "./components/Text";
export { default as Link } from "./components/Link";
export { default as ResetCSS } from "./ResetCSS";