feat(component): implement FeatureTag component

[davelinke]

What?

Introducing the FeatureTag component

Why?

The feature tag component is a stylized badge interface element that describes categories of a particular application or feature within the BC properties.

Screenshots/Screen Recordings

Figma

Prototype

Testing/Proof

dev.tsx code

import { FeatureTag, Flex, Grid, FlexItem, FeatureSet, H2 } from '@bigcommerce/big-design';
import { AutoAwesomeIcon } from '@bigcommerce/big-design-icons';
import React, { FunctionComponent } from 'react';

const PageFeatureTag: FunctionComponent = () => {
  return (
    <Flex flexDirection="column" flexGap="1rem" padding="large">
      <H2>Feature set</H2>
      <FlexItem>
        <FeatureSet
          features={[
            { label: 'Feature 1', icon: <AutoAwesomeIcon /> },
            { label: 'Feature 2', icon: <AutoAwesomeIcon /> },
            { label: 'Feature 3', icon: <AutoAwesomeIcon /> },
          ]}
        ></FeatureSet>
      </FlexItem>
      <FlexItem>
        <Grid gridColumns={'100px'}>
        <FeatureSet
          features={[
            { label: 'A really long text', icon: <AutoAwesomeIcon /> },
            { label: 'A really long text', icon: <AutoAwesomeIcon /> },
            { label: 'A really long text', icon: <AutoAwesomeIcon /> },
          ]}
        ></FeatureSet>
        </Grid>
      </FlexItem>
      <H2>Feature tag</H2>
      <FeatureTag icon={<AutoAwesomeIcon />} label="Woot" />
      <FeatureTag icon={<AutoAwesomeIcon />} label="BigCommerce" />
      <FeatureTag icon={<AutoAwesomeIcon />} label="BigCommerce" marginBottom={'xLarge'} />
      <Grid gridColumns="100px">
        <FeatureTag
          icon={<AutoAwesomeIcon />}
          label="A really long text"
          title="A really long text"
        />
      </Grid>
    </Flex>
  );
};

export default PageFeatureTag;

[changeset-bot]

🦋 Changeset detected

Latest commit: 9e0d377

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@bigcommerce/big-design	Minor
@bigcommerce/docs	Minor
@bigcommerce/big-design-patterns	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[chanceaclark]

Before you convert this from draft to regular PR make sure to add documentation.