@workday/canvas-kit-react 15.0.0-alpha.0045-next.0 → 15.0.0-alpha.0056-next.0

package/information-highlight/lib/InformationHighlight.tsx

@@ -0,0 +1,107 @@
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {InformationHighlightHeading} from './parts/Heading';
+import {Body} from './parts/Body';
+import {Icon} from './parts/Icon';
+import {Link} from './parts/Link';
+import {useInformationHighlightModel} from './hooks/useInformationHighlightModel';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
+interface InformationHighlightProps extends CSProps {}
+
+export const informationHighlightStencil = createStencil({
+  base: {
+    display: 'grid',
+    gridTemplateColumns: 'min-content',
+    columnGap: system.space.x4,
+    rowGap: system.space.x2,
+    padding: system.space.x4,
+    borderRadius: system.shape.x1,
+    outline: `${px2rem(1)} solid transparent`,
+    borderInlineStart: `${system.space.x1} solid transparent`,
+  },
+  modifiers: {
+    informational: {
+      low: {
+        borderInlineStartColor: system.color.border.info.default,
+        backgroundColor: system.color.bg.alt.soft,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.icon.info.default,
+          [systemIconStencil.vars.color]: system.color.icon.info.default,
+          [systemIconStencil.vars.backgroundColor]: 'transparent',
+        },
+      },
+      high: {
+        borderInlineStartColor: system.color.border.info.default,
+        backgroundColor: system.color.bg.info.softest,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
+          [systemIconStencil.vars.color]: system.color.icon.info.default,
+          [systemIconStencil.vars.backgroundColor]: system.color.icon.info.default,
+        },
+      },
+    },
+    caution: {
+      low: {
+        borderInlineStartColor: system.color.border.caution.default,
+        backgroundColor: system.color.bg.alt.soft,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.icon.strong,
+          [systemIconStencil.vars.color]: system.color.icon.strong,
+          [systemIconStencil.vars.backgroundColor]: 'transparent',
+        },
+      },
+      high: {
+        borderInlineStartColor: system.color.border.caution.default,
+        backgroundColor: system.color.bg.caution.softest,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
+          [systemIconStencil.vars.color]: system.color.icon.caution.softer,
+          [systemIconStencil.vars.backgroundColor]: system.color.icon.caution.softer,
+        },
+      },
+    },
+    critical: {
+      low: {
+        borderInlineStartColor: system.color.border.critical.default,
+        backgroundColor: system.color.bg.alt.soft,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.icon.critical.default,
+          [systemIconStencil.vars.color]: system.color.icon.critical.default,
+          [systemIconStencil.vars.backgroundColor]: 'transparent',
+        },
+      },
+      high: {
+        borderInlineStartColor: system.color.border.critical.default,
+        backgroundColor: system.color.bg.critical.softest,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
+          [systemIconStencil.vars.color]: system.color.icon.critical.default,
+          [systemIconStencil.vars.backgroundColor]: system.color.icon.critical.default,
+        },
+      },
+    },
+  },
+});
+
+export const InformationHighlight = createContainer('section')({
+  displayName: 'InformationHighlight',
+  modelHook: useInformationHighlightModel,
+  subComponents: {
+    Icon: Icon,
+    Heading: InformationHighlightHeading,
+    Body: Body,
+    Link: Link,
+  },
+})(({...elemProps}: InformationHighlightProps, Element, model) => {
+  return (
+    <Element
+      {...handleCsProp(
+        elemProps,
+        informationHighlightStencil({[model.state.variant]: model.state.emphasis})
+      )}
+    />
+  );
+});

package/information-highlight/lib/hooks/useInformationHighlightModel.ts

@@ -0,0 +1,16 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+
+export const useInformationHighlightModel = createModelHook({
+  defaultConfig: {
+    variant: 'informational' as 'informational' | 'caution' | 'critical',
+    emphasis: 'low' as 'low' | 'high',
+  },
+})(config => {
+  return {
+    state: {
+      variant: config.variant,
+      emphasis: config.emphasis,
+    },
+    events: {},
+  };
+});

