registers-react-library
Version:
A library of React components for ONS registers projects, using the external ONS pattern library.
215 lines (198 loc) • 11.2 kB
JavaScript
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(['module', 'react', '@storybook/react', '@storybook/addon-info', '../components/Header', '../components/Footer', '../components/NavBar', '../components/BreadCrumb', '../components/Button', '../components/Banner', '../components/TitleAndDescription', './ons_css.css'], factory);
} else if (typeof exports !== "undefined") {
factory(module, require('react'), require('@storybook/react'), require('@storybook/addon-info'), require('../components/Header'), require('../components/Footer'), require('../components/NavBar'), require('../components/BreadCrumb'), require('../components/Button'), require('../components/Banner'), require('../components/TitleAndDescription'), require('./ons_css.css'));
} else {
var mod = {
exports: {}
};
factory(mod, global.react, global.react, global.addonInfo, global.Header, global.Footer, global.NavBar, global.BreadCrumb, global.Button, global.Banner, global.TitleAndDescription, global.ons_css);
global.index = mod.exports;
}
})(this, function (module, _react, _react3, _addonInfo, _Header, _Footer, _NavBar, _BreadCrumb, _Button, _Banner, _TitleAndDescription) {
'use strict';
var _react2 = _interopRequireDefault(_react);
var _Header2 = _interopRequireDefault(_Header);
var _Footer2 = _interopRequireDefault(_Footer);
var _NavBar2 = _interopRequireDefault(_NavBar);
var _BreadCrumb2 = _interopRequireDefault(_BreadCrumb);
var _Button2 = _interopRequireDefault(_Button);
var _Banner2 = _interopRequireDefault(_Banner);
var _TitleAndDescription2 = _interopRequireDefault(_TitleAndDescription);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
(0, _react3.storiesOf)('Full Page Examples', module).add('full page', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(_Banner2.default, {
text: 'ALPHA',
message: 'this release is still in development.'
}),
_react2.default.createElement(
_Header2.default,
{
showHeaderItems: true,
headerLinks: [{ text: 'User Details', link: '/UserDetails' }, { text: 'Information', link: '/TechnicalInformation' }],
imageUrl: '/Home'
},
_react2.default.createElement(_Button2.default, {
id: 'logoutButton',
size: 'thin',
text: 'Logout',
onClick: function onClick() {
return alert('Clicked logout button...');
},
ariaLabel: 'Logout Button',
type: 'submit'
})
),
_react2.default.createElement(_NavBar2.default, {
primary: '/Home',
navBarItems: [{ text: 'Home', link: '/Home' }, { text: 'Search', link: '/RefSearch' }]
}),
_react2.default.createElement(_BreadCrumb2.default, {
breadCrumbItems: [{ name: 'Home', link: '/Home' }, { name: 'Accessibility', link: '' }]
}),
_react2.default.createElement(_TitleAndDescription2.default, {
title: 'Accessibility',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at lectus dapibus, interdum massa in, vehicula augue. Ut non congue elit. Donec eget imperdiet nulla, vel tincidunt metus. Nunc tempus lectus id volutpat ornare. Quisque auctor massa ante, vitae viverra ipsum rhoncus nec. Morbi non lectus varius, iaculis augue vel, laoreet arcu. Vivamus rutrum congue tempus. Duis turpis massa, viverra id mattis eget, auctor id augue. Sed luctus at nisl nec posuere. Praesent eu varius sem. Morbi elementum mauris id ligula pulvinar, sed iaculis ipsum luctus.',
marginBottom: 1
}),
_react2.default.createElement(_Footer2.default, {
footerSection: [{ title: 'Help', items: [{ text: 'Accessibility', link: '/Accessibility' }, { text: 'Search History', link: '/SearchHistory' }] }, { title: 'About SBR', items: [{ text: 'What is SBR', link: '/WhatIsSbr' }] }, { title: 'Connect with us', items: [{ text: 'statistical.business.register@ons.gov.uk', emailHref: 'mailto:statistical.business.register@ons.gov.uk?subject=SBR&body=message%20goes%20here' }] }]
})
);
}));
(0, _react3.storiesOf)('Header', module).add('with links (when logged in)', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Header2.default, {
showHeaderItems: true,
headerLinks: [{ text: 'User Details', link: '/UserDetails' }, { text: 'Information', link: '/TechnicalInformation' }],
imageUrl: '/Home'
});
})).add('with links + button (when logged in)', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(
_Header2.default,
{
showHeaderItems: true,
headerLinks: [{ text: 'User Details', link: '/UserDetails' }, { text: 'Information', link: '/TechnicalInformation' }],
imageUrl: '/Home'
},
_react2.default.createElement(_Button2.default, {
id: 'logoutButton',
size: 'thin',
text: 'Logout',
onClick: function onClick() {
return alert('Clicked logout button...');
},
ariaLabel: 'Logout Button',
type: 'submit'
})
);
})).add('without links (not logged in)', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Header2.default, {
showHeaderItems: false,
imageUrl: '/Home'
});
}));
(0, _react3.storiesOf)('Footer', module).add('links and email section', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Footer2.default, {
footerSection: [{ title: 'Help', items: [{ text: 'Accessibility', link: '/Accessibility' }, { text: 'Search History', link: '/SearchHistory' }] }, { title: 'About SBR', items: [{ text: 'What is SBR', link: '/WhatIsSbr' }] }, { title: 'Connect with us', items: [{ text: 'statistical.business.register@ons.gov.uk', emailHref: 'mailto:statistical.business.register@ons.gov.uk?subject=SBR&body=message%20goes%20here' }] }]
});
})).add('just links', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Footer2.default, {
footerSection: [{ title: 'Help', items: [{ text: 'Accessibility', link: '/Accessibility' }, { text: 'Search History', link: '/SearchHistory' }] }, { title: 'Support', items: [{ text: 'Support', link: '/Support' }] }, { title: 'Features', items: [{ text: 'Reference Search', link: '/RefSearch' }] }]
});
}));
(0, _react3.storiesOf)('NavBar', module).add('with normal links', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_NavBar2.default, {
primary: '/Home',
navBarItems: [{ text: 'Home', link: '/Home' }, { text: 'Search', link: '/RefSearch' }]
});
})).add('with normal and dropdown links', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_NavBar2.default, {
primary: '/Home',
navBarItems: [{ text: 'Home', link: '/Home' }, { text: 'Search', link: '/Search' }, { text: 'Unit Search', link: '/RefSearch', items: [{ text: 'Enterprise', link: '/Enterprise' }, { text: 'Legal Unit', link: '/LegalUnit' }, { text: 'VAT', link: '/VAT' }] }]
});
}));
(0, _react3.storiesOf)('BreadCrumb', module).add('with mix of links and text', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_BreadCrumb2.default, {
breadCrumbItems: [{ name: 'Home', link: '/Home' }, { name: 'Enterprise', link: '' }, { name: '123456789', link: '/Enterprises/123456789' }, { name: 'Legal Unit', link: '' }, { name: '987654321', link: '/LegalUnits/987654321' }]
});
})).add('with just text', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_BreadCrumb2.default, {
breadCrumbItems: [{ name: 'Home', link: '' }, { name: 'Reference Search', link: '' }]
});
})).add('with just links', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_BreadCrumb2.default, {
breadCrumbItems: [{ name: 'Home', link: '/Home' }, { name: 'Reference Search', link: '/RefSearch' }]
});
}));
(0, _react3.storiesOf)('Button', module).add('normal button', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Button2.default, {
id: 'loginButton',
size: 'wide',
text: 'Login',
onClick: function onClick() {
return alert('Clicked login button...');
},
ariaLabel: 'Login Button',
type: 'submit'
});
})).add('thin button', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Button2.default, {
id: 'loginButton',
size: 'thin',
text: 'Login',
onClick: function onClick() {
return alert('Clicked login button...');
},
ariaLabel: 'Login Button',
type: 'submit'
});
})).add('button with loading spinner', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Button2.default, {
id: 'loginButton',
size: 'wide',
text: 'Login',
onClick: function onClick() {
return alert('Clicked login button...');
},
ariaLabel: 'Login Button',
type: 'submit',
loading: true
});
}));
(0, _react3.storiesOf)('Banner', module).add('alpha banner with message', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Banner2.default, {
text: 'ALPHA',
message: 'this release is still in development.'
});
})).add('beta banner', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Banner2.default, {
text: 'BETA'
});
})).add('alpha banner with message and custom colour', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_Banner2.default, {
text: 'ALPHA',
message: 'this release is still in development.',
backgroundColour: '#D32F2F'
});
}));
(0, _react3.storiesOf)('Title and Description', module).add('Title with description and margin bottom', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_TitleAndDescription2.default, {
title: 'Accessibility',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at lectus dapibus, interdum massa in, vehicula augue. Ut non congue elit. Donec eget imperdiet nulla, vel tincidunt metus. Nunc tempus lectus id volutpat ornare. Quisque auctor massa ante, vitae viverra ipsum rhoncus nec. Morbi non lectus varius, iaculis augue vel, laoreet arcu. Vivamus rutrum congue tempus. Duis turpis massa, viverra id mattis eget, auctor id augue. Sed luctus at nisl nec posuere. Praesent eu varius sem. Morbi elementum mauris id ligula pulvinar, sed iaculis ipsum luctus.',
marginBottom: '1'
});
})).add('Title and no description', (0, _addonInfo.withInfo)()(function () {
return _react2.default.createElement(_TitleAndDescription2.default, {
title: 'Accessibility',
marginBottom: '0'
});
}));
});