How to use gestalt - 7 common examples

To help you get started, we’ve selected a few gestalt 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 pinterest / gestalt / test / containers / Icon.a11y.js View on Github external
export default function IconA11Y() {
  return (
    <div>
      {Icon.icons.map((iconName, idx) =&gt; (
        
      ))}
    </div>
  );
}
github pinterest / gestalt / test / containers / ExperimentalMasonryExample.js View on Github external
import React from 'react';
import { ExperimentalMasonry as Masonry } from 'gestalt';
import Item from './ExampleGridItem';
import PropTypes from 'prop-types';

const store = Masonry.createMeasurementStore();

const getRandomColor = () =&gt; {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i &lt; 6; i += 1) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

const getRandomNumberGenerator = seed =&gt; {
  let localSeed = seed;
  return () =&gt; {
    localSeed += 1;
    const rnd = Math.sin(localSeed);
    return rnd - Math.floor(rnd);
github pinterest / gestalt / test / containers / MasonryExample.js View on Github external
import React from 'react';
import { Masonry } from 'gestalt';
import PropTypes from 'prop-types';
import Item from './ExampleGridItem.js';

const store = Masonry.createMeasurementStore();

const getRandomColor = () =&gt; {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i &lt; 6; i += 1) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

const getRandomNumberGenerator = seed =&gt; {
  let localSeed = seed;
  return () =&gt; {
    localSeed += 1;
    const rnd = Math.sin(localSeed);
    return rnd - Math.floor(rnd);
github pinterest / gestalt / docs / src / Icon.doc.js View on Github external
name="Example:"
    defaultCode={`

  
    
  
  

`}
  /&gt;
);

card(
  
    {props =&gt; (
      
    )}
  
);

card(
  
    {(props, i) =&gt; (
      
    )}
github pinterest / gestalt / docs / src / Icon.doc.js View on Github external
name: 'accessibilityLabel',
        type: 'string',
        required: true,
        description:
          'String that clients such as VoiceOver will read to describe the element. Always localize the label.',
        href: 'iconWithLabel',
      },
      {
        name: 'color',
        type: `"blue" | "darkGray" | "eggplant" | "gray" | "green" | "lightGray" | "maroon" | "midnight" | "navy" | "olive" | "orange" | "orchid" | "pine" | "purple" | "red" | "watermelon" | "white"`,
        defaultValue: 'gray',
        href: 'sizeColorCombinations',
      },
      {
        name: 'icon',
        type: Icon.icons.map(name => `'${name}'`).join(' | '),
        description: `This allows us to type check for a valid icon name based on the keys from the list of icons shown below.`,
        href: 'iconCombinations',
      },
      {
        name: 'size',
        type: `number | string`,
        description: `Use a number for pixel sizes or a string for percentage based sizes`,
        defaultValue: 16,
        href: 'sizeColorCombinations',
      },
      {
        name: 'inline',
        type: 'boolean',
        defaultValue: false,
      },
      {
github pinterest / gestalt / scripts / boxperf.js View on Github external
.add('Published Box', () => {
    PublishedBox(emptyProps);
  })
  .add('Development Box', () => {
github pinterest / gestalt / scripts / boxperf.js View on Github external
.add('Published Box w/ lots of props', () => {
    PublishedBox(lotsOfProps);
  })
  .add('Development Box w/ lots of props', () => {

gestalt

A set of React UI components which enforce Pinterest's design language

Apache-2.0
Latest version published 2 days ago

Package Health Score

90 / 100
Full package analysis