feat(ui-toolkit): fluid Breadcrumb with bottom-border (#884)
This commit is contained in:
Sérgio Ramos
Sara Vieira
parent
c983f9f9ca
commit
42b4c6230e
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { reduxForm } from 'redux-form';
|
||||
import Store from '@mocks/store';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Store from '@mocks/store';
|
||||
import KeyValue from '../key-value';
|
||||
|
||||
const KeyValueForm = reduxForm()(KeyValue);
|
||||
|
||||
@ -1,79 +1,119 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Header /> without throwing 1`] = `
|
||||
.c5 {
|
||||
padding-top: 0.6875rem;
|
||||
.c8 {
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: rgb(255,255,255);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: rgb(30,49,59);
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
line-height: 1.5625rem;
|
||||
.c8 + p,
|
||||
.c8 + small,
|
||||
.c8 + h1,
|
||||
.c8 + h2,
|
||||
.c8 + label,
|
||||
.c8 + h3,
|
||||
.c8 + h4,
|
||||
.c8 + h5,
|
||||
.c8 + div,
|
||||
.c8 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
.c7 {
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-align-self: auto;
|
||||
-ms-flex-item-align: auto;
|
||||
align-self: auto;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
width: 9.375rem;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 0 1.125rem;
|
||||
}
|
||||
|
||||
.c2:hover,
|
||||
.c2.active {
|
||||
.c7 svg {
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
.c7:not(:last-of-type) {
|
||||
border-right: 0.0625rem solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.c7:first-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.c7:hover,
|
||||
.c7.active {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.c9 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
padding: 0.9375rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
color: rgb(255,255,255);
|
||||
text-decoration: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: all 200ms ease;
|
||||
transition: all 200ms ease;
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
padding: 0.9375rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
color: rgb(255,255,255);
|
||||
text-decoration: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: all 200ms ease;
|
||||
transition: all 200ms ease;
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
@ -98,29 +138,23 @@ exports[`renders <Header /> without throwing 1`] = `
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
padding: 0.9375rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
color: rgb(255,255,255);
|
||||
text-decoration: none;
|
||||
.c2 {
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
width: 9.375rem;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: all 200ms ease;
|
||||
transition: all 200ms ease;
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.c2:hover,
|
||||
.c2.active {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.c6 {
|
||||
@ -163,92 +197,58 @@ exports[`renders <Header /> without throwing 1`] = `
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.c7 {
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-align-self: auto;
|
||||
-ms-flex-item-align: auto;
|
||||
align-self: auto;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 0 1.125rem;
|
||||
}
|
||||
|
||||
.c7 svg {
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
.c7:not(:last-of-type) {
|
||||
border-right: 0.0625rem solid rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.c7:first-of-type {
|
||||
.c1 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.c7:hover,
|
||||
.c7.active {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.c8 {
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: rgb(255,255,255);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c8 + p,
|
||||
.c8 + small,
|
||||
.c8 + h1,
|
||||
.c8 + h2,
|
||||
.c8 + label,
|
||||
.c8 + h3,
|
||||
.c8 + h4,
|
||||
.c8 + h5,
|
||||
.c8 + div,
|
||||
.c8 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
background-color: transparent;
|
||||
text-decoration-skip: objects;
|
||||
padding: 0.9375rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
color: rgb(255,255,255);
|
||||
text-decoration: none;
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: all 200ms ease;
|
||||
transition: all 200ms ease;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: rgb(30,49,59);
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
line-height: 1.5625rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
padding-top: 0.6875rem;
|
||||
}
|
||||
|
||||
<div
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Theme from '@mocks/theme';
|
||||
import Router from '@mocks/router';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Header from '../header';
|
||||
|
||||
|
||||
@ -0,0 +1,177 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Breadcrumb /> without throwing 1`] = `
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 62.5rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c6:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
color: rgb(59,70,204);
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.c5 + p,
|
||||
.c5 + small,
|
||||
.c5 + h1,
|
||||
.c5 + h2,
|
||||
.c5 + label,
|
||||
.c5 + h3,
|
||||
.c5 + h4,
|
||||
.c5 + h5,
|
||||
.c5 + div,
|
||||
.c5 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
margin: 0.5rem 0.625rem 0.1875rem 0.625rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: 0.0625rem solid rgb(216,216,216);
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c3 {
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c1 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c1 {
|
||||
width: 61rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c1 {
|
||||
width: 76rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:47.9375rem) {
|
||||
.c1 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
name="breadcrum"
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<h2
|
||||
className="c5"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
<a
|
||||
className="c6"
|
||||
href="/instances"
|
||||
onClick={[Function]}
|
||||
>
|
||||
/
|
||||
</a>
|
||||
</h2>
|
||||
<svg
|
||||
className="c7 "
|
||||
height="10"
|
||||
viewBox="0 0 6 10"
|
||||
width="6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.12 0L0 1.36 3.496 4.8 0 8.24 1.12 9.6 6 4.8 1.12 0z"
|
||||
fill="#494949"
|
||||
fillRule="evenodd"
|
||||
opacity=".5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import Theme from '@mocks/theme';
|
||||
import Router from '@mocks/router';
|
||||
import Store from '@mocks/store';
|
||||
|
||||
import Breadcrumb from '../breadcrumb';
|
||||
|
||||
it('renders <Breadcrumb /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Store>
|
||||
<Router>
|
||||
<Theme>
|
||||
<Breadcrumb />
|
||||
</Theme>
|
||||
</Router>
|
||||
</Store>
|
||||
)
|
||||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
@ -1,19 +1,24 @@
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import View from '../layout/view-container';
|
||||
import Container from '../layout/view-container';
|
||||
|
||||
const Root = Container.extend`
|
||||
border-bottom: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
`;
|
||||
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
export default ({ children, ...rest }) => (
|
||||
<div {...rest}>
|
||||
<View>
|
||||
<Root {...rest} fluid>
|
||||
<Container>
|
||||
<Row name="breadcrum">
|
||||
<Col xs={12}>{children}</Col>
|
||||
</Row>
|
||||
</View>
|
||||
</div>
|
||||
</Container>
|
||||
</Root>
|
||||
);
|
||||
|
||||
export { default as Item } from './item';
|
||||
|
||||
@ -20,11 +20,11 @@ const Name = H2.extend`
|
||||
${typography.normal};
|
||||
|
||||
color: ${props => props.theme.primary};
|
||||
margin: ${remcalc(20)} 0 ${remcalc(18)} 0;
|
||||
margin: ${remcalc(12)} 0;
|
||||
`;
|
||||
|
||||
const Arrow = styled(Chevron)`
|
||||
margin: ${remcalc(7)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
|
||||
margin: ${remcalc(8)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
|
||||
`;
|
||||
|
||||
const Container = styled.div`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user