Appendix A - Responsive Text Component

import { css, unsafeCSS } from 'lit-element';
import { FusionText } from '../../../fusion/slide/text';
import { breakpoints } from '../../../../build/config';

const tabletBreakpoint = `${breakpoints.tablet || 1279}px`;
const mobileBreakpoint = `${breakpoints.mobile || 767}px`;

class AntResponsiveText extends FusionText {
  static get properties() {
    const {
      'font-size': fontSize,
      ...rest
    } = super.properties;
    return {
      ...rest,
      'font-size': {
        ...fontSize,
        value: '16px',
      },
      'font-size-tablet': {
        type: String,
        fieldType: 'Number',
        propertyGroup: 'text',
        value: '16px',
        availableUnits: [{ unitType: 'px' }],
      },
      'font-size-mobile': {
        type: String,
        fieldType: 'Number',
        propertyGroup: 'text',
        value: '16px',
        availableUnits: [{ unitType: 'px' }],
      },
    };
  }

  static get options() {
    return {
      ...super.options,
      componentName: 'ant-responsive-text',
      componentUIName: 'Responsive Text',
      componentCategory: 'text',
      componentDescription: 'Component to set font size per breakpoint',
      defaultTemplate: '<p>Default text</p>',
    };
  }

  static get styles() {
    return [
      super.styles,
      this.generateCssProperty('flex-direction'),
      css`
        ::slotted(p) {
          font-size: var(--font-size);
        }
        /* tablet */
        @media only screen and (max-width: ${unsafeCSS(tabletBreakpoint)}) {
          ::slotted(p) {
            font-size: var(--font-size-tablet);
          }
        }
        /* mobile */
        @media only screen and (max-width: ${unsafeCSS(mobileBreakpoint)}) {
          ::slotted(p) {
            font-size: var(--font-size-mobile);
          }
        }
      `,
    ];
  }
}

export { AntResponsiveText };