mediawiki-skins-Vector/stories/Logo.stories.data.js
Jan Drewniak 6907c81a15 [Storybook] Fix PNG/SVG asset resolution.
Fixes the missing images in the Logo story.

The current method of downloading the images into
docs/ui/assets and treating them as static assets
(with the start-storybook -s option) could be problematic
if that directory is deleted or "cleaned" before the
storybook build.

Instead, the images are now downloaded into
./storybook/resolve-imports and imported explicitly in the
code in Logo.stories.data.js.

* ./storybook/resolve-less-imports renamed to resolve-imports
* .gitignore is updated to reflect that
* Webpack config is updated with the `resolve-imports` path
* static option (-s) is removed from npm start script
* Images are explicitly imported in Logo.stories.data.js
* Type definitions are added for .svg and .png files

Change-Id: I242d229242c86a5784d6d4611d0b9c7049712dac
2020-09-25 12:52:05 +02:00

87 lines
1.5 KiB
JavaScript

/**
* @external LogoOptions
* @external LogoTemplateData
*/
import logoTemplate from '!!raw-loader!../includes/templates/Logo.mustache';
import wordmarkSrc from '../.storybook/resolve-imports/assets/wordmark.svg';
import tagelineScr from '../.storybook/resolve-imports/assets/tagline.svg';
import iconSrc from '../.storybook/resolve-imports/assets/icon.png';
/**
* @type {LogoOptions}
*/
const wordmark = {
src: wordmarkSrc,
width: 116,
height: 18
};
/**
* @type {LogoOptions}
*/
const tagline = {
src: tagelineScr,
width: 117,
height: 13
};
/**
* @type {string}
*/
const icon = iconSrc;
/**
* @type {LogoTemplateData}
*/
const wordmarkTaglineIcon = {
'data-logos': {
wordmark, tagline, icon
},
'msg-sitetitle': 'Wikipedia',
'msg-sitesubtitle': 'the free encyclopedia'
};
/**
* @type {LogoTemplateData}
*/
const wordmarkIcon = {
'data-logos': {
wordmark, icon
},
'msg-sitetitle': 'Wikipedia',
'msg-sitesubtitle': 'the free encyclopedia'
};
/**
* @type {LogoTemplateData}
*/
const wordmarkOnly = {
'data-logos': {
wordmark
},
'msg-sitetitle': 'Wikipedia',
'msg-sitesubtitle': 'the free encyclopedia'
};
/**
* @type {LogoTemplateData}
*/
const noLogo = {
'data-logos': {},
'msg-sitetitle': 'Wikipedia',
'msg-sitesubtitle': 'the free encyclopedia'
};
/**
* @type {Object.<string, LogoTemplateData>}
*/
const LOGO_TEMPLATE_DATA = {
wordmarkTaglineIcon,
wordmarkIcon,
wordmarkOnly,
noLogo
};
export { LOGO_TEMPLATE_DATA, logoTemplate };