@patternplate/client/lib/app/components/index.js

Universal javascript client application for patternplate

const React = require("react");

const styled = require("styled-components").default;

const Icon = require("../icon");

const Link = require("../link");

const remark = require("remark");

const emoji = require("remark-gemoji-to-emoji");

const processor = remark().use(emoji);
module.exports = NavigationLabel;

function NavigationLabel(props) {
  return React.createElement(StyledLabelContainer, {
    "data-toggle-name": props.name,
    "data-trigger-name": props.name,
    "data-toggle-enabled": props.enabled,
    visible: props.visible,
    highlight: props.highlight
  }, React.createElement(StyledLabel, {
    highlight: props.highlight,
    enabled: props.enabled,
    size: props.size
  }, React.createElement(StyledLabelLink, {
    highlight: props.highlight,
    title: `${props.enabled ? 'Close' : 'Expand'} ${props.children} list`,
    query: {
      [`${props.name}-enabled`]: !props.enabled
    }
  }, React.createElement(StyledLabelIcon, {
    enabled: props.enabled
  }, React.createElement(Icon, {
    symbol: "arrow-right"
  })), processor.processSync(props.children).contents)));
}

const SIZES = {
  S: 0.9,
  M: 1
};
const StyledLabel = styled.div.withConfig({
  displayName: "components__StyledLabel"
})(["box-sizing:border-box;padding:10px 10px;display:flex;align-items:center;font-family:", ";font-size:", "px;color:", ";background-color:", ";border-style:solid;border-top-color:", ";border-bottom-color:", ";border-width:", "px 0;width:100%;"], props => props.theme.fonts.default, ({
  size,
  theme
}) => SIZES[size] * theme.fonts.fontSize, props => props.theme.colors.color, ({
  enabled,
  theme
}) => enabled ? theme.colors.backgroundTertiary : theme.colors.background, ({
  enabled,
  theme
}) => enabled ? theme.colors.backgroundSecondary : theme.colors.border, props => props.enabled ? 'transparent' : props.theme.colors.border, props => props.highlight ? 1 : 0);
const StyledLabelIcon = styled.span.withConfig({
  displayName: "components__StyledLabelIcon"
})(["margin-right:10px;transform-origin:center;transform:rotate(", "deg);"], props => props.enabled ? 90 : 0);
const StyledLabelContainer = styled.div.withConfig({
  displayName: "components__StyledLabelContainer"
})(["display:", ";position:sticky;top:-1px;left:0;&[data-toggle-enabled=\"true\"]{", "{background-color:", ";border-top-color:", ";border-bottom-color:transparent;}", "{transform:rotate(90deg);}}&[data-toggle-enabled=\"false\"]{", "{background-color:", ";border-top-color:", ";border-bottom-color:", ";}", "{transform:rotate(0);}}"], props => props.visible ? "block" : "none", StyledLabel, ({
  theme
}) => theme.colors.backgroundTertiary, ({
  theme
}) => theme.colors.backgroundSecondary, StyledLabelIcon, StyledLabel, ({
  theme
}) => theme.colors.background, ({
  theme
}) => theme.colors.border, props => props.theme.colors.border, StyledLabelIcon);
const StyledLabelLink = styled(Link).withConfig({
  displayName: "components__StyledLabelLink"
})(["display:block;color:", ";cursor:pointer;text-decoration:none;width:100%;"], props => props.theme.colors.color);
//# sourceMappingURL=index.js.map