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

test() {
        const output = renderComponent(
          
        );

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

test() {
        const output = renderComponent(
          
        );

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

test: () => {
        const renderSmallMock = jest.fn();
        const renderMediumMock = jest.fn();
        const renderWideMock = jest.fn();
        const renderHugeMock = jest.fn();

        TestRenderer.create(
          
            
          
        );

        expect(renderSmallMock).toHaveBeenCalled();
      }
    }

const filterPuzzles = (puzzles, editionBreakpoint) =>
  editionBreakpoint === editionBreakpoints.small
    ? puzzles.filter(puzzle => !puzzle.hideOnMobile)
    : puzzles;

marginVertical: spacing(3),
    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]);

{ style: styles.columnistContainer, tile: columnist },
        { style: styles.secondaryContainer, tile: secondary }
      ]}
      colSeparatorStyle={styles.colSeparator}
    />
  );
};

SecondaryOneAndColumnistSlice.propTypes = {
  breakpoint: PropTypes.string,
  columnist: PropTypes.node.isRequired,
  secondary: PropTypes.node.isRequired
};

SecondaryOneAndColumnistSlice.defaultProps = {
  breakpoint: editionBreakpoints.small
};

export default SecondaryOneAndColumnistSlice;

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: {

const TileK = ({ onPress, tile, breakpoint = editionBreakpoints.small }) => {
  const styles = styleFactory(breakpoint);
  const crop = getTileImage(tile, "crop32");

  if (!crop) {
    return null;
  }

  const {
    article: { hasVideo }
  } = tile;

  return (

const TileB = ({
  onPress,
  tile,
  breakpoint = editionBreakpoints.small,
  withMoreTeaser = false,
  additionalHeadlineStyles = {}
}) => {
  const styles = stylesFactory(breakpoint);
  const headLineStyles = {
    ...styles.headline,
    ...additionalHeadlineStyles
  };

  return (
    
       (

const SecondaryTwoNoPicAndTwoSlice = ({
  breakpoint,
  secondary1,
  secondary2,
  support1,
  support2
}) => {
  const styles = styleFactory(breakpoint);

  if (breakpoint === editionBreakpoints.small) {
    return (
      
    );
  }

  if (breakpoint === editionBreakpoints.medium) {
    return (