@shopify/polaris/dist/esm/components/FooterHelp/FooterHelp.js

Shopify’s product component library

import React$1 from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { classNames } from '../../utilities/css.js';
import { InfoMinor, QuestionMarkMajor } from '@shopify/polaris-icons';
import { Icon as Icon$1 } from '../Icon/Icon.js';
import styles from './FooterHelp.scss.js';

function FooterHelp({
  children
}) {
  var {
    newDesignLanguage
  } = useFeatures();
  var className = classNames(styles.FooterHelp, newDesignLanguage && styles.newDesignLanguage);
  var iconProps = {
    source: newDesignLanguage ? InfoMinor : QuestionMarkMajor,
    color: newDesignLanguage ? 'highlight' : 'teal',
    backdrop: !newDesignLanguage
  };
  return /*#__PURE__*/React$1.createElement("div", {
    className: className
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Content
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Icon
  }, /*#__PURE__*/React$1.createElement(Icon$1, iconProps)), /*#__PURE__*/React$1.createElement("div", {
    className: styles.Text
  }, children)));
}

export { FooterHelp };