pr updates

modules/preview-react/InformationHighlight/lib/InformationHighlight.tsx

@@ -1,19 +1,15 @@
 import * as React from 'react';
 import {createContainer} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil} from '@workday/canvas-kit-styling';
+import {cssVar, createStencil, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
-import {Base, BaseProps} from './parts/Base';
-import {Heading} from './parts/Heading';
+import {InformationHighlightHeading} from './parts/Heading';
 import {Body} from './parts/Body';
 import {Icon} from './parts/Icon';
 import {Link} from './parts/Link';
-import {useInformationHighlightModel, Variant, Emphasis} from './hooks/modelHook';
+import {useInformationHighlightModel} from './hooks/useInformationHighlightModel';
 
-interface InformationHighlightProps extends BaseProps {
-  variant?: Variant;
-  emphasis?: Emphasis;
-}
+interface InformationHighlightProps extends CSProps {}
 
 const informationHighlightStencil = createStencil({
   base: {
@@ -63,16 +59,17 @@ export const InformationHighlight = createContainer('section')({
   modelHook: useInformationHighlightModel,
   subComponents: {
     Icon: Icon,
-    Heading: Heading,
+    Heading: InformationHighlightHeading,
     Body: Body,
     Link: Link,
   },
-})((props: InformationHighlightProps, Element, model) => {
+})(({...elemProps}: InformationHighlightProps, Element, model) => {
   return (
-    <Base
-      as={Element}
-      cs={informationHighlightStencil({[model.state.variant]: model.state.emphasis})}
-      {...props}
+    <Element
+      {...handleCsProp(
+        elemProps,
+        informationHighlightStencil({[model.state.variant]: model.state.emphasis})
+      )}
     />
   );
 });

modules/preview-react/InformationHighlight/lib/parts/Body.tsx

@@ -1,21 +1,19 @@
 import * as React from 'react';
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createStyles, handleCsProp} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
-
-import {Base} from './Base';
+import {Text} from '@workday/canvas-kit-react/text';
 
 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} />;
+  Component: ({...elemProps}: ExtractProps<typeof Text>, ref, Element) => {
+    return <Text as={Element} ref={ref} {...handleCsProp(elemProps, bodyStyles)} />;
   },
 });

