diff --git a/src/components/__tests__/__snapshots__/carousel.test.tsx.snap b/src/components/__tests__/__snapshots__/carousel.test.tsx.snap index 93e8d39e..c3b92d7c 100644 --- a/src/components/__tests__/__snapshots__/carousel.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/carousel.test.tsx.snap @@ -27,13 +27,13 @@ exports[`The carousel component should render a carousel 1`] = ` "0": Object { "items": 1, }, - "1025": Object { + "1024": Object { "items": 2, }, - "620": Object { + "619": Object { "items": 2, }, - "800": Object { + "799": Object { "items": 2, }, } @@ -71,7 +71,7 @@ exports[`The carousel component should render a grid 1`] = ` > @@ -112,7 +112,7 @@ exports[`The carousel component should render a grid and a carousel 1`] = ` > @@ -145,7 +145,7 @@ exports[`The carousel component should render a grid and a carousel 1`] = `
`; diff --git a/src/components/__tests__/__snapshots__/page_section.test.tsx.snap b/src/components/__tests__/__snapshots__/page_section.test.tsx.snap new file mode 100644 index 00000000..467b81d6 --- /dev/null +++ b/src/components/__tests__/__snapshots__/page_section.test.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`The Page component should render 1`] = ` + +`; diff --git a/src/components/__tests__/__snapshots__/ratings.test.tsx.snap b/src/components/__tests__/__snapshots__/ratings.test.tsx.snap index dc132661..85646867 100644 --- a/src/components/__tests__/__snapshots__/ratings.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ratings.test.tsx.snap @@ -5,38 +5,58 @@ exports[`The Ratings component should render 4.3 of 5 highlight icons 1`] = ` className="ratings" >
- - + +
+
- + +
+
- + +
+
- + +
+
+ > + +
- - + +
+
- + +
+
- + +
+
- + +
+
+ > + +
`; @@ -85,68 +125,108 @@ exports[`The Ratings component should render a third of 10 approved icons 1`] = className="ratings" >
- - + +
+
- + +
+
- + +
+
- + +
+
- + +
+
- + +
+
- + +
+
- + +
+
- + +
+
+ > + +
- - + +
+
- + +
+
- + +
+
- + +
+
- + +
+
- + +
+
- + +
+
- + +
+
- + +
+
+ > + +
`; @@ -225,38 +345,58 @@ exports[`The Ratings component should render only background if the rating is nu className="ratings" >
- - + +
+
- + +
+
- + +
+
- + +
+
+ > + +
`; diff --git a/src/components/__tests__/page.test.tsx b/src/components/__tests__/page.test.tsx index 0655a6be..35bcbbb6 100644 --- a/src/components/__tests__/page.test.tsx +++ b/src/components/__tests__/page.test.tsx @@ -10,6 +10,13 @@ describe('The Page component', () => { let wrapper; beforeEach(() => { + props = { + title: 'Page title', + maxWidth: '100rem', + id: 'page-id', + className: 'page-class', + }; + wrapper = shallow(); }); diff --git a/src/components/__tests__/page_section.test.tsx b/src/components/__tests__/page_section.test.tsx new file mode 100644 index 00000000..c38e0826 --- /dev/null +++ b/src/components/__tests__/page_section.test.tsx @@ -0,0 +1,27 @@ +// Copyright (c) 2018 Ultimaker B.V. +import * as React from 'react'; +import { shallow } from 'enzyme'; + +// component +import PageSection from '../page_section'; + +describe('The Page component', () => { + let props; + let wrapper; + + beforeEach(() => { + props = { + title: 'Page section title', + maxWidth: '100rem', + id: 'page-id', + className: 'page-class', + }; + + wrapper = shallow(); + }); + + it('should render', () => { + expect(wrapper).toMatchSnapshot(); + }); + +}); diff --git a/src/components/carousel.tsx b/src/components/carousel.tsx index f63529a0..4440f393 100644 --- a/src/components/carousel.tsx +++ b/src/components/carousel.tsx @@ -25,6 +25,9 @@ export interface CarouselProps { /** Duration of slides transition (milliseconds) */ transitionDuration?: number; + + /** A list of breakpoint sizes for the breakpoints 'xs', 'sm', 'md', 'lg' */ + breakpointSizes?: number[]; } /** @@ -42,6 +45,7 @@ export default class Carousel extends React.Component { // no static defaultProps = { autoPlayInterval: 5000, transitionDuration: 1000, + breakpointSizes: BreakpointSizes, }; /** @@ -51,12 +55,14 @@ export default class Carousel extends React.Component { // no * @private */ private _getResponsiveConfiguration(): ResponsiveConfiguration { - const { itemCounts } = this.props; + const { itemCounts, breakpointSizes } = this.props; // create an object with the format . const responsive = {}; - BreakpointSizes.forEach((breakpoint, index) => { + breakpointSizes.forEach((breakpoint, index) => { + // minus 1 to fix bug in AliceCarousel that applies the breackpoint 1px to early + const fixedBreakpoint = breakpoint > 0 ? breakpoint -1 : breakpoint; const itemCount = itemCounts.length > index ? itemCounts[index] : itemCounts[itemCounts.length - 1]; - responsive[breakpoint] = { items: itemCount }; + responsive[fixedBreakpoint] = { items: itemCount }; }); return responsive; } @@ -104,7 +110,7 @@ export default class Carousel extends React.Component { // no return null; } return ( - + {React.Children.map(children, child => React.isValidElement(child) && {child}) } @@ -127,7 +133,7 @@ export default class Carousel extends React.Component { // no } const extraProps = {onDragStart: e => e.preventDefault()}; return ( -
+
0} diff --git a/src/components/header.tsx b/src/components/header.tsx index 859ce889..a32777be 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -18,7 +18,7 @@ const Header: React.StatelessComponent = ({ showNav, headerLogo, he
{showNav && children} - {rightSideLabel &&
+ {rightSideLabel &&
{rightSideLabel}
}
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx index 791c69c0..fa00c309 100644 --- a/src/components/navigation.tsx +++ b/src/components/navigation.tsx @@ -55,7 +55,7 @@ export default class Navigation extends React.Component 0 &&
-
+
diff --git a/src/components/page.tsx b/src/components/page.tsx index 80141714..c501d4ce 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -1,25 +1,31 @@ import * as React from 'react'; -import PageTitle from './page_title'; import classNames = require('classnames'); +// components +import PageTitle from './page_title'; + export interface PageProps { + /** The page title displayed at the top of the page */ title?: string; + /** The max width of the page content. The content will be centered horizontally on the page */ maxWidth?: number | string; + /** Optional ID for the button **/ id?: string; + /** Additional classes for styling */ className?: string; + /** The page content */ + children: any; } const Page: React.StatelessComponent = ({ title, maxWidth, id, className, children }): JSX.Element => -
- {title && } - {children} +
+
+ {title && } + {children} +
; -Page.defaultProps = { - maxWidth: "100%" -}; - Page.displayName = "Page"; export default Page; diff --git a/src/components/page_section.tsx b/src/components/page_section.tsx new file mode 100644 index 00000000..970e9e50 --- /dev/null +++ b/src/components/page_section.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; + +// components +import Page from './page'; + +export interface PageSectionProps { + /** The page section title displayed at the top of the page section */ + title?: string; + /** The max width of the page section content. The content will be centered horizontally on the page section */ + maxWidth?: number | string; + /** Optional ID for the button **/ + id?: string; + /** Additional classes for styling */ + className?: string; + /** The page section content */ + children: any; +} + +/** + * Page Section is the same as Page, but renamed for syntax reasons. + * Should be used instead of Page when you want multiple sections. + */ +const PageSection: React.StatelessComponent = + ({ maxWidth, id, className, children }): JSX.Element => + + {children} + ; + +PageSection.displayName = "PageSection"; + +export default PageSection; diff --git a/src/components/ratings.tsx b/src/components/ratings.tsx index 479ea2c9..5298e27e 100644 --- a/src/components/ratings.tsx +++ b/src/components/ratings.tsx @@ -1,6 +1,6 @@ // Copyright (c) 2018 Ultimaker B.V. import * as React from 'react'; -import {IconColor, IconSize, IconWrapperProps} from './icons/icon_wrapper' +import { IconColor, IconSize, IconWrapperProps } from './icons/icon_wrapper' import _ = require('lodash'); export interface RatingsProps { @@ -31,19 +31,23 @@ export const Ratings: React.StatelessComponent = ( ) => { return (
-
+
{_.times(max, i => - +
+ +
)}
{rating > 0 && -
+
{_.times(max, i => - +
+ +
)}
} diff --git a/src/stylesheets/_layout.scss b/src/stylesheets/_layout.scss index 3ad2f337..3bc677f5 100644 --- a/src/stylesheets/_layout.scss +++ b/src/stylesheets/_layout.scss @@ -319,14 +319,14 @@ // Create the hide-{breakpoint} and show-{breakpoint} classes @mixin layout-hiding-rules($bp) { @each $name, $value in $bp { - .hide-#{$name} { + .show-#{$name} { @media (max-width: $value - 1) { display: none !important; visibility: hidden !important; } } - .show-#{$name} { + .hide-#{$name} { display: block; @media (min-width: #{$value}) { @@ -338,4 +338,3 @@ } @include layout-hiding-rules($layout-breakpoints); -@include layout-hiding-rules((xs: 0)); diff --git a/src/stylesheets/_page.scss b/src/stylesheets/_page.scss index 2827194e..dd19ee0a 100644 --- a/src/stylesheets/_page.scss +++ b/src/stylesheets/_page.scss @@ -1,3 +1,10 @@ .page { - margin: 0 auto; + width: 100%; + padding: 0 1.2rem; + + .page__content { + max-width: 100%; + margin: 0 auto; + width: 100%; + } } diff --git a/src/stylesheets/_ratings.scss b/src/stylesheets/_ratings.scss index 749614ba..a0574b94 100644 --- a/src/stylesheets/_ratings.scss +++ b/src/stylesheets/_ratings.scss @@ -1,23 +1,23 @@ .ratings { - display: inline-block; position: relative; +} - - .ratings__foreground, .ratings__background { - white-space: nowrap; - overflow: hidden; - svg { - padding: 0.1rem; - } +.ratings__foreground, .ratings__background { + white-space: nowrap; + overflow: hidden; + + svg { + padding: 0.1rem; } +} - .ratings__foreground { - position: absolute; - top: 0; - } +.ratings__foreground { + position: absolute; + top: 0; + line-height: 0; +} - .icon { - display: inline-block; - margin: 0 0.3rem; - } +.ratings__foreground-icon { + display: inline-block; + margin-right: 0.6rem; }