@jouwomgeving/jo-card - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

es/Default/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import castArray from 'lodash/fp/castArray';
 import get from 'lodash/fp/get';
 import { withTheme } from 'styled-components';
+import compose from 'recompose/compose';
+import branch from 'recompose/branch';
 
@@ -11,2 +14,4 @@ import * as Grid from '@jouwomgeving/ui-grid/es';
 import Delimiter from '@jouwomgeving/ui-card/es/Delimiter';
+import FaBars from '@jouwomgeving/ui-icon/es/FontAwesome/FaBars';
+import Button from '@jouwomgeving/ui-button/es/Button';
 import Header from '@jouwomgeving/ui-card/es/Header';
@@ -16,4 +21,6 @@ import Progress from '@jouwomgeving/ui-form/es/Progress';
 
-const enhance = withTheme;
+import withSidebar from './withSidebar';
 
+const enhance = compose(withTheme, branch(({ sidebar }) => sidebar, withSidebar, f => f));
+
 const Default = enhance(({
@@ -28,2 +35,4 @@ actions,
   theme,
+  toggleSidebar,
+  sidebar,
   title
@@ -37,3 +46,7 @@ }) => React.createElement(
     React.createElement(Header, {
-      actions: actions,
+      actions: sidebar ? [...castArray(actions), React.createElement(
+        Button,
+        { type: 'secondary', onClick: toggleSidebar },
+        React.createElement(FaBars, { color: get('colors.action.link', theme) })
+      )] : actions,
       icon: icon,
@@ -88,2 +101,4 @@ subTitle: subTitle,
   progress: PropTypes.number,
+  sidebar: PropTypes.element,
+  sidebarTitle: PropTypes.string,
   subTitle: PropTypes.string,
@@ -90,0 +105,0 @@ title: PropTypes.string

lib/Default/index.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _castArray = require('lodash/fp/castArray');
+
+var _castArray2 = _interopRequireDefault(_castArray);
+
 var _get = require('lodash/fp/get');
@@ -22,2 +26,10 @@
 
+var _compose = require('recompose/compose');
+
+var _compose2 = _interopRequireDefault(_compose);
+
+var _branch = require('recompose/branch');
+
+var _branch2 = _interopRequireDefault(_branch);
+
 var _lib = require('@jouwomgeving/ui-grid/lib');
@@ -43,2 +55,10 @@
 
+var _FaBars = require('@jouwomgeving/ui-icon/lib/FontAwesome/FaBars');
+
+var _FaBars2 = _interopRequireDefault(_FaBars);
+
+var _Button = require('@jouwomgeving/ui-button/lib/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
 var _Header = require('@jouwomgeving/ui-card/lib/Header');
@@ -56,2 +76,6 @@
 
+var _withSidebar = require('./withSidebar');
+
+var _withSidebar2 = _interopRequireDefault(_withSidebar);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -61,14 +85,23 @@
 
-var enhance = _styledComponents.withTheme;
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
-var Default = enhance(function (_ref) {
-  var actions = _ref.actions,
-      background = _ref.background,
-      children = _ref.children,
-      comments = _ref.comments,
-      icon = _ref.icon,
-      progress = _ref.progress,
-      subTitle = _ref.subTitle,
-      theme = _ref.theme,
-      title = _ref.title;
+var enhance = (0, _compose2.default)(_styledComponents.withTheme, (0, _branch2.default)(function (_ref) {
+  var sidebar = _ref.sidebar;
+  return sidebar;
+}, _withSidebar2.default, function (f) {
+  return f;
+}));
+
+var Default = enhance(function (_ref2) {
+  var actions = _ref2.actions,
+      background = _ref2.background,
+      children = _ref2.children,
+      comments = _ref2.comments,
+      icon = _ref2.icon,
+      progress = _ref2.progress,
+      subTitle = _ref2.subTitle,
+      theme = _ref2.theme,
+      toggleSidebar = _ref2.toggleSidebar,
+      sidebar = _ref2.sidebar,
+      title = _ref2.title;
   return _react2.default.createElement(
@@ -81,3 +114,7 @@ _Card2.default,
       _react2.default.createElement(_Header2.default, {
-        actions: actions,
+        actions: sidebar ? [].concat(_toConsumableArray((0, _castArray2.default)(actions)), [_react2.default.createElement(
+          _Button2.default,
+          { type: 'secondary', onClick: toggleSidebar },
+          _react2.default.createElement(_FaBars2.default, { color: (0, _get2.default)('colors.action.link', theme) })
+        )]) : actions,
         icon: icon,
@@ -133,2 +170,4 @@ subTitle: subTitle,
   progress: _propTypes2.default.number,
+  sidebar: _propTypes2.default.element,
+  sidebarTitle: _propTypes2.default.string,
   subTitle: _propTypes2.default.string,
@@ -135,0 +174,0 @@ title: _propTypes2.default.string

package.json

 {
   "name": "@jouwomgeving/jo-card",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Dictator package Jouw Omgeving card.",
@@ -22,3 +22,6 @@ "dictator": [
     "styled-components": "^2.1.0"
+  },
+  "dependencies": {
+    "recompose": "^0.26.0"
   }
 }

stories/Default.stories.js

@@ -5,3 +5,5 @@ import React from 'react';
 
+import * as List from '@jouwomgeving/ui-list';
 import { Column, Row } from '@jouwomgeving/ui-grid';
+import Block from '@jouwomgeving/ui-block/Block';
 import Card from '@jouwomgeving/jo-card/Default';
@@ -12,15 +14,15 @@ import EoBug from '@jouwomgeving/ui-icon/EmojiOne/EoBug';
 import Img from '@jouwomgeving/ui-media/Img';
+import RichTextEditor from '@jouwomgeving/ui-richtexteditor';
+import Text from '@jouwomgeving/ui-typography/Text';
 import P from '@jouwomgeving/ui-typography/P';
-import RichTextEditor from '@jouwomgeving/ui-richtexteditor';
 
-storiesOf('jo-card', module).add('Default', () =>
+storiesOf('jo-card', module).add('Default', () => (
   <Card
-    actions={<P>Laatst opgeslagen om 23:50</P>}
+    actions={
+      <Text color="grey" size="small">
+        Laatst opgeslagen om 23:50
+      </Text>
+    }
     background={object('Background', {
-      color: 'floralwhite',
-      image:
-        'https://demo.jouwomgeving.nl/static/treatments/omgaan-met-veranderingen/0.1/images/chapter-background.png',
-      repeat: 'no-repeat no-repeat',
-      position: 'center center',
-      size: 'cover',
+      color: 'white',
     })}
@@ -30,3 +32,30 @@ comments={boolean('Comments', true) && <RichTextEditor />}
     progress={number('Progress', 75)}
-    subTitle={text('SubTitle', 'Franz Kafka (Translated by David Wyllie)')}
+    sidebar={
+      <div style={{ marginTop: '-0.625rem' }}>
+        <Block padding="0 1.25rem">
+          <List.List>
+            <List.Row selected={false}>
+              <List.Cell>
+                <Text>Gregor Samsa</Text>
+              </List.Cell>
+            </List.Row>
+            <List.Delimiter type="secondary" />
+            <List.Row selected={false}>
+              <List.Cell>
+                <Text>Coma-like sleep</Text>
+              </List.Cell>
+            </List.Row>
+            <List.Delimiter type="secondary" />
+            <List.Row selected={false}>
+              <List.Cell>
+                <Text>Mother, mother</Text>
+              </List.Cell>
+            </List.Row>
+            <List.Delimiter type="secondary" />
+          </List.List>
+        </Block>
+      </div>
+    }
+    sidebarTitle="Inhoud"
+    subTitle={text('SubTitle', 'Franz Kafka (translated by David Wyllie)')}
     title={text('Titel', 'Metamorphosis')}
@@ -36,9 +65,4 @@ >
       <Column />
-      <Column colspan={6}>
+      <Column colspan={7}>
         <H2>One morning</H2>
-      </Column>
-    </Row>
-    <Row>
-      <Column />
-      <Column colspan={6}>
         <H3>When Gregor Samsa woke from troubled dreams</H3>
@@ -57,4 +81,4 @@ <P>
           small, lay peacefully between its four familiar walls. A collection of
-          textile samples lay spread out on the table - Samsa was a travelling
-          salesman - and above it there hung a picture that he had recently cut
+          textile samples lay spread out on the table – Samsa was a travelling
+          salesman – and above it there hung a picture that he had recently cut
           out of an illustrated magazine and housed in a nice, gilded frame. It
@@ -66,11 +90,9 @@ showed a lady fitted out with a fur hat and fur boa who sat upright,
       </Column>
-      <Column />
       <Column colspan={3}>
-        <Img
-          width="100%"
-          src="https://demo.jouwomgeving.nl/static/treatments/aandacht-en-geheugen/0.1/images/inleiding/chapter.jpg"
-        />
+        <Block rounded>
+          <Img width="100%" src="https://picsum.photos/220/?random" />
+        </Block>
       </Column>
     </Row>
   </Card>
-);
+));

web/Default/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
+import castArray from 'lodash/fp/castArray';
 import get from 'lodash/fp/get';
 import { withTheme } from 'styled-components';
+import compose from 'recompose/compose';
+import branch from 'recompose/branch';
 
@@ -11,2 +14,4 @@ import * as Grid from '@jouwomgeving/ui-grid';
 import Delimiter from '@jouwomgeving/ui-card/Delimiter';
+import FaBars from '@jouwomgeving/ui-icon/FontAwesome/FaBars';
+import Button from '@jouwomgeving/ui-button/Button';
 import Header from '@jouwomgeving/ui-card/Header';
@@ -16,4 +21,9 @@ import Progress from '@jouwomgeving/ui-form/Progress';
 
-const enhance = withTheme;
+import withSidebar from './withSidebar';
 
+const enhance = compose(
+  withTheme,
+  branch(({ sidebar }) => sidebar, withSidebar, f => f)
+);
+
 const Default = enhance(
@@ -29,8 +39,19 @@ ({
     theme,
-    title,
-  }) =>
+    toggleSidebar,
+    sidebar,
+    title
+  }) => (
     <Card>
       <Background {...background}>
         <Header
-          actions={actions}
+          actions={
+            sidebar
+              ? [
+                  ...castArray(actions),
+                  <Button type="secondary" onClick={toggleSidebar}>
+                    <FaBars color={get('colors.action.link', theme)} />
+                  </Button>
+                ]
+              : actions
+          }
           icon={icon}
@@ -40,28 +61,27 @@ subTitle={subTitle}
         />
-        {typeof progress === 'number'
-          ? <Row>
-              <Progress
-                backgroundColor={get('colors.divider.primary', theme)}
-                colors={get('colors.action.approve', theme)}
-                height="0.25rem"
-                max={100}
-                min={0}
-                values={progress}
-              />
-            </Row>
-          : <Delimiter />}
-        <Block padding="1.875rem 0 3.125rem">
-          {children}
-        </Block>
+        {typeof progress === 'number' ? (
+          <Row>
+            <Progress
+              backgroundColor={get('colors.divider.primary', theme)}
+              colors={get('colors.action.approve', theme)}
+              height="0.25rem"
+              max={100}
+              min={0}
+              values={progress}
+            />
+          </Row>
+        ) : (
+          <Delimiter />
+        )}
+        <Block padding="1.875rem 0 3.125rem">{children}</Block>
         {comments && <Delimiter />}
         {/* eslint-disable react/no-unknown-property */
-        comments &&
+        comments && (
           <Block padding="1.25rem 0 2.5rem">
             <Grid.Row>
               <Grid.Column />
-              <Grid.Column colspan={10}>
-                {comments}
-              </Grid.Column>
+              <Grid.Column colspan={10}>{comments}</Grid.Column>
             </Grid.Row>
           </Block>
+        )
         /* eslint-enable */
@@ -71,2 +91,3 @@ }
     </Card>
+  )
 );
@@ -81,6 +102,8 @@
   progress: PropTypes.number,
+  sidebar: PropTypes.element,
+  sidebarTitle: PropTypes.string,
   subTitle: PropTypes.string,
-  title: PropTypes.string,
+  title: PropTypes.string
 };
 
 export default Default;

No alert changes

Improved metrics

Total package byte prevSize

47472

increased by26.3%

Number of package files

21

increased by16.67%

Lines of code

1204

increased by33.63%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedrecompose@^0.26.0

• + Addedchange-emitter@0.1.6(transitive)

• + Addedhoist-non-react-statics@2.5.5(transitive)

• + Addedrecompose@0.26.0(transitive)

• + Addedsymbol-observable@1.2.0(transitive)