v3/packages/design-system/atoms/breakpoints/DebugTool.tsx

import * as React from 'react';
import styled from 'styled-components';
import { onDesktop, onTablet } from './Breakpoints';
import { useBreakpointContext } from './Context';

const DebuggerPosition = styled.div`
    position: fixed;
    top: 0;
    left: 0;
    font-family: monospace;
    & > div {
        display: flex;
    }
`;

const OnSmallScreen = styled.div`
    display: block;
`;

const OnTablet = styled.div`
    display: none;
    ${onTablet(`display: block;`)}
`;

const OnDesktop = styled.div`
    display: none;
    ${onDesktop`display: block;`}
`;

const CSSBreakpointDebugger = () => (
    <div>
        <OnSmallScreen style={{ backgroundColor: 'red' }}>S</OnSmallScreen>
        <OnTablet style={{ backgroundColor: 'green' }}>T</OnTablet>
        <OnDesktop style={{ backgroundColor: 'blue' }}>D</OnDesktop>
    </div>
);

const JSBreakpointDebugger = () => {
    const {
        screenSize: { onTablet, onDesktop, onSmallScreen },
    } = useBreakpointContext();

    return (
        <div>
            {onSmallScreen && <div style={{ backgroundColor: 'red' }}>S</div>}
            {onTablet && <div style={{ backgroundColor: 'green' }}>T</div>}
            {onDesktop && <div style={{ backgroundColor: 'blue' }}>D</div>}
        </div>
    );
};
export const BreakpointDebugTool = () => (
    <DebuggerPosition>
        <JSBreakpointDebugger />
        <CSSBreakpointDebugger />
    </DebuggerPosition>
);