Design System

Utilizing the q2-design-system package is very easy. In your local project, the first thing we will need to do is install the package:

• NPM: npm i q2-design-system
• Yarn: yarn add q2-design-system

In the root of your project (e.g., index.js), you'll want to add something like the following:

import setupDesignSystem from "q2-design-system";
setupDesignSystem();

This command does a few things:

1. Registers all the web components with the browser (Optional)
2. Sets up localization for the web components
3. Loads the default Tecton theme (Optional)
4. Loads the Tecton utility styles (Optional)

From here, you can write your HTML, using any of the features provided by the Q2 Design System.

<div class="q2-row">
  <div class="q2-col xs-12 sm-6">
    <q2-input label="First name"></q2-input>
  </div>
  <div class="q2-col xs-12 sm-6">
    <q2-input label="Last name"></q2-input>
  </div>

  <div class="q2-col xs-12">
    <q2-radio-group label="Favorite ice cream" tile-alignment="center">
      <q2-radio value="vanilla" label="Vanilla" name="ice-cream">
      </q2-radio>
      <q2-radio value="strawberry" label="Strawberry" name="ice-cream">
      </q2-radio>
      <q2-radio value="chocolate" label="Chocolate" name="ice-cream">
      </q2-radio>
    </q2-radio-group>
  </div>

  <div class="q2-col xs-12">
    <q2-btn intent="workflow-primary">
      Submit
    </q2-btn>
  </div>
</div>

If you are building your application or feature using React, we recommend that you call setupDesignSystem in the same file that you instantiate your React app. The process we recommend makes sure the library is ready to be used before your app renders:

import App from "./App";
import setupDesignSystem from "q2-design-system";

// Once setupDesignSystem is done executing your app will render
setupDesignSystem().then(() => {
  const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
});

Similar to the instructions for React, if you are building your application or feature using Vue, we recommend that you call setupDesignSystem in the same file that you instantiate your app. Doing it this way makes sure the library is ready to be used before your app renders for the first time:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import setupDesignSystem from "q2-design-system";

// Once setupDesignSystem is done executing your app will render
setupDesignSystem().then(() => {
  const app = createApp(App);
  app.use(router);
  app.mount("#app");
});

There is a small handful of options you can pass to the setupDesignSystem function call to give you a little more control over how much of the tooling you add to your application.

interface SetupOptions {
  loadTheme?: boolean;
  loadUtilities?: boolean;
  loadElements?: boolean;
  translations?: Record<string, Record<string, string>>;
}

const setup = async (options: SetupOptions): Promise<SetupOptions> => {
  ...
}

export default setup;

loadTheme

Determines whether the default theme will be injected into your browser. This is identical to the values that you see represented in the Color System and Containers & Spacing pages. It provides you with a good baseline that can be extended further, which can also be used in your other styles but is not required. The components will still look and behave just fine without it.

Defaults to true.

loadUtilities

Determines whether the CSS containing all the utility styles get injected into your browser. This includes all the classes mentioned on the Functional CSS Classes and Grid System pages. These were added as a helpful utility for people who don't like to write CSS, but they can add quite a bit to the page payload. As such, they are also entirely optional.

Defaults to true.

loadElements

Determines whether or not the Tecton elements are registered with the DOM. While this is likely the primary reason you might want to use the Q2 Design System package, we understand you might want to disable it for any number of reasons.

Defaults to true.

translations

Allows you to overwrite or provide new localization strings that might be used in the components or in conjunction with the q2-loc component. To overwrite or provide your own strings, please note that you need to specify the language you are providing the string for and then the key you want to use. See below for an example:

await setup({
    translations: {

        // Specify the language
        'en-US': {
          
            // Overwrite existing strings
            'tecton.element.calendar.invalid': 'This date is no good',

            // Provide new strings
            'myNewString': 'This is new',
        },
    },
});

These can then be used by using the q2-loc component like so:

<q2-loc value="myString"></q2-loc>

Defaults to a list of translation strings necessary for the components.

If you've gotten this far, great! But there's more tooling you can make use of in order to make your development experience even better!

Because it's common for people to build their applications using libraries like React or Vue, Tecton provides wrapper components for those frameworks. To read about installing and using those, follow one of the links below:

• React Component Wrappers
• Vue Component Wrappers