hypnagaga/src/components/Block/stories/docs/snapWidths.md

Normally, Block containers resize fluidly below the original width. Sometimes, though, you may want the container to snap to the next breakpoint -- for example, if you have a static graphic that looks fine at the set block breakpoints, but isn't so great at widths inbetween.

You can use the snap prop to force the container to snap to each block width successively as the window sizes down.

<Block width="wider" snap={true}>
  <!-- Your stuff for this block -->
</Block>

If you want to skip certain block widths entirely, you can add one or more class of skip-{block width class} to the Block.

<!-- Will skip wide and go straight to normal column width on resize. -->
<Block width="wider" snap={true} cls="skip-wide">
  <!-- Your stuff for this block -->
</Block>

This is probably easier to see in action than explain in words, so check out the "Canvas" tab for the demo below and resize the window to get a better picture of how it all works.

NOTE: The snap width breakpoints only work on Block components with widths wider and below. widest and fluid are both always fluid, since they go edge-to-edge.

Using with custom column widths

Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom columnWidths on the Article tag (rare!), you can't use this functionality without a little extra work.

Luckily, it's still pretty easy. Just add a cls or id to your Block so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the block-snap-widths SCSS mixin to get the same functionality at your custom breakpoints.

<Block width="wider" snap={true} cls="custom-blocks">
  <!-- Your stuff for this block -->
</Block>

<style lang="scss">
  $column-width-narrower: 310px;
  $column-width-narrow: 450px;
  $column-width-normal: 600px;
  $column-width-wide: 860px;
  $column-width-wider: 1400px;

  @import "@reuters-graphics/graphics-components/scss/mixins";

  :global {
    div.custom-blocks {
      @include block-snap-widths;
    }
  }
</style>