View webpack-config.js
const webpack = require('webpack');
const path = require('path');
const Autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const I18nAggregatorPlugin = require('terra-i18n-plugin');
const i18nSupportedLocales = require('terra-i18n/lib/i18nSupportedLocales');
const CustomProperties = require('postcss-custom-properties');
View toggler.jsx
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import AnimateHeight from 'react-animate-height';
import 'terra-base/lib/baseStyles';
import './Toggler.scss';
const propTypes = {
* Content in the body of the toggler component that will be expanded or collapsed
 // get filepath for every svg
 /* eslint-disable import/no-extraneous-dependencies */
-var svgs = _fs2.default.readdirSync(_config.TerraIcon.svgDir
+var svgs = _fs2.default.readdirSync(_config.TerraIcon.svgDir)
 // Only load svg files
-).filter(function (f) {
+.filter(function (f) {
     return _path2.default.extname(f) === '.svg';

Component Features

  • Cross-Browser Support
  • LTR/RTL Support
  • Responsive Support
  • Mobile Support
  • Adherence to Design Standard
  • Internationalization (I18n) Support
  • Translation Support

Please fill out the below template as best you can.

Description of Issue

Describe the issue as best you can. We love screenshots!

###System Configuration

Component Version

Browser and Version



When rendering <Button /> and <Button primary/> components, there are CSS properties that are duplicated across instances. Looking at the rendered-styles.css file, you can see the duplication. Looking at the markup, it looks like there are a couple ways styles could be mapped to avoid duplicated CSS rules, however I'm not sure what implementation considerations/constraints this would involve.

With the rendered markup styled-components creates in the rendered-html example, I assume the rendered CSS most developers who frequently write CSS would expect is something like:

.sc-bdVaJa {
  font-size: 1em;
View package.json
"scripts": {
"compile": "node ../../scripts/compile.js",
"lint": "node ../../scripts/lint.js",
"pretest": "node ../../scripts/pretest.js",
"release:major": "npm test && npm run compile && npm version major -m \"Released version %s\" && npm publish && git push",
"release:minor": "npm test && npm run compile && npm version minor -m \"Released version %s\" && npm publish && git push",
"release:patch": "npm test && npm run compile && npm version patch -m \"Released version %s\" && npm publish && git push",
"test": "node ../../scripts/test.js"
View array-filter-and-reject-functionality.js
const list = ['apple', 'orange', 'bananna'];
function isThemableIcon(value) {
return ['orange', 'bananna'].indexOf(value) >= 0;
const themableIcons = list.filter(isThemableIcon);
const staticIcons = list.filter(x => !isThemableIcon(x));
View toggle.js
var nav = document.querySelector('.nav__toggle');
var toggleState = function (elem, one, two) {
var elem = document.querySelector(elem);
elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
nav.onclick = function (e) {
toggleState('.nav ul', 'closed', 'open');