function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import styled from 'styled-components';
import { IconHome, IconLocalShipping, IconVerifiedUser, IconMessage, IconFeedback, IconSettings, IconGrain } from '@defencedigital/icon-library';
import { storyAccessibilityConfig } from '../../../a11y/storyAccessibilityConfig';
import { Sidebar, SidebarNav, SidebarNavItem, SidebarUser, SidebarWrapper } from '.';
import { Link } from '../../Link';
import { Notification, Notifications } from '../NotificationPanel';
var disableColorContrastRule = {
  a11y: {
    config: {
      rules: storyAccessibilityConfig.Sidebar
    }
  }
};
export default {
  component: Sidebar,
  subcomponents: {
    SidebarNav: SidebarNav,
    SidebarNavItem: SidebarNavItem,
    SidebarUser: SidebarUser,
    SidebarWrapper: SidebarWrapper,
    Notifications: Notifications,
    Notification: Notification
  },
  title: 'Sidebar',
  parameters: {
    actions: {
      argTypesRegex: '^on.*'
    },
    layout: 'fullscreen'
  }
};
var StyledSidebar = styled(Sidebar).withConfig({
  displayName: "Sidebarstories__StyledSidebar",
  componentId: "sc-15ym0dn-0"
})(["max-height:30rem;"]);
var StyledMain = styled.main.withConfig({
  displayName: "Sidebarstories__StyledMain",
  componentId: "sc-15ym0dn-1"
})(["padding:2rem;background-color:#c9c9c9;width:100%;"]);
var SimpleSidebarNav = function SimpleSidebarNav() {
  return /*#__PURE__*/React.createElement(SidebarNav, null, /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconHome, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Dashboard")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconVerifiedUser, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Reports")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconLocalShipping, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Platforms")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconFeedback, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Data\xA0Feed")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    isActive: true,
    icon: /*#__PURE__*/React.createElement(IconMessage, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Messages")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconSettings, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Settings")
  }));
};
export var Default = function Default(props) {
  return /*#__PURE__*/React.createElement(SidebarWrapper, null, /*#__PURE__*/React.createElement(StyledSidebar, props, /*#__PURE__*/React.createElement(SimpleSidebarNav, null)), /*#__PURE__*/React.createElement(StyledMain, null, "Hello, World!"));
};
Default.args = {};
export var InitiallyOpen = function InitiallyOpen(props) {
  return /*#__PURE__*/React.createElement(SidebarWrapper, null, /*#__PURE__*/React.createElement(StyledSidebar, _extends({}, props, {
    initialIsOpen: true
  }), /*#__PURE__*/React.createElement(SimpleSidebarNav, null)), /*#__PURE__*/React.createElement(StyledMain, null, "Hello, World!"));
};
InitiallyOpen.args = {};
InitiallyOpen.parameters = disableColorContrastRule;
InitiallyOpen.storyName = 'Initially open';
export var WithSubNavigation = function WithSubNavigation(props) {
  var sidebarNavWithSub = /*#__PURE__*/React.createElement(SidebarNav, null, /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconHome, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Dashboard")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconVerifiedUser, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Reports")
  }, /*#__PURE__*/React.createElement(SidebarNav, null, /*#__PURE__*/React.createElement(SidebarNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Sub-nav-item 1")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Sub-nav-item 2")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Sub-nav-item 3")
  }))), /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconLocalShipping, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Platforms")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconFeedback, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Data\xA0Feed")
  }, /*#__PURE__*/React.createElement(SidebarNav, null, /*#__PURE__*/React.createElement(SidebarNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Sub-nav-item 1")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Sub-nav-item 2")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Sub-nav-item 3")
  }))), /*#__PURE__*/React.createElement(SidebarNavItem, {
    isActive: true,
    icon: /*#__PURE__*/React.createElement(IconMessage, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Messages")
  }, /*#__PURE__*/React.createElement(SidebarNav, null, /*#__PURE__*/React.createElement(SidebarNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Sub-nav-item 1")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Sub-nav-item 2")
  }), /*#__PURE__*/React.createElement(SidebarNavItem, {
    isActive: true,
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Sub-nav-item 3")
  }))), /*#__PURE__*/React.createElement(SidebarNavItem, {
    icon: /*#__PURE__*/React.createElement(IconSettings, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Settings")
  }));
  return /*#__PURE__*/React.createElement(SidebarWrapper, null, /*#__PURE__*/React.createElement(StyledSidebar, props, sidebarNavWithSub), /*#__PURE__*/React.createElement(StyledMain, null, "Hello, World!"));
};
WithSubNavigation.storyName = 'With sub-navigation';
export var WithHeader = function WithHeader(props) {
  return /*#__PURE__*/React.createElement(SidebarWrapper, null, /*#__PURE__*/React.createElement(StyledSidebar, _extends({}, props, {
    icon: /*#__PURE__*/React.createElement(IconGrain, null),
    title: "Application Name"
  }), /*#__PURE__*/React.createElement(SimpleSidebarNav, null)), /*#__PURE__*/React.createElement(StyledMain, null, "Hello, World!"));
};
WithHeader.storyName = 'With header';
export var WithUserMenu = function WithUserMenu(props) {
  var userWithLinks = /*#__PURE__*/React.createElement(SidebarUser, {
    initials: "HN",
    name: "Horatio Nelson",
    userLink: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Profile"),
    exitLink: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Logout")
  });
  return /*#__PURE__*/React.createElement(SidebarWrapper, null, /*#__PURE__*/React.createElement(StyledSidebar, _extends({}, props, {
    user: userWithLinks
  }), /*#__PURE__*/React.createElement(SimpleSidebarNav, null)), /*#__PURE__*/React.createElement(StyledMain, null, "Hello, World!"));
};
WithUserMenu.storyName = 'With user menu';
var WithNotificationsTemplate = function WithNotificationsTemplate(props) {
  var notifications = /*#__PURE__*/React.createElement(Notifications, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    })
  }, /*#__PURE__*/React.createElement(Notification, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    name: "Thomas Stephens",
    action: "added a new comment to your",
    on: "review",
    when: new Date('2019-11-05T14:25:02.178Z'),
    description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
  }), /*#__PURE__*/React.createElement(Notification, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    name: "Thomas Stephens",
    action: "added a new comment to your",
    on: "review",
    when: new Date('2019-11-01T14:25:02.178Z'),
    description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
  }), /*#__PURE__*/React.createElement(Notification, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    name: "Thomas Stephens",
    action: "added a new comment to your",
    on: "review",
    when: new Date('2019-11-01T14:25:02.178Z'),
    description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
  }));
  return /*#__PURE__*/React.createElement(SidebarWrapper, null, /*#__PURE__*/React.createElement(StyledSidebar, _extends({}, props, {
    notifications: notifications,
    hasUnreadNotification: true
  }), /*#__PURE__*/React.createElement(SimpleSidebarNav, null)), /*#__PURE__*/React.createElement(StyledMain, null, "Hello, World!"));
};
export var WithNotifications = WithNotificationsTemplate.bind({});
WithNotifications.storyName = 'With notifications';
export var WithUserMenuOpen = function WithUserMenuOpen(props) {
  var userWithLinks = /*#__PURE__*/React.createElement(SidebarUser, {
    initials: "HN",
    name: "Horatio Nelson",
    userLink: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Profile"),
    exitLink: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Logout"),
    initialIsOpen: true
  });
  return /*#__PURE__*/React.createElement(SidebarWrapper, null, /*#__PURE__*/React.createElement(StyledSidebar, _extends({}, props, {
    user: userWithLinks
  }), /*#__PURE__*/React.createElement(SimpleSidebarNav, null)), /*#__PURE__*/React.createElement(StyledMain, null, "Hello, World!"));
};
WithUserMenuOpen.parameters = {
  docs: {
    disable: true
  }
};
WithUserMenuOpen.storyName = 'With user menu open';
export var WithNotificationsOpen = WithNotifications.bind({});
WithNotificationsOpen.args = {
  initialIsNotificationsOpen: true
};
WithNotificationsOpen.parameters = {
  docs: {
    disable: true
  }
};
WithNotificationsOpen.storyName = 'With notifications open';