@selfcommunity/react-ui 0.1.2-alpha.0

package/lib/esm/components/Platform/PlatformSkeleton.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.Base = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+var _default = {
+  title: 'Design System/SC UI/Skeleton/Platform',
+  component: _Skeleton.default // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+
+}; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 400
+  }
+}, /*#__PURE__*/_react.default.createElement(_Skeleton.default, args));
+
+const Base = Template.bind({});
+exports.Base = Base;
+Base.args = {
+  contained: true
+};

package/lib/esm/components/Platform/Skeleton.js

@@ -0,0 +1,50 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = PlatformSkeleton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Skeleton = require("../Skeleton");
+
+var _styles = require("@mui/material/styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const PREFIX = 'SCPlatformSkeleton';
+const classes = {
+  root: `${PREFIX}-root`
+};
+const Root = (0, _styles.styled)(_Skeleton.GenericSkeleton, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({}));
+/**
+ * > API documentation for the Community-UI Platform Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PlatformSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPlatformSkeleton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPlatformSkeleton-root|Styles applied to the root element.|
+ *
+ */
+
+function PlatformSkeleton() {
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    className: classes.root
+  });
+}

package/lib/esm/components/Platform/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _Platform = _interopRequireWildcard(require("./Platform"));
+
+exports.PlatformProps = _Platform.PlatformProps;
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+exports.PlatformSkeleton = _Skeleton.default;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _Platform.default;
+exports.default = _default;

package/lib/esm/components/PollSuggestion/PollSnippet/PollSnippet.js

@@ -0,0 +1,119 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = PollSnippet;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _material = require("@mui/material");
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _reactIntl = require("react-intl");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+var _contribution = require("../../../utils/contribution");
+
+var _BaseItemButton = _interopRequireDefault(require("../../../shared/BaseItemButton"));
+
+const _excluded = ["feedObj", "className", "autoHide"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const PREFIX = 'SCPollSnippet';
+const classes = {
+  root: `${PREFIX}-root`,
+  title: `${PREFIX}-title`,
+  action: `${PREFIX}-action`,
+  seeItem: `${PREFIX}-see-item`
+};
+const Root = (0, _styles.styled)(_BaseItemButton.default, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({}));
+
+/**
+ * > API documentation for the Community-UI PollSnippet component. Learn about the available props and the CSS API.
+ *
+ * #### Import
+ ```jsx
+ import {PollSnippet} from '@selfcommunity/react-ui';
+ ```
+ #### Component Name
+ The name `SCPollSnippet` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPollSnippet-root|Styles applied to the root element.|
+ |title|.SCPollSnippet-title|Styles applied to the title element.|
+ |action|.SCPollSnippet-actions|Styles applied to action section.|
+ |seeItem|.SCPollSnippet-see-item|Styles applied to the see item button element.|
+
+ * @param inProps
+ */
+function PollSnippet(inProps) {
+  // PROPS
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  });
+
+  const {
+    feedObj = null,
+    className = null,
+    autoHide = false
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // CONTEXT
+
+
+  const scRoutingContext = (0, _reactCore.useSCRouting)(); // RENDER
+
+  if (!autoHide) {
+    var _feedObj$summary;
+
+    return /*#__PURE__*/_react.default.createElement(Root, _extends({}, rest, {
+      className: (0, _classnames.default)(classes.root, className),
+      primary: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Typography, null, feedObj.author.username), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+        variant: "body1",
+        className: classes.title
+      }, feedObj.poll.title)),
+      secondary: /*#__PURE__*/_react.default.createElement(_material.Typography, {
+        variant: "body2",
+        sx: {
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        },
+        dangerouslySetInnerHTML: {
+          __html: (_feedObj$summary = feedObj.summary) != null ? _feedObj$summary : null
+        }
+      }),
+      actions: /*#__PURE__*/_react.default.createElement(_material.Button, {
+        size: "small",
+        variant: "outlined",
+        className: classes.seeItem,
+        component: _reactCore.Link,
+        to: scRoutingContext.url((0, _contribution.getContributionRouteName)(feedObj), (0, _contribution.getRouteData)(feedObj))
+      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+        id: "ui.pollSuggestion.pollSnippet.button.seeItem",
+        defaultMessage: "ui.pollSuggestion.pollSnippet.button.seeItem"
+      }))
+    }));
+  }
+
+  return null;
+}

package/lib/esm/components/PollSuggestion/PollSnippet/Skeleton.js

