feat: 🎸 Add feature to pin text elements

✅ Closes: #258

src/features/pin/styles/pin.styl

@@ -25,6 +25,7 @@
     z-index 99999
 
 .ph-speccer.speccer.pin.svg,
+.ph-speccer.speccer.pin.text,
 .ph-speccer.speccer.pin.curly
   &::after
     content none !important
@@ -78,3 +79,60 @@
       width var(--ph-speccer-pin-space)
       top 50%
       right 100%
+
+
+.ph-speccer.path.speccer.text
+  color var(--ph-speccer-color-text-dark)
+
+.ph-speccer.speccer.pin.text
+  font-family var(--ph-speccer-font-family)
+  height auto
+  min-height var(--ph-speccer-pin-size)
+  display flex
+  position absolute
+  border-radius 0
+  background-color transparent
+  color var(--ph-speccer-color-text-dark)
+  font-weight 400
+  align-items flex-start
+  justify-content center
+  line-height 130%
+  z-index 100000
+  flex-direction column
+  width 250px
+  grid-gap 2px
+
+  &.right
+    padding-left 1rem
+
+  &.left
+    padding-right 1rem
+    width 170px
+
+  &.top
+    padding-bottom 1rem
+
+  &.bottom
+    padding-top 1rem
+
+.ph-speccer.speccer.pin.text
+  & .ph-speccer.title
+    text-transform uppercase
+    font-weight 500
+    font-size 11px
+
+.ph-speccer.speccer.pin.text
+  & .ph-speccer.description
+    line-height 130%
+    position relative
+    font-weight 600
+    font-size 0.875rem
+
+.ph-speccer.speccer.pin.text
+  & .ph-speccer.heading
+    line-height 130%
+    position relative
+    font-weight 600
+    font-size 0.875rem
+    text-transform uppercase
+    color var(--ph-speccer-base-color)

src/features/pin/utils/get-content-for-pin.ts

@@ -0,0 +1,50 @@
+import { SpeccerOptionsInterface } from '../../../types/speccer';
+
+/**
+ * Generates the content for a pin element based on the provided symbol, target element, and options.
+ *
+ * @param {string} symbol - The default symbol to use if no text or description is provided.
+ * @param {HTMLElement} targetElement - The HTML element for which the content is being generated.
+ * @param {SpeccerOptionsInterface} options - The options that define how the content should be generated.
+ * @returns {string} The generated content for the pin element.
+ *
+ * @example
+ * ```ts
+ * const symbol = '★';
+ * const targetElement = document.getElementById('myElement');
+ * const options = { pin: { text: true } };
+ * const content = getContentForPin(symbol, targetElement, options);
+ * console.log(content);
+ * // Output: '<span class="ph-speccer title">Title Text</span>'
+ * ```
+ */
+export const getContentForPin = (
+  symbol: string,
+  targetElement: HTMLElement,
+  options: SpeccerOptionsInterface
+): string => {
+  const { pin } = options;
+
+  if (!pin) return symbol;
+
+  const { text } = pin;
+  const _is_text =
+    text && targetElement.getAttribute('data-speccer-title') !== null;
+
+  if (!_is_text) return symbol;
+
+  const _title = targetElement.getAttribute('data-speccer-title');
+  const _description = targetElement.getAttribute('data-speccer-description');
+  const _heading =
+    targetElement.nodeName.indexOf('H') === 0
+      ? `<span class="ph-speccer heading">${targetElement.nodeName}</span>`
+      : '';
+
+  if (!_description && _title)
+    return `${_heading}<span class="ph-speccer title">${_title}</span>`;
+
+  if (_description && _title)
+    return `${_heading}<span class="ph-speccer title">${_title}</span><span class="ph-speccer description">${_description.replaceAll('\\n', '<br/>')}</span>`;
+
+  return symbol;
+};

src/types/enums/area.ts

@@ -17,6 +17,7 @@ export enum SpeccerAreaEnum {
 export enum PinAreaEnum {
   Pin = 'pin', // Represents an pin area
   Parent = 'parent', // Represents a parent area
+  Text = 'text', // Represents a text area
   Enclose = 'enclose', // Represents an enclose area
   Subtle = 'subtle', // Represents an subtle area
   Bracket = 'bracket', // Represents a bracket area

src/utils/area.ts

@@ -134,6 +134,20 @@ export const isParentArea = (areaString: string | null): boolean => {
   return areas.includes(PinAreaEnum.Parent);
 };
 
+/**
+ * Checks if 'text' area is present in the provided areaString.
+ *
+ * @param {string|null} areaString - The string containing areas.
+ * @returns boolean `true` if 'text' is present, otherwise `false`.
+ */
+export const isTextArea = (areaString: string | null): boolean => {
+  if (areaString === null) return false;
+
+  const areas = getAreasFromString(areaString);
+
+  return areas.includes(PinAreaEnum.Text);
+};
+
 /**
  * Checks if 'height' area is present in the provided areaString.
  *