@bbc/psammead-caption
Version:
React styled components for a Caption
36 lines (34 loc) • 6.56 kB
JavaScript
import _styled from "@emotion/styled/base";
import { oneOf, shape, string } from 'prop-types';
import { GEL_SPACING, GEL_SPACING_TRPL, GEL_MARGIN_ABOVE_400PX, GEL_MARGIN_BELOW_400PX } from '@bbc/gel-foundations/spacings';
import { GEL_GROUP_2_SCREEN_WIDTH_MIN, GEL_GROUP_3_SCREEN_WIDTH_MAX, GEL_GROUP_4_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints';
import { getLongPrimer } from '@bbc/gel-foundations/typography';
import { C_METAL, C_GREY_6 } from '@bbc/psammead-styles/colours';
import { scriptPropType } from '@bbc/gel-foundations/prop-types';
import { getSansRegular } from '@bbc/psammead-styles/font-styles';
var rtlStyles = "\n margin-right: ".concat(GEL_MARGIN_BELOW_400PX, ";\n border-right: 1px solid ").concat(C_METAL, ";\n\n @media (min-width: ").concat(GEL_GROUP_2_SCREEN_WIDTH_MIN, ") and (max-width: ").concat(GEL_GROUP_3_SCREEN_WIDTH_MAX, ") {\n width: calc(100% - ").concat(GEL_MARGIN_ABOVE_400PX, ");\n margin-right: ").concat(GEL_MARGIN_ABOVE_400PX, ";\n padding-right: ").concat(GEL_SPACING, ";\n padding-left: ").concat(GEL_MARGIN_ABOVE_400PX, ";\n }\n\n @media (min-width: ").concat(GEL_GROUP_4_SCREEN_WIDTH_MIN, ") {\n padding-right: ").concat(GEL_SPACING, ";\n padding-left: 0;\n }\n");
var ltrStyles = "\n margin-left: ".concat(GEL_MARGIN_BELOW_400PX, ";\n border-left: 1px solid ").concat(C_METAL, ";\n\n @media (min-width: ").concat(GEL_GROUP_2_SCREEN_WIDTH_MIN, ") and (max-width: ").concat(GEL_GROUP_3_SCREEN_WIDTH_MAX, ") {\n width: calc(100% - ").concat(GEL_MARGIN_ABOVE_400PX, ");\n margin-left: ").concat(GEL_MARGIN_ABOVE_400PX, ";\n padding-right: ").concat(GEL_MARGIN_ABOVE_400PX, ";\n padding-left: ").concat(GEL_SPACING, ";\n }\n\n @media (min-width: ").concat(GEL_GROUP_4_SCREEN_WIDTH_MIN, ") {\n padding-right: 0;\n padding-left: ").concat(GEL_SPACING, ";\n }\n");
var Caption = _styled("figcaption", process.env.NODE_ENV === "production" ? {
target: "eede9f50"
} : {
target: "eede9f50",
label: "Caption"
})(function (_ref) {
var script = _ref.script;
return script && getLongPrimer(script);
}, " ", function (_ref2) {
var service = _ref2.service;
return getSansRegular(service);
}, " color:", C_GREY_6, ";margin-top:", GEL_SPACING, ";padding-left:", GEL_MARGIN_BELOW_400PX, ";padding-right:", GEL_MARGIN_BELOW_400PX, ";width:100%;width:calc(100% - ", GEL_SPACING, ");@media (min-width: ", GEL_GROUP_4_SCREEN_WIDTH_MIN, "){width:100%;margin:", GEL_SPACING, " 0 0;}&>p{padding-bottom:", GEL_SPACING_TRPL, ";margin:0;}&>p:last-child{padding-bottom:0;}", function (_ref3) {
var dir = _ref3.dir;
return dir === 'rtl' ? rtlStyles : ltrStyles;
}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0RpQyIsImZpbGUiOiIuLi9zcmMvaW5kZXguanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgb25lT2YsIHNoYXBlLCBzdHJpbmcgfSBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7XG4gIEdFTF9TUEFDSU5HLFxuICBHRUxfU1BBQ0lOR19UUlBMLFxuICBHRUxfTUFSR0lOX0FCT1ZFXzQwMFBYLFxuICBHRUxfTUFSR0lOX0JFTE9XXzQwMFBYLFxufSBmcm9tICdAYmJjL2dlbC1mb3VuZGF0aW9ucy9zcGFjaW5ncyc7XG5pbXBvcnQge1xuICBHRUxfR1JPVVBfMl9TQ1JFRU5fV0lEVEhfTUlOLFxuICBHRUxfR1JPVVBfM19TQ1JFRU5fV0lEVEhfTUFYLFxuICBHRUxfR1JPVVBfNF9TQ1JFRU5fV0lEVEhfTUlOLFxufSBmcm9tICdAYmJjL2dlbC1mb3VuZGF0aW9ucy9icmVha3BvaW50cyc7XG5pbXBvcnQgeyBnZXRMb25nUHJpbWVyIH0gZnJvbSAnQGJiYy9nZWwtZm91bmRhdGlvbnMvdHlwb2dyYXBoeSc7XG5pbXBvcnQgeyBDX01FVEFMLCBDX0dSRVlfNiB9IGZyb20gJ0BiYmMvcHNhbW1lYWQtc3R5bGVzL2NvbG91cnMnO1xuaW1wb3J0IHsgc2NyaXB0UHJvcFR5cGUgfSBmcm9tICdAYmJjL2dlbC1mb3VuZGF0aW9ucy9wcm9wLXR5cGVzJztcbmltcG9ydCB7IGdldFNhbnNSZWd1bGFyIH0gZnJvbSAnQGJiYy9wc2FtbWVhZC1zdHlsZXMvZm9udC1zdHlsZXMnO1xuXG5jb25zdCBydGxTdHlsZXMgPSBgXG4gIG1hcmdpbi1yaWdodDogJHtHRUxfTUFSR0lOX0JFTE9XXzQwMFBYfTtcbiAgYm9yZGVyLXJpZ2h0OiAxcHggc29saWQgJHtDX01FVEFMfTtcblxuICBAbWVkaWEgKG1pbi13aWR0aDogJHtHRUxfR1JPVVBfMl9TQ1JFRU5fV0lEVEhfTUlOfSkgYW5kIChtYXgtd2lkdGg6ICR7R0VMX0dST1VQXzNfU0NSRUVOX1dJRFRIX01BWH0pIHtcbiAgICB3aWR0aDogY2FsYygxMDAlIC0gJHtHRUxfTUFSR0lOX0FCT1ZFXzQwMFBYfSk7XG4gICAgbWFyZ2luLXJpZ2h0OiAke0dFTF9NQVJHSU5fQUJPVkVfNDAwUFh9O1xuICAgIHBhZGRpbmctcmlnaHQ6ICR7R0VMX1NQQUNJTkd9O1xuICAgIHBhZGRpbmctbGVmdDogJHtHRUxfTUFSR0lOX0FCT1ZFXzQwMFBYfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAke0dFTF9HUk9VUF80X1NDUkVFTl9XSURUSF9NSU59KSB7XG4gICAgcGFkZGluZy1yaWdodDogJHtHRUxfU1BBQ0lOR307XG4gICAgcGFkZGluZy1sZWZ0OiAwO1xuICB9XG5gO1xuXG5jb25zdCBsdHJTdHlsZXMgPSBgXG4gIG1hcmdpbi1sZWZ0OiAke0dFTF9NQVJHSU5fQkVMT1dfNDAwUFh9O1xuICBib3JkZXItbGVmdDogMXB4IHNvbGlkICR7Q19NRVRBTH07XG5cbiAgQG1lZGlhIChtaW4td2lkdGg6ICR7R0VMX0dST1VQXzJfU0NSRUVOX1dJRFRIX01JTn0pIGFuZCAobWF4LXdpZHRoOiAke0dFTF9HUk9VUF8zX1NDUkVFTl9XSURUSF9NQVh9KSB7XG4gICAgd2lkdGg6IGNhbGMoMTAwJSAtICR7R0VMX01BUkdJTl9BQk9WRV80MDBQWH0pO1xuICAgIG1hcmdpbi1sZWZ0OiAke0dFTF9NQVJHSU5fQUJPVkVfNDAwUFh9O1xuICAgIHBhZGRpbmctcmlnaHQ6ICR7R0VMX01BUkdJTl9BQk9WRV80MDBQWH07XG4gICAgcGFkZGluZy1sZWZ0OiAke0dFTF9TUEFDSU5HfTtcbiAgfVxuXG4gIEBtZWRpYSAobWluLXdpZHRoOiAke0dFTF9HUk9VUF80X1NDUkVFTl9XSURUSF9NSU59KSB7XG4gICAgcGFkZGluZy1yaWdodDogMDtcbiAgICBwYWRkaW5nLWxlZnQ6ICR7R0VMX1NQQUNJTkd9O1xuICB9XG5gO1xuXG5jb25zdCBDYXB0aW9uID0gc3R5bGVkLmZpZ2NhcHRpb25gXG4gICR7KHsgc2NyaXB0IH0pID0+IHNjcmlwdCAmJiBnZXRMb25nUHJpbWVyKHNjcmlwdCl9XG4gICR7KHsgc2VydmljZSB9KSA9PiBnZXRTYW5zUmVndWxhcihzZXJ2aWNlKX1cbiAgY29sb3I6ICR7Q19HUkVZXzZ9O1xuICBtYXJnaW4tdG9wOiAke0dFTF9TUEFDSU5HfTtcbiAgcGFkZGluZy1sZWZ0OiAke0dFTF9NQVJHSU5fQkVMT1dfNDAwUFh9O1xuICBwYWRkaW5nLXJpZ2h0OiAke0dFTF9NQVJHSU5fQkVMT1dfNDAwUFh9O1xuICB3aWR0aDogMTAwJTtcbiAgd2lkdGg6IGNhbGMoMTAwJSAtICR7R0VMX1NQQUNJTkd9KTtcbiAgQG1lZGlhIChtaW4td2lkdGg6ICR7R0VMX0dST1VQXzRfU0NSRUVOX1dJRFRIX01JTn0pIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBtYXJnaW46ICR7R0VMX1NQQUNJTkd9IDAgMDtcbiAgfVxuICAmID4gcCB7XG4gICAgcGFkZGluZy1ib3R0b206ICR7R0VMX1NQQUNJTkdfVFJQTH07XG4gICAgbWFyZ2luOiAwOyAvKiByZXNldCAqL1xuICB9XG4gICYgPiBwOmxhc3QtY2hpbGQge1xuICAgIHBhZGRpbmctYm90dG9tOiAwO1xuICB9XG4gICR7KHsgZGlyIH0pID0+IChkaXIgPT09ICdydGwnID8gcnRsU3R5bGVzIDogbHRyU3R5bGVzKX1cbmA7XG5cbkNhcHRpb24ucHJvcFR5cGVzID0ge1xuICBzY3JpcHQ6IHNoYXBlKHNjcmlwdFByb3BUeXBlKS5pc1JlcXVpcmVkLFxuICBkaXI6IG9uZU9mKFsnbHRyJywgJ3J0bCddKSxcbiAgc2VydmljZTogc3RyaW5nLmlzUmVxdWlyZWQsXG59O1xuXG5DYXB0aW9uLmRlZmF1bHRQcm9wcyA9IHtcbiAgZGlyOiAnbHRyJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IENhcHRpb247XG4iXX0= */"));
Caption.propTypes = {
script: shape(scriptPropType).isRequired,
dir: oneOf(['ltr', 'rtl']),
service: string.isRequired
};
Caption.defaultProps = {
dir: 'ltr'
};
export default Caption;