Merge pull request #51 from PxTools/feature/PXWEB2-54-Tag-component-T…

…ake2

Tag component with nx migrations

apps/pxweb2/public/theme/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 29 Feb 2024 09:16:51 GMT
+ * Generated on Fri, 01 Mar 2024 13:12:05 GMT
  */
 
 :root {
@@ -16,7 +16,7 @@
   --px-color-background-subtle: #f0f8f9;
   --px-color-surface-default: #ffffff;
   --px-color-surface-subtle: #f0f8f9;
-  --px-color-surface-moderate: #c3dcdc;
+  --px-color-surface-moderate: #dbebeb;
   --px-color-surface-inverted: #274247;
   --px-color-surface-highlight: #ecfeed;
   --px-color-surface-action: #274247;
@@ -40,10 +40,10 @@
   --px-color-border-action: #274247;
   --px-color-border-hover: #62919a;
   --px-color-border-selected: #274247;
-  --px-color-border-info: #37b3f9;
-  --px-color-border-success: #4fc887;
-  --px-color-border-warning: #fcbf27;
-  --px-color-border-error: #fd7e6d;
+  --px-color-border-info: #0179c8;
+  --px-color-border-success: #00824d;
+  --px-color-border-warning: #cb7603;
+  --px-color-border-error: #e23822;
   --px-color-border-focus: #9272fc;
   --px-color-border-focus-on-inverted: #9272fc;
   --px-color-text-default: #162327;

apps/pxweb2/src/app/app.tsx

@@ -7,6 +7,7 @@ import {
   BodyLong,
   Ingress,
   Label,
+  Tag
 } from '@pxweb2/pxweb2-ui';
 import useLocalizeDocumentAttributes from '../i18n/useLocalizeDocumentAttributes';
 
@@ -63,6 +64,9 @@ export function App() {
         her every day, every week, every month, every year. She never saw a
         wolf, no even a little fox.
       </BodyLong>
+      <Tag size="medium" variant="info">Mandatory</Tag>&nbsp;
+      <Tag size="medium" variant="info" type='border'>Mandatory</Tag>&nbsp;
+      <br />  
       <form id="form1" onSubmit={testSubmit}>
         <Label htmlFor="fname" textcolor="subtle">
           First name:

libs/pxweb2-ui/src/index.ts

@@ -1,6 +1,7 @@
+export * from './lib/components/Tag/Tag';
 export * from './lib/components/Typography/Label/Label';
 export * from './lib/components/Typography/BodyShort/BodyShort';
 export * from './lib/components/Button/Button';
-export * from './lib/components/Typography/Ingress/Ingress'
+export * from './lib/components/Typography/Ingress/Ingress';
 export * from './lib/components/Typography/Heading/Heading';
 export * from './lib/components/Typography/BodyLong/BodyLong';

libs/pxweb2-ui/src/lib/components/Tag/Tag.module.scss

@@ -0,0 +1,79 @@
+@use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
+
+.tag {
+    display: inline-flex;
+    font-family: PxWeb-font-500;
+    font-weight: 500;
+    color: var(--px-color-text-default);
+    align-items: center;
+}
+
+.medium {
+    padding: 4px 8px;
+    border-radius: var(--px-border-radius-small);
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.small {
+    padding: 1px 6px 2px 6px;
+    border-radius: var(--px-border-radius-xsmall);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.xsmall {
+    padding: 0px 4px;
+    border-radius:  var(--px-border-radius-xsmall);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.neutral {
+    background-color: var(--px-color-surface-moderate);
+    &.border {
+        background-color: var(--px-color-surface-subtle);
+        outline: 1px solid var(--px-color-border-moderate);
+        outline-offset: -1px;
+    }
+}
+
+.info {
+    background-color: var(--px-color-surface-info-moderate);
+    &.border {
+        background-color: var(--px-color-surface-info-subtle);
+        outline: 1px solid var(--px-color-border-info);
+        outline-offset: -1px;
+    }
+}
+
+.success {
+    background-color: var(--px-color-surface-success-moderate);
+    &.border {
+        background-color: var(--px-color-surface-success-subtle);
+        outline: 1px solid var(--px-color-border-success);
+        outline-offset: -1px;
+    }
+}
+
+.warning {
+    background-color: var(--px-color-surface-warning-moderate);
+    &.border {
+        background-color: var(--px-color-surface-warning-subtle);
+        outline: 1px solid var(--px-color-border-warning);
+        outline-offset: -1px;
+    }
+}
+
+.error {
+    background-color: var(--px-color-surface-error-moderate);
+    &.border {
+        background-color: var(--px-color-surface-error-subtle);
+        outline: 1px solid var(--px-color-border-error);
+        outline-offset: -1px;
+    }
+}
+
+.default {
+    border: none;
+}

libs/pxweb2-ui/src/lib/components/Tag/Tag.spec.tsx

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

libs/pxweb2-ui/src/lib/components/Tag/Tag.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { Tag } from './Tag';
+
+const meta: Meta<typeof Tag> = {
+  component: Tag,
+  title: 'Components/Tag',
+};
+export default meta;
+
+const text = 'Tag';
+
+export const Default = {
+  args: {
+    size: 'medium',
+    variant: 'neutral',
+    type: 'default',
+    children: text  
+  },
+  argTypes: {
+    size: {
+      options: ['medium', 'small', 'xsmall'],
+      control: { type: 'radio' },
+    },
+    variant: {
+      options: ['neutral', 'info', 'success', 'warning', 'error'],
+      control: { type: 'radio' },
+    },
+    type: {
+      options: ['default', 'border'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export const Size: StoryFn<typeof Tag> = () => {
+  return (
+    <>
+      <h1>Size</h1>
+
+      <h2>default:</h2>
+      <Tag>{text}</Tag>
+
+      <h2>medium:</h2>
+      <Tag size="medium">{text}</Tag>
+
+      <h2>small:</h2>
+      <Tag size="small">{text}</Tag>
+
+      <h2>xsmall:</h2>
+      <Tag size="xsmall">{text}</Tag>
+    </>
+  );
+};
+
+export const Variant: StoryFn<typeof Tag> = () => {
+  return (
+    <>
+      <h1>Variant</h1>
+
+      <h2>default:</h2>
+      <Tag>{text}</Tag>
+
+      <h2>neutral:</h2>
+      <Tag variant='neutral'>{text}</Tag>
+
+      <h2>info:</h2>
+      <Tag variant='info'>{text}</Tag>
+
+      <h2>success:</h2>
+      <Tag variant='success'>{text}</Tag>
+
+      <h2>warning:</h2>
+      <Tag variant='warning'>{text}</Tag>
+
+      <h2>error:</h2>
+      <Tag variant='error'>{text}</Tag>
+    </>
+  );
+};
+
+export const Type: StoryFn<typeof Tag> = () => {
+  return (
+    <>
+      <h1>Type</h1>
+
+      <h2>default:</h2>
+      <Tag type='default'>{text}</Tag>
+
+      <h2>border:</h2>
+      <Tag type='border'>{text}</Tag>
+    </>
+  );
+};

libs/pxweb2-ui/src/lib/components/Tag/Tag.tsx

@@ -0,0 +1,32 @@
+import cl from 'clsx';
+import classes from './Tag.module.scss';
+
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  size?: 'medium' | 'small' | 'xsmall';
+  variant?: 'neutral' | 'info' | 'success'| 'warning'| 'error';
+  type?: 'default' | 'border';
+  children?: React.ReactNode;
+}
+
+export function Tag({
+  size = 'medium',
+  variant = 'neutral',
+  type = 'default',
+  children,
+  ...rest
+}: TagProps) {
+  return (
+    <span 
+    className={cl(
+      classes.tag,
+      classes[size],
+      classes[variant],
+      classes[type] 
+      )}      
+      >
+      {children}
+    </span>
+  );
+}
+
+export default Tag;

libs/pxweb2-ui/style-dictionary/src/default_theme.json

@@ -39,7 +39,7 @@
       "value": "#F0F8F9"
     },
     "surface-moderate": {
-      "value": "#C3DCDC"
+      "value": "#DBEBEB"
     },
     "surface-inverted": {
       "value": "#274247"
@@ -111,16 +111,16 @@
       "value": "#274247"
     },
     "border-info": {
-      "value": "#37B3F9"
+      "value": "#0179C8"
     },
     "border-success": {
-      "value": "#4FC887"
+      "value": "#00824D"
     },
     "border-warning": {
-      "value": "#FCBF27"
+      "value": "#CB7603"
     },
     "border-error": {
-      "value": "#FD7E6D"
+      "value": "#E23822"
     },
     "border-focus": {
       "value": "#9272FC"