baseui/tile/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTrailingContentContainer = exports.StyledTileRoot = exports.StyledTileGroupRoot = exports.StyledParagraph = exports.StyledLeadingContentContainer = exports.StyledLabel = exports.StyledHeaderContainer = exports.StyledBodyContainerContent = exports.StyledBodyContainer = void 0;
exports.getContainerAlignment = getContainerAlignment;
exports.getDisabledStyles = getDisabledStyles;
exports.getRootButtonColors = getRootButtonColors;
var _styles = require("../styles");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const StyledTileRoot = exports.StyledTileRoot = (0, _styles.styled)('button', ({
  $theme,
  $tileKind,
  $selected
}) => ({
  borderTopRightRadius: '12px',
  borderBottomRightRadius: '12px',
  borderBottomLeftRadius: '12px',
  borderTopLeftRadius: '12px',
  paddingTop: '16px',
  paddingRight: '16px',
  paddingBottom: '16px',
  paddingLeft: '16px',
  display: 'inline-block',
  minWidth: '163.5px',
  textDecoration: 'none',
  WebkitAppearance: 'none',
  transitionProperty: 'background, box-shadow',
  transitionDuration: `${$theme.animation.timing200}, ${$theme.animation.timing500}`,
  transitionTimingFunction: `${$theme.animation.linearCurve}, ${$theme.animation.easeOutQuinticCurve}`,
  cursor: 'pointer',
  ':disabled': {
    cursor: 'not-allowed',
    ...getDisabledStyles({
      $theme,
      $tileKind
    })
  },
  ...getRootButtonColors({
    $theme,
    $tileKind,
    $selected
  })
}));
StyledTileRoot.displayName = "StyledTileRoot";
const StyledTileGroupRoot = exports.StyledTileGroupRoot = (0, _styles.styled)('div', ({
  $theme
}) => ({
  display: 'flex',
  flexWrap: 'wrap',
  gap: $theme.sizing.scale600
}));
StyledTileGroupRoot.displayName = "StyledTileGroupRoot";
const StyledHeaderContainer = exports.StyledHeaderContainer = (0, _styles.styled)('div', ({
  $leadingContent,
  $trailingContent,
  $alignment
}) => ({
  display: 'flex',
  ...getContainerAlignment({
    $leadingContent,
    $trailingContent,
    $alignment
  }),
  alignItems: 'center',
  marginBottom: '16px'
}));
StyledHeaderContainer.displayName = "StyledHeaderContainer";
const StyledLeadingContentContainer = exports.StyledLeadingContentContainer = (0, _styles.styled)('div', ({
  $theme,
  $disabled
}) => ({
  marginRight: $theme.sizing.scale300,
  color: $disabled ? $theme.colors.contentStateDisabled : $theme.colors.contentPrimary,
  ':last-child': {
    marginRight: '0px'
  }
}));
StyledLeadingContentContainer.displayName = "StyledLeadingContentContainer";
const StyledTrailingContentContainer = exports.StyledTrailingContentContainer = (0, _styles.styled)('div', ({
  $theme,
  $disabled
}) => ({
  color: $disabled ? $theme.colors.contentStateDisabled : $theme.colors.contentPrimary
}));
StyledTrailingContentContainer.displayName = "StyledTrailingContentContainer";
const StyledBodyContainer = exports.StyledBodyContainer = (0, _styles.styled)('div', ({
  $alignment
}) => ({
  width: '100%',
  display: 'flex',
  ...getContainerAlignment({
    $alignment
  })
}));
StyledBodyContainer.displayName = "StyledBodyContainer";
const StyledBodyContainerContent = exports.StyledBodyContainerContent = (0, _styles.styled)('div', () => ({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'start'
}));
StyledBodyContainerContent.displayName = "StyledBodyContainerContent";
const StyledLabel = exports.StyledLabel = (0, _styles.styled)('p', ({
  $theme,
  $disabled
}) => ({
  ...$theme.typography.LabelMedium,
  color: $disabled ? $theme.colors.contentStateDisabled : $theme.colors.contentPrimary,
  marginTop: 0,
  marginBottom: 0
}));
StyledLabel.displayName = "StyledLabel";
const StyledParagraph = exports.StyledParagraph = (0, _styles.styled)('p', ({
  $theme,
  $disabled
}) => ({
  ...$theme.typography.ParagraphSmall,
  color: $disabled ? $theme.colors.contentStateDisabled : $theme.colors.contentPrimary,
  marginTop: '4px',
  marginBottom: 0
}));
StyledParagraph.displayName = "StyledParagraph";
function getContainerAlignment({
  $alignment,
  $leadingContent,
  $trailingContent
}) {
  if ($leadingContent && $trailingContent) {
    return {
      justifyContent: 'space-between'
    };
  }
  if ($trailingContent && !$leadingContent && !$alignment) {
    return {
      justifyContent: 'flex-end'
    };
  }
  switch ($alignment) {
    case _constants.ALIGNMENT.center:
      return {
        justifyContent: 'center'
      };
    case _constants.ALIGNMENT.right:
      return {
        justifyContent: 'flex-end'
      };
    case _constants.ALIGNMENT.left:
    default:
      return {
        justifyContent: 'flex-start'
      };
  }
}
function getRootButtonColors({
  $tileKind,
  $theme,
  $selected
}) {
  const borderWidth = $selected ? '3px' : '2px';
  const borderColor = $selected ? $theme.colors.borderSelected : $theme.colors.borderOpaque;
  switch ($tileKind) {
    case _constants.TILE_KIND.selection:
      return {
        backgroundColor: $theme.colors.backgroundPrimary,
        borderTopWidth: 0,
        borderRightWidth: 0,
        borderBottomWidth: 0,
        borderLeftWidth: 0,
        borderTopStyle: 'none',
        borderRightStyle: 'none',
        borderBottomStyle: 'none',
        borderLeftStyle: 'none',
        boxShadow: `inset 0px 0px 0px ${borderWidth} ${borderColor}`,
        ':hover:enabled': {
          backgroundColor: $theme.colors.buttonTertiaryHover
        },
        ':active:enabled': {
          backgroundColor: $theme.colors.buttonTertiaryActive
        }
      };
    default:
      return {
        backgroundColor: $theme.colors.backgroundSecondary,
        borderTopWidth: 0,
        borderRightWidth: 0,
        borderBottomWidth: 0,
        borderLeftWidth: 0,
        borderTopStyle: 'none',
        borderRightStyle: 'none',
        borderBottomStyle: 'none',
        borderLeftStyle: 'none',
        ':hover:enabled': {
          backgroundColor: $theme.colors.buttonSecondaryHover
        },
        ':active:enabled': {
          backgroundColor: $theme.colors.buttonSecondaryActive
        }
      };
  }
}
function getDisabledStyles({
  $theme,
  $tileKind
}) {
  switch ($tileKind) {
    case _constants.TILE_KIND.selection:
      return {
        backgroundColor: $theme.colors.backgroundPrimary,
        color: $theme.colors.contentStateDisabled,
        borderTopWidth: 0,
        borderRightWidth: 0,
        borderBottomWidth: 0,
        borderLeftWidth: 0,
        borderTopStyle: 'none',
        borderRightStyle: 'none',
        borderBottomStyle: 'none',
        borderLeftStyle: 'none',
        boxShadow: `inset 0px 0px 0px 2px ${$theme.colors.borderStateDisabled}`
      };
    default:
      return {};
  }
}