@mjhls/mjh-framework 1.0.24 → 1.0.25

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
@@ -1,8 +1,9 @@
1
- import React__default, { Component, useState, createElement, createContext } from 'react';
1
+ import React__default, { Component, useState, createContext, createElement } from 'react';
2
2
  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';
@@ -16,7 +17,6 @@ import FormControl from 'react-bootstrap/FormControl';
16
17
  import Button from 'react-bootstrap/Button';
17
18
  import PropTypes from 'prop-types';
18
19
  import { Figure, Carousel } from 'react-bootstrap';
19
- import imageUrlBuilder from '@sanity/image-url';
20
20
 
21
21
  /*! *****************************************************************************
22
22
  Copyright (c) Microsoft Corporation. All rights reserved.
@@ -615,7 +615,6 @@ var DeckContent = function (_React$Component) {
615
615
 
616
616
  var itemCounter = 0;
617
617
  var lgVar = 12;
618
-
619
618
  return React__default.createElement(
620
619
  Row,
621
620
  null,
@@ -640,7 +639,11 @@ var DeckContent = function (_React$Component) {
640
639
  React__default.createElement(
641
640
  'a',
642
641
  null,
643
- React__default.createElement(Card.Img, { variant: 'top', src: row.thumbnail.asset ? row.thumbnail.asset.url : _this.defaultImage })
642
+ React__default.createElement(Card.Img, {
643
+ variant: 'top',
644
+ src: row.thumbnail.asset ? row.thumbnail.asset.url : _this.defaultImage,
645
+ alt: row.thumbnail.asset ? row.thumbnail.asset.originalFilename : ''
646
+ })
644
647
  )
645
648
  ),
646
649
  React__default.createElement(
@@ -934,6 +937,93 @@ var DeckQueue = function (_React$Component) {
934
937
  return DeckQueue;
935
938
  }(React__default.Component);
936
939
 
940
+ var ThumbnailCard = function ThumbnailCard(_ref) {
941
+ var size = _ref.size,
942
+ mediaData = _ref.mediaData;
943
+
944
+ return React__default.createElement(
945
+ 'div',
946
+ null,
947
+ mediaData && mediaData.map(function (item, index) {
948
+ return React__default.createElement(
949
+ Media,
950
+ { className: 'mb-3' },
951
+ React__default.createElement('img', { width: size, height: size, className: 'mr-3', src: item.thumbnail.asset.url, alt: 'Generic placeholder' }),
952
+ React__default.createElement(
953
+ Media.Body,
954
+ null,
955
+ React__default.createElement(
956
+ 'h5',
957
+ null,
958
+ item.title
959
+ ),
960
+ React__default.createElement(
961
+ 'p',
962
+ null,
963
+ item.summary
964
+ )
965
+ )
966
+ );
967
+ })
968
+ );
969
+ };
970
+
971
+ var TaxonomyCard = function TaxonomyCard(props) {
972
+ var columns = props.columns,
973
+ variant = props.variant,
974
+ data = props.dataRecord;
975
+
976
+
977
+ var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
978
+
979
+ var itemCounter = 0;
980
+ var lgVar = 12;
981
+
982
+ return React__default.createElement(
983
+ 'div',
984
+ { className: 'contentDeck' },
985
+ React__default.createElement(
986
+ Row,
987
+ null,
988
+ data && data.map(function (row, index) {
989
+ if (columns === 'rotate' && itemCounter % 3 === 0) {
990
+ lgVar = 12;
991
+ } else if (columns && columns !== 'rotate') {
992
+ lgVar = Math.floor(12 / columns);
993
+ } else {
994
+ lgVar = 6;
995
+ }
996
+
997
+ return React__default.createElement(
998
+ Col,
999
+ { key: itemCounter, md: 12, lg: lgVar, counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
1000
+ React__default.createElement(
1001
+ Card,
1002
+ { style: { flexDirection: mode } },
1003
+ React__default.createElement(
1004
+ Card.Body,
1005
+ null,
1006
+ React__default.createElement(
1007
+ Link,
1008
+ { href: row.url, as: row.url },
1009
+ React__default.createElement(
1010
+ 'a',
1011
+ null,
1012
+ React__default.createElement(
1013
+ Card.Title,
1014
+ null,
1015
+ row.name
1016
+ )
1017
+ )
1018
+ )
1019
+ )
1020
+ )
1021
+ );
1022
+ })
1023
+ )
1024
+ );
1025
+ };
1026
+
937
1027
  var Column1 = function Column1(props) {
938
1028
  return React__default.createElement(
939
1029
  'section',
@@ -1584,10 +1674,43 @@ var NavNormal = function NavNormal(props) {
1584
1674
  );
1585
1675
  };
1586
1676
 
1677
+ var Search = function Search(_ref) {
1678
+ var placeholder = _ref.placeholder,
1679
+ disabled = _ref.disabled,
1680
+ type = _ref.type,
1681
+ btnText = _ref.btnText,
1682
+ handleSearch = _ref.handleSearch;
1683
+
1684
+ var _useState = useState(''),
1685
+ _useState2 = slicedToArray(_useState, 2),
1686
+ searchKey = _useState2[0],
1687
+ setSearchKey = _useState2[1];
1688
+
1689
+ var onChangeSearch = function onChangeSearch(e) {
1690
+ setSearchKey(e.target.value);
1691
+ };
1692
+
1693
+ return React__default.createElement(
1694
+ 'div',
1695
+ { className: 'd-flex' },
1696
+ React__default.createElement('input', { className: 'form-control', placeholder: placeholder, disabled: disabled, type: type, value: searchKey, onChange: function onChange(e) {
1697
+ return onChangeSearch(e);
1698
+ } }),
1699
+ React__default.createElement(
1700
+ 'button',
1701
+ { className: 'test', onClick: function onClick() {
1702
+ return handleSearch(searchKey);
1703
+ } },
1704
+ btnText
1705
+ )
1706
+ );
1707
+ };
1708
+
1587
1709
  var NavDvm = function NavDvm(props) {
1588
1710
  var logo = props.logo,
1589
1711
  dataObject = props.dataObject,
1590
- subNavHeads = props.subNavHeads;
1712
+ subNavHeads = props.subNavHeads,
1713
+ onSearch = props.onSearch;
1591
1714
 
1592
1715
 
1593
1716
  return React__default.createElement(
@@ -1602,8 +1725,12 @@ var NavDvm = function NavDvm(props) {
1602
1725
  React__default.createElement(
1603
1726
  'div',
1604
1727
  { className: 'd-flex' },
1605
- React__default.createElement('img', { src: logo, className: 'h-100' }),
1606
- React__default.createElement('div', { className: ' ml-4' })
1728
+ React__default.createElement('img', { src: logo, className: 'h-100', style: { width: '120px' } }),
1729
+ React__default.createElement(
1730
+ 'div',
1731
+ { className: ' ml-4 d-flex align-items-center' },
1732
+ React__default.createElement(Search, { btnText: 'Search', handleSearch: onSearch })
1733
+ )
1607
1734
  ),
1608
1735
  React__default.createElement(
1609
1736
  'div',
@@ -1645,7 +1772,7 @@ var NavDvm = function NavDvm(props) {
1645
1772
  return React__default.createElement(
1646
1773
  NavDropdown,
1647
1774
  { key: index, title: row.name, id: 'basic-nav-dropdown' },
1648
- row.subQuery && row.subQuery.map(function (ddRow, ddItems, subIndex) {
1775
+ row.subQuery && row.subQuery.map(function (ddRow, subIndex) {
1649
1776
  if (ddRow.type === 'divider') {
1650
1777
  return React__default.createElement(NavDropdown.Divider, { key: subIndex });
1651
1778
  } else {
@@ -3419,10 +3546,11 @@ var TemplateNormal = function TemplateNormal(props) {
3419
3546
  keywords = props.keywords,
3420
3547
  description = props.description,
3421
3548
  website = props.website,
3422
- horizontalAD = props.config.horizontalAD;
3549
+ horizontalAD = props.config.horizontalAD,
3550
+ onSearch = props.onSearch;
3423
3551
 
3424
3552
 
3425
- function navigation() {
3553
+ var navigation = function navigation() {
3426
3554
  switch (config.navComponent) {
3427
3555
  case 'normal':
3428
3556
  return React__default.createElement(NavNormal, { logo: website.logo, dataObject: config.navItems });
@@ -3431,11 +3559,11 @@ var TemplateNormal = function TemplateNormal(props) {
3431
3559
  case 'native':
3432
3560
  return React__default.createElement(NavNative, { logo: website.logo, dataObject: config.navItems });
3433
3561
  case 'dvm':
3434
- return React__default.createElement(NavDvm, { logo: website.logo, dataObject: config.navItems });
3562
+ return React__default.createElement(NavDvm, { logo: website.logo, dataObject: config.navItems, onSearch: onSearch });
3435
3563
  default:
3436
3564
  return React__default.createElement('noNav', null);
3437
3565
  }
3438
- }
3566
+ };
3439
3567
 
3440
3568
  function layout() {
3441
3569
  switch (config.columns) {
@@ -3501,7 +3629,7 @@ var AD300x250x600 = function AD300x250x600(_ref) {
3501
3629
 
3502
3630
  var FigureComponent = function FigureComponent(_ref) {
3503
3631
  var caption = _ref.caption,
3504
- url = _ref.url;
3632
+ asset = _ref.asset;
3505
3633
 
3506
3634
  return React__default.createElement(
3507
3635
  'div',
@@ -3509,8 +3637,8 @@ var FigureComponent = function FigureComponent(_ref) {
3509
3637
  React__default.createElement(
3510
3638
  Figure,
3511
3639
  null,
3512
- React__default.createElement(Figure.Image, { alt: caption, src: url }),
3513
- React__default.createElement(
3640
+ React__default.createElement(Figure.Image, { alt: asset ? asset.originalFilename : '', src: asset.url ? asset.url : '/placeholder.jpg' }),
3641
+ caption && React__default.createElement(
3514
3642
  Figure.Caption,
3515
3643
  null,
3516
3644
  caption
@@ -3532,7 +3660,7 @@ var Slideshow = function Slideshow(_ref) {
3532
3660
  return React__default.createElement(
3533
3661
  Carousel.Item,
3534
3662
  { key: slide._key },
3535
- React__default.createElement('img', { style: { width: '100%' }, src: slide.url, alt: slide.asset.originalFilename })
3663
+ React__default.createElement('img', { style: { width: '100%' }, src: slide.asset.url ? slide.asset.url : '/placeholder.jpg', alt: slide.asset ? slide.asset.originalFilename : '' })
3536
3664
  );
3537
3665
  })
3538
3666
  )
@@ -6211,10 +6339,6 @@ var YouTubePlayer$1 = function YouTubePlayer(_ref) {
6211
6339
  return React__default.createElement(YouTube, { videoId: id, opts: { width: '100%' } });
6212
6340
  };
6213
6341
 
6214
- var urlFor = function urlFor(source, client) {
6215
- return imageUrlBuilder(client).image(source);
6216
- };
6217
-
6218
6342
  var getSerializers = function getSerializers(client) {
6219
6343
  return {
6220
6344
  types: {
@@ -6229,20 +6353,55 @@ var getSerializers = function getSerializers(client) {
6229
6353
  var asset = node.asset,
6230
6354
  caption = node.caption;
6231
6355
 
6232
- var url = urlFor(asset, client).url();
6233
- return React__default.createElement(FigureComponent, { caption: caption, url: url });
6356
+ return React__default.createElement(FigureComponent, { caption: caption, asset: asset });
6234
6357
  },
6235
6358
  slideshow: function slideshow(_ref3) {
6236
6359
  var node = _ref3.node;
6360
+ var slides = node.slides;
6237
6361
 
6238
- var slides = node.slides && node.slides.map(function (slide) {
6239
- return Object.assign(slide, { url: urlFor(slide.asset, client).url() });
6240
- });
6241
6362
  return React__default.createElement(Slideshow, { slides: slides });
6242
6363
  }
6243
6364
  }
6244
6365
  };
6245
6366
  };
6246
6367
 
6247
- export { DeckContent, DeckQueue, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers };
6368
+ var searchResult = function searchResult(_ref) {
6369
+ var searchResults = _ref.searchResults,
6370
+ searchTerm = _ref.searchTerm;
6371
+
6372
+ return React__default.createElement(
6373
+ React__default.Fragment,
6374
+ null,
6375
+ React__default.createElement(
6376
+ 'p',
6377
+ null,
6378
+ ' Results for "',
6379
+ searchTerm,
6380
+ '" '
6381
+ ),
6382
+ searchResults && searchResults.length > 0 ? searchResults.map(function (item, index) {
6383
+ return React__default.createElement(
6384
+ 'div',
6385
+ { key: index, className: 'search-result-container' },
6386
+ React__default.createElement(
6387
+ 'h5',
6388
+ null,
6389
+ item.title
6390
+ ),
6391
+ React__default.createElement(
6392
+ 'p',
6393
+ null,
6394
+ item.summary,
6395
+ ' '
6396
+ )
6397
+ );
6398
+ }) : React__default.createElement(
6399
+ 'div',
6400
+ null,
6401
+ 'No results found'
6402
+ )
6403
+ );
6404
+ };
6405
+
6406
+ export { DeckContent, DeckQueue, ThumbnailCard, TaxonomyCard, Column1, Column2, Column3, Header, LeftNav, AccordionPanel, NavMagazine, NavNative, NavNormal, NavDvm, TemplateNormal, AD300x250, AD300x250x600, AD728x90, getSerializers, searchResult as SearchResult, Search };
6248
6407
  //# sourceMappingURL=index.es.js.map