From 87736018fddcdf28f085670498d35589eb1fe6fe Mon Sep 17 00:00:00 2001
From: hachiojidev <72719739+hachiojidev@users.noreply.github.com>
Date: Wed, 27 Jan 2021 17:16:04 +0900
Subject: [PATCH] feat(breadcrumbs): Add mobile stylings (#154)

---
 src/__tests__/components/breadcrumbs.test.tsx |  2 +-
 src/components/Breadcrumbs/Breadcrumbs.tsx    | 15 +++++++++++++--
 src/components/Breadcrumbs/index.stories.tsx  |  6 +++++-
 src/components/Breadcrumbs/types.ts           |  4 +++-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/components/breadcrumbs.test.tsx b/src/__tests__/components/breadcrumbs.test.tsx
index 53651bfc2..6145249ac 100644
--- a/src/__tests__/components/breadcrumbs.test.tsx
+++ b/src/__tests__/components/breadcrumbs.test.tsx
@@ -7,7 +7,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <ul
-        class="sc-dlfnbm leiHoE"
+        class="sc-dlfnbm lhEQuh"
       />
     </DocumentFragment>
   `);
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
index 86933f524..09e27cad9 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -10,14 +10,25 @@ const Separator = styled.div`
   color: currentColor;
   display: flex;
   justify-content: center;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: 4px;
+  padding-right: 4px;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
 `;
 
 const StyledBreadcrumbs = styled.ul`
   align-items: center;
   color: ${({ theme }) => theme.colors.textDisabled};
   display: flex;
+  flex-wrap: wrap;
   list-style-type: none;
 
   ${space}
diff --git a/src/components/Breadcrumbs/index.stories.tsx b/src/components/Breadcrumbs/index.stories.tsx
index 259d48052..ade7cb0a5 100644
--- a/src/components/Breadcrumbs/index.stories.tsx
+++ b/src/components/Breadcrumbs/index.stories.tsx
@@ -14,13 +14,17 @@ export default {
 export const Default: React.FC = () => {
   return (
     <Text p="32px">
-      <BreadCrumbs>
+      <BreadCrumbs mb="32px">
         <Link href="/" color="secondary" style={{ fontWeight: 400 }}>
           Link
         </Link>
         <Text color="textDisabled">Crumb 1</Text>
         <Text color="textDisabled">Crumb 2</Text>
       </BreadCrumbs>
+      <BreadCrumbs>
+        <Text>PancakeSwap</Text>
+        <Text>The #1 AMM and yield farm on Binance Smart Chain.</Text>
+      </BreadCrumbs>
     </Text>
   );
 };
diff --git a/src/components/Breadcrumbs/types.ts b/src/components/Breadcrumbs/types.ts
index af0cc6c8b..d72d53e6b 100644
--- a/src/components/Breadcrumbs/types.ts
+++ b/src/components/Breadcrumbs/types.ts
@@ -1,3 +1,5 @@
-export interface BreadcrumbsProps {
+import { SpaceProps } from "styled-system";
+
+export interface BreadcrumbsProps extends SpaceProps {
   separator?: React.ReactNode;
 }