Feat beam components creation

[crabinak]

Here are a few components I put together based on some of the styles from the Metadata Component. I also refactored some styling/class names for consistency, using a BEAM_ELEMENT-NAME--MODIFIER pattern (I know some issues were raised that some classes had generic names like .btn which is now .beam_btn).

Some of the components:

1. BeamHeading: Basically an H1 wrapper for beam headings. This just saves some time from having to type an h1 and include the heading classes each time.
2. SplitColumn: A two column layout. Props can be used to designate the content alignment and justification on flex axis. The left column is left aligned by default while the right column is right aligned. I was not sure if each column needed individual control for content alignment. This will collapse into a column upon reaching mobile sizes and left align everything.
3. Arrow: The Arrow is in its own component. Not sure if this is useful, but the code was already there. It will take up 100% of its container by default.
4. BeamBtn: Another basic wrapper, this time for buttons. Saves having to type an HTML button element and apply the beam_btn class each time.
5. BeamProgress: A text element that has a progress label displaying a complete/incomplete message. This was basically the "status" element from the metadata component. The label and complete/incomplete messages can be set via props.

I added a Components story that showcases these components. There is a "Text Elements" variant that uses mostly CSS modifiers applied to text elements (beam--alert, beam_copy, beam--bold).

This is mostly a list of stuff I picked out from the metadata component. Let me know if there are any other types of components that could be useful.

[github-actions]

Coverage Report for ./beam

Status	Category	Percentage	Covered / Total
🔴	Lines	9.72% (🎯 70%)	7 / 72
🔴	Statements	10.38% (🎯 70%)	8 / 77
🔴	Functions	4.76% (🎯 70%)	1 / 21
🔴	Branches	0% (🎯 70%)	0 / 53

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
beam/src/components/ActionFooter.vue	0%	100%	0%	0%	12, 14-16, 15, 2-3
beam/src/components/BeamArrow.vue	0%	0%	100%	0%	2, 4
beam/src/components/BeamMetadata.vue	0%	0%	0%	0%	2-3, 6-7, 23-1
beam/src/components/BeamModal.vue	0%	0%	0%	0%	3, 2-1, 4-5, 5
beam/src/components/BeamModalOutlet.vue	0%	100%	100%	0%	2
beam/src/components/BeamProgress.vue	0%	0%	0%	0%	10, 26-28, 27, 2, 2-3
beam/src/components/Confirm.vue	0%	0%	0%	0%	4-5
beam/src/components/ItemCount.vue	0%	0%	0%	0%	18, 29, 29, 31-36, 32-35, 2, 1
beam/src/components/ListAnchor.vue	0%	100%	100%	0%	1
beam/src/components/ListItem.vue	0%	0%	0%	0%	37, 3-4, 2-1, 10, 14
beam/src/components/ListView.vue	0%	0%	0%	0%	36, 38-40, 39, 42-44, 43, 46-52, 47-51, 50, 2, 6-null
beam/src/components/Navbar.vue	0%	0%	0%	0%	13, 15-17, 16, 2, 4, 7-null
beam/src/components/SplitColumn.vue	0%	0%	100%	0%	14, 5, 8
Unchanged Files
beam/src/components/ItemCheck.vue	0%	0%	0%	0%	9, 2-3
beam/src/components/ScanInput.vue	88.88%	100%	50%	87.5%	23

Generated in workflow #369 for commit dc7720f by the Vitest Coverage Report Action

[agritheory]

@crabinak I know I mentioned that I want to turn this comment of yours into documentation, but I think @lauty95 needs these components to move forward.