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

Carbon for Cloud & Cognitive IBM Security UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _addonKnobs = require("@storybook/addon-knobs");
var _storybook = require("../../../.storybook");
var _ = require("../..");
var _mocks_ = require("./_mocks_");
var _2 = require("../../");
var _carbonComponentsReact = require("carbon-components-react");
/**
 * @file Scroll gradient stories.
 * @copyright IBM Security 2019 - 2021
 */

var gradientColor = _.theme.uiBackground;
var style = {
  width: '300px',
  height: '300px'
};
(0, _react2.storiesOf)((0, _storybook.components)('ScrollGradient#legacy'), module).addDecorator(function (Story) {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_2.InlineNotification, {
    className: "page-layouts__banner",
    kind: "info",
    subtitle: "This component is now legacy.",
    title: "",
    hideCloseButton: true
  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(Story, null)));
}).add('vertical scrolling', function () {
  return /*#__PURE__*/_react.default.createElement(_.ScrollGradient, {
    color: (0, _addonKnobs.color)('color', gradientColor),
    style: style,
    className: _mocks_.className
  }, _mocks_.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.default.createElement(_.ScrollGradient, {
    color: (0, _addonKnobs.color)('color', gradientColor),
    style: style,
    className: _mocks_.className,
    direction: _.ScrollGradient.ScrollDirection.X
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: '200%'
    }
  }, _mocks_.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.default.createElement(_.ScrollGradient, {
    color: (0, _addonKnobs.color)('color', gradientColor),
    hideStartGradient: (0, _addonKnobs.boolean)('hideStartGradient', true),
    style: style,
    className: _mocks_.className
  }, _mocks_.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.default.createElement(_.ScrollGradient, {
    color: (0, _addonKnobs.color)('color', gradientColor),
    style: style,
    className: _mocks_.className
  }, /*#__PURE__*/_react.default.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.default.createElement(_.ScrollGradient, {
    color: (0, _addonKnobs.color)('color', gradientColor),
    style: style,
    className: _mocks_.className
  }, /*#__PURE__*/_react.default.createElement("p", null, "Content before the scrollable element."), /*#__PURE__*/_react.default.createElement(_.ScrollGradient, {
    color: (0, _addonKnobs.color)('child color (color)', gradientColor),
    style: {
      height: '6rem',
      margin: '1rem 0'
    }
  }, /*#__PURE__*/_react.default.createElement("p", null, "Does not need to scroll so does not have a gradient.")), /*#__PURE__*/_react.default.createElement("p", null, "Content after the scrollable element."), _mocks_.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    "
  }
});