How to use @uifabric/foundation - 10 common examples

// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { useButtonState as state } from './Button.state';
import { ButtonStyles as styles, ButtonTokens as tokens } from './Button.styles';
import { IButtonProps } from './Button.types';
import { ButtonSlots as slots, ButtonView as view } from './Button.view';

export const Button: React.StatelessComponent = composed({
  displayName: 'Button',
  slots,
  state,
  styles,
  tokens,
  view
});

export default Button;

// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { useMenuButtonState as state } from './MenuButton.state';
import { MenuButtonStyles as styles, MenuButtonTokens as tokens } from './MenuButton.styles';
import { IMenuButtonProps } from './MenuButton.types';
import { MenuButtonSlots as slots, MenuButtonView as view } from './MenuButton.view';

export const MenuButton: React.StatelessComponent = composed({
  displayName: 'MenuButton',
  slots,
  state,
  styles,
  tokens,
  view
});

export default MenuButton;

// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { ActionableStyles as styles, ActionableTokens as tokens } from './Actionable.styles';
import { IActionableProps } from './Actionable.types';
import { useActionableState as state } from './Actionable.state';
import { ActionableSlots as slots, ActionableView as view } from './Actionable.view';

export const Actionable: React.StatelessComponent = composed({
  displayName: 'Actionable',
  slots,
  state,
  styles,
  tokens,
  view
});

export default Actionable;

import * as React from 'react';
// Temporary import file to experiment with next version of foundation.
import { composed } from '@uifabric/foundation/lib/next/composed';
import { useSplitButtonState as state } from './SplitButton.state';
import { SplitButtonStyles as styles, SplitButtonTokens as tokens } from './SplitButton.styles';
import { ISplitButtonProps } from './SplitButton.types';
import { SplitButtonSlots as slots, SplitButtonView as view } from './SplitButton.view';

export const SplitButton: React.StatelessComponent = composed({
  displayName: 'SplitButton',
  slots,
  state,
  styles,
  tokens,
  view
});

export default SplitButton;

export type IExampleCardComponentStyles = IComponentStyles;

// tslint:disable-next-line:typedef
const ExampleCardComponentView: IExampleCardComponent['view'] = props => {
  if (!props.children) {
    return null;
  }

  const Slots = getSlots(props, {
    root: 'div'
  });

  return ;
};

export const ExampleCardComponent: React.StatelessComponent = createComponent({
  displayName: 'ExampleCardComponent',
  styles: undefined,
  view: ExampleCardComponentView
});

export const CardView: ICardComponent['view'] = props => {
  const Slots = getSlots(props, {
    root: Stack
  });

  const { children, styles, tokens, horizontal, onClick, onKeyDown, ...rest } = props;

  const nativeProps = getNativeProps>(rest, htmlElementProperties);

  // Get childrenGap and childrenMargin token values.
  const childrenGap = tokens && (tokens as ICardTokens).childrenGap;
  const childrenMargin = tokens && (tokens as ICardTokens).childrenMargin;
  const childrenCount = React.Children.count(children);

  /* The map function below takes the Card children and applies the correct margin and gap tokens to them, ensuring at the same time that
   * they are of type CardItem or CardSection. */
  const cardChildren: (React.ReactChild | null)[] = React.Children.map(
    children,

const secondaryTextChild = (
    
  );

  const compoundButtonProps = {
    ...rest,
    children: [secondaryTextChild, children]
  };

  return ButtonView(compoundButtonProps, slots);
};

export const CompoundButton: React.StatelessComponent = composed({
  displayName: 'CompoundButton',
  slots: ButtonSlots,
  state,
  styles: CompoundButtonStyles,
  tokens: CompoundButtonTokens,
  view: CompoundButtonView
});

ButtonStyles as styles
} from '../Button.styles';
import { IButtonComponent, IButtonProps, IButtonTokenReturnType } from '../Button.types';
import { ButtonSlots as slots, ButtonView as view } from '../Button.view';

export const PrimaryButtonTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => [
  baseTokens,
  !!props.href && hrefTokens,
  primaryEnabledTokens,
  props.circular && circularTokens,
  props.circular && primaryCircularTokens,
  props.checked && primaryCheckedTokens,
  props.disabled && disabledTokens
];

export const PrimaryButton: React.StatelessComponent = composed({
  displayName: 'PrimaryButton',
  slots,
  state,
  styles,
  tokens: PrimaryButtonTokens,
  view
});

return {
    borderColor: semanticColors.buttonBorderDisabled,
    borderColorHovered: semanticColors.buttonBorderDisabled,
    borderColorPressed: semanticColors.buttonBorderDisabled,
    cursor: 'default'
  };
};

export const MessageBarButtonTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => {
  const regularTokens = (ButtonTokens as ITokenFunction)(props, theme);

  return [regularTokens, baseTokens, props.disabled && disabledTokens];
};

export const MessageBarButton: React.StatelessComponent = composed({
  displayName: 'MessageBarButton',
  slots,
  state,
  styles,
  tokens: MessageBarButtonTokens,
  view
});

hrefTokens,
  ButtonStyles as styles
} from '../Button.styles';
import { IButtonComponent, IButtonProps, IButtonTokenReturnType } from '../Button.types';
import { ButtonSlots as slots, ButtonView as view } from '../Button.view';

export const DefaultButtonTokens: IButtonComponent['tokens'] = (props, theme): IButtonTokenReturnType => [
  baseTokens,
  !!props.href && hrefTokens,
  !props.disabled && enabledTokens,
  props.circular && circularTokens,
  props.checked && checkedTokens,
  props.disabled && disabledTokens
];

export const DefaultButton: React.StatelessComponent = composed({
  displayName: 'DefaultButton',
  slots,
  state,
  styles,
  tokens: DefaultButtonTokens,
  view
});