Mike Phares
127634f5ab
Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter Color Sorting
119 lines
3.8 KiB
JavaScript
119 lines
3.8 KiB
JavaScript
export default {
|
|
title: "Components/Card",
|
|
tags: ['autodocs'],
|
|
args: {
|
|
direction: 'vertical',
|
|
overline: "Overline",
|
|
headline: "Headline",
|
|
description: "Some quick example text to build on the card title and make up the bulk of the card's content.",
|
|
button: 'button',
|
|
href: "",
|
|
target: '_blank',
|
|
position: 'right',
|
|
src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
|
|
},
|
|
argTypes: {
|
|
button: {
|
|
options: ['button', 'link', 'none'],
|
|
control: { type: 'radio' }
|
|
},
|
|
direction: {
|
|
options: ['horizontal', 'vertical'],
|
|
control: { type: 'radio' }
|
|
},
|
|
position: {
|
|
options: ['left', 'right'],
|
|
control: { type: 'radio' },
|
|
if: { arg: 'direction', eq: 'horizontal' }
|
|
},
|
|
target: {
|
|
options: ['_blank', '_self', '_parent'],
|
|
control: { type: 'radio' }
|
|
}
|
|
}
|
|
};
|
|
const DefaultTemplate = (args) => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
|
|
<ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
|
|
${args.overline
|
|
? `<ifx-card-overline>
|
|
${args.overline}
|
|
</ifx-card-overline>`
|
|
: ""}
|
|
${args.headline
|
|
? `<ifx-card-headline>
|
|
${args.headline}
|
|
</ifx-card-headline>`
|
|
: ""}
|
|
${args.description
|
|
? `<ifx-card-text>
|
|
${args.description}
|
|
</ifx-card-text>` : ""}
|
|
${args.button === 'button'
|
|
? `<ifx-card-links slot="buttons">
|
|
<ifx-button variant="primary">Button</ifx-button>
|
|
<ifx-button variant="secondary">Button</ifx-button>
|
|
</ifx-card-links>` : ""}
|
|
${args.button === 'link'
|
|
? `<ifx-card-links slot="buttons">
|
|
<ifx-link href="https://google.com" target="_blank">
|
|
<ifx-icon icon="calendar16"></ifx-icon>
|
|
Link
|
|
</ifx-link>
|
|
<ifx-link href="https://yahoo.com" target="_blank">
|
|
<ifx-icon icon="calendar16"></ifx-icon>
|
|
Link
|
|
</ifx-link>
|
|
</ifx-card-links>` : ""}
|
|
</ifx-card>`;
|
|
export const Default = DefaultTemplate.bind({});
|
|
Default.args = {
|
|
src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
|
|
};
|
|
const HorizontalTemplate = (args) => `<ifx-card direction="${args.direction}" href="${args.href}" target="${args.target}">
|
|
<ifx-card-image position="${args.position}" src="${args.src}" alt="" slot="img"></ifx-card-image>
|
|
${args.overline
|
|
? `<ifx-card-overline>
|
|
${args.overline}
|
|
</ifx-card-overline>`
|
|
: ""}
|
|
${args.headline
|
|
? `<ifx-card-headline>
|
|
${args.headline}
|
|
</ifx-card-headline>`
|
|
: ""}
|
|
${args.description
|
|
? `<ifx-card-text>
|
|
${args.description}
|
|
</ifx-card-text>`
|
|
: ""}
|
|
${args.button === 'button'
|
|
? `<ifx-card-links slot="buttons">
|
|
<ifx-button variant="primary">Button</ifx-button>
|
|
<ifx-button variant="secondary">Button</ifx-button>
|
|
</ifx-card-links>` : ""}
|
|
${args.button === 'link'
|
|
? `<ifx-card-links slot="buttons">
|
|
<ifx-link color="primary" href="https://google.com" target="_blank" underline="false">
|
|
<ifx-icon icon="calendar16"></ifx-icon>
|
|
Link
|
|
</ifx-link>
|
|
<ifx-link color="primary" href="https://yahoo.com" target="_blank" underline="false">
|
|
<ifx-icon icon="calendar16"></ifx-icon>
|
|
Link
|
|
</ifx-link>
|
|
</ifx-card-links>` : ""}
|
|
</ifx-card>`;
|
|
export const Horizontal = HorizontalTemplate.bind({});
|
|
Horizontal.args = {
|
|
direction: 'horizontal',
|
|
src: "https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
|
|
};
|
|
Horizontal.argTypes = {
|
|
direction: {
|
|
table: {
|
|
disable: true
|
|
}
|
|
}
|
|
};
|
|
//# sourceMappingURL=card.stories.js.map
|