wix-style-react/dist/es/stories/Proportion/index.story.js

wix-style-react

import React from 'react';
import { storySettings } from './storySettings';
import CodeExample from 'wix-storybook-utils/CodeExample';
import Proportion from '../../src/Proportion';
import ExampleComponentCode from '!raw-loader!./ExampleComponent';
import ExampleComponent from './ExampleComponent';

var IMG_URL = 'https://upload.wikimedia.org/wikipedia/commons/b/b2/Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project.jpg';
var CUSTOM_RATIO = 3142 / 3820; // taken from image ^

var exampleAspectRatio = [{
  value: CUSTOM_RATIO,
  label: 'custom (3142 / 3820 = image original ratio)'
}, { value: Proportion.PREDEFINED_RATIOS.square, label: 'square' }, { value: Proportion.PREDEFINED_RATIOS.portrait, label: 'portrait' }, { value: Proportion.PREDEFINED_RATIOS.cinema, label: 'cinema' }, { value: Proportion.PREDEFINED_RATIOS.landscape, label: 'landscape' }];

export default {
  category: storySettings.kind,
  storyName: storySettings.storyName,

  component: Proportion,
  componentPath: '../../src/Proportion/Proportion.js',

  componentProps: {
    dataHook: storySettings.dataHook,
    children: React.createElement('img', {
      src: IMG_URL,
      style: { verticalAlign: 'middle' },
      width: '100%',
      height: '100%'
    })
  },

  exampleProps: {
    aspectRatio: exampleAspectRatio
  },

  examples: React.createElement(
    'div',
    { style: { maxWidth: 627, paddingBottom: 60 } },
    React.createElement(
      CodeExample,
      { title: 'Proportion demo', code: ExampleComponentCode },
      React.createElement(ExampleComponent, null)
    )
  )
};