Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creating Stories for Card, Banner, Media with Caption. #7

Merged
merged 15 commits into from
Mar 5, 2024
Merged

Conversation

jenbreese
Copy link
Collaborator

@jenbreese jenbreese commented Feb 21, 2024

READY FOR REVIEW

Summary

  • Added a Banner story
  • Added a Media with Caption story
  • Added classes to the banner
  • Updated the button classes
  • Changed the color from dark red to the bright red in the main nav and the brandbar
  • Updated the lockup classes with size and spacing to Line 5. Added the border top when mobile to Line 5.

Review By (Date)

  • When does this need to be reviewed by?

Criticality

  • Normal

Review Tasks

Setup tasks and/or behavior to test

  1. Check out this branch
  2. Navigate to the storybook and look at the elements in the summary above.
  3. Verify it work as expected.

Copy link

vercel bot commented Feb 21, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
cardinal-sites-next ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 4, 2024 11:21pm

@jenbreese jenbreese changed the title Banner changes Creating Stories for Card, Banner, Media with Caption. Feb 26, 2024
@pookmish
Copy link
Owner

I'm not sure how much details the VS code in gitpod provides. My phpstorm tells me this:
is missing the following properties from type ParagraphInterface: created, langcode

You can look at the card.stories.tsx and see how the composition, langcode, and created data looks. You can even copy and paste it into your story.

@jenbreese
Copy link
Collaborator Author

I added classes for the Media caption. I added the __typename to the story. I haven't figured out why the caption and link aren't appearing on the nextjs version of the site.

@pookmish
Copy link
Owner

pookmish commented Mar 4, 2024

@jenbreese I don't understand what you mean by "nextjs version of the site". It looks like your story book story is working correctly for the media with caption.
image

@jenbreese
Copy link
Collaborator Author

I thought it has to work on the Storybook (port 6006) and the port 3000 site where the file src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx gets used? I turned off my GitPod so I don't have a way to screenshot it now.

@pookmish
Copy link
Owner

pookmish commented Mar 4, 2024

Oh thank you. It was missing from the GQL queries. You can see where I added the missing fields in the fragments here: d5e5297

@jenbreese
Copy link
Collaborator Author

@pookmish Thank you thank you thank you.

{paragraph.suBannerSupHeader}
</div>
}

<Wysiwyg html={paragraph.suBannerBody?.processed} className="order-3"/>
<Wysiwyg html={paragraph.suBannerBody?.processed} className="order-3 text-m0"/>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a 100ch width applied to the p within this. It keeps it from aligning flush right to the image edge. @pookmish Do you know the best way to fix that?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I know what you mean. when should the text align to the image edge of the banner?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm sorry @pookmish That comment should have gone on the media with caption file.

<Wysiwyg html={paragraph.suMediaCaptionCaption?.processed}/>

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, but from what I see, it is aligning to the right of the image. I'm not sure what you are seeing different
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, it is right aligned fine now for me too. 🤷🏼‍♀️

@pookmish pookmish merged commit ff7243d into main Mar 5, 2024
3 checks passed
@pookmish pookmish deleted the FE-learning branch March 5, 2024 00:54
pookmish pushed a commit that referenced this pull request Mar 25, 2024
* Minor search box edits

* fixup to color

* fixup
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants