@workday/canvas-kit-docs 10.0.7 → 10.0.9

package/dist/es6/index.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/specs';
+export * from './lib/InformationHighlight';
 export * from './lib/Specifications';
 export * from './lib/StylePropsTable';
 export * from './lib/docs';

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC"}

package/dist/es6/index.js

@@ -1,4 +1,5 @@
 export * from './lib/specs';
+export * from './lib/InformationHighlight';
 export * from './lib/Specifications';
 export * from './lib/StylePropsTable';
 export * from './lib/docs';

package/dist/es6/lib/InformationHighlight/Base.d.ts

@@ -0,0 +1,5 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface BaseProps extends CSProps {
+}
+export declare const Base: import("@workday/canvas-kit-react/common").ElementComponent<"div", BaseProps>;
+//# sourceMappingURL=Base.d.ts.map

package/dist/es6/lib/InformationHighlight/Base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Base.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Base.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,SAAU,SAAQ,OAAO;CAAG;AAE7C,eAAO,MAAM,IAAI,+EAKf,CAAC"}

package/dist/es6/lib/InformationHighlight/Base.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { handleCsProp } from '@workday/canvas-kit-styling';
+export const Base = createComponent('div')({
+    displayName: 'Base',
+    Component: (props, ref, Element) => {
+        return React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(props)));
+    },
+});

package/dist/es6/lib/InformationHighlight/Body.d.ts

@@ -0,0 +1,2 @@
+export declare const Body: import("@workday/canvas-kit-react/common").ElementComponent<"p", unknown>;
+//# sourceMappingURL=Body.d.ts.map

package/dist/es6/lib/InformationHighlight/Body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Body.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,IAAI,2EAKf,CAAC"}

package/dist/es6/lib/InformationHighlight/Body.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStyles } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+import { Base } from './Base';
+const bodyStyles = createStyles({
+    ...system.type.subtext.large,
+    color: base.blackPepper300,
+    gridColumn: '2',
+    fontWeight: 400,
+    margin: 0,
+});
+export const Body = createComponent('p')({
+    displayName: 'Body',
+    Component: (props, ref, Element) => {
+        return React.createElement(Base, Object.assign({ as: Element, ref: ref, cs: bodyStyles }, props));
+    },
+});

package/dist/es6/lib/InformationHighlight/Heading.d.ts

@@ -0,0 +1,2 @@
+export declare const Heading: import("@workday/canvas-kit-react/common").ElementComponent<"div", unknown>;
+//# sourceMappingURL=Heading.d.ts.map

package/dist/es6/lib/InformationHighlight/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Heading.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,OAAO,6EAKlB,CAAC"}

package/dist/es6/lib/InformationHighlight/Heading.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStyles } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+import { Base } from './Base';
+const headingStyles = createStyles({
+    ...system.type.body.small,
+    color: base.blackPepper400,
+    gridColumn: '2',
+    fontWeight: 700, // should use system.fontWeight.bold
+});
+export const Heading = createComponent('div')({
+    displayName: 'Heading',
+    Component: (props, ref, Element) => {
+        return React.createElement(Base, Object.assign({ as: Element, ref: ref, cs: headingStyles }, props));
+    },
+});

package/dist/es6/lib/InformationHighlight/Icon.d.ts

@@ -0,0 +1,13 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+declare type Variant = 'emphasis' | 'caution' | 'attention';
+export interface IconProps extends SystemIconProps {
+    variant: Variant;
+}
+export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
+    state: {
+        variant: import("./modelHook").Variant;
+    };
+    events: {};
+}>;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

package/dist/es6/lib/InformationHighlight/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAY3E,aAAK,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;AA6BpD,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD,OAAO,EAAE,OAAO,CAAC;CAClB;AAQD,eAAO,MAAM,IAAI;;;;;EAYf,CAAC"}

