@digigov/react-icons 2.0.0-af1b5f33 → 2.0.0-b3ec0588

package/src/AccessibilityIcon/__snapshots__/index.test.tsx.snap

@@ -41,28 +41,28 @@ exports[`renders the AccessibilityIcon with no props 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop size=l 1`] = `
+exports[`renders the AccessibilityIcon with prop color=dark 1`] = `
 <AccessibilityIcon
-  size="lg"
+  color="dark"
 >
   <ForwardRef(Icon)
+    color="dark"
     icon="accessibility"
-    size="lg"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      size="lg"
+      color="dark"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--lg ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--dark ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--lg ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--dark ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -86,28 +86,28 @@ exports[`renders the AccessibilityIcon with prop size=l 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop size=s 1`] = `
+exports[`renders the AccessibilityIcon with prop color=error 1`] = `
 <AccessibilityIcon
-  size="sm"
+  color="error"
 >
   <ForwardRef(Icon)
+    color="error"
     icon="accessibility"
-    size="sm"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      size="sm"
+      color="error"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--sm ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--error ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--sm ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--error ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -131,28 +131,31 @@ exports[`renders the AccessibilityIcon with prop size=s 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=dark 1`] = `
+exports[`renders the AccessibilityIcon with prop color=error and size= xl 1`] = `
 <AccessibilityIcon
-  variant="dark"
+  color="warning"
+  size="xl"
 >
   <ForwardRef(Icon)
+    color="warning"
     icon="accessibility"
-    variant="dark"
+    size="xl"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      variant="dark"
+      color="warning"
+      size="xl"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--dark ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--dark ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -176,28 +179,28 @@ exports[`renders the AccessibilityIcon with prop variant=dark 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=error 1`] = `
+exports[`renders the AccessibilityIcon with prop color=primary 1`] = `
 <AccessibilityIcon
-  variant="error"
+  color="primary"
 >
   <ForwardRef(Icon)
+    color="primary"
     icon="accessibility"
-    variant="error"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      variant="error"
+      color="primary"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--error ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--primary ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--error ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--primary ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -221,31 +224,28 @@ exports[`renders the AccessibilityIcon with prop variant=error 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=error and size= xl 1`] = `
+exports[`renders the AccessibilityIcon with prop color=success 1`] = `
 <AccessibilityIcon
-  size="xl"
-  variant="warning"
+  color="success"
 >
   <ForwardRef(Icon)
+    color="success"
     icon="accessibility"
-    size="xl"
-    variant="warning"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      size="xl"
-      variant="warning"
+      color="success"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--success ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--success ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -269,28 +269,31 @@ exports[`renders the AccessibilityIcon with prop variant=error and size= xl 1`]
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=primary 1`] = `
+exports[`renders the AccessibilityIcon with prop color=warning and size=s 1`] = `
 <AccessibilityIcon
-  variant="primary"
+  color="warning"
+  size="sm"
 >
   <ForwardRef(Icon)
+    color="warning"
     icon="accessibility"
-    variant="primary"
+    size="sm"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      variant="primary"
+      color="warning"
+      size="sm"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--primary ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--primary ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -314,28 +317,28 @@ exports[`renders the AccessibilityIcon with prop variant=primary 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=success 1`] = `
+exports[`renders the AccessibilityIcon with prop size=l 1`] = `
 <AccessibilityIcon
-  variant="success"
+  size="lg"
 >
   <ForwardRef(Icon)
     icon="accessibility"
-    variant="success"
+    size="lg"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
-      variant="success"
+      size="lg"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--success ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--lg ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--success ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--lg ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -359,31 +362,28 @@ exports[`renders the AccessibilityIcon with prop variant=success 1`] = `
 </AccessibilityIcon>
 `;
 
-exports[`renders the AccessibilityIcon with prop variant=warning and size=s 1`] = `
+exports[`renders the AccessibilityIcon with prop size=s 1`] = `
 <AccessibilityIcon
   size="sm"
-  variant="warning"
 >
   <ForwardRef(Icon)
     icon="accessibility"
     size="sm"
-    variant="warning"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--accessibility"
       size="sm"
-      variant="warning"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+        className="ds-svg-icon--accessibility ds-svg-icon--sm ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--accessibility ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+          className="ds-svg-icon--accessibility ds-svg-icon--sm ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >

package/src/AccessibilityIcon/index.test.tsx

@@ -12,25 +12,25 @@ it('renders the AccessibilityIcon with prop size=s', () => {
 it('renders the AccessibilityIcon with prop size=l', () => {
   expect(mount(<AccessibilityIcon size="lg" />)).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=dark', () => {
-  expect(mount(<AccessibilityIcon variant="dark" />)).toMatchSnapshot();
+it('renders the AccessibilityIcon with prop color=dark', () => {
+  expect(mount(<AccessibilityIcon color="dark" />)).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=primary', () => {
-  expect(mount(<AccessibilityIcon variant="primary" />)).toMatchSnapshot();
+it('renders the AccessibilityIcon with prop color=primary', () => {
+  expect(mount(<AccessibilityIcon color="primary" />)).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=success', () => {
-  expect(mount(<AccessibilityIcon variant="success" />)).toMatchSnapshot();
+it('renders the AccessibilityIcon with prop color=success', () => {
+  expect(mount(<AccessibilityIcon color="success" />)).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=error', () => {
-  expect(mount(<AccessibilityIcon variant="error" />)).toMatchSnapshot();
+it('renders the AccessibilityIcon with prop color=error', () => {
+  expect(mount(<AccessibilityIcon color="error" />)).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=warning and size=s', () => {
+it('renders the AccessibilityIcon with prop color=warning and size=s', () => {
   expect(
-    mount(<AccessibilityIcon variant="warning" size="sm" />)
+    mount(<AccessibilityIcon color="warning" size="sm" />)
   ).toMatchSnapshot();
 });
-it('renders the AccessibilityIcon with prop variant=error and size= xl', () => {
+it('renders the AccessibilityIcon with prop color=error and size= xl', () => {
   expect(
-    mount(<AccessibilityIcon variant="warning" size="xl" />)
+    mount(<AccessibilityIcon color="warning" size="xl" />)
   ).toMatchSnapshot();
 });

package/src/BurgerIcon/__snapshots__/index.test.tsx.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the BurgerIcon prop variant= "error" 1`] = `
+exports[`renders the BurgerIcon prop color= "error" 1`] = `
 <BurgerIcon
-  variant="error"
+  color="error"
 >
   <ForwardRef(Icon)
+    color="error"
     icon="burger"
-    variant="error"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--burger"
-      variant="error"
+      color="error"
     >
       <ForwardRef(Base)
         aria-hidden="true"
@@ -53,17 +53,17 @@ exports[`renders the BurgerIcon prop variant= "error" 1`] = `
 </BurgerIcon>
 `;
 
-exports[`renders the BurgerIcon prop variant= "light" 1`] = `
+exports[`renders the BurgerIcon prop color= "light" 1`] = `
 <BurgerIcon
-  variant="light"
+  color="light"
 >
   <ForwardRef(Icon)
+    color="light"
     icon="burger"
-    variant="light"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--burger"
-      variant="light"
+      color="light"
     >
       <ForwardRef(Base)
         aria-hidden="true"
@@ -106,19 +106,19 @@ exports[`renders the BurgerIcon prop variant= "light" 1`] = `
 </BurgerIcon>
 `;
 
-exports[`renders the BurgerIcon props active variant= "light" 1`] = `
+exports[`renders the BurgerIcon props active color= "light" 1`] = `
 <BurgerIcon
   active={true}
-  variant="light"
+  color="light"
 >
   <ForwardRef(Icon)
     active={true}
+    color="light"
     icon="burger"
-    variant="light"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--burger"
-      variant="light"
+      color="light"
     >
       <ForwardRef(Base)
         aria-hidden="true"
@@ -266,17 +266,17 @@ exports[`renders the BurgerIcon with prop active=true 1`] = `
 </BurgerIcon>
 `;
 
-exports[`renders the BurgerIcon with prop variant=dark 1`] = `
+exports[`renders the BurgerIcon with prop color=dark 1`] = `
 <BurgerIcon
-  variant="dark"
+  color="dark"
 >
   <ForwardRef(Icon)
+    color="dark"
     icon="burger"
-    variant="dark"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--burger"
-      variant="dark"
+      color="dark"
     >
       <ForwardRef(Base)
         aria-hidden="true"

package/src/BurgerIcon/index.test.tsx

@@ -11,16 +11,16 @@ it('renders the BurgerIcon with prop active=true', () => {
   expect(mount(<BurgerIcon active={true} />)).toMatchSnapshot();
 });
 
