@digigov/react-core 0.17.2 → 0.18.1

package/Card/__snapshots__/index.test.tsx.snap

@@ -4,29 +4,39 @@ exports[`renders the Card with callToActon props 1`] = `
 <ForwardRef(Card)
   callToAction={true}
 >
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card--cta govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card--cta govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;
 
 exports[`renders the Card with no props 1`] = `
 <ForwardRef(Card)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;
 
@@ -35,15 +45,20 @@ exports[`renders the Card with variant="border" and borderColor="dark" props 1`]
   borderColor="dark"
   variant="border"
 >
-  <div
-    className="govgr-card--border govgr-card--border-dark govgr-card"
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--border-dark govgr-card--border govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card--border-dark govgr-card--border govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;
 
@@ -52,15 +67,20 @@ exports[`renders the Card with variant="border" and borderColor="gray" props 1`]
   borderColor="gray"
   variant="border"
 >
-  <div
-    className="govgr-card--border govgr-card--border-gray govgr-card"
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--border-gray govgr-card--border govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card--border-gray govgr-card--border govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;
 
@@ -68,15 +88,20 @@ exports[`renders the Card with variant="border" props 1`] = `
 <ForwardRef(Card)
   variant="border"
 >
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card--border govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card--border govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;
 
@@ -86,15 +111,20 @@ exports[`renders the Card with variant="border-top" and borderColor="dark" callT
   callToAction={true}
   variant="border-top"
 >
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card--border-top govgr-card--border-dark govgr-card--cta govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card--border-top govgr-card--border-dark govgr-card--cta govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;
 
@@ -103,15 +133,20 @@ exports[`renders the Card with variant="border-top" and borderColor="dark" props
   borderColor="dark"
   variant="border-top"
 >
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card--border-top govgr-card--border-dark govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card--border-top govgr-card--border-dark govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;
 
@@ -120,15 +155,20 @@ exports[`renders the Card with variant="border-top" and borderColor="gray" props
   borderColor="gray"
   variant="border-top"
 >
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card--border-top govgr-card--border-gray govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card--border-top govgr-card--border-gray govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;
 
@@ -136,15 +176,20 @@ exports[`renders the Card with variant="border-top" props 1`] = `
 <ForwardRef(Card)
   variant="border-top"
 >
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card--border-top govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card--border-top govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;
 
@@ -152,14 +197,19 @@ exports[`renders the Card with variant="divider" props 1`] = `
 <ForwardRef(Card)
   variant="divider"
 >
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card--divider govgr-card"
   >
     <div
-      className="govgr-card__body"
+      className="govgr-card--divider govgr-card"
     >
-      hello
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(Card)>
 `;

package/CardAction/__snapshots__/index.test.tsx.snap

@@ -2,10 +2,15 @@
 
 exports[`renders the CardAction with no props 1`] = `
 <ForwardRef(CardText)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card__action"
   >
-    hello
-  </div>
+    <div
+      className="govgr-card__action"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(CardText)>
 `;

package/CardHeading/__snapshots__/index.test.tsx.snap

@@ -2,12 +2,19 @@
 
 exports[`renders the CardAction with no props 1`] = `
 <ForwardRef(CardHeading)>
-  <div
+  <ForwardRef(Base)
     aria-level={2}
+    as="div"
     className="govgr-card__heading"
     role="heading"
   >
-    hello
-  </div>
+    <div
+      aria-level={2}
+      className="govgr-card__heading"
+      role="heading"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(CardHeading)>
 `;

package/CardText/__snapshots__/index.test.tsx.snap

@@ -2,10 +2,15 @@
 
 exports[`renders the CardAction with no props 1`] = `
 <ForwardRef(CardText)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-card__text"
   >
-    hello
-  </div>
+    <div
+      className="govgr-card__text"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(CardText)>
 `;

package/CaretIcon/__snapshots__/index.test.tsx.snap

@@ -7,16 +7,24 @@ exports[`renders the CaretIcon with direction down prop 1`] = `
   <ForwardRef(SvgIcon)
     className="govgr-caret--down"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-caret--down govgr-svg-icon"
+      as="svg"
+      className="govgr-caret--down govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <path
-        d="M22,6H2l10,12L22,6z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-caret--down govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M22,6H2l10,12L22,6z"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CaretIcon)>
 `;
@@ -28,16 +36,24 @@ exports[`renders the CaretIcon with direction right prop 1`] = `
   <ForwardRef(SvgIcon)
     className="govgr-caret--right"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-caret--right govgr-svg-icon"
+      as="svg"
+      className="govgr-caret--right govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <path
-        d="M6,2v20l12-10L6,2z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-caret--right govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M6,2v20l12-10L6,2z"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CaretIcon)>
 `;
@@ -49,16 +65,24 @@ exports[`renders the CaretIcon with direction up prop 1`] = `
   <ForwardRef(SvgIcon)
     className="govgr-caret--up"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-caret--up govgr-svg-icon"
+      as="svg"
+      className="govgr-caret--up govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <path
-        d="M2,18h20L12,6L2,18z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-caret--up govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M2,18h20L12,6L2,18z"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CaretIcon)>
 `;
@@ -68,16 +92,24 @@ exports[`renders the CaretIcon with no props, direction prop is left by default
   <ForwardRef(SvgIcon)
     className="govgr-caret--left"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-caret--left govgr-svg-icon"
+      as="svg"
+      className="govgr-caret--left govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <path
-        d="M18,22V2L6,12L18,22z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-caret--left govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M18,22V2L6,12L18,22z"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CaretIcon)>
 `;