feat: APPS-2956 flexible-divider-way finder (#621)

* feat: start flexibile divider way finder

* feat: finish horizontal divider

* chore: lint

* fix: errors with empty story (?)

* fix: broken spec, restore story

* fix: story url

---------

Co-authored-by: Jess Divers <[email protected]>

src/lib-components/DividerWayFinder.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 // Helpers
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'

src/lib-components/Flexible/HorizontalDivider.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FlexibleHorizontalDividerBlock } from '@/types/flexible_types'
+
+// COMPONENTS
+import DividerWayFinder from '@/lib-components/DividerWayFinder.vue'
+
+const { block } = defineProps({
+  block: {
+    type: Object as PropType<FlexibleHorizontalDividerBlock>,
+    default: () => { },
+  },
+})
+</script>
+
+<template>
+  <DividerWayFinder v-if="block.horizontalDivider" />
+</template>

src/lib-components/index.js

@@ -54,6 +54,7 @@ export { default as FlexibleCardWithImage } from './Flexible/CardWithImage.vue'
 export { default as FlexibleForm } from './Flexible/Form.vue'
 export { default as FlexibleGridGalleryCards } from './Flexible/GridGalleryCards.vue'
 export { default as FlexibleHighlight } from './Flexible/Highlight.vue'
+export { default as FlexibleHorizontalDivider } from './Flexible/HorizontalDivider.vue'
 export { default as FlexibleImpactNumberCards } from './Flexible/ImpactNumberCards.vue'
 export { default as FlexibleImpactNumbersCarousel } from './Flexible/ImpactNumbersCarousel.vue'
 export { default as FlexibleMediaGallery } from './Flexible/MediaGallery.vue'

src/stories/Flexible_HorizontalDivider.spec.js

@@ -0,0 +1,10 @@
+describe('FLEXIBLE / Horizontal Divider', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=flexible-horizontal-divider--default&args=&viewMode=story'
+    )
+    cy.get('.divider-way-finder').should('exist')
+
+    cy.percySnapshot('FLEXIBLE / HorizontalDivider: Default')
+  })
+})

src/stories/Flexible_HorizontalDivider.stories.js

@@ -0,0 +1,38 @@
+import FlexibleHorizontalDivider from '@/lib-components/Flexible/HorizontalDivider.vue'
+
+export default {
+  title: 'FLEXIBLE / Horizontal Divider',
+  component: FlexibleHorizontalDivider,
+}
+
+const mockHorizontalDivider = {
+  id: '1234556',
+  typeHandle: 'horizontalDivider',
+  horizontalDivider: true
+}
+
+// Default
+export function Default() {
+  return {
+    data() {
+      return {
+        block: mockHorizontalDivider,
+      }
+    },
+    components: { FlexibleHorizontalDivider },
+    template: '<flexible-horizontal-divider :block="block" />',
+  }
+}
+
+// Hidden Divider
+export function Hidden() {
+  return {
+    data() {
+      return {
+        block: { ...mockHorizontalDivider, horizontalDivider: false },
+      }
+    },
+    components: { FlexibleHorizontalDivider },
+    template: '<flexible-horizontal-divider :block="block" />',
+  }
+}

src/types/flexible_types.ts

@@ -163,6 +163,12 @@ interface FlexibleHighlight {
   to: string
 }
 
+export interface FlexibleHorizontalDividerBlock {
+  id: string
+  typeHandle: string
+  horizontalDivider: boolean
+}
+
 interface FlexibleImpactNumberCard {
   id: string
   title: string