-it('renders the BurgerIcon with prop variant=dark', () => {
-  expect(mount(<BurgerIcon variant="dark" />)).toMatchSnapshot();
+it('renders the BurgerIcon with prop color=dark', () => {
+  expect(mount(<BurgerIcon color="dark" />)).toMatchSnapshot();
 });
 
-it('renders the BurgerIcon prop variant= "light"', () => {
-  expect(mount(<BurgerIcon variant="light" />)).toMatchSnapshot();
+it('renders the BurgerIcon prop color= "light"', () => {
+  expect(mount(<BurgerIcon color="light" />)).toMatchSnapshot();
 });
-it('renders the BurgerIcon prop variant= "error"', () => {
-  expect(mount(<BurgerIcon variant="error" />)).toMatchSnapshot();
+it('renders the BurgerIcon prop color= "error"', () => {
+  expect(mount(<BurgerIcon color="error" />)).toMatchSnapshot();
 });
-it('renders the BurgerIcon props active variant= "light"', () => {
-  expect(mount(<BurgerIcon active variant="light" />)).toMatchSnapshot();
+it('renders the BurgerIcon props active color= "light"', () => {
+  expect(mount(<BurgerIcon active color="light" />)).toMatchSnapshot();
 });

package/src/CancelIcon/__snapshots__/index.test.tsx.snap

@@ -33,28 +33,31 @@ exports[`renders the CancelIcon with no props 1`] = `
 </CancelIcon>
 `;
 
-exports[`renders the CancelIcon with prop size=m 1`] = `
+exports[`renders the CancelIcon with prop color=error and size= xl 1`] = `
 <CancelIcon
-  size="md"
+  color="warning"
+  size="xl"
 >
   <ForwardRef(Icon)
+    color="warning"
     icon="cancel"
-    size="md"
+    size="xl"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--cancel"
-      size="md"
+      color="warning"
+      size="xl"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--cancel ds-svg-icon--md ds-svg-icon"
+        className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--cancel ds-svg-icon--md ds-svg-icon"
+          className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -70,28 +73,28 @@ exports[`renders the CancelIcon with prop size=m 1`] = `
 </CancelIcon>
 `;
 
-exports[`renders the CancelIcon with prop size=xl 1`] = `
+exports[`renders the CancelIcon with prop color=light 1`] = `
 <CancelIcon
-  size="xl"
+  color="light"
 >
   <ForwardRef(Icon)
+    color="light"
     icon="cancel"
-    size="xl"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--cancel"
-      size="xl"
+      color="light"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--cancel ds-svg-icon--xl ds-svg-icon"
+        className="ds-svg-icon--cancel ds-svg-icon--light ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--cancel ds-svg-icon--xl ds-svg-icon"
+          className="ds-svg-icon--cancel ds-svg-icon--light ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -107,31 +110,28 @@ exports[`renders the CancelIcon with prop size=xl 1`] = `
 </CancelIcon>
 `;
 
-exports[`renders the CancelIcon with prop variant=error and size= xl 1`] = `
+exports[`renders the CancelIcon with prop color=warning 1`] = `
 <CancelIcon
-  size="xl"
-  variant="warning"
+  color="warning"
 >
   <ForwardRef(Icon)
+    color="warning"
     icon="cancel"
-    size="xl"
-    variant="warning"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--cancel"
-      size="xl"
-      variant="warning"
+      color="warning"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+        className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
+          className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -147,28 +147,31 @@ exports[`renders the CancelIcon with prop variant=error and size= xl 1`] = `
 </CancelIcon>
 `;
 
-exports[`renders the CancelIcon with prop variant=light 1`] = `
+exports[`renders the CancelIcon with prop color=warning and size=s 1`] = `
 <CancelIcon
-  variant="light"
+  color="warning"
+  size="sm"
 >
   <ForwardRef(Icon)
+    color="warning"
     icon="cancel"
-    variant="light"
+    size="sm"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--cancel"
-      variant="light"
+      color="warning"
+      size="sm"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--cancel ds-svg-icon--light ds-svg-icon"
+        className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--cancel ds-svg-icon--light ds-svg-icon"
+          className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -184,28 +187,28 @@ exports[`renders the CancelIcon with prop variant=light 1`] = `
 </CancelIcon>
 `;
 
-exports[`renders the CancelIcon with prop variant=warning 1`] = `
+exports[`renders the CancelIcon with prop size=m 1`] = `
 <CancelIcon
-  variant="warning"
+  size="md"
 >
   <ForwardRef(Icon)
     icon="cancel"
-    variant="warning"
+    size="md"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--cancel"
-      variant="warning"
+      size="md"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon"
+        className="ds-svg-icon--cancel ds-svg-icon--md ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon"
+          className="ds-svg-icon--cancel ds-svg-icon--md ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -221,31 +224,28 @@ exports[`renders the CancelIcon with prop variant=warning 1`] = `
 </CancelIcon>
 `;
 
-exports[`renders the CancelIcon with prop variant=warning and size=s 1`] = `
+exports[`renders the CancelIcon with prop size=xl 1`] = `
 <CancelIcon
-  size="sm"
-  variant="warning"
+  size="xl"
 >
   <ForwardRef(Icon)
     icon="cancel"
-    size="sm"
-    variant="warning"
+    size="xl"
   >
     <ForwardRef(SvgIcon)
       className="ds-svg-icon--cancel"
-      size="sm"
-      variant="warning"
+      size="xl"
     >
       <ForwardRef(Base)
         aria-hidden="true"
         as="svg"
-        className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+        className="ds-svg-icon--cancel ds-svg-icon--xl ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <svg
           aria-hidden="true"
-          className="ds-svg-icon--cancel ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
+          className="ds-svg-icon--cancel ds-svg-icon--xl ds-svg-icon"
           focusable="false"
           viewBox="0 0 24 24"
         >