@wix/design-system/dist/esm/Proportion/docs/index.story.js

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Proportion/docs/index.story.jsx";
import React from 'react';
import { header, tabs, tab, description, title, divider, example, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from './storySettings';
import Proportion from '..';
import * as examples from './examples';
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'
}, {
  value: Proportion.PREDEFINED_RATIOS.none,
  label: 'none'
}];
export default {
  category: storySettings.category,
  storyName: 'Proportion',
  component: Proportion,
  componentPath: '..',
  componentProps: {
    children: /*#__PURE__*/React.createElement("img", {
      src: IMG_URL,
      style: {
        verticalAlign: 'middle'
      },
      width: "100%",
      height: "100%",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 45,
        columnNumber: 7
      }
    })
  },
  exampleProps: {
    aspectRatio: exampleAspectRatio
  },
  sections: [header(), tabs([tab({
    title: 'Description',
    sections: [description('HOC that enforces proportions on child components'), divider(), title('Examples'), example({
      title: 'Simple Usage',
      source: examples.simple
    })]
  })].concat(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};