feat(component): implement FeatureTag component

[davelinke]

What?

Introducing the FeatureTag component

Why?

The feature tag component is a stylized link/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 } 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">
      <FeatureTag href="#" icon={<AutoAwesomeIcon />} label="Woot" />
      <FeatureTag
        href="https://bigcommerce.com"
        icon={<AutoAwesomeIcon />}
        label="BigCommerce"
        target="_blank"
      />
      <FeatureTag href="#" icon={<AutoAwesomeIcon />} isActive={true} label="BigCommerce" />
      <Grid gridColumns="100px">
        <FeatureTag href="#" icon={<AutoAwesomeIcon />} label="A really long text" />
      </Grid>
    </Flex>
  );
};

export default PageFeatureTag;

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4cd6443

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[chanceaclark]

1. We don't need fill set as our icons use color: currentColor for the stroke/fill it needs.
2. Switch over to the theme.typography.fontSize + theme.lineHeight settings, instead of using remCalc (Use remCalc when we don't have the value on the theme).
3. Use the & > svg to size the SVG instead of needing another HTML element.
4. Use ellipsis from polished.
5. Cleaned up link state styles.

Suggested change

	import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
	import styled from 'styled-components';
	export const StyledFeatureTag = styled.a`
	align-items: center;
	background-color: ${({ theme }) => theme.colors.secondary20};
	border-radius: ${({ theme }) => theme.borderRadius.normal};
	display: inline-flex;
	color: ${({ theme }) => theme.colors.secondary60};
	cursor: pointer;
	fill: ${({ theme }) => theme.colors.secondary60};
	flex-wrap: nowrap;
	font-size: ${({ theme }) => theme.helpers.remCalc(14)};
	gap: ${({ theme }) => theme.spacing.xxSmall};
	justify-content: center;
	line-height: ${({ theme }) => theme.helpers.remCalc(20)};
	max-width: fit-content;
	outline: none;
	padding-block: calc(${({ theme }) => theme.spacing.xSmall} / 4);
	padding-inline: ${({ theme }) => theme.spacing.xSmall};
	text-decoration: none;
	user-select: none;
	&.active {
	background-color: ${({ theme }) => theme.colors.primary10};
	color: ${({ theme }) => theme.colors.primary50};
	fill: ${({ theme }) => theme.colors.primary};
	}
	&:hover,
	&.active:hover {
	background-color: ${({ theme }) => theme.colors.primary20};
	color: ${({ theme }) => theme.colors.primary60};
	fill: ${({ theme }) => theme.colors.primary40};
	}
	&:focus {
	outline: 4px solid ${({ theme }) => theme.colors.primary20};
	}
	&:active,
	&.active:active {
	background-color: ${({ theme }) => theme.colors.primary30};
	color: ${({ theme }) => theme.colors.primary60};
	fill: ${({ theme }) => theme.colors.primary70};
	}
	&:focused:active {
	background-color: ${({ theme }) => theme.colors.primary10};
	color: ${({ theme }) => theme.colors.primary60};
	fill: ${({ theme }) => theme.colors.primary60};
	outline: 4px solid ${({ theme }) => theme.colors.primary30};
	}
	`;
	StyledFeatureTag.defaultProps = { theme: defaultTheme };
	export const StyledFeatureTagIcon = styled.div`
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	height: ${({ theme }) => theme.helpers.remCalc(18)};
	justify-content: center;
	overflow: hidden;
	width: ${({ theme }) => theme.helpers.remCalc(18)};
	& > svg {
	transform: scale(0.75);
	transform-origin: center;
	}
	`;
	StyledFeatureTagIcon.defaultProps = { theme: defaultTheme };
	export const StyledFeatureTagLabel = styled.span`
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	`;
	import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
	import { ellipsis } from 'polished';
	import styled from 'styled-components';
	export const StyledFeatureTag = styled.a`
	align-items: center;
	background-color: ${({ theme }) => theme.colors.secondary20};
	border-radius: ${({ theme }) => theme.borderRadius.normal};
	display: inline-flex;
	color: ${({ theme }) => theme.colors.secondary60};
	cursor: pointer;
	flex-wrap: nowrap;
	font-size: ${({ theme }) => theme.typography.fontSize.small};
	gap: ${({ theme }) => theme.spacing.xxSmall};
	justify-content: center;
	line-height: ${({ theme }) => theme.lineHeight.small};
	max-width: fit-content;
	outline: none;
	padding-block: ${({ theme }) => theme.helpers.remCalc(2)};
	padding-inline: ${({ theme }) => theme.spacing.xSmall};
	text-decoration: none;
	user-select: none;
	&:hover {
	background-color: ${({ theme }) => theme.colors.primary20};
	color: ${({ theme }) => theme.colors.primary60};
	}
	&:focus-visible {
	outline: 4px solid ${({ theme }) => theme.colors.primary20};
	}
	&:active {
	background-color: ${({ theme }) => theme.colors.primary10};
	color: ${({ theme }) => theme.colors.primary50};
	}
	&:focus-visible:active {
	background-color: ${({ theme }) => theme.colors.primary10};
	color: ${({ theme }) => theme.colors.primary60};
	}
	& > svg {
	height: ${({ theme }) => theme.spacing.medium};
	flex-shrink: 0;
	width: ${({ theme }) => theme.spacing.medium};
	}
	`;
	StyledFeatureTag.defaultProps = { theme: defaultTheme };
	export const StyledFeatureTagLabel = styled.span`
	${ellipsis()}
	`;

[chanceaclark]

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