This is very similar to the left rail used on product pages, except that it appears on the right and the icon for it is an info "i" symbol on the mobile variation.
For all intents and purposes, there are two options for implementing this:
1) Clone the left rail and call the new block "Right rail"
2) Add left/right as style variants and rename the existing left rail something like "side rail"
Option 1 is probably a better idea overall though, since right rail might require additional DOM manipulation and/or styling so trying to put all the concerns for left and right into the same block might just make the code a lot more convoluted and harder to read.
This story is just for making the rail show up and work appropriately, assuming that the block is added just below the hero in the first section. If there is standard content, then it should render inside the right rail, etc. All other variations can be implemented as additional stories to get this going quickly.
NOTE: The example above shows navigation which is implemented in #41 -- this story is just to get the right rail itself working with default (plain text) content.
The existing left rail should mostly have what you need for this, but you might have to put the checkbox in a different part of the dom. Feel free to reach me for details on how the left rail works, the short explanation is that the checkbox manages the checked (visible) or unchecked (hidden) state of the rail, and the CSS selectors are used to avoid the need for lots of javascript. In fact, the only JS needed sets up the DOM elements initially and CSS does everything else.
This is very similar to the left rail used on product pages, except that it appears on the right and the icon for it is an info "i" symbol on the mobile variation.
(from: https://www.momentive.com/en-us/careers/employee-development )
For all intents and purposes, there are two options for implementing this: 1) Clone the left rail and call the new block "Right rail" 2) Add left/right as style variants and rename the existing left rail something like "side rail"
Option 1 is probably a better idea overall though, since right rail might require additional DOM manipulation and/or styling so trying to put all the concerns for left and right into the same block might just make the code a lot more convoluted and harder to read.
This story is just for making the rail show up and work appropriately, assuming that the block is added just below the hero in the first section. If there is standard content, then it should render inside the right rail, etc. All other variations can be implemented as additional stories to get this going quickly.
NOTE: The example above shows navigation which is implemented in #41 -- this story is just to get the right rail itself working with default (plain text) content.
Example pages:
Mobile example:
The existing left rail should mostly have what you need for this, but you might have to put the checkbox in a different part of the dom. Feel free to reach me for details on how the left rail works, the short explanation is that the checkbox manages the checked (visible) or unchecked (hidden) state of the rail, and the CSS selectors are used to avoid the need for lots of javascript. In fact, the only JS needed sets up the DOM elements initially and CSS does everything else.