-
- Instances
-
-
+
@@ -172,7 +192,18 @@ exports[`renders
without throwing 1`] = `
`;
exports[`renders
without throwing 1`] = `
-.c0 {
+.c1 {
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 1.875rem;
+ padding-left: 1.875rem;
+ box-sizing: border-box;
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.c3 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
@@ -180,7 +211,7 @@ exports[`renders
without throwing 1`] = `
max-width: 62.5rem;
}
-.c2 {
+.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -199,7 +230,7 @@ exports[`renders
without throwing 1`] = `
margin-left: -0.625rem;
}
-.c3 {
+.c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@@ -209,7 +240,7 @@ exports[`renders
without throwing 1`] = `
display: block;
}
-.c5 {
+.c7 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@@ -219,28 +250,29 @@ exports[`renders
without throwing 1`] = `
margin: 0.75rem 0;
}
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
margin-top: 0.75rem;
}
-.c1 {
- margin-top: 1.5rem;
+.c2 {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
}
-.c6 {
+.c8 {
margin: 0.1875rem 0.625rem;
}
-.c4 {
+.c6 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -251,43 +283,47 @@ exports[`renders
without throwing 1`] = `
align-items: center;
}
-.c4:first-child a {
+.c6:first-child a {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
}
-.c4:last-child svg {
+.c6:last-child svg {
display: none;
}
+.c0 {
+ border-bottom: 1px solid rgb(216,216,216);
+}
+
@media only screen and (min-width:48em) {
- .c0 {
+ .c3 {
width: 46rem;
}
}
@media only screen and (min-width:64em) {
- .c0 {
+ .c3 {
width: 56rem;
}
}
@media only screen and (min-width:75em) {
- .c0 {
+ .c3 {
width: 59rem;
}
}
@media only screen and (max-width:47.9375rem) {
- .c0 {
+ .c3 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
@media only screen and (min-width:0em) {
- .c3 {
+ .c5 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
@@ -296,73 +332,77 @@ exports[`renders
without throwing 1`] = `
}
-
- Instances
-
-
+
-
-
- name
-
-
+
diff --git a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
index 2ccef1a2..0b684b7b 100644
--- a/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb Default Breadcrumb 1`] = `
-.c5 {
+.c7 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@@ -11,24 +11,24 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
margin: 0.75rem 0;
}
-.c5 + p,
-.c5 + small,
-.c5 + h1,
-.c5 + h2,
-.c5 + label,
-.c5 + h3,
-.c5 + h4,
-.c5 + h5,
-.c5 + div,
-.c5 + span {
+.c7 + p,
+.c7 + small,
+.c7 + h1,
+.c7 + h2,
+.c7 + label,
+.c7 + h3,
+.c7 + h4,
+.c7 + h5,
+.c7 + div,
+.c7 + span {
margin-top: 0.75rem;
}
-.c6 {
+.c8 {
margin: 0.1875rem 0.625rem;
}
-.c4 {
+.c6 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@@ -39,17 +39,28 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
align-items: center;
}
-.c4:first-child a {
+.c6:first-child a {
color: inherit;
-webkit-text-decoration: none;
text-decoration: none;
}
-.c4:last-child svg {
+.c6:last-child svg {
display: none;
}
-.c0 {
+.c1 {
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 1.875rem;
+ padding-left: 1.875rem;
+ box-sizing: border-box;
+ width: 100%;
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.c3 {
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
@@ -57,7 +68,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
max-width: 62.5rem;
}
-.c2 {
+.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@@ -76,7 +87,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
margin-left: -0.625rem;
}
-.c3 {
+.c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@@ -86,37 +97,42 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
display: block;
}
-.c1 {
- margin-top: 1.5rem;
+.c2 {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+}
+
+.c0 {
+ border-bottom: 1px solid rgb(216,216,216);
}
@media only screen and (min-width:48em) {
- .c0 {
+ .c3 {
width: 46rem;
}
}
@media only screen and (min-width:64em) {
- .c0 {
+ .c3 {
width: 56rem;
}
}
@media only screen and (min-width:75em) {
- .c0 {
+ .c3 {
width: 59rem;
}
}
@media only screen and (max-width:47.9375rem) {
- .c0 {
+ .c3 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
}
@media only screen and (min-width:0em) {
- .c3 {
+ .c5 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
@@ -125,129 +141,133 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
}
-
- Home
-
-
+
-
-
- Warp Records Blog
-
-
+
-
-
- Services
-
-
+
-
-
- Nginx
-
-
+
diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js
index 73d5bbba..d0478a52 100644
--- a/packages/ui-toolkit/src/breadcrumb/index.js
+++ b/packages/ui-toolkit/src/breadcrumb/index.js
@@ -1,20 +1,27 @@
import React from 'react';
+import styled from 'styled-components';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
-import { Margin } from 'styled-components-spacing';
+import { Margin, Padding } from 'styled-components-spacing';
import Container from '../layout/view-container';
+const BreadcrumContianer = styled(Container)`
+ border-bottom: 1px solid ${props => props.theme.grey};
+`;
+
/**
* @example ./usage.md
*/
export default ({ children, ...rest }) => (
-
-
-
- {children}
-
-
-
+
+
+
+
+ {children}
+
+
+
+
);
export { default as Item } from './item';
diff --git a/yarn.lock b/yarn.lock
index 53065859..943c286d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3937,15 +3937,15 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
escodegen@^1.6.1, escodegen@^1.9.0:
- version "1.9.0"
- resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
+ version "1.9.1"
+ resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
dependencies:
esprima "^3.1.3"
estraverse "^4.2.0"
esutils "^2.0.2"
optionator "^0.8.1"
optionalDependencies:
- source-map "~0.5.6"
+ source-map "~0.6.1"
escope@^3.6.0:
version "3.6.0"
@@ -10519,7 +10519,7 @@ source-map-url@~0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9"
-source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.6:
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"