@@ -0,0 +1,82 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = PollSnippetSkeleton;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _material = require("@mui/material");
+
+var _styles = require("@mui/material/styles");
+
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
+
+var _BaseItem = _interopRequireDefault(require("../../../shared/BaseItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+const PREFIX = 'SCPollSnippetSkeleton';
+const classes = {
+  root: `${PREFIX}-root`
+};
+const Root = (0, _styles.styled)(_BaseItem.default)(({
+  theme
+}) => ({}));
+/**
+ * > API documentation for the Community-UI Poll Snippet Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PollSnippetSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPollSnippetSkeleton` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPollSnippetSkeleton-root|Styles applied to the root element.|
+ *
+ */
+
+function PollSnippetSkeleton(props) {
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({
+    className: classes.root
+  }, props, {
+    primary: /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+      animation: "wave",
+      height: 10,
+      width: 120,
+      style: {
+        marginBottom: 10
+      }
+    }),
+    secondary: /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+      animation: "wave",
+      height: 10,
+      width: 70,
+      style: {
+        marginBottom: 10
+      }
+    }),
+    actions: /*#__PURE__*/_react.default.createElement(_material.Button, {
+      size: "small",
+      variant: "outlined",
+      disabled: true
+    }, /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+      animation: "wave",
+      height: 10,
+      width: 50,
+      style: {
+        marginTop: 5,
+        marginBottom: 5
+      }
+    }))
+  }));
+}

package/lib/esm/components/PollSuggestion/PollSnippet/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _PollSnippet = _interopRequireWildcard(require("./PollSnippet"));
+
+exports.PollSnippetProps = _PollSnippet.PollSnippetProps;
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+exports.PollSnippetSkeleton = _Skeleton.default;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _PollSnippet.default;
+exports.default = _default;

package/lib/esm/components/PollSuggestion/PollSuggestion.js

@@ -0,0 +1,236 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = PollSuggestion;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@mui/material/styles");
+
+var _List = _interopRequireDefault(require("@mui/material/List"));
+
+var _material = require("@mui/material");
+
+var _apiServices = require("@selfcommunity/api-services");
+
+var _reactCore = require("@selfcommunity/react-core");
+
+var _Skeleton = _interopRequireDefault(require("../TrendingFeed/Skeleton"));
+
+var _Errors = require("../../constants/Errors");
+
+var _reactIntl = require("react-intl");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _BaseDialog = _interopRequireDefault(require("../../shared/BaseDialog"));
+
+var _CentralProgress = _interopRequireDefault(require("../../shared/CentralProgress"));
+
+var _reactInfiniteScrollComponent = _interopRequireDefault(require("react-infinite-scroll-component"));
+
+var _Widget = _interopRequireDefault(require("../Widget"));
+
+var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));
+
+var _PollSnippet = _interopRequireDefault(require("./PollSnippet"));
+
+const _excluded = ["className", "autoHide"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const PREFIX = 'SCPollSuggestion';
+const classes = {
+  root: `${PREFIX}-root`,
+  title: `${PREFIX}-title`,
+  noResults: `${PREFIX}-no-results`,
+  pollSnippetItem: `${PREFIX}-poll-snippet-item`,
+  showMore: `${PREFIX}-show-more`
+};
+const Root = (0, _styles.styled)(_Widget.default, {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  theme
+}) => ({
+  maxWidth: 500,
+  marginBottom: theme.spacing(2),
+  [`& .${classes.pollSnippetItem}`]: {
+    marginBottom: 0
+  }
+}));
+
+/**
+ *> API documentation for the Community-UI Poll Suggestion component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PollSuggestion} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPollSuggestion` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPollSuggestion-root|Styles applied to the root element.|
+ |title|.SCPollSuggestion-title|Styles applied to the title element.|
+ |no-results|.SCPollSuggestion-no-results|Styles applied to no results section.|
+ |pollSnippetItem|.SCPollSuggestion-poll-snippet-item|Styles applied to the related item element.|
+ |showMore|.SCPollSuggestion-show-more|Styles applied to show more button element.|
+
+ *
+ * @param inProps
+ */
+function PollSuggestion(inProps) {
+  // CONST
+  const limit = 4; // CONTEXT
+
+  const scUserContext = (0, _reactCore.useSCUser)();
+  const authUserId = scUserContext.user ? scUserContext.user.id : null; // PROPS
+
+  const props = (0, _useThemeProps.default)({
+    props: inProps,
+    name: PREFIX
+  });
+
+  const {
+    className,
+    autoHide = true
+  } = props,
+        rest = _objectWithoutPropertiesLoose(props, _excluded); // STATE
+
+
+  const [objs, setObjs] = (0, _react.useState)([]);
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const [hasMore, setHasMore] = (0, _react.useState)(false);
+  const [total, setTotal] = (0, _react.useState)(0);
+  const [visibleObjs, setVisibleObjs] = (0, _react.useState)(limit);
+  const [openPollSuggestionDialog, setOpenPollSuggestionDialog] = (0, _react.useState)(false);
+  const [next, setNext] = (0, _react.useState)(`${_apiServices.Endpoints.PollSuggestion.url()}?limit=10`);
+  /**
+   * Fetches related discussions list
+   */
+
+  function fetchPollSuggestion() {
+    if (next) {
+      _apiServices.http.request({
+        url: next,
+        method: _apiServices.Endpoints.PollSuggestion.method
+      }).then(res => {
+        const data = res.data;
+        setObjs([...objs, ...data]);
+        setTotal(data.length);
+        setHasMore(data.length > visibleObjs);
+        setLoading(false);
+        setNext(data['next']);
+      }).catch(error => {
+        _reactCore.Logger.error(_Errors.SCOPE_SC_UI, error);
+      });
+    }
+  }
+  /**
+   * On mount, fetches related discussions list
+   */
+
+
+  (0, _react.useEffect)(() => {
+    if (scUserContext.user) {
+      fetchPollSuggestion();
+    }
+  }, [authUserId]);
+  /**
+   * Renders suggested poll list
+   */
+
+  const p = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading ? /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    elevation: 0
+  }) : /*#__PURE__*/_react.default.createElement(_material.CardContent, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    className: classes.title,
+    variant: "h5"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+    id: "ui.pollSuggestion.title",
+    defaultMessage: "ui.pollSuggestion.title"
+  })), !total ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    className: classes.noResults,
+    variant: "body2"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+    id: "ui.pollSuggestion.noResults",
+    defaultMessage: "ui.pollSuggestion.noResults"
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_List.default, null, objs.slice(0, visibleObjs).map(obj => {
+    return /*#__PURE__*/_react.default.createElement(_material.ListItem, {
+      key: obj.id
+    }, /*#__PURE__*/_react.default.createElement(_PollSnippet.default, {
+      elevation: 0,
+      feedObj: obj,
+      className: classes.pollSnippetItem
+    }));
+  })), hasMore && /*#__PURE__*/_react.default.createElement(_material.Button, {
+    size: "small",
+    className: classes.showMore,
+    onClick: () => setOpenPollSuggestionDialog(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+    id: "ui.pollSuggestion.button.showMore",
+    defaultMessage: "ui.pollSuggestion.button.showMore"
+  }))), openPollSuggestionDialog && /*#__PURE__*/_react.default.createElement(_BaseDialog.default, {
+    title: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.pollSuggestion.title",
+      defaultMessage: "ui.pollSuggestion.title"
+    }),
+    onClose: () => setOpenPollSuggestionDialog(false),
+    open: openPollSuggestionDialog
+  }, loading ? /*#__PURE__*/_react.default.createElement(_CentralProgress.default, {
+    size: 50
+  }) : /*#__PURE__*/_react.default.createElement(_reactInfiniteScrollComponent.default, {
+    dataLength: objs.length,
+    next: fetchPollSuggestion,
+    hasMore: Boolean(next),
+    loader: /*#__PURE__*/_react.default.createElement(_CentralProgress.default, {
+      size: 30
+    }),
+    height: 400,
+    endMessage: /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "ui.pollSuggestion.noMoreResults",
+      defaultMessage: "ui.pollSuggestion.noMoreResults"
+    })))
+  }, /*#__PURE__*/_react.default.createElement(_List.default, null, objs.map(obj => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
+    key: obj.id
+  }, /*#__PURE__*/_react.default.createElement(_PollSnippet.default, {
+    elevation: 0,
+    feedObj: obj,
+    className: classes.pollSnippetItem
+  }))))))));
+  /**
+   * Renders root object (if results and autoHide prop is set to false, otherwise component is hidden)
+   */
+
+
+  if (autoHide && !total) {
+    return null;
+  }
+
+  if (scUserContext.user) {
+    return /*#__PURE__*/_react.default.createElement(Root, _extends({
+      className: (0, _classnames.default)(classes.root, className)
+    }, rest), p);
+  }
+
+  return null;
+}

