Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* @flow strict */
import PropTypes from 'prop-types';
import React from 'react';
import ClearIcon from 'bpk-component-icon/sm/close-circle';
import { withButtonAlignment } from 'bpk-component-icon';
import { cssModules } from 'bpk-react-utils';
import STYLES from './BpkClearButton.scss';
const getClassName = cssModules(STYLES);
const ClearButtonIcon = withButtonAlignment(ClearIcon);
type Props = {
label: string,
onClick: (SyntheticInputEvent) => mixed,
className: ?string,
};
const BpkClearButton = (props: Props) => {
const classNames = [getClassName('bpk-clear-button')];
const { label, onClick, className, ...rest } = props;
if (className) {
classNames.push(className);
}
return (
* limitations under the License.
*/
import React from 'react';
import BpkButton from 'bpk-component-button';
import BpkSmallDownloadIcon from 'bpk-component-icon/sm/download';
import { withButtonAlignment } from 'bpk-component-icon';
import InfoPageBuilder from '../../components/InfoPageBuilder';
import Paragraph from '../../components/Paragraph';
import CopywritingHeroImage from '../../static/copywriting_hero.jpg';
// eslint-disable-next-line import/no-webpack-loader-syntax
const toneOfVoiceGuidelines = require('!!file-loader?name=[name].[hash].pdf!./../../static/tone-of-voice-guidelines-october-2018.pdf');
const AlignedBpkSmallDownloadIcon = withButtonAlignment(BpkSmallDownloadIcon);
const sections = [
{
id: 'download',
title: 'Download the guidelines',
expanded: true,
content: (
Download
),
},
];
const getEnabledIcon = (large) => {
const AlignedIcon = large ?
withLargeButtonAlignment(withRtlSupport(ArrowIconLg)) :
withButtonAlignment(withRtlSupport(ArrowIconSm));
return ;
};
* 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 { cssModules } from 'bpk-react-utils';
import { withRtlSupport, withButtonAlignment } from 'bpk-component-icon';
import ArrowRightIcon from 'bpk-component-icon/sm/arrow-right';
import STYLES from './BpkTile.scss';
const getClassName = cssModules(STYLES);
const RtlArrowRightIcon = withRtlSupport(withButtonAlignment(ArrowRightIcon));
const BpkTile = props => {
const {
dark,
backgroundColor,
imageSource,
className,
cta,
heading,
...rest
} = props;
const classNames = [getClassName('bpk-tile')];
const scrimClassNames = [getClassName('bpk-tile__scrim')];
const headingClassNames = [getClassName('bpk-tile__heading')];
const ctaIconClassNames = [getClassName('bpk-tile__cta-icon')];
const getEnabledIcon = large => {
const AlignedIcon = large
? withLargeButtonAlignment(withRtlSupport(ArrowIconLg))
: withButtonAlignment(withRtlSupport(ArrowIconSm));
return ;
};
* 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 { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';
import STYLES from './BpkPaginationNudger.scss';
const getClassName = cssModules(STYLES);
const AlignedArrowLeftIcon = withButtonAlignment(withRtlSupport(ArrowLeftIcon));
const AlignedArrowRightIcon = withButtonAlignment(
withRtlSupport(ArrowRightIcon),
);
const nudgerIcon = forward =>
forward ? (
) : (
);
const BpkPaginationNudger = props => {
const { label, onNudge, forward, disabled } = props;
* limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import MenuIcon from 'bpk-component-icon/sm/menu';
import CloseIcon from 'bpk-component-icon/sm/close';
import { withButtonAlignment } from 'bpk-component-icon';
import { cssModules } from 'bpk-react-utils';
import STYLES from './HamburgerButton.scss';
const getClassName = cssModules(STYLES);
const CloseButtonIcon = withButtonAlignment(CloseIcon);
const MenuButtonIcon = withButtonAlignment(MenuIcon);
const HamburgerButton = props => {
const classNames = [getClassName('bpkdocs-hamburger-button')];
const { expanded, onClick, className, ...rest } = props;
if (className) {
classNames.push(className);
}
return (
import { withButtonAlignment } from 'bpk-component-icon';
import MinusIcon from 'bpk-component-icon/sm/minus';
import PlusIcon from 'bpk-component-icon/sm/plus';
import { cssModules } from 'bpk-react-utils';
import {
type CommonProps,
COMMON_PROP_TYPES,
COMMON_DEFAULT_PROPS,
} from './common-types';
import STYLES from './BpkNudger.scss';
const getClassName = cssModules(STYLES);
const AlignedMinusIcon = withButtonAlignment(MinusIcon);
const AlignedPlusIcon = withButtonAlignment(PlusIcon);
type Props = {
...$Exact>,
inputClassName: ?string,
formatValue: T => string,
incrementValue: T => T,
decrementValue: T => T,
compareValues: (T, T) => number,
};
const BpkConfigurableNudger = (props: Props) => {
const {
id,
min,
max,
value,
import IntroBlurb from '../../components/IntroBlurb';
import Code from '../../components/Code';
import CodeBlock from '../../components/CodeBlock';
import * as ROUTES from '../../constants/routes';
const AlignedBaseArrow = withAlignment(
LongArrowRightIconSm,
lineHeightBase,
iconSizeSm,
);
const AlignedLargeArrow = withAlignment(
LongArrowRightIcon,
lineHeightLg,
iconSizeLg,
);
const AlignedButtonArrow = withButtonAlignment(LongArrowRightIconSm);
const AlignedLargeButtonArrow = withLargeButtonAlignment(LongArrowRightIcon);
const AlignedSpan = withAlignment('span', iconSizeLg, lineHeightBase);
const AlignedSpanSmall = withAlignment('span', iconSizeLg, lineHeightSm);
const components = [
{
id: 'withinBase',
title: 'Icon alignment within text with textStyle "base"',
blurb: [
Aligning an icon within text with textStyle "base" can be done
using
<code>withAlignment</code>, providing suitable spacings (see the{' '}
Typesetting section).
,
Using the HOC is done as follows:,
) => {
const classMap: { [AlertTypeValue]: string } = {
[ALERT_TYPES.SUCCESS]: getClassName('bpk-banner-alert__success-icon'),
[ALERT_TYPES.WARN]: getClassName('bpk-banner-alert__warn-icon'),
[ALERT_TYPES.ERROR]: getClassName('bpk-banner-alert__error-icon'),
[ALERT_TYPES.NEUTRAL]: getClassName('bpk-banner-alert__neutral-icon'),
};
const className = classMap[type];
const componentMap: { [AlertTypeValue]: Node } = {
[ALERT_TYPES.SUCCESS]: TickCircleIcon,
[ALERT_TYPES.WARN]: InfoCircleIcon,
[ALERT_TYPES.ERROR]: InfoCircleIcon,
[ALERT_TYPES.NEUTRAL]: InfoCircleIcon,
};
const Icon = CustomIcon || componentMap[type];
const AlignedIcon = withButtonAlignment(Icon);
return ;
};