Skip to Content
DocumentationGuidesDevelopersResourcesLegacy frameworks

Legacy frameworks

Camp Design System has certain considerations built for when engineers are developing within Ember or PHP, rather than React.

Ember

Camp’s library of styles and components can be used to design and build any number of ActiveCampaign’s features. This library reduces design debt, eliminates inconsistencies, and saves time. Here are a few ways to harness the power of Camp within the Ember App.

Connect component utility

In order for Camp components to function properly in the Ember App, authors can use the connectComponent utility function which connects JSX (React) elements to the Ember component lifecycle.

connectComponent is a decorator which mounts a React component (functional or class) to an Ember component element on render. To configure the wrapper, connectComponent will accept an options argument which will allow users to specify which attributes should be forwarded to the React component via attributeBindings and which ones should be translated using translateAttributes.

Using a Camp component in Ember

For example, if you wanted to use the Camp banner in Ember, you would first add a new component.js file in a new component directory (e.g., app/components/c-banner) with the following code:

import Banner from "@activecampaign/camp-components-banner";
import connectComponent from "ember-app/utils/connect-component";
 
export default connectComponent({
    // Notice the props below map to the banner props in
    // http://storybook.activecampaign.design/?path=/docs/components-banner--example
    attributeBindings: [
        "appearance",
        "title",
        "headingLevel",
        "description",
        "actions",
        "titleTestId",
        "descriptionTestId",
        "actionsTestId"
        ],
    // The props below will contain strings that need to be translated.
    translateAttributes: ["title", "description"]
})(Banner);

Now you have a c-banner component available in Ember, which can be used like so:

{{c-banner
    appearance='info'
    title='settings:security:usermfa-action-blocked-message'
}}

Note: there are already a number of Camp components being used in Ember, all with the naming convention of c-*. Confusingly, a few of these c-*components (c-avatar, c-text, c-table, etc.) do NOT use official Camp components. You can usually tell quickly if it is an official Camp component if it contains an import of an actual Camp component at the top.

Also, note that there is currently an issue with using React children inside a component using the connectComponent utility. You can still add children as a prop and pass your data like so:

{{c-banner children="whatever"}}

but not like this:

