feat(icons): hierarchy, layout_card and unlock (#1654)

Co-authored-by: tujoworker <tobias.hoegh@dnb.no>

.github/workflows/icons-lib.yml

@@ -114,7 +114,7 @@ jobs:
           path: ./packages/dnb-design-system-portal/public
 
       - name: Run visual tests
-        run: yarn workspace dnb-design-system-portal test:screenshots:ci:update
+        run: yarn workspace dnb-design-system-portal test:screenshots:ci
 
       - name: Commit updated snapshots
         run: yarn workspace @dnb/eufemia postbuild:commit

packages/dnb-eufemia/scripts/figma/version.lock

@@ -1 +1 @@
-{"441fb3d401607756e7399d9c32cc6ba3":"2362315839"}
+{"441fb3d401607756e7399d9c32cc6ba3":"2501724563"}

packages/dnb-eufemia/src/components/icon/__tests__/Icon.screenshot.test.js

@@ -122,7 +122,7 @@ describe('Icon screenshot', () => {
         display: 'inline-flex',
         'flex-wrap': 'wrap',
         width: '30rem',
-        color: 'tomato',
+        color: 'blue',
       },
       selector: '[data-visual-test="icon-all-secondary"]',
     })

packages/dnb-eufemia/src/icons/hierarchy.js

@@ -0,0 +1,31 @@
+/** This file is auto generated by convertSvgToJsx.js */
+
+import React from 'react'
+
+const hierarchy = (props) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#a)">
+      <path
+        d="M3.333 10.333V9.4c0-.515.418-.933.934-.933h7.466c.516 0 .934.418.934.933v.933M8 5.667v2.8M2.5 15h1.667a1.5 1.5 0 0 0 1.5-1.5v-1.667a1.5 1.5 0 0 0-1.5-1.5H2.5a1.5 1.5 0 0 0-1.5 1.5V13.5A1.5 1.5 0 0 0 2.5 15Zm4.667-9.333h1.666a1.5 1.5 0 0 0 1.5-1.5V2.5a1.5 1.5 0 0 0-1.5-1.5H7.167a1.5 1.5 0 0 0-1.5 1.5v1.667a1.5 1.5 0 0 0 1.5 1.5ZM11.833 15H13.5a1.5 1.5 0 0 0 1.5-1.5v-1.667a1.5 1.5 0 0 0-1.5-1.5h-1.667a1.5 1.5 0 0 0-1.5 1.5V13.5a1.5 1.5 0 0 0 1.5 1.5Z"
+        stroke="#000"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h16v16H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default hierarchy

packages/dnb-eufemia/src/icons/hierarchy_medium.js