package/information-highlight/lib/parts/Body.tsx

@@ -0,0 +1,28 @@
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Text} from '@workday/canvas-kit-react/text';
+
+const informationHighlightBodyStencil = createStencil({
+  base: () => {
+    return {
+      ...system.type.subtext.large,
+      color: system.color.text.strong,
+      gridColumn: '2',
+      marginBlockEnd: system.space.x2,
+    };
+  },
+});
+
+export const Body = createComponent('div')({
+  displayName: 'Body',
+  Component: ({...elemProps}: ExtractProps<typeof Text, never>, ref, Element) => {
+    return (
+      <Text
+        as={Element}
+        ref={ref}
+        {...handleCsProp(elemProps, informationHighlightBodyStencil())}
+      />
+    );
+  },
+});

package/information-highlight/lib/parts/Heading.tsx

@@ -0,0 +1,34 @@
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Heading} from '@workday/canvas-kit-react/text';
+
+const informationHighlightHeadingStencil = createStencil({
+  base: () => {
+    return {
+      ...system.type.body.small,
+      color: system.color.text.strong,
+      gridColumn: '2',
+      fontWeight: system.fontWeight.bold,
+      marginTop: system.space.zero,
+      marginBottom: system.space.zero,
+    };
+  },
+});
+
+export interface InformationHighlightHeadingProps
+  extends Partial<ExtractProps<typeof Heading, never>> {}
+
+export const InformationHighlightHeading = createComponent('h3')({
+  displayName: 'Heading',
+  Component: ({size = 'small', ...elemProps}: InformationHighlightHeadingProps, ref, Element) => {
+    return (
+      <Heading
+        as={Element}
+        ref={ref}
+        size={size}
+        {...handleCsProp(elemProps, informationHighlightHeadingStencil())}
+      />
+    );
+  },
+});

package/information-highlight/lib/parts/Icon.tsx

@@ -0,0 +1,29 @@
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {
+  infoIcon,
+  exclamationCircleIcon,
+  exclamationTriangleIcon,
+} from '@workday/canvas-system-icons-web';
+import {useInformationHighlightModel} from '../hooks/useInformationHighlightModel';
+
+export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never>> {}
+const defaultIcons = {
+  informational: infoIcon,
+  caution: exclamationTriangleIcon,
+  critical: exclamationCircleIcon,
+};
+
+export const Icon = createSubcomponent('span')({
+  displayName: 'Icon',
+  modelHook: useInformationHighlightModel,
+})(({icon, ...props}: IconProps, Element, model) => {
+  return (
+    <SystemIcon
+      as={Element}
+      icon={icon ? icon : defaultIcons[model.state.variant]}
+      data-part="information-highlight-icon"
+      {...props}
+    />
+  );
+});

package/information-highlight/lib/parts/Link.tsx

@@ -0,0 +1,29 @@
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const informationHighlightLinkStencil = createStencil({
+  base: () => {
+    return {
+      ...system.type.subtext.large,
+      gridColumn: '2',
+      justifySelf: 'start',
+      color: system.color.text.strong,
+      fontWeight: system.fontWeight.bold,
+    };
+  },
+});
+
+export const Link = createComponent('a')({
+  displayName: 'Link',
+  Component: ({...elemProps}: ExtractProps<typeof Hyperlink, never>, ref, Element) => {
+    return (
+      <Hyperlink
+        as={Element}
+        ref={ref}
+        {...handleCsProp(elemProps, informationHighlightLinkStencil())}
+      />
+    );
+  },
+});

package/information-highlight/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.0.0-alpha.0045-next.0",
+  "version": "15.0.0-alpha.0056-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,9 +52,9 @@
     "@popperjs/core": "^2.5.4",
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0045-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0045-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0045-next.0",
+    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0056-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0056-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0056-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "@workday/design-assets-types": "^0.2.10",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "38005cde6b12236ba0376e1a360b8e22ca6b1e18"
+  "gitHead": "7ea41be00e30b2df431c3b8a49d5d2c24f3a9b8c"
 }