package/dist/es6/lib/InformationHighlight/Icon.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { cssVar } from '@workday/canvas-kit-styling';
+import { infoIcon, exclamationCircleIcon, exclamationTriangleIcon, } from '@workday/canvas-system-icons-web';
+import { base } from '@workday/canvas-tokens-web';
+import { useInformationHighlightModel } from './modelHook';
+const iconStyles = {
+    emphasis: {
+        accent: cssVar(base.blueberry400),
+        fill: cssVar(base.blueberry400),
+        background: 'none',
+        accentHover: cssVar(base.blueberry400),
+        fillHover: cssVar(base.blueberry400),
+        backgroundHover: 'none',
+    },
+    caution: {
+        accent: cssVar(base.blackPepper400),
+        fill: cssVar(base.blackPepper400),
+        background: 'none',
+        accentHover: cssVar(base.blackPepper400),
+        fillHover: cssVar(base.blackPepper400),
+        backgroundHover: 'none',
+    },
+    attention: {
+        accent: cssVar(base.cinnamon500),
+        fill: cssVar(base.cinnamon500),
+        background: 'none',
+        accentHover: cssVar(base.cinnamon500),
+        fillHover: cssVar(base.cinnamon500),
+        backgroundHover: 'none',
+    },
+};
+const defaultIcons = {
+    emphasis: infoIcon,
+    caution: exclamationTriangleIcon,
+    attention: exclamationCircleIcon,
+};
+export const Icon = createSubcomponent('span')({
+    displayName: 'Icon',
+    modelHook: useInformationHighlightModel,
+})(({ icon, ...props }, Element, model) => {
+    return (React.createElement(SystemIcon, Object.assign({ as: Element, icon: icon ? icon : defaultIcons[model.state.variant] }, iconStyles[model.state.variant], props)));
+});

package/dist/es6/lib/InformationHighlight/Link.d.ts

@@ -0,0 +1,2 @@
+export declare const Link: import("@workday/canvas-kit-react/common").ElementComponent<"div", unknown>;
+//# sourceMappingURL=Link.d.ts.map

package/dist/es6/lib/InformationHighlight/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/Link.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,IAAI,6EAKf,CAAC"}

package/dist/es6/lib/InformationHighlight/Link.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ExternalHyperlink } from '@workday/canvas-kit-react/button';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { createStyles, cssVar } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+const linkStyles = createStyles({
+    ...system.type.subtext.large,
+    gridColumn: '2',
+    justifySelf: 'start',
+    color: `${cssVar(base.blueberry500)} !important`,
+    fontWeight: 500, // should use system.fontWeight.bold
+});
+export const Link = createComponent('div')({
+    displayName: 'Link',
+    Component: (props, ref, Element) => {
+        return React.createElement(ExternalHyperlink, Object.assign({ as: Element, ref: ref, className: linkStyles }, props));
+    },
+});

package/dist/es6/lib/InformationHighlight/index.d.ts

@@ -0,0 +1,25 @@
+import { BaseProps } from './Base';
+declare type Variant = 'emphasis' | 'caution' | 'attention';
+interface InformationHighlightProps extends BaseProps {
+    variant?: Variant;
+}
+export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
+    variant: import("./modelHook").Variant;
+}> & {} & {}, {
+    state: {
+        variant: import("./modelHook").Variant;
+    };
+    events: {};
+}> & {
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./Icon").IconProps, {
+        state: {
+            variant: import("./modelHook").Variant;
+        };
+        events: {};
+    }>;
+    Heading: import("@workday/canvas-kit-react/common").ElementComponent<"div", unknown>;
+    Body: import("@workday/canvas-kit-react/common").ElementComponent<"p", unknown>;
+    Link: import("@workday/canvas-kit-react/common").ElementComponent<"div", unknown>;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/lib/InformationHighlight/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAOvC,aAAK,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;AAEpD,UAAU,yBAA0B,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA4BD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;CAiB/B,CAAC"}

