Environment Indicator

The Environment Indicator component provides a visual way to display the current environment (e.g., DEV, PROD, TEST) in your application. It can be configured to show different colors, icons, and labels based on the environment level.

The rapid-environment-indicator component displays an environment badge with customizable styling and behavior. It supports:

• Environment-specific colors and icons
• Configurable labels and sizes
• Integration with dependency injection for global configuration
• Automatic environment detection from build variables

Example

This simple example shows an environment indicator with custom styling and icon.

React

Declaration

<rapid-environment-indicator></rapid-environment-indicator>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-environment-indicator
      level="dev"
      label="DEVELOPMENT"
      background-color="#ff6b35"
      text-color="#ffffff"
      show-icon="true"
      icon="code"
      size="lg"
    ></rapid-environment-indicator>
  `,
})
export class MyElement extends GenesisElement {
}

Genesis

Declaration

<EnvironmentIndicator></EnvironmentIndicator>

Usage

import { EnvironmentIndicator } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  return (
    <EnvironmentIndicator
      level="dev"
      label="DEVELOPMENT"
      backgroundColor="#ff6b35"
      textColor="#ffffff"
      showIcon="true"
      icon="code"
      size="lg"
    ></EnvironmentIndicator>
  );
}

Angular

Declaration

  <rapid-environment-indicator></rapid-environment-indicator>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
        <rapid-environment-indicator
          level="dev"
          label="DEVELOPMENT"
          background-color="#ff6b35"
          text-color="#ffffff"
          show-icon="true"
          icon="code"
          size="lg"
        ></rapid-environment-indicator>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

Environment Configuration Interface

interface EnvironmentConfig {
  level: string;
  showIcon?: boolean;
  icon?: string;
  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  backgroundColor?: string;
  textColor?: string;
  size?: 'sm' | 'lg';
  label?: string;
}

Global Configuration

You can configure environment indicators globally using dependency injection. This allows you to set up environment configurations once and use them throughout your application.

Setting Up Global Configuration

import { configureEnvironmentIndicator } from '@genesislcap/foundation-ui';

// Configure environment indicator with custom configs
await configureEnvironmentIndicator({
  currentLevel: 'dev',
  configs: [
    {
      level: 'dev',
      label: 'DEVELOPMENT',
      backgroundColor: '#ff6b35',
      textColor: '#ffffff',
      showIcon: true,
      icon: 'code',
      size: 'sm'
    },
    {
      level: 'test',
      label: 'TESTING',
      backgroundColor: '#ffc107',
      textColor: '#000000',
      showIcon: true,
      icon: 'flask',
      size: 'sm'
    },
    {
      level: 'prod',
      label: 'PRODUCTION',
      backgroundColor: '#28a745',
      textColor: '#ffffff',
      showIcon: true,
      icon: 'check-circle',
      size: 'sm'
    }
  ]
});

Default Configurations

The component comes with default configurations for common environments:

const DEFAULT_ENVIRONMENT_CONFIGS = [
  {
    level: 'default',
    showIcon: false,
    iconSize: 'sm',
    backgroundColor: '#2222ff',
    textColor: '#ffffff',
    label: 'DEFAULT'
  },
  {
    level: 'dev',
    showIcon: false,
    icon: 'code',
    backgroundColor: '#ff6b35',
    label: 'DEV'
  },
  {
    level: 'prod',
    showIcon: false,
    icon: 'check-circle',
    backgroundColor: '#28a745',
    label: 'PROD'
  }
];

Environment Level Detection

The component determines the current environment level using the following priority order:

1. Attribute level: If the level attribute is set on the component
2. DI Configuration: If configured via dependency injection
3. Build Variable: If ENVIRONMENT_LEVEL is set in your build configuration
4. Default: Falls back to 'default' if use-default-config is true

Using Build Variables

You can set the environment level using build variables in your .env file:

GENX_ENVIRONMENT_LEVEL="dev"

And declare it in your globals.d.ts:

declare global {
  const ENVIRONMENT_LEVEL: string;
}

export {};

Integration with Other Components

The environment indicator can be integrated with the Foundation Header and Foundation Login components to provide consistent environment indication across your application.

Header Integration

<foundation-header show-environment-indicator="true">
  <!-- Header content -->
</foundation-header>

Demo:

Login Integration

<foundation-auth show-environment-indicator="true">
  <!-- Login content -->
</foundation-auth>

Demo:

API

Attributes

This table shows attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

Name	Type	Description	Example
level	string	The environment level to display.	<rapid-environment-indicator level="dev">
label	string	The label to display.	<rapid-environment-indicator label="DEVELOPMENT">
show-icon	boolean	Whether to show an icon next to the environment text. Default: false	<rapid-environment-indicator show-icon>
size	'sm' | 'lg'	The size of the indicator. Default: 'sm'	<rapid-environment-indicator size="lg">
background-color	string	The background color of the indicator.	<rapid-environment-indicator background-color="#ff6b35">
text-color	string	The text color of the indicator. Default: '#ffffff'	<rapid-environment-indicator text-color="#ffffff">
icon	string	The icon to display. Default: 'check-circle'	<rapid-environment-indicator icon="code">
icon-size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	The size of the icon. Default: 'sm'	<rapid-environment-indicator icon-size="md">
use-default-config	boolean	Whether to use the default config. Default: false	<rapid-environment-indicator use-default-config>

Properties

There are no properties. This component is controlled by attributes.

Slots

Name	Description
Default	The default slot for environment indicator content.

Parts

Name	Description
environment-indicator	The element representing the environment indicator, which wraps the default slot.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.