feat: add Label

src/components/Label/Label.props.ts

@@ -0,0 +1,15 @@
+import { SystemProps } from '@xstyled/styled-components';
+
+import { config } from './Label.styles';
+// import { ButtonProps } from '../Button';
+
+import { Theme } from '@/theme';
+import { DeepPartial } from '@/utility-types/DeepPartial';
+
+export type LabelProps = {
+  label: string;
+  // action?: ButtonProps<'bare'>;
+  tooltip?: boolean;
+  optional?: string;
+  custom?: DeepPartial<SystemProps<Theme> & typeof config>;
+};

src/components/Label/Label.stories.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Label } from './Label';
+
+const meta = {
+  title: 'Components/Label',
+  component: Label,
+  tags: ['autodocs'],
+  args: {
+    label: 'Label',
+  },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Optional: Story = {
+  args: {
+    optional: '(optional)',
+  },
+};
+
+export const Tooltip: Story = {
+  args: {
+    tooltip: true,
+  },
+};
+
+export const All: Story = {
+  args: {
+    optional: '(optional)',
+    tooltip: true,
+  },
+};

src/components/Label/Label.styles.ts

@@ -0,0 +1,30 @@
+import { SystemProps } from '@xstyled/styled-components';
+
+import { Theme } from '@/theme';
+
+type Config = SystemProps<Theme> & TooltipConfig & OptionalConfig;
+
+type TooltipConfig = {
+  tooltip: SystemProps<Theme>;
+};
+
+type OptionalConfig = {
+  optional: SystemProps<Theme>;
+};
+
+export const config = {
+  text: 'medium-175',
+  color: 'content-primary',
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: 'component-gap-xSmall',
+  tooltip: {
+    color: 'content-secondary',
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: 'xSmall',
+  },
+  optional: {
+    color: 'content-tertiary',
+  },
+} as const satisfies Config;

src/components/Label/Label.test.tsx

@@ -0,0 +1,55 @@
+import { Label } from './Label';
+import { render } from '../../tests/render';
+
+const getLabel = (jsx: JSX.Element) => {
+  const { queryByTestId } = render(jsx);
+
+  return {
+    label: queryByTestId('label'),
+    optional: queryByTestId('label-optional'),
+    tooltip: queryByTestId('label-tooltip'),
+  };
+};
+
+describe('Label', () => {
+  it('should render the label', () => {
+    const { label } = getLabel(<Label label="Hello there" />);
+    expect(label).toBeInTheDocument();
+  });
+
+  it('should render correct text', () => {
+    const { label } = getLabel(<Label label="Hello there" />);
+    expect(label).toHaveTextContent('Hello there');
+  });
+
+  it('should render optional if a prop passed', () => {
+    const { optional } = getLabel(
+      <Label label="Hello there" optional="optional" />
+    );
+    expect(optional).toBeInTheDocument();
+  });
+
+  it('should not render optional if a prop not passed', () => {
+    const { optional } = getLabel(<Label label="Hello there" />);
+    expect(optional).toBeNull();
+  });
+
+  it('should render tooltip if a prop passed', () => {
+    const { tooltip } = getLabel(<Label label="Hello there" tooltip />);
+    expect(tooltip).toBeInTheDocument();
+  });
+
+  it('should not render tooltip if a prop not passed', () => {
+    const { tooltip } = getLabel(<Label label="Hello there" />);
+    expect(tooltip).toBeNull();
+  });
+
+  it('should render correct colors', () => {
+    const { label, optional, tooltip } = getLabel(
+      <Label label="Hello there" optional="optional" tooltip />
+    );
+    expect(label).toHaveStyle('color: rgb(39, 39, 39)');
+    expect(optional).toHaveStyle('color: rgb(126, 126, 126);');
+    expect(tooltip).toHaveStyle('color: rgb(85, 85, 85)');
+  });
+});

src/components/Label/Label.tsx

@@ -0,0 +1,48 @@
+import { Icon } from '@virtuslab/tetrisly-icons';
+import { MarginProps } from '@xstyled/styled-components';
+import { merge } from 'lodash';
+
+import { LabelProps } from './Label.props';
+import { config as defaultConfig } from './Label.styles';
+// import { Button } from '../Button';
+
+import { tet } from '@/tetrisly';
+
+export const Label = ({
+  label,
+  tooltip,
+  optional,
+  custom = {},
+  ...rest
+}: LabelProps & MarginProps) => {
+  const {
+    optional: optionalStyles,
+    tooltip: tooltipStyles,
+    ...labelStyles
+  } = merge(defaultConfig, custom);
+  return (
+    <tet.div {...labelStyles} {...rest} data-testid="label">
+      {label}
+      {!!optional && (
+        <tet.span {...optionalStyles} data-testid="label-optional">
+          {optional}
+        </tet.span>
+      )}
+      {/* TODO: add tooltip instead of bare icon, when we get one */}
+      {tooltip && (
+        <tet.span {...tooltipStyles} data-testid="label-tooltip">
+          <Icon name="16-info" />
+        </tet.span>
+      )}
+      {/* TODO: add action when we discuss how they should behave */}
+      {/* {!!action && (
+        <Button
+          variant="bare"
+          {...action}
+          marginLeft="auto"
+          data-testid="label-action"
+        />
+      )} */}
+    </tet.div>
+  );
+};

src/components/Label/index.ts

@@ -0,0 +1 @@
+export { Label } from './Label';

src/index.ts

@@ -1,2 +1,3 @@
 export { Button } from './components/Button';
+export { Label } from './components/Label';
 export { StatusDot } from './components/StatusDot';