search

RockefellerArchiveCenter / styles

Style Library for the Rockefeller Archive Center
https://styles.rockarch.org
MIT License
0 stars 1 forks source link

Add tableOfContents styles #86

Closed HaSistrunk closed 3 years ago

HaSistrunk commented 3 years ago

Fixes #68

Based on styles from rockarch.org.

rockarch.org removes the table of contents display on small screens, where you can then access it using a button. From the html, it looks like we were looking to move away from that, or at least remove it from the component here.

Storybook includes 3 color versions and one with a title, which we don't have existing styles for, so I made some design decisions on those. I welcome feedback if others have a different vision.

I also removed the selector-psuedo-class-focus rule from stylelint/a11y because it wasn't letting me adjust hover styles without also applying a focus style (even though there were existing focus styles that had already been defined in _base.scss).

helrond commented 3 years ago

rockarch.org removes the table of contents display on small screens, where you can then access it using a button. From the html, it looks like we were looking to move away from that, or at least remove it from the component here.

We still need a strategy for mobile though, right? I think part of the complexity is that the actual HTML structure for the table of contents is created by JavaScript by looking at the page headers.

bonniegee commented 3 years ago

I think the line spacing on the title when it wraps (such as on small mobile) may be a little tight: Screen Shot 2021-07-21 at 10 16 31

HaSistrunk commented 3 years ago
  1. In terms of a solution for mobile, I can only really think to build back in the button from rockarch.org since that's the design we have. Otherwise we could just have it move from a multi-column layout on large screens to having the toc take the full width of the screen on small screens like it does on the docs site.
  2. I was trying to use Storybook decorators in the .stories.js file to wrap the color components in a div (which does keep them from overlapping from the sticky styles), but wasn't able to make it work. @helrond , did you ever try to use decorators with components? I can add a wrapping <div> in the handlebars file, but was trying to avoid messing with the component html.
helrond commented 3 years ago

I think my instinct is to keep this component simple. The reality is that the button/dropdown is a completely different component, and (I think) is implemented so that it's shown in place of the table of contents on a smaller screen.

HaSistrunk commented 3 years ago

I think my instinct is to keep this component simple. The reality is that the button/dropdown is a completely different component, and (I think) is implemented so that it's shown in place of the table of contents on a smaller screen.

Seems like a good path forward. We can iterate later if necessary. I think I still need to do a little cleanup here, though.

HaSistrunk commented 3 years ago

Ok, I've simplified this a bit, added the active class, and tweaked things to better enable multiple titles to be used (like in the docs site). I also updated the Storybook documentation accordingly.