@quintype/arrow 3.54.1-debug-full-bleed.4 → 3.54.1-version-upgrade.1

package/src/components/Atoms/StoryElements/AlsoRead/index.js

@@ -0,0 +1,126 @@
+import React from "react";
+import get from "lodash.get";
+import { Link } from "@quintype/components";
+import { withElementWrapper } from "../withElementWrapper";
+import PropTypes from "prop-types";
+import { FallbackImage } from "../../FallbackImage";
+import { isEmpty, shapeConfig, getTextColor } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+import { useSelector } from "react-redux";
+import { ResponsiveLazyImg } from "../../ResponsiveImg";
+import "./also-read.m.css";
+import {
+  alsoReadImgSizes,
+  alsoReadImgWidths,
+  alsoReadDefaultImgSizes,
+  alsoReadDefaultImgWidths
+} from "../../../../utils/img-size-utils";
+
+const DisplayImage = ({ story, linkedImage, isDefault }) => {
+  const alternateText = story["hero-image-alt-text"] || story["hero-image-caption"] || story["headline"];
+  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"], false));
+  const fallBackImageUrl = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "general", "fallbackImage", "url"])
+  );
+
+  return (
+    <div styleName="card-image-wrapper">
+      {!isEmpty(linkedImage) ? (
+        <figure styleName="card-image">
+          <ResponsiveLazyImg
+            slug={linkedImage}
+            aspectRatio={[16, 9]}
+            defaultWidth={480}
+            widths={isDefault ? alsoReadDefaultImgWidths : alsoReadImgWidths}
+            sizes={isDefault ? alsoReadDefaultImgSizes : alsoReadImgSizes}
+            imgParams={{ auto: ["format", "compress"] }}
+            alt={alternateText}
+            isBotRequest={isBotRequest}
+            className={"arr-image-placeholder"}
+          />
+        </figure>
+      ) : (
+        <div styleName="image card-image" className="arr--fallback-also-read">
+          <FallbackImage fallBackImageUrl={fallBackImageUrl} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+DisplayImage.propTypes = {
+  story: PropTypes.shape({
+    "hero-image-alt-text": PropTypes.string,
+    "hero-image-caption": PropTypes.string,
+    headline: PropTypes.string
+  }),
+  linkedImage: PropTypes.string,
+  isDefault: PropTypes.bool
+};
+
+const AlsoReadBase = ({
+  story = {},
+  element,
+  template = "",
+  opts = {},
+  css = {},
+  config = {},
+  render,
+  ...restProps
+}) => {
+  const content = element.text;
+  if (!content) return null;
+
+  const linkedStories = get(story, ["linked-stories"], {});
+  const linkedStoryId = get(element, ["metadata", "linked-story-id"]);
+  const linkedStorySlug = get(linkedStories, [linkedStoryId, "url"]);
+  const linkedImage = get(linkedStories, [linkedStoryId, "hero-image-s3-key"], "");
+  const storyUrl = linkedStorySlug && linkedStorySlug;
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const { title = "" } = opts;
+  const { textColor = "" } = css;
+  const displayTitle = title || "Also Read";
+  const isDefault = template === "" || template === "default";
+  const isRightAlign = template === "imageRightAlign";
+  const templateStyle = template ? `alsoread-${template}` : "alsoread-default";
+
+  return (
+    <Link
+      className="arrow-component arr--also-read-element"
+      styleName={templateStyle}
+      data-test-id="also-read"
+      href={storyUrl}
+      aria-label="also-read"
+      {...restProps}>
+      {!isDefault && <div styleName={`default-text ${textInvertColor}`}>{displayTitle}</div>}
+      {isDefault && <DisplayImage story={story} linkedImage={linkedImage} isDefault={isDefault} />}
+      <div styleName="content-wrapper">
+        <div
+          styleName={`headline ${textInvertColor}`}
+          style={textColor ? { color: textColor } : {}}
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+        {isRightAlign && <DisplayImage story={story} linkedImage={linkedImage} isDefault={isDefault} />}
+      </div>
+    </Link>
+  );
+};
+
+AlsoReadBase.propTypes = {
+  /**  template can be default, textLeftAlign or imageRightAlign */
+  template: PropTypes.string,
+  story: PropTypes.shape({ "linked-stories": PropTypes.object }),
+  element: PropTypes.shape({
+    text: PropTypes.string,
+    metadata: PropTypes.shape({
+      linkedStoryId: PropTypes.shape({ url: PropTypes.string, "hero-image-s3-key": PropTypes.string })
+    })
+  }),
+  opts: PropTypes.shape({ title: PropTypes.string }),
+  config: shapeConfig,
+  render: PropTypes.func,
+  css: PropTypes.object
+};
+
+export const AlsoRead = withElementWrapper(AlsoReadBase);

package/src/components/Atoms/StoryElements/AlsoRead/stories.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { withStore, optionalSelect } from "../../../../../storybook";
+import { color, text } from "@storybook/addon-knobs";
+import { AlsoRead } from "./index";
+import { generateStoryElementData, generateStory } from "../../../Fixture";
+import Readme from "./README.md";
+
+const element = generateStoryElementData("also-read");
+const story = generateStory();
+const templateStyle = {
+  Default: "default",
+  "Image Right Align": "imageRightAlign",
+  "Text Left Align": "textLeftAlign"
+};
+
+withStore(
+  "Atoms/Story Elements/Also Read",
+  {
+    qt: {
+      config: {
+        "cdn-image": "thumbor-stg.assettype.com"
+      }
+    }
+  },
+  Readme
+)
+  .add("Default", () => (
+    <AlsoRead
+      story={story}
+      element={element}
+      template={optionalSelect("Template Options", templateStyle)}
+      css={{ textColor: color("Color", "#ff214b") }}
+      opts={{ title: text("Title", "Also read") }}
+    />
+  ))
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    return <AlsoRead element={element} render={customTemplate} />;
+  });

package/src/components/Atoms/StoryElements/Attachment/README.md

@@ -0,0 +1,21 @@
+# Attachment
+
+Component to display the attachment element.
+
+## Usage
+
+#### Attachment story element with default template
+
+```jsx
+<Attachment element={element} />
+```
+
+#### Replace default attachment element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element["file-name"] }} />;
+
+<Attachment element={element} />;
+```
+
+<!-- PROPS -->

package/src/components/Atoms/StoryElements/Attachment/__snapshots__/attachment.test.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Attachment Story Element Should render default template 1`] = `
+<AttachmentBase
+  element={
+    Object {
+      "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "description": "",
+      "family-id": "95bf1052-d663-446d-ace7-d014325e0027",
+      "file-name": "document__7_ (1).docx",
+      "id": "2f648c29-ef8f-442c-903a-263f82e631dd",
+      "metadata": Object {
+        "file-size": 8209,
+      },
+      "page-url": "/story/7155b5c2-80a4-4922-bdf1-73f1ff04311e/element/2f648c29-ef8f-442c-903a-263f82e631dd",
+      "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+      "subtype": "attachment",
+      "title": "",
+      "type": "file",
+      "url": "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+    }
+  }
+/>
+`;
+
+exports[`Attachment Story Element Should render default template with default file-name if not passed 1`] = `
+<AttachmentBase
+  element={
+    Object {
+      "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "description": "",
+      "family-id": "95bf1052-d663-446d-ace7-d014325e0027",
+      "file-name": "",
+      "id": "2f648c29-ef8f-442c-903a-263f82e631dd",
+      "metadata": Object {
+        "file-size": 8209,
+      },
+      "page-url": "/story/7155b5c2-80a4-4922-bdf1-73f1ff04311e/element/2f648c29-ef8f-442c-903a-263f82e631dd",
+      "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+      "subtype": "attachment",
+      "title": "",
+      "type": "file",
+      "url": "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+    }
+  }
+/>
+`;

