"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.accessibilityVisibility = exports.visibility = exports.display = exports.responsive = exports.logical = exports.padding = exports.borderColor = exports.borderRadius = exports.borderWidth = exports.border = exports.maxInlineSize = exports.backgroundImage = exports.background = void 0;
const react_1 = __importDefault(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const storybook_utilities_1 = require("../../storybook-utilities");
const Heading_1 = require("../Heading");
const BlockStack_1 = require("../BlockStack");
const TextBlock_1 = require("../TextBlock");
const TextContainer_1 = require("../TextContainer");
const Divider_1 = require("../Divider");
const View_1 = require("./View");
const meta = {
    component: View_1.View,
    title: 'checkout-web-ui/View',
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs()],
};
exports.default = meta;
const defaultProps = {
    border: 'base',
    padding: 'base',
};
exports.background = () => (<View_1.View {...defaultProps} background="surfacePrimary">
    primary
    <View_1.View {...defaultProps} background="surfaceSecondary">
      secondary
      <View_1.View {...defaultProps} background="surfaceTertiary">
        tertiary
        <View_1.View {...defaultProps} background="transparent">
          transparent
        </View_1.View>
      </View_1.View>
    </View_1.View>
  </View_1.View>);
exports.backgroundImage = () => (<BlockStack_1.BlockStack>
    <Heading_1.Heading level={3}>Background image</Heading_1.Heading>
    <View_1.View {...defaultProps} backgroundImage="https://via.placeholder.com/200/eee?text=background" padding="extraLoose"/>
    <Divider_1.Divider />
    <TextContainer_1.TextContainer spacing="none">
      <Heading_1.Heading level={3}>Background repeat</Heading_1.Heading>
    </TextContainer_1.TextContainer>
    <View_1.View {...defaultProps} backgroundImage="https://via.placeholder.com/200/eee?text=background" backgroundRepeat padding="extraLoose"/>
    <Divider_1.Divider />
    <TextContainer_1.TextContainer spacing="none">
      <Heading_1.Heading level={3}>Background position</Heading_1.Heading>
      <TextBlock_1.TextBlock subdued>bottom - center - left - right - top</TextBlock_1.TextBlock>
    </TextContainer_1.TextContainer>
    <View_1.View {...defaultProps} backgroundImage="https://via.placeholder.com/200/eee?text=background" backgroundPosition="bottom" padding="extraLoose"/>
    <View_1.View {...defaultProps} backgroundImage="https://via.placeholder.com/200/eee?text=background" backgroundPosition="center" padding="extraLoose"/>
    <View_1.View {...defaultProps} backgroundImage="https://via.placeholder.com/200/eee?text=background" backgroundPosition="left" padding="extraLoose"/>
    <View_1.View {...defaultProps} backgroundImage="https://via.placeholder.com/200/eee?text=background" backgroundPosition="right" padding="extraLoose"/>
    <View_1.View {...defaultProps} backgroundImage="https://via.placeholder.com/200/eee?text=background" backgroundPosition="top" padding="extraLoose"/>
    <Divider_1.Divider />
    <TextContainer_1.TextContainer spacing="none">
      <Heading_1.Heading level={3}>Background fit</Heading_1.Heading>
      <TextBlock_1.TextBlock subdued>contain - cover</TextBlock_1.TextBlock>
    </TextContainer_1.TextContainer>
    <View_1.View {...defaultProps} backgroundImage="https://via.placeholder.com/200/eee?text=background" backgroundFit="contain" padding="extraLoose"/>
    <View_1.View {...defaultProps} backgroundImage="https://via.placeholder.com/200/eee?text=background" backgroundFit="cover" padding="extraLoose"/>
    <Divider_1.Divider />
    <TextContainer_1.TextContainer spacing="none">
      <Heading_1.Heading level={3}>Responsive background image</Heading_1.Heading>
    </TextContainer_1.TextContainer>
    <View_1.View {...defaultProps} backgroundImage={{
    base: 'https://via.placeholder.com/200/eee?text=base',
    small: 'https://via.placeholder.com/750/eee?text=small',
    medium: 'https://via.placeholder.com/1000/eee?text=medium',
    large: 'https://via.placeholder.com/1200/eee?text=large',
}} padding="extraLoose"/>
  </BlockStack_1.BlockStack>);
exports.maxInlineSize = () => (<View_1.View {...defaultProps} maxInlineSize={0.5}>
    50%
    <View_1.View {...defaultProps} maxInlineSize={200}>
      200px
    </View_1.View>
  </View_1.View>);
