feat(ADBLABS-42): grid item - #17
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
jawinn
left a comment
jawinn
left a comment
There was a problem hiding this comment.
The styles look good. On the JS and content side, we need some adjustments and refactors to make sure this is more reusable for Layout Grid and Content Grid.
| ### Make the block available to authors | ||
|
|
||
| Authors insert blocks from the Library in [Document Authoring](https://da.live/#/adobe/adobe-labs-website). That catalog lives in DA under `/docs/library/`, not in this repo. Code merges ship separately from content publish. | ||
|
|
||
| 1. Open `/docs/library/blocks/` and create a document named after the block. | ||
| 2. In that document, author one or more default instances (tables whose first row is the block name, plus sample content). Use section breaks between variants so Library can list them separately. This is what gets placed when an author adds the block. Preview and publish the document. | ||
| 3. Open the `blocks` spreadsheet in `/docs/library/` and add a row: | ||
| - `name`: the label shown in Library → Blocks | ||
| - `path`: the content URL of the document, for example `https://content.da.live/adobe/adobe-labs-website/docs/library/blocks/<block-name>` (use `content.da.live`, not `da.live`) | ||
| 4. Preview and publish the spreadsheet. | ||
|
|
||
| Authors can then add the block from Library → Blocks. For more on library setup, see [Setup library](https://docs.da.live/administrators/guides/setup-library). | ||
|
|
There was a problem hiding this comment.
Marissa had ADBLABS-82 to document this based on her Slack info. We can probably just move to in progress with your face on it. Any adjustments @marissahuysentruyt ?
Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com>
Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com>
| * @property {Element} [media] `<picture>` or `<img>` from AEM | ||
| * @property {string} [image] Image URL from JSON (Content Grid) |
There was a problem hiding this comment.
For clarity, could you rename media to mediaElement and image to imageUrl? So it's more apparent which things are text and which are elements.
| * @param {string} value Candidate URL, possibly relative | ||
| * @returns {string} | ||
| */ | ||
| function toSafeHttpUrl(value) { |
There was a problem hiding this comment.
Shouldn't this be in utils as well?
| export default function decorate(block) { | ||
| buildGridItem(getGridItemData(block), block); | ||
| } |
There was a problem hiding this comment.
👍 Thanks for refactoring with the build function.
There was a problem hiding this comment.
This might not have been clear, but with the edit above this from the last review, the idea was to remove this entire "Testing Pages..." section.
There was a problem hiding this comment.
Really close on styles. I'm seeing a couple issues:
- I’m looking at the grid-item-test page, and the 4/5 and 2/3 example images are not covering the whole card. I think the issue is the picture wrapper not taking up the whole space for the cover image inside.
-
The spacing between category and card is too large compared to the design. It looks like there’s something going on with the combination of extra padding + gap + min-height.
-
The hover/focus area for the category link is too wide; I would expect the hover should only be on the category text and badge, right now it extends the entire width of the card which feels a little weird to me.
2 participants
Summary of changes
grid-itemblock for card-style content (category, image, title, subhead) matching the Adobe Labs Website Figma Grid component (Caption Top).aspect-1/1,aspect-4/5,aspect-3/2,aspect-2/3) and anisVideoflag with a play affordance and screen-reader “Video article” label.--color-category-*) for Research, Workflows, Sneaks, and Playground swatches.http/httpsallowlist for item URLs, a11y focus styles and decorative image alt when title/subhead are present.Relevant Links
Test URLs:
Checklist
Validation
Validation steps
grid-itemfrom the DA library (or paste a key/value table) on a preview page; confirm category → category path, image/title/subhead → itemurl.aspect-1/1,aspect-4/5,aspect-3/2,aspect-2/3crop the image correctly.isVideo=true, play icon appears and screen readers announce “Video article” before the title; withfalse/omitted, no play UI.categoryorsubheaddoes not leave empty markup; unknown category names render as text (not a broken link).:focus-visibleoutline./docs/library/workflow.Browser Testing
We should aim to support the latest version of the listed browsers. For older versions or other browsers not on the list, content should be accessible, even if it doesn't completely match the designs.
Developers should test as they work in the browsers available on their machines. If they have access to other devices to test other browser/OS combinations, they should do that when possible.
Windows
MacOS
Android
iOS
Authoring fields (for reviewers)
titlesubheadurlhttp/httpsonly)categoryresearch|workflows|sneaks|playground(links to/researchetc.)imagealt-textisVideotrue/false— play chip when trueBlock options in the table header, e.g.
grid-item (aspect-4/5).