feat(breadcrumbs): Add mobile stylings (#154)

pancakeswap · Jan 27, 2021 · 8773601 · 8773601
1 parent d897ce8
commit 8773601
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,3 +1,5 @@
-export interface BreadcrumbsProps {
+import { SpaceProps } from "styled-system";
+
+export interface BreadcrumbsProps extends SpaceProps {
   separator?: React.ReactNode;
 }