use icon registry for story icons

Author: nielslyngsoe

packages/uui-action-bar/lib/uui-action-bar.story.ts

@@ -2,6 +2,7 @@ import { html } from 'lit-html';
 import '@umbraco-ui/uui-action-bar/lib/index';
 import '@umbraco-ui/uui-button/lib/index';
 import '@umbraco-ui/uui-icon/lib/index';
+import '@umbraco-ui/uui-icon-registry-essential/lib/index';
 import {
   InterfaceLookNames,
   InterfaceLookType,
@@ -20,29 +21,42 @@ export default {
   },
 };
 
-const buttons = ['bug', 'info', 'delete'];
+const buttons = ['copy', 'remove', 'delete'];
 
 export const Basic = () =>
-  html`<uui-action-bar
-    >${buttons.map(
-      el => html`<uui-button><uui-icon name="${el}"></uui-icon></uui-button>`
-    )}</uui-action-bar
-  >`;
+  html`
+    <uui-icon-registry-essential>
+      <uui-action-bar
+        >${buttons.map(
+          el =>
+            html`<uui-button><uui-icon name="${el}"></uui-icon></uui-button>`
+        )}
+      </uui-action-bar>
+    </uui-icon-registry-essential>
+  `;
 
 export const Single = () =>
-  html`<uui-action-bar
-    ><uui-button look="outline"><uui-icon name="delete"></uui-icon></uui-button>
-  </uui-action-bar>`;
+  html`
+    <uui-icon-registry-essential>
+      <uui-action-bar>
+        <uui-button look="outline"
+          ><uui-icon name="delete"></uui-icon
+        ></uui-button>
+      </uui-action-bar>
+    </uui-icon-registry-essential>
+  `;
 
 export const AllStyles = () => html`
-  ${InterfaceLookNames.map(
-    (lookName: InterfaceLookType) =>
-      html` <uui-action-bar>
-          ${buttons.map(
-            button => html`<uui-button .look=${lookName}>
-              <uui-icon name="${button}"></uui-icon>
-            </uui-button>`
-          )} </uui-action-bar
-        ><br /><br /><br />`
-  )}
+  <uui-icon-registry-essential>
+    ${InterfaceLookNames.map(
+      (lookName: InterfaceLookType) =>
+        html` <uui-action-bar>
+            ${buttons.map(
+              button => html`<uui-button .look=${lookName}>
+                <uui-icon name="${button}"></uui-icon>
+              </uui-button>`
+            )} </uui-action-bar
+          ><br /><br /><br />`
+    )}
+  </uui-icon-registry-essential>
 `;