ProfileCard component #318
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…card. also updated stories file to refelct new attributes and changes
…fileCard.js and Stories file. Added commented out tests
… Updated link for ProfileCard.mdx and updated failing tests for stories file
maxatdetroit
suggested changes
Apr 15, 2025
Contributor
maxatdetroit
left a comment
maxatdetroit
left a comment
There was a problem hiding this comment.
This is definitely moving in the right direction. Some minor things:
- When the profile card is a link (i.e. when the
hrefattribute is provided), would you make sure that a right caret / chevron is added at the end of the person's name? See the mobile mockup screenshot for an example of what I'm talking about. - The vertical margins / padding between the text elements is off from the mockups. Would you go into figma and see what the right design specs are for that and mimic them here?
- Would you update the inline styles in the stories to remove the blue text color on the profile card links in storybook?
- Would you update the documentation page to include a section at the top for 'Usage' that includes Storybook controls? See an example of what I mean here: https://cityofdetroit.github.io/COD-Design-System/?path=/docs/components-tag--tag#usage
…d commented out profilecard code, added a name-container around name and chevron, updated scss to fix position of chevron
…ed storybook to ignore error messages, removed the rest of the validation test code
maxatdetroit
suggested changes
Apr 28, 2025
Contributor
maxatdetroit
left a comment
maxatdetroit
left a comment
There was a problem hiding this comment.
Just some minor tweaks at this point but still needs some changes before the component API is stable and ready to merge in.
maxatdetroit
suggested changes
May 6, 2025
Contributor
maxatdetroit
left a comment
maxatdetroit
left a comment
There was a problem hiding this comment.
This is the last set of feedback, couple minor things inline. Also:
- Could you make it so that the chevron animation happens on hover of any part of the link, not just the name text?
Screen.Recording.2025-05-06.101143.mp4
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The goal of this task is to create a new profile component in the stable build of the design system.
ProfileCard should be behave the same on Desktop & Mobile:
Mobile
Desktop
Requirements
The width of the component (and component contents) should scale with the parent container
The image src URL should be provided as an attribute on the component.
The name of the individual should be a named slot. The assigned element should be either a link or a span element.
The title(s) of the individual (e.g. Sandra Yu Stahl is both "Deputy Chief Financial Officer" and "Chief Procurement Officer") should be provided as additional named slotted elements. The assigned element should be a span.
Follow the best practices for attributes and slots described in Document best practices in contributing docs #201 , Define attribute naming conventions in contributing docs #202 , and Add contributing docs regarding named slots with basic markup #205
FINAL RESULT:
2025-04-28.15-42-32.mp4