package/src/components/Atoms/StoryElements/Attachment/attachment.m.css

@@ -0,0 +1,127 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+@value tablet from viewports;
+
+.headline {
+  font-size: var(--arrow-fs-s);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-3);
+  padding-bottom: var(--arrow-spacing-xs);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+    padding-bottom: var(--arrow-spacing-s);
+    @media (min-width: tablet) {
+      padding-bottom: var(--arrow-spacing-m);
+    }
+  }
+}
+
+.button-wrapper {
+  border-radius: 3px;
+  font-size: var(--arrow-fs-tiny);
+  line-height: var(--arrow-lh-4);
+  text-align: center;
+  padding: 6px var(--arrow-spacing-m);
+  flex-shrink: 0;
+  @media (min-width: tablet) {
+    margin-left: var(--arrow-spacing-m);
+  }
+}
+
+.file-name {
+  font-size: var(--arrow-fs-s);
+  line-height: var(--arrow-lh-5);
+  margin-bottom: var(--arrow-spacing-m);
+  word-break: break-word;
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+    line-height: var(--arrow-lh-3);
+    @media (min-width: tablet) {
+      margin-bottom: unset;
+    }
+  }
+}
+
+.dark .headline,
+.dark .file-name,
+.dark .button-wrapper {
+  color: var(--arrow-c-mono2);
+}
+
+.light .headline,
+.light .file-name,
+.light .button-wrapper {
+  color: var(--arrow-c-invert-mono2);
+}
+
+.pdf {
+  width: 35px;
+  height: 35px;
+  font-size: var(--arrow-fs-tiny);
+  font-weight: var(--arrow-fw-bold);
+  color: var(--arrow-c-light);
+  border-radius: 6px;
+  background-color: #db5449;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: var(--arrow-spacing-m);
+  flex-shrink: 0;
+  @media (min-width: mobile) {
+    width: 45px;
+    height: 45px;
+    border-radius: var(--arrow-spacing-xs);
+  }
+}
+.doc {
+  composes: pdf;
+  background-color: #007bd8;
+}
+
+.wrapper {
+  display: flex;
+  padding: var(--arrow-spacing-m);
+  border-radius: var(--arrow-spacing-xxs);
+  @media (min-width: tablet) {
+    padding: var(--arrow-spacing-l);
+  }
+}
+
+.dark .wrapper {
+  border: solid 1px var(--arrow-c-mono7);
+  background-color: var(--arrow-c-mono7);
+}
+
+.light .wrapper {
+  border: solid 1px var(--arrow-c-invert-mono7);
+  background-color: var(--arrow-c-invert-mono7);
+}
+
+.dark .button-wrapper {
+  border: solid 1px var(--arrow-c-mono2);
+}
+
+.light .button-wrapper {
+  border: solid 1px var(--arrow-c-invert-mono2);
+}
+
+.content-wrapper {
+  @media (min-width: tablet) {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+html[dir="rtl"] {
+  .doc,
+  .pdf,
+  .headline {
+    margin-right: 0;
+  }
+
+  .content-wrapper {
+    margin-right: var(--arrow-spacing-m);
+  }
+}

package/src/components/Atoms/StoryElements/Attachment/attachment.test.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { shallow } from "enzyme";
+import { generateStoryElementData } from "../../../Fixture";
+import { Attachment } from "./index";
+
+let element = generateStoryElementData("attachment");
+
+describe("Attachment Story Element", () => {
+  it("Should render default template", () => {
+    const wrapper = shallow(<Attachment element={element} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should not render default template if url is not passed", () => {
+    const wrapper = shallow(<Attachment element={{ ...element, url: "" }} />);
+    expect(wrapper.find({ "data-test-id": "attachment" }).length).toEqual(0);
+  });
+
+  it("Should not render default template if content-type is not passed", () => {
+    const wrapper = shallow(<Attachment element={{ ...element, "content-type": "" }} />);
+    expect(wrapper.find({ "data-test-id": "attachment" }).length).toEqual(0);
+  });
+
+  it("Should render default template with default file-name if not passed", () => {
+    const wrapper = shallow(<Attachment element={{ ...element, "file-name": "" }} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should render PDF icon if content-type is pdf", () => {
+    const wrapper = shallow(<Attachment element={element} />);
+    expect(wrapper.find({ "data-test-id": "doc" }).length).toEqual(0);
+  });
+
+  it("Should render DOC icon if content-type is doc", () => {
+    element = { ...element, "content-type": "application/doc" };
+    const wrapper = shallow(<Attachment element={element} />);
+    expect(wrapper.find({ "data-test-id": "pdf" }).length).toEqual(0);
+  });
+});

package/src/components/Atoms/StoryElements/Attachment/index.js

@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./attachment.m.css";
+import { Link } from "@quintype/components";
+import { withElementWrapper } from "../withElementWrapper";
+import { useStateValue } from "../../../SharedContext";
+import { getTextColor } from "../../../../utils/utils";
+
+const AttachmentBase = ({ element = {}, render, opts = {}, ...restProps }) => {
+  const { "file-name": fileName, url, "content-type": contentType } = element;
+  const { attachmentTxt, previewTxt } = opts;
+  if (!contentType || !url) return null;
+  const attachmentType = { PDF: "application/pdf" };
+  const isPdf = contentType === attachmentType.PDF;
+  const configData = useStateValue() || {};
+  const textColor = getTextColor(configData.theme);
+  const defaultName = isPdf ? "Attached PDF" : "Attached DOC";
+  const defaultFileName = fileName ? fileName.replace(/\.pdf$/, "") : defaultName;
+
+  return (
+    <div
+      data-test-id="attachment"
+      className="arrow-component arr--attachment-element"
+      styleName={textColor}
+      {...restProps}>
+      <div styleName="headline">{attachmentTxt || "Attachment"}</div>
+      <div styleName="wrapper">
+        {isPdf ? (
+          <div data-test-id="pdf" styleName="pdf">
+            PDF
+          </div>
+        ) : (
+          <div data-test-id="doc" styleName="doc">
+            DOC
+          </div>
+        )}
+        <div styleName="content-wrapper">
+          <div styleName="file-name" dangerouslySetInnerHTML={{ __html: defaultFileName }} />
+          <Link
+            styleName="button-wrapper"
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            download
+            aria-label="button">
+            {isPdf ? previewTxt || "Preview" : "Download"}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+AttachmentBase.propTypes = {
+  element: PropTypes.shape({
+    url: PropTypes.string,
+    fileName: PropTypes.string,
+    contentType: PropTypes.string
+  }),
+  render: PropTypes.func,
+  opts: PropTypes.shape({ attachmentTxt: PropTypes.string, previewTxt: PropTypes.string })
+};
+export const Attachment = withElementWrapper(AttachmentBase);

package/src/components/Atoms/StoryElements/Attachment/stories.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { Attachment } from "./index";
+import { generateStoryElementData } from "../../../Fixture";
+import Readme from "./README.md";
+
+const doc = {
+  description: "",
+  "page-url": "/story/7155b5c2-80a4-4922-bdf1-73f1ff04311e/element/2f648c29-ef8f-442c-903a-263f82e631dd",
+  type: "file",
+  "family-id": "95bf1052-d663-446d-ace7-d014325e0027",
+  title: "",
+  id: "2f648c29-ef8f-442c-903a-263f82e631dd",
+  "file-name": "document__7_ (1).docx",
+  url: "https://thumbor-stg.assettype.com/ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+  "s3-key": "ace/2019-08/21f3a19b-1d98-46bc-95e3-a5bdc9045ae9/document__7___1_.docx",
+  "content-type": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  metadata: {
+    "file-size": 8209
+  },
+  subtype: "attachment"
+};
+
+const pdf = {
+  description: "",
+  "page-url": "/story/a9068be5-70ce-4d55-86d0-687546f921ea/element/62393c55-50ed-4310-81c2-01cc0ef17446",
+  type: "file",
+  "family-id": "591f90c3-e98e-43dc-8509-9f11f5335af6",
+  title: "",
+  id: "62393c55-50ed-4310-81c2-01cc0ef17446",
+  "file-name": "resume-samples.pdf",
+  url: "https://thumbor-stg.assettype.com/ace/2019-07/6dcf2021-615b-43e6-85f3-21acb8953cea/resume_samples.pdf",
+  "s3-key": "ace/2019-07/6dcf2021-615b-43e6-85f3-21acb8953cea/resume_samples.pdf",
+  "content-type": "application/pdf",
+  metadata: {
+    "file-size": 301808
+  },
+  subtype: "attachment"
+};
+const element = generateStoryElementData("attachment");
+withStore("Atoms/Story Elements/Attachment", Readme)
+  .add("PDF", () => <Attachment element={pdf} />)
+  .add("DOC", () => <Attachment element={doc} />)
+  .add("Custom", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element["file-name"] }} />;
+    return <Attachment element={element} render={customTemplate} />;
+  });

package/src/components/Atoms/StoryElements/BigFact/README.md

@@ -0,0 +1,9 @@
+## BigFact
+
+BigFact displays the big fact content of the story element.
+
+# Usage
+
+```jsx
+<BigFact element={element}>
+```

package/src/components/Atoms/StoryElements/BigFact/big-fact.m.css

@@ -0,0 +1,41 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.bigfact-element {
+  border-bottom: 1px solid var(--arrow-c-mono5);
+  border-top: 1px solid var(--arrow-c-mono5);
+}
+
+.bigfact-element.light {
+  border-bottom: 1px solid var(--arrow-c-invert-mono5);
+  border-top: 1px solid var(--arrow-c-invert-mono5);
+}
+
+.content {
+  font-size: var(--arrow-fs-huge);
+  font-weight: var(--arrow-fw-bold);
+  color: var(--arrow-c-brand1);
+  padding: var(--arrow-spacing-m) 0 var(--arrow-spacing-xxs) 0;
+  @media (min-width: mobile) {
+    font-size: 48px;
+    padding: var(--arrow-spacing-m) 0 var(--arrow-spacing-xs) 0;
+    line-height: var(--arrow-lh-3);
+  }
+}
+
+.attribution {
+  font-size: var(--arrow-fs-s);
+  font-style: italic;
+  line-height: var(--arrow-lh-5);
+  padding-bottom: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-m);
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono1);
+}
+.light {
+  color: var(--arrow-c-invert-mono1);
+}

package/src/components/Atoms/StoryElements/BigFact/big-fact.test.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { shallow, mount } from "enzyme";
+import { BigFact } from "./index";
+import { generateStoryElementData } from "../../../Fixture";
+import "./big-fact.m.css";
+
+const element = generateStoryElementData("bigfact");
+describe("Component: BigFact", () => {
+  test("It should display the big fact element content and attribution", () => {
+    const wrapper = mount(<BigFact element={element} />);
+    expect(wrapper.find({ "data-test-id": "bigfact" }).prop("className")).toMatch(/bigfact-element/);
+  });
+  it("Should not render attribution value if there is no data", () => {
+    const wrapper = shallow(<BigFact element={element} />);
+    expect(wrapper.find({ "data-test-id": "attribution" }).length).toEqual(0);
+  });
+  test("It should not render the BigFact component if the data is null", () => {
+    const component = shallow(<BigFact />);
+    expect(component.contains(<BigFact />)).toBe(false);
+  });
+});

package/src/components/Atoms/StoryElements/BigFact/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withElementWrapper } from "../withElementWrapper";
+import { useStateValue } from "../../../SharedContext";
+import { getTextColor } from "../../../../utils/utils";
+import "./big-fact.m.css";
+
+const BigFactBase = ({ element, story, config, ...restProps }) => {
+  const configData = useStateValue() || {};
+  const textInvertColor = getTextColor(configData.theme);
+  const { content, attribution } = element.metadata;
+
+  return (
+    <div
+      className="arrow-component arr--bigfact-element"
+      data-test-id="bigfact"
+      styleName={`bigfact-element ${textInvertColor}`}
+      {...restProps}>
+      <div styleName="content">{content}</div>
+      <div styleName={`attribution ${textInvertColor}`} data-test-id="attribution">
+        {attribution}
+      </div>
+    </div>
+  );
+};
+
+BigFactBase.propTypes = {
+  element: PropTypes.shape({ metadata: PropTypes.shape({ content: PropTypes.string, attribution: PropTypes.string }) }),
+  story: PropTypes.object,
+  config: PropTypes.object
+};
+
+export const BigFact = withElementWrapper(BigFactBase);

