feat(components): create FeatureTag base components

packages/big-design/src/components/FeatureTag/FeatureTag.tsx

@@ -0,0 +1,25 @@
+import { IconProps } from '@bigcommerce/big-design-icons';
+import React, { ComponentPropsWithoutRef, forwardRef, ReactElement } from 'react';
+
+import { StyledFeatureTag, StyledFeatureTagIcon, StyledFeatureTagLabel } from './styled';
+
+export interface FeatureTagProps extends ComponentPropsWithoutRef<'a'> {
+  icon?: ReactElement<IconProps>;
+  isActive?: boolean;
+  label: string;
+}
+
+export const FeatureTag = forwardRef<HTMLAnchorElement, FeatureTagProps>(
+  ({ icon, isActive, ...props }) => {
+    const label = props.label;
+
+    return (
+      <StyledFeatureTag {...props} className={isActive ? 'active' : ''}>
+        {icon ? <StyledFeatureTagIcon>{icon}</StyledFeatureTagIcon> : null}
+        <StyledFeatureTagLabel>{label}</StyledFeatureTagLabel>
+      </StyledFeatureTag>
+    );
+  },
+);
+
+FeatureTag.displayName = 'FeatureTag';

packages/big-design/src/components/FeatureTag/__snapshots__/spec.tsx.snap

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render link 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  gap: 0.25rem;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #ECEEF5;
+  color: #5E637A;
+  fill: #5E637A;
+  padding-inline: 0.5rem;
+  padding-block: calc(0.5rem / 4);
+  border-radius: 0.25rem;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  outline: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  color: #0B38D9;
+  fill: #3C64F4;
+  background-color: #DBE3FE;
+}
+
+.c0:focus {
+  outline: 4px solid #DBE3FE;
+}
+
+.c0:active,
+.c0.active {
+  color: #0B38D9;
+  fill: #0B38D9;
+  background-color: #F0F3FF;
+}
+
+.c0:focused:active {
+  color: #0B38D9;
+  fill: #0B38D9;
+  background-color: #F0F3FF;
+  outline: 4px solid #9EB3FC;
+}
+
+<a
+  class="c0"
+  href="#"
+  label="Feature Tag"
+>
+  Feature Tag
+</a>
+`;
+
+exports[`renders with external icon 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  gap: 0.25rem;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #ECEEF5;
+  color: #5E637A;
+  fill: #5E637A;
+  padding-inline: 0.5rem;
+  padding-block: calc(0.5rem / 4);
+  border-radius: 0.25rem;
+  line-height: 1.25rem;
+  font-size: 0.875rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  outline: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  color: #0B38D9;
+  fill: #3C64F4;
+  background-color: #DBE3FE;
+}
+
+.c0:focus {
+  outline: 4px solid #DBE3FE;
+}
+
+.c0:active,
+.c0.active {
+  color: #0B38D9;
+  fill: #0B38D9;
+  background-color: #F0F3FF;
+}
+
+.c0:focused:active {
+  color: #0B38D9;
+  fill: #0B38D9;
+  background-color: #F0F3FF;
+  outline: 4px solid #9EB3FC;
+}
+
+<a
+  class="c0"
+  href="#"
+  label="Feature Tag"
+  target="_blank"
+>
+  Feature Tag
+</a>
+`;

packages/big-design/src/components/FeatureTag/index.ts

@@ -0,0 +1 @@
+export { FeatureTag, type FeatureTagProps } from './FeatureTag';

packages/big-design/src/components/FeatureTag/spec.tsx

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import 'jest-styled-components';
+
+import { FeatureTag } from './FeatureTag';
+
+test('render link', () => {
+  const { container } = render(<FeatureTag href="#" label="Feature Tag" />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});
+
+test('renders with external icon', () => {
+  const { container } = render(<FeatureTag href="#" label="Feature Tag" target="_blank" />);
+
+  expect(container.firstChild).toMatchSnapshot();
+});

packages/big-design/src/components/FeatureTag/styled.tsx

@@ -0,0 +1,70 @@
+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)};
+  outline: none;
+  padding-block: calc(${({ theme }) => theme.spacing.xSmall} / 4);
+  padding-inline: ${({ theme }) => theme.spacing.xSmall};
+  text-decoration: none;
+  user-select: none;
+
+  &: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 {
+    background-color: ${({ theme }) => theme.colors.primary10};
+    color: ${({ theme }) => theme.colors.primary60};
+    fill: ${({ theme }) => theme.colors.primary60};
+  }
+
+  &: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;
+  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;
+`;

packages/big-design/src/components/index.ts

@@ -43,3 +43,4 @@ export * from './Toggle';
 export * from './Typography';
 export * from './Worksheet';
 export * from './FileUploader';
+export * from './FeatureTag';