package/lib/esm/components/PollSuggestion/PollSuggestion.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.Base = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+var _default = {
+  title: 'Design System/SC UI/Poll Suggestion',
+  component: _index.default,
+  argTypes: {
+    elevation: {
+      control: {
+        type: 'number'
+      },
+      description: 'Used only if variant="elevation". Shadow depth, corresponds to dp in the spec. It accepts values between 0 and 24 inclusive.',
+      table: {
+        defaultValue: {
+          summary: 1
+        }
+      }
+    },
+    variant: {
+      options: ['elevation', 'outlined'],
+      control: {
+        type: 'select'
+      },
+      description: 'The variant to use. Types: "elevation", "outlined", etc.',
+      table: {
+        defaultValue: {
+          summary: 'elevation'
+        }
+      }
+    }
+  },
+  args: {
+    elevation: 1,
+    variant: 'elevation'
+  }
+}; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    maxWidth: 500
+  }
+}, /*#__PURE__*/_react.default.createElement(_index.default, args));
+
+const Base = Template.bind({});
+exports.Base = Base;
+Base.args = {};

package/lib/esm/components/PollSuggestion/PollSuggestionSkeleton.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.Base = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+var _default = {
+  title: 'Design System/SC UI/Skeleton/PollSuggestion',
+  component: _Skeleton.default // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+
+}; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: 400
+  }
+}, /*#__PURE__*/_react.default.createElement(_Skeleton.default, args));
+
+const Base = Template.bind({});
+exports.Base = Base;
+Base.args = {
+  contained: true
+};