action bar

Author: JesmoDev

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

@@ -6,24 +6,26 @@ import '@umbraco-ui/uui-icon-registry-essential/lib';
 
 import { html } from 'lit-html';
 
-import {
-  InterfaceLookNames,
-  InterfaceLookType,
-} from '@umbraco-ui/uui-base/lib/types';
-
 export default {
   id: 'uui-action-bar',
   title: 'Buttons/Action Bar',
   component: 'uui-action-bar',
   args: {
-    look: '',
+    look: 'primary',
+    color: 'primary',
   },
   argTypes: {
     look: {
       control: {
         type: 'select',
       },
-      options: InterfaceLookNames,
+      options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
+    },
+    color: {
+      control: {
+        type: 'select',
+      },
+      options: ['primary', 'positive', 'warning', 'danger'],
     },
   },
 };
@@ -34,7 +36,10 @@ export const AAAOverview: Story = props => html`
   <uui-icon-registry-essential>
     <uui-action-bar
       >${buttons.map(
-        el => html` <uui-button label="${el}" look="${props.look}">
+        el => html` <uui-button
+          label="${el}"
+          look="${props.look}"
+          color="${props.color}">
           <uui-icon name="${el}"></uui-icon>
         </uui-button>`
       )}
@@ -55,38 +60,52 @@ export const Single = () =>
     </uui-icon-registry-essential>
   `;
 
-export const Looks = () => html`
-  <uui-icon-registry-essential>
-    ${InterfaceLookNames.map(
-      (lookName: InterfaceLookType) =>
-        html` <div>${lookName}</div>
-          <uui-action-bar>
-            ${buttons.map(
-              button => html`<uui-button label="${button}" .look=${lookName}>
-                <uui-icon name="${button}"></uui-icon>
-              </uui-button>`
-            )} </uui-action-bar
-          ><br /><br />`
-    )}
-  </uui-icon-registry-essential>
-`;
+export const LooksAndColors = () => {
+  const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
+  const colors = ['primary', 'positive', 'warning', 'danger'];
+
+  return html`
+    <uui-icon-registry-essential>
+      ${colors.map(
+        color =>
+          html`<div
+            style="display: grid; grid-template-columns: repeat( auto-fill, 100px ); gap: 16px; margin-bottom: 32px">
+            ${looks.map(
+              look => html`
+                <uui-action-bar
+                  >${buttons.map(
+                    el => html` <uui-button
+                      label="${el}"
+                      .look="${look}"
+                      .color="${color}">
+                      <uui-icon name="${el}"></uui-icon>
+                    </uui-button>`
+                  )}
+                </uui-action-bar>
+              `
+            )}
+          </div> `
+      )}
+    </uui-icon-registry-essential>
+  `;
+};
 
-Looks.parameters = {
+LooksAndColors.parameters = {
   docs: {
     source: {
       code: `
 <uui-icon-registry-essential>
   <uui-action-bar>
     
-    <uui-button look="[look]" label="Copy">
+    <uui-button look="[look]" color="[color]" label="Copy">
       <uui-icon name="copy"></uui-icon>
     </uui-button>
 
-    <uui-button look="[look]" label="Remove">
+    <uui-button look="[look]" color="[color]" label="Remove">
       <uui-icon name="remove"></uui-icon>
     </uui-button>
 
-    <uui-button look="[look]" label="Delete">
+    <uui-button look="[look]" color="[color]" label="Delete">
       <uui-icon name="delete"></uui-icon>
     </uui-button>
 

packages/uui-button/lib/uui-button.element.ts

@@ -341,7 +341,7 @@ export class UUIButtonElement extends FormControlMixin(
 
   /**
    * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
-   * @type {""default" | "primary" | "secondary" | "outline" | "placeholder""}
+   * @type {"default" | "primary" | "secondary" | "outline" | "placeholder"}
    * @attr
    * @default "default"
    */
@@ -350,7 +350,7 @@ export class UUIButtonElement extends FormControlMixin(
 
   /**
    * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
-   * @type {""primary" | "positive" | "warning" | "danger""}
+   * @type {"primary" | "positive" | "warning" | "danger"}
    * @attr
    * @default "primary"
    */