@intility/bifrost-react/dist/components/Inline/index.js

React library for Intility's design system, Bifrost.

import Inline from "./Inline.js";
import InlineSeparator from "./Inline.Separator.js";
import InlineStretch from "./Inline.Stretch.js";

/**
 * Wrapper to position multiple elements on the same line
 *
 * @see https://bifrost.intility.com/react/inline
 *
 * @example
 * // place two elements next to eachother with the default `12px` gap
 * <Inline>
 *   <div />
 *   <div />
 * </Inline>
 *
 * @example
 * // push the second div to the right by using a separator before it
 * <Inline>
 *   <div />
 *   <Inline.Separator />
 *   <div />
 * </Inline>
 *
 * @example
 * // stretch the first div to fill available space
 * <Inline>
 *   <Inline.Stretch>
 *     <div />
 *   </Inline.Stretch>
 *   <div />
 * </Inline>
 */
export default Object.assign(Inline, {
  /**
   * The <Inline.Separator /> component will push elements away from it.
   *
   * @see https://bifrost.intility.com/react/inline#inlineseparator
   */
  Separator: InlineSeparator,
  /**
   * Wrapping an element in <Inline.Stretch> will stretch it to fill available
   * space.
   *
   * @see https://bifrost.intility.com/react/inline#inlinestretch
   */
  Stretch: InlineStretch
});