@digigov/react-core 0.17.2 → 0.18.1

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

@@ -2,17 +2,27 @@
 
 exports[`renders the CheckIcon with no props 1`] = `
 <ForwardRef(CheckIcon)>
-  <ForwardRef(SvgIcon)>
-    <svg
+  <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
+  >
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -22,18 +32,27 @@ exports[`renders the CheckIcon with prop size=l 1`] = `
   size="l"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     size="l"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--l govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--l govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--l govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -43,18 +62,27 @@ exports[`renders the CheckIcon with prop size=m 1`] = `
   size="m"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     size="m"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--m govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--m govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -64,18 +92,27 @@ exports[`renders the CheckIcon with prop size=s 1`] = `
   size="s"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     size="s"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--s govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--s govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--s govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -85,18 +122,27 @@ exports[`renders the CheckIcon with prop size=xl 1`] = `
   size="xl"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     size="xl"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--xl govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--xl govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--xl govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -106,18 +152,27 @@ exports[`renders the CheckIcon with prop variant=dark 1`] = `
   variant="dark"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     variant="dark"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--dark govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--dark govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--dark govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -127,18 +182,27 @@ exports[`renders the CheckIcon with prop variant=error 1`] = `
   variant="error"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     variant="error"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--error govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--error govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--error govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -149,19 +213,28 @@ exports[`renders the CheckIcon with prop variant=error and size= xl 1`] = `
   variant="warning"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     size="xl"
     variant="warning"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -171,18 +244,27 @@ exports[`renders the CheckIcon with prop variant=focus 1`] = `
   variant="focus"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     variant="focus"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--focus govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--focus govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--focus govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -192,18 +274,27 @@ exports[`renders the CheckIcon with prop variant=gray 1`] = `
   variant="gray"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     variant="gray"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--gray govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--gray govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--gray govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -213,18 +304,27 @@ exports[`renders the CheckIcon with prop variant=light 1`] = `
   variant="light"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     variant="light"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--light govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--light govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--light govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -234,18 +334,27 @@ exports[`renders the CheckIcon with prop variant=primary 1`] = `
   variant="primary"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     variant="primary"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--primary govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--primary govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--primary govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -255,18 +364,27 @@ exports[`renders the CheckIcon with prop variant=success 1`] = `
   variant="success"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     variant="success"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--success govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--success govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--success govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -276,18 +394,27 @@ exports[`renders the CheckIcon with prop variant=warning 1`] = `
   variant="warning"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     variant="warning"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--warning govgr-svg-icon--m govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--warning govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--warning govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;
@@ -298,19 +425,28 @@ exports[`renders the CheckIcon with prop variant=warning and size=s 1`] = `
   variant="warning"
 >
   <ForwardRef(SvgIcon)
+    className="govgr-svg-icon--check"
     size="s"
     variant="warning"
   >
-    <svg
+    <ForwardRef(Base)
       aria-hidden="true"
-      className="govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon--check govgr-svg-icon"
+      as="svg"
+      className="govgr-svg-icon--check govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
-      <polygon
-        points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        className="govgr-svg-icon--check govgr-svg-icon--warning govgr-svg-icon--s govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <polygon
+          points="9.49 14.94 4.16 9.67 1.84 12.01 9.5 19.6 22.16 7.05 19.84 4.7 9.5 14.94"
+        />
+      </svg>
+    </ForwardRef(Base)>
   </ForwardRef(SvgIcon)>
 </ForwardRef(CheckIcon)>
 `;

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

@@ -2,34 +2,50 @@
 
 exports[`renders the Checkbox with no props 1`] = `
 <ForwardRef(Checkbox)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-checkboxes"
   >
-    hello
-  </div>
+    <div
+      className="govgr-checkboxes"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(Checkbox)>
 `;
 
 exports[`renders the Checkbox with no props and CheckboxItem 1`] = `
 <ForwardRef(Checkbox)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-checkboxes"
   >
-    <ForwardRef(CheckboxItem)>
-      <div
-        className="govgr-checkboxes__item"
-      >
-        <input
-          className="govgr-checkboxes__input"
-          type="checkbox"
-        />
-        <label
-          className="govgr-label govgr-checkboxes__label"
+    <div
+      className="govgr-checkboxes"
+    >
+      <ForwardRef(CheckboxItem)>
+        <div
+          className="govgr-checkboxes__item"
         >
-          This is item 1
-        </label>
-      </div>
-    </ForwardRef(CheckboxItem)>
-  </div>
+          <label
+            className="govgr-label govgr-checkboxes__label"
+          >
+            This is item 1
+            <ForwardRef(Base)
+              as="input"
+              className="govgr-checkboxes__input"
+              type="checkbox"
+            >
+              <input
+                className="govgr-checkboxes__input"
+                type="checkbox"
+              />
+            </ForwardRef(Base)>
+          </label>
+        </div>
+      </ForwardRef(CheckboxItem)>
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(Checkbox)>
 `;

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

@@ -1,39 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the Blockquote with name prop 1`] = `
-<ForwardRef(CheckboxConditional)
-  name="some-name"
->
-  <div
-    className="govgr-checkboxes__conditional"
-  >
-    <div
-      className="govgr-field"
-    >
-      <label
-        className="govgr-label"
-      >
-        hello
-      </label>
-    </div>
-  </div>
-</ForwardRef(CheckboxConditional)>
-`;
-
 exports[`renders the Blockquote with no props 1`] = `
 <ForwardRef(CheckboxConditional)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-checkboxes__conditional"
   >
     <div
-      className="govgr-field"
+      className="govgr-checkboxes__conditional"
     >
-      <label
-        className="govgr-label"
+      <div
+        className="govgr-field"
       >
-        hello
-      </label>
+        <label
+          className="govgr-label"
+        >
+          hello
+        </label>
+      </div>
     </div>
-  </div>
+  </ForwardRef(Base)>
 </ForwardRef(CheckboxConditional)>
 `;