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

package/src/components/Atoms/StoryElements/AISummary/ai-summary.m.css

@@ -0,0 +1,106 @@
+/* root card container */
+.summary {
+  border: 1px solid #fff;
+  border-radius: 10px;
+  padding: var(--arrow-spacing-s);
+}
+
+/* heading */
+.heading-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.heading-left {
+  display: flex;
+  align-items: center;
+  gap: var(--arrow-spacing-xs);
+}
+
+.heading-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.headline {
+  margin-bottom: 0;
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+}
+
+.subtitle {
+  font-size: var(--arrow-fs-xxs) !important;
+  margin-top: var(--arrow-spacing-xxs);
+  margin-bottom: 0;
+}
+
+.subtitle.dark {
+  color: var(--arrow-c-mono4);
+}
+
+.subtitle.light {
+  color: var(--arrow-c-invert-mono4);
+}
+
+/* separator */
+.separator {
+  border: none;
+  margin: var(--arrow-spacing-s) 0;
+}
+
+.separator.dark {
+  border-top: 1px solid var(--arrow-c-mono7);
+}
+
+.separator.light {
+  border-top: 1px solid var(--arrow-c-invert-mono7);
+}
+
+/* content */
+.content * {
+  font-size: var(--arrow-fs-xs) !important;
+}
+
+.content > * {
+  margin-bottom: 15px !important;
+  line-height: 1.5;
+}
+
+.content.light > * {
+  color: var(--arrow-c-light);
+}
+
+.content > ul {
+  list-style: initial;
+  padding: 0 var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
+}
+
+.content > ol {
+  list-style: auto;
+  padding: 0 var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
+}
+
+.content li {
+  margin-bottom: 15px;
+}
+
+.content a {
+  color: var(--textElementHyperlinkColor);
+  border-bottom: 1px solid var(--textElementHyperlinkColor);
+}
+
+/* theme */
+.dark {
+  color: var(--arrow-c-mono1);
+}
+
+.light {
+  color: var(--arrow-c-invert-mono1);
+}
+
+.light a {
+  color: var(--arrow-c-invert-mono1);
+  border-bottom: 1px solid var(--arrow-c-invert-mono1);
+}

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

