Please notice that this component is only available for themes UI Light and UI Dark
/
export default {
title: 'Components/sd-brandshape',
tags: ['!dev', 'autodocs'],
component: 'sd-brandshape',
parameters: {
...parameters,
design: {
type: 'figma',
url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2059-1578&node-type=section&t=5PpAC3TA3kYF7ufX-0'
}
},
args: overrideArgs([
{
type: 'slot',
name: 'default',
value: 'Default slot
'
},
{
type: 'slot',
name: 'image',
value: `
`
},
{ type: 'attribute', name: 'shapes', value: '["top", "middle", "bottom"]' }
]),
argTypes: {
...argTypes,
shapes: {
...argTypes['shapes'],
options: shapes
}
},
decorators: [
(story: () => typeof html) => html`
${story()}
`]
};
export const Default = {
name: 'Default',
render: (args: any) => {
return generateTemplate({ args });
}
};
/**
Use the`variant` attribute to set the color variant:
- `primary` (default): Used on light backgrounds
- `neutral-100`
- `border-primary`: Used on light backgrounds
Change the fill color to match the background color
- `image`: Used to show an image without additional content
- `white`: Used on primary, primary-100 and neutral-100 backgrounds
- `border-white`: Used on primary background
```html
Default slot
Default slot
Default slot
Default slot
Default slot
```