How to use @dcos/ui-kit - 10 common examples

getFixedMessagePart() {
    const { message } = this.props;

    // If not visible, just exit
    if (!message) {
      return null;
    }

    // Render the fixed part of the message
    return (
      <div>
        <span>
          
        </span>
        {message}
      </div>
    );
  }

const params = getLogParameters(task, {
      // This will be added to the name
      postfix: selectedStream && selectedStream.toLowerCase(),
      filter: { STREAM: selectedStream }
    });

    // This is a hacky way of interacting with the API to be able to download
    // logs with a POST request
    return (
      <a href="{getUrl(task.slave_id," disabled="{!task}">
        
      </a>
    );
  }

const getStatusIcon = () => {
      // inactive
      if (!activeState || transitional) {
        return <span>;
      }

      // success
      if (healthy &amp;&amp; running) {
        return (
          
        );
      }

      // running
      if (unknown &amp;&amp; running) {
        return <span>;
      }

      // danger
      if (dangerState || unhealthy || failing) {
        return (
          </span></span>

size={iconSizeXxs}
            color={success}
          />
        );
      }

      // running
      if (unknown && running) {
        return <span>;
      }

      // danger
      if (dangerState || unhealthy || failing) {
        return (
          
        );
      }
    };
</span>

/>
    );
  } else {
    breadcrumbs = ;
  }

  const dontScroll = dontScrollRoutes.some(regex =>
    regex.test(location.pathname)
  );

  return (
    
      
      
        {props.children}
      
    
  );
};

const errorItems = errorMessages.map((message, index) => {
      return (
        <li>
          {message}
        </li>
      );
    });
    return (
      <div>
        
              <div>
                
              </div>
              <div>
                <ul>{errorItems}</ul>
              </div>
            </div>
          }
        /&gt;
      
    );
  }

export const getStatusIcon = (status: ServicePlanStatus): React.ReactNode => {
  switch (status) {
    case "ERROR":
      return (
        
      );
    case "WAITING":
      return (
        
      );
    case "PENDING":
      return (
        
      );
    case "PREPARED":
      return ;
    case "STARTING":
      return ;
    case "STARTED":
      return ;
    case "IN_PROGRESS":
      return ;
    case "COMPLETE":
      return (

render() {
    return (
      <div>
        
              <div>
                <div>
                  
                </div>
                <div>{this.getMessage()}</div>
              </div>

              {this.getDetails() &amp;&amp; (
                <div>
                  <ul>{this.getDetails()}</ul>
                </div>
              )}
            </div>
          }
        /&gt;

headline: string;
    isActive: boolean;
  }) => {
    if (!isActive) {
      return (
        
          
            <span title="{headline}">
              Connection to node lost}
              &gt;
                <span>
                  
                </span>
                {headline}
              
            </span>
          
        
      );
    }

    return (
      
        
          <span title="{headline}">{headline}</span>

data: sliceData.data,
        description: [
          <span>
            {sliceData.usedPercentage}%
          </span>,
          <span>
            {resourceLabel}
          </span>
        ]
      };
    }
    return {
      data: this.getInactiveSliceData(),
      description: (
        <span>
          
        </span>
      )
    };
  },