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();
@@ -33,9 +33,9 @@ export function App() {
       <Button variant="tertiary" icon="ChevronUp" onClick={test} size="small" ></Button>
 
       <form id="form1" onSubmit={ testSubmit }>
-        <label htmlFor="fname">First name:</label><br />
+        <Label htmlFor="fname">First name:</Label><br />
         <input type="text" id="fname" name="fname" defaultValue="John" /><br />
-        <label htmlFor="lname">Last name:</label><br />
+        <Label htmlFor="lname" textcolor='subtle'>Last name:</Label><br />
         <input type="text" id="lname" name="lname" defaultValue="Doe" />
       </form>
       <Button form="form1" variant="primary" type="submit">Button</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,38 @@
+@use '../../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
+
+.label {
+    font-family: PxWeb-font-500;
+    font-weight: 500;
+    letter-spacing: 0em;
+}
+
+.small {
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.medium {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.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,83 @@
+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 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>
+    </>
+  );
+};
+
+export const LabelFor: StoryFn<typeof Label> = () => {
+  return (
+    <>
+      <h1>Label for</h1>
+
+      <Label htmlFor="fname">First name:</Label><br />
+      <input type="text" id="fname" name="fname" defaultValue="John" /><br />
+      <Label htmlFor="lname">Last name:</Label><br />
+      <input type="text" id="lname" name="lname" defaultValue="Doe" />
+    </>
+  );
+};

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

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