@workday/canvas-kit-docs 14.0.0-alpha.1149-next.0 → 14.0.0-alpha.1151-next.0

package/dist/mdx/styling/mdx/examples/EmotionButton.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+interface ButtonProps {
+  variant: 'primary' | 'secondary' | 'danger';
+  size: 'large' | 'medium' | 'small';
+  backgroundColor?: string;
+  children?: React.ReactNode;
+}
+
+const StyledButton = styled('button')<ButtonProps>(
+  {
+    // base styles
+    fontSize: '1rem',
+    display: 'flex',
+    borderRadius: '1rem',
+  },
+  // variant styles
+  ({variant, backgroundColor}) => {
+    switch (variant) {
+      case 'primary':
+        return {
+          background: backgroundColor || 'blue',
+          color: 'white',
+        };
+      case 'secondary':
+        return {
+          background: backgroundColor || 'gray',
+        };
+      case 'danger':
+        return {
+          background: backgroundColor || 'red',
+        };
+      default:
+        return {};
+    }
+  },
+  // size styles
+  ({size}) => {
+    switch (size) {
+      case 'large':
+        return {
+          fontSize: '1.4rem',
+          height: '2rem',
+        };
+      case 'medium':
+        return {
+          fontSize: '1rem',
+          height: '1.5rem',
+        };
+      case 'small':
+        return {
+          fontSize: '0.8rem',
+          height: '1.2rem',
+        };
+      default:
+        return {};
+    }
+  }
+);
+
+export default () => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <StyledButton variant="primary" size="large">
+          Primary Large
+        </StyledButton>
+        <StyledButton variant="primary" size="medium">
+          Primary Medium
+        </StyledButton>
+        <StyledButton variant="primary" size="small">
+          Primary Small
+        </StyledButton>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <StyledButton variant="secondary" size="large">
+          Secondary Large
+        </StyledButton>
+        <StyledButton variant="secondary" size="medium">
+          Secondary Medium
+        </StyledButton>
+        <StyledButton variant="secondary" size="small">
+          Secondary Small
+        </StyledButton>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <StyledButton variant="danger" size="large">
+          Danger Large
+        </StyledButton>
+        <StyledButton variant="danger" size="medium">
+          Danger Medium
+        </StyledButton>
+        <StyledButton variant="danger" size="small">
+          Danger Small
+        </StyledButton>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <StyledButton variant="danger" size="large" backgroundColor="orange">
+          Custom Large
+        </StyledButton>
+        <StyledButton variant="danger" size="medium" backgroundColor="orange">
+          Custom Medium
+        </StyledButton>
+        <StyledButton variant="danger" size="small" backgroundColor="orange">
+          Custom Small
+        </StyledButton>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/styling/mdx/examples/ManualStylesButton.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+interface ButtonProps {
+  variant: 'primary' | 'secondary' | 'danger';
+  size: 'large' | 'medium' | 'small';
+  backgroundColor?: string;
+  children?: React.ReactNode;
+}
+
+const baseStyles = createStyles({
+  fontSize: '1rem',
+  display: 'flex',
+  borderRadius: '1rem',
+});
+
+const modifierStyles = {
+  variant: {
+    primary: createStyles({
+      background: `var(--button-background-color, blue)`,
+      color: 'white',
+    }),
+    secondary: createStyles({
+      background: `var(--button-background-color, gray)`,
+    }),
+    danger: createStyles({
+      background: `var(--button-background-color, red)`,
+    }),
+  },
+  size: {
+    large: createStyles({
+      fontSize: '1.4rem',
+      height: '2rem',
+    }),
+    medium: createStyles({
+      fontSize: '1rem',
+      height: '1.5rem',
+    }),
+    small: createStyles({
+      fontSize: '0.8rem',
+      height: '1.2rem',
+    }),
+  },
+};
+
+const Button = ({variant, size, backgroundColor, children}: ButtonProps) => {
+  const className = [baseStyles, modifierStyles.variant[variant], modifierStyles.size[size]].join(
+    ' '
+  );
+  const style = {'--button-background-color': backgroundColor} as React.CSSProperties;
+  return (
+    <button className={className} style={style}>
+      {children}
+    </button>
+  );
+};
+
+export default () => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="primary" size="large">
+          Primary Large
+        </Button>
+        <Button variant="primary" size="medium">
+          Primary Medium
+        </Button>
+        <Button variant="primary" size="small">
+          Primary Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="secondary" size="large">
+          Secondary Large
+        </Button>
+        <Button variant="secondary" size="medium">
+          Secondary Medium
+        </Button>
+        <Button variant="secondary" size="small">
+          Secondary Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="danger" size="large">
+          Danger Large
+        </Button>
+        <Button variant="danger" size="medium">
+          Danger Medium
+        </Button>
+        <Button variant="danger" size="small">
+          Danger Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="danger" size="large" backgroundColor="orange">
+          Custom Large
+        </Button>
+        <Button variant="danger" size="medium" backgroundColor="orange">
+          Custom Medium
+        </Button>
+        <Button variant="danger" size="small" backgroundColor="orange">
+          Custom Small
+        </Button>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/styling/mdx/examples/StyledButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {system} from '@workday/canvas-tokens-web';
+import {caretDownIcon} from '@workday/canvas-system-icons-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {buttonStencil, PrimaryButton} from '@workday/canvas-kit-react/button';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+
+const varStyles = createStyles({
+  [buttonStencil.vars.background]: system.color.static.gray.soft,
+  [buttonStencil.vars.label]: system.color.static.blue.strong,
+  // Because PrimaryButton uses SystemIcon under the hood,
+  // we also can change system icon variable for color
+  [systemIconStencil.vars.color]: system.color.static.blue.strong,
+  '&:hover': {
+    [buttonStencil.vars.background]: system.color.static.amber.default,
+    [buttonStencil.vars.label]: system.color.static.white,
+    [systemIconStencil.vars.color]: system.color.static.white,
+  },
+  '&:focus-visible': {
+    [buttonStencil.vars.background]: system.color.static.green.default,
+    [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,
+    [buttonStencil.vars.boxShadowInner]: system.color.static.white,
+  },
+});
+
+export default () => (
+  <PrimaryButton cs={varStyles} icon={caretDownIcon} iconPosition="end">
+    Overwrite styles by setting variables
+  </PrimaryButton>
+);

package/dist/mdx/styling/mdx/examples/StylingButton.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import {createStyles, createModifiers, createVars, cssVar} from '@workday/canvas-kit-styling';
+
+interface ButtonProps {
+  variant: 'primary' | 'secondary' | 'danger';
+  size: 'large' | 'medium' | 'small';
+  backgroundColor?: string;
+  children?: React.ReactNode;
+}
+
+const variables = createVars('backgroundColor');
+
+const baseStyles = createStyles({
+  fontSize: '1rem',
+  display: 'flex',
+  borderRadius: '1rem',
+});
+
+const modifierStyles = createModifiers({
+  variant: {
+    primary: createStyles({
+      background: cssVar(variables.backgroundColor, 'blue'),
+      color: 'white',
+    }),
+    secondary: createStyles({
+      background: cssVar(variables.backgroundColor, 'gray'),
+    }),
+    danger: createStyles({
+      background: cssVar(variables.backgroundColor, 'red'),
+    }),
+  },
+  size: {
+    large: createStyles({
+      fontSize: '1.4rem',
+      height: '2rem',
+    }),
+    medium: createStyles({
+      fontSize: '1rem',
+      height: '1.5rem',
+    }),
+    small: createStyles({
+      fontSize: '0.8rem',
+      height: '1.2rem',
+    }),
+  },
+});
+
+const Button = ({variant, size, backgroundColor, children}: ButtonProps) => {
+  const className = [baseStyles, modifierStyles({variant, size})].join(' ');
+  const style = variables({backgroundColor});
+  return (
+    <button className={className} style={style}>
+      {children}
+    </button>
+  );
+};
+
+export default () => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="primary" size="large">
+          Primary Large
+        </Button>
+        <Button variant="primary" size="medium">
+          Primary Medium
+        </Button>
+        <Button variant="primary" size="small">
+          Primary Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="secondary" size="large">
+          Secondary Large
+        </Button>
+        <Button variant="secondary" size="medium">
+          Secondary Medium
+        </Button>
+        <Button variant="secondary" size="small">
+          Secondary Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="danger" size="large">
+          Danger Large
+        </Button>
+        <Button variant="danger" size="medium">
+          Danger Medium
+        </Button>
+        <Button variant="danger" size="small">
+          Danger Small
+        </Button>
+      </div>
+      <div style={{display: 'flex', gap: '1rem'}}>
+        <Button variant="danger" size="large" backgroundColor="orange">
+          Custom Large
+        </Button>
+        <Button variant="danger" size="medium" backgroundColor="orange">
+          Custom Medium
+        </Button>
+        <Button variant="danger" size="small" backgroundColor="orange">
+          Custom Small
+        </Button>
+      </div>
+    </div>
+  );
+};

