calcite-react/Accordion/Accordion-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledChevronIcon = exports.StyledAccordionContent = exports.StyledAccordionSection = exports.StyledAccordionTitle = exports.StyledAccordion = void 0;

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _helpers = require("../utils/helpers");

var _CalciteThemeProvider = require("../CalciteThemeProvider");

var _SideNavStyled = require("../SideNav/SideNav-styled");

var _ChevronRightIcon = _interopRequireDefault(require("calcite-ui-icons-react/ChevronRightIcon"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

// Copyright 2019 Esri
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.​
// styled-components
// Utils, common elements
// Calcite theme and Esri colors
// Calcite components
// Icons
// Third party libraries
var StyledChevronIcon = (0, _styledComponents.default)(_ChevronRightIcon.default).withConfig({
  displayName: "StyledChevronIcon",
  componentId: "sc-16ghmal-0"
})(["width:16px;height:16px;transition:transform ", ";margin-right:", ";html[dir='rtl'] &{transform:rotate(180deg);}", ";", ";"], (0, _helpers.transition)(), function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
  return props.active === 'true' && (0, _styledComponents.css)(["&,html[dir='rtl'] &{transform:rotate(90deg);}"]);
}, function (props) {
  return props.iconPosition === 'end' && (0, _styledComponents.css)(["margin-right:initial;transform:rotate(180deg);html[dir='rtl'] &{transform:rotate(0deg);}", ";"], function (props) {
    return props.active === 'true' && (0, _styledComponents.css)(["&,html[dir='rtl'] &{transform:rotate(90deg);}"]);
  });
});
exports.StyledChevronIcon = StyledChevronIcon;
StyledChevronIcon.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledAccordion = (0, _styledComponents.default)(_SideNavStyled.StyledSideNav).withConfig({
  displayName: "StyledAccordion",
  componentId: "sc-16ghmal-1"
})(["border-radius:", ";"], function (props) {
  return props.theme.borderRadius;
});
exports.StyledAccordion = StyledAccordion;
StyledAccordion.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledAccordionSection = _styledComponents.default.div.withConfig({
  displayName: "StyledAccordionSection",
  componentId: "sc-16ghmal-2"
})([""]);

exports.StyledAccordionSection = StyledAccordionSection;
StyledAccordionSection.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledAccordionTitle = (0, _styledComponents.default)(_SideNavStyled.StyledSideNavTitle).withConfig({
  displayName: "StyledAccordionTitle",
  componentId: "sc-16ghmal-3"
})(["display:flex;align-items:center;cursor:pointer;", ";background-color:", ";color:", ";border-bottom:none;&:hover,&:focus{background-color:", ";color:", ";outline:none;", "{color:", ";", ";}}", ";", ";", ":first-child &{border-top-left-radius:", ";border-top-right-radius:", ";}", ":last-child &{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}", ";"], (0, _helpers.fontSize)(-2), function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.darkerGray;
}, function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.black;
}, StyledChevronIcon, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return props.active && (0, _styledComponents.css)(["color:", ";"], function (props) {
    return props.theme.palette.black;
  });
}, function (props) {
  return props.active && (0, _styledComponents.css)(["border-bottom:1px solid ", ";color:", ";font-weight:600;"], function (props) {
    return props.theme.palette.lightestGray;
  }, function (props) {
    return props.theme.palette.black;
  });
}, function (props) {
  return props.iconPosition === 'end' && (0, _styledComponents.css)(["justify-content:space-between;"]);
}, StyledAccordionSection, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.borderRadius;
}, StyledAccordionSection, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.disabled && (0, _styledComponents.css)(["opacity:0.5;pointer-events:none;"]);
});
exports.StyledAccordionTitle = StyledAccordionTitle;
StyledAccordionTitle.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledAccordionContent = _styledComponents.default.div.withConfig({
  displayName: "StyledAccordionContent",
  componentId: "sc-16ghmal-4"
})(["display:none;padding:", ";", ";"], function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
  return props.active && (0, _styledComponents.css)(["display:block;"]);
});

exports.StyledAccordionContent = StyledAccordionContent;
StyledAccordionContent.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};