@sanity/dashboard 2.30.3-activation-dashboard.6 → 2.30.3-findability.52

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.
Files changed (4) hide show
  1. package/lib/dashboardConfig.js +1 -5
  2. package/lib/widgets/sanityTutorials/SanityTutorials.js +41 -64
  3. package/lib/widgets/sanityTutorials/Tutorial.js +41 -68
  4. package/package.json +4 -4
package/lib/dashboardConfig.js CHANGED
@@ -6,11 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var _default = {
8
8
  widgets: [{
9
- name: 'sanity-tutorials',
10
- layout: {
11
- width: 'full',
12
- height: 'full'
13
- }
9
+ name: 'sanity-tutorials'
14
10
  }, {
15
11
  name: 'project-info'
16
12
  }, {
package/lib/widgets/sanityTutorials/SanityTutorials.js CHANGED
@@ -5,12 +5,16 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
+ var _get2 = _interopRequireDefault(require("lodash/get"));
9
+
8
10
  var _react = _interopRequireDefault(require("react"));
9
11
 
10
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
13
 
12
14
  var _ui = require("@sanity/ui");
13
15
 
16
+ var _DashboardTool = require("../../DashboardTool");
17
+
14
18
  var _Tutorial = _interopRequireDefault(require("./Tutorial"));
15
19
 
16
20
  var _dataAdapter = _interopRequireDefault(require("./dataAdapter"));
@@ -19,27 +23,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
19
23
 
20
24
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
21
25
 
22
- var FeedItem = _ref => {
23
- var feedItem = _ref.feedItem;
24
- // Check to see if the feed item has the content needed to render an item with a link and poster image
25
- var isEmpty = !feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink && !feedItem.feedItems;
26
-
27
- if (isEmpty) {
28
- return null;
29
- }
30
-
31
- var subtitle = feedItem.description;
32
- var _feedItem$guideOrTuto = feedItem.guideOrTutorial,
33
- guideOrTutorial = _feedItem$guideOrTuto === void 0 ? {} : _feedItem$guideOrTuto;
34
- return /*#__PURE__*/_react.default.createElement(_Tutorial.default, {
35
- title: feedItem.title,
36
- href: createUrl(guideOrTutorial.slug, guideOrTutorial._type) || feedItem.externalLink,
37
- presenterSubtitle: subtitle,
38
- showPlayIcon: feedItem.hasVideo,
39
- posterURL: urlBuilder.image(feedItem.poster).height(360).url()
40
- });
41
- };
42
-
43
26
  var urlBuilder = _dataAdapter.default.urlBuilder,
44
27
  getFeed = _dataAdapter.default.getFeed;
45
28
 
@@ -66,7 +49,6 @@ class SanityTutorials extends _react.default.Component {
66
49
  var templateRepoId = this.props.templateRepoId;
67
50
  this.subscription = getFeed(templateRepoId).subscribe(response => {
68
51
  this.setState({
69
- title: response.title,
70
52
  feedItems: response.items
71
53
  });
72
54
  });
@@ -79,49 +61,44 @@ class SanityTutorials extends _react.default.Component {
79
61
  }
80
62
 
81
63
  render() {
82
- var _this$state = this.state,
83
- _this$state$title = _this$state.title,
84
- title = _this$state$title === void 0 ? 'Learn about Sanity' : _this$state$title,
85
- feedItems = _this$state.feedItems; // Filter out items and sections for layout purposes
86
-
87
- var sections = feedItems.filter(i => i._type === 'feedSection');
88
- var items = feedItems.filter(i => i._type === 'feedItem');
89
-
90
- var columns = length => length < 4 ? [1, 2, 3] : [1, 2, 3, 4];
91
-
92
- return /*#__PURE__*/_react.default.createElement(_ui.Container, {
93
- width: 4
94
- }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
95
- space: 5,
96
- paddingBottom: 4
97
- }, sections && (sections === null || sections === void 0 ? void 0 : sections.length) > 0 && sections.map(section => {
98
- var _section$sectionItems;
99
-
100
- return (section === null || section === void 0 ? void 0 : section.sectionItems) && /*#__PURE__*/_react.default.createElement(_ui.Stack, {
101
- space: 4,
102
- key: section._id
103
- }, /*#__PURE__*/_react.default.createElement(_ui.Heading, null, section.title), /*#__PURE__*/_react.default.createElement(_ui.Grid, {
104
- as: "ul",
105
- columns: columns(section === null || section === void 0 ? void 0 : (_section$sectionItems = section.sectionItems) === null || _section$sectionItems === void 0 ? void 0 : _section$sectionItems.length),
106
- gap: 4
107
- }, section === null || section === void 0 ? void 0 : section.sectionItems.map(item => /*#__PURE__*/_react.default.createElement(_ui.Flex, {
108
- as: "li",
109
- key: item._id
110
- }, /*#__PURE__*/_react.default.createElement(FeedItem, {
111
- feedItem: item
112
- })))));
113
- }), items && items.length > 0 && /*#__PURE__*/_react.default.createElement(_ui.Stack, {
114
- space: 4
115
- }, /*#__PURE__*/_react.default.createElement(_ui.Heading, null, title), /*#__PURE__*/_react.default.createElement(_ui.Grid, {
64
+ var feedItems = this.state.feedItems;
65
+ var title = 'Learn about Sanity';
66
+ return /*#__PURE__*/_react.default.createElement(_DashboardTool.DashboardWidget, {
67
+ header: title
68
+ }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
116
69
  as: "ul",
117
- columns: columns(items === null || items === void 0 ? void 0 : items.length),
118
- gap: 4
119
- }, items.map(feedItem => /*#__PURE__*/_react.default.createElement(_ui.Flex, {
120
- as: "li",
121
- key: feedItem.id
122
- }, /*#__PURE__*/_react.default.createElement(FeedItem, {
123
- feedItem: feedItem
124
- })))))));
70
+ overflow: "auto",
71
+ align: "stretch",
72
+ paddingY: 2
73
+ }, feedItems === null || feedItems === void 0 ? void 0 : feedItems.map((feedItem, index) => {
74
+ if (!feedItem.title || !feedItem.guideOrTutorial && !feedItem.externalLink) {
75
+ return null;
76
+ }
77
+
78
+ var presenter = feedItem.presenter || (0, _get2.default)(feedItem, 'guideOrTutorial.presenter') || {};
79
+ var subtitle = (0, _get2.default)(feedItem, 'category');
80
+ var _feedItem$guideOrTuto = feedItem.guideOrTutorial,
81
+ guideOrTutorial = _feedItem$guideOrTuto === void 0 ? {} : _feedItem$guideOrTuto;
82
+ return /*#__PURE__*/_react.default.createElement(_ui.Flex, {
83
+ as: "li",
84
+ key: feedItem._id,
85
+ paddingRight: index < (feedItems === null || feedItems === void 0 ? void 0 : feedItems.length) - 1 ? 1 : 3,
86
+ paddingLeft: index === 0 ? 3 : 0,
87
+ align: "stretch",
88
+ flex: "0 0 27.5%",
89
+ style: {
90
+ minWidth: 272,
91
+ width: '30%'
92
+ }
93
+ }, /*#__PURE__*/_react.default.createElement(_Tutorial.default, {
94
+ title: feedItem.title,
95
+ href: createUrl(guideOrTutorial.slug, guideOrTutorial._type) || feedItem.externalLink,
96
+ presenterName: presenter.name,
97
+ presenterSubtitle: subtitle,
98
+ showPlayIcon: feedItem.hasVideo,
99
+ posterURL: urlBuilder.image(feedItem.poster).height(360).url()
100
+ }));
101
+ })));
125
102
  }
