Re-add utility classes mw-m, mw-l and mw-xl for metadata_item.vue

What does this MR do and why?

Re-adds the CSS Classes mw-m, mw-l and mw-xl which had been removed in !164861 (diffs). As @julie_huang noticed, we have a dynamic CSS Class in app/assets/javascripts/vue_shared/components/registry/metadata_item.vue which is still using mw-s, mw-m, mw-l, and mw-xl.

So, instead of removing mw-s as the issue original suggested, this MR brings back the CSS Classes, and also adds a Storybook Story to verify MetadataItem.vue

To test this locally, (make sure to yarn install) run yarn storybook:start and open the URL http://localhost:9002/?path=/story/vue-shared-registry-metadata-item--varying-sizes

Screenshots

Related to #482680 (closed)