@digigov/react-core 0.17.2 → 0.18.1

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

@@ -2,12 +2,19 @@
 
 exports[`renders the SkipLink with no props 1`] = `
 <ForwardRef(SkipLink)>
-  <a
+  <ForwardRef(Base)
+    as="a"
     className="govgr--skip-link"
     href="#main-content"
     tabIndex={0}
   >
-    hello
-  </a>
+    <a
+      className="govgr--skip-link"
+      href="#main-content"
+      tabIndex={0}
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
 </ForwardRef(SkipLink)>
 `;

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

@@ -2,10 +2,15 @@
 
 exports[`renders the SummaryList with no props 1`] = `
 <ForwardRef(SummaryList)>
-  <dl
+  <ForwardRef(Base)
+    as="dl"
     className="govgr-summary-list"
   >
-    hello
-  </dl>
+    <dl
+      className="govgr-summary-list"
+    >
+      hello
+    </dl>
+  </ForwardRef(Base)>
 </ForwardRef(SummaryList)>
 `;

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

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

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

@@ -2,10 +2,15 @@
 
 exports[`renders the SummaryListItemAction with no props 1`] = `
 <ForwardRef(SummaryListItemAction)>
-  <dd
+  <ForwardRef(Base)
+    as="dd"
     className="govgr-summary-list__actions"
   >
-    hello
-  </dd>
+    <dd
+      className="govgr-summary-list__actions"
+    >
+      hello
+    </dd>
+  </ForwardRef(Base)>
 </ForwardRef(SummaryListItemAction)>
 `;

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

@@ -2,10 +2,15 @@
 
 exports[`renders the SummaryListItemKey with no props 1`] = `
 <ForwardRef(SummaryListItemKey)>
-  <dt
+  <ForwardRef(Base)
+    as="dt"
     className="govgr-summary-list__key"
   >
-    hello
-  </dt>
+    <dt
+      className="govgr-summary-list__key"
+    >
+      hello
+    </dt>
+  </ForwardRef(Base)>
 </ForwardRef(SummaryListItemKey)>
 `;

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

@@ -2,10 +2,15 @@
 
 exports[`renders the SummaryListItemValue with no props 1`] = `
 <ForwardRef(SummaryListItemValue)>
-  <dd
+  <ForwardRef(Base)
+    as="dd"
     className="govgr-summary-list__value"
   >
-    hello
-  </dd>
+    <dd
+      className="govgr-summary-list__value"
+    >
+      hello
+    </dd>
+  </ForwardRef(Base)>
 </ForwardRef(SummaryListItemValue)>
 `;

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

@@ -2,12 +2,20 @@
 
 exports[`renders the SvgIcon with no props 1`] = `
 <ForwardRef(SvgIcon)>
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
-  />
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    />
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -15,14 +23,22 @@ exports[`renders the SvgIcon with prop size=l 1`] = `
 <ForwardRef(SvgIcon)
   size="l"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--l govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--l govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--l govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -30,14 +46,22 @@ exports[`renders the SvgIcon with prop size=m 1`] = `
 <ForwardRef(SvgIcon)
   size="m"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--m govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--m govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -45,14 +69,22 @@ exports[`renders the SvgIcon with prop size=s 1`] = `
 <ForwardRef(SvgIcon)
   size="s"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--s govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--s govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--s govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -60,14 +92,22 @@ exports[`renders the SvgIcon with prop size=xl 1`] = `
 <ForwardRef(SvgIcon)
   size="xl"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--xl govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--xl govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--xl govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -75,14 +115,22 @@ exports[`renders the SvgIcon with prop variant=dark 1`] = `
 <ForwardRef(SvgIcon)
   variant="dark"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--dark govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--dark govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -90,14 +138,22 @@ exports[`renders the SvgIcon with prop variant=error 1`] = `
 <ForwardRef(SvgIcon)
   variant="error"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--error govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--error govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--error govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -106,14 +162,22 @@ exports[`renders the SvgIcon with prop variant=error and size= xl 1`] = `
   size="xl"
   variant="warning"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
