How to use the @xstyled/styled-components function in @xstyled/styled-components

To help you get started, we’ve selected a few @xstyled/styled-components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github RetailMeNot / anchor / src / PopOver / PopOver.stories.tsx View on Github external
// VENDOR
import * as React from 'react';
import styled, { ThemeProvider } from '@xstyled/styled-components';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { select, boolean, text, number } from '@storybook/addon-knobs';
// ANCHOR
import { RootTheme } from '../../src/theme';
import { PopOver } from './PopOver.component';
import { Position } from '../utils/position/position';
import { Typography } from '../Typography';
import { Button } from '../Button';

const StyledStory = styled('div')`
    padding: 2rem;
    color: text.base;
    font-family: base;
`;

const StyledParagraph = styled(Typography)`
    border: base;
    border-radius: base;
`;

const PopOverExample = ({ closeEvent }: any) => (
    <div>
        Click the button to close the PopOver.
        <button>Close</button>
    </div>
);
github RetailMeNot / anchor / src / Layout / Footer / MobileCTA / MobileCTA.component.tsx View on Github external
// REACT
import * as React from 'react';
// VENDOR
import styled from '@xstyled/styled-components';
import classNames from 'classnames';
// COMPONENTS
import { Typography } from '../../../Typography';

const StyledMobileCTAElement = styled('a')`
    box-sizing: border-box;
    cursor: pointer;
    min-width: 250px;
    display: inline-block;
    .cta-caption {
        margin: 1rem 0 0.5rem;
        line-height: 0.5rem;
    }
`;

interface MobileCTAProps {
    className?: string;
    href?: string;
}

/* tslint:disable max-line-length */
github RetailMeNot / anchor / src / Form / Input / Input.component.tsx View on Github external
transition: inherit;
    }
