How to use the bpk-react-utils.cssModules function in bpk-react-utils

import STYLES from './colors-page.scss';

import Heading from '../../components/Heading';
import ColorSwatch from '../../components/ColorSwatch';
import DocsPageBuilder from '../../components/DocsPageBuilder';

/* eslint-disable import/no-webpack-loader-syntax */
const coreRgbAse = require('!!file-loader?name=[name].[hash].ase!./../../static/core_rgb.ase');

const coreRgbClr = require('!!file-loader?name=[name].[hash].clr!./../../static/core_rgb.clr');

const extendedRgbAse = require('!!file-loader?name=[name].[hash].ase!./../../static/extended_rgb.ase');

const extendedRgbClr = require('!!file-loader?name=[name].[hash].clr!./../../static/extended_rgb.clr');

const getClassName = cssModules(STYLES);
const containerClassName = getClassName(
  'bpkdocs-colors-page__swatch-container',
);

const components = [
  {
    id: 'primary',
    title: 'Primary',
    blurb: [
      <div>
        
        </div>

*   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* @flow strict */

import React, { type AbstractComponent } from 'react';
import { cssModules, wrapDisplayName } from 'bpk-react-utils';

import STYLES from './withDescription.scss';

const getClassName = cssModules(STYLES);

// TODO: Fix flow config. This should receive the component config as a parametized type
export default function withDescription(
  Component: AbstractComponent,
  description: string,
): AbstractComponent {
  const WithDescription = props => (
    <span>
      
      <span>
        {description}
      </span>
    </span>
  );

  WithDescription.displayName = wrapDisplayName(Component, 'withDescription');

*/

/* @flow strict */

import PropTypes from 'prop-types';
import React, { Component, type Node } from 'react';
import BpkText from 'bpk-component-text';
import BpkButton from 'bpk-component-button';
import { storiesOf } from '@storybook/react';
import { cssModules, withDefaultProps } from 'bpk-react-utils';

import STYLES from './stories.scss';

import BpkDialog from './index';

const getClassName = cssModules(STYLES);

const Paragraph = withDefaultProps(BpkText, {
  textStyle: 'base',
  tagName: 'p',
  className: getClassName('bpk-dialog-paragraph'),
});

type Props = {
  children: Node,
  dismissible: boolean,
};

type State = {
  isOpen: boolean,
};

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import { cssModules } from 'bpk-react-utils';
import { spacingXs, lineHeightSm } from 'bpk-tokens/tokens/base.es6';

import { rtlConditionalValue } from './RTLtransforms';
import { ORIENTATION_X, ORIENTATION_Y } from './orientation';
import { identity, center, remToPx } from './utils';
import STYLES from './BpkChartAxis.scss';

const getClassName = cssModules(STYLES);

const spacing = remToPx(spacingXs);
const lineHeight = remToPx(lineHeightSm);

const getAxisConfig = ({ orientation, margin, height, width, scale }) => {
  const position = (scale.bandwidth ? center : identity)(scale.copy());

  if (orientation === ORIENTATION_X) {
    return {
      containerProps: {
        textAnchor: 'middle',
        transform: `translate(0, ${height - margin.bottom - margin.top})`,
      },
      textProps: {
        y: lineHeight,
        x: 0,

*
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import { cssModules } from 'bpk-react-utils';

import STYLES from './BpkRouterLink.scss';

const getClassName = cssModules(STYLES);

const BpkRouterLink = props => {
  const classNames = [getClassName('bpk-router-link')];
  const { children, to, className, ...rest } = props;

  if (className) {
    classNames.push(className);
  }

  return (

*
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import PropTypes from 'prop-types';
import React from 'react';
import { cssModules } from 'bpk-react-utils';

import themeAttributes from './themeAttributes';
import STYLES from './BpkLink.scss';

const getClassName = cssModules(STYLES);

const BpkButtonLink = props => {
  const { children, className, onClick, white, alternate, ...rest } = props;
  const classNames = [getClassName('bpk-link')];

  if (white || alternate) {
    classNames.push(getClassName('bpk-link--alternate'));
  }
  if (className) {
    classNames.push(className);
  }

  return (

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import BpkLink from 'bpk-component-link';
import { BpkList, BpkListItem } from 'bpk-component-list';
import { cssModules } from 'bpk-react-utils';
import DocsPageBuilder from './../../components/DocsPageBuilder';
import Heading from './../../components/Heading';
import Paragraph from './../../components/Paragraph';

import STYLES from './statefulness-page.scss';

const getClassName = cssModules(STYLES);
const ScottHurffLink = 'http://scotthurff.com/dppl/';

const StatefulnessPage = () => 
    Statefulness refers to a component's ability to change its appearance depending on the context
    or interaction behaviour.
    ,
    The 5 view states,
    
      Every screen users interact with has different states. Leaning on the research and
      work by Scott Hurff we can assume that in most cases
      there are five.
    ,

* limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import BpkBreakpoint, { BREAKPOINTS } from 'bpk-component-breakpoint';
import { cssModules } from 'bpk-react-utils';
import breakpointReadme from 'bpk-component-breakpoint/README.md';

import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';

import STYLES from './breakpoints-page.scss';

const getClassName = cssModules(STYLES);

const MediaQueryStatus = props => {
  const className = getClassName(
    props.isActive
      ? 'bpk-breakpoints-demo--active'
      : 'bpk-breakpoints-demo--inactive',
  );

  return <div>{props.children}</div>;
};

MediaQueryStatus.propTypes = {
  isActive: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
};

* Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import PropTypes from 'prop-types';
import React from 'react';
import { cssModules } from 'bpk-react-utils';
import SmSpinner from 'bpk-svgs/dist/js/spinners/sm';

import STYLES from './BpkSpinner.scss';
import SPINNER_TYPES from './spinnerTypes';

const getClassName = cssModules(STYLES);

const BpkSpinner = props => {
  const { type, className, alignToButton, ...rest } = props;

  const classNames = ['bpk-spinner', `bpk-spinner--${type}`].map(getClassName);

  if (alignToButton) {
    classNames.push(getClassName('bpk-spinner--align-to-button'));
  }
  if (className) {
    classNames.push(className);
  }

  return ;
};

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import PropTypes from 'prop-types';
import React from 'react';
import AnimateHeight from 'bpk-animate-height';
import { cssModules } from 'bpk-react-utils';
import BpkSmallExclamationIcon from 'bpk-component-icon/sm/exclamation-circle';
import { withAlignment } from 'bpk-component-icon';
import { lineHeightBase, iconSizeSm } from 'bpk-tokens/tokens/base.es6';

import STYLES from './BpkFormValidation.scss';

const getClassName = cssModules(STYLES);
const AlignedExclamationIcon = withAlignment(
  BpkSmallExclamationIcon,
  lineHeightBase,
  iconSizeSm,
);

const BpkFormValidation = props => {
  const {
    children,
    expanded,
    isCheckbox,
    className,
    containerProps,
    ...rest
  } = props;