@zendeskgarden/react-accordions/dist/esm/styled/accordion/StyledPanel.js

Components related to accordions in the Garden Design System

/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
import styled, { css } from 'styled-components';
import { componentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'accordions.panel';
const colorStyles = _ref => {
  let {
    theme,
    $isBare
  } = _ref;
  return css(["border-bottom-color:", ";"], $isBare ? 'transparent' : getColor({
    theme,
    variable: 'border.default'
  }));
};
const sizeStyles = props => {
  const {
    theme,
    $isCompact,
    $isExpanded
  } = props;
  const {
    base
  } = theme.space;
  let paddingTop = base * 2;
  let paddingHorizontal = base * 5;
  let paddingBottom = base * 8;
  if ($isCompact) {
    paddingTop = base * 2;
    paddingHorizontal = base * 3;
    paddingBottom = base * 4;
  }
  if ($isExpanded === false) {
    paddingTop = 0;
    paddingBottom = 0;
  }
  return css(["grid-template-rows:", "fr;border-bottom:", ";padding:", "px ", "px ", "px;line-height:", ";font-size:", ";"], $isExpanded ? 1 : 0, theme.borders.sm, paddingTop, paddingHorizontal, paddingBottom, getLineHeight(base * 5, theme.fontSizes.md), theme.fontSizes.md);
};
const StyledPanel = styled.section.attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': '9.5.3'
}).withConfig({
  displayName: "StyledPanel",
  componentId: "sc-1piryze-0"
})(["display:grid;transition:", ";overflow:hidden;", " ", " ", ";"], props => props.$isAnimated && 'padding 0.25s ease-in-out, grid-template-rows 0.25s ease-in-out', sizeStyles, colorStyles, componentStyles);
StyledPanel.defaultProps = {
  $isAnimated: true,
  theme: DEFAULT_THEME
};

export { StyledPanel };