Source

atoms/story-elements/text/question/question.tsx

  1. import React from "react";
  2. import styled from "styled-components";
  3. import { StoryElementProps } from "../../types";
  4. import { withStoryAndConfig } from "../../../../context";
  5. import get from "lodash.get";
  6. export const StyledQuestion = styled.div<{ textDirection: "ltr" | "rtl" }>`
  7. font-size: ${(props) => props.theme.font.size.s};
  8. color: ${(props) => props.theme.color.mono7};
  9. line-height: ${(props) => props.theme.font.lineHeight.level5};
  10. font-weight: ${(props) => props.theme.font.weight.bold};
  11. & > p {
  12. ${(props) =>
  13. props.textDirection === "ltr"
  14. ? ` :before {
  15. content: "Q: ";
  16. } `
  17. : ` :after {
  18. content: " :Q";
  19. } `}
  20. }
  21. `;
  22. export const QuestionBase = ({ element, story, config }: StoryElementProps) => {
  23. const questionElementRender = get(config, ["opts", "render", "storyElementRender", "questionElementRender"], null);
  24. const textDirection = get(config, ["publisherConfig", "language", "direction"], "ltr");
  25. return questionElementRender ? (
  26. questionElementRender({ story, config, element })
  27. ) : (
  28. <StyledQuestion textDirection={textDirection} dangerouslySetInnerHTML={{ __html: element.text || "" }} />
  29. );
  30. };
  31. /**
  32. * Question is a story element.
  33. * The look of the Question can be changed using the render prop questionElementRender. In case questionElementRender is passed in the config, it is rendered. Otherwise a default Question is rendered.
  34. *
  35. * @param {Object} params object containing parameters passed to the render prop
  36. * @param {Object} params.story story object
  37. * @param {Object} params.config config object
  38. * @param {Object} params.element the story element. This is same as the story element found in the story API response
  39. *
  40. * ```javascript
  41. * ...
  42. * ampRoutes(app, {
  43. * render: {
  44. * storyElementRender: {
  45. * questionElementRender: ({ story, config, element }) => <MyCustomQuestion story={story} config={config} storyElement={element} />
  46. * }
  47. * }
  48. * })
  49. * ...
  50. * ```
  51. *
  52. * @category StoryElements
  53. * @module Question
  54. * @component
  55. */
  56. export const Question = withStoryAndConfig(QuestionBase);