feat: add Common story

infermedica · Oct 19, 2023 · fd6bd12 · fd6bd12
1 parent b8adf14
commit fd6bd12
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 137 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,98 +1,11 @@
 <template>
-  <UiHeading
-    level="2"
-  >
-    {{ title }}
-  </UiHeading>
-  <UiClampContent
-    :truncate-strategy="truncateHTMLByTextElementCount(7)"
-    @expand="$emit('clickExpand', 'reasoning')"
-    @scroll-to-element-request="$emit('scrollToElementRequest', $event)"
-  >
-    <UiHeading level="4">
-      {{ subtitle }}
-    </UiHeading>
-    <UiBulletPoints
-      tag="ul"
-    >
-      <template
-        v-for="evidence in evidences"
-        :key="evidence.id"
-      >
-        <UiBulletPointsItem
-          v-bind="{
-            icon: ArrowThinUp,
-            class: 'ui-bullet-points-item--primary',
-          }"
-        >
-          <UiText
-            tag="span"
-            class="ui-text--2-comfortable"
-          >
-            {{ evidence.commonName }}
-          </UiText>
-        </UiBulletPointsItem>
-      </template>
-    </UiBulletPoints>
-  </UiClampContent>
+  <UiButton class="custom-button">
+    Label
+  </UiButton>
 </template>
 
 <script setup lang="ts">
-import { truncateHTMLByTextElementCount } from './utilities/helpers/truncate-HTML';
-// import { UiButton } from '../index';
-import UiText from './components/atoms/UiText/UiText.vue';
-import UiBulletPoints from './components/molecules/UiBulletPoints/UiBulletPoints.vue';
-import UiBulletPointsItem from './components/molecules/UiBulletPoints/_internal/UiBulletPointsItem.vue';
-import UiHeading from './components/atoms/UiHeading/UiHeading.vue';
-import UiClampContent from './components/molecules/UiClampContent/UiClampContent.vue';
-import ArrowThinUp from './assets/icons/arrow-thin-up.svg';
-
-defineEmits([
-  'scrollToElementRequest',
-  'clickExpand',
-]);
-
-const title = 'Reasoning';
-const subtitle = 'Reasons for';
-const evidences = [
-  {
-    id: 1,
-    commonName: 'test',
-  },
-  {
-    id: 2,
-    commonName: 'test',
-  },
-  {
-    id: 3,
-    commonName: 'test',
-  },
-  {
-    id: 4,
-    commonName: 'test',
-  },
-  {
-    id: 5,
-    commonName: 'test',
-  },
-  {
-    id: 6,
-    commonName: 'test',
-  },
-  {
-    id: 7,
-    commonName: 'test',
-  },
-  {
-    id: 8,
-    commonName: 'test',
-  },
-  {
-    id: 9,
-    commonName: 'test',
-  },
-];
-
+import { UiButton } from '../index';
 </script>
 
 <style lang="scss">

diff --git a/src/components/molecules/UiClampContent/UiClampContent.stories.js b/src/components/molecules/UiClampContent/UiClampContent.stories.js
@@ -1,18 +1,21 @@
 import { actions } from '@storybook/addon-actions';
+import { ref } from 'vue';
 import UiText from '@/components/atoms/UiText/UiText.vue';
 import UiBulletPoints from '@/components/molecules/UiBulletPoints/UiBulletPoints.vue';
 import UiBulletPointsItem from '@/components/molecules/UiBulletPoints/_internal/UiBulletPointsItem.vue';
 import UiHeading from '@/components/atoms/UiHeading/UiHeading.vue';
 import UiClampContent from '@/components/molecules/UiClampContent/UiClampContent.vue';
 import ArrowThinUp from '@/assets/icons/arrow-thin-up.svg';
+import ArrowThinDown from '@/assets/icons/arrow-thin-down.svg';
 import { truncateHTMLByTextElementCount } from '@/utilities/helpers/truncate-HTML';
+import './UiClampContent.stories.scss';
 
 const events = actions({
   clickExpand: 'clickExpand',
   scrollToElementRequest: 'scrollToElementRequest',
 });
