@carbon/ibm-security/es/components/ScrollGradient/ScrollGradient-story.js

Carbon for Cloud & Cognitive IBM Security UI components

/**
 * @file Scroll gradient stories.
 * @copyright IBM Security 2019 - 2021
 */

import React from 'react';
import { storiesOf } from '@storybook/react';
import { color, boolean } from '@storybook/addon-knobs';
import { components } from '../../../.storybook';
import { ScrollGradient, theme } from '../..';
import { className, children } from './_mocks_';
import { InlineNotification } from '../../';
import { Grid } from 'carbon-components-react';
var gradientColor = theme.uiBackground;
var style = {
  width: '300px',
  height: '300px'
};
storiesOf(components('ScrollGradient#legacy'), module).addDecorator(function (Story) {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InlineNotification, {
    className: "page-layouts__banner",
    kind: "info",
    subtitle: "This component is now legacy.",
    title: "",
    hideCloseButton: true
  }), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Story, null)));
}).add('vertical scrolling', function () {
  return /*#__PURE__*/React.createElement(ScrollGradient, {
    color: color('color', gradientColor),
    style: style,
    className: className
  }, children);
}, {
  info: {
    text: "\n        Vertical implementation of scroll gradient component that adds and removes top and bottom fade outs based on scrolling position.\n      "
  }
}).add('horizontal scrolling', function () {
  return /*#__PURE__*/React.createElement(ScrollGradient, {
    color: color('color', gradientColor),
    style: style,
    className: className,
    direction: ScrollGradient.ScrollDirection.X
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: '200%'
    }
  }, children));
}, {
  info: {
    text: "\n        Horizontal implementation of scroll gradient component that adds and removes left and right fade outs based on scrolling position.\n      "
  }
}).add('with no start gradient', function () {
  return /*#__PURE__*/React.createElement(ScrollGradient, {
    color: color('color', gradientColor),
    hideStartGradient: boolean('hideStartGradient', true),
    style: style,
    className: className
  }, children);
}, {
  info: {
    text: "\n        Optionally hide start gradient on top or left depending on scroll direction.\n      "
  }
}).add('with no scrolling content', function () {
  return /*#__PURE__*/React.createElement(ScrollGradient, {
    color: color('color', gradientColor),
    style: style,
    className: className
  }, /*#__PURE__*/React.createElement("p", null, "Content fits completely within content area, so neither scrollbar nor scroll gradients are necessary."));
}, {
  info: {
    text: "\n        This component does not render gradients if the content can fit completely within the allowed area.\n      "
  }
}).add('with internal gradients', function () {
  return /*#__PURE__*/React.createElement(ScrollGradient, {
    color: color('color', gradientColor),
    style: style,
    className: className
  }, /*#__PURE__*/React.createElement("p", null, "Content before the scrollable element."), /*#__PURE__*/React.createElement(ScrollGradient, {
    color: color('child color (color)', gradientColor),
    style: {
      height: '6rem',
      margin: '1rem 0'
    }
  }, /*#__PURE__*/React.createElement("p", null, "Does not need to scroll so does not have a gradient.")), /*#__PURE__*/React.createElement("p", null, "Content after the scrollable element."), children);
}, {
  info: {
    text: "\n      This story demonstrates that the scroll gradient state of a parent does not affect the scroll state of a child scroll gradient.\n    "
  }
});