Add Furo styling to qiskit-call-to-action-item

src/qiskit_sphinx_theme/assets/styles/_custom-directives.scss

@@ -1,3 +1,17 @@
+// This creates a purple border at the bottom. We set the width to 0. The relevant rule
+// should change the width to 100% on hover so that it transitions in.
+@mixin purple-underline {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--qiskit-color-purple);
+  transition: width .250s ease-in-out;
+}
+
 // -------------------------------------------------------------------------------
 // qiskit-card
 // -------------------------------------------------------------------------------
@@ -21,18 +35,8 @@
     color: var(--color-sidebar-link-text);
   }
 
-  // This creates a purple border at the bottom. We set the width to 0, but to 100% on hover, so
-  // that it transitions in.
   &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 0;
-    height: 1px;
-    bottom: 0;
-    left: 0;
-    background-color: var(--qiskit-color-purple);
-    transition: width .250s ease-in-out;
+    @include purple-underline;
   }
 
   &:hover {
@@ -79,3 +83,55 @@
     max-width: 100%;
   }
 }
+
+// -------------------------------------------------------------------------------
+// qiskit-call-to-action
+// -------------------------------------------------------------------------------
+
+.qiskit-call-to-action-grid  {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+}
+
+.qiskit-call-to-action-item {
+  flex: 0 0 50%;
+  max-width: 50%;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  margin-bottom: 2rem;
+
+  p {
+    color: var(--color-sidebar-link-text);
+    font-size: 1.125rem;
+  }
+
+  a {
+    font-size: 1.125rem;
+    background-color: var(--color-sidebar-background);
+    color: var(--color-sidebar-link-text);
+    text-decoration: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    position: relative;
+    display: inline-block;
+    white-space: nowrap;
+    padding: 0.375rem 0.75rem;
+    padding-right: 2em;
+
+    background-size: 8px 14px;
+    background-position: center right 12px;
+    background-image: var(--qiskit-icon-chevron-right-purple);
+    background-repeat: no-repeat;
+  }
+
+  a::after {
+    @include purple-underline;
+  }
+
+  a:hover::after {
+    width: 100%;
+  }
+}

src/qiskit_sphinx_theme/assets/styles/_icons.scss

@@ -11,4 +11,7 @@ body {
   // _admonitions.scss for an explanation of why.
   --icon-warning: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><style type="text/css">.st0{fill:none;}.st1{fill:%23f1c21b;}.st2{fill:black;}</style><rect id="Transparent_Rectangle" class="st0" width="32" height="32"/><path id="Compound_Path" class="st1" d="M16,2C8.3,2,2,8.3,2,16s6.3,14,14,14s14-6.3,14-14C30,8.3,23.7,2,16,2z M14.9,8h2.2v11h-2.2V8z M16,25c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22c0.8,0,1.5,0.7,1.5,1.5S16.8,25,16,25z"/><path id="inner-path" class="st2" d="M17.5,23.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5S15.2,22,16,22C16.8,22,17.5,22.7,17.5,23.5z M17.1,8h-2.2v11h2.2V8z"/></svg>');
   --icon-failure: url('data:image/svg+xml;charset=utf-8,<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1 {fill: none;}</style></defs><rect id="inner-path" class="cls-1" x="14.9004" y="7.2004" width="2.1996" height="17.5994" transform="translate(-6.6275 16.0001) rotate(-45)"/><path d="M16,2A13.914,13.914,0,0,0,2,16,13.914,13.914,0,0,0,16,30,13.914,13.914,0,0,0,30,16,13.914,13.914,0,0,0,16,2Zm5.4449,21L9,10.5557,10.5557,9,23,21.4448Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>');
+
+  // TODO(#433): replace this with using the chevron icon from `icons.html` after dropping Pytorch.
+  --qiskit-icon-chevron-right-purple: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220.3%200.3%208.2%2014.4%22%20enable-background%3D%22new%200.3%200.3%208.2%2014.4%22%20xml%3Aspace%3D%22preserve%22%20sodipodi%3Adocname%3D%22chevron-right-purple.svg%22%20inkscape%3Aversion%3D%221.0.1%20(c497b03c%2C%202020-09-10)%22%3E%3Cmetadata%20id%3D%22metadata847%22%3E%3Crdf%3ARDF%3E%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%20%2F%3E%3C%2Fcc%3AWork%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%20id%3D%22defs845%22%3E%3C%2Fdefs%3E%3Csodipodi%3Anamedview%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20borderopacity%3D%221%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20inkscape%3Apageopacity%3D%220%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Awindow-width%3D%221237%22%20inkscape%3Awindow-height%3D%22480%22%20id%3D%22namedview843%22%20showgrid%3D%22false%22%20inkscape%3Azoom%3D%2251.041667%22%20inkscape%3Acx%3D%224.1%22%20inkscape%3Acy%3D%227.2%22%20inkscape%3Awindow-x%3D%220%22%20inkscape%3Awindow-y%3D%2223%22%20inkscape%3Awindow-maximized%3D%220%22%20inkscape%3Acurrent-layer%3D%22cta%22%2F%3E%3Ctitle%20id%3D%22title833%22%3EPage%201%3C%2Ftitle%3E%3Cdesc%20id%3D%22desc835%22%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%3Cg%20id%3D%22desktop%22%3E%3Cg%20id%3D%22_x30_1_x5F_Home%22%20transform%3D%22translate(-864.000000%2C%20-1683.000000)%22%3E%3Cg%20id%3D%22cta%22%20transform%3D%22translate(723%2C1668)%22%3E%3Cpolyline%20id%3D%22Page-1%22%20fill%3D%22none%22%20stroke%3D%22%23ee4c2c%22%20stroke-width%3D%222%22%20points%3D%22142%2C16%20148.1%2C22.5%20142%2C29%22%20style%3D%22stroke%3A%236929C4%3Bstroke-opacity%3A1%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
 }

src/qiskit_sphinx_theme/directives.py

@@ -16,7 +16,6 @@
 
 from docutils import nodes
 from docutils.parsers.rst import Directive, directives
-from docutils.statemachine import StringList
 
 if TYPE_CHECKING:
     import sphinx.application
@@ -71,28 +70,23 @@ class QiskitCallToActionItemDirective(Directive):
         "button_text": directives.unchanged,
     }
 
-    def run(self) -> list[nodes.paragraph]:
+    def run(self) -> list[nodes.Element]:
         description = self.options.get("description", "")
         header = self.options.get("header")
         if header is None:
             raise ValueError(f"`header` not set in {self.NAME} directive")
         button_link = self.options.get("button_link", "")
         button_text = self.options.get("button_text", "")
 
-        callout_rst = f"""
-.. raw:: html
-
+        html = f"""
     <div class="qiskit-call-to-action-item">
         <h3>{header}</h3>
         <p>{description}</p>
         <a href="{button_link}">{button_text}</a>
     </div>
 """
-
-        callout_list = StringList(callout_rst.splitlines())
-        callout = nodes.paragraph()
-        self.state.nested_parse(callout_list, self.content_offset, callout)
-        return [callout]
+        node = nodes.raw("", html, format="html")
+        return [node]
 
 
 class QiskitCallToActionGridDirective(Directive):

tests/js/snapshots.test.js

@@ -292,4 +292,7 @@ test("custom directives", async ({ page }) => {
   const cards = page.locator("section#qiskit-card");
   await cards.hover();
   await expect(cards).toHaveScreenshot();
+
+  const callToActions = page.locator("section#qiskit-call-to-action-item");
+  await expect(callToActions).toHaveScreenshot();
 });