import React from 'react';
import styled from 'styled-components';
import { FadedScroll, List, ListItem, Typography } from '../..';
import docs from './FadedScroll.mdx';
export default {
  title: 'Atoms / FadedScroll',
  parameters: {
    docs: {
      page: docs
    }
  }
};
var FadedScrollWithHeightDesktopOnly = styled(FadedScroll).withConfig({
  displayName: "FadedScrollstories__FadedScrollWithHeightDesktopOnly",
  componentId: "sc-10jv1uc-0"
})(["", "{height:220px;}"], function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.md);
});
var FadedScrollWithHeight = styled(FadedScroll).withConfig({
  displayName: "FadedScrollstories__FadedScrollWithHeight",
  componentId: "sc-10jv1uc-1"
})(["height:220px;"]);
var StyledListItem = styled(ListItem).withConfig({
  displayName: "FadedScrollstories__StyledListItem",
  componentId: "sc-10jv1uc-2"
})(["padding:", "px;"], function (p) {
  return p.theme.spacing.unit(2);
});
var content = React.createElement(List, null, React.createElement(StyledListItem, null, React.createElement(Typography, null, "Lorem ipsum dolor sit amet")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Sed consequat erat lacinia")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Class aptent taciti sociosqu")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Aliquam bibendum tortor dui")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Quisque ac ullamcorper eros")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Etiam urna elit, mollis vel arcu id")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Sed consequat erat lacinia")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Aliquam bibendum tortor dui")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Lorem ipsum dolor sit amet")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Sed consequat erat lacinia")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Class aptent taciti sociosqu")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Aliquam bibendum tortor dui")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Quisque ac ullamcorper eros")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Etiam urna elit, mollis vel arcu id")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Sed consequat erat lacinia")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Aliquam bibendum tortor dui")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Lorem ipsum dolor sit amet")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Sed consequat erat lacinia")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Class aptent taciti sociosqu")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Aliquam bibendum tortor dui")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Quisque ac ullamcorper eros")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Etiam urna elit, mollis vel arcu id")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Sed consequat erat lacinia")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Aliquam bibendum tortor dui")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Lorem ipsum dolor sit amet")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Sed consequat erat lacinia")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Class aptent taciti sociosqu")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Aliquam bibendum tortor dui")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Quisque ac ullamcorper eros")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Etiam urna elit, mollis vel arcu id")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Sed consequat erat lacinia")), React.createElement(StyledListItem, null, React.createElement(Typography, null, "Aliquam bibendum tortor dui")));
export var DefaultStory = {
  render: function render() {
    return React.createElement(FadedScroll, {
      maxHeight: 40
    }, content);
  },
  name: 'Default, using maxHeight prop'
};
export var WithAutoHeightOfScrollableArea = {
  render: function render() {
    return React.createElement(FadedScrollWithHeightDesktopOnly, null, content);
  },
  name: 'With height of scrollable area being whatever is available'
};
export var WithHeightOfFadeChanged = {
  render: function render() {
    return React.createElement(FadedScroll, {
      fadeHeight: 5,
      maxHeight: 45
    }, content);
  },
  name: 'With height of fade changed'
};
export var WithMobileFadeEnabled = {
  render: function render() {
    return React.createElement(FadedScrollWithHeight, {
      enableMobileFade: true
    }, content);
  },
  name: 'With mobile fade enabled'
};
export var WithTopFadeDisabled = {
  render: function render() {
    return React.createElement(FadedScroll, {
      maxHeight: 45,
      disableTopFade: true
    }, content);
  },
  name: 'With top fade disabled'
};