Feature/pxweb2 90 label

apps/pxweb2/src/app/app.tsx

@@ -2,7 +2,7 @@
 import styles from './app.module.scss';
 
 
-import { Button } from '@pxweb2/pxweb2-ui';
+import { Button, Label } from '@pxweb2/pxweb2-ui';
 
 function test(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
   event.preventDefault();
@@ -17,6 +17,8 @@ export function App() {
     <>
       <h1>Welcome to pxweb2!</h1>
 
+      <Label size='medium' align='start' textcolor='subtle'>This is a label</Label>
+
       <Button variant="primary" onClick={test}>Button</Button>
       <Button variant="primary" disabled onClick={test}>Button</Button>
       <Button variant="primary" icon="Pencil" onClick={test}></Button>

libs/pxweb2-ui/src/index.ts

@@ -1 +1,2 @@
+export * from './lib/components/Typography/Label/Label';
 export * from './lib/components/Button/Button';

libs/pxweb2-ui/src/lib/components/Typography/Label/Label.module.scss

@@ -0,0 +1,51 @@
+@use '../../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
+
+.label {
+    font-family: PxWeb-font-500;
+    font-weight: 500;
+    letter-spacing: 0em;
+    margin: 0;
+}
+
+.small {
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.medium {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.align-start{
+    text-align: start;
+}
+
+.align-center{
+    text-align: center;
+}
+
+.align-end{
+    text-align: end;
+}
+
+.textcolor-default{
+    color: var(--px-color-text-default);
+}
+
+.textcolor-subtle{
+    color: var(--px-color-text-subtle);
+}
+
+.visually-hidden {
+    border: 0 !important;
+    clip: rect(0, 0, 0, 0) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    top: 0 !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    width: 1px !important;
+  }

libs/pxweb2-ui/src/lib/components/Typography/Label/Label.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Label from './Label';
+
+describe('Label', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Label />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/pxweb2-ui/src/lib/components/Typography/Label/Label.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { Label } from './Label';
+
+const meta: Meta<typeof Label> = {
+  component: Label,
+  title: 'Label',
+};
+export default meta;
+
+const text = 'This is a label';
+
+export const Default = {
+  args: {
+    children: text
+  },
+  argTypes: {
+    size: {
+      options: ['medium', 'small'],
+      control: { type: 'radio' }
+    }
+  }
+};
+
+export const Size: StoryFn<typeof Label> = () => {
+  return (
+    <>
+      <h1>Size</h1>
+
+      <h2>default:</h2>
+      <Label>{text}</Label>
+
+      <h2>medium:</h2>
+      <Label size='medium'>{text}</Label>
+
+      <h2>small:</h2>
+      <Label size='small'>{text}</Label>
+    </>
+  );
+};
+
+export const Align: StoryFn<typeof Label> = () => {
+  return (
+    <>
+      <h1>Align</h1>
+
+      <h2>Default:</h2>
+      <Label>{text}</Label>
+
+      <h2>start:</h2>
+      <Label align='start'>{text}</Label>
+
+      <h2>center:</h2>
+      <Label align='center'>{text}</Label>
+
+      <h2>end:</h2>
+      <Label align='end'>{text}</Label>
+    </>
+  );
+};
+
+export const Textcolor: StoryFn<typeof Label> = () => {
+  return (
+    <>
+      <h1>Textcolor</h1>
+
+      <h2>Default:</h2>
+      <Label>{text}</Label>
+
+      <h2>default:</h2>
+      <Label textcolor='default'>{text}</Label>
+
+      <h2>subtle:</h2>
+      <Label textcolor='subtle'>{text}</Label>
+    </>
+  );
+};
+
+  export const VisuallyHidden: StoryFn<typeof Label> = () => {
+    return (
+      <>
+        <h1>VisuallyHidden</h1>
+
+        <h2>Default:</h2>
+        <Label>{text}</Label>
+
+        <h2>hidden:</h2>
+        <Label visuallyHidden>{text}</Label>
+      </>
+    );
+};

libs/pxweb2-ui/src/lib/components/Typography/Label/Label.tsx

@@ -0,0 +1,36 @@
+import cl from 'clsx';
+import classes from './Label.module.scss';
+
+export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  size?: 'medium' | 'small';
+  align?: 'start' | 'center' | 'end';
+  textcolor?: 'default' | 'subtle';
+  visuallyHidden?: boolean;
+  children?: React.ReactNode;
+}
+
+export function Label({
+  size = 'medium', 
+  align = 'start',
+  textcolor = 'default',
+  visuallyHidden = false,
+  children,
+  ...rest
+}: LabelProps) {
+  return (
+    <p 
+      className={cl(
+        classes.label,
+        classes[size],
+        cl({[classes[`align-${align}`]]: align}),
+        cl({[classes[`textcolor-${textcolor}`]]: textcolor}),
+        cl({[classes['visually-hidden']]: visuallyHidden})
+        )}
+        {...rest}
+        >
+        {children}
+    </p>
+  );
+}
+
+export default Label;