From 125cfe7235b5d080a84a218682f5402b1b10f843 Mon Sep 17 00:00:00 2001
From: Jess <jessica.divers@gmail.com>
Date: Fri, 27 Sep 2024 11:51:42 -0700
Subject: [PATCH] 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 <jessica.divers@library.ucla.edu>
---
 src/lib-components/DividerWayFinder.vue       |  2 +-
 .../Flexible/HorizontalDivider.vue            | 19 ++++++++++
 src/lib-components/index.js                   |  1 +
 .../Flexible_HorizontalDivider.spec.js        | 10 +++++
 .../Flexible_HorizontalDivider.stories.js     | 38 +++++++++++++++++++
 src/types/flexible_types.ts                   |  6 +++
 6 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/lib-components/Flexible/HorizontalDivider.vue
 create mode 100644 src/stories/Flexible_HorizontalDivider.spec.js
 create mode 100644 src/stories/Flexible_HorizontalDivider.stories.js

diff --git a/src/lib-components/DividerWayFinder.vue b/src/lib-components/DividerWayFinder.vue
index a28cd5853..bf2278d6f 100644
--- a/src/lib-components/DividerWayFinder.vue
+++ b/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'
diff --git a/src/lib-components/Flexible/HorizontalDivider.vue b/src/lib-components/Flexible/HorizontalDivider.vue
new file mode 100644
index 000000000..de4ce0506
--- /dev/null
+++ b/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>
diff --git a/src/lib-components/index.js b/src/lib-components/index.js
index 619ef5c31..3399b74b9 100644
--- a/src/lib-components/index.js
+++ b/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'
diff --git a/src/stories/Flexible_HorizontalDivider.spec.js b/src/stories/Flexible_HorizontalDivider.spec.js
new file mode 100644
index 000000000..cd94025e9
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/src/stories/Flexible_HorizontalDivider.stories.js b/src/stories/Flexible_HorizontalDivider.stories.js
new file mode 100644
index 000000000..330813149
--- /dev/null
+++ b/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" />',
+  }
+}
diff --git a/src/types/flexible_types.ts b/src/types/flexible_types.ts
index 6ece67334..3fa742cac 100644
--- a/src/types/flexible_types.ts
+++ b/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