-const subtitle = 'Reasons for';
-const evidences = [
+
+const presenceEvidences = [
   {
     id: 1,
     commonName: 'Headache',
@@ -33,40 +36,33 @@ const evidences = [
     id: 5,
     commonName: 'Moderate headache',
   },
+];
+const absenceEvidences = [
   {
-    id: 6,
+    id: 1,
     commonName: 'Headache',
   },
   {
-    id: 7,
+    id: 2,
     commonName: 'Eye pain',
   },
   {
-    id: 8,
+    id: 3,
     commonName: 'Pain around or behind eye',
   },
-  {
-    id: 9,
-    commonName: 'Light sensitivity',
-  },
-  {
-    id: 10,
-    commonName: 'Moderate headache',
-  },
 ];
 
 export default {
   title: 'Molecules/ClampContent',
   component: UiClampContent,
   args: {
-    subtitle,
-    evidences,
+    presenceEvidences,
+    absenceEvidences,
   },
   argTypes: {},
-  decorators: [ (story) => ({
-    components: { story },
-    template: `<div class="max-w-32 min-h-115">
-      <story/>
+  decorators: [ () => ({
+    template: `<div class="min-h-115">
+      <story />
     </div>`,
   }) ],
 };
@@ -81,46 +77,82 @@ export const Common = {
       UiText,
     },
     setup() {
-      const handleTruncateStrategy = () => truncateHTMLByTextElementCount(7);
+      const handleTruncateStrategy = ref(truncateHTMLByTextElementCount(7));
 
       return {
         ...args,
         ...events,
         ArrowThinUp,
+        ArrowThinDown,
         handleTruncateStrategy,
       };
     },
-    template: `<UiClampContent
+    template: `
+    <UiClampContent
       :truncate-strategy="handleTruncateStrategy"
       @expand="clickExpand"
       @scroll-to-element-request="scrollToElementRequest"
-      v-bind="$props"
     >
-      <UiHeading level="4">
-        {{ subtitle }}
-      </UiHeading>
-      <UiBulletPoints
-        tag="ul"
-      >
-        <template
-          v-for="evidence in evidences"
-          :key="evidence.id"
+      <div class="ui-clamp-content__story-presence">
+        <UiHeading level="4">
+          Reasoning for
+        </UiHeading>
+        <UiText class="ui-clamp-content__story-text">
+          Presence of symptoms:
+        </UiText>
+        <UiBulletPoints
+          tag="ul"
+        >
+          <template
+            v-for="evidence in presenceEvidences"
+            :key="evidence.id"
+          >
+            <UiBulletPointsItem
+              v-bind="{
+                icon: ArrowThinUp,
+                class: 'ui-bullet-points-item--primary',
+              }"
+            >
+              <UiText
+                tag="span"
+                class="ui-text--2-comfortable"
+              >
+                {{ evidence.commonName }}
+              </UiText>
+            </UiBulletPointsItem>
+          </template>
+        </UiBulletPoints>
+      </div>
+      <div class="ui-clamp-content__story-absence">
+        <UiHeading level="4">
+          Reasons against
+        </UiHeading>
+        <UiText class="ui-clamp-content__story-text">
+          Absence of symptoms:
+        </UiText>
+        <UiBulletPoints
+          tag="ul"
         >
-          <UiBulletPointsItem
-            v-bind="{
-              icon: ArrowThinUp,
-              class: 'ui-bullet-points-item--primary',
-            }"
+          <template
+            v-for="evidence in absenceEvidences"
+            :key="evidence.id"
           >
-            <UiText
-              tag="span"
-              class="ui-text--2-comfortable"
+            <UiBulletPointsItem
+              v-bind="{
+                icon: ArrowThinDown,
+                class: 'ui-bullet-points-item--primary',
+              }"
             >
-              {{ evidence.commonName }}
-            </UiText>
-          </UiBulletPointsItem>
-        </template>
-      </UiBulletPoints>
+              <UiText
+                tag="span"
+                class="ui-text--2-comfortable"
+              >
+                {{ evidence.commonName }}
+              </UiText>
+            </UiBulletPointsItem>
+          </template>
+        </UiBulletPoints>
+      </div>
     </UiClampContent>`,
   }),
 };
diff --git a/src/components/molecules/UiClampContent/UiClampContent.stories.scss b/src/components/molecules/UiClampContent/UiClampContent.stories.scss
@@ -0,0 +1,16 @@
+.ui-clamp-content {
+  &__story-presence { 
+    --bullet-points-item-marker-color: var(--color-blue-600);
+  }
+
+  &__story-text {
+    --text-margin-block: var(--space-8);
+  }
+
+  &__story-absence {
+    --bullet-points-item-marker-color: var(--color-gray-600);
+
+    margin-top: var(--space-24);
+  }
+}
+
diff --git a/src/components/molecules/UiClampContent/UiClampContent.vue b/src/components/molecules/UiClampContent/UiClampContent.vue
@@ -82,7 +82,7 @@ import type { DefineAttrsProps } from '../../../types';
 
 export interface ClampContentProps {
   /**
-   * Use this props to set truncateStategy for a component.
+   * Use this props to set truncateStrategy for a component.
    */
   truncateStrategy?: ReturnType<
       typeof truncateHTMLByElements |

diff --git a/src/utilities/helpers/truncate-HTML/index.ts b/src/utilities/helpers/truncate-HTML/index.ts
@@ -78,7 +78,6 @@ export function truncateHTMLByCharactersCount(maxCharacters: number) {
 export function truncateHTMLByTextElementCount(maxTextElements: number) {
   return (content: HTMLElement) => {
     const textNodes = findAllTextNodes(content);
-    console.log('textNodes', textNodes);
     const clonedNode = content.cloneNode(true) as HTMLElement;
     const truncated = textNodes.length > maxTextElements;