@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
90 lines (89 loc) • 3.54 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @file Header stories.
* @copyright IBM Security 2018
*/
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { object } from '@storybook/addon-knobs';
import { disableCenteredStories, patterns } from '../../../.storybook';
import Header from './';
import { labels, links, accounts, notifications, profile, profileWithAccount, profileWithAccountLongName } from './_mocks_';
import { InlineNotification, NotificationActionButton } from '../../';
import { Grid } from 'carbon-components-react';
var headerProps = {
labels: labels,
links: links
};
disableCenteredStories(storiesOf(patterns('Header#legacy'), module)).addDecorator(function (Story) {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Story, null)), /*#__PURE__*/React.createElement(InlineNotification, {
className: "page-layouts__banner",
actions: /*#__PURE__*/React.createElement(NotificationActionButton, {
href: "https://react.carbondesignsystem.com/?path=/story/components-ui-shell--header-base-w-actions",
rel: "noopener noreferrer",
target: "_blank"
}, "View replacement"),
kind: "info",
subtitle: "Pattern no longer supported. The pattern will remain available, but plan to migrate to the pattern replacement.",
title: "",
hideCloseButton: true,
style: {
display: 'block'
}
}));
}).add('default', function () {
return /*#__PURE__*/React.createElement(Header, headerProps);
}, {
info: {
text: "\n Basic implementation of the header.\n "
}
}).add('with active user', function () {
return /*#__PURE__*/React.createElement(Header, _extends({}, headerProps, {
profile: object('profile', profile)
}));
}, {
info: {
text: "\n Basic implementation of the header when a user is active.\n "
}
}).add('with notifications', function () {
return /*#__PURE__*/React.createElement(Header, _extends({}, headerProps, {
notifications: notifications,
onNotificationClear: action('onNotificationClear'),
profile: object('profile', profile),
totalNotifications: 307
}));
}, {
info: {
text: "\n Basic implementation of the header with notifications.\n "
}
}).add('with profile account', function () {
return /*#__PURE__*/React.createElement(Header, _extends({}, headerProps, {
onAccountClick: action('onAccountClick'),
profile: object('profile', profileWithAccount)
}));
}, {
info: {
text: "\n Basic implementation of the header with accounts.\n "
}
}).add('with account list', function () {
return /*#__PURE__*/React.createElement(Header, _extends({}, headerProps, {
accounts: object('accounts', accounts),
onAccountClick: action('onAccountClick'),
profile: object('profile', profileWithAccount)
}));
}, {
info: {
text: "\n Basic implementation of the header with accounts.\n "
}
}).add('with account list and long account name', function () {
return /*#__PURE__*/React.createElement(Header, _extends({}, headerProps, {
accounts: object('accounts', accounts),
onAccountClick: action('onAccountClick'),
profile: object('profile', profileWithAccountLongName)
}));
}, {
info: {
text: "\n Basic implementation of the header with accounts that have long truncated names.\n "
}
});