@@ -0,0 +1,206 @@
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { withElementWrapper } from "../withElementWrapper";
+import get from "lodash/get";
+import { getTextColor, updateContentLinks } from "../../../../utils/utils";
+import { useStateValue } from "../../../SharedContext";
+import "./ai-summary.m.css";
+import { AI_ICONS } from "./ai-icons";
+
+// Walk the HTML string revealing only `charCount` visible characters while
+// keeping all tags intact so CSS rules apply consistently throughout the animation.
+function revealHtml(html, charCount) {
+  let count = 0;
+  let result = "";
+  let inTag = false;
+
+  for (let i = 0; i < html.length; i++) {
+    const char = html[i];
+    if (char === "<") {
+      inTag = true;
+      result += char;
+    } else if (char === ">") {
+      inTag = false;
+      result += char;
+    } else if (inTag) {
+      result += char;
+    } else {
+      result += char;
+      count++;
+      if (count >= charCount) break;
+    }
+  }
+  return result;
+}
+
+const Chevron = ({ isExpanded }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={{
+      transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+      transition: "transform 0.2s ease",
+      flexShrink: 0
+    }}
+    aria-hidden="true">
+    <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const AISummaryBase = ({ element, opts = {}, css = {} }) => {
+  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"], false));
+  const enableDarkMode = useSelector((state) => get(state, ["header", "isDarkModeEnabled"], false));
+  const { primaryColor = "#4860BC", darkPrimaryColor = "#4860BC" } = useSelector((state) =>
+    get(state, ["qt", "config", "pagebuilder-config", "general"], {})
+  );
+  const configData = useStateValue() || {};
+  const { isExternalLink = true, headline, iconType = "star", subtitle, expandOnStart = false } = opts;
+  const icon = AI_ICONS[iconType] || AI_ICONS.star;
+
+  // Bots start expanded (full content visible for SEO); readers start collapsed
+  const [isExpanded, setIsExpanded] = useState(isBotRequest || expandOnStart);
+  const [typedLength, setTypedLength] = useState(0);
+  const [typingDone, setTypingDone] = useState(() => isBotRequest);
+  const typingStarted = useRef(false);
+
+  const content = element.text;
+  const text = (isExternalLink && content && updateContentLinks(content)) || content || "";
+  const plainText = text.replace(/<[^>]*>/g, "");
+
+  // Reset typing state on collapse so re-expanding always starts fresh
+  useEffect(() => {
+    if (!isExpanded) {
+      typingStarted.current = false;
+      setTypedLength(0);
+      if (!isBotRequest) setTypingDone(false);
+    }
+  }, [isExpanded, isBotRequest]);
+
+  // Typing effect — only for non-bot requests, starts when the user expands
+  useEffect(() => {
+    if (!content || isBotRequest) {
+      setTypingDone(true);
+      return;
+    }
+
+    if (!isExpanded || typingStarted.current) return;
+    typingStarted.current = true;
+
+    setTypedLength(0);
+    setTypingDone(false);
+
+    let i = 0;
+    const interval = setInterval(() => {
+      i++;
+      if (i >= plainText.length) {
+        setTypingDone(true);
+        clearInterval(interval);
+      } else {
+        setTypedLength(i);
+      }
+    }, 10);
+
+    return () => clearInterval(interval);
+  }, [content, isBotRequest, plainText, isExpanded]);
+
+  if (!content) return null;
+
+  const {
+    borderColor = primaryColor,
+    backgroundColor = "#FFF",
+    iconColor = primaryColor,
+    darkBorderColor = darkPrimaryColor,
+    darkBackgroundColor = "#FFF",
+    darkIconColor = darkPrimaryColor
+  } = css;
+  const activeBorderColor = enableDarkMode ? darkBorderColor : borderColor;
+  const activeBackgroundColor = enableDarkMode ? darkBackgroundColor : backgroundColor;
+  const activeIconColor = enableDarkMode ? darkIconColor : iconColor;
+  const textInvertColor = getTextColor(activeBackgroundColor) || configData.theme;
+
+  const toggle = () => setIsExpanded((prev) => !prev);
+  const interactiveProps = !isBotRequest
+    ? {
+        onClick: toggle,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") toggle();
+        },
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": isExpanded,
+        style: { cursor: "pointer" }
+      }
+    : {};
+
+  return (
+    <div
+      className="arr--summary-element"
+      styleName="summary"
+      data-test-id="summary"
+      style={{ borderColor: activeBorderColor, backgroundColor: activeBackgroundColor }}>
+      <div styleName={textInvertColor} data-test-id="summary-headline" {...interactiveProps}>
+        <div styleName="heading-row">
+          <div styleName="heading-left">
+            <span styleName="heading-icon" data-test-id="ai-summary-icon" style={{ color: activeIconColor }}>
+              {icon}
+            </span>
+            <div styleName={`headline ${textInvertColor}`}>{headline || "Quick Read"}</div>
+          </div>
+          {!isBotRequest && <Chevron isExpanded={isExpanded} />}
+        </div>
+        <p styleName={`subtitle ${textInvertColor}`}>{subtitle || "AI generated summary, newsroom reviewed"}</p>
+      </div>
+      {isExpanded && (
+        <>
+          <hr styleName={`separator ${textInvertColor}`} />
+          <div style={{ position: "relative" }}>
+            {/* Hidden full content reserves the final height from the first frame */}
+            <div
+              styleName={`content ${textInvertColor}`}
+              dangerouslySetInnerHTML={{ __html: text }}
+              style={!typingDone ? { visibility: "hidden" } : undefined}
+            />
+            {/* Typing overlay — removed once animation completes */}
+            {!typingDone && (
+              <div
+                styleName={`content ${textInvertColor}`}
+                dangerouslySetInnerHTML={{ __html: revealHtml(text, typedLength) }}
+                style={{ position: "absolute", top: 0, left: 0, right: 0 }}
+              />
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+AISummaryBase.propTypes = {
+  element: PropTypes.shape({ text: PropTypes.string }),
+  opts: PropTypes.shape({
+    isExternalLink: PropTypes.bool,
+    headline: PropTypes.string,
+    iconType: PropTypes.oneOf(["star", "sparkle", "wand", "diamond"]),
+    subtitle: PropTypes.string,
+    expandOnStart: PropTypes.bool
+  }),
+  css: PropTypes.shape({
+    borderColor: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    iconColor: PropTypes.string,
+    darkBorderColor: PropTypes.string,
+    darkBackgroundColor: PropTypes.string,
+    darkIconColor: PropTypes.string
+  })
+};
+
+Chevron.propTypes = {
+  isExpanded: PropTypes.bool
+};
+
+export { AISummaryBase };
+export const AISummary = withElementWrapper(AISummaryBase);

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { withStore } from "../../../../../storybook";
+import { generateStory, generateStoryElementData } from "../../../Fixture";
+import { AISummary } from "./index";
+import { color, text, select } from "@storybook/addon-knobs";
+
+const element = generateStoryElementData("summary");
+// Override published-at to a date after the Feb 2025 cutoff
+const story = generateStory(undefined, { "published-at": new Date("2025-03-01").getTime() });
+
+withStore("Atoms/Story Elements/AI Summary", {}, null).add("Default", () => (
+  <AISummary
+    element={element}
+    story={story}
+    opts={{
+      headline: text("Headline", "AI Summary"),
+      subtitle: text("Subtitle", "AI-generated overview for quick reading."),
+      iconType: select("Icon Type", ["star", "sparkle", "wand", "diamond"], "star"),
+      expandOnStart: true
+    }}
+    css={{
+      borderColor: color("Border Color", "#4860BC"),
+      backgroundColor: color("Background Color", "#f2f2f2"),
+      iconColor: color("Icon Color", "#4860BC")
+    }}
+  />
+));

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

@@ -0,0 +1,49 @@
+# AlsoRead
+
+Component to display the also read element.
+
+## Usage
+
+#### AlsoRead story element with default template
+
+```jsx
+<AlsoRead story={story} element={element} template="default" />
+```
+
+#### AlsoRead story element with image right align template
+
+```jsx
+<AlsoRead story={story} element={element} template="imageRightAlign" />
+```
+
+#### AlsoRead story element with text left align template
+
+```jsx
+<AlsoRead element={element} template="textLeftAlign" />
+```
+
+#### AlsoRead story element with custom title
+
+```jsx
+const css = { title: "Headline" };
+
+<AlsoRead story={story} element={element} template="textLeftAlign" css={css} />;
+```
+
+#### AlsoRead story element with text color
+
+```jsx
+const css = { textcolor: "#333333" };
+
+<AlsoRead story={story} element={element} template="default" css={css} />;
+```
+
+#### Replace default also read element template with custom template passed using render
+
+```jsx
+const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+
+<AlsoRead element={element} render={customTemplate} />;
+```
+
+<!-- PROPS -->

package/src/components/Atoms/StoryElements/AlsoRead/also-read.m.css

@@ -0,0 +1,133 @@
+@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
+@value mobile from viewports;
+
+.card-image img {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}
+
+.default-text {
+  font-family: var(--arrow-typeface-secondary);
+}
+
+.alsoread-textLeftAlign .default-text,
+.alsoread-imageRightAlign .default-text {
+  font-size: var(--arrow-fs-xs);
+  font-weight: var(--arrow-fw-bold);
+  line-height: var(--arrow-lh-3);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-s);
+  }
+}
+
+.headline {
+  line-height: var(--arrow-lh-3);
+  font-weight: var(--arrow-fw-bold);
+  font-family: var(--arrow-typeface-primary);
+}
+
+.alsoread-default .headline {
+  padding-top: var(--arrow-spacing-xs);
+  font-size: var(--arrow-fs-s);
+  @media (min-width: mobile) {
+    padding-top: 0;
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.alsoread-textLeftAlign .headline {
+  margin-top: var(--arrow-spacing-xs);
+  font-size: var(--arrow-fs-m);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.alsoread-imageRightAlign .headline {
+  font-size: var(--arrow-fs-m);
+  margin-right: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    font-size: var(--arrow-fs-l);
+  }
+}
+
+.card-image-wrapper {
+  position: relative;
+}
+
+.alsoread-default .card-image-wrapper {
+  @media (min-width: mobile) {
+    flex-basis: 30%;
+    margin-right: var(--arrow-spacing-m);
+  }
+}
+
+.card-image {
+  display: block;
+  position: relative;
+}
+
+.alsoread-imageRightAlign .card-image,
+.alsoread-imageRightAlign .card-image-wrapper .image {
+  padding-top: 75%;
+  @media (min-width: mobile) {
+    padding-top: 56.25%;
+  }
+}
+
+.alsoread-default {
+  border: solid 1px var(--arrow-c-brand5);
+  display: block;
+  padding: var(--arrow-spacing-m);
+  @media (min-width: mobile) {
+    display: flex;
+  }
+}
+
+.alsoread-imageRightAlign .content-wrapper {
+  display: flex;
+  margin-top: var(--arrow-spacing-xs);
+}
+
+.alsoread-default .content-wrapper {
+  @media (min-width: mobile) {
+    flex-basis: 70%;
+  }
+}
+
+.alsoread-default .card-image,
+.alsoread .card-image-wrapper .image,
+.alsoread-default .card-image-wrapper .image {
+  padding-top: 56.25%;
+}
+
+.card-image-wrapper .image div {
+  background: var(--arrow-c-mono6);
+}
+
+.alsoread-imageRightAlign .card-image-wrapper .image :global(.arr--fallback-image),
+.alsoread-imageRightAlign .card-image-wrapper .image,
+.alsoread-imageRightAlign .card-image-wrapper .card-image {
+  width: 100px;
+  height: 75px;
+  @media (min-width: mobile) {
+    width: 160px;
+    height: 90px;
+  }
+}
+html[dir="rtl"] {
+  .content-wrapper {
+    margin-right: var(--arrow-spacing-m);
+  }
+  .card-image-wrapper {
+    margin-right: 0;
+  }
+}
+
+.dark {
+  color: var(--arrow-c-mono1);
+}
+.light {
+  color: var(--arrow-c-invert-mono1);
+}

package/src/components/Atoms/StoryElements/AlsoRead/also-read.test.js

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { generateStoryElementData, generateStory, generateStore } from "../../../Fixture";
+import { AlsoRead } from "./index";
+
+import { Provider } from "react-redux";
+import { Link } from "@quintype/components";
+
+const element = generateStoryElementData("also-read");
+const story = generateStory();
+
+describe("Alsoread Story Element", () => {
+  it("Should render default template", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AlsoRead story={story} element={element} template="default" />
+      </Provider>
+    );
+    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-default/);
+  });
+
+  it("Should render image right align template", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AlsoRead story={story} element={element} template="imageRightAlign" />
+      </Provider>
+    );
+    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-imageRightAlign/);
+  });
+
+  it("Should render text left align template", () => {
+    const wrapper = mount(
+      <Provider store={generateStore}>
+        <AlsoRead story={story} element={element} template="textLeftAlign" />
+      </Provider>
+    );
+    expect(wrapper.find(Link).prop("className")).toMatch(/alsoread-textLeftAlign/);
+  });
+
+  it("Should render default template with fallback image", () => {
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <AlsoRead element={element} template="default" css={{ textColor: "#3333" }} />
+      </Provider>
+    );
+    expect(wrapper.html()).toBe(
+      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER "><div class="also-read-m_card-image-wrapper__3GFzu"><div class="arr--fallback-also-read also-read-m_image__2jdRP also-read-m_card-image__3CwAv"><div class="arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"><figure class="arr--fallback-svg fallback-m_fallback-svg__tK9fL"><svg width="40" height="30" viewBox="0 0 102 76" version="1.1"><g id="demo-home-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-377.000000, -314.000000)"><g id="Group-13" transform="translate(377.000000, 314.000000)"><path d="M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z" id="Combined-Shape" fill="#99B0CB" fill-rule="nonzero"></path><rect id="Rectangle-19" stroke="#99B0CB" stroke-width="3" x="1.5" y="1.5" width="99" height="73" rx="3"></rect></g></g></svg></figure></div></div></div><div class="also-read-m_content-wrapper__26AZX"><div style="color:#3333" class="also-read-m_headline__VzF-c also-read-m_dark__1pUib">How is the coronavirus impacting people with disabilities?</div></div></a>'
+    );
+  });
+
+  it("Should render default template with text color", () => {
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <AlsoRead story={story} element={element} template="default" css={{ textColor: "#3333" }} />
+      </Provider>
+    );
+    expect(wrapper.html()).toBe(
+      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-default__3cYER " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_card-image-wrapper__3GFzu"><figure class="also-read-m_card-image__3CwAv"><img src="//thumbor-stg.assettype.com/ace%2F2020-04%2F9adec2ac-d37c-496f-abcc-98309a4bb356%2Ff90b71cdf10141ff9913b72bcfd29768_18.jpg?w=480&amp;auto=format%2Ccompress" srcSet="//thumbor-stg.assettype.com/ace%2F2020-04%2F9adec2ac-d37c-496f-abcc-98309a4bb356%2Ff90b71cdf10141ff9913b72bcfd29768_18.jpg?w=250&amp;auto=format%2Ccompress 250w,//thumbor-stg.assettype.com/ace%2F2020-04%2F9adec2ac-d37c-496f-abcc-98309a4bb356%2Ff90b71cdf10141ff9913b72bcfd29768_18.jpg?w=480&amp;auto=format%2Ccompress 480w,//thumbor-stg.assettype.com/ace%2F2020-04%2F9adec2ac-d37c-496f-abcc-98309a4bb356%2Ff90b71cdf10141ff9913b72bcfd29768_18.jpg?w=640&amp;auto=format%2Ccompress 640w" sizes="(max-width: 768px) 90vw, 20vw" alt="hero image caption" width="100%" height="100%" class="qt-image arr-image-placeholder "/></figure></div><div class="also-read-m_content-wrapper__26AZX"><div style="color:#3333" class="also-read-m_headline__VzF-c also-read-m_dark__1pUib">How is the coronavirus impacting people with disabilities?</div></div></a>'
+    );
+  });
+
+  it("Should render text left align template with custom title", () => {
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <AlsoRead story={story} element={element} template="textLeftAlign" opts={{ title: "Also-Read" }} />
+      </Provider>
+    );
+    expect(wrapper.html()).toBe(
+      '<a data-test-id="also-read" aria-label="also-read" class="arrow-component arr--also-read-element also-read-m_alsoread-textLeftAlign__S0Dxe " href="https://ace-web.qtstage.io/anything/coronavirus/how-is-the-coronavirus-impacting-people-with-disabilities"><div class="also-read-m_default-text__hp2dp also-read-m_dark__1pUib">Also-Read</div><div class="also-read-m_content-wrapper__26AZX"><div class="also-read-m_headline__VzF-c also-read-m_dark__1pUib">How is the coronavirus impacting people with disabilities?</div></div></a>'
+    );
+  });
+
+  it("Should render custom template", () => {
+    // eslint-disable-next-line react/prop-types
+    const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
+    const wrapper = shallow(
+      <Provider store={generateStore}>
+        <AlsoRead element={element} render={customTemplate} />
+      </Provider>
+    );
+    expect(wrapper.html()).toBe("<h3>How is the coronavirus impacting people with disabilities?</h3>");
+  });
+});