tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

up buttons stories

Browse source
This commit is contained in:
Tykayn 2025-09-17 16:02:21 +02:00 • committed by tykayn
parent d5610f38be
commit 54d044ad9a
3 changed files with 261 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

225
airwatch/src/app/buttons/main-button/main-button.stories.ts
View file

@ -15,6 +15,16 @@ const meta: Meta<MainButton> = {
size: {control: 'select', options: ['', 'large', 'medium', 'small', 'extrasm']},
kind: {control: 'select', options: ['', 'primary', 'secondary', 'ghost', 'link']},
},
parameters: {
docs: {
description: {
component: 'Main button component with various states including hover and focus.' +
'<br/>This component combines a semantic, a size, and visual guides with icons.' +
'<br/>We have '
}
}
},
};
export default meta;
@ -25,7 +35,7 @@ export const Default: Story = {
args: {
label: 'Call to action',
kind: 'primary',
size: 'large',
size: '',
disabled: false,
divider: true,
icon: 'arrow-right-line',
@ -69,6 +79,59 @@ export const Ghost: Story = {
},
};
export const GhostHover: Story = {
args: {
...Ghost.args,
label: 'Ghost Button (Hover)',
},
parameters: {
pseudo: {hover: true},
docs: {
description: {
story: 'Ghost button in hover state.'
}
},
decorators: [() => ({
template: `
<style>
button.is-ghost {
background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%) !important;
color: white !important;
}
</style>
<story />
`
})],
}
};
export const GhostFocus: Story = {
args: {
...Ghost.args,
label: 'Ghost Button (Focus)',
},
parameters: {
pseudo: {focus: true},
docs: {
description: {
story: 'Ghost button in focus state.'
}
},
decorators: [() => ({
template: `
<style>
button.is-ghost {
outline: 3px solid rgba(23, 103, 173, 0.5) !important;
outline-offset: 2px !important;
background: white !important;
}
</style>
<story />
`
})],
}
};
export const Link: Story = {
args: {
label: 'Link Button',
@ -164,3 +227,163 @@ export const ExtraSmall: Story = {
inconPosition: 'left',
},
};
// Hover state stories
export const PrimaryHover: Story = {
args: {
...Primary.args,
label: 'Primary Button (Hover)',
},
parameters: {
pseudo: {hover: true},
docs: {
description: {
story: 'Primary button in hover state.'
}
},
decorators: [() => ({
template: `
<style>
.container {
background: linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%) !important;
}
</style>
<div class="container">
<story />
</div>
`
})],
}
};
export const SecondaryHover: Story = {
args: {
...Secondary.args,
label: 'Secondary Button (Hover)',
},
parameters: {
pseudo: {hover: true},
docs: {
description: {
story: 'Secondary button in hover state.'
}
},
decorators: [() => ({
template: `
<style>
button.is-secondary {
background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%) !important;
color: white !important;
}
</style>
<story />
`
})],
}
};
export const LinkHover: Story = {
args: {
...Link.args,
label: 'Link Button (Hover)',
},
parameters: {
pseudo: {hover: true},
docs: {
description: {
story: 'Link button in hover state.'
}
},
decorators: [() => ({
template: `
<style>
button.is-link {
background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%) !important;
color: white !important;
}
</style>
<story />
`
})],
}
};
// Focus state stories
export const PrimaryFocus: Story = {
args: {
...Primary.args,
label: 'Primary Button (Focus)',
},
parameters: {
pseudo: {focus: true},
docs: {
description: {
story: 'Primary button in focus state.'
}
},
decorators: [() => ({
template: `
<style>
button.is-primary {
outline: 3px solid rgba(23, 103, 173, 0.5) !important;
outline-offset: 2px !important;
}
</style>
<story />
`
})],
}
};
export const SecondaryFocus: Story = {
args: {
...Secondary.args,
label: 'Secondary Button (Focus)',
},
parameters: {
pseudo: {focus: true},
docs: {
description: {
story: 'Secondary button in focus state.'
}
},
decorators: [() => ({
template: `
<style>
button.is-secondary {
outline: 3px solid rgba(23, 103, 173, 0.5) !important;
outline-offset: 2px !important;
}
</style>
<story />
`
})],
}
};
export const LinkFocus: Story = {
args: {
...Link.args,
label: 'Link Button (Focus)',
},
parameters: {
pseudo: {focus: true},
docs: {
description: {
story: 'Link button in focus state.'
}
},
decorators: [() => ({
template: `
<style>
button.is-link {
outline: 3px solid rgba(23, 103, 173, 0.5) !important;
outline-offset: 2px !important;
}
</style>
<story />
`
})],
}
};