Tag Component added

[hyperloo]

Hello Artur Bień,

Tag Component

This is the Tag Component. I tried to make the UI as similar as the SS you have tagged in the issue.

Tags Container Component - Extra Component

This is made with the purpose of Containing the tags at one place.

How I approached

Tag Size

I tried taking the height of the tag as 28px by enlarging Window95 UI to the height of the screen and then measuring the respective size of the tag.

Tag Content Management

I passed an Array of content to the component, which will be basically about the type of content.

[
    { type: 'text', content: 'Microsoft' },
    {
      type: 'image',
      content: MsnImage,
      alt: 'microsoft'
    }
  ]

Screenshot

• Actual Implementation
  

• Story Book Implementation
  

Features

• Users can create Tags in different formats (as in the SS) by the different ordering of the contents passed in the contentArray.
• Users can also give different colors and background colors to the tags by passing them as props.

Note : These are the minimal features that I think (since haven't seen UI in real) should be there. Please guide me what to add more to make the component more interesting.

Bugs

• Don't know why but the original preview and the preview in the Story Books seem to be different despite having the same Styling. It is my first time with the Story Book so I can't exactly figure it out.
• Can't Pass SVGs as React Component in the Image in Story Book implementation. Same is working when done by simple implementation.

Todos:

• Adding .mdx file
• Adding .specs.js file

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/arturbien/react95/2Srz2TGeJDytHHU3skCG4JhqJjd6
✅ Preview: https://react95-git-fork-hyperloo-tags-arturbien.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3e982e9:

Sandbox	Source
React95 template	Configuration

[hyperloo]

Hello Artur Bień,

Chip Component

This is the Chip Component. I tried to make the UI as similar to what you have instructed in the issue.

Component

<Chip size='md'>

Props

label - Label of the Chip
onClick - onClick Function to the Chip
size - Size of the chip (["sm","md","lg"]) (sm byd default)
fullWidth
backgroundColor
color

Note: BackgroundColor and Color are just optional props. If not provided, Chip will take up respective properties based on the Theme.

Screenshot

• Default Chip i.e. Small Sized
  

• Button with onClick function thus having tabIndex and role as button
  

• Box Shadow on Hover
  

• Theme based colouring
  

• Chip with provided Background Color
  

• Chip with provided text color
  

Bugs

• MDX not been shown in the StoryBook

Todos:

• Adding .spec.js file