Skip to content

Commit

Permalink
feat(breadcrumbs): Add mobile stylings (#154)
Browse files Browse the repository at this point in the history
  • Loading branch information
hachiojidev authored Jan 27, 2021
1 parent d897ce8 commit 8773601
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 5 deletions.
2 changes: 1 addition & 1 deletion src/__tests__/components/breadcrumbs.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ it("renders correctly", () => {
expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
<ul
class="sc-dlfnbm leiHoE"
class="sc-dlfnbm lhEQuh"
/>
</DocumentFragment>
`);
Expand Down
15 changes: 13 additions & 2 deletions src/components/Breadcrumbs/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
6 changes: 5 additions & 1 deletion src/components/Breadcrumbs/index.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down
4 changes: 3 additions & 1 deletion src/components/Breadcrumbs/types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export interface BreadcrumbsProps {
import { SpaceProps } from "styled-system";

export interface BreadcrumbsProps extends SpaceProps {
separator?: React.ReactNode;
}

0 comments on commit 8773601

Please sign in to comment.