Print page break (#123)

* fix docs serve in start task
* rename test root components
* add in prettier config
* update print utility snapshots
* add print page break component and styling

Author: sHtev

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

CHANGELOG.md

@@ -1,5 +1,18 @@
 _The format of this document is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html)._
 
+## [v1.3.0](https://github.com/RaspberryPiFoundation/Bits/compare/v1.2.2...v1.3.0) - 2019-11-06
+
+### Added
+
+- `PrintPageBreak` component
+- `c-print-page-break` styling
+- `.prettierrc` config
+
+### Fixed
+
+- `NoPrint` and `PrintOnly` test root components and snapshots
+- Changed `docs:serve` to `docs` in npm `start` task
+
 ## [v1.2.2](https://github.com/RaspberryPiFoundation/Bits/compare/v1.2.1...v1.2.2) - 2019-10-14
 
 ### Changed

lib/Bits.css

@@ -5,7 +5,7 @@
 
   Author:      The Raspberry Pi Foundation
   Author URI:  https://raspberrypi.org
-  Version:     1.2.2
+  Version:     1.3.0
 */
 
 
@@ -1129,6 +1129,14 @@ strong {
   box-shadow: 0 0 0.3rem 0 rgba(0, 0, 0, 0.25);
   padding: 10px; }
 
+@media screen {
+  .c-print-page-break {
+    display: none !important; } }
+
+@media print {
+  .c-print-page-break {
+    page-break-before: always; } }
+
 
 
 

lib/Bits.min.css

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/RaspberryPiFoundation/Bits.git"
   },
-  "version": "1.2.2",
+  "version": "1.3.0",
   "main": "lib/index.js",
   "files": [
     "lib",
@@ -28,7 +28,7 @@
     "prepublishOnly": "npm run build",
     "rollup": "rollup -c",
     "rollup:watch": "rollup -c -w",
-    "start": "npm-run-all rollup:watch gulp:watch docs:serve",
+    "start": "npm-run-all rollup:watch gulp:watch docs",
     "test": "jest --env=jsdom --notify --watch",
     "test-coverage": "jest --env=jsdom --coverage",
     "docs": "styleguidist server",

lib/Bits.min.css.map

@@ -7,7 +7,7 @@ let noPrint
 const children = 'Whatever'
 const className = 'some-extra-class-name'
 
-describe('<Slice />', () => {
+describe('<NoPrint />', () => {
   describe('Renders...', () => {
     beforeEach(() => {
       noPrint = shallow(<NoPrint>{children}</NoPrint>)

package.json

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Slice /> Renders... matches its snapshot 1`] = `
+exports[`<NoPrint /> Renders... matches its snapshot 1`] = `
 <Base
   className="u-no-print"
   tagName="div"

src/components/NoPrint/NoPrint.test.js

@@ -7,7 +7,7 @@ let printOnly
 const children = 'Whatever'
 const className = 'some-extra-class-name'
 
-describe('<Slice />', () => {
+describe('<PrintOnly />', () => {
   describe('Renders...', () => {
     beforeEach(() => {
       printOnly = shallow(<PrintOnly>{children}</PrintOnly>)
@@ -25,7 +25,7 @@ describe('<Slice />', () => {
   describe('With classNames', () => {
     it('adds the correct className', () => {
       printOnly = shallow(
-        <PrintOnly className={className}>{children}</PrintOnly>,
+        <PrintOnly className={className}>{children}</PrintOnly>
       )
       expect(printOnly.find('.u-print-only')).toHaveClassName(className)
     })

src/components/NoPrint/__snapshots__/NoPrint.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Slice /> Renders... matches its snapshot 1`] = `
+exports[`<PrintOnly /> Renders... matches its snapshot 1`] = `
 <Base
   className="u-print-only"
   tagName="div"

src/components/PrintOnly/PrintOnly.test.js

@@ -0,0 +1,11 @@
+@media screen {
+  .c-print-page-break {
+    display: none !important;
+  }
+}
+
+@media print {
+  .c-print-page-break {
+    page-break-before: always;
+  }
+}

src/components/PrintOnly/__snapshots__/PrintOnly.test.js.snap

@@ -0,0 +1,32 @@
+import { shallow } from 'enzyme'
+import PrintPageBreak from '../PrintPageBreak'
+import React from 'react'
+
+let printPageBreak
+
+const className = 'some-extra-class-name'
+
+describe('<PrintPageBreak />', () => {
+  describe('Renders...', () => {
+    beforeEach(() => {
+      printPageBreak = shallow(<PrintPageBreak />)
+    })
+
+    it('without crashing', () => {
+      expect(printPageBreak.find('.c-print-page-break')).toExist()
+    })
+
+    it('matches its snapshot', () => {
+      expect(printPageBreak).toMatchSnapshot()
+    })
+  })
+
+  describe('With classNames', () => {
+    it('adds the correct className', () => {
+      printPageBreak = shallow(<PrintPageBreak className={className} />)
+      expect(printPageBreak.find('.c-print-page-break')).toHaveClassName(
+        className
+      )
+    })
+  })
+})

src/components/PrintPageBreak/PrintPageBreak.scss

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PrintPageBreak /> Renders... matches its snapshot 1`] = `
+<Base
+  className="c-print-page-break"
+  tagName="div"
+/>
+`;

src/components/PrintPageBreak/PrintPageBreak.test.js

@@ -0,0 +1,19 @@
+import { Base } from 'react-iotacss'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+/**
+ * Places a component, hidden from display which forces a page break before it when printing
+ */
+export const PrintPageBreak = ({ children, className, ...props }) => {
+  const classNames = classnames(className, 'c-print-page-break')
+
+  return <Base className={classNames} {...props} />
+}
+
+PrintPageBreak.propTypes = {
+  className: PropTypes.string,
+}
+
+export default PrintPageBreak

src/components/PrintPageBreak/__snapshots__/PrintPageBreak.test.js.snap

@@ -7,6 +7,7 @@
 @import '../../components/Link/Link';
 @import '../../components/Pagination/Pagination';
 @import '../../components/Panel/Panel';
+@import '../../components/PrintPageBreak/PrintPageBreak';
 @import '../../components/Slice/Slice';
 @import '../../components/Wysiwyg/Wysiwyg';