Build components into style guide based on template builder

[fraserclark]

Expanding on Andre work on the style guide, start building and applying the initial styling from the wireframe to the main components that have been agreed

• Text Input
• Text Area
• Radio buttons
• Select box
• Checkbox
• Primary Button
• Secondary Button
• Back button
• "Add Section" skelton
• Cards
• Sectional Cards
• Tabs

[fraserclark]

@jupiter007 I will update this card on Monday. I was off sick at the beginning of the week, so catching up a bit.

Just aiming to get the following ticked off, most have already been as its been styling the react-aria styling but just want to clean my code up a little

• Text Input
• Text Area
• Radio buttons
• Select box
• Checkbox
• Primary Button
• Secondary Button
• Back button
• "Add Section" skeleton

I also have Question/Sectional "card" style in progress but I will split this into a new card as you suggested.

Other

• Cards
• Tabs

I suspect we might need to split these off a little, as I think tabs might come with some chat required and yeah I know youve already put cards elsewhere and we know cards might become "list" based on wireframe feedback so we dont want to take this too far.

[jupiter007]

Thanks for the update @fraserclark. Good point about cards becoming Lists.

[fraserclark]

@andrewebdev @jupiter007 @briri

Video on update https://www.loom.com/share/ee503e9419af41f097ed41db97c71cf8

Syntax Highlighting in style guide

What is your opinion of us getting some syntax highlighting library installed to make the style guide a bit easier to work with so we can copy and paste or do you guys see moving this style guide into Storybook or something like that?

Select React-aria has a custom select box component. When I tried it on mobile it 'breaks' the standard built in "select" functionality on iOS and Android - which isn't great

https://react-spectrum.adobe.com/react-aria/Select.html

They also mention issues with accessibility testing, although they claim it is accessible https://react-spectrum.adobe.com/react-aria/Select.html#accessibility

How should we proceed - should we do style the react-aria one and also create an alternative more traditional html select? I don't like the modification of native elements generally.

I would say in the wireframes at the moment, we have, where possible, tried to avoid using whenever possible to be aligned with UK Government, USWDS and many similar user testing's recommendations that a should only be used as a last resort

[jupiter007]

@fraserclark , based on React Aria's documentaiton, their custom select does support the ARIA listbox pattern and keyboard navigation, so I'm thinking it will be ok to use it even though it's not a native select, and as long as it is functioning as expected on different devices. Some things I would check for is does the React Aria Select have proper aria role assignments.

I can do a quick test using my Mac's VoiceOver. Also, we could seek the assistance of the accessibility team here to confirm that this component is compliant.

In regards to Syntax highlighting, I like the idea of using Storybook for documenting our components.

[jupiter007]

@fraserclark thanks for the video update

[fraserclark]

@jupiter007 - Great idea perhaps checking with the accessibility team, as it might be out of our hands.

I do agree with you it's almost certainly okay to use, in my testing it did work reasonably on different devices - just noticed it was the "native" interaction you'd expect of a select box on Android or iOS