package/src/components/Atoms/StoryElements/BigFact/stories.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { BigFact } from "./index";
+import { withStore } from "../../../../../storybook";
+import Readme from "./README.md";
+import { generateStoryElementData } from "../../../Fixture";
+
+const element = generateStoryElementData("bigfact");
+
+withStore("Atoms/Story Elements/BigFact", {}, Readme).add("Default", () => <BigFact element={element} />);

package/src/components/Atoms/StoryElements/BlockQuote/README.md

@@ -0,0 +1,49 @@
+# Block Quote
+
+Displays the Block quote story element of the story
+
+## Usage
+
+#### Block quote story element with default template
+
+```jsx
+<BlockQuote element={element} template="default" />
+```
+
+#### Block quote story element with background template
+
+```jsx
+<BlockQuote element={element} template="withBackground" />
+```
+
+#### Block quote story element with border template
+
+```jsx
+<BlockQuote element={element} template="withBorder" />
+```
+
+#### Block quote story element with background color
+
+```jsx
+const css = { backgroundShade: "#ff214b" };
+
+<BlockQuote element={element} template="withBackground" css={css} />;
+```
+
+#### Block quote story element with blockquote color
+
+```jsx
+const css = { blockQuoteColor: "#ff214b" };
+
+<BlockQuote element={element} template="default" css={css} />;
+```
+
+#### Replace default block quote element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<BlockQuote element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->