Skip to content

Commit

Permalink
Merge branch 'main' into add-card-color
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattgoud
mattgoud authored Nov 30, 2023
2 parents 2933bdc + e355f99 commit d3836f2
Show file tree
Hide file tree
Showing 16 changed files with 794 additions and 51 deletions.
5 changes: 5 additions & 0 deletions packages/components/alert/src/alert.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,11 @@ export const alertProps = buildProps({
required: false,
default: undefined,
},
buttonWrapLabel: {
type: Boolean,
required: false,
default: false,
},
isClosable: {
type: Boolean,
required: false,
Expand Down
1 change: 1 addition & 0 deletions packages/components/alert/src/alert.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
<PuikButton
v-if="buttonLabel"
:variant="variant"
:wrap-label="buttonWrapLabel"
class="puik-alert__button"
:data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
@click="click"
Expand Down
113 changes: 113 additions & 0 deletions packages/components/alert/stories/alert.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,14 @@ export default {
buttonLabel: {
description: 'Label of the button',
},
buttonWrapLabel: {
description: 'Set the carriage return of the button label',
table: {
defaultValue: {
summary: false,
},
},
},
isClosable: {
description: 'Display a close button',
},
Expand All @@ -59,6 +67,7 @@ export default {
variant: 'success',
disableBorders: false,
buttonLabel: 'Button',
buttonWrapLabel: false,
isClosable: false,
},
} as Meta
Expand Down Expand Up @@ -125,6 +134,110 @@ export const Default = {
},
}

export const buttonWrapLabel: StoryObj = {
render: () => ({
components: {
PuikAlert,
},
template: `
<div class="flex flex-col space-y-4">
<puik-alert title="buttonWrapLabel to true" button-label="Button with a very long label" button-wrap-Label>
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
</puik-alert>
<puik-alert title="buttonWrapLabel to false (by default)" button-label="Button with a very long label">
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
</puik-alert>
</div>
`,
}),

parameters: {
docs: {
source: {
code: `
<!--VueJS Snippet-->
<puik-alert
title="buttonWrapLabel to true"
button-label="Button with a very long label"
button-wrap-Label
@click="click"
>
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
</puik-alert>
<puik-alert
title="buttonWrapLabel to false (by default)"
button-label="Button with a very long label"
@click="click"
>
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
This an alert with a very long description.
</puik-alert>
<!--HTML/CSS Snippet-->
<div class="puik-alert__container">
<div class="puik-alert__content">
<div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
<div class="puik-alert__text">
<p class="puik-alert__title">buttonWrapLabel to true</p>
<span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
</div>
</div>
<button class="puik-button puik-button--success puik-button--md puik-alert__button">
Button with a very long label
</button>
</div>
<div class="puik-alert__container">
<div class="puik-alert__content">
<div class="puik-icon puik-alert__icon" style="font-size: 1.25rem;">check_circle</div>
<div class="puik-alert__text">
<p class="puik-alert__title">buttonWrapLabel to false (by default)</p>
<span class="puik-alert__description"> This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. This an alert with a very long description. </span>
</div>
</div>
<button class="puik-button puik-button--success puik-button--md puik-button--no-wrap puik-alert__button">
Button with a very long label
</button>
</div>
`,
language: 'html',
},
},
},
}

export const Success: StoryObj = {
render: () => ({
components: {
Expand Down
5 changes: 5 additions & 0 deletions packages/components/alert/test/alert.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ describe('Alert tests', () => {
expect(findAlert().classes()).toContain('puik-alert--warning')
})

it('should set the button label wrap to false', () => {
factory({ buttonLabel: 'Button', buttonWrapLabel: false })
expect(findButton().classes()).toContain('puik-button--no-wrap')
})

it('should display a button which emits the click event on click', () => {
factory({ buttonLabel: 'Button' })
expect(findButton().exists()).toBeTruthy()
Expand Down
5 changes: 5 additions & 0 deletions packages/components/button/src/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ export const buttonProps = buildProps({
required: false,
default: false,
},
wrapLabel: {
type: Boolean,
required: false,
default: false,
},
disabled: {
type: Boolean,
required: false,
Expand Down
1 change: 1 addition & 0 deletions packages/components/button/src/button.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
`puik-button--${size}`,
{ 'puik-button--disabled': disabled },
{ 'puik-button--fluid': fluid },
{ 'puik-button--no-wrap': !wrapLabel },
]"
:disabled="disabled"
:data-test="dataTest"
Expand Down
10 changes: 10 additions & 0 deletions packages/components/button/stories/button.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,14 @@ export default {
},
},
},
wrapLabel: {
description: 'Set the carriage return of the button label',
table: {
defaultValue: {
summary: false,
},
},
},
disabled: {
description: 'Set the button as disabled',
table: {
Expand Down Expand Up @@ -81,6 +89,7 @@ export default {
variant: 'primary',
size: 'md',
fluid: false,
wrapLabel: true,
disabled: false,
leftIcon: '',
rightIcon: '',
Expand Down Expand Up @@ -117,6 +126,7 @@ export const Default = {
:size="$sizes"
:variant="$variants"
:fluid="true|false"
:wrap-label="true|false"
:disabled="true|false"
:left-icon="leftIcon"
:right-icon="rightIcon"
Expand Down
5 changes: 5 additions & 0 deletions packages/components/button/test/button.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,11 @@ describe('Button tests', () => {
expect(findButton().classes()).toContain('puik-button--fluid')
})

it('should set the button label wrap to false', () => {
factory({ wrapLabel: false })
expect(findButton().classes()).toContain('puik-button--no-wrap')
})

it('should be a router-link if to prop is defined', () => {
factory({ to: '/test' })
expect(findButton().element.tagName).toBe('ROUTER-LINK')
Expand Down
15 changes: 15 additions & 0 deletions packages/components/table/src/table.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ export const tableProps = buildProps({
required: false,
default: () => [],
},
expandable: {
type: Boolean,
required: false,
default: false,
},
selectable: {
type: Boolean,
required: false,
Expand All @@ -35,6 +40,16 @@ export const tableProps = buildProps({
required: false,
default: false,
},
stickyFirstCol: {
type: Boolean,
required: false,
default: false,
},
stickyLastCol: {
type: Boolean,
required: false,
default: false,
},
} as const)

export type TableProps = ExtractPropTypes<typeof tableProps>
Expand Down
Loading

0 comments on commit d3836f2

Please sign in to comment.