feat(Badge): new colors

.changeset/young-clouds-taste.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+feat(Bage): new colors

easy-ui-react/src/Badge/Badge.mdx

@@ -13,12 +13,6 @@ A `<Badge />` can be a simple label.
 
 <Canvas of={BadgeStories.SimpleText} />
 
-## Simple Icon
-
-A `<Badge />` can be a single icon using the `icon` property. The `icon` property accepts any icon symbol from `@easypost/easy-ui-icons`.
-
-<Canvas of={BadgeStories.SimpleIcon} />
-
 ## Detailed Icon
 
 A `<Badge />` can contain an icon and supporting label.

easy-ui-react/src/Badge/Badge.module.scss

@@ -1,7 +1,7 @@
 @use "../styles/common" as *;
 
 .root {
-  @include font-style("small-button");
+  @include font-style("subtitle2");
   border-radius: design-token("shape.border_radius.lg");
   display: inline-flex;
   // Ensures the background colors do not bleed out of the border radius edges
@@ -31,11 +31,17 @@
 }
 
 // prettier-ignore
-.variantPrimary {
-  @include component-token("badge", "primary.color.background", design-token("color.primary.600"));
-  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+.variantPrimary.hasIconOrSecondaryLabel {
   @include component-token("badge", "secondary.color.background", design-token("color.primary.100"));
   @include component-token("badge", "secondary.color.text", design-token("color.primary.800"));
+  @include component-token("badge", "primary.color.background", design-token("color.primary.600"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantPrimary:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.primary.700"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
 }
 
 // prettier-ignore
@@ -93,3 +99,255 @@
   @include component-token("badge", "secondary.color.background", design-token("color.negative.100"));
   @include component-token("badge", "secondary.color.text", design-token("color.primary.800"));
 }
+
+// prettier-ignore
+.variantPrimary\.100.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.primary.600"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.primary.100"));
+  @include component-token("badge", "secondary.color.text", design-token("color.primary.900"));
+}
+
+// prettier-ignore
+.variantPrimary\.100:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.primary.100"));
+  @include component-token("badge", "primary.color.text", design-token("color.primary.900"));
+}
+
+// prettier-ignore
+.variantPrimary\.500.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.primary.800"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.primary.500"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantPrimary\.500:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.primary.500"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantPrimary\.700.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.primary.900"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.primary.700"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantPrimary\.700:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.primary.700"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantSecondary\.100.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.secondary.600"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.secondary.100"));
+  @include component-token("badge", "secondary.color.text", design-token("color.secondary.900"));
+}
+
+// prettier-ignore
+.variantSecondary\.100:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.secondary.100"));
+  @include component-token("badge", "primary.color.text", design-token("color.secondary.900"));
+}
+
+// prettier-ignore
+.variantSecondary\.500.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.secondary.800"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.secondary.500"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantSecondary\.500:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.secondary.500"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantSecondary\.700.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.secondary.900"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.secondary.700"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantSecondary\.700:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.secondary.700"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantPositive\.100.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.positive.600"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.positive.100"));
+  @include component-token("badge", "secondary.color.text", design-token("color.positive.900"));
+}
+
+// prettier-ignore
+.variantPositive\.100:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.positive.100"));
+  @include component-token("badge", "primary.color.text", design-token("color.positive.900"));
+}
+
+// prettier-ignore
+.variantPositive\.600.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.positive.800"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.positive.600"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantPositive\.600:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.positive.600"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantPositive\.700.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.positive.900"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.positive.700"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantPositive\.700:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.positive.700"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantNegative\.100.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.negative.600"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.negative.100"));
+  @include component-token("badge", "secondary.color.text", design-token("color.negative.900"));
+}
+
+// prettier-ignore
+.variantNegative\.100:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.negative.100"));
+  @include component-token("badge", "primary.color.text", design-token("color.negative.900"));
+}
+
+// prettier-ignore
+.variantNegative\.400.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.negative.700"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.negative.400"));
+  @include component-token("badge", "secondary.color.text", design-token("color.negative.900"));
+}
+
+// prettier-ignore
+.variantNegative\.400:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.negative.400"));
+  @include component-token("badge", "primary.color.text", design-token("color.negative.900"));
+}
+
+// prettier-ignore
+.variantNegative\.600.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.negative.800"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.negative.600"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantNegative\.600:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.negative.600"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantWarning\.100.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.warning.500"));
+  @include component-token("badge", "primary.color.text", design-token("color.warning.900"));
+  @include component-token("badge", "secondary.color.background", design-token("color.warning.100"));
+  @include component-token("badge", "secondary.color.text", design-token("color.warning.900"));
+}
+
+// prettier-ignore
+.variantWarning\.100:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.warning.100"));
+  @include component-token("badge", "primary.color.text", design-token("color.warning.900"));
+}
+
+// prettier-ignore
+.variantWarning\.500.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.warning.700"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.warning.500"));
+  @include component-token("badge", "secondary.color.text", design-token("color.warning.900"));
+}
+
+// prettier-ignore
+.variantWarning\.500:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.warning.500"));
+  @include component-token("badge", "primary.color.text", design-token("color.warning.900"));
+}
+
+// prettier-ignore
+.variantWarning\.600.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.warning.800"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.warning.600"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantWarning\.600:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.warning.600"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantNeutral\.050.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.neutral.500"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.neutral.050"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.900"));
+}
+
+// prettier-ignore
+.variantNeutral\.050:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.neutral.050"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.900"));
+}
+
+// prettier-ignore
+.variantNeutral\.500.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.neutral.700"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.neutral.500"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantNeutral\.500:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.neutral.500"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantNeutral\.600.hasIconOrSecondaryLabel {
+  @include component-token("badge", "primary.color.background", design-token("color.neutral.800"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+  @include component-token("badge", "secondary.color.background", design-token("color.neutral.600"));
+  @include component-token("badge", "secondary.color.text", design-token("color.neutral.000"));
+}
+
+// prettier-ignore
+.variantNeutral\.600:not(.hasIconOrSecondaryLabel) {
+  @include component-token("badge", "primary.color.background", design-token("color.neutral.600"));
+  @include component-token("badge", "primary.color.text", design-token("color.neutral.000"));
+}

easy-ui-react/src/Badge/Badge.stories.tsx

@@ -48,19 +48,6 @@ export const SimpleText: Story = {
   },
 };
 
