@retailmenot/anchor/ts/Hero/Hero.component.js

A React UI Library by RetailMeNot

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// REACT
import * as React from 'react';
// VENDOR
import styled, { css } from '@xstyled/styled-components';
import { th, space as spaceStyles } from '@xstyled/system';
import classnames from 'classnames';
// ANCHOR
import { Typography } from '../Typography/Typography.component';
const StyledHero = styled('section') `
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: block;
    display: flex;
    flex-direction: column;
    justify-content: center;
    ${({ background, color = 'white', align, minHeight }) => css({
    background: th.color(background),
    color,
    minHeight,
    textAlign: align,
})}
    ${spaceStyles}
`;
export const Hero = (_a) => {
    var { background = 'transparent', align = 'center', minHeight = '7.5rem', className, children } = _a, props = __rest(_a, ["background", "align", "minHeight", "className", "children"]);
    return (React.createElement(StyledHero, Object.assign({ className: classnames('anchor-hero', className), background: background, align: align, minHeight: minHeight }, props), children));
};
// Hero.Title
// ------------------------------------------------------------------------------------------------------------------
const StyledTitle = styled(Typography) `
    text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.09);
    position: relative;
    ${spaceStyles}
`;
export const HeroTitle = (_a) => {
    var { className, children, weight = 600, scale = 32, as = 'h1' } = _a, props = __rest(_a, ["className", "children", "weight", "scale", "as"]);
    return (React.createElement(StyledTitle, Object.assign({ className: classnames('anchor-hero-title', className), weight: weight, scale: scale, as: as }, props), children));
};
Hero.Title = HeroTitle;
// Hero.Subtitle
// ------------------------------------------------------------------------------------------------------------------
const StyledSubtitle = styled(Typography) `
    text-shadow: 0 0.125rem 0.125rem rgba(0, 0, 0, 0.04);
    position: relative;
    display: block;
    ${spaceStyles}
`;
export const HeroSubtitle = (_a) => {
    var { className, children, scale = 18, weight = 600 } = _a, props = __rest(_a, ["className", "children", "scale", "weight"]);
    return (React.createElement(StyledSubtitle, Object.assign({ className: classnames('anchor-hero-subtitle', className), scale: scale, weight: weight }, props), children));
};
Hero.Subtitle = HeroSubtitle;
//# sourceMappingURL=Hero.component.js.map