@@ -0,0 +1,31 @@
+/** This file is auto generated by convertSvgToJsx.js */
+
+import React from 'react'
+
+const hierarchy_medium = (props) => (
+  <svg
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#a)">
+      <path
+        d="M4.667 15.667V14.2c0-.81.656-1.467 1.466-1.467h11.734c.81 0 1.466.657 1.466 1.467v1.467M12 8.333v4.4M3.357 23h2.62a2.357 2.357 0 0 0 2.356-2.357v-2.62a2.357 2.357 0 0 0-2.357-2.356H3.357A2.357 2.357 0 0 0 1 18.024v2.619A2.357 2.357 0 0 0 3.357 23ZM10.69 8.333h2.62a2.357 2.357 0 0 0 2.357-2.357V3.357A2.357 2.357 0 0 0 13.31 1h-2.62a2.357 2.357 0 0 0-2.357 2.357v2.62a2.357 2.357 0 0 0 2.357 2.356ZM18.024 23h2.619A2.357 2.357 0 0 0 23 20.643v-2.62a2.357 2.357 0 0 0-2.357-2.356h-2.62a2.357 2.357 0 0 0-2.356 2.357v2.619A2.357 2.357 0 0 0 18.024 23Z"
+        stroke="#000"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default hierarchy_medium

packages/dnb-eufemia/src/icons/icons-meta.json

@@ -3469,5 +3469,47 @@
     "name": "newspaper",
     "variant": "secondary",
     "category": "objects"
+  },
+  "layout_card_medium": {
+    "tags": [],
+    "created": 1666351885521,
+    "name": "layout_card",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "layout_card": {
+    "tags": [],
+    "created": 1666351885645,
+    "name": "layout_card",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "unlock_medium": {
+    "tags": [],
+    "created": 1666351885767,
+    "name": "unlock",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "unlock": {
+    "tags": [],
+    "created": 1666351885890,
+    "name": "unlock",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "hierarchy_medium": {
+    "tags": [],
+    "created": 1666351886001,
+    "name": "hierarchy",
+    "variant": "secondary",
+    "category": "essentials"
+  },
+  "hierarchy": {
+    "tags": [],
+    "created": 1666351886132,
+    "name": "hierarchy",
+    "variant": "secondary",
+    "category": "essentials"
   }
 }

packages/dnb-eufemia/src/icons/icons-pdf.lock

@@ -6420,5 +6420,83 @@
     "bundleName": "secondary_icons",
     "created": 1663768090352,
     "updated": 1663768090352
+  },
+  "layout_card_medium.pdf": {
+    "iconName": "layout_card_medium",
+    "name": "layout_card",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/af914888-1310-4595-b8c0-365e97f6c7c9",
+    "id": "4744:13",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "24",
+    "variant": "secondary",
+    "bundleName": "secondary_icons_medium",
+    "created": 1666351889579,
+    "updated": 1666351889579
+  },
+  "layout_card.pdf": {
+    "iconName": "layout_card",
+    "name": "layout_card",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/bd884801-d03e-4def-9bc0-503dd699ce43",
+    "id": "4744:15",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "16",
+    "variant": "secondary",
+    "bundleName": "secondary_icons",
+    "created": 1666351889697,
+    "updated": 1666351889697
+  },
+  "unlock_medium.pdf": {
+    "iconName": "unlock_medium",
+    "name": "unlock",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/acb072aa-b2a0-4c99-9554-6ee38aa9f365",
+    "id": "4744:21",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "24",
+    "variant": "secondary",
+    "bundleName": "secondary_icons_medium",
+    "created": 1666351889818,
+    "updated": 1666351889818
+  },
+  "unlock.pdf": {
+    "iconName": "unlock",
+    "name": "unlock",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a6a7c816-74cc-4165-93ff-75b5b966959f",
+    "id": "4744:23",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "16",
+    "variant": "secondary",
+    "bundleName": "secondary_icons",
+    "created": 1666351889953,
+    "updated": 1666351889953
+  },
+  "hierarchy_medium.pdf": {
+    "iconName": "hierarchy_medium",
+    "name": "hierarchy",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2a957b22-0bad-41cf-a55d-4ba4c8ada7b4",
+    "id": "4744:47",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "24",
+    "variant": "secondary",
+    "bundleName": "secondary_icons_medium",
+    "created": 1666351890074,
+    "updated": 1666351890074
+  },
+  "hierarchy.pdf": {
+    "iconName": "hierarchy",
+    "name": "hierarchy",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ea30469c-a1ab-40d8-b088-539b9f9a3520",
+    "id": "4744:49",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "16",
+    "variant": "secondary",
+    "bundleName": "secondary_icons",
+    "created": 1666351890205,
+    "updated": 1666351890205
   }
 }

packages/dnb-eufemia/src/icons/icons-svg.lock

@@ -6420,5 +6420,83 @@
     "bundleName": "secondary_icons",
     "created": 1663767965177,
     "updated": 1663767965177
+  },
+  "layout_card_medium.svg": {
+    "iconName": "layout_card_medium",
+    "name": "layout_card",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/43a984d2-4d83-4f91-a038-60eb3a51b3ae",
+    "id": "4744:13",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "24",
+    "variant": "secondary",
+    "bundleName": "secondary_icons_medium",
+    "created": 1666351885521,
+    "updated": 1666351885521
+  },
+  "layout_card.svg": {
+    "iconName": "layout_card",
+    "name": "layout_card",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/58bc6acc-56af-4ced-93cf-bb8f5f1604bc",
+    "id": "4744:15",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "16",
+    "variant": "secondary",
+    "bundleName": "secondary_icons",
+    "created": 1666351885645,
+    "updated": 1666351885645
+  },
+  "unlock_medium.svg": {
+    "iconName": "unlock_medium",
+    "name": "unlock",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2d2e88fd-216e-47c3-9033-f76062572c95",
+    "id": "4744:21",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "24",
+    "variant": "secondary",
+    "bundleName": "secondary_icons_medium",
+    "created": 1666351885767,
+    "updated": 1666351885767
+  },
+  "unlock.svg": {
+    "iconName": "unlock",
+    "name": "unlock",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b2129ae6-bd76-468b-b145-0b3190566d31",
+    "id": "4744:23",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "16",
+    "variant": "secondary",
+    "bundleName": "secondary_icons",
+    "created": 1666351885890,
+    "updated": 1666351885890
+  },
+  "hierarchy_medium.svg": {
+    "iconName": "hierarchy_medium",
+    "name": "hierarchy",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/07b979b3-820b-4614-9a4d-d20f0204cf5d",
+    "id": "4744:47",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "24",
+    "variant": "secondary",
+    "bundleName": "secondary_icons_medium",
+    "created": 1666351886001,
+    "updated": 1666351886001
+  },
+  "hierarchy.svg": {
+    "iconName": "hierarchy",
+    "name": "hierarchy",
+    "category": "essentials",
+    "url": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b1ab83cf-f61b-41f4-8833-f060c6a7da8c",
+    "id": "4744:49",
+    "slug": "878548076e6ef92a3736f0e3597fb7be",
+    "size": "16",
+    "variant": "secondary",
+    "bundleName": "secondary_icons",
+    "created": 1666351886132,
+    "updated": 1666351886132
   }
 }