+    as="svg"
     className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -121,14 +185,22 @@ exports[`renders the SvgIcon with prop variant=focus 1`] = `
 <ForwardRef(SvgIcon)
   variant="focus"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--focus govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--focus govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--focus govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -136,14 +208,22 @@ exports[`renders the SvgIcon with prop variant=gray 1`] = `
 <ForwardRef(SvgIcon)
   variant="gray"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--gray govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--gray govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--gray govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -151,14 +231,22 @@ exports[`renders the SvgIcon with prop variant=light 1`] = `
 <ForwardRef(SvgIcon)
   variant="light"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--light govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--light govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--light govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -166,14 +254,22 @@ exports[`renders the SvgIcon with prop variant=primary 1`] = `
 <ForwardRef(SvgIcon)
   variant="primary"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--primary govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--primary govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--primary govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -181,14 +277,22 @@ exports[`renders the SvgIcon with prop variant=success 1`] = `
 <ForwardRef(SvgIcon)
   variant="success"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--success govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--success govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--success govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -196,14 +300,22 @@ exports[`renders the SvgIcon with prop variant=warning 1`] = `
 <ForwardRef(SvgIcon)
   variant="warning"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
-    className="govgr-svg-icon--warning govgr-svg-icon--m govgr-svg-icon"
+    as="svg"
+    className="govgr-svg-icon--warning govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--warning govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;
 
@@ -212,13 +324,21 @@ exports[`renders the SvgIcon with prop variant=warning and size=s 1`] = `
   size="s"
   variant="warning"
 >
-  <svg
+  <ForwardRef(Base)
     aria-hidden="true"
+    as="svg"
     className="govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
-    hello
-  </svg>
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
 </ForwardRef(SvgIcon)>
 `;

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

@@ -4,11 +4,16 @@ exports[`renders the Table with dark variant prop 1`] = `
 <ForwardRef(Table)
   variant="dark"
 >
-  <table
+  <ForwardRef(Base)
+    as="table"
     className="govgr-table--dark govgr-table"
   >
-    hello
-  </table>
+    <table
+      className="govgr-table--dark govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
 </ForwardRef(Table)>
 `;
 
@@ -16,21 +21,31 @@ exports[`renders the Table with light variant prop 1`] = `
 <ForwardRef(Table)
   variant="light"
 >
-  <table
+  <ForwardRef(Base)
+    as="table"
     className="govgr-table--light govgr-table"
   >
-    hello
-  </table>
+    <table
+      className="govgr-table--light govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
 </ForwardRef(Table)>
 `;
 
 exports[`renders the Table with no props 1`] = `
 <ForwardRef(Table)>
-  <table
+  <ForwardRef(Base)
+    as="table"
     className="govgr-table"
   >
-    hello
-  </table>
+    <table
+      className="govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
 </ForwardRef(Table)>
 `;
 
@@ -38,11 +53,16 @@ exports[`renders the Table with zebra prop 1`] = `
 <ForwardRef(Table)
   zebra={true}
 >
-  <table
+  <ForwardRef(Base)
+    as="table"
     className="govgr-table--zebra govgr-table"
   >
-    hello
-  </table>
+    <table
+      className="govgr-table--zebra govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
 </ForwardRef(Table)>
 `;
 
@@ -50,10 +70,15 @@ exports[`renders the Table with zebra prop 2`] = `
 <ForwardRef(Table)
   verticalBorders={true}
 >
-  <table
+  <ForwardRef(Base)
+    as="table"
     className="govgr-table--with-vertical-header govgr-table--with-vertical-lines govgr-table"
   >
-    hello
-  </table>
+    <table
+      className="govgr-table--with-vertical-header govgr-table--with-vertical-lines govgr-table"
+    >
+      hello
+    </table>
+  </ForwardRef(Base)>
 </ForwardRef(Table)>
 `;

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

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