baseui
Version:
A React Component library implementing the Base design language
261 lines (258 loc) • 8.88 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledRoot = exports.StyledLabelSublistContent = exports.StyledLabelRoot = exports.StyledLabelDescription = exports.StyledLabelContent = exports.StyledHeadingSubHeading = exports.StyledHeadingRoot = exports.StyledHeadingMainHeading = exports.StyledHeadingEndEnhancerDescriptionContainer = exports.StyledHeadingEndEnhancerContainer = exports.StyledHeadingContentRow = exports.StyledHeadingContent = exports.StyledEndEnhancerContainer = exports.StyledContent = exports.StyledArtworkContainer = void 0;
var _styles = require("../styles");
var _utils = require("./utils");
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 StyledRoot = exports.StyledRoot = (0, _styles.styled)('li', ({
$theme,
$shape,
$isTapTarget = false
}) => {
return {
alignItems: 'center',
backgroundColor: $theme.colors.backgroundPrimary,
display: 'flex',
listStyleType: 'none',
width: '100%',
borderTopLeftRadius: $shape === _constants.SHAPE.ROUND ? $theme.borders.radius400 : 0,
borderTopRightRadius: $shape === _constants.SHAPE.ROUND ? $theme.borders.radius400 : 0,
borderBottomLeftRadius: $shape === _constants.SHAPE.ROUND ? $theme.borders.radius400 : 0,
borderBottomRightRadius: $shape === _constants.SHAPE.ROUND ? $theme.borders.radius400 : 0,
overflow: 'hidden',
...($isTapTarget ? {
// button style reset
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
textAlign: 'inherit',
boxShadow: 'none',
padding: 0,
cursor: 'pointer',
border: 'none',
color: 'inherit',
font: 'inherit'
} : {})
};
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledContent = exports.StyledContent = (0, _styles.styled)('div',
// @ts-ignore
({
$mLeft,
$sublist,
$theme
}) => {
return {
...(0, _styles.expandBorderStyles)($theme.borders.border100),
alignItems: 'center',
borderTopStyle: 'none',
borderRightStyle: 'none',
borderLeftStyle: 'none',
display: 'flex',
flexGrow: 1,
minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
justifyContent: 'space-between',
...($theme.direction === 'rtl' ? {
paddingLeft: $theme.sizing.scale600,
marginRight: $mLeft ? $theme.sizing.scale600 : null
} : {
paddingRight: $theme.sizing.scale600,
marginLeft: $mLeft ? $theme.sizing.scale600 : null
})
};
});
StyledContent.displayName = "StyledContent";
StyledContent.displayName = 'StyledContent';
const StyledEndEnhancerContainer = exports.StyledEndEnhancerContainer = (0, _styles.styled)('div', {
alignItems: 'center',
display: 'flex'
});
StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
const StyledArtworkContainer = exports.StyledArtworkContainer = (0, _styles.styled)('div', ({
$artworkSize,
$sublist,
$theme
}) => {
let sizeValue = typeof $artworkSize === 'number' ? $artworkSize : (0, _utils.artworkSizeToValue)($artworkSize, Boolean($sublist));
if (sizeValue > 36) {
return {
alignItems: 'center',
display: 'flex',
flexShrink: 0,
paddingLeft: $theme.sizing.scale600,
paddingRight: $theme.sizing.scale600
};
}
return {
alignItems: 'center',
display: 'flex',
flexShrink: 0,
justifyContent: 'center',
width: $theme.sizing.scale1600
};
});
StyledArtworkContainer.displayName = "StyledArtworkContainer";
StyledArtworkContainer.displayName = 'StyledArtworkContainer';
const StyledLabelRoot = exports.StyledLabelRoot = (0, _styles.styled)('div', ({
$theme
}) => {
return {
paddingTop: $theme.sizing.scale500,
paddingBottom: $theme.sizing.scale500
};
});
StyledLabelRoot.displayName = "StyledLabelRoot";
StyledLabelRoot.displayName = 'StyledLabelRoot';
const StyledLabelContent = exports.StyledLabelContent = (0, _styles.styled)('p', ({
$theme
}) => {
return {
...$theme.typography.LabelMedium,
color: $theme.colors.contentPrimary,
marginTop: 0,
marginBottom: 0
};
});
StyledLabelContent.displayName = "StyledLabelContent";
StyledLabelContent.displayName = 'StyledLabelContent';
const StyledLabelDescription = exports.StyledLabelDescription = (0, _styles.styled)('p', ({
$theme
}) => {
return {
...$theme.typography.ParagraphSmall,
color: $theme.colors.contentPrimary,
marginTop: 0,
marginBottom: 0
};
});
StyledLabelDescription.displayName = "StyledLabelDescription";
StyledLabelDescription.displayName = 'StyledLabelDescription';
const StyledLabelSublistContent = exports.StyledLabelSublistContent = (0, _styles.styled)('p', ({
$theme
}) => {
return {
...$theme.typography.LabelMedium,
color: $theme.colors.contentPrimary,
marginTop: $theme.sizing.scale500,
marginBottom: $theme.sizing.scale500
};
});
StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
StyledLabelSublistContent.displayName = 'StyledLabelSublistContent';
const StyledHeadingRoot = exports.StyledHeadingRoot = (0, _styles.styled)('div', ({
$theme
}) => {
return {
display: 'flex',
alignItems: 'center',
width: '100%',
backgroundColor: $theme.colors.backgroundPrimary,
overflow: 'hidden',
minHeight: $theme.sizing.scale1600
};
});
StyledHeadingRoot.displayName = "StyledHeadingRoot";
StyledHeadingRoot.displayName = 'StyledHeadingRoot';
const StyledHeadingContent = exports.StyledHeadingContent = (0, _styles.styled)('div', ({
$theme
}) => {
return {
flexGrow: 1,
width: '100%',
minWidth: 0,
paddingTop: $theme.sizing.scale600,
paddingBottom: $theme.sizing.scale300,
...($theme.direction === 'rtl' ? {
paddingLeft: $theme.sizing.scale600,
marginRight: $theme.sizing.scale600
} : {
paddingRight: $theme.sizing.scale600,
marginLeft: $theme.sizing.scale600
})
};
});
StyledHeadingContent.displayName = "StyledHeadingContent";
StyledHeadingContent.displayName = 'StyledHeadingContent';
const StyledHeadingContentRow = exports.StyledHeadingContentRow = (0, _styles.styled)('div', {
display: 'flex',
alignItems: 'baseline',
justifyContent: 'space-between',
width: '100%'
});
StyledHeadingContentRow.displayName = "StyledHeadingContentRow";
StyledHeadingContentRow.displayName = 'StyledHeadingContentRow';
const StyledHeadingMainHeading = exports.StyledHeadingMainHeading = (0, _styles.styled)('p', ({
$maxLines = 1,
$theme
}) => {
return {
...$theme.typography.HeadingXSmall,
color: $theme.colors.contentPrimary,
marginTop: 0,
marginBottom: 0,
marginRight: $theme.sizing.scale600,
display: '-webkit-box',
'-webkit-line-clamp': $maxLines,
'-webkit-box-orient': 'vertical',
overflow: 'hidden'
};
});
StyledHeadingMainHeading.displayName = "StyledHeadingMainHeading";
StyledHeadingMainHeading.displayName = 'StyledHeadingMainHeading';
const StyledHeadingSubHeading = exports.StyledHeadingSubHeading = (0, _styles.styled)('p', ({
$maxLines = 1,
$theme
}) => {
return {
...$theme.typography.ParagraphMedium,
color: $theme.colors.contentSecondary,
marginTop: 0,
marginBottom: 0,
marginRight: $theme.sizing.scale600,
display: '-webkit-box',
'-webkit-line-clamp': $maxLines,
'-webkit-box-orient': 'vertical',
overflow: 'hidden'
};
});
StyledHeadingSubHeading.displayName = "StyledHeadingSubHeading";
StyledHeadingSubHeading.displayName = 'StyledHeadingSubHeading';
const StyledHeadingEndEnhancerContainer = exports.StyledHeadingEndEnhancerContainer = (0, _styles.styled)('div', ({
$isText,
$theme
}) => ({
...$theme.typography.LabelMedium,
display: 'flex',
alignItems: $isText ? 'flex-end' : 'center',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}));
StyledHeadingEndEnhancerContainer.displayName = "StyledHeadingEndEnhancerContainer";
StyledHeadingEndEnhancerContainer.displayName = 'StyledHeadingEndEnhancerContainer';
const StyledHeadingEndEnhancerDescriptionContainer = exports.StyledHeadingEndEnhancerDescriptionContainer = (0, _styles.styled)('p', ({
$theme
}) => ({
...$theme.typography.ParagraphSmall,
color: $theme.colors.contentSecondary,
marginTop: 0,
marginBottom: 0,
display: 'flex',
alignItems: 'flex-start',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}));
StyledHeadingEndEnhancerDescriptionContainer.displayName = "StyledHeadingEndEnhancerDescriptionContainer";
StyledHeadingEndEnhancerDescriptionContainer.displayName = 'StyledHeadingEndEnhancerDescriptionContainer';