Source

atoms/story-elements/text/q-and-a/q-and-a.tsx

  1. import React, { Fragment } from "react";
  2. import { StoryElementProps } from "../../types";
  3. import { withStoryAndConfig } from "../../../../context";
  4. import { StyledQuestion } from "../question/question";
  5. import { StyledAnswer } from "../answer/answer";
  6. import get from "lodash.get";
  7. export const QAndABase = ({ element, story, config }: StoryElementProps) => {
  8. const qAndAElementRender = get(config, ["opts", "render", "storyElementRender", "qAndAElementRender"], null);
  9. if (qAndAElementRender) return qAndAElementRender({ story, config, element });
  10. const textDirection = get(config, ["publisherConfig", "language", "direction"], "ltr");
  11. const question = get(element, ["metadata", "question"], null);
  12. const answer = get(element, ["metadata", "answer"], null);
  13. return (
  14. <div>
  15. {question && (
  16. <Fragment>
  17. <StyledQuestion textDirection={textDirection} dangerouslySetInnerHTML={{ __html: question }} />
  18. </Fragment>
  19. )}
  20. {answer && (
  21. <Fragment>
  22. <StyledAnswer textDirection={textDirection} dangerouslySetInnerHTML={{ __html: answer }} />
  23. </Fragment>
  24. )}
  25. </div>
  26. );
  27. };
  28. /**
  29. * QAndA is a story element.
  30. * The look of the Question can be changed using the render prop qAndAElementRender. In case qAndAElementRender is passed in the config, it is rendered. Otherwise a default QAndA element is rendered.
  31. *
  32. * @param {Object} params object containing parameters passed to the render prop
  33. * @param {Object} params.story story object
  34. * @param {Object} params.config config object
  35. * @param {Object} params.element the story element. This is same as the story element found in the story API response
  36. *
  37. * ```javascript
  38. * ...
  39. * ampRoutes(app, {
  40. * render: {
  41. * storyElementRender: {
  42. * qAndAElementRender: ({ story, config, element }) => <MyCustomQAndAElement story={story} config={config} storyElement={element} />
  43. * }
  44. * }
  45. * })
  46. * ...
  47. * ```
  48. *
  49. * @category StoryElements
  50. * @module QAndA
  51. * @component
  52. */
  53. export const QAndA = withStoryAndConfig(QAndABase);