@mjhls/mjh-framework 1.0.24 → 1.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,170 +1,170 @@
1
- # mjh-framework v. 1.0.24
2
-
3
- > Foundation Framework
4
-
5
- [![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
6
-
7
- ## Install
8
-
9
- ```bash
10
- npm install --save @mjhls/mjh-framework
11
- ```
12
-
13
- ## Usage
14
-
15
- ```jsx
16
- import React, { Component } from 'react'
17
-
18
- import { NavMagazine, DeckQueue } from 'mjh-framework'
19
-
20
- export default class App extends Component {
21
- render() {
22
- return (
23
- <div>
24
- <NavMagazine />
25
- <DeckQueue />
26
- </div>
27
- )
28
- }
29
- }
30
- ```
31
-
32
- ## Publish new updates to the npm registry
33
-
34
- ```bash
35
- npm publish
36
- ```
37
-
38
- ## For getting updates in the template without publishing each time a change is made in the framework
39
-
40
- Link react and react-dom of the template repo, so that it can be used by the framework.
41
- This is to avoid the error arising due to multiple instances of React.
42
-
43
- ```bash
44
- cd ../mjh-template/node_modules/react
45
-
46
- yarn link
47
-
48
- cd ../react-dom
49
-
50
- yarn link
51
-
52
- cd ../../../mjh-framework
53
-
54
- yarn link react && yarn link react-dom
55
- ```
56
-
57
- Link the framework repo so that it can be used in the template
58
-
59
- ```bash
60
- npm link
61
-
62
- cd ../mjh-template
63
-
64
- npm link @mjhls/mjh-framework
65
- ```
66
-
67
- ## Components and "props"
68
-
69
- ### Deck Components
70
-
71
- - #### DeckContent
72
-
73
- ##### Props
74
-
75
- - mapping
76
- - dataRecord
77
- - query
78
- - params
79
- - pointer
80
- - pointerArray
81
- - defaultImage
82
-
83
- - #### DeckQueue
84
- ##### Props
85
- - page
86
- - dataRecord
87
- - query
88
- - params
89
- - pointer
90
- - pointerArray
91
-
92
- ### Layout Components
93
-
94
- - #### Column1
95
- - #### Column2
96
- ##### Props
97
- - rightItems
98
- - #### Column3
99
- ##### Props
100
- - leftItems
101
- - rightItems
102
- ##### Common Props (Column1, Column2, Column3)
103
- - title
104
- - children
105
- - #### Header
106
- ##### Props
107
- - title
108
- - keyword
109
- - description
110
- - #### LeftNav
111
- ##### Props
112
- - leftItems
113
- - #### AccordionPanel
114
- ##### Props
115
- - accordionClassName
116
- - data
117
-
118
- ### Navigation Components
119
-
120
- - #### NavMagazine
121
- ##### Props
122
- - logo
123
- - dataObject
124
- - #### NavNative
125
- ##### Props
126
- - logo
127
- - dataObject
128
- - #### NavNormal
129
- ##### Props
130
- - logo
131
- - dataObject
132
- - variant
133
- - #### NavDvm
134
- ##### Props
135
- - logo
136
- - dataObject
137
- - subNavHeads
138
-
139
- ### Template Components
140
-
141
- - #### TemplateNormal
142
- ##### Props
143
- - config
144
- - title
145
- - keywords
146
- - description
147
- - website
148
-
149
- ### Ad Components
150
-
151
- - #### AD300x250
152
- - #### AD300x250x600
153
- - #### AD728x90
154
- ##### Common Props
155
- - networkID
156
- - adUnit
157
-
158
- ### Serializers
159
-
160
- - #### getSerializers (function)
161
- ##### arguments
162
- - client
163
- ##### types
164
- - youtube
165
- - figure
166
- - slideshow
167
-
168
- ## License
169
-
170
- MIT © [mjh-framework](https://github.com/mjh-framework)
1
+ # mjh-framework v. 1.0.24
2
+
3
+ > Foundation Framework
4
+
5
+ [![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ npm install --save @mjhls/mjh-framework
11
+ ```
12
+
13
+ ## Usage
14
+
15
+ ```jsx
16
+ import React, { Component } from 'react'
17
+
18
+ import { NavMagazine, DeckQueue } from 'mjh-framework'
19
+
20
+ export default class App extends Component {
21
+ render() {
22
+ return (
23
+ <div>
24
+ <NavMagazine />
25
+ <DeckQueue />
26
+ </div>
27
+ )
28
+ }
29
+ }
30
+ ```
31
+
32
+ ## Publish new updates to the npm registry
33
+
34
+ ```bash
35
+ npm publish
36
+ ```
37
+
38
+ ## For getting updates in the template without publishing each time a change is made in the framework
39
+
40
+ Link react and react-dom of the template repo, so that it can be used by the framework.
41
+ This is to avoid the error arising due to multiple instances of React.
42
+
43
+ ```bash
44
+ cd ../mjh-template/node_modules/react
45
+
46
+ yarn link
47
+
48
+ cd ../react-dom
49
+
50
+ yarn link
51
+
52
+ cd ../../../mjh-framework
53
+
54
+ yarn link react && yarn link react-dom
55
+ ```
56
+
57
+ Link the framework repo so that it can be used in the template
58
+
59
+ ```bash
60
+ npm link
61
+
62
+ cd ../mjh-template
63
+
64
+ npm link @mjhls/mjh-framework
65
+ ```
66
+
67
+ ## Components and "props"
68
+
69
+ ### Deck Components
70
+
71
+ - #### DeckContent
72
+
73
+ ##### Props
74
+
75
+ - mapping
76
+ - dataRecord
77
+ - query
78
+ - params
79
+ - pointer
80
+ - pointerArray
81
+ - defaultImage
82
+
83
+ - #### DeckQueue
84
+ ##### Props
85
+ - page
86
+ - dataRecord
87
+ - query
88
+ - params
89
+ - pointer
90
+ - pointerArray
91
+
92
+ ### Layout Components
93
+
94
+ - #### Column1
95
+ - #### Column2
96
+ ##### Props
97
+ - rightItems
98
+ - #### Column3
99
+ ##### Props
100
+ - leftItems
101
+ - rightItems
102
+ ##### Common Props (Column1, Column2, Column3)
103
+ - title
104
+ - children
105
+ - #### Header
106
+ ##### Props
107
+ - title
108
+ - keyword
109
+ - description
110
+ - #### LeftNav
111
+ ##### Props
112
+ - leftItems
113
+ - #### AccordionPanel
114
+ ##### Props
115
+ - accordionClassName
116
+ - data
117
+
118
+ ### Navigation Components
119
+
120
+ - #### NavMagazine
121
+ ##### Props
122
+ - logo
123
+ - dataObject
124
+ - #### NavNative
125
+ ##### Props
126
+ - logo
127
+ - dataObject
128
+ - #### NavNormal
129
+ ##### Props
130
+ - logo
131
+ - dataObject
132
+ - variant
133
+ - #### NavDvm
134
+ ##### Props
135
+ - logo
136
+ - dataObject
137
+ - subNavHeads
138
+
139
+ ### Template Components
140
+
141
+ - #### TemplateNormal
142
+ ##### Props
143
+ - config
144
+ - title
145
+ - keywords
146
+ - description
147
+ - website
148
+
149
+ ### Ad Components
150
+
151
+ - #### AD300x250
152
+ - #### AD300x250x600
153
+ - #### AD728x90
154
+ ##### Common Props
155
+ - networkID
156
+ - adUnit
157
+
158
+ ### Serializers
159
+
160
+ - #### getSerializers (function)
161
+ ##### arguments
162
+ - client
163
+ ##### types
164
+ - youtube
165
+ - figure
166
+ - slideshow
167
+
168
+ ## License
169
+
170
+ MIT © [mjh-framework](https://github.com/mjh-framework)
package/dist/index.es.js CHANGED
@@ -3,6 +3,7 @@ import Row from 'react-bootstrap/Row';
3
3
  import Col from 'react-bootstrap/Col';
4
4
  import Card from 'react-bootstrap/Card';
5
5
  import Link from 'next/link';
6
+ import Media from 'react-bootstrap/Media';
6
7
  import ListGroup from 'react-bootstrap/ListGroup';
7
8
  import Head from 'next/head';
8
9
  import Accordion from 'react-bootstrap/Accordion';
@@ -14,9 +15,9 @@ import NavDropdown from 'react-bootstrap/NavDropdown';
14
15
  import Form from 'react-bootstrap/Form';
15
16
  import FormControl from 'react-bootstrap/FormControl';
16
17
  import Button from 'react-bootstrap/Button';
18
+ import { withRouter } from 'next/router';
17
19
  import PropTypes from 'prop-types';
18
20
  import { Figure, Carousel } from 'react-bootstrap';
19
- import imageUrlBuilder from '@sanity/image-url';
20
21
 
21
22
  /*! *****************************************************************************
22
23
  Copyright (c) Microsoft Corporation. All rights reserved.
@@ -615,7 +616,6 @@ var DeckContent = function (_React$Component) {
615
616
 
616
617
  var itemCounter = 0;
617
618
  var lgVar = 12;
618
-
619
619
  return React__default.createElement(
620
620
  Row,
621
621
  null,
@@ -640,7 +640,11 @@ var DeckContent = function (_React$Component) {
640
640
  React__default.createElement(
641
641
  'a',
642
642
  null,
643
- React__default.createElement(Card.Img, { variant: 'top', src: row.thumbnail.asset ? row.thumbnail.asset.url : _this.defaultImage })
643
+ React__default.createElement(Card.Img, {
644
+ variant: 'top',
645
+ src: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.url : _this.defaultImage,
646
+ alt: row.thumbnail && row.thumbnail.asset ? row.thumbnail.asset.originalFilename : ''
647
+ })
644
648
  )
645
649
  ),
646
650
  React__default.createElement(
@@ -934,6 +938,93 @@ var DeckQueue = function (_React$Component) {
934
938
  return DeckQueue;
935
939
  }(React__default.Component);
936
940
 
941
+ var ThumbnailCard = function ThumbnailCard(_ref) {
942
+ var size = _ref.size,
943
+ mediaData = _ref.mediaData;
944
+
945
+ return React__default.createElement(
946
+ 'div',
947
+ null,
948
+ mediaData && mediaData.map(function (item, index) {
949
+ return React__default.createElement(
950
+ Media,
951
+ { className: 'mb-3' },
952
+ React__default.createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail.asset.url, alt: 'Generic placeholder' }),
953
+ React__default.createElement(
954
+ Media.Body,
955
+ null,
956
+ React__default.createElement(
957
+ 'h5',
958
+ null,
959
+ item.title
960
+ ),
961
+ React__default.createElement(
962
+ 'p',
963
+ null,
964
+ item.summary
965
+ )
966
+ )
967
+ );
968
+ })
969
+ );
970
+ };
971
+
972
+ var TaxonomyCard = function TaxonomyCard(props) {
973
+ var columns = props.columns,
974
+ variant = props.variant,
975
+ data = props.dataRecord;
976
+
977
+
978
+ var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
979
+
980
+ var itemCounter = 0;
981
+ var lgVar = 12;
982
+
983
+ return React__default.createElement(
984
+ 'div',
985
+ { className: 'contentDeck' },
986
+ React__default.createElement(
987
+ Row,
988
+ null,
989
+ data && data.map(function (row, index) {
990
+ if (columns === 'rotate' && itemCounter % 3 === 0) {
991
+ lgVar = 12;
992
+ } else if (columns && columns !== 'rotate') {
993
+ lgVar = Math.floor(12 / columns);
994
+ } else {
995
+ lgVar = 6;
996
+ }
997
+
998
+ return React__default.createElement(
999
+ Col,
1000
+ { key: itemCounter, md: 12, lg: lgVar, counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
1001
+ React__default.createElement(
1002
+ Card,
1003
+ { style: { flexDirection: mode } },
1004
+ React__default.createElement(
1005
+ Card.Body,
1006
+ null,
1007
+ React__default.createElement(
1008
+ Link,
1009
+ { href: row.url, as: row.url },
1010
+ React__default.createElement(
1011
+ 'a',
1012
+ null,
1013
+ React__default.createElement(
1014
+ Card.Title,
1015
+ null,
1016
+ row.name
1017
+ )
1018
+ )
1019
+ )
1020
+ )
1021
+ )
1022
+ );
1023
+ })
1024
+ )
1025
+ );
1026
+ };
1027
+
937
1028
  var Column1 = function Column1(props) {
938
1029
  return React__default.createElement(
939
1030
  'section',
@@ -1584,6 +1675,48 @@ var NavNormal = function NavNormal(props) {
1584
1675
  );
1585
1676
  };
1586
1677
 
1678
+ var Search = function Search(_ref) {
1679
+ var _ref$placeholder = _ref.placeholder,
1680
+ placeholder = _ref$placeholder === undefined ? 'Search' : _ref$placeholder,
1681
+ _ref$btnText = _ref.btnText,
1682
+ btnText = _ref$btnText === undefined ? 'Search' : _ref$btnText,
1683
+ router = _ref.router;
1684
+
1685
+ var _useState = useState(''),
1686
+ _useState2 = slicedToArray(_useState, 2),
1687
+ searchKey = _useState2[0],
1688
+ setSearchKey = _useState2[1];
1689
+
1690
+ var handleSearch = function handleSearch(value) {
1691
+ router.push({
1692
+ pathname: '/search',
1693
+ query: { searchTerm: value }
1694
+ });
1695
+ };
1696
+
1697
+ return React__default.createElement(
1698
+ Form,
1699
+ {
1700
+ inline: true,
1701
+ onSubmit: function onSubmit(e) {
1702
+ e.preventDefault();
1703
+ handleSearch(searchKey);
1704
+ } },
1705
+ React__default.createElement(FormControl, { type: 'text', placeholder: placeholder, className: 'mr-sm-2', value: searchKey, onChange: function onChange(e) {
1706
+ return setSearchKey(e.target.value);
1707
+ } }),
1708
+ React__default.createElement(
1709
+ Button,
1710
+ { variant: 'secondary', onClick: function onClick() {
1711
+ return handleSearch(searchKey);
1712
+ } },
1713
+ btnText
1714
+ )
1715
+ );
1716
+ };
1717
+
1718
+ var Search$1 = withRouter(Search);
1719
+
1587
1720
  var NavDvm = function NavDvm(props) {
1588
1721
  var logo = props.logo,
1589
1722
  dataObject = props.dataObject,
@@ -1602,8 +1735,20 @@ var NavDvm = function NavDvm(props) {
1602
1735
  React__default.createElement(
1603
1736
  'div',
1604
1737
  { className: 'd-flex' },
1605
- React__default.createElement('img', { src: logo, className: 'h-100' }),
1606
- React__default.createElement('div', { className: ' ml-4' })
1738
+ React__default.createElement(
1739
+ Link,
1740
+ { href: '/' },
1741
+ React__default.createElement(
1742
+ 'a',
1743
+ null,
1744
+ React__default.createElement('img', { src: logo, className: 'h-100', style: { width: '120px' } })
1745
+ )
1746
+ ),
1747
+ React__default.createElement(
1748
+ 'div',
1749
+ { className: ' ml-4 d-flex align-items-center' },
1750
+ React__default.createElement(Search$1, { btnText: 'Search' })
1751
+ )
1607
1752
  ),
1608
1753
  React__default.createElement(
1609
1754
  'div',
@@ -1645,7 +1790,7 @@ var NavDvm = function NavDvm(props) {
1645
1790
  return React__default.createElement(
1646
1791
  NavDropdown,
1647
1792
  { key: index, title: row.name, id: 'basic-nav-dropdown' },
1648
- row.subQuery && row.subQuery.map(function (ddRow, ddItems, subIndex) {
1793
+ row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
1649
1794
  if (ddRow.type === 'divider') {
1650
1795
  return React__default.createElement(NavDropdown.Divider, { key: subIndex });
1651
1796
  } else {
@@ -1673,30 +1818,6 @@ var NavDvm = function NavDvm(props) {
1673
1818
  );
1674
1819
  }
1675
1820
  })
1676
- ),
1677
- React__default.createElement(
1678
- 'div',
1679
- { className: 'login-subscibe', style: { fontSize: '12px' } },
1680
- React__default.createElement(
1681
- 'span',
1682
- { style: { color: '#FFDC3F' } },
1683
- '>> ',
1684
- React__default.createElement(
1685
- 'span',
1686
- { style: { color: '#fff' } },
1687
- ' Login'
1688
- )
1689
- ),
1690
- React__default.createElement(
1691
- 'span',
1692
- { style: { color: '#FFDC3F' } },
1693
- '>> ',
1694
- React__default.createElement(
1695
- 'span',
1696
- { style: { color: '#fff' } },
1697
- ' Register'
1698
- )
1699
- )
1700
1821
  )
1701
1822
  )
1702
1823
  )
@@ -3419,10 +3540,11 @@ var TemplateNormal = function TemplateNormal(props) {
3419
3540
  keywords = props.keywords,
3420
3541
  description = props.description,
3421
3542
  website = props.website,
3422
- horizontalAD = props.config.horizontalAD;
3543
+ horizontalAD = props.config.horizontalAD,
3544
+ onSearch = props.onSearch;
3423
3545
 
3424
3546
 
3425
- function navigation() {
3547
+ var navigation = function navigation() {
3426
3548
  switch (config.navComponent) {
3427
3549
  case 'normal':
3428
3550
  return React__default.createElement(NavNormal, { logo: website.logo, dataObject: config.navItems });
@@ -3435,7 +3557,7 @@ var TemplateNormal = function TemplateNormal(props) {
3435
3557
  default:
3436
3558
  return React__default.createElement('noNav', null);
3437
3559
  }
3438
- }
3560
+ };
3439
3561
 
3440
3562
  function layout() {
3441
3563
  switch (config.columns) {
@@ -3501,7 +3623,7 @@ var AD300x250x600 = function AD300x250x600(_ref) {
3501
3623
 
3502
3624
  var FigureComponent = function FigureComponent(_ref) {
3503
3625
  var caption = _ref.caption,
3504
- url = _ref.url;
3626
+ asset = _ref.asset;
3505
3627
 
3506
3628
  return React__default.createElement(
3507
3629
  'div',
@@ -3509,8 +3631,8 @@ var FigureComponent = function FigureComponent(_ref) {
3509
3631
  React__default.createElement(
3510
3632
  Figure,
3511
3633
  null,
3512
- React__default.createElement(Figure.Image, { alt: caption, src: url }),
3513
- React__default.createElement(
3634
+ React__default.createElement(Figure.Image, { alt: asset ? asset.originalFilename : '', src: asset.url ? asset.url : '/placeholder.jpg' }),
3635
+ caption && React__default.createElement(
3514
3636
  Figure.Caption,
3515
3637
  null,
3516
3638
  caption
@@ -3532,7 +3654,7 @@ var Slideshow = function Slideshow(_ref) {
3532
3654
  return React__default.createElement(
3533
3655
  Carousel.Item,
3534
3656
  { key: slide._key },
3535
- React__default.createElement('img', { style: { width: '100%' }, src: slide.url, alt: slide.asset.originalFilename })
3657
+ React__default.createElement('img', { style: { width: '100%' }, src: slide.asset.url ? slide.asset.url : '/placeholder.jpg', alt: slide.asset ? slide.asset.originalFilename : '' })
3536
3658
  );
3537
3659
  })
3538
3660
  )
@@ -6211,10 +6333,6 @@ var YouTubePlayer$1 = function YouTubePlayer(_ref) {
6211
6333
  return React__default.createElement(YouTube, { videoId: id, opts: { width: '100%' } });
6212
6334
  };
6213
6335
 
6214
- var urlFor = function urlFor(source, client) {
6215
- return imageUrlBuilder(client).image(source);
6216
- };
6217
-
6218
6336
  var getSerializers = function getSerializers(client) {
6219
6337
  return {
6220
6338
  types: {
@@ -6229,20 +6347,55 @@ var getSerializers = function getSerializers(client) {
6229
6347
  var asset = node.asset,
6230
6348
  caption = node.caption;
6231
6349
 
6232
- var url = urlFor(asset, client).url();
6233
- return React__default.createElement(FigureComponent, { caption: caption, url: url });
6350
+ return React__default.createElement(FigureComponent, { caption: caption, asset: asset });
6234
6351
  },
6235
6352
  slideshow: function slideshow(_ref3) {
6236
6353
  var node = _ref3.node;
6354
+ var slides = node.slides;
6237
6355
 
6238
- var slides = node.slides && node.slides.map(function (slide) {
6239
- return Object.assign(slide, { url: urlFor(slide.asset, client).url() });
6240
- });
6241
6356
  return React__default.createElement(Slideshow, { slides: slides });
6242
6357
  }
6243
6358
  }
6244
6359
  };
6245
6360
  };
6246
6361
 
6247
- export { DeckContent, DeckQueue, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers };
6362
+ var searchResult = function searchResult(_ref) {
6363
+ var searchResults = _ref.searchResults,
6364
+ searchTerm = _ref.searchTerm;
6365
+
6366
+ return React__default.createElement(
6367
+ React__default.Fragment,
6368
+ null,
6369
+ React__default.createElement(
6370
+ 'p',
6371
+ null,
6372
+ ' Results for "',
6373
+ searchTerm,
6374
+ '" '
6375
+ ),
6376
+ searchResults && searchResults.length > 0 ? searchResults.map(function (item, index) {
6377
+ return React__default.createElement(
6378
+ 'div',
6379
+ { key: index, className: 'search-result-container' },
6380
+ React__default.createElement(
6381
+ 'h5',
6382
+ null,
6383
+ item.title
6384
+ ),
6385
+ React__default.createElement(
6386
+ 'p',
6387
+ null,
6388
+ item.summary,
6389
+ ' '
6390
+ )
6391
+ );
6392
+ }) : React__default.createElement(
6393
+ 'div',
6394
+ null,
6395
+ 'No results found'
6396
+ )
6397
+ );
6398
+ };
6399
+
6400
+ export { DeckContent, DeckQueue, ThumbnailCard, TaxonomyCard, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers, searchResult as SearchResult, Search$1 as Search };
6248
6401
  //# sourceMappingURL=index.es.js.map