How to use bpk-react-utils - 10 common examples

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,
};

('ontouchstart' in window ||
        // eslint-disable-next-line no-undef
        (window.DocumentTouch && document instanceof DocumentTouch))
    ),
    onOpen: null,
    // Input props
    className: null,
    onClick: null,
    onFocus: null,
    onBlur: null,
    onTouchEnd: null,
    onKeyDown: null,
    onKeyUp: null,
  };

  WithOpenEvents.displayName = wrapDisplayName(
    InputComponent,
    'withOpenEvents',
  );

  return WithOpenEvents;
};

componentWillReceiveProps(nextProps) {
    const hasMonthChanged = !isSameMonth(this.props.month, nextProps.month);

    if (hasMonthChanged) {
      const reverse = isRTL();

      if (differenceInCalendarMonths(nextProps.month, this.props.month) === 1) {
        // Transition to next month
        this.setState({
          transitionValue: reverse
            ? transitionValues.previous
            : transitionValues.next,
          isTransitioning: true,
        });
        return;
      }

      if (
        differenceInCalendarMonths(nextProps.month, this.props.month) === -1
      ) {
        // Transition to previous month

const lastIndex = (views || []).length - 1;

    return (
      <div>
        
          {Children.map(views, (view, idx) =&gt; (
            
              </div>

* 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.
    ,