1. Advisor
  2. bpk-component-icon
  3. bpk-component-icon code examples
View all bpk-component-icon analysis

How to use bpk-component-icon - 10 common examples

To help you get started, we’ve selected a few bpk-component-icon examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Skyscanner / backpack / packages / bpk-docs / src / pages / MapPage / MapPage.js View on Github external
import { withRtlSupport } from 'bpk-component-icon';
import mapReadme from 'bpk-component-map/README.md';

import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';

import STYLES from './MapPage.scss';

const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);

const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;

const getClassName = cssModules(STYLES);

// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
  latitude: 35.661777,
  longitude: 139.704051,
};

class StatefulBpkMapMarkers extends Component<{}, { selected: number }> {
  constructor() {
    super();
github Skyscanner / backpack / packages / bpk-docs / src / pages / MapPage / MapPage.js View on Github external
import BusIconSm from 'bpk-component-icon/sm/bus';
import FoodIconSm from 'bpk-component-icon/sm/food';
import LeisureIconSm from 'bpk-component-icon/sm/leisure';
import { withRtlSupport } from 'bpk-component-icon';
import mapReadme from 'bpk-component-map/README.md';

import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';

import STYLES from './MapPage.scss';

const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);

const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;

const getClassName = cssModules(STYLES);

// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
  latitude: 35.661777,
  longitude: 139.704051,
};
github Skyscanner / backpack / packages / bpk-docs / src / pages / MapPage / MapPage.js View on Github external
import LeisureIconSm from 'bpk-component-icon/sm/leisure';
import { withRtlSupport } from 'bpk-component-icon';
import mapReadme from 'bpk-component-map/README.md';

import iosScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/ios/default.png';
import androidScreenshot from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/screenshots/android/default.png';
import nativeMapReadme from '../../../../../backpack-react-native/packages/react-native-bpk-component-map/README.md';
import DocsPageBuilder from '../../components/DocsPageBuilder';
import DocsPageWrapper from '../../components/DocsPageWrapper';
import IntroBlurb from '../../components/IntroBlurb';

import STYLES from './MapPage.scss';

const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconSm = withRtlSupport(BusIconSm);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
const AlignedLeisureIconLg = withRtlSupport(LeisureIconSm);

const BpkMapWithScript = withGoogleMapsScript(BpkMap);
const API_KEY = process.env.GOOGLE_MAPS_API_KEY || '';
const MAP_URL = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${API_KEY}&libraries=geometry,drawing,places`;

const getClassName = cssModules(STYLES);

// Shibuya crossing, Tokyo.
const COORDINATES: BpkMapLatLong = {
  latitude: 35.661777,
  longitude: 139.704051,
};

class StatefulBpkMapMarkers extends Component<{}, { selected: number }> {
  constructor() {
github Skyscanner / backpack / packages / bpk-component-input / src / BpkClearButton.js View on Github external
* 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 (
github Skyscanner / backpack / packages / bpk-docs / src / pages / ToneOfVoicePage / ToneOfVoicePage.js View on Github external
* 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 
        
      
    ),
  },
];
github Skyscanner / backpack / packages / bpk-docs / src / layouts / SideNavLayout / SectionsList.js View on Github external
icon: ComponentsIcon,
  },
  GITHUB: {
    title: 'GitHub',
    link: 'https://github.com/Skyscanner/backpack',
    external: true,
  },
};

const BpkAlignedArrowDown = withAlignment(
  BpkLargeArrowDown,
  lineHeightLg,
  iconSizeLg,
);

const BpkAlignedArrowUp = withAlignment(
  BpkLargeArrowUp,
  lineHeightLg,
  iconSizeLg,
);

const omitActiveSection = activeSection => omit(sections, activeSection);

type SectionListItemProps = {
  link: string,
  external: boolean,
  navigateOnClick: boolean,
  title: string,
  onClick: () => mixed,
};

const SectionListItem = (props: SectionListItemProps) => {
github Skyscanner / backpack / packages / bpk-docs / src / layouts / SideNavLayout / SectionsList.js View on Github external
link: ROUTES.STYLE_GUIDE,
    icon: StyleGuideIcon,
  },
  COMPONENTS: {
    title: 'Components',
    link: ROUTES.COMPONENTS,
    icon: ComponentsIcon,
  },
  GITHUB: {
    title: 'GitHub',
    link: 'https://github.com/Skyscanner/backpack',
    external: true,
  },
};

const BpkAlignedArrowDown = withAlignment(
  BpkLargeArrowDown,
  lineHeightLg,
  iconSizeLg,
);

const BpkAlignedArrowUp = withAlignment(
  BpkLargeArrowUp,
  lineHeightLg,
  iconSizeLg,
);

const omitActiveSection = activeSection => omit(sections, activeSection);

type SectionListItemProps = {
  link: string,
  external: boolean,
github Skyscanner / backpack / packages / bpk-component-map / stories.js View on Github external
import { withRtlSupport } from 'bpk-component-icon';
import LandmarkIconLg from 'bpk-component-icon/lg/landmark';
import BusIconLg from 'bpk-component-icon/lg/bus';
import FoodIconSm from 'bpk-component-icon/sm/food';

import BpkMap, {
  BpkOverlayView,
  BpkMapMarker,
  MARKER_TYPES,
  withGoogleMapsScript,
} from './index';

const BpkMapWithLoading = withGoogleMapsScript(BpkMap);

const AlignedLandmarkIconLg = withRtlSupport(LandmarkIconLg);
const AlignedBusIconLg = withRtlSupport(BusIconLg);
const AlignedFoodIconSm = withRtlSupport(FoodIconSm);

const StoryMap = props => {
  const { children, language, ...rest } = props;
  return (
    <div style="{{">
      
        {children}
      
    </div>
  );
};
github Skyscanner / backpack / packages / bpk-component-loading-button / src / BpkLoadingButton.js View on Github external
const getEnabledIcon = (large) =&gt; {
  const AlignedIcon = large ?
    withLargeButtonAlignment(withRtlSupport(ArrowIconLg)) :
    withButtonAlignment(withRtlSupport(ArrowIconSm));
  return ;
};
github Skyscanner / backpack / packages / bpk-component-loading-button / src / BpkLoadingButton.js View on Github external
const getEnabledIcon = large =&gt; {
  const AlignedIcon = large
    ? withLargeButtonAlignment(withRtlSupport(ArrowIconLg))
    : withButtonAlignment(withRtlSupport(ArrowIconSm));
  return ;
};

bpk-component-icon

Backpack icon components.

GitHub
Apache-2.0
Latest version published 2 years ago

Package Health Score

73 / 100
Full package analysis

Popular bpk-component-icon functions

Similar packages