@workday/canvas-kit-docs 8.4.0 → 8.4.2

package/dist/mdx/react/_examples/CompoundComponent.mdx

@@ -0,0 +1,14 @@
+import Template from './examples/compoundComponent/CustomCard';
+
+
+# Canvas Kit Examples
+
+## Compound Component
+
+Component component utilites are a great way to wrap and extend exisitng Canvas Kit Components. This
+can dramatically simplify state handling and gives you easy access to things like ref forwarding.
+
+For more complex examples,
+[see the creating-compound-components guide](https://workday.github.io/canvas-kit/?path=/docs/guides-creating-compound-components--page).
+
+<ExampleCodeBlock code={Template} />

package/dist/mdx/react/_examples/examples/compoundComponent/CustomCard.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import {
+  createContainer,
+  createElemPropsHook,
+  createModelHook,
+  createSubcomponent,
+  ExtractProps,
+} from '@workday/canvas-kit-react/common';
+import {Card} from '@workday/canvas-kit-react/card';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {Box} from '@workday/canvas-kit-react/layout';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export type Theme = 'dark' | 'light';
+interface CustomCardProps extends ExtractProps<typeof Card> {
+  theme?: Theme;
+}
+
+/**
+ * Compound Component Model Hook
+ */
+const useCustomCardModel = createModelHook({
+  defaultConfig: {theme: 'dark' as Theme},
+})(config => {
+  const lightThemeColor = colors.frenchVanilla100;
+  const darkThemeColor = colors.blackPepper300;
+  const inverseColor = color => (color === darkThemeColor ? lightThemeColor : darkThemeColor);
+
+  const [theme, setTheme] = React.useState(config.theme);
+  const [mainColor, setMainColor] = React.useState(
+    config.theme === 'dark' ? darkThemeColor : lightThemeColor
+  );
+  const [contrastColor, setContrastColor] = React.useState(
+    config.theme === 'dark' ? lightThemeColor : darkThemeColor
+  );
+  const state = {theme, mainColor, contrastColor};
+
+  const events = {
+    toggleTheme: () => {
+      setTheme(currentTheme => (currentTheme === 'dark' ? 'light' : 'dark'));
+      setMainColor(inverseColor);
+      setContrastColor(inverseColor);
+    },
+  };
+
+  return {state, events};
+});
+
+/**
+ * Subcomponent Hook
+ */
+const useCustomCardButton = createElemPropsHook(useCustomCardModel)(({state, events}) => ({
+  colors: {
+    default: {
+      background: state.contrastColor,
+      label: state.mainColor,
+    },
+    hover: {},
+    active: {},
+    focus: {},
+    disabled: {},
+  },
+  onClick: () => events.toggleTheme(),
+}));
+
+/**
+ * Subcomponent Component
+ */
+const CustomCardButton = createSubcomponent(PrimaryButton)({
+  displayName: 'CustomCard.Button',
+  modelHook: useCustomCardModel,
+  elemPropsHook: useCustomCardButton,
+})(({children, ...elemProps}) => {
+  return <PrimaryButton {...elemProps}>{children}</PrimaryButton>;
+});
+
+/**
+ * Main Component Hook
+ */
+const useCustomCard = createElemPropsHook(useCustomCardModel)(({state}) => ({
+  backgroundColor: state.mainColor,
+}));
+
+/**
+ * Main Component
+ */
+const CustomCard = createContainer(Card)({
+  displayName: 'CustomCard',
+  subComponents: {
+    Heading: Card.Heading,
+    Body: Card.Body,
+    Button: CustomCardButton,
+  },
+  modelHook: useCustomCardModel,
+  elemPropsHook: useCustomCard,
+})<CustomCardProps>(({theme, children, ...elemProps}) => {
+  return (
+    <Card depth={2} {...elemProps}>
+      {children}
+    </Card>
+  );
+});
+
+/**
+ * Usage
+ */
+export default () => {
+  const [icon, setIcon] = React.useState('🌝');
+  const model = useCustomCardModel({
+    onToggleTheme: (_, {theme: previousTheme}) => setIcon(previousTheme === 'dark' ? '🌚' : '🌝'),
+  });
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => buttonRef.current?.focus(), []);
+
+  return (
+    <CustomCard model={model}>
+      <CustomCard.Heading>
+        <Box color={model.state.contrastColor}>Change your theme {icon}</Box>
+      </CustomCard.Heading>
+      <CustomCard.Body>
+        <CustomCard.Button ref={buttonRef}>Toggle</CustomCard.Button>
+      </CustomCard.Body>
+    </CustomCard>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "8.4.0",
+  "version": "8.4.2",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^8.4.0",
+    "@workday/canvas-kit-react": "^8.4.2",
     "@workday/canvas-system-icons-web": "^3.0.0"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "7ec0c1d1a2e4df3a0febba0c481063b25c1c5dc1"
+  "gitHead": "a9db88be010de89d2ecb4380c05ce3f62478de26"
 }