docs(card): clean up examples and fix layout issues #6415
Conversation
🦋 Changeset detectedLatest commit: ec2178e The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
hugomslv
changed the title
alizedebray
left a comment
alizedebray
left a comment
There was a problem hiding this comment.
Can you update the PR title? It should be like:
chore({package}): {description}
| return html` | ||
| ${['Link Text', 'More Link'].map(label => html` <a class="card-link" href="#">${label}</a> `)} | ||
| <div class="card-links"> | ||
| ${['Link Text', 'More Link'].map(label => html` <a href="#">${label}</a> `)} |
There was a problem hiding this comment.
Can you update this to have only one link in the card to fit what's in Figma?
Also the links must have tertiary button classes (you can check the button documentation to see which one to use).
packages/documentation/src/stories/components/card/card.stories.ts
Outdated
Show resolved
Hide resolved
| function getCardButton() { | ||
| return html` | ||
| <button class="btn btn-primary"> | ||
| <button class="btn btn-primary "> |
There was a problem hiding this comment.
To match Figma, it would be good to have 3 buttons here: a primary, a secondary and a tertiary.
| decorators: [gridContainer], | ||
| render: (args: Args) => | ||
| html`${args.action === 'button' ? renderInteractiveCard(args) : renderNoninteractiveCard(args)}`, | ||
| html`${args.action === 'button' |
There was a problem hiding this comment.
Can you add a new "interactive" argument to control this independently of the selected action?
Ideally we would have the following controls:
- Title (string)
- Body (string)
- Interactive (boolean)
- Action (buttons, link, or none) - only if Interactive is false
- Interactive Action (button or link) - only if Interactive is true
|
📄 Description
clean up card documentation
🚀 Demo
If applicable, please add a screenshot or video to illustrate the changes.
🔮 Design review
📝 Checklist