`;

interface StyledInputProps {
    hasLabel?: boolean;
    name: string;
    onBlur?: InputEventHandler;
    onChange: InputEventHandler;
    onFocus: InputEventHandler;
    value: InputContentType;
    type: InputTypes;
    placeholder: InputContentType;
}

const StyledInput = styled('input')`
    box-sizing: border-box;
    border: none;
    padding: 0;
    outline: none !important;
    touch-action: manipulation;
    -webkit-appearance: none;
    background-color: transparent;
    z-index: 1;
    color: text.base;
    // TODO: bring this back when the 'bug' in styled components gets sorted out (MVP)
    //transition: all 250ms;
    font-family: base;
    // Disable Number Spinners
    &amp;[type='number']::-webkit-inner-spin-button,
    &amp;[type='number']::-webkit-outer-spin-button {
        -webkit-appearance: none;
github RetailMeNot / anchor / src / Form / Toggle / Toggle.component.tsx View on Github external
// Todo: These should not be hardcoded and need a better solution
const OFF_TRACK_COLOR = '#D3D3D3';
const OFF_KNOB_COLOR = '#808080';

const HiddenInput = styled('input')`
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
`;

const StyledToggle = styled('label')`
    display: inline-flex;
    flex-direction: column;

    ${spaceStyles}

    // Styles for the ON/OFF
    font-family: base;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    text-align: center;
    ${({ disabled }) =&gt;
        css({
            color: disabled ? 'text.disabled' : 'text.light',
            cursor: disabled ? 'not-allowed' : 'pointer',
        })}
github RetailMeNot / anchor / src / Avatar / Avatar.component.tsx View on Github external
const DefaultAvatar: React.FunctionComponent = () =&gt; (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" height="36" width="36">
        <path fill="#A6A6A6" d="M22 20.427c0 .869-.704 1.573-1.571 1.573H1.57A1.572 1.572 0 0 1 0 20.427V18.95c0-3.527 2.805-6.392 6.254-6.392h.038v-.001c1.315.993 2.934 1.604 4.708 1.604s3.393-.611 4.708-1.604v.001h.038c3.449 0 6.254 2.865 6.254 6.392v1.476zM11 0a6.29 6.29 0 0 1 6.286 6.294A6.29 6.29 0 0 1 11 12.59a6.29 6.29 0 0 1-6.286-6.295A6.29 6.29 0 0 1 11 0z"></path>
    </svg>
);
/* tslint:enable max-line-length */

const StyledAvatar = styled('div')`
    border: solid 0.1875rem rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    width: 2rem;
    border-radius: circular;

    svg {
        justify-self: baseline;
        height: 1.5rem;
        margin-bottom: -0.375rem;
    }
`;

const InnerBorder = styled('div')`
github RetailMeNot / anchor / src / Layout / Page / Page.stories.tsx View on Github external
import { text } from '@storybook/addon-knobs';
import { ThemeProvider } from '@xstyled/styled-components';
// COMPONENT
import {
    Page,
    DEFAULT_HEADER_HEIGHT,
    DEFAULT_FOOTER_HEIGHT,
} from './Page.component';
import { Footer } from '../Footer/Footer.component';
import { RootTheme } from '../../theme';
// README
import * as README from './README.md';

// Styled Components
// ------------------------------------------------------------------------------------------------------------------
const StyledStory = styled('div')`
    width: 100%;
`;

// Stories
// ------------------------------------------------------------------------------------------------------------------
storiesOf('Components/Layout', module)
    .addParameters({
        readme: {
            sidebar: README,
        },
    })
    .add('Page', () =&gt; (
        
            
                }
github RetailMeNot / anchor / src / Form / ControlLabel / ControlLabel.component.tsx View on Github external
// REACT
import * as React from 'react';

// VENDOR
import styled, { css } from '@xstyled/styled-components';
import classnames from 'classnames';

// ANCHOR
import { cloneWithProps } from '../../utils/cloneWithProps/cloneWithProps';
import {
    Typography,
    TypographyProps,
} from '../../Typography/Typography.component';
import { space as spaceStyles, SpaceProps } from '@xstyled/system';

const StyledLabel = styled(Typography)`
    position: relative;
    display: inline-flex;
    ${spaceStyles}
    ${({ labelPlacement, disabled }) =&gt;
        css({
            flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse',
            cursor: disabled ? 'not-allowed' : 'pointer',
        })}
`;

interface ControlLabelProps
    extends SpaceProps,
        TypographyProps,
        React.HTMLAttributes {
    className?: string;
    id?: string;
github RetailMeNot / anchor / docs / src / components / PositionGrid / PositionGrid.component.tsx View on Github external
background-color: background.base;
    display: inline-block;
    min-width: ${COMPONENT_MIN_WIDTH};
    width: auto;
    margin: 0 auto;
    border-collapse: collapse;

    td {
        width: 10rem;
        padding: 0.75rem 0.25rem;
        font-family: base;
        font-size: 1.25rem;
    }
`;

const SpanHover = styled('span')`
    cursor: pointer;
`;

type Alignment = keyof typeof TEXT_ALIGNMENT;

interface TdProps {
    align?: Alignment;
    shaded?: boolean;
}

const Td = styled('td')`
    ${({ align, shaded }) =&gt; `
        text-align: ${align || TEXT_ALIGNMENT.left};
        ${shaded &amp;&amp; `background-color: #D3D3D3;`}
    `}
`;
github RetailMeNot / anchor / src / Modal / Modal.stories.tsx View on Github external
.add('Custom Background', () =&gt; {
        const CustomBackground = styled(BaseModalBackground)`
            background-color: rgba(255, 0, 0, 0.6);
        `;

        return (
            
                
                    
                        
                            
                            <header title="Modal with Custom Background">
                        
                    
                
            
        );
    })</header>
github RetailMeNot / anchor / docs / src / components / Utils / ApiTable / ApiTable.component.tsx View on Github external
import parse from 'html-react-parser';
import { breakpoints } from '@xstyled/system';

const StyledApiTable = styled('section')`
    overflow-x: scroll;
    white-space: nowrap;

    ${breakpoints({
        md: css`
            overflow-x: initial;
            white-space: normal;
        `,
    })}
`;

const Table = styled('table')`
    width: 100%;
    font-family: base;
    margin: 1rem 0;

    th {
        text-align: left;
        padding: 0.75rem 0.5rem;
        border-bottom: base;
        background-color: white;
    }
    tr {
        &:nth-child(odd) {
            background-color: background.base;
        }
    }
    td {