126
103
 
127
104
  }
package/lib/widgets/sanityTutorials/Tutorial.js CHANGED
@@ -11,9 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
 
12
12
  var _ui = require("@sanity/ui");
13
13
 
14
+ var _icons = require("@sanity/icons");
15
+
14
16
  var _styledComponents = _interopRequireDefault(require("styled-components"));
15
17
 
16
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
17
19
 
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
21
 
@@ -21,32 +23,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
21
23
 
22
24
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
23
25
 
24
- // eslint-disable-next-line no-useless-escape
25
- var youtubeRegex = /youtu(?:.*\/v\/|.*v\=|\.be\/)([A-Za-z0-9_-]{11})/;
26
26
  var PlayIconBox = (0, _styledComponents.default)(_ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 2.75em;\n height: 2.75em;\n border-radius: 50%;\n background: ", ";\n opacity: 0.75;\n }\n"])), _ref => {
27
27
  var theme = _ref.theme;
28
28
  return theme.sanity.color.card.enabled.bg;
29
29
  });
30
30
  var Root = (0, _styledComponents.default)(_ui.Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:hover {\n ", " {\n &:before {\n opacity: 1;\n }\n }\n }\n"])), PlayIconBox);
31
- var PosterCard = (0, _styledComponents.default)(_ui.Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n padding-bottom: calc(9 / 16 * 100%);\n position: relative;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n"])));
32
-
33
- var Poster = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n display: block;\n border-radius: inherit;\n\n &:not([src]) {\n display: none;\n }\n"])));
34
-
35
- var YoutubeContainer = (0, _styledComponents.default)(_ui.Card)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n padding-bottom: 56.25%;\n overflow: hidden;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n\n iframe {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n"])));
36
-
37
- var YoutubeEmbed = _ref2 => {
38
- var embedId = _ref2.embedId;
39
- return /*#__PURE__*/_react.default.createElement(YoutubeContainer, {
40
- radius: 3
41
- }, /*#__PURE__*/_react.default.createElement("iframe", {
42
- width: "853",
43
- height: "480",
44
- src: "https://www.youtube.com/embed/".concat(embedId),
45
- frameBorder: "0",
46
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
47
- allowFullScreen: true
48
- }));
49
- };
31
+ var PosterCard = (0, _styledComponents.default)(_ui.Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: 100%;\n padding-bottom: calc(9 / 16 * 100%);\n position: relative;\n"])));
32
+
33
+ var Poster = _styledComponents.default.img(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: cover;\n display: block;\n\n &:not([src]) {\n display: none;\n }\n"])));
50
34
 
51
35
  class Tutorial extends _react.default.PureComponent {
52
36
  render() {
@@ -55,68 +39,56 @@ class Tutorial extends _react.default.PureComponent {
55
39
  posterURL = _this$props.posterURL,
56
40
  showPlayIcon = _this$props.showPlayIcon,
57
41
  href = _this$props.href,
42
+ presenterName = _this$props.presenterName,
58
43
  presenterSubtitle = _this$props.presenterSubtitle;
59
- var isYoutube = showPlayIcon && href && href.match(youtubeRegex);
60
- return isYoutube ? /*#__PURE__*/_react.default.createElement(_ui.Card, {
61
- space: 2,
62
- sizing: "border",
63
- flex: 1,
64
- radius: 3,
65
- style: {
66
- position: 'relative'
67
- },
68
- border: true,
69
- paddingBottom: 2
70
- }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
71
- space: 2,
72
- height: "fill"
73
- }, /*#__PURE__*/_react.default.createElement(YoutubeEmbed, {
74
- embedId: href.match(youtubeRegex)[1]
75
- }), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
76
- space: 3,
77
- flex: 1,
78
- padding: 2
79
- }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
80
- as: "h3",
81
- size: 1,
82
- weight: "bold"
83
- }, title), presenterSubtitle && /*#__PURE__*/_react.default.createElement(_ui.Text, {
84
- size: 1,
85
- muted: true
86
- }, presenterSubtitle)))) : /*#__PURE__*/_react.default.createElement(Root, {
44
+ return /*#__PURE__*/_react.default.createElement(Root, {
87
45
  flex: 1
88
46
  }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
89
47
  sizing: "border",
90
48
  flex: 1,
91
- radius: 3,
49
+ padding: 2,
50
+ radius: 2,
92
51
  as: "a",
93
52
  href: href,
94
53
  target: "_blank",
95
54
  rel: "noopener noreferrer",
96
55
  style: {
97
56
  position: 'relative'
98
- },
99
- border: true,
100
- paddingBottom: 2
101
- }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
102
- space: 2,
103
- height: "fill"
57
+ }
58
+ }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
59
+ direction: "column",
60
+ style: {
61
+ height: '100%'
62
+ }
104
63
  }, posterURL && /*#__PURE__*/_react.default.createElement(PosterCard, {
105
- radius: 3
64
+ marginBottom: 1
106
65
  }, /*#__PURE__*/_react.default.createElement(Poster, {
107
66
  src: posterURL
108
- })), /*#__PURE__*/_react.default.createElement(_ui.Stack, {
109
- space: 3,
110
- flex: 1,
111
- padding: 2
67
+ }), showPlayIcon && /*#__PURE__*/_react.default.createElement(PlayIconBox, {
68
+ display: "flex"
112
69
  }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
70
+ align: "center"
71
+ }, /*#__PURE__*/_react.default.createElement(_icons.PlayIcon, null)))), /*#__PURE__*/_react.default.createElement(_ui.Flex, {
72
+ direction: "column",
73
+ justify: "space-between",
74
+ paddingY: 2,
75
+ flex: 1
76
+ }, /*#__PURE__*/_react.default.createElement(_ui.Heading, {
113
77
  as: "h3",
114
- size: 1,
115
- weight: "bold"
116
- }, title), presenterSubtitle && /*#__PURE__*/_react.default.createElement(_ui.Text, {
117
- size: 1,
118
- muted: true
119
- }, presenterSubtitle)))));
78
+ size: 1
79
+ }, title), /*#__PURE__*/_react.default.createElement(_ui.Box, {
80
+ marginTop: 4
81
+ }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
82
+ space: 2,
83
+ flex: 1
84
+ }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
85
+ size: 1
86
+ }, presenterName), /*#__PURE__*/_react.default.createElement(_ui.Text, {
87
+ size: 0,
88
+ style: {
89
+ opacity: 0.7
90
+ }
91
+ }, presenterSubtitle)))))));
120
92
  }
121
93
 
122
94
  }
@@ -126,6 +98,7 @@ _defineProperty(Tutorial, "propTypes", {
126
98
  posterURL: _propTypes.default.string,
127
99
  href: _propTypes.default.string.isRequired,
128
100
  showPlayIcon: _propTypes.default.bool,
101
+ presenterName: _propTypes.default.string.isRequired,
129
102
  presenterSubtitle: _propTypes.default.string.isRequired
130
103
  });
131
104
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/dashboard",
3
- "version": "2.30.3-activation-dashboard.6+a02320d1f",
3
+ "version": "2.30.3-findability.52+335b7f9e1",
4
4
  "description": "Tool for rendering dashboard widgets",
5
5
  "main": "./lib/DashboardTool.js",
6
6
  "types": "./dist/dts",
@@ -22,13 +22,13 @@
22
22
  "dependencies": {
23
23
  "@sanity/icons": "^1.2.6",
24
24
  "@sanity/image-url": "^1.0.1",
25
- "@sanity/types": "2.30.3-activation-dashboard.6+a02320d1f",
25
+ "@sanity/types": "2.30.3-findability.52+335b7f9e1",
26
26
  "@sanity/ui": "^0.37.9",
27
27
  "lodash": "^4.17.15",
28
28
  "rxjs": "^6.5.3"
29
29
  },
30
30
  "devDependencies": {
31
- "@sanity/base": "2.30.3-activation-dashboard.6+a02320d1f",
31
+ "@sanity/base": "2.30.3-findability.52+335b7f9e1",
32
32
  "prop-types": "^15.6.0",
33
33
  "rimraf": "^2.7.1"
34
34
  },
@@ -47,5 +47,5 @@
47
47
  "url": "https://github.com/sanity-io/sanity/issues"
48
48
  },
49
49
  "homepage": "https://www.sanity.io/",
50
- "gitHead": "a02320d1f55cb9fff108846746d990123f69dac0"
50
+ "gitHead": "335b7f9e1a564c1b983aabd845f9b763d7367558"
51
51
  }