playbook_ui 14.0.0.pre.alpha.PLAY1475bumpaxecoredependency3483 → 14.0.0.pre.alpha.PLAY14113475

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2abd5d33f04276dea9344ad26c67d1307e944b5627cf95aeb50eb60db7ea93d5
-  data.tar.gz: '096e6c48b3f6e9f301cb36155dd2c94dc942238049c486c3433a349a90c7311b'
+  metadata.gz: 256935cc0094e0047461f73eb8aa9a359414951eade45a2a3c82507ba9430d19
+  data.tar.gz: 7d173634a0c2134da2756f3c16435c48662570980fa226a0bbe8bb256950620e
 SHA512:
-  metadata.gz: 1d80b5d648f3d2ccf778878ba4dfcd71aab3a6b8923dad57591c8082331813a783bf2260aae48d6cf903d8d87e2a1b3025071a2c1fdbee315879a82a51fe5a91
-  data.tar.gz: 6f9b724b58caa5ad0bba0fde990e815cbbbb507d8563eb13fc13545f3734ac6a46a791836deb50d6f18344810fe34dccc21ac50527601726b42af0afb98a189a
+  metadata.gz: 6861772c1549b55563f7d3c79026f56cb930297ef756e02a5b9adc7df3300b31dc8286df6188b800023c23870eb90a62e4b7fc14f0fcfecdc1aa3769deb77a2f
+  data.tar.gz: 5b80990b1a26b4aa82392837d1c1a8c54304f3371e527beb8e7786ce54bb1620dab12804798855b9d43e4958f7586c10fd5e338d8f2b2adbccb26fe1d691c376

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -42,6 +42,12 @@
     color: $white;
   }
 
+
+  &[class*=_notification_error] {
+    background: $error;
+    color: $white;
+  }
+
   &.dark {
     border-width: 0;
 

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -25,7 +25,7 @@ type BadgeProps = {
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
   text?: string,
-  variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
+  variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
 const Badge = (props: BadgeProps): React.ReactElement => {
   const {
@@ -45,7 +45,9 @@ const Badge = (props: BadgeProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
-    buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
+    buildCss('pb_badge_kit',
+      variant === "success" ? "success_sm" : variant === "notificationError" ? "notification_error" : variant,
+      rounded ? 'rounded' : ''),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -6,7 +6,7 @@ module Playbook
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[success warning error info neutral notification primary],
+                     values: %w[success warning error info neutral notification notification_error primary],
                      default: "neutral"
 
       def classname

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -94,15 +94,21 @@ test('displays success variant', () => {
 
 })
 
-test('displays notification variant', () => {
-  render(
-    <Badge
-        data={{ testid: testId }}
-        text="1"
-        variant="notification"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`pb_badge_kit_notification`)
-  cleanup()
+test('displays notification variants', () => {
+  [
+    "notification",
+    "notificationError"
+  ].forEach((colorVariant) => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={colorVariant}
+          variant={colorVariant}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_${colorVariant === "notificationError" ? "notification_error" : "notification"}`)
+
+    cleanup()
+  })
 })

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb

@@ -10,3 +10,16 @@
     variant: "notification"
   }) %>
 </div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "1",
+    variant: "notification_error",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "4",
+    variant: "notification_error"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx

@@ -4,20 +4,39 @@ import Badge from '../_badge'
 const BadgeNotification = (props) => {
   return (
     <>
-      <Badge
-          rounded
-          text="1"
-          variant="notification"
-          {...props}
-      />
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notification"
+            {...props}
+        />
 
-      &nbsp;
+        &nbsp;
 
-      <Badge
-          text="4"
-          variant="notification"
-          {...props}
-      />
+        <Badge
+            text="4"
+            variant="notification"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notificationError"
+            {...props}
+        />
+
+        &nbsp;
+
+        <Badge
+            text="4"
+            variant="notificationError"
+            {...props}
+        />
+      </div>
     </>
   )
 }