@workday/canvas-kit-docs 10.0.6 → 10.0.8

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/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.6",
+  "version": "10.0.8",
   "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.6",
-    "@workday/canvas-kit-preview-react": "^10.0.6",
-    "@workday/canvas-kit-react": "^10.0.6",
+    "@workday/canvas-kit-labs-react": "^10.0.8",
+    "@workday/canvas-kit-preview-react": "^10.0.8",
+    "@workday/canvas-kit-react": "^10.0.8",
+    "@workday/canvas-kit-styling": "^10.0.8",
     "@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": "ad2165afe3d06dab1824b0cc905c2fcb7f7c0bf9"
+  "gitHead": "b68a344126cb563661e92ca9d63776050c89e23e"
 }