@workday/canvas-kit-preview-react 12.2.2 → 12.3.1

package/information-highlight/lib/InformationHighlight.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {cssVar, createStencil, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
+import {base, 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,
+  },
+  modifiers: {
+    informational: {
+      low: {
+        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
+          system.color.bg.primary.default
+        )}`,
+        backgroundColor: system.color.bg.alt.soft,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.bg.primary.default,
+          [systemIconStencil.vars.color]: system.color.bg.primary.default,
+          [systemIconStencil.vars.backgroundColor]: 'none',
+        },
+      },
+      high: {
+        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
+          system.color.bg.primary.default
+        )}`,
+        backgroundColor: base.blueberry100,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
+          [systemIconStencil.vars.color]: system.color.bg.primary.default,
+          [systemIconStencil.vars.backgroundColor]: system.color.bg.primary.default,
+        },
+      },
+    },
+    caution: {
+      low: {
+        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
+          system.color.border.caution.default
+        )}`,
+        backgroundColor: system.color.bg.alt.soft,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.fg.contrast.default,
+          [systemIconStencil.vars.color]: system.color.fg.contrast.default,
+          [systemIconStencil.vars.backgroundColor]: 'none',
+        },
+      },
+      high: {
+        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
+          system.color.border.caution.default
+        )}`,
+        backgroundColor: base.sourLemon100,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
+          [systemIconStencil.vars.color]: system.color.fg.contrast.default,
+          [systemIconStencil.vars.backgroundColor]: system.color.fg.contrast.default,
+        },
+      },
+    },
+    critical: {
+      low: {
+        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
+          system.color.border.critical.default
+        )}`,
+        backgroundColor: system.color.bg.alt.soft,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.bg.critical.default,
+          [systemIconStencil.vars.color]: system.color.bg.critical.default,
+          [systemIconStencil.vars.backgroundColor]: 'none',
+        },
+      },
+      high: {
+        borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
+          system.color.border.critical.default
+        )}`,
+        backgroundColor: base.peach100,
+        '& [data-part="information-highlight-icon"]': {
+          [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
+          [systemIconStencil.vars.color]: system.color.bg.critical.default,
+          [systemIconStencil.vars.backgroundColor]: system.color.bg.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,29 @@
+import * as React from 'react';
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createStencil, cssVar, 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',
+      margin: `0 0 ${cssVar(system.space.x2)} 0`,
+    };
+  },
+});
+
+export const Body = createComponent('p')({
+  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,35 @@
+import * as React from 'react';
+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,30 @@
+import * as React from 'react';
+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,30 @@
+import * as React from 'react';
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "12.2.2",
+  "version": "12.3.1",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,10 +46,10 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^12.2.2",
-    "@workday/canvas-kit-styling": "^12.2.2",
+    "@workday/canvas-kit-react": "^12.3.1",
+    "@workday/canvas-kit-styling": "^12.3.1",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.0.1",
+    "@workday/canvas-tokens-web": "^2.1.0",
     "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
@@ -58,5 +58,5 @@
     "react-hook-form": "7.36.1",
     "yup": "^0.32.11"
   },
-  "gitHead": "43600098f5347d9100d07a8663721bbaede5a4f1"
+  "gitHead": "8f197dfdb262f224d73c602d6811d24302e6154c"
 }