feat(eyebrow): adding eyebrow variation

libs/react-components/src/lib/components/Typography/Typography.stories.tsx

@@ -10,6 +10,13 @@ const meta = {
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `The Typography component provides a consistent and flexible way to display text across your application. 
+        It supports a range of predefined styles and customizations, ensuring your text aligns with the design system.
+        `,
+      },
+    },
   },
   argTypes: {
     scale: {
@@ -28,6 +35,13 @@ const meta = {
   },
   args: { scale: 'headline1' },
   render: (args) => {
+    const element = document.getElementById(
+      'story--components-typography--basic--primary-inner'
+    );
+    element?.style.setProperty(
+      '--td-web-typography-eyebrow-alignment',
+      'center'
+    );
     return <Typography scale={args.scale}>Change the scale value.</Typography>;
   },
 } satisfies Meta<typeof Typography>;
@@ -36,3 +50,33 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {};
+
+export const LeftAlignedEyebrow: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `The alignment of the eyebrow scale can be customized by modifying 
+          the custom CSS property '--td-web-typography-eyebrow-alignment'. 
+
+          This property accepts the following values:
+
+    center: Aligns the eyebrow to the center.
+    start: Aligns the eyebrow to the start (left-aligned).
+    end: Aligns the eyebrow to the end (right-aligned).
+
+    Here the css property is set as '--td-web-typography-eyebrow-alignment: start;'`,
+      },
+    },
+  },
+  render: (_args) => {
+    const element = document.getElementById(
+      'story--components-typography--left-aligned-eyebrow-inner'
+    );
+    element?.style.setProperty('--td-web-typography-eyebrow-alignment', 'left');
+    return (
+      <Typography scale="eyebrow">
+        Left aligned eyebrow
+      </Typography>
+    );
+  },
+};

libs/react-components/src/lib/components/Typography/styles.module.scss

@@ -79,8 +79,9 @@
   line-height: var(--td-web-typography-caption-line-height);
 }
 
+
 .eyebrow {
-  align-items: center;
+  align-items: var(--td-web-typography-eyebrow-alignment, 'center');
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -94,6 +95,7 @@
   }
 }
 
+
 /* Mobile styles */
 @media only screen and (max-width: 768px) {
   .headline1 {

libs/react-components/src/lib/styles.scss

@@ -88,6 +88,8 @@ $dark-colors: map-merge($dark-colors, map-get(covalent-tokens.$tokens, 'dark'));
   --td-web-typography-headline3-font-weight: 600;
   --td-web-typography-headline3-letter-spacing: -0.24px;
   --td-web-typography-headline3-line-height: 34px;
+
+  --td-web-typography-eyebrow-alignment: center;
 }
 
 // Dark theme class