@workday/canvas-kit-docs 14.0.0-alpha.1194-next.0 → 14.0.0-alpha.1196-next.0

package/dist/es6/lib/docs.js

@@ -80586,6 +80586,38 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": 0
           }
         },
+        {
+          "kind": "property",
+          "name": "emphasis",
+          "required": false,
+          "type": {
+            "kind": "union",
+            "value": [
+              {
+                "kind": "string",
+                "value": "high"
+              },
+              {
+                "kind": "string",
+                "value": "low"
+              }
+            ]
+          },
+          "description": "Sets the emphasis of the badge",
+          "declarations": [
+            {
+              "name": "emphasis",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/badge/lib/CountBadge.tsx"
+            }
+          ],
+          "tags": {
+            "default": "'high'"
+          },
+          "defaultValue": {
+            "kind": "string",
+            "value": "high"
+          }
+        },
         {
           "kind": "property",
           "name": "limit",

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -11,6 +11,7 @@ any questions.
 - [Component Updates](#component-updates)
   - [Branding Changes](#branding-changes)
   - [Card](#card)
+  - [Count Badge](#count-badge)
   - [Expandable](#expandable)
   - [Hyperlink & ExternalHyperlink](#hyperlink-and-externalhyperlink)
   - [Loading Dots](#loading-dots)
@@ -192,12 +193,34 @@ spacing between card elements.
 </Card>
 ```
 
+### Count Badge
+
+**PR:** [#3411](https://github.com/Workday/canvas-kit/pull/3411)
+
+The `CountBadge` component has been updated to reflect our new brand direction.
+
+
+Additionally, a new `emphasis` prop has been added, allowing you to choose between `high` and
+`low` emphasis for the badge.
+
+**Count Badge variants in v14**
+
+```tsx
+<CountBadge /> // Default count badge with high emphasis
+<CountBadge variant="inverse" /> // Inverse default count badge
+// new
+<CountBadge emphasis="low" /> // Default count badge with low emphasis
+<CountBadge variant="inverse" emphasis="low" /> // Inverse count badge with low emphasis
+```
+
 ### Expandable
 
 **PR:** [#3389](https://github.com/Workday/canvas-kit/pull/3389)
 
-- `<Expandable.Target>` hover state has been update to use `system.color.bg.alt.soft` instead of `system.color.bg.alt.default` to match our new brand directions.
-- The `focus` state has been update to use `system.color.border.primary.default` to ensure the same focus state color across all components.
+- `<Expandable.Target>` hover state has been update to use `system.color.bg.alt.soft` instead of
+  `system.color.bg.alt.default` to match our new brand directions.
+- The `focus` state has been update to use `system.color.border.primary.default` to ensure the same
+  focus state color across all components.
 
 These changes are only **visual** and should not affect the functionality of the component.
 

package/dist/mdx/react/badge/CountBadge.mdx

@@ -1,6 +1,8 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
+import Emphasis from './examples/Emphasis';
+import Inverse from './examples/Inverse';
 import CustomLimit from './examples/CustomLimit';
 import NotificationBadge from './examples/NotificationBadge';
 
@@ -22,11 +24,31 @@ Accessibility section below.
 
 ### Basic
 
-In the example below, we're rendering a basic `CountBadge` with its `default` and `inverse`
-variants. The `inverse` variant is intended for darker backgrounds to create more contrast.
+Use the default `CountBadge` variant for most situations. The default `high` emphasis is ideal for
+drawing attention to important or primary information.
 
 <ExampleCodeBlock code={Basic} />
 
+### Emphasis
+
+Select the `low` emphasis option for less prominent or secondary information. This is useful when
+you want the badge to be visible but not distracting.
+
+`high` emphasis is ideal for drawing attention to important or primary information.
+
+<ExampleCodeBlock code={Emphasis} />
+
+### Inverse
+
+Apply the `inverse` variant when displaying the badge on dark or accent backgrounds to maintain
+proper contrast and readability. This ensures the badge remains legible in visually dense or colored
+areas. The same rules apply for `low` and `high` emphasis. Only use this combination on backgrounds with
+[a token of 600 or greater](https://workday.github.io/canvas-tokens/?path=/docs/docs-base-tokens--docs)
+to ensure sufficient contrast and accessibility.
+
+<ExampleCodeBlock code={Inverse} />
+
+
 ### Custom Limit
 
 By default, `CountBadge`'s limit is set to `1000`. Once the count reaches the limit, the badge will
@@ -38,15 +60,15 @@ messages on their first day back.
 
 <ExampleCodeBlock code={CustomLimit} />
 
-### Notification Badge
+### Accessibility
+
+#### Notification Badge
 
 Notifications are a major use case for `CountBadge`. When the `CountBadge` value is updated in
 real-time, screen readers must be supported with an `AriaLiveRegion` that will automatically
 describe the change in the number of notifications. If the web app only updates `CountBadge` as part
 of another screen update, then this use of `AriaLiveRegion` is unnecessary and not recommended.
 
-#### Notes on accessibility for the example below
-
 - `Tooltip` is set on the `SecondaryButton` automatically applying the `aria-label` to the button.
 - `aria-describedby` property is conditionally set on the `SecondaryButton` when greater than zero
   referencing a unique `id` for the `CountBadge` value .
@@ -60,7 +82,7 @@ of another screen update, then this use of `AriaLiveRegion` is unnecessary and n
 ### Custom Styles
 
 Count Badge supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/badge/examples/Basic.tsx

@@ -1,35 +1,17 @@
-import * as React from 'react';
 import {CountBadge} from '@workday/canvas-kit-react/badge';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const containerStyles = createStyles({
-  boxSizing: 'border-box',
   display: 'flex',
-  flexDirection: 'column',
-});
-
-const defaultBackground = createStyles({
-  boxSizing: 'border-box',
-  backgroundColor: system.color.bg.alt.soft,
-  padding: system.space.x4,
-});
-
-const inverseBackground = createStyles({
-  boxSizing: 'border-box',
-  backgroundColor: system.color.bg.primary.default,
+  gap: system.space.x2,
   padding: system.space.x4,
 });
 
 export default () => {
   return (
     <div className={containerStyles}>
-      <div className={defaultBackground}>
-        <CountBadge count={427} />
-      </div>
-      <div className={inverseBackground}>
-        <CountBadge count={427} variant="inverse" />
-      </div>
+      <CountBadge count={427} />
     </div>
   );
 };

package/dist/mdx/react/badge/examples/Emphasis.tsx

@@ -0,0 +1,34 @@
+import {CountBadge} from '@workday/canvas-kit-react/badge';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Text} from '@workday/canvas-kit-react/text';
+
+const containerStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+  padding: system.space.x4,
+  flexDirection: 'column',
+});
+
+const textStyles = createStyles({
+  paddingInlineEnd: system.space.x2,
+});
+
+export default () => {
+  return (
+    <div className={containerStyles}>
+      <div>
+        <Text as="strong" className={textStyles}>
+          Low Emphasis:
+        </Text>
+        <CountBadge count={427} emphasis="low" />
+      </div>
+      <div>
+        <Text as="strong" className={textStyles}>
+          High Emphasis:
+        </Text>
+        <CountBadge count={427} emphasis="high" />
+      </div>
+    </div>
+  );
+};

package/dist/mdx/react/badge/examples/Inverse.tsx

@@ -0,0 +1,34 @@
+import {CountBadge} from '@workday/canvas-kit-react/badge';
+import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Text} from '@workday/canvas-kit-react/text';
+const containerStyles = createStyles({
+  display: 'flex',
+  gap: system.space.x2,
+  padding: system.space.x4,
+  backgroundColor: system.color.static.blue.default,
+  flexDirection: 'column',
+});
+
+const textStyles = createStyles({
+  paddingInlineEnd: system.space.x2,
+});
+
+export function Inverse() {
+  return (
+    <div className={containerStyles}>
+      <div>
+        <Text as="strong" variant="inverse" className={textStyles}>
+          Low Emphasis:
+        </Text>
+        <CountBadge count={427} variant="inverse" emphasis="low" />
+      </div>
+      <div>
+        <Text as="strong" variant="inverse" className={textStyles}>
+          High Emphasis
+        </Text>
+        <CountBadge count={427} variant="inverse" emphasis="high" />
+      </div>
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1194-next.0",
+  "version": "14.0.0-alpha.1196-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1194-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1194-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1194-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1194-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1196-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1196-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1196-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1196-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.10",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "c164b3dee64b51c13f371a09b8bef05aabeca94e"
+  "gitHead": "e4bb70bcadf0a0c1f2f6d4a01283a73f5fd3043f"
 }