Merge pull request #635 from takenet/developer

Developer

.storybook/main.js

@@ -1,9 +1,10 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
+    '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-actions',
+
     '@storybook/addon-console',
   ],
   typescript: {

.storybook/manager.js

@@ -2,14 +2,14 @@ import { addons } from '@storybook/manager-api';
 
 addons.setConfig({
   isFullscreen: false,
-  showNav: true,
+  showNav: false,
   showPanel: true,
   panelPosition: 'bottom',
   enableShortcuts: true,
   showToolbar: false,
   theme: undefined,
-  selectedPanel: undefined,
-  initialActive: 'sidebar',
+  selectedPanel: 'actions',
+  initialActive: 'canvas',
   sidebar: {
     showRoots: false,
     collapsedRoots: ['other'],

.storybook/preview-body.html

@@ -12,5 +12,6 @@
     body #storybook-root {
             width: 100%;
             height: 100%;
+            padding: 0 !important;
         }
 </style>

.storybook/preview.css

@@ -0,0 +1,34 @@
+.open-functions {
+  background-color: #0096fa;
+  width: 56px;
+  height: 56px;
+  margin: 4px;
+  align-items: center;
+  border-radius: 8px;
+  position: absolute;
+  transition: width 0.3s ease;
+  overflow: hidden;
+}
+
+#themes {
+  visibility: hidden;
+  display: none;
+  padding-right: 16px;
+  transition: visibility 1.6s ease 1s;
+}
+
+.open-functions:hover {
+  width: 268px;
+  padding-right: 0;
+  overflow: visible;
+}
+
+.open-functions:hover #themes {
+  visibility: visible;
+  display: block;
+}
+
+.open-config {
+  padding: 0 16px;
+  color: #ffffff;
+}

.storybook/preview.js

@@ -1,55 +1,104 @@
 import { defineCustomElements } from '../dist/esm/loader';
 import { withConsole } from '@storybook/addon-console';
+import { useEffect, useState } from 'react';
+import './preview.css';
+
 defineCustomElements();
 
 export const globalTypes = {
-  theme: {
+  hasTheme: {
     name: 'Theme',
     description: 'Defina o tema que o componente será aplicado',
-    defaultValue: 'light',
+    defaultValue: 'off',
     toolbar: {
       icon: 'paintbrush',
-      items: ['light', 'dark'],
-    }
-  }
-}
+      items: ['on', 'off'],
+    },
+  },
+};
 export const parameters = {
   decorators: [(storyFn, context) => withConsole()(storyFn)(context)],
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
-    expanded: true,
+    expanded: false,
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
   layout: 'centered',
   backgrounds: {
-    disable: true
+    disable: true,
   },
 };
 
 export const decorators = [
   (Story, context) => {
-    const {theme} = context.globals;
+    const { hasTheme } = context.globals;
+    const [theme, setTheme] = useState('light');
     const colors = {
-      light: {backgroundColor: '#ffffff', height: '100%', width: '100%'},
-      dark: {backgroundColor: '#292929', height: '100%', width: '100%'},
-    }
-    const handleBg = () => {
-      if(theme == 'light') {
-      return colors.light
-    } else if(theme== 'dark') {
-      return colors.dark;
-    }
-    }
-
+      light: { backgroundColor: '#ffffff', height: '100%', width: '100%' },
+      dark: { backgroundColor: '#292929', height: '100%', width: '100%' },
+    };
+    const display = {
+      on: { display: 'flex' },
+      off: { display: 'none' },
+    };
+    const height = {
+      on: { height: '120px' },
+      off: { height: '0' },
+    };
+    const [bg, setBg] = useState(colors.light);
+
+    const handleTheme = () => {
+      if (hasTheme == 'on') {
+        return display.on;
+      } else if (hasTheme == 'off') {
+        return display.off;
+      }
+    };
+
+    const handleHeight = () => {
+      if (hasTheme == 'on') {
+        return height.on;
+      } else if (hasTheme == 'off') {
+        return height.off;
+      }
+    };
+
+    useEffect(() => {
+      const select = document.getElementById('themes');
+      select.addEventListener('bdsChange', (obj) => {
+        const color = obj.detail.value;
+        if (color == 'light') {
+          setTheme('light');
+          setBg(colors.light);
+        } else if (color == 'dark') {
+          setTheme('dark');
+          setBg(colors.dark);
+        }
+      });
+    });
+
     return (
-      <bds-theme-provider theme={theme}>
-        <bds-grid padding="2" style={handleBg()} >
-          <Story {...context} />
+      <bds-grid height="100%" direction="column">
+        <bds-grid class="open-functions" style={handleTheme()} gap="2">
+          <bds-icon class="open-config" name="settings-general"></bds-icon>
+          <bds-select placeholder="Escolha o tema" id="themes" onChange={(event) => handleBg(event)}>
+            <bds-select-option value="light">Light</bds-select-option>
+            <bds-select-option value="dark">Dark</bds-select-option>
+          </bds-select>
         </bds-grid>
-      </bds-theme-provider>
-    )
-  }
-]
+
+        <bds-theme-provider theme={theme}>
+          <bds-grid style={bg} justify-content="center">
+            <bds-grid xxs="12" direction="column" padding="2">
+              <bds-grid style={handleHeight()}></bds-grid>
+              <Story {...context} />
+            </bds-grid>
+          </bds-grid>
+        </bds-theme-provider>
+      </bds-grid>
+    );
+  },
+];

src/components.d.ts

@@ -73,6 +73,7 @@ export namespace Components {
           * Focus Selected. Used to add title in header accordion.
          */
         "collapse"?: collapses;
+        "openAll": (actNumber: any) => Promise<void>;
     }
     interface BdsAccordionHeader {
         /**
@@ -2691,6 +2692,10 @@ declare namespace LocalJSX {
           * bdsAccordionCloseAll. Event to return value when accordion is closed.
          */
         "onBdsAccordionCloseAll"?: (event: BdsAccordionGroupCustomEvent<any>) => void;
+        /**
+          * bdsAccordionOpenAll. Event to return value when accordion is opend.
+         */
+        "onBdsAccordionOpenAll"?: (event: BdsAccordionGroupCustomEvent<any>) => void;
     }
     interface BdsAccordionHeader {
         /**

src/components/accordion/accordion-docs.stories.jsx

@@ -0,0 +1,79 @@
+import readme from './readme.md';
+
+export default {
+  title: 'Accordion Live Code',
+  parameters: {
+    notes: { markdown: readme },
+  },
+};
+
+export const accordionDocs = (args) => {
+  return (
+    <bds-accordion start-open={args.startOpen}>
+      <bds-accordion-header
+        accordion-title={args.accordionTitle}
+        icon={args.icon}
+        avatar-name={args.avatarName}
+        avatar-thumb={args.avatarThumb}
+      ></bds-accordion-header>
+      <bds-accordion-body>
+        <bds-typo>{args.accordionText}</bds-typo>
+      </bds-accordion-body>
+    </bds-accordion>
+  );
+};
+
+accordionDocs.argTypes = {
+  accordionTitle: {
+    table: {
+      defaultValue: { summary: 'vazio' },
+    },
+    description: 'Coloque o titulo do cabeçalho.',
+    control: 'text',
+  },
+  accordionText: {
+    table: {
+      defaultValue: { summary: 'vazio' },
+    },
+    description: 'Coloque o texto de exemplo aqui.',
+    control: 'text',
+  },
+  icon: {
+    table: {
+      defaultValue: { summary: 'vazio' },
+    },
+    description: 'Defina o ícone que será utilizado no botão (Apenas outline).',
+    control: 'text',
+  },
+  avatarName: {
+    table: {
+      defaultValue: { summary: 'vazio' },
+    },
+    description: 'Defina o nome aplicado no avatar.',
+    control: 'text',
+  },
+  avatarThumb: {
+    table: {
+      defaultValue: { summary: 'vazio' },
+    },
+    description: 'Insira o link da imagem.',
+    control: 'text',
+  },
+  startOpen: {
+    table: {
+      defaultValue: { summary: 'false' },
+    },
+    description: 'Escolha se o accordion será iniciado aberto.',
+    control: 'boolean',
+  },
+};
+
+accordionDocs.args = {
+  accordionTitle: 'Título do accordion',
+  accordionText: `Um accordion é uma lista de cabeçalhos empilhados verticalmente que revelam ou ocultam 
+  seções de conteúdo associados.`,
+  avatarName: '',
+  avatarThumb: '',
+  icon: '',
+  startOpen: false,
+};

src/components/accordion/accordion-group.tsx

@@ -20,6 +20,10 @@ export class AccordionGroup {
    * bdsAccordionCloseAll. Event to return value when accordion is closed.
    */
   @Event() bdsAccordionCloseAll?: EventEmitter;
+  /**
+   * bdsAccordionOpenAll. Event to return value when accordion is opend.
+   */
+  @Event() bdsAccordionOpenAll?: EventEmitter;
 
   @Method()
   async closeAll(actNumber) {
@@ -33,6 +37,18 @@ export class AccordionGroup {
     }
   }
 
+  @Method()
+  async openAll(actNumber) {
+    this.bdsAccordionOpenAll.emit();
+    for (let i = 0; i < this.accordionsElement.length; i++) {
+      if (this.collapse != 'multiple') {
+        if (actNumber != i) this.accordionsElement[i].open();
+      } else {
+        this.accordionsElement[i].open();
+      }
+    }
+  }
+
   componentWillRender() {
     this.accordionsElement = this.element.getElementsByTagName(
       'bds-accordion'