Visual story 2 #304
Visual story 2 #304
Conversation
| position: relative; | ||
| height: 50px; | ||
| margin: auto; | ||
| `; |
There was a problem hiding this comment.
<CoverPage /> is the 1st card of the visual story. It uses the heroImage as background. It's not shown if hero image isn't present
src/helpers/invert-color/index.ts
Outdated
| function padZero(str) { | ||
| const zeros = new Array(2).fill("0"); | ||
| return `${zeros}${str}`.slice(-2); | ||
| } |
There was a problem hiding this comment.
this is needed to invert theme colors used by text elements.. Visual stories use a dark background, so it's kinda like dark mode
| <Theme tokens={tokens}>{children}</Theme> | ||
| </StoryProvider> | ||
| </ConfigProvider> | ||
| ); |
There was a problem hiding this comment.
Usually we use <Layout /> as context provider, but we can't use it here because
- we're using different theme tokens
- Layout adds a div (which sets width of story to 600px).. visual stories don't need this
| <div grid-area="lower-third"> | ||
| <StyledTextWrapper> | ||
| <StyledHeadline>{headline}</StyledHeadline> | ||
| {authorNames && ( |
There was a problem hiding this comment.
What about Date Published and Section name ?
There was a problem hiding this comment.
Ahead's visual stories doesn't have them right? is this a requirement?
There was a problem hiding this comment.
Nope. Thought we are doing it as per our header card.
|
Haven't added tests yet.. working on them and documentation |
src/atoms/visual-story/web-story-page-components/web-story-page-components.tsx
Outdated
Show resolved
Hide resolved
src/atoms/visual-story/web-story-page-components/web-story-page-components.tsx
Outdated
Show resolved
Hide resolved
|
Corresponding PR in framework quintype/quintype-node-framework#181 |
| } | ||
| }; | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Do specify mandatory/optional for each of the below, along with he default values for optional ones.
docs-src/tutorials/visual-stories.md
Outdated
| featureConfig: { | ||
| visualStories: { | ||
| autoAdvanceAfter: "5s", | ||
| bookendUrl: "/foo.json", |
There was a problem hiding this comment.
Adding "/amp/api/v1/bookend.json" could serve as better example
| import { withStoryAndConfig } from "../../../context"; | ||
|
|
||
| export const AmpStoryPageBase = ({ config, story, children, ...props }: AmpStoryPageTypes) => { | ||
| const autoAdvanceAfter = get(config, ["opts", "featureConfig", "visualStories", "autoAdvanceAfter"], null); |
| if (!imgAnimationFeatCfg) return null; | ||
|
|
||
| return { | ||
| ...(imgAnimationFeatCfg.animateIn && { "animate-in": imgAnimationFeatCfg.animateIn }), |
There was a problem hiding this comment.
Consider adding zoom-in as default value for when animateIn is not passed in config.
| huge: "40px" | ||
| } | ||
| }; | ||
| }; |
There was a problem hiding this comment.
These CSS tokens override the default tokens. Since visual stories don't give as much emphasis to text content as text stories, the font size, line height, spacing etc. need to be lesser than text stories, hence this change.
Before:
After:
This reverts commit a15cd8d.
#301