exports.border = () => (<View_1.View {...defaultProps} border="base">
    solid
    <View_1.View {...defaultProps} border="dotted">
      dotted
      <View_1.View {...defaultProps} border="none">
        none
      </View_1.View>
    </View_1.View>
  </View_1.View>);
exports.borderWidth = () => (<View_1.View {...defaultProps} borderWidth="base">
    base
    <View_1.View {...defaultProps} borderWidth="medium">
      medium
    </View_1.View>
  </View_1.View>);
exports.borderRadius = () => (<View_1.View {...defaultProps} borderRadius="tight">
    tight
    <View_1.View {...defaultProps} borderRadius="base">
      base
      <View_1.View {...defaultProps} borderRadius="loose">
        loose
        <View_1.View {...defaultProps} borderRadius="fullyRounded">
          fully rounded
          <View_1.View {...defaultProps} borderRadius="none">
            none
          </View_1.View>
        </View_1.View>
      </View_1.View>
    </View_1.View>
  </View_1.View>);
exports.borderColor = () => (<View_1.View {...defaultProps} borderColor="base">
    base
    <View_1.View {...defaultProps} borderColor="emphasized">
      emphasized
    </View_1.View>
  </View_1.View>);
exports.padding = () => (<View_1.View {...defaultProps} padding="extraTight">
    extraTight
    <View_1.View {...defaultProps} padding="tight">
      tight
      <View_1.View {...defaultProps} padding="base">
        base
        <View_1.View {...defaultProps} padding="loose">
          loose
          <View_1.View {...defaultProps} padding="extraLoose">
            extraLoose
            <View_1.View {...defaultProps} padding="none">
              none
            </View_1.View>
          </View_1.View>
        </View_1.View>
      </View_1.View>
    </View_1.View>
  </View_1.View>);
exports.logical = () => (<View_1.View {...defaultProps} padding={['base', 'extraTight']} borderRadius={['base', 'tight']} border={['dotted', 'base']} borderWidth={['base', 'medium']}>
    2 directions
    <View_1.View {...defaultProps} padding={['loose', 'extraLoose', 'tight', 'extraTight']} borderRadius={['tight', 'none', 'base', 'tight']} border={['base', 'dotted', 'none', 'base']} borderWidth={['base', 'medium', 'medium', 'base']}>
      4 directions
    </View_1.View>
  </View_1.View>);
exports.responsive = () => (<View_1.View maxInlineSize={{
    base: 200,
    small: 300,
    medium: 400,
    large: 800,
}} background={{
    base: 'surfacePrimary',
    small: 'surfaceSecondary',
    medium: 'surfaceTertiary',
    large: 'transparent',
}} border={{
    base: 'base',
    small: 'none',
    medium: 'dotted',
    large: 'base',
}} borderWidth={{ medium: 'base', large: 'medium' }} padding={{
    base: 'extraTight',
    small: 'base',
    medium: 'loose',
    large: 'extraLoose',
}}>
    <TextBlock_1.TextBlock>
      Default:{' '}
      <code>extraTight padding / base border / surfacePrimary background</code>
      <br /> Media Small:{' '}
      <code>base padding / no border / surfaceSecondary background</code>
      <br /> Media Medium:{' '}
      <code>
        loose padding / base dotted border / surfaceTertiary background
      </code>
      <br /> Media Large:{' '}
      <code>
        extraLoose padding / medium base border / transparent background
      </code>
    </TextBlock_1.TextBlock>
  </View_1.View>);
exports.display = () => (<>
    <View_1.View {...defaultProps}>
      These <View_1.View display="inline">are</View_1.View>{' '}
      <View_1.View display="inline">inline</View_1.View> views
    </View_1.View>
    <br />
    <View_1.View {...defaultProps}>
      These <View_1.View display="block">are</View_1.View> <View_1.View display="block">block</View_1.View>{' '}
      views
    </View_1.View>
  </>);
exports.visibility = () => (<>
    <TextBlock_1.TextBlock>
      There is a visually hidden View inside the box and its content is
      accessible to screen readers.
    </TextBlock_1.TextBlock>
    <View_1.View {...defaultProps}>
      <View_1.View visibility="hidden">visually hidden content</View_1.View>
    </View_1.View>
  </>);
exports.accessibilityVisibility = () => (<View_1.View {...defaultProps} accessibilityVisibility="hidden">
    This content is not accessible to screen readers
  </View_1.View>);