package/dist/es6/lib/InformationHighlight/index.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { createModifiers, createStyles, cssVar } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+import { Base } from './Base';
+import { Heading } from './Heading';
+import { Body } from './Body';
+import { Icon } from './Icon';
+import { Link } from './Link';
+import { useInformationHighlightModel } from './modelHook';
+const containerStyles = createStyles({
+    backgroundColor: base.soap100,
+    display: 'grid',
+    gridTemplateColumns: 'min-content',
+    columnGap: system.space.x4,
+    rowGap: system.space.x2,
+    padding: system.space.x4,
+    borderRadius: system.shape.x1,
+});
+const containerModifiers = createModifiers({
+    variant: {
+        emphasis: createStyles({
+            borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(base.blueberry400)}`,
+        }),
+        caution: createStyles({
+            borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(base.cantaloupe400)}`,
+        }),
+        attention: createStyles({
+            borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(base.cinnamon500)}`,
+        }),
+    },
+});
+export const InformationHighlight = createContainer('section')({
+    displayName: 'InformationHighlight',
+    modelHook: useInformationHighlightModel,
+    subComponents: {
+        Icon: Icon,
+        Heading: Heading,
+        Body: Body,
+        Link: Link,
+    },
+})((props, Element, model) => {
+    return (React.createElement(Base, Object.assign({ as: Element, cs: [containerStyles, containerModifiers({ variant: model.state.variant })] }, props)));
+});

package/dist/es6/lib/InformationHighlight/modelHook.d.ts

@@ -0,0 +1,19 @@
+export declare type Variant = 'emphasis' | 'caution' | 'attention';
+export declare const useInformationHighlightModel: (<TT_Special_Generic>(config?: (Partial<{
+    variant: Variant;
+}> & {} & {}) | undefined) => {
+    state: {
+        variant: Variant;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    variant: Variant;
+}, {}, {
+    variant: Variant;
+}, {}, {
+    state: {
+        variant: Variant;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=modelHook.d.ts.map

package/dist/es6/lib/InformationHighlight/modelHook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modelHook.d.ts","sourceRoot":"","sources":["../../../../lib/InformationHighlight/modelHook.ts"],"names":[],"mappings":"AAEA,oBAAY,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;AAE3D,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;EAWvC,CAAC"}

package/dist/es6/lib/InformationHighlight/modelHook.js

@@ -0,0 +1,13 @@
+import { createModelHook } from '@workday/canvas-kit-react/common';
+export const useInformationHighlightModel = createModelHook({
+    defaultConfig: {
+        variant: 'emphasis',
+    },
+})(config => {
+    return {
+        state: {
+            variant: config.variant,
+        },
+        events: {},
+    };
+});

package/dist/es6/lib/widgetUtils.d.ts

@@ -27,7 +27,7 @@ interface HeadingProps {
  * relative heading levels.
  */
 export declare const Heading: import("@workday/canvas-kit-react/common").ElementComponent<"h4", HeadingProps>;
-export declare function renderTypeParameters(typeParameters?: types.TypeParameter[]): JSX.Element | "";
+export declare function renderTypeParameters(typeParameters?: types.TypeParameter[]): "" | JSX.Element;
 export interface SymbolDialogProps {
     value: types.SymbolValue;
 }

package/dist/mdx/preview-react/_examples/examples/SelectWithFormik.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {useFormik} from 'formik';
-import {Select} from '@workday/canvas-kit-preview-react/select';
+import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {
   FormField,
   useFormFieldInput,
@@ -8,6 +8,31 @@ import {
 } from '@workday/canvas-kit-preview-react/form-field';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {
+  activityStreamIcon,
+  avatarIcon,
+  uploadCloudIcon,
+  userIcon,
+} from '@workday/canvas-system-icons-web';
+
+export default [
+  {
+    label: 'Dessert Person by Claire Saffitz',
+    serverId: 1,
+    icon: activityStreamIcon,
+  },
+  {
+    label: 'Elements of Pizza by Ken Forkish',
+    serverId: 2,
+    icon: avatarIcon,
+  },
+  {
+    label: 'Flour Water Salt Yeast by Ken Forkish',
+    serverId: 3,
+    icon: uploadCloudIcon,
+  },
+  {label: 'Mastering Pasta by Marc Verti', serverId: 4, icon: userIcon},
+];
 
 export default () => {
   const formik = useFormik({
@@ -22,34 +47,45 @@ export default () => {
     },
   });
 
-  const model = useFormFieldModel();
-  const formFieldInputProps = useFormFieldInput(model);
+  const selectModel = useSelectModel({
+    items: customOptionsMain,
+    getId: item => {
+      return item.serverId;
+    },
+    getTextValue: item => item.label,
+  });
 
   return (
     <form onSubmit={formik.handleSubmit} action=".">
       <Flex gap="xs" flexDirection="column" alignItems="flex-start">
         <FormField orientation="vertical" alignSelf="stretch" alignItems="normal">
-          <FormField.Label>Choose a book</FormField.Label>
-          <Select
-            name="selectedBook"
-            options={bookList}
-            onChange={event => formik.setFieldValue('selectedBook', event.currentTarget.value)}
-            value={formik.values.selectedBook}
-            grow
-            {...formFieldInputProps}
-          />
+          <Select model={selectModel}>
+            <FormField.Label>Choose a book</FormField.Label>
+            <FormField.Input
+              as={Select.Input}
+              name="selectedBook"
+              onChange={event => formik.setFieldValue('selectedBook', event.currentTarget.value)}
+              value={formik.values.selectedBook}
+              grow
+            />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List maxHeight={200}>
+                  {item => {
+                    return (
+                      <Select.Item data-id={item.serverId} data-text={item.label}>
+                        <Select.Item.Icon icon={item.icon} />
+                        {item.label}
+                      </Select.Item>
+                    );
+                  }}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
         </FormField>
         <PrimaryButton type="submit">Submit</PrimaryButton>
       </Flex>
     </form>
   );
 };
-
-const bookList = [
-  {label: 'Dessert Person by Claire Saffitz', value: 'dessert person'},
-  {label: 'Elements of Pizza by Ken Forkish', value: 'the elements of pizza'},
-  {label: 'Flour Water Salt Yeast by Ken Forkish', value: 'flour water salt yeast'},
-  {label: 'Mastering Pasta by Marc Verti', value: 'mastering pasta'},
-  {label: 'Patisserie by Christophe Felder', value: 'patisserie'},
-  {label: 'Tartine by Elisabeth Prueitt & Chad Robertson', value: 'tartine'},
-];

package/dist/mdx/preview-react/_examples/examples/TextInputWithReactHookForm.tsx

@@ -6,6 +6,8 @@ import {object, SchemaOf, string} from 'yup';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {TertiaryButton, PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Select} from '@workday/canvas-kit-react/select';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
@@ -13,7 +15,7 @@ type YupValidationResolver = <T extends {}>(
   validationSchema: SchemaOf<T>
 ) => (data: T) => Promise<{values: T; errors: {}} | {values: {}; errors: FieldErrorsImpl<T>}>;
 
-const useYupValidationResolver: any = validationSchema => {
+const useYupValidationResolver: YupValidationResolver = validationSchema => {
   return React.useCallback(
     async data => {
       try {
@@ -42,22 +44,23 @@ const useYupValidationResolver: any = validationSchema => {
 interface LoginSchema {
   email: string;
   password: string;
+  role: string;
 }
 
 const passwordMinimum = 8;
 const passwordHint = `Password should be of minimum ${passwordMinimum} characters length`;
 const emailRequired = 'Email is required';
 const passwordRequired = 'Password is required';
+const roleRequired = 'Role is required';
 
 const validationSchema: SchemaOf<LoginSchema> = object({
-  email: string()
-    .email('Enter a valid email')
-    .required(emailRequired),
-  password: string()
-    .min(passwordMinimum, passwordHint)
-    .required(passwordRequired),
+  email: string().email('Enter a valid email').required(emailRequired),
+  password: string().min(passwordMinimum, passwordHint).required(passwordRequired),
+  role: string().required(roleRequired),
 });
 
+const options = ['Developer', 'Designer', 'Product Manager'];
+
 export default () => {
   const {
     handleSubmit,
@@ -67,6 +70,7 @@ export default () => {
     defaultValues: {
       email: 'example@baz.com',
       password: 'foobarbaz',
+      role: 'Designer',
     },
     resolver: useYupValidationResolver(validationSchema),
     mode: 'onTouched',
@@ -92,6 +96,22 @@ export default () => {
   return (
     <form onSubmit={onSubmit} action=".">
       <Flex gap="xs" flexDirection="column" alignItems="flex-start">
+        <FormField orientation="vertical" isRequired={true} hasError={!!errors.role}>
+          <Select items={options}>
+            <FormField.Label>What is your role?</FormField.Label>
+            <FormField.Input as={Select.Input} {...register('role')} width="280px" />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List maxHeight={200}>
+                  {item => {
+                    return <Select.Item>{item}</Select.Item>;
+                  }}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+            <FormField.Hint>{errors.role?.message}</FormField.Hint>
+          </Select>
+        </FormField>
         <TextInput orientation="vertical" isRequired={true} hasError={!!errors.email}>
           <TextInput.Label>Email</TextInput.Label>
           <TextInput.Field

package/dist/mdx/react/tokens/Tokens.mdx

@@ -1,9 +1,22 @@
+import {InformationHighlight} from '@workday/canvas-kit-docs';
 import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
 import Overview from './examples/Overview';
 
 
 # Tokens
 
+<InformationHighlight>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Heading>New Tokens Package Available!</InformationHighlight.Heading>
+  <InformationHighlight.Body>
+    The tokens documented below are still available in Canvas Kit but are being replaced by our new
+    Canvas Tokens Web package. We encourage you to begin moving to our new tokens.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs">
+    View the Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
+
 Tokens are the smallest pieces of our Design System with the primary function of storing UI
 information. They enable building components and patterns with consistency across our platforms.
 

package/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/specs';
+export * from './lib/InformationHighlight';
 export * from './lib/Specifications';
 export * from './lib/StylePropsTable';
 export * from './lib/docs';

package/lib/InformationHighlight/Base.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {CSProps, handleCsProp} from '@workday/canvas-kit-styling';
+
+export interface BaseProps extends CSProps {}
+
+export const Base = createComponent('div')({
+  displayName: 'Base',
+  Component: (props: BaseProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(props)} />;
+  },
+});

package/lib/InformationHighlight/Body.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import {Base} from './Base';
+
+const bodyStyles = createStyles({
+  ...system.type.subtext.large,
+  color: base.blackPepper300,
+  gridColumn: '2',
+  fontWeight: 400, // This is here to keep createStyle types from being angry
+  margin: 0,
+});
+
+export const Body = createComponent('p')({
+  displayName: 'Body',
+  Component: (props, ref, Element) => {
+    return <Base as={Element} ref={ref} cs={bodyStyles} {...props} />;
+  },
+});

package/lib/InformationHighlight/Heading.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import {Base} from './Base';
+
+const headingStyles = createStyles({
+  ...system.type.body.small,
+  color: base.blackPepper400,
+  gridColumn: '2',
+  fontWeight: 700, // should use system.fontWeight.bold
+});
+
+export const Heading = createComponent('div')({
+  displayName: 'Heading',
+  Component: (props, ref, Element) => {
+    return <Base as={Element} ref={ref} cs={headingStyles} {...props} />;
+  },
+});

package/lib/InformationHighlight/Icon.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+
+import {cssVar} from '@workday/canvas-kit-styling';
+import {
+  infoIcon,
+  exclamationCircleIcon,
+  exclamationTriangleIcon,
+} from '@workday/canvas-system-icons-web';
+import {base} from '@workday/canvas-tokens-web';
+import {useInformationHighlightModel} from './modelHook';
+
+type Variant = 'emphasis' | 'caution' | 'attention';
+
+const iconStyles = {
+  emphasis: {
+    accent: cssVar(base.blueberry400),
+    fill: cssVar(base.blueberry400),
+    background: 'none',
+    accentHover: cssVar(base.blueberry400),
+    fillHover: cssVar(base.blueberry400),
+    backgroundHover: 'none',
+  },
+  caution: {
+    accent: cssVar(base.blackPepper400),
+    fill: cssVar(base.blackPepper400),
+    background: 'none',
+    accentHover: cssVar(base.blackPepper400),
+    fillHover: cssVar(base.blackPepper400),
+    backgroundHover: 'none',
+  },
+  attention: {
+    accent: cssVar(base.cinnamon500),
+    fill: cssVar(base.cinnamon500),
+    background: 'none',
+    accentHover: cssVar(base.cinnamon500),
+    fillHover: cssVar(base.cinnamon500),
+    backgroundHover: 'none',
+  },
+};
+
+export interface IconProps extends SystemIconProps {
+  variant: Variant;
+}
+
+const defaultIcons = {
+  emphasis: infoIcon,
+  caution: exclamationTriangleIcon,
+  attention: 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]}
+      {...iconStyles[model.state.variant]}
+      {...props}
+    />
+  );
+});

package/lib/InformationHighlight/Link.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const linkStyles = createStyles({
+  ...system.type.subtext.large,
+  gridColumn: '2',
+  justifySelf: 'start',
+  color: `${cssVar(base.blueberry500)} !important`,
+  fontWeight: 500, // should use system.fontWeight.bold
+});
+
+export const Link = createComponent('div')({
+  displayName: 'Link',
+  Component: (props, ref, Element) => {
+    return <ExternalHyperlink as={Element} ref={ref} className={linkStyles} {...props} />;
+  },
+});

package/lib/InformationHighlight/index.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {createModifiers, createStyles, cssVar} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import {Base, BaseProps} from './Base';
+import {Heading} from './Heading';
+import {Body} from './Body';
+import {Icon} from './Icon';
+import {Link} from './Link';
+import {useInformationHighlightModel} from './modelHook';
+
+type Variant = 'emphasis' | 'caution' | 'attention';
+
+interface InformationHighlightProps extends BaseProps {
+  variant?: Variant;
+}
+
+const containerStyles = createStyles({
+  backgroundColor: base.soap100,
+  display: 'grid',
+  gridTemplateColumns: 'min-content',
+  columnGap: system.space.x4,
+  rowGap: system.space.x2,
+  padding: system.space.x4,
+  borderRadius: system.shape.x1,
+});
+
+const containerModifiers = createModifiers({
+  variant: {
+    emphasis: createStyles({
+      borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(base.blueberry400)}`,
+    }),
+    caution: createStyles({
+      borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
+        base.cantaloupe400
+      )}`,
+    }),
+    attention: createStyles({
+      borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(base.cinnamon500)}`,
+    }),
+  },
+});
+
+export const InformationHighlight = createContainer('section')({
+  displayName: 'InformationHighlight',
+  modelHook: useInformationHighlightModel,
+  subComponents: {
+    Icon: Icon,
+    Heading: Heading,
+    Body: Body,
+    Link: Link,
+  },
+})((props: InformationHighlightProps, Element, model) => {
+  return (
+    <Base
+      as={Element}
+      cs={[containerStyles, containerModifiers({variant: model.state.variant})]}
+      {...props}
+    />
+  );
+});

package/lib/InformationHighlight/modelHook.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "10.0.7",
+  "version": "10.0.9",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,12 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^10.0.7",
-    "@workday/canvas-kit-preview-react": "^10.0.7",
-    "@workday/canvas-kit-react": "^10.0.7",
+    "@workday/canvas-kit-labs-react": "^10.0.9",
+    "@workday/canvas-kit-preview-react": "^10.0.9",
+    "@workday/canvas-kit-react": "^10.0.9",
+    "@workday/canvas-kit-styling": "^10.0.9",
     "@workday/canvas-system-icons-web": "^3.0.0",
+    "@workday/canvas-tokens-web": "^1.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
   },
@@ -57,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "3068ffec35c5735a6f7d91e076a71e95e65e8c79"
+  "gitHead": "b4494312c0fca962af3bb92e5c84edf6c5486a39"
 }