From 59deaac005f60d7dbd9cdeac70022e42cc8e96fd Mon Sep 17 00:00:00 2001
From: mbehzad <mehran.behzad@diva-e.com>
Date: Wed, 10 Apr 2024 18:04:24 +0200
Subject: [PATCH] feat(pv-stylemark): add info regarding the source of the
 components styleguide to the new stlymark

this will allow in multi-tenant codebases for easier distinguishing between component with the same
name
---
 packages/pv-stylemark/tasks/lsg/getLsgData.js   |  3 +++
 .../tasks/templates/lsg-component.hbs           |  4 ++++
 .../components/dds-component/dds-component.scss | 17 +++++++++++++++++
 3 files changed, 24 insertions(+)

diff --git a/packages/pv-stylemark/tasks/lsg/getLsgData.js b/packages/pv-stylemark/tasks/lsg/getLsgData.js
index 98b4d36..9de5781 100644
--- a/packages/pv-stylemark/tasks/lsg/getLsgData.js
+++ b/packages/pv-stylemark/tasks/lsg/getLsgData.js
@@ -33,6 +33,7 @@ const { resolveApp, getAppConfig } = require("../../helper/paths");
  * @typedef {{
  *  componentName: string;
  *  componentPath: string;
+ *  srcPath: string;
  *  options: Object;
  *  description: string;
  *  examples: Array<StyleMarkExampleData>;
@@ -90,6 +91,7 @@ const getLsgDataForPath = async (markdownPath) => {
   const { name, dir } = pathParse(markdownPath);
   const componentsSrc = resolveApp(getAppConfig().componentsSrc);
   const componentPath = relPath(componentsSrc, dir);
+  const srcPath = relPath(componentsSrc, markdownPath);
 
   const { attributes: frontmatterData, body: fileContentBody } = frontmatter(fileContent);
 
@@ -112,6 +114,7 @@ const getLsgDataForPath = async (markdownPath) => {
   return {
     componentName: name,
     componentPath,
+    srcPath,
     options: frontmatterData,
     description,
     examples: exampleData,
diff --git a/packages/pv-stylemark/tasks/templates/lsg-component.hbs b/packages/pv-stylemark/tasks/templates/lsg-component.hbs
index 9f82ad4..08a7636 100644
--- a/packages/pv-stylemark/tasks/templates/lsg-component.hbs
+++ b/packages/pv-stylemark/tasks/templates/lsg-component.hbs
@@ -1,5 +1,9 @@
 <section class="dds-component" id="{{componentName}}">
   <h2 class="dds-component__name">{{options.name}}</h2>
+  <h2 class="dds-component__source theme-content-element-source">
+    <span class="dds-component__source-label theme-content-element-source-label">Source:</span>
+    <span class="dds-component__source-path theme-content-element-source-path">{{srcPath}}</span>
+  </h3>
   <div class="dds-component__description">
 {{{description}}}
   </div>
diff --git a/packages/pv-stylemark/ui/components/dds-component/dds-component.scss b/packages/pv-stylemark/ui/components/dds-component/dds-component.scss
index ea8573b..0c85a57 100644
--- a/packages/pv-stylemark/ui/components/dds-component/dds-component.scss
+++ b/packages/pv-stylemark/ui/components/dds-component/dds-component.scss
@@ -11,6 +11,23 @@
     margin: 0 0 24px;
   }
 
+  &__source {
+    margin-bottom: 24px;
+    font-size: 14px;
+    font-weight: normal;
+    color: $dds-color__black-040;
+  }
+
+  &__source-label {
+    margin-right: 4px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  &__source-path {
+    font-family: Courier, monospace;
+  }
+
   &__description {
     h1 {
       @extend %dds-typo__headline-1;