feat(typography): implement typography component

packages/documentation/demos/typography/TypographyBasic.vue

@@ -1,7 +1,16 @@
+<script setup>
+  import { Blockquote, H1, H2, P, Strong, UL } from '@/components/typography/public';
+  import AcvTypography from '@/components/typography/typography.vue';
+</script>
+
 <template>
   <H1 top>
     Acronis UI Component Library
   </H1>
+  <AcvTypography
+    title="Title"
+    subtitle="This is subtitle"
+  />
   <P>
     UI component Library provides a series of out-of-the-box components. Almost all the
     <Strong> default value of props </Strong>

packages/documentation/demos/typography/TypographyClasses.vue

@@ -0,0 +1,8 @@
+<template>
+  <p class="acv-title">
+    Title
+  </p>
+  <p class="acv-subtitle">
+    Subtitle
+  </p>
+</template>

packages/documentation/demos/typography/TypographyComponent.vue

@@ -0,0 +1,26 @@
+<script setup>
+  import AcvTypography from '@/components/typography/typography.vue';
+</script>
+
+<template>
+  <AcvTypography
+    title="Typography component with title and subtitle"
+    subtitle="This is subtitle"
+  />
+
+  <AcvTypography
+    title="Typography component with header-right"
+    subtitle="This is subtitle"
+  >
+    <template #header-right>
+      <div>Header Right</div>
+    </template>
+  </AcvTypography>
+
+  <AcvTypography
+    title="Typography component with text"
+    subtitle="This is subtitle"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </AcvTypography>
+</template>

packages/ui/src/components/typography/typography.ts

@@ -0,0 +1,56 @@
+export interface AcvTypographyProps {
+  /**
+   * Typography title
+   */
+  title?: string
+
+  /**
+   * Typography subtitle
+   */
+  subtitle?: string
+
+  /**
+   * Typography text content
+   */
+  text?: string
+
+  /**
+   * Tag to use for title of the component
+   * @defaultValue 'p'
+   */
+  titleTag?: string
+
+  /**
+   * Tag to use for subtitle of the component
+   * @defaultValue 'p'
+   */
+  subtitleTag?: string
+
+  /**
+   * Tag to use for text rendered via `text` prop
+   * @defaultValue 'p'
+   */
+  textTag?: string
+}
+
+export interface AcvTypographySlots {
+  /**
+   * Custom content for title
+   */
+  'title': (_: any) => null
+
+  /**
+   * Custom content for subtitle
+   */
+  'subtitle': (_: any) => null
+
+  /**
+   * Custom content on right side of title & subtitle.
+   */
+  'header-right': (_: any) => null
+
+  /**
+   * Custom content for text
+   */
+  'default': (_: any) => null
+}

packages/ui/src/components/typography/typography.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+  import type { AcvTypographyProps, AcvTypographySlots } from './typography';
+
+  defineOptions({
+    name: 'AcvTypography'
+  });
+
+  const {
+    title,
+    subtitle,
+    text,
+    titleTag,
+    subtitleTag,
+    textTag
+  } = withDefaults(defineProps<AcvTypographyProps>(), {
+    titleTag: 'p',
+    subtitleTag: 'p',
+    textTag: 'p'
+  });
+
+  defineSlots<AcvTypographySlots>();
+</script>
+
+<template>
+  <div class="acv-typography">
+    <div
+      v-if="$slots.title || title || $slots.subtitle || subtitle || $slots['header-right']"
+      class="title-wrapper"
+    >
+      <div class="flex-grow">
+        <Component
+          :is="titleTag"
+          v-if="title || $slots.title"
+          class="acv-title"
+        >
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </Component>
+        <Component
+          :is="subtitleTag"
+          v-if="subtitle || $slots.subtitle"
+          class="acv-subtitle"
+        >
+          <slot name="subtitle">
+            {{ subtitle }}
+          </slot>
+        </Component>
+      </div>
+      <slot name="header-right" />
+    </div>
+    <Component
+      :is="textTag"
+      v-if="text || $slots.default"
+      class="acv-text"
+    >
+      <slot>
+        {{ text }}
+      </slot>
+    </Component>
+  </div>
+</template>
+
+<style scoped>
+  .acv-typography {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .title-wrapper {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+</style>