packages/dnb-eufemia/src/icons/index.js

@@ -284,6 +284,8 @@ import heart_rate from './heart_rate.js'
 import heart_rate_medium from './heart_rate_medium.js'
 import hide from './hide.js'
 import hide_medium from './hide_medium.js'
+import hierarchy from './hierarchy.js'
+import hierarchy_medium from './hierarchy_medium.js'
 import history from './history.js'
 import history_medium from './history_medium.js'
 import home from './home.js'
@@ -314,6 +316,8 @@ import language from './language.js'
 import language_medium from './language_medium.js'
 import launch from './launch.js'
 import launch_medium from './launch_medium.js'
+import layout_card from './layout_card.js'
+import layout_card_medium from './layout_card_medium.js'
 import leaf from './leaf.js'
 import leaf_medium from './leaf_medium.js'
 import lightbulb from './lightbulb.js'
@@ -495,6 +499,8 @@ import travel from './travel.js'
 import travel_medium from './travel_medium.js'
 import undo from './undo.js'
 import undo_medium from './undo_medium.js'
+import unlock from './unlock.js'
+import unlock_medium from './unlock_medium.js'
 import upload from './upload.js'
 import upload_medium from './upload_medium.js'
 import user_feedback from './user_feedback.js'
@@ -807,6 +813,8 @@ export {
   heart_rate_medium,
   hide,
   hide_medium,
+  hierarchy,
+  hierarchy_medium,
   history,
   history_medium,
   home,
@@ -837,6 +845,8 @@ export {
   language_medium,
   launch,
   launch_medium,
+  layout_card,
+  layout_card_medium,
   leaf,
   leaf_medium,
   lightbulb,
@@ -1018,6 +1028,8 @@ export {
   travel_medium,
   undo,
   undo_medium,
+  unlock,
+  unlock_medium,
   upload,
   upload_medium,
   user_feedback,