How to use the @carbon/layout.breakpoints.md function in @carbon/layout

To help you get started, we’ve selected a few @carbon/layout examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github carbon-design-system / carbon-website-archive / packages / addons-website / src / components / TypesetExample / TypesetExample.js View on Github external
import React from 'react';
import { settings } from 'carbon-components';
import classnames from 'classnames';
import { findKey, values } from 'lodash';
import { baseFontSize, breakpoints as carbonBreakpoints } from '@carbon/layout';
import { CodeSnippet } from 'carbon-components-react';

const { prefix } = settings;

const breakpoints = {
  sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
  md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
  lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
  xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
  max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};

const defaultTypeValues = {
  'letter-spacing': 0,
};

const TypesetExample = props => {
  return (
    <div>
      {(props.typeSet || []).map(type =&gt; {
        const indexOfClosestLargerBreakpoint = Math.max(
          0,
          values(breakpoints).findIndex(</div>
github carbon-design-system / carbon-website-archive / packages / addons-website / src / components / TypesetStyle / TypesetStyle.js View on Github external
{
      description: 'Display',
      key: 'display-03',
      name: 'display-03',
    },
    {
      description: 'Display',
      key: 'display-04',
      name: 'display-04',
    },
  ],
};

const breakpoints = {
  sm: Number(carbonBreakpoints.sm.width.replace('rem', '')) * baseFontSize,
  md: Number(carbonBreakpoints.md.width.replace('rem', '')) * baseFontSize,
  lg: Number(carbonBreakpoints.lg.width.replace('rem', '')) * baseFontSize,
  xlg: Number(carbonBreakpoints.xlg.width.replace('rem', '')) * baseFontSize,
  max: Number(carbonBreakpoints.max.width.replace('rem', '')) * baseFontSize,
};

const nextLargerBreakpointPx = viewportWidth => {
  return values(breakpoints)[indexOfCurrentBreakpoint(viewportWidth) + 1];
};

const indexOfCurrentBreakpoint = viewportWidth => {
  return findLastIndex(values(breakpoints), width => viewportWidth >= width);
};

const isWithinBreakpoint = (viewportWidth, currentBreakpoint) => {
  if (viewportWidth === currentBreakpoint) return true;
  return (