@fortawesome/free-solid-svg-icons#faCut JavaScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faCut. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DiscountBanner.jsx    From frontend-app-authn with GNU Affero General Public License v3.0 5 votes vote down vote up 
DiscountExperimentBanner = (props) => {
  const { intl } = props;
  const [show, setShow] = useState(true);
  const [showToast, setToastShow] = useState(false);
  new ClipboardJS('.copyIcon'); // eslint-disable-line no-new
  const getDiscountText = () => (
    <strong>
      15% <FormattedMessage
        id="top.discount.message.15.off"
        defaultMessage="off"
        description="Text used with discounts e.g. 15% off"
      />
    </strong>
  );

  return (
    <>
      <Toast
        onClose={() => setToastShow(false)}
        show={showToast}
      >
        {intl.formatMessage(messages['code.copied'])}
      </Toast>
      <PageBanner
        show={show}
        dismissible
        onDismiss={() => { setShow(false); }}
      >
        <span className="text-primary-700 small variation2-text-alignment">
          <span className="mr-3">
            <FormattedMessage
              id="top.discount.message.body"
              defaultMessage="Get {discount} your first verified certificate* with code"
              description="Message body for edX discount"
              values={{
                discount: getDiscountText(),
              }}
            />
          </span>
          <span className="hover-text dashed-border p-1 d-inline-flex flex-wrap align-items-center">
            <span id="edx-welcome" className="font-weight-bold ">EDXWELCOME</span>
            <FontAwesomeIcon
              className="text-dark-200 copyIcon ml-2 hover-icon"
              icon={faCut}
              data-clipboard-action="copy"
              data-clipboard-target="#edx-welcome"
              onClick={() => setToastShow(true)}
            />
          </span>
        </span>
      </PageBanner>
    </>
  );
}
Example #2
Source File: LargeLeftLayout.jsx    From frontend-app-authn with GNU Affero General Public License v3.0 5 votes vote down vote up 
LargeLeftLayout = (props) => {
  const { intl, isRegistrationPage, experimentName } = props;
  const [showToast, setToastShow] = useState(false);
  new ClipboardJS('.copyIcon'); // eslint-disable-line no-new

  return (
    <div className="min-vh-100 d-flex justify-content-left align-items-center">
      <div className="d-flex pr-0 mt-lg-n2">
        <Toast
          onClose={() => setToastShow(false)}
          show={showToast}
        >
          {intl.formatMessage(messages['code.copied'])}
        </Toast>
        <svg
          role="img"
          aria-label=""
          focusable={false}
          className={classNames(
            'large-screen-svg-line',
            {
              'variation1-bar-color mt-n6 pt-0 ml-5': experimentName === 'variation1' && isRegistrationPage,
              'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
              'ml-5': experimentName !== 'variation1' || !isRegistrationPage,
            },
          )}
        >
          <line x1="50" y1="0" x2="10" y2="215" />
        </svg>
        <div className={classNames({ 'pl-4': experimentName === 'variation1' && isRegistrationPage })}>
          <h1 className={classNames('large-heading', { 'mb-4.5': experimentName === 'variation1' && isRegistrationPage })}>
            {intl.formatMessage(messages['start.learning'])}
            <span
              className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
            >
              <br />
              {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
            </span>
          </h1>
          {experimentName === 'variation1' && isRegistrationPage ? (
            <span className="text-light-300 dicount-heading">
              <span className="lead mr-3">
                <SideDiscountBanner />
              </span>
              <span className="dashed-border d-inline-flex flex-wrap align-items-center">
                <span id="edx-welcome" className="text-white edx-welcome font-weight-bold mr-1">EDXWELCOME</span>
                <FontAwesomeIcon
                  className="text-light-700 copyIcon ml-1.5 hover-discount-icon"
                  icon={faCut}
                  data-clipboard-action="copy"
                  data-clipboard-target="#edx-welcome"
                  onClick={() => setToastShow(true)}
                />
              </span>
            </span>
          ) : null}
        </div>
      </div>
    </div>
  );
}
Example #3
Source File: MediumLayout.jsx    From frontend-app-authn with GNU Affero General Public License v3.0 5 votes vote down vote up 
MediumLayout = (props) => {
  const { intl, isRegistrationPage, experimentName } = props;
  const [showToast, setToastShow] = useState(false);
  new ClipboardJS('.copyIcon'); // eslint-disable-line no-new

  return (
    <div className={classNames(
      'container row p-0 mb-3 medium-screen-container',
      {
        'variation1-medium-screen': experimentName === 'variation1' && isRegistrationPage,
      },
    )}
    >
      <Toast
        onClose={() => setToastShow(false)}
        show={showToast}
      >
        {intl.formatMessage(messages['code.copied'])}
      </Toast>
      <div className="col-md-10 p-0 screen-header-primary">
        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
          <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
        </Hyperlink>
        <div className="row mt-4 justify-content-center">
          <svg
            role="img"
            aria-label=""
            focusable={false}
            className={classNames(
              'medium-screen-svg-line pl-5',
              {
                'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
                'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
              },
            )}
          >
            <line x1="50" y1="0" x2="10" y2="215" />
          </svg>
          <div className="pb-4">
            <h1 className="medium-heading">
              {intl.formatMessage(messages['start.learning'])}
              <span
                className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
              >
                <br />
                {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
              </span>
            </h1>
            {experimentName === 'variation1' && isRegistrationPage ? (
              <div className="text-light-300 pl-3">
                <SideDiscountBanner />
                <span className="dashed-border h5 text-white">
                  <span id="edx-welcome" className="edx-welcome">EDXWELCOME </span>
                  <FontAwesomeIcon
                    className="text-light-700 copyIcon ml-1 hover-discount-icon"
                    icon={faCut}
                    data-clipboard-action="copy"
                    data-clipboard-target="#edx-welcome"
                    onClick={() => setToastShow(true)}
                  />
                </span>
              </div>
            ) : null}
          </div>
        </div>
        <div />
      </div>
      <div className="col-md-2 p-0 screen-polygon">
        <svg width="100%" height="100%" className="medium-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
          <g transform="skewX(168)">
            <rect x="0" y="0" height="100%" width="100%" />
          </g>
        </svg>
      </div>
    </div>
  );
}
Example #4
Source File: SmallLayout.jsx    From frontend-app-authn with GNU Affero General Public License v3.0 5 votes vote down vote up 
SmallLayout = (props) => {
  const { intl, isRegistrationPage, experimentName } = props;
  const [showToast, setToastShow] = useState(false);
  new ClipboardJS('.copyIcon'); // eslint-disable-line no-new

  return (
    <>
      <div className="small-screen-header-primary">
        <Toast
          onClose={() => setToastShow(false)}
          show={showToast}
        >
          {intl.formatMessage(messages['code.copied'])}
        </Toast>
        <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
          <Image alt={getConfig().SITE_NAME} className="logo" src={getConfig().LOGO_WHITE_URL} />
        </Hyperlink>
        <div className="d-flex mt-3">
          <svg
            role="img"
            aria-label=""
            focusable={false}
            className={classNames(
              'small-screen-svg-line',
              {
                'variation1-bar-color': experimentName === 'variation1' && isRegistrationPage,
                'variation2-bar-color': experimentName === 'variation2' && isRegistrationPage,
              },
            )}
          >
            <line x1="55" y1="0" x2="40" y2="65" />
          </svg>
          <div className="pb-3">
            <h1 className="small-heading">
              {intl.formatMessage(messages['start.learning'])}
              <br />
              <span
                className={((experimentName === 'variation1' || experimentName === 'variation2') && isRegistrationPage) ? 'text-accent-b' : 'text-accent-a'}
              >
                {intl.formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
              </span>
            </h1>
            {(experimentName === 'variation1' && isRegistrationPage) ? (
              <div className="small text-light-300 pl-2">
                <SideDiscountBanner />
                <span className="dashed-border h6 text-white d-inline-flex flex-wrap align-items-center">
                  <span id="edx-welcome" className="edx-welcome mr-1">EDXWELCOME</span>
                  <FontAwesomeIcon
                    className="text-light-700 copyIcon ml-1 hover-discount-icon"
                    icon={faCut}
                    data-clipboard-action="copy"
                    data-clipboard-target="#edx-welcome"
                    onClick={() => setToastShow(true)}
                  />
                </span>
              </div>
            ) : null}
          </div>
        </div>
      </div>
    </>
  );
}