package/dist/mdx/styling/mdx/examples/StylingOverrides.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {jsx} from '@emotion/react';
+
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {base} from '@workday/canvas-tokens-web';
+import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+
+const backgroundColors = {
+  cssProp: cssVar(base.orange500),
+  styledComponent: cssVar(base.green500),
+  styleProps: cssVar(base.pink500),
+  createStyles: cssVar(base.purple500),
+};
+
+const StyledPrimaryButton = styled(PrimaryButton)({
+  backgroundColor: backgroundColors.styledComponent,
+});
+
+const styles = createStyles({
+  backgroundColor: backgroundColors.createStyles,
+});
+
+const CSSProp = () => (
+  <div
+    style={{
+      color: 'white',
+      padding: '0 4px',
+      height: 40,
+      width: 100,
+      backgroundColor: backgroundColors.cssProp,
+    }}
+  >
+    CSS Prop
+  </div>
+);
+const StyledComponent = () => (
+  <div
+    style={{
+      color: 'white',
+      padding: '0 4px',
+      height: 40,
+      width: 100,
+      backgroundColor: backgroundColors.styledComponent,
+    }}
+  >
+    Styled Component
+  </div>
+);
+const CreateStyles = () => (
+  <div
+    style={{
+      color: 'white',
+      padding: '0 4px',
+      height: 40,
+      width: 100,
+      backgroundColor: backgroundColors.createStyles,
+    }}
+  >
+    createStyles
+  </div>
+);
+const StyleProps = () => (
+  <div
+    style={{
+      color: 'white',
+      padding: '0 4px',
+      height: 40,
+      width: 100,
+      backgroundColor: backgroundColors.styleProps,
+    }}
+  >
+    Style Props
+  </div>
+);
+
+// We use this object and cast to `{}` to keep TypeScript happy. Emotion extends the JSX interface
+// to include the `css` prop, but the `jsx` function type doesn't accept the `css` prop. Casting to
+// an empty object keeps TypeScript happy and the `css` prop is valid at runtime.
+const cssProp = {css: {backgroundColor: backgroundColors.cssProp}} as {};
+
+export default () => {
+  return (
+    <Flex flexDirection="column" minHeight="100vh" gap="s">
+      <Flex flexDirection="column" gap="s">
+        <h2>Buttons</h2>
+        <Flex flexDirection="row" gap="s">
+          <PrimaryButton cs={styles}>createStyles</PrimaryButton>
+          {jsx(PrimaryButton, {...cssProp}, 'CSS Prop')}
+          <StyledPrimaryButton>Styled Component</StyledPrimaryButton>
+          <PrimaryButton backgroundColor={backgroundColors.styleProps}>Style Props</PrimaryButton>
+        </Flex>
+        <div>
+          {jsx(
+            PrimaryButton,
+            {
+              ...cssProp,
+              cs: styles,
+            },
+            'createStyles + CSS Prop'
+          )}
+        </div>
+        <div>
+          <StyledPrimaryButton cs={styles}>createStyles + Styled Component</StyledPrimaryButton>
+        </div>
+        <div>
+          <PrimaryButton cs={styles} backgroundColor={backgroundColors.styleProps}>
+            createStyles + Style Props
+          </PrimaryButton>
+        </div>
+        <div>
+          <StyledPrimaryButton backgroundColor={backgroundColors.styleProps} cs={styles}>
+            createStyles + Styled Component + Style Props
+          </StyledPrimaryButton>
+        </div>
+        <div>
+          {jsx(
+            StyledPrimaryButton,
+            {
+              ...cssProp,
+              backgroundColor: backgroundColors.styleProps,
+              cs: styles,
+            },
+            'createStyles + CSS Prop + Styled Component + Style Props'
+          )}
+        </div>
+        <div>{jsx(StyledPrimaryButton, {...cssProp}, 'CSS Prop + Styled Component')}</div>
+        <div>
+          {jsx(
+            PrimaryButton,
+            {
+              ...cssProp,
+              backgroundColor: backgroundColors.styleProps,
+            },
+            'CSS Prop + Style Props'
+          )}
+        </div>
+        <div>
+          <StyledPrimaryButton backgroundColor={backgroundColors.styleProps}>
+            Styled Component + Style Props
+          </StyledPrimaryButton>
+        </div>
+      </Flex>
+      <div>
+        <p>Legend:</p>
+        <CreateStyles />
+        <CSSProp />
+        <StyledComponent />
+        <StyleProps />
+      </div>
+      <p>
+        Style Precedence: <strong>createStyles</strong> &gt; <strong>CSS Props</strong> &gt;{' '}
+        <strong>Styled Component</strong> &gt; <strong>Style Props</strong>
+      </p>
+    </Flex>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1149-next.0",
+  "version": "14.0.0-alpha.1151-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1149-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1149-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1149-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1149-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1151-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1151-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1151-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1151-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "3.0.0-alpha.5",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "ef6d229e302c293a16da98a7b36b1409877a1ac8"
+  "gitHead": "891b0d79a8054c5cd3799eb8dd2e0c3b0f15a47b"
 }