✨ Added utilities storybook entry

packages/design-system/src/styleguide/SpacingPreview.vue

@@ -0,0 +1,67 @@
+<template>
+	<div>
+		<div
+			v-for="size in ['5xs', '4xs', '3xs', '2xs', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl']"
+			class="spacing-group"
+			:key="size"
+		>
+			<div
+				class="spacing-example"
+				:class="`${property[0]}${side ? side[0] : ''}-${size}`"
+			>
+				<div class="spacing-box" />
+				<div class="label">
+					{{property[0]}}{{side ? side[0] : ''}}-{{size}}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'SpacingPreview',
+	props: {
+		property: {
+			type: String,
+			default: 'padding',
+		},
+		side: {
+			type: String,
+			default: '',
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+$box-size: 64px;
+
+.spacing-group {
+  border: var(--border-base);
+  margin: var(--spacing-s);
+  display: inline-flex;
+}
+
+.spacing-example {
+  background: white;
+  position: relative;
+  background: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.25);
+}
+
+.spacing-box {
+  width: $box-size;
+  height: $box-size;
+  display: block;
+  position: relative;
+  background: var(--color-primary);
+}
+
+.label {
+  position: absolute;
+  bottom: -1rem;
+  right: 0;
+  font-size: var(--font-size-s);
+}
+</style>

packages/design-system/src/styleguide/utilities.stories.ts

@@ -0,0 +1,47 @@
+/* tslint:disable:variable-name */
+
+import {StoryFn} from "@storybook/vue";
+import SpacingPreview from "../styleguide/SpacingPreview.vue";
+
+export default {
+	title: 'Utilities/Spacing',
+};
+
+const Template: StoryFn = (args, {argTypes}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		SpacingPreview,
+	},
+	template: `<spacing-preview v-bind="$props" />`,
+});
+
+export const Padding = Template.bind({});
+Padding.args = { property: 'padding' };
+
+export const PaddingTop = Template.bind({});
+PaddingTop.args = { property: 'padding', side: 'top' };
+
+export const PaddingRight = Template.bind({});
+PaddingRight.args = { property: 'padding', side: 'right' };
+
+export const PaddingBottom = Template.bind({});
+PaddingBottom.args = { property: 'padding', side: 'bottom' };
+
+export const PaddingLeft = Template.bind({});
+PaddingLeft.args = { property: 'padding', side: 'left' };
+
+export const Margin = Template.bind({});
+Margin.args = { property: 'margin' };
+
+export const MarginTop = Template.bind({});
+MarginTop.args = { property: 'margin', side: 'top' };
+
+export const MarginRight = Template.bind({});
+MarginRight.args = { property: 'margin', side: 'right' };
+
+export const MarginBottom = Template.bind({});
+MarginBottom.args = { property: 'margin', side: 'bottom' };
+
+export const MarginLeft = Template.bind({});
+MarginLeft.args = { property: 'margin', side: 'left' };
+