@workday/canvas-kit-docs 13.0.0-alpha.978-next.0 → 13.0.0-alpha.996-next.0

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

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

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

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

package/lib/InformationHighlight/Base.tsx

@@ -1,12 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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: {},
-  };
-});