@workday/canvas-kit-preview-react 8.0.0-alpha.234-next.5 → 8.0.0-alpha.236-next.7

package/status-indicator/lib/StatusIndicatorLabel.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Text, TextProps} from '@workday/canvas-kit-react/text';
+
+export interface StatusIndicatorLabelProps extends TextProps {}
+
+export const StatusIndicatorLabel = createComponent('span')({
+  displayName: 'StatusIndicator.Label',
+  Component: ({children, ...elemProps}: StatusIndicatorLabelProps, ref, Element) => {
+    return (
+      <Text
+        whiteSpace="nowrap"
+        overflow="hidden"
+        textOverflow="ellipsis"
+        typeLevel="subtext.large"
+        fontWeight="bold"
+        textTransform="capitalize"
+        ref={ref}
+        color="inherit"
+        as={Element}
+        {...elemProps}
+      >
+        {children}
+      </Text>
+    );
+  },
+});

package/status-indicator/lib/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useStatusIndicatorModel';

package/status-indicator/lib/hooks/useStatusIndicatorModel.tsx

@@ -0,0 +1,29 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+
+export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
+
+export type StatusIndicatorEmphasis = 'high' | 'low';
+
+export const useStatusIndicatorModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Defines the emphasis of the `StatusIndicator`.
+     * `high` emphasis will create more contrast between the background and text colors.
+     * `low` emphasis will create less contrast between the background and text colors.
+     * @default 'low'
+     */
+
+    emphasis: 'low' as StatusIndicatorEmphasis,
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * @default 'gray'
+     */
+    variant: 'gray' as StatusIndicatorVariant,
+  },
+})(config => {
+  const state = {
+    ...config,
+  };
+
+  return {state, events: {}};
+});

package/status-indicator/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/status-indicator",
+  "module": "../dist/es6/status-indicator",
+  "sideEffects": false,
+  "types": "../dist/es6/status-indicator"
+}