♻️ Refactor: SbEditorHeader

package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "dev": "yarn storybook",
-    "build": "vite build && yarn generate:types",
+    "build": "vite build",
     "test:unit": "vitest run --config ./vitest.config.ts",
     "generate:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
     "lint": "eslint src src/ tests/ .storybook/",

src/components/Avatar/SbAvatar.vue

@@ -2,7 +2,7 @@
   <div v-tooltip="avatarTooltipAttrs" :class="avatarClass" v-bind="$attrs">
     <template v-if="showImage">
       <slot>
-        <div class="sb-avatar__image">
+        <div class="sb-avatar__image" :style="avatarStyle">
           <img
             v-show="isImageLoaded"
             :src="src"
@@ -103,6 +103,10 @@ export default {
       type: String,
       default: null,
     },
+    borderColor: {
+      type: String,
+      default: null,
+    },
     status: {
       type: String,
       default: null,
@@ -134,6 +138,15 @@ export default {
       return ['sb-avatar', avatarSizeClass]
     },
 
+    avatarStyle() {
+      const isColorValid = this.borderColor && this.borderColor.startsWith('#')
+
+      return {
+        borderColor: isColorValid && this.borderColor,
+        borderWidth: isColorValid && '2px',
+      }
+    },
+
     avatarInitialsClass() {
       const color =
         this.bgColor || generateRandomBgColor(this.friendlyName || this.name)

src/components/AvatarGroup/SbAvatarGroup.vue

@@ -61,7 +61,7 @@ export default {
         children &&
         children.length === 1 &&
         children[0].children &&
-        children[0].children[0].type.name === 'SbAvatar'
+        children[0].children[0]?.type.name === 'SbAvatar'
       const avatarChildren = useGrandchildren ? children[0].children : children
       return avatarChildren.filter(({ type }) => type.name === 'SbAvatar')
     },

src/components/Button/SbButton.vue

@@ -85,6 +85,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isBorderless: {
+      type: Boolean,
+      default: false,
+    },
     label: {
       type: String,
       default: null,
@@ -105,6 +109,7 @@ export default {
         `sb-button--${this.variant}`,
         {
           'sb-button--disabled': this.isDisabled,
+          'sb-button--borderless': this.isBorderless,
           'sb-button--small': this.size === 'small',
           'sb-button--large': this.size === 'large',
           'sb-button--full': this.isFullWidth,

src/components/Button/button.scss

@@ -215,6 +215,10 @@
   }
 }
 
+.sb-button--borderless {
+  border: 0;
+}
+
 // button elements
 
 .sb-button__label {

src/components/EditorHeader/EditorHeader.stories.js

@@ -1,6 +1,15 @@
 import { SbEditorHeader } from './index'
 
-const languagesItems = ['English', 'German']
+const languages = [
+  {
+    name: 'English',
+    code: 'en',
+  },
+  {
+    name: 'Portuguese',
+    code: 'pt',
+  },
+]
 
 const usersList = [
   {
@@ -17,7 +26,7 @@ const usersList = [
   },
 ]
 
-const optionsList = [
+const actionsList = [
   {
     name: 'Open Draft',
   },
@@ -36,118 +45,69 @@ const optionsList = [
   },
 ]
 
-const actionsList = [
-  {
-    name: 'Dimensions',
-  },
-  {
-    name: 'Preview',
-  },
-  {
-    name: 'Unpublish',
-  },
-]
-
-const EditorTemplate = (args) => ({
-  components: { SbEditorHeader },
-  setup() {
-    return { args }
-  },
-  template: `
-    <SbEditorHeader
-      v-bind="args"
-    />
-  `,
-})
-
 export default {
   title: 'Interface/SbEditorHeader',
   component: SbEditorHeader,
   parameters: {
     docs: {
       description: {
-        component: 'SbEditorHeader',
+        component: 'Header component for various editors',
       },
     },
   },
   args: {
-    languages: [...languagesItems],
+    languages: [...languages],
     users: [...usersList],
     actions: [...actionsList],
-    options: [...optionsList],
-    spaceStatus: 'unpublished',
     hasSaveButton: true,
-    showPublishedIcon: true,
-    headerTitle: 'API-based & Headless CMS as a Service',
-    headerSubTitle: 'Updated 15m ago',
+    headerTitle: 'Headless CMS',
+    headerSubtitle: 'Updated 15m ago',
+    mode: 'light',
   },
   argTypes: {
-    languages: {
-      name: 'languages',
-      description: 'Available languages array',
-      control: {
-        type: 'array',
-      },
-    },
-    users: {
-      name: 'users',
-      description: 'User information array',
-      control: {
-        type: 'object',
-      },
-    },
-    actions: {
-      name: 'actions',
-      description: 'Available actions array',
-      control: {
-        type: 'object',
-      },
-    },
-    options: {
-      name: 'options',
-      description: 'Available options array',
-      control: {
-        type: 'object',
-      },
-    },
-    spaceStatus: {
-      name: 'spaceStatus',
-      description:
-        'Change the icon to inform whether the space is published or not',
-      options: ['unpublished', 'published', 'published-and-changes'],
-      control: {
-        type: 'select',
-      },
-    },
-    hasSaveButton: {
-      name: 'hasSaveButton',
-      description: 'Props to show the save icon',
-      control: {
-        type: 'boolean',
-      },
-    },
-    showPublishedIcon: {
-      name: 'showPublishedIcon',
-      description: 'Props to show or not the published icon',
-      control: {
-        type: 'boolean',
-      },
-    },
-    headerTitle: {
-      name: 'headerTitle',
-      description: '',
-      control: {
-        type: 'text',
-      },
-    },
-    headerSubTitle: {
-      name: 'headerSubTitle',
-      description: '',
-      control: {
-        type: 'text',
-      },
+    mode: {
+      options: ['light', 'dark'],
+      control: { type: 'radio' },
     },
   },
 }
 
-export const Default = EditorTemplate.bind({})
+export const Default = {
+  name: 'Default',
+  render: (args, { argTypes }) => ({
+    components: { SbEditorHeader },
+    props: Object.keys(argTypes),
+    template: `
+        <SbEditorHeader v-bind="$props"  />
+      `,
+  }),
+}
+
+export const WithSlots = () => ({
+  components: { SbEditorHeader },
+  template: `
+      <SbEditorHeader>
+        <template #left>
+          <p>Custom left slot</p>
+        </template>
+
+        <template #middle>
+          <p>Custom center slot</p>
+        </template>
+
+        <template #right>
+        <p>Custom right slot</p>
+        </template>
+      </SbEditorHeader>
+  `,
+})
+
+export const DarkMode = () => ({
+  components: { SbEditorHeader },
+  template: `
+    <SbEditorHeader
+      header-title="My title"
+      mode="dark"
+    />
+  `,
+})