Skip to content

Commit

Permalink
Integrate Changes
Browse files Browse the repository at this point in the history 
Integrate Changes
  • Loading branch information
@brunaboeger
brunaboeger committed May 14, 2024
2 parents 64ce442 + 0fabc85 commit 8c7092a
Show file tree
Hide file tree
Showing 4 changed files with 369 additions and 105 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-polar-bear",
"version": "4.3.4",
"version": "4.3.5",
"author": "adapcon",
"scripts": {
"storybook": "start-storybook --quiet -p 6006 -s ./src/static",
Expand Down
264 changes: 218 additions & 46 deletions src/components/NotificationsAndModals/Dialog/Dialog.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,16 @@ import PbButton from '@pb/Buttons/Button/Button.vue';

<Meta
title="Components/Notifications and Modals/PbDialog"
component={PbDialog}
component={ PbDialog }
argTypes={{
show: {
type: 'boolean',
defaultValue: 'false',
},
showHeader: {
type: 'boolean',
defaultValue: 'true',
},
title: {
type: 'string',
defaultValue: 'Title',
Expand All @@ -16,12 +24,20 @@ import PbButton from '@pb/Buttons/Button/Button.vue';
},
buttonText: {
type: 'string',
defaultValue: 'Confirmar',
defaultValue: 'Confirm',
},
buttonStyle: {
buttonTextClose: {
type: 'string',
defaultValue: 'Close',
},
buttonStyle: {
control: { type: 'select', options: ['background', 'regular'] },
defaultValue: 'background',
},
buttonColor: {
control: { type: 'select', options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info'] },
defaultValue: 'primary',
},
buttonLoading: {
type: 'boolean',
defaultValue: 'false',
Expand All @@ -30,9 +46,9 @@ import PbButton from '@pb/Buttons/Button/Button.vue';
type: 'boolean',
defaultValue: 'false',
},
buttonColor: {
control: { type: 'select', options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info'] },
defaultValue: 'warning',
fixedWidth: {
type: 'string',
defaultValue: '800px',
},
}}
/>
Expand All @@ -41,54 +57,161 @@ export const Template = (args, { argTypes}) => ({
props: Object.keys(argTypes),
components: { PbDialog, PbButton },
data() {
return {
state: {
show: false,
}
}
},
methods: {
openAlert() {
this.state.show = true;
return {
state: {
show: false,
}
}
},
methods: {
openDialog() {
this.state.show = true;
},
closeDialog() {
this.state.show = false;
}
},
template: `
<div>
<PbButton @click.native="openAlert">Open Dialog</PbButton>
<PbButton @click.native="openDialog">Open Dialog</PbButton>
<PbDialog
:show="state.show"
:show-header="showHeader"
:fixed-width="fixedWidth"
:title="title"
:subtitle="subtitle"
:show="state.show"
:button-text="buttonText"
button-size="small"
:button-text-close="buttonTextClose"
:button-color="buttonColor"
:button-style="buttonStyle"
:button-disabled="buttonDisabled"
:button-loading="buttonLoading"
@close="() => state.show = false"
@action="() => state.show = false"
@close-outside="closeDialog"
@close="closeDialog"
@action="closeDialog"
>
<template slot="icon-header">
<PbButton
<template slot="header-icon">
<PbButton
color="primary"
button-style="background"
icon="fas fa-arrow-up fa-rotate-270"
>
</PbButton>
</template>
<template slot="main">
<p class="pb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed.</p>
</PbButton>
</template>
<template slot="footer">
<PbButton
color="primary"
button-style="regular"
>
Voltar
</PbButton>
</PbButton>
</template>
/>
</template>
<template slot="header">
<section style="padding: 12px; background-color: var(--color-gray); border-radius: 4px; margin-top: 8px;">
<p class="pb">Lorem ipsum dolor sit amet</p>
</section>
</template>
<template slot="main">
<p class="pb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed.</p>
</template>
<template slot="footer">
<section style="display: flex; flex: 1;">
<PbButton
color="primary"
button-style="regular"
>
Go back
</PbButton>
</section>
</template>
</PbDialog>
</div>
`,
});

export const TemplateSimple = (args, { argTypes}) => ({
props: Object.keys(argTypes),
components: { PbDialog, PbButton },
data() {
return {
state: {
show: false,
}
}
},
methods: {
openDialog() {
this.state.show = true;
},
closeDialog() {
this.state.show = false;
}
},
template: `
<div>
<PbButton @click.native="openDialog">Open Simple Dialog</PbButton>
<PbDialog
:show="state.show"
:title="title"
:button-text-close="buttonTextClose"
@close="closeDialog"
>
<template slot="main">
<p class="pb" style="width: 500px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Parturient nulla suspendisse blandit amet, rutrum proin sed.</p>
</template>
</PbDialog>
</div>
`,
});

export const TemplateSlots = (args, { argTypes}) => ({
props: Object.keys(argTypes),
components: { PbDialog, PbButton },
data() {
return {
state: {
show: false,
}
}
},
methods: {
openDialog() {
this.state.show = true;
},
closeDialog() {
this.state.show = false;
}
},
template: `
<div>
<PbButton @click.native="openDialog">Open Dialog with Slots</PbButton>
<PbDialog
:show="state.show"
:show-header="showHeader"
:fixed-width="fixedWidth"
:title="title"
:subtitle="subtitle"
:button-text="buttonText"
:button-text-close="buttonTextClose"
:button-color="buttonColor"
:button-style="buttonStyle"
:button-disabled="buttonDisabled"
:button-loading="buttonLoading"
@close-outside="closeDialog"
@close="closeDialog"
@action="closeDialog"
>
<template slot="header-icon">
<section style="padding: 12px; background-color: #F1F7FF; border: 1.5px dashed #2C7DF6; border-radius: 4px; color: #2C7DF6;">
<p class="pb">#header-icon slot</p>
</section>
</template>
<template slot="header">
<section style="padding: 12px; background-color: #F1F7FF; border: 1.5px dashed #2C7DF6; border-radius: 4px; margin-top: 8px; color: #2C7DF6;">
<p class="pb">#header slot</p>
</section>
</template>
<template slot="main">
<section style="padding: 12px; background-color: #F1F7FF; border: 1.5px dashed #2C7DF6; border-radius: 4px; color: #2C7DF6;">
<p class="pb">#main slot</p>
</section>
</template>
<template slot="footer">
<section style="padding: 12px; background-color: #F1F7FF; border: 1.5px dashed #2C7DF6; border-radius: 4px; color: #2C7DF6; display: flex; flex: 1;">
<p class="pb">#footer slot</p>
</section>
</template>
</PbDialog>
</div>
`,
Expand All @@ -99,20 +222,69 @@ export const Template = (args, { argTypes}) => ({

### Purpose and Use Case

This component can be used when you need to view simply and quickly Information.
Currently, it has many styles, and accepts a another components to complement the content.
The PbDialog component is a simple, customizable dialog box that can be used to display content. <br />
It has several properties that can be adjusted to fit the needs of the user, including:

Have 3 slots to use:
- `icon-header` to add a icon in the header
- `main` to add the main content
- `footer` to add a footer content in left side
| Property | Type | Default | Description |
|:----------------------------|:------------|:------------|:------------------------------------------------------------------------------------------------|
| show* | boolean | false | determines whether the dialog box is visible or not |
| showHeader | boolean | true | determines whether the header is displayed |
| fixedWidth | string | ' ' | fixed width of the dialog box (if it is not set, the dialog box will adjust to the content) |
| title | string | ' ' | title of the dialog box |
| subtitle | string | ' ' | subtitle of the dialog box |
| buttonText | string | ' ' | text displayed on the action button |
| buttonTextClose | string | ' ' | text displayed on the close button |
| buttonStyle | string | background | style of the action button |
| buttonColor | string | primary | color of the action button |
| buttonLoading | boolean | false | determines whether the action button is loading |
| buttonDisabled | boolean | false | determines whether the action button is disabled |

## Examples
**Required*

### Default
### Slots

The component also provides four slots for customization:

| Slot name | Description |
|:----------------------------|:--------------------------------------|
| header-icon | add a space beside the header title |
| header | add the header content |
| main | add the main content |
| footer | add a footer content |


### Events

The PbDialog component emits the following events:

| Event name | Description |
|:----------------------------|:------------------------------------------------------------------------|
| close | emitted when the close button is clicked (either on header or footer) |
| close-outside | emitted when the user clicks outside the dialog box |
| action | emitted when the action button is clicked |

### Good to know

- The PbDialog component has the minimum width of `200px`. If you need to adjust the width, you can use the `fixedWidth` property. <br />

<br />

## Examples

<Canvas>
<Story name="Default">
{Template.bind({})}
</Story>
</Canvas>

<Canvas>
<Story name="Simple">
{TemplateSimple.bind({})}
</Story>
</Canvas>

<Canvas>
<Story name="Slots">
{TemplateSlots.bind({})}
</Story>
</Canvas>
Loading

0 comments on commit 8c7092a

Please sign in to comment.