mediawiki-skins-Vector/stories/SearchBox.stories.js

import mustache from 'mustache';
import '../resources/skins.vector.styles/SearchBox.less';
import '../resources/skins.vector.styles/layouts/screen.less';
import { searchBoxData, legacySearchBoxData, searchBoxTemplate } from './SearchBox.stories.data';

export default {
	title: 'SearchBox'
};

export const legacySimpleSearch = () => `
	${mustache.render( searchBoxTemplate, legacySearchBoxData )}
`;

export const simpleSearch = () => `
	${mustache.render( searchBoxTemplate, searchBoxData )}
`;
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746 2020-01-09 22:11:00 +00:00			`import mustache from 'mustache';`
Isolate Vector Styles to their Respective Component This will help with the encapsulation/reusability of each component. * Stylesheets were renamed to reflect their respective component name (e.g. search.less became SearchBox.less) * Styles were isolated to each component: * navigation.less now only contains classes that are relevant to Navigation.mustache. * personalNavigation.less, search.less, and tabs.less imports were removed and made first-class styles. * several selectors were moved into common.less * #p-logo was moved into sidebar * tabs.less was renamed to VectorTabs.less and styles specific to VectorMenu.less were put into VectorMenu.less * Storybook was updated to reflect changes Bug: T243281 Change-Id: Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619 2020-02-28 20:06:33 +00:00			`import '../resources/skins.vector.styles/SearchBox.less';`
Update UserLinks and SearchBox storybook stories to match prod - Update UserLinks data to wrap link content with spans and other markup changes - Use UserLinks__login.mustache and UserLinks__logout.mustache for rendering UserLink stories - Add new SearchBox story to account for search collapse behavior in modern Vector Change-Id: Ib0abce31db60a0c5c88dea17085e2974ac5112b5 2021-07-22 17:27:33 +00:00			`import '../resources/skins.vector.styles/layouts/screen.less';`
			`import { searchBoxData, legacySearchBoxData, searchBoxTemplate } from './SearchBox.stories.data';`
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746 2020-01-09 22:11:00 +00:00
			`export default {`
Rename Storybook Files to Reflect Their Respective Component * Following up on the work from Idf90ee2a0f1c1d08a31cf50099c0bebc7b67e619, this commit renames the storybook files/storybook names to their respective component name. e.g. personalNavigation.stories.js => PersonalMenu.stories.js Bug: T243281 Change-Id: I68054663c5a597f90a826b6f75bf399382dca609 2020-02-28 22:17:31 +00:00			`title: 'SearchBox'`
Add storybook to Vector - Update package.json with the new dependencies. - A script storybook.sh pulls down CSS and LESS imports from external dependencies. This copies the approach taken in Popups and MobileFrontend. - Icons from external repos are maintained within the repo in SVG-only form. Using load.php modules is also possible, but will pull down other unnecessary icons and break if any of these modules are changed. Decided that we should manually maintain these for the time being given there are only 3 icons. - Several LESS files now import the variables file. I think it's useful for stories to only import the CSS they use as this encourages us to modularise our CSS. Before these imports were not necessary as they inherit imports from index.less. This will have no impact on the bundle size as the LESS compiler silently discards duplicate imports - stories/utils.js provides a useful placeholder function for generalising our hook entry points. Bug: T242674 Change-Id: I722e84d2fb57653a2f96142dc3e5248043261746 2020-01-09 22:11:00 +00:00			`};`

Update UserLinks and SearchBox storybook stories to match prod - Update UserLinks data to wrap link content with spans and other markup changes - Use UserLinks__login.mustache and UserLinks__logout.mustache for rendering UserLink stories - Add new SearchBox story to account for search collapse behavior in modern Vector Change-Id: Ib0abce31db60a0c5c88dea17085e2974ac5112b5 2021-07-22 17:27:33 +00:00			export const legacySimpleSearch = () => `
			`${mustache.render( searchBoxTemplate, legacySearchBoxData )}`
			`;

			export const simpleSearch = () => `
Remove user links feature flag Update/remove config, constants, hooks, templates, styles, logic, tests, stories to check legacy vs modern Vector where applicable instead of the decommissioned user links feature flag. Bug: T288852 Change-Id: I5c5831091a10711838a8a2877c782df4996d4596 2021-08-24 21:34:59 +00:00			`${mustache.render( searchBoxTemplate, searchBoxData )}`
Update UserLinks and SearchBox storybook stories to match prod - Update UserLinks data to wrap link content with spans and other markup changes - Use UserLinks__login.mustache and UserLinks__logout.mustache for rendering UserLink stories - Add new SearchBox story to account for search collapse behavior in modern Vector Change-Id: Ib0abce31db60a0c5c88dea17085e2974ac5112b5 2021-07-22 17:27:33 +00:00			`;