DesignSelection.vue

<template>
  <div class="designSelection">
    <h5 class='name'>{{ step.name }}</h5>
    <div
      v-for="section of step.sections"
      v-if="section"
      class='selectionBody'>
      <div
        v-for="category of section.categories"
        v-if="category.selected">
        <span v-if="category.name !== step.name" class="categoryName">{{ category.name }}</span>
        <div
          v-for="item of category.items"
          v-if="item.selected">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'designSelection',
  props: {
    step: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style lang="scss">
.designSelection {
  display: flex;
  flex-flow: column;
  width: 100%;
  margin-bottom: 5px;

  h5, h6, span {
    margin: 0;
    text-transform: capitalize;
  }

  .name {
    background: #f5f5f5;
  }

  .categoryName {
    font-weight: bold;
  }

  .selectionBody {
    margin-left: 10px;
  }

}
</style>