-export const SimpleIcon: Story = {
-  render: Template.bind({}),
-  args: {
-    icon: AnchorIcon,
-    accessibilityLabel: "Text to describe badge",
-  },
-  parameters: {
-    controls: {
-      include: ["accessibilityLabel", "icon", "variant"],
-    },
-  },
-};
-
 export const DetailedIcon: Story = {
   render: Template.bind({}),
   args: {
@@ -98,6 +85,24 @@ export const ColorVariants: Story = {
       <Badge {...args} variant="success" />
       <Badge {...args} variant="warning" />
       <Badge {...args} variant="danger" />
+      <Badge {...args} variant="primary.100" />
+      <Badge {...args} variant="primary.500" />
+      <Badge {...args} variant="primary.700" />
+      <Badge {...args} variant="secondary.100" />
+      <Badge {...args} variant="secondary.500" />
+      <Badge {...args} variant="secondary.700" />
+      <Badge {...args} variant="positive.100" />
+      <Badge {...args} variant="positive.600" />
+      <Badge {...args} variant="positive.700" />
+      <Badge {...args} variant="negative.100" />
+      <Badge {...args} variant="negative.400" />
+      <Badge {...args} variant="negative.600" />
+      <Badge {...args} variant="warning.100" />
+      <Badge {...args} variant="warning.500" />
+      <Badge {...args} variant="warning.600" />
+      <Badge {...args} variant="neutral.050" />
+      <Badge {...args} variant="neutral.500" />
+      <Badge {...args} variant="neutral.600" />
     </>
   ),
   args: {

easy-ui-react/src/Badge/Badge.test.tsx

@@ -22,11 +22,6 @@ describe("<Badge />", () => {
     expect(screen.getByText("Badge text")).toBeInTheDocument();
   });
 
-  it("should render simple icon", () => {
-    render(<Badge accessibilityLabel="Intent of badge" icon={Anchor} />);
-    expect(screen.getByText(/intent of badge/i)).toBeInTheDocument();
-  });
-
   it("should render detailed icon", () => {
     render(<Badge icon={Anchor}>Badge text</Badge>);
     expect(screen.getByRole("img", { hidden: true })).toBeInTheDocument();
@@ -47,17 +42,11 @@ describe("<Badge />", () => {
     );
   });
 
-  it("should warn on missing children or icon", () => {
+  it("should warn on missing children", () => {
+    // @ts-expect-error warning check
     render(<Badge secondaryLabel="Secondary text" />);
     expect(consoleWarnSpy).toBeCalledWith(
-      expect.stringMatching(/requires one of children or icon/),
-    );
-  });
-
-  it("should warn with no accessibility label on icon", () => {
-    render(<Badge icon={Anchor} />);
-    expect(consoleWarnSpy).toBeCalledWith(
-      expect.stringMatching(/must have accessibilityLabel/),
+      expect.stringMatching(/requires children/),
     );
   });
 
@@ -67,7 +56,9 @@ describe("<Badge />", () => {
         accessibilityLabel="Intent of badge"
         secondaryLabel="Secondary text"
         icon={Anchor}
-      />,
+      >
+        Badge text
+      </Badge>,
     );
     expect(consoleWarnSpy).toBeCalledWith(
       expect.stringMatching(/secondaryLabel is not supported/),