modules/preview-react/InformationHighlight/lib/parts/Heading.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createStyles, handleCsProp} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
-
-import {Base} from './Base';
+import {Heading, TypeLevelProps} from '@workday/canvas-kit-react/text';
 
 const headingStyles = createStyles({
   ...system.type.body.small,
@@ -14,9 +13,16 @@ const headingStyles = createStyles({
   marginBottom: system.space.zero,
 });
 
-export const Heading = createComponent('h3')({
+export interface InformationHighlightHeadingProps
+  extends Omit<Partial<ExtractProps<typeof Heading, never>>, 'size'> {
+  size?: TypeLevelProps['size'];
+}
+
+export const InformationHighlightHeading = createComponent('h3')({
   displayName: 'Heading',
-  Component: (props, ref, Element) => {
-    return <Base as={Element} ref={ref} cs={headingStyles} {...props} />;
+  Component: ({size = 'small', ...elemProps}: InformationHighlightHeadingProps, ref, Element) => {
+    return (
+      <Heading as={Element} ref={ref} size={size} {...handleCsProp(elemProps, headingStyles)} />
+    );
   },
 });

modules/preview-react/InformationHighlight/lib/parts/Icon.tsx

@@ -1,57 +1,61 @@
 import * as React from 'react';
 import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {cssVar} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp} 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 '../hooks/modelHook';
+import {useInformationHighlightModel} from '../hooks/useInformationHighlightModel';
 
 export interface IconProps extends Omit<Partial<ExtractProps<typeof SystemIcon, never>>, 'icon'> {
   icon?: SystemIconProps['icon'];
 }
 
-const iconStyles = {
-  informational: {
-    low: systemIconStencil({
-      accentColor: cssVar(base.blueberry400),
-      color: cssVar(base.blueberry400),
-      backgroundColor: 'none',
-    }),
-    high: systemIconStencil({
-      accentColor: cssVar(base.frenchVanilla100),
-      color: cssVar(base.blueberry400),
-      backgroundColor: cssVar(base.blueberry400),
-    }),
+const informationIconStencil = createStencil({
+  extends: systemIconStencil,
+  base: {},
+  modifiers: {
+    informational: {
+      low: {
+        [systemIconStencil.vars.accentColor]: base.blueberry400,
+        [systemIconStencil.vars.color]: base.blueberry400,
+        [systemIconStencil.vars.backgroundColor]: 'none',
+      },
+      high: {
+        [systemIconStencil.vars.accentColor]: base.frenchVanilla100,
+        [systemIconStencil.vars.color]: base.blueberry400,
+        [systemIconStencil.vars.backgroundColor]: base.blueberry400,
+      },
+    },
+    caution: {
+      low: {
+        [systemIconStencil.vars.accentColor]: base.blackPepper400,
+        [systemIconStencil.vars.color]: base.blackPepper400,
+        [systemIconStencil.vars.backgroundColor]: 'none',
+      },
+      high: {
+        [systemIconStencil.vars.accentColor]: base.frenchVanilla100,
+        [systemIconStencil.vars.color]: base.blackPepper400,
+        [systemIconStencil.vars.backgroundColor]: base.blackPepper400,
+      },
+    },
+    critical: {
+      low: {
+        [systemIconStencil.vars.accentColor]: base.cinnamon500,
+        [systemIconStencil.vars.color]: base.cinnamon500,
+        [systemIconStencil.vars.backgroundColor]: 'none',
+      },
+      high: {
+        [systemIconStencil.vars.accentColor]: base.frenchVanilla100,
+        [systemIconStencil.vars.color]: base.cinnamon500,
+        [systemIconStencil.vars.backgroundColor]: base.cinnamon500,
+      },
+    },
   },
-  caution: {
-    low: systemIconStencil({
-      accentColor: cssVar(base.blackPepper400),
-      color: cssVar(base.blackPepper400),
-      backgroundColor: 'none',
-    }),
-    high: systemIconStencil({
-      accentColor: cssVar(base.frenchVanilla100),
-      color: cssVar(base.blackPepper400),
-      backgroundColor: cssVar(base.blackPepper400),
-    }),
-  },
-  critical: {
-    low: systemIconStencil({
-      accentColor: cssVar(base.cinnamon500),
-      color: cssVar(base.cinnamon500),
-      backgroundColor: 'none',
-    }),
-    high: systemIconStencil({
-      accentColor: cssVar(base.frenchVanilla100),
-      color: cssVar(base.cinnamon500),
-      backgroundColor: cssVar(base.cinnamon500),
-    }),
-  },
-};
+});
 
 const defaultIcons = {
   informational: infoIcon,
@@ -67,8 +71,10 @@ export const Icon = createSubcomponent('span')({
     <SystemIcon
       as={Element}
       icon={icon ? icon : defaultIcons[model.state.variant]}
-      {...iconStyles[model.state.variant][model.state.emphasis]}
-      {...props}
+      {...handleCsProp(
+        props,
+        informationIconStencil({[model.state.variant]: model.state.emphasis})
+      )}
     />
   );
 });

modules/preview-react/InformationHighlight/stories/InformationHighlight.mdx

@@ -104,7 +104,7 @@ needing to define a different level of importance. This should be done with caut
 
 ## Component API
 
-<SymbolDoc name="InformationHighlight" fileName="/react/" />
+<SymbolDoc name="InformationHighlight" fileName="/preview/" />
 
 ## Specifications
 

modules/preview-react/InformationHighlight/stories/visual_testing/testing.stories.tsx

@@ -66,7 +66,7 @@ export const InformationHighlightStates = () => {
           const {variant, heading, body, button, emphasis} = props;
           return (
             <InformationHighlight variant={variant} emphasis={emphasis}>
-              <InformationHighlight.Icon variant={undefined} icon={undefined} />
+              <InformationHighlight.Icon />
               {heading && <InformationHighlight.Heading>Lorem ipsum</InformationHighlight.Heading>}
               {body && (
                 <InformationHighlight.Body>