{{#c-banner}}
whatever
{{/c-banner}}

Building your own React component in Ember

You can of course also build your own React components in Ember (including larger patterns containing Camp components). For example, if you wanted to create a simple component called Notification composed of an icon and some text that accepted a message attribute, then your notification.hbs template might contain the following:

{{ notification message="Hello World!" }}

We’d then need to provide the name to our attributeBindings options property when connecting:

import Icon from "@activecampaign/camp-components-icon"
import Text from "@activecampaign/camp-components-text"
 
function Notification({ message }) {
return (
    <div className="notification">
    <Icon
        use="circleInfo"
        className="notification-icon"
    />
    <Text
        as="p"
        className="notification-message"
    >
        {message}
    </Text>
    </div>
)
}
 
export default connectComponent({
attributeBindings: ['message']
})(Notification);
ℹ️

If attributeBindings is not provided as an option, then connectComponent will attempt to parse the component’s propTypes instead.

The above configuration will render our Notification component once the parent Ember element is injected into the DOM, resulting in the following markup:

<div class="notification ...">
    <div class="notification-icon ...">
        <svg>...</svg>
    </div>
    <p class="notification-message ...">
        Hello World!
    </p>
</div>
ℹ️

All attribute values should be supported, not just strings. If we needed to emit an event back to the Ember app, then we could pass an action attribute to the component to achieve that.

Camp components vs. Ember Camp components

The Design Systems team encourages you to use official Camp components in your development. Many legacy “Ember Camp components” do not follow the most current design tokens and patterns. Please consider using Connect Component Utility or contributing your component to Camp instead of using these legacy components.

“Ember Camp components” live alongside the rest of our reusable components. They are prefixed with camp-* and many of them have a stylesheet that can be found at a matching file path e.g. styles/components/camp-*.scss

It’s okay to make changes to Ember Camp components, but remember, they are global and likely reused across the platform! The work that other teams have done may be affected by your change. However, don’t let this deter you from making adjustments; our components should continue to be refined and refactored.

Just getting started? Read up on Ember 101 .

✅ DO

  • Do broadcast breaking changes you make to components!
  • Do follow best practices for Ember components established in Ember 101.

🚫 DON’T

  • Don’t edit a component to work for a single use case.
  • Don’t override component styles. Rather, build an alternative theme or class into the component.

Camp CSS

ℹ️

The Design Systems team encourages you to use official Camp components in your development. Many Camp CSS classes do not follow the most current design tokens and patterns.

Camp CSS  is our library of functional CSS classes used to reduce specificity and increase visual consistency. It was designed for the marketing website but it is also in use in Ember App.

In the future, we hope to refactor and deconstruct camp-css into micro-packages that can be customized to fit the differing needs of the marketing site and the product.

To use camp-css classes on an element, the element must be a child/ancestor of an element with “camp-css” as an attribute. This is to limit the scope of the classes and reduce unintended consequences of adding such a large number of classes to the codebase.

Benefits of functional CSS classes

  • You don’t have to think of long class names to style your elements
  • You don’t need to write additional CSS
  • It keeps selector specificity low
  • It makes removing and refactoring classes safer

Drawbacks

  • There are a lot of class names to remember. You’ll get the hang of it!
  • Template files get a bit longer.
  • Not every styling possibility will be covered by a functional class.

How to use

✅ DO

  • Do use camp-css where possible in template files

🚫 DON’T

  • Don’t override camp-css styles in the CSS
  • Don’t reference elements in JavaScript using the camp-css classes
  • Don’t add new classes that seem link camp-css classes outside of camp-css

PHP/Hosted

Camp’s library of styles and components can be used to design and build any number of ActiveCampaign’s features.

With the tooling outlined on this page, you can use Camp components even in legacy PHP parts of the application, including Hosted. Whether it is new development or refactoring that is needed, using this pattern will help you reduce design debt, save time and decrease inconsistencies by leveraging Camp in PHP.

Mounting

Assuming you have some infrastructure  in place, we begin by mounting React components to specific DOM elements. See below for an example of it in Hosted and here  for it in context.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Banner from "@activecampaign/camp-components-banner";
 
import InAppExpansion from "@activecampaign/platform-components-in-app-expansion";
import { init } from "./api/hostedMounterAPI";
 
import {
    i18n,
    TranslationsProvider,
    useLocale,
} from "@activecampaign/core-translations-client";
 
declare type renderFunction = {
    (renderTarget: HTMLElement): void;
};
 
declare type mounterObject = { [key: string]: renderFunction };
 
const BANNER_TARGET = ".my-special-banner";
 
const allowedLangs = [
    "english",
    "french",
    "german",
    "italian",
    "portuguese - brazil",
    "spanish",
];
 
function InAppExpansionModal(props: any) {
    const [state, setState] = useState(true);
 
    function dismissPopover(): void {
        setState(false);
    }
 
    return (
        <TranslationsProvider>
            {state && (
                <InAppExpansion
                    upgradeTitle={props.upgradeTitle}
                    upgradeTier={props.upgradeTier}
                    upgradeBody={props.upgradeBody}
                    upgradeBenefits={props.upgradeBenefits}
                    newMonthlyCost={props.newMonthlyCost}
                    amountDueToday={props.amountDueToday}
                    locale={props.locale}
                    currency={props.currency}
                    onDismiss={dismissPopover}
                    customPlan={true}
                    upgradeOrReviewState="upgrade"
                />
            )}
        </TranslationsProvider>
    );
}
 
/**
* A note on this pattern - if there exists multiple mount targets on a single page,
* each will be its own React app, meaning there's no implicit shared state. Instead,
* a state object (maybe redux?), or an event bus needs to be instantiated separately
* and then passed into each rendered app.
*/
const mounters: mounterObject = {
    [BANNER_TARGET]: async (renderTarget) => {
        const props = Object.assign({}, renderTarget.dataset);
        ReactDOM.render(
            <Banner title={""} description={""} {...props} />,
            renderTarget
        );
    },
 
    "#inAppExpansionContainer": async (renderTarget) => {
        init();
 
        const upgradeBenefits: [] = JSON.parse(
            renderTarget.dataset.upgradeBenefits ||
                '["Up to 3 users", "CRM with sales automation", "Facebook Custom Audiences", "Integrations"]'
        );
 
        const accountLanguage: string =
            renderTarget.dataset.language || "english";
 
        const lang = allowedLangs.includes(accountLanguage)
            ? accountLanguage
            : "english";
        const locale = useLocale(lang);
        await i18n.changeLanguage(locale);
 
        const props = {
            upgradeTitle:
                renderTarget.dataset.upgradeTitle ||
                "Unlock lead scoring and more by upgrading your plan",
            upgradeTier: renderTarget.dataset.upgradeTier || "Plus",
            upgradeBody:
                renderTarget.dataset.upgradeBody ||
                "ActiveCampaign can do more! Upgrade to unlock valuable tools, such as lead scoring. By upgrading to Plus, you’ll get some of our most popular features:",
            upgradeBenefits: upgradeBenefits,
            newMonthlyCost: parseInt(
                renderTarget.dataset.newMonthlyCost || "0"
            ),
            amountDueToday: parseInt(
                renderTarget.dataset.amountDueToday || "0"
            ),
            locale: locale,
            currency: renderTarget.dataset.currency || "USD",
        };
 
        const element = <InAppExpansionModal {...props} />;
        ReactDOM.render(element, renderTarget);
    },
};
 
/**
* Allowing for the passing of the document object enables easier testing
* @param doc
*/
const runMounters = (doc: Document = document) => {
    /**
    * This file is only executed on a full page-load, so navigating between react routes
    * will not re-execute this loop.
    */
    for (let [cssIdentifier, renderFunction] of Object.entries(mounters)) {
        let mountTargetsCollection = doc.querySelectorAll(
            cssIdentifier
        ) as NodeListOf<HTMLElement>;
 
        for (let element of mountTargetsCollection.values()) {
            renderFunction(element);
        }
    }
};
 
export default runMounters;
 
export { BANNER_TARGET, mounters };

Mounter helper class

Next you’ll have to create a class to help load the files. See below for an example and here for it in context .

 
<?php
 
    namespace ActiveCampaign\Hosted\Helpers;
 
    class MounterHelper
    {
        /**
        * @return mixed|null Null if not found.
        */
        private function getConfigValue(string $key)
        {
            $value = getenv($key);
 
            // Environment variables might be strings encoded as JSON.
            // Decode to get the original string.
            if($value && $value[0] === '"') {
                $value = @json_decode($value, true) ?? $value;
            }
            return $value;
        }
 
        public function getUrlForJS($key): string
        {
            return (string)$this->getConfigValue($key) ?: "";
        }
 
        public function getUrlForCSS($key): string
        {
            return (string)$this->getConfigValue($key) ?: "";
        }
    }

Example usage

See code below for inserting the script, or here to view it in context .

 
<script src="<?= $hostedMounter->getUrlForJS('IN_APP_EXPANSION_JS_URL'); ?>"></script>

Then, add the environment variable somewhere, e.g. in a .env file:

 
IN_APP_EXPANSION_JS_URL=https://growth-bucket.staging.app-us1.com/hosted-mounter.js

And finally, here is example of the markup in Hosted .

Now you can use Camp’s React components even in legacy PHP parts of the application! There may be other things that could be done here to clean up or streamline this approach (e.g., add a mounter in platform-monorepo?), so please let us know if you have recommendations or concerns. As always, contributions are always welcome!

Last updated on