Closed AccessPaul closed 1 year ago
Hey this paragraph looks familiar :D
Overnight I had a change of heart about the design of this and so I've pushed in an update to align the stats to a grid (rather than a centred flexbox layout) and added a border to the left edge of each stat. I think this smartens it up a bit and gives some options to align the stats inside text content in a contemporary way.
I can't comment on the file but should
wilson-paragraph-icons.sketch
be included in the PR? 🤔
To make sure the sketch file that provides the paragraph icons is never lost, I included it in the Wilson repo and it gets updated each time we add a paragraph. It also means that a project built with Wilson gets a copy, so that that client can have alterations made to their paragraph icons.
I've updated this PR with various fixes as asked for. A couple of noteworthy points:-
<ul>
and <li>
for separate stats. This is because I don't see a group of stats as a list, but need to be separated for styling purposes. Instead, I've setup each stat as <figure>
(which isn't just for images it seems) and the caption is setup as a <figcaption>
below the stat value.sr-only
version. This seems to work for screen readers like ChromeVox, but if you select the part of the page and click "Speech > Start Speaking" - you'll hear the value twice.import
method I used before.
Adds a new paragraph component for Statistics, with optional CountUp animation on numbers. JS required some changes to Babel and ESlint to suppress some issues with using JS modules (as required by CountUp).
Includes some new utility CSS classes that can be used on fieldgroups to layout input fields in columns. If we like this approach, I can retrospectively apply this to other paragraphs, along with help text.