New stories - Menubar

storybook/components/LiveExample.js

@@ -24,8 +24,10 @@ export function LiveExample ({ code, scope }) {
         <LivePreview className="content-layouts p-5" />
         <br />
         <div className="live-content">
-          <UI.Tooltip target=".tag" />
-          <span className="tag" data-pr-tooltip={t("hover.description")}>
+          <UI.Tooltip target=".tag">
+            {t("hover.description")}
+          </UI.Tooltip>
+          <span>
             <UI.Tag className="border-noround tag" icon="pi pi-info-circle" severity="info">
               {t("hover.title")}
             </UI.Tag>

storybook/i18n/locales/stories/menubar/en.yml

@@ -0,0 +1,28 @@
+content: Menubar also known as Navbar, is a horizontal menu component.
+props:
+  children: Used to get the child elements of the component.
+  start: The template of starting element.
+  end: The template of trailing element.
+  model: An array of menuitems.
+  menuIcon: Icon of the menu.
+  submenuIcon: Icon of the submenu.
+events:
+  original: Browser event.
+  item: Selected item instance.
+footer:
+  title: Defines model of MenuItem API.
+menuitems:
+  id: Unique identifier of the menuitem.
+  label: Text of the menuitem.
+  icon: Icon of the item. It can be a string, JSX.Element or method.
+  url: External link to navigate when item is clicked.
+  items: An array of children the menuitems.
+  expanded: Visibility of submenu.
+  disabled: When set as true, disables the menuitem.
+  visible: When set as false, hides the menuitem.
+  target: Specifies where to open the linked document.
+  separator: Defines the item as a separator.
+  style: Inline style of the menuitem.
+  className: Style class of the menuitem.
+  template: Template of the menuitem.
+  data: The data of the menuitem.

storybook/package.json

@@ -35,7 +35,7 @@
     "yaml-loader": "^0.6.0"
   },
   "dependencies": {
-    "@cadolabs/sphere-ui": "6.2.3",
+    "@cadolabs/sphere-ui": "^6.3.0",
     "file-saver": "^2.0.5",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.5.23",

storybook/stories/display/Accordion/accordion.js

@@ -209,7 +209,7 @@ export const accordion = {
         title={i18n.t(`${I18N_PREFIX}.header.events`)}
         description={[
           { name: "onTabOpen", params: [{ name: "event.originalEvent", description: "browser event" }, { name: "event.index", description: "Index or indexes of the tab (number or array of numbers)" }], description: `${I18N_PREFIX}.props.events.onTabOpen` },
-          { name: "onTabClosed", params: [{ name: "event.originalEvent", description: "browser event" }, { name: "event.index", description: "Index or indexes of the tab" }], description: `${I18N_PREFIX}.props.events.onTabClosed` },
+          { name: "onTabClose", params: [{ name: "event.originalEvent", description: "browser event" }, { name: "event.index", description: "Index or indexes of the tab" }], description: `${I18N_PREFIX}.props.events.onTabClose` },
           { name: "onTabChange", params: [{ name: "event.originalEvent", description: "browser event" }, { name: "event.index", description: "Index or indexes of the tab" }], description: `${I18N_PREFIX}.props.events.onTabChange` },
         ]}
       />

storybook/stories/display/Menubar/menubar.js

@@ -0,0 +1,107 @@
+/* eslint-disable max-len */
+import { Menubar } from "@cadolabs/sphere-ui"
+
+import i18n from "@i18n"
+
+import { ParamsTable } from "@components"
+
+const I18N_PREFIX = "stories.menubar"
+
+const code = `
+function MenubarExample () {
+  const items = [
+    {
+      label: 'Home',
+      icon: 'pi pi-home'
+    },
+    {
+      label: 'Features',
+      icon: 'pi pi-star'
+    },
+    {
+      label: 'Projects',
+      icon: 'pi pi-search',
+      items: [
+        {
+          label: 'Components',
+          icon: 'pi pi-bolt'
+        },
+        {
+          label: 'Blocks',
+          icon: 'pi pi-server'
+        },
+        {
+          label: 'UI Kit',
+          icon: 'pi pi-pencil'
+        },
+        {
+          label: 'Templates',
+          icon: 'pi pi-palette',
+          items: [
+            {
+              label: 'Apollo',
+              icon: 'pi pi-palette'
+            },
+            {
+              label: 'Ultima',
+              icon: 'pi pi-palette'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: 'Contact',
+      icon: 'pi pi-envelope'
+    }
+  ];
+
+  return (
+    <div className="card">
+      <Menubar model={items} />
+    </div>
+  )
+}
+`
+
+export const menubar = {
+  component: "Menubar",
+  content: {
+    description: i18n.t(`${I18N_PREFIX}.content`),
+  },
+  code,
+  scope: { Menubar },
+  descriptionProps: [
+    { name: "children", type: "ReactNode", default: "null", description: `${I18N_PREFIX}.props.children` },
+    { name: "start", type: "ReactNode | Function", default: "null", description: `${I18N_PREFIX}.props.start` },
+    { name: "end", type: "ReactNode | Function", default: "null", description: `${I18N_PREFIX}.props.end` },
+    { name: "model", type: "MenuItem[]", default: "null", description: `${I18N_PREFIX}.props.model` },
+    { name: "menuIcon", type: "IconType<MenubarProps>", default: "null", description: `${I18N_PREFIX}.props.menuIcon` },
+    { name: "submenuIcon", type: "IconType<MenubarProps>", default: "null", description: `${I18N_PREFIX}.props.submenuIcon` },
+  ],
+  eventDescriptionProps: [
+    { name: "originalEvent", description: `${I18N_PREFIX}.events.original` },
+    { name: "item", description: `${I18N_PREFIX}.events.item` },
+  ],
+  footer: (
+    <ParamsTable
+      title={i18n.t(`${I18N_PREFIX}.footer.title`)}
+      description={[
+        { name: "id", type: "string", description: `${I18N_PREFIX}.menuitems.id` },
+        { name: "label", type: "string", description: `${I18N_PREFIX}.menuitems.label` },
+        { name: "icon", type: "any", description: `${I18N_PREFIX}.menuitems.icon` },
+        { name: "url", type: "string", default: false, description: `${I18N_PREFIX}.menuitems.url` },
+        { name: "items", type: "MenuItem[] | MenuItem[][]", default: false, description: `${I18N_PREFIX}.menuitems.items` },
+        { name: "expanded", type: "boolean", description: `${I18N_PREFIX}.menuitems.expanded` },
+        { name: "disabled", type: "boolean", description: `${I18N_PREFIX}.menuitems.disabled` },
+        { name: "visible", type: "boolean", description: `${I18N_PREFIX}.menuitems.visible` },
+        { name: "target", type: "string", description: `${I18N_PREFIX}.menuitems.target` },
+        { name: "separator", type: "boolean", description: `${I18N_PREFIX}.menuitems.separator` },
+        { name: "style", type: "CSSProperties", description: `${I18N_PREFIX}.menuitems.style` },
+        { name: "className", type: "string", description: `${I18N_PREFIX}.menuitems.className` },
+        { name: "template", type: "ReactNode | Function", description: `${I18N_PREFIX}.menuitems.template` },
+        { name: "data", type: "any", description: `${I18N_PREFIX}.menuitems.data` },
+      ]}
+    />
+  ),
+}

storybook/stories/display/Menubar/menubar.stories.js

@@ -0,0 +1,13 @@
+import React from "react"
+
+import { StoryPage } from "@components"
+
+import { menubar } from "./menubar"
+
+export default {
+  title: "Components / Display",
+}
+
+export const Menubar = context => <StoryPage {...menubar} {...context} />
+
+Menubar.storyName = "Menubar"

storybook/styles/global.scss

@@ -8,14 +8,13 @@
 html,
 body {
   font-family: var(--font-family);
-  font-size: 1rem;
-  font-weight: 300;
+  font-size: 14px;
   color: var(--text-color);
   background: var(--surface-cart);
 }
 
 .content-layouts {
-  font-size: 14px;
+  font-size: 1rem;
   background: url("https://www.primefaces.org/primeflex/assets/images/tiny-checkers.png");
   background-color: #f2f5f8;
 }
@@ -42,7 +41,7 @@ body {
   margin-top: 10px;
 
   .p-chip-text {
-    font-size: 14px;
+    font-size: 1rem;
   }
 }
 
@@ -52,11 +51,15 @@ body {
 }
 
 .live-content {
-  font-size: 14px;
+  font-size: 1rem;
+
+  .p-tag .p-tag-icon {
+    margin-right: 0;
+  }
 }
 
 .code-toolbar {
-  font-size: 14px;
+  font-size: 1rem;
 }
 
 p {
@@ -65,8 +68,7 @@ p {
   text-align: justify;
 }
 
-a {
-  color: var(--blue-700);
+a:not(.p-menuitem-content a) {
   text-decoration: none;
   cursor: pointer;
   border-bottom: .5px solid var(--surface-500);
@@ -139,3 +141,7 @@ pre[class*="language-"] {
     margin-right: .5rem;
   }
 }
+
+.p-datatable-sm {
+  font-size: 1rem !important;
+}

storybook/yarn.lock

@@ -1217,10 +1217,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@cadolabs/sphere-ui@6.2.3":
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/@cadolabs/sphere-ui/-/sphere-ui-6.2.3.tgz#421c1ee2d01f717336b4ea7d9062416bbf685de0"
-  integrity sha512-AQlOf9u2Dv/SykIVssQcldUUpIw3b81UbW1aSgfMAdGFKEp8b039VrmewpfrHQFwTn/UDWgGe9DhDaFi6HZA+Q==
+"@cadolabs/sphere-ui@^6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@cadolabs/sphere-ui/-/sphere-ui-6.3.0.tgz#ab7d5b9d133799db024c55492d5424dd28aec77d"
+  integrity sha512-/7ZoQ2Nl+bB4oyPXgVAfXJ79+uVZc3N/7x8q9mKBIY7Tmp1qqrOWaoSUcG7RL3RZ5lUITWrayqAjvofNdJ7Mnw==
   dependencies:
     "@emoji-mart/data" "^1.2.1"
     bignumber.js "^9.1.1"