How to use the @times-components/styleguide.editionBreakpoints.medium function in @times-components/styleguide

test() {
        const output = renderComponent(
          
        );

        expect(output).toMatchSnapshot();
      }
    },

paddingVertical: spacing(2)
  }
};

const hugeBreakpointStyles = {
  ...wideBreakpointStyles,
  headline: {
    fontFamily: fonts.headline,
    fontSize: 20,
    lineHeight: 20,
    marginBottom: 0
  }
};

const stylesResolver = {
  [editionBreakpoints.medium]: mediumBreakpointStyles,
  [editionBreakpoints.wide]: wideBreakpointStyles,
  [editionBreakpoints.huge]: hugeBreakpointStyles
};

export default breakpoint =>
  Object.assign(defaultStyles, stylesResolver[breakpoint] || {});

import {
  fonts,
  spacing,
  editionBreakpoints
} from "@times-components/styleguide";

const fontSizeResolver = {
  [editionBreakpoints.small]: 20,
  [editionBreakpoints.medium]: 18,
  [editionBreakpoints.wide]: 20,
  [editionBreakpoints.huge]: 22
};

export default breakpoint => ({
  container: {
    flex: 1,
    padding: spacing(2)
  },
  headlineStyle: {
    fontFamily: fonts.headline,
    fontSize: fontSizeResolver[breakpoint],
    lineHeight: fontSizeResolver[breakpoint],
    marginBottom: 0
  },
  summaryContainer: {

const TileAC = ({ onPress, tile, breakpoint = editionBreakpoints.medium }) => {
  const styles = stylesFactory(breakpoint);
  const crop = getTileImage(tile, "crop169");

  if (!crop) {
    return null;
  }

  const {
    article: { hasVideo }
  } = tile;

  return (

const TileW = ({ onPress, tile, breakpoint = editionBreakpoints.medium }) => {
  const styles = stylesFactory(breakpoint);
  const crop = getTileImage(tile, "crop32");

  if (!crop) {
    return null;
  }

  const {
    article: { hasVideo }
  } = tile;

  return (

import {
  fonts,
  spacing,
  colours,
  editionBreakpoints
} from "@times-components/styleguide";

const headlineSizeResolver = {
  [editionBreakpoints.huge]: 25,
  [editionBreakpoints.wide]: 22,
  [editionBreakpoints.small]: 18,
  [editionBreakpoints.medium]: 22
};

export default breakpoint => ({
  container: {
    flexDirection: "row",
    padding: spacing(2)
  },
  headline: {
    color: colours.functional.primary,
    fontFamily: fonts.headline,
    fontSize: headlineSizeResolver[breakpoint],
    lineHeight: headlineSizeResolver[breakpoint],
    marginBottom: spacing(2)
  },
  imageContainer: {
    paddingRight: spacing(2),

imageContainer: {
    flex: 0.26
  },
  summaryContainer: {
    flex: 0.74,
    paddingRight: spacing(4)
  },
  headline: {
    ...mediumBreakpointStyles.headline,
    fontSize: 45,
    lineHeight: 45
  }
};

const stylesResolver = {
  [editionBreakpoints.medium]: mediumBreakpointStyles,
  [editionBreakpoints.wide]: wideBreakpointStyles,
  [editionBreakpoints.huge]: hugeBreakpointStyles
};

export default breakpoint => stylesResolver[breakpoint];

marginHorizontal: spacing(6)
  }
};

const wideBreakpointStyles = {
  ...mediumBreakpointStyles,
  container: {
    ...darkBackgroundColour,
    marginVertical: spacing(3),
    marginHorizontal: spacing(4)
  }
};

const stylesResolver = {
  [editionBreakpoints.small]: smallBreakpointStyles,
  [editionBreakpoints.medium]: mediumBreakpointStyles,
  [editionBreakpoints.wide]: wideBreakpointStyles,
  [editionBreakpoints.huge]: wideBreakpointStyles
};

export default breakpoint =>
  Object.assign(smallBreakpointStyles, stylesResolver[breakpoint]);

import { spacing, editionBreakpoints } from "@times-components/styleguide";

const keylinePadding = {
  [editionBreakpoints.medium]: spacing(2),
  [editionBreakpoints.wide]: spacing(3),
  [editionBreakpoints.huge]: spacing(3)
};

const styles = breakpoint => ({
  container: {
    alignItems: "center",
    padding: spacing(2),
    paddingLeft: keylinePadding[breakpoint]
  },
  imageContainer: {
    width: "100%"
  }
});

export default styles;

import {
  fonts,
  spacing,
  editionBreakpoints,
  globalSpacingStyles
} from "@times-components/styleguide";

const fontSizeResolver = {
  [editionBreakpoints.medium]: 20,
  [editionBreakpoints.wide]: 20,
  [editionBreakpoints.huge]: 22
};

export default breakpoint => ({
  container: {
    flex: 1,
    flexDirection: "row",
    padding: spacing(2)
  },
  headline: {
    ...globalSpacingStyles.tabletHeadline,
    fontFamily: fonts.headline,
    fontSize: fontSizeResolver[breakpoint],
    lineHeight: fontSizeResolver[breakpoint]
  },