diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 9ff4ead42b382166655a48335ced57026dee7ee3..145eab3d7d6dcfa5f1f89948fc73463bee33bc6e 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -98,7 +98,10 @@ class LibraryComponent extends React.Component {
(dataItem.tags || [])
// Second argument to map sets `this`
.map(String.prototype.toLowerCase.call, String.prototype.toLowerCase)
- .concat(dataItem.name.toLowerCase())
+ .concat((typeof dataItem.name === 'string' ?
+ // Use the name if it is a string, else use formatMessage to get the translated name
+ dataItem.name : this.props.intl.formatMessage(dataItem.name.props)
+ ).toLowerCase())
.join('\n') // unlikely to partially match newlines
.indexOf(this.state.filterQuery.toLowerCase()) !== -1
));
diff --git a/src/containers/tips-library.jsx b/src/containers/tips-library.jsx
index 009c8c2fae9f3c9e0f3fd9f0cd3bcac04ca44acc..09e34f7faf8633026232a1fb350f191abf12fe3d 100644
--- a/src/containers/tips-library.jsx
+++ b/src/containers/tips-library.jsx
@@ -4,6 +4,7 @@ import React from 'react';
import {injectIntl, intlShape, defineMessages} from 'react-intl';
import decksLibraryContent from '../lib/libraries/decks/index.jsx';
+import tutorialTags from '../lib/libraries/tutorial-tags';
import analytics from '../lib/analytics';
import LibraryComponent from '../components/library/library.jsx';
@@ -46,15 +47,17 @@ class TipsLibrary extends React.PureComponent {
rawURL: decksLibraryContent[id].img,
id: id,
name: decksLibraryContent[id].name,
- featured: true
+ featured: true,
+ tags: decksLibraryContent[id].tags
}));
if (!this.props.visible) return null;
return (
<LibraryComponent
+ filterable
data={decksLibraryThumbnailData}
- filterable={false}
id="tipsLibrary"
+ tags={tutorialTags}
title={this.props.intl.formatMessage(messages.tipsLibraryTitle)}
visible={this.props.visible}
onItemSelected={this.handleItemSelect}
diff --git a/src/lib/libraries/decks/index.jsx b/src/lib/libraries/decks/index.jsx
index 179666ff494a016030895743508d70422db18d4a..51709a839aff3109a42e72bbb90b64c8f79f5353 100644
--- a/src/lib/libraries/decks/index.jsx
+++ b/src/lib/libraries/decks/index.jsx
@@ -71,7 +71,7 @@ export default {
id="gui.howtos.intro-move-sayhello-hat.name"
/>
),
-
+ tags: ['help', 'stuck', 'how', 'can', 'say'],
img: libraryIntro,
steps: [{
video: 'intro-move-sayhello'
@@ -111,6 +111,7 @@ export default {
/>
),
img: libraryAnimate,
+ tags: ['animation', 'art', 'spin', 'grow'],
steps: [{
video: 'animate-a-name'
}, {
@@ -185,6 +186,7 @@ export default {
/>
),
img: libraryMakeMusic,
+ tags: ['music', 'sound', 'instrument', 'play', 'song', 'band'],
steps: [{
video: 'Make-Music'
},
@@ -253,6 +255,7 @@ export default {
/>
),
img: libraryMakeAGame,
+ tags: ['games', 'click', 'clicked', 'score'],
steps: [{
video: 'Make-A-Game'
},
@@ -339,6 +342,7 @@ export default {
/>
),
img: libraryChaseGame,
+ tags: ['games', 'arrow', 'keyboard', 'score'],
steps: [{
video: 'Chase-Game'
},
@@ -441,6 +445,7 @@ export default {
/>
),
img: libraryAddSprite,
+ tags: ['art', 'games', 'stories', 'character'],
steps: [
{
title: (
@@ -470,6 +475,7 @@ export default {
/>
),
img: addBackdropThumb,
+ tags: ['art', 'games', 'stories', 'background'],
steps: [{
video: 'add-a-backdrop'
}, {
@@ -489,6 +495,7 @@ export default {
/>
),
img: changeSizeThumb,
+ scale: ['art', 'animation', 'scale'],
steps: [{
video: 'change-size'
}, {
@@ -508,6 +515,7 @@ export default {
/>
),
img: glideAroundThumb,
+ tags: ['animation', 'stories', 'music', 'instrument', 'play', 'song', 'band'],
steps: [{
video: 'glide-around'
}, {
@@ -527,6 +535,7 @@ export default {
id="gui.howtos.record-a-sound.name"
/>
),
+ tags: ['music', 'games', 'stories'],
img: recordASound,
steps: [{
video: 'record-a-sound'
@@ -547,6 +556,7 @@ export default {
/>
),
img: spinThumb,
+ tags: ['animation', 'rotate', 'rotation'],
steps: [{
video: 'spin-video'
}, {
@@ -566,6 +576,7 @@ export default {
/>
),
img: hideAndShowThumb,
+ tags: ['stories', 'appear', 'disappear'],
steps: [{
video: 'hide-and-show'
}, {
@@ -586,6 +597,7 @@ export default {
/>
),
img: switchCostumeThumb,
+ tags: ['animation', 'art', 'games', 'stories', 'paint', 'edit', 'change', 'character', 'sprite'],
steps: [{
video: 'switch-costume'
}, {
@@ -606,6 +618,7 @@ export default {
/>
),
img: moveArrowKeysThumb,
+ tags: ['games', 'keyboard'],
steps: [{
video: 'move-around-with-arrow-keys'
}, {
@@ -624,6 +637,8 @@ export default {
id="gui.howtos.add-effects.name"
/>
),
+ tags: ['animation', 'art', 'games', 'stories', '8-bit', 'brightness', 'ghost', 'transparency', 'opacity',
+ 'fx', 'color', 'fisheye', 'whirl', 'twist', 'pixelate', 'mosaic', '8bit'],
img: addEffectsThumb,
steps: [{
video: 'add-effects'
diff --git a/src/lib/libraries/tag-messages.js b/src/lib/libraries/tag-messages.js
index 60a6d13fc504d8745205db7be798c8ffd4f526b3..144e04a94edb186c25d18272610792429f5a2e6d 100644
--- a/src/lib/libraries/tag-messages.js
+++ b/src/lib/libraries/tag-messages.js
@@ -100,5 +100,25 @@ export default defineMessages({
defaultMessage: 'Wacky',
description: 'Tag for filtering a library for wacky',
id: 'gui.libraryTags.wacky'
+ },
+ animation: {
+ defaultMessage: 'Animation',
+ description: 'Tag for filtering a library for animation',
+ id: 'gui.libraryTags.animation'
+ },
+ art: {
+ defaultMessage: 'Art',
+ description: 'Tag for filtering a library for art',
+ id: 'gui.libraryTags.art'
+ },
+ games: {
+ defaultMessage: 'Games',
+ description: 'Tag for filtering a library for games',
+ id: 'gui.libraryTags.games'
+ },
+ stories: {
+ defaultMessage: 'Stories',
+ description: 'Tag for filtering a library for stories',
+ id: 'gui.libraryTags.stories'
}
});
diff --git a/src/lib/libraries/tutorial-tags.js b/src/lib/libraries/tutorial-tags.js
new file mode 100644
index 0000000000000000000000000000000000000000..85db3d17ef4cb541562f87f33fc987bab5f29fc6
--- /dev/null
+++ b/src/lib/libraries/tutorial-tags.js
@@ -0,0 +1,8 @@
+import messages from './tag-messages.js';
+export default [
+ {tag: 'animation', intlLabel: messages.animation},
+ {tag: 'art', intlLabel: messages.art},
+ {tag: 'music', intlLabel: messages.music},
+ {tag: 'games', intlLabel: messages.games},
+ {tag: 'stories', intlLabel: messages.stories}
+];