T282717 Add target stories for hyperlink, image and text (#119)

* Add target stories for hyperlink, image and text

* remove empty line

* call init() directly instead of mouseover listener

* rename stories name to Targets

.storybook/main.js

@@ -1,6 +1,7 @@
+const webpack = require('webpack')
 const path = require('path');
 
-const custom = require('../webpack.config.js')(null, {mode: 'dev'});
+const custom = require('../webpack.config.js')(null, {mode: 'development'});
 
 module.exports = {
   "stories": [
@@ -11,6 +12,18 @@ module.exports = {
     "@storybook/addon-essentials"
   ],
   webpackFinal: (config) => {
-    return { ...config, module: { ...config.module, rules: custom.module.rules } };
+    return {
+      ...config,
+      plugins: [
+        ...config.plugins,
+        new webpack.DefinePlugin( {
+          APP_VERSION: '"(mock app version)"',
+          GIT_HASH: '"(mock git hash)"'
+        } ) ],
+      module: {
+        ...config.module,
+        rules: custom.module.rules
+      }
+    };
   },
 }

src/stories/target.stories.js

@@ -0,0 +1,45 @@
+import { buildWikipediaUrl } from '../utils'
+import { init } from '../index'
+
+export default {
+	title: 'Targets',
+	argTypes: {
+		lang: {
+			name: 'Language',
+			defaultValue: 'en',
+			control: {
+				type: 'select',
+				options: [ 'en', 'fr', 'hi', 'ks', 'he' ]
+			}
+		},
+		title: {
+			name: 'Article Title',
+			defaultValue: 'Cat',
+			control: 'text'
+		}
+	}
+}
+
+export const Hyperlink = ( { lang, title } ) => {
+	const container = document.createElement( 'div' )
+	const template = `<a href="${buildWikipediaUrl( lang, title, true, false )}">${title} (${lang})</a>`
+	container.innerHTML = template
+	init( { root: container, detectLinks: true } )
+	return container
+}
+
+export const Image = ( { lang, title } ) => {
+	const container = document.createElement( 'div' )
+	const template = `<a href="${buildWikipediaUrl( lang, title, true, false )}"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Wikipedia-logo-v2.png"></a>`
+	container.innerHTML = template
+	init( { root: container, detectLinks: true } )
+	return container
+}
+
+export const Text = ( { lang, title } ) => {
+	const container = document.createElement( 'div' )
+	const template = `<span class="wmf-wp-with-preview" data-wikipedia-preview data-wp-title="${title}">${title} (${lang})</span>`
+	container.innerHTML = template
+	init( { root: container, lang } )
+	return container
+}