How to use @xstyled/styled-components - 10 common examples

// 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>
);

// 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 */

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
    &[type='number']::-webkit-inner-spin-button,
    &[type='number']::-webkit-outer-spin-button {
        -webkit-appearance: none;

// 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 }) =>
        css({
            color: disabled ? 'text.disabled' : 'text.light',
            cursor: disabled ? 'not-allowed' : 'pointer',
        })}

const DefaultAvatar: React.FunctionComponent = () => (
    <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')`

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', () => (
        
            
                }

// 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 }) =>
        css({
            flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse',
            cursor: disabled ? 'not-allowed' : 'pointer',
        })}
`;

interface ControlLabelProps
    extends SpaceProps,
        TypographyProps,
        React.HTMLAttributes {
    className?: string;
    id?: string;

// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { boolean, select, text } from '@storybook/addon-knobs';
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { RootTheme } from '../../theme';
// SUBJECT
import * as README from './README.md';
import { ControlLabel } from './ControlLabel.component';
import { Radio } from '../Radio';
import { Toggle } from '../Toggle';
import { Checkbox } from '../Checkbox';

const StyledStory = styled.div`
    padding: 1rem;
    color: #555;
`;

storiesOf('Components/Form/ControlLabel', module)
    .addParameters({ readme: { sidebar: README } })
    .add('Default', () =>
        React.createElement(() => {
            const [checked, setChecked] = React.useState(true);

            const labelPlacement = select<'left' | 'right'>(
                'labelPlacement',
                ['left', 'right'],
                'right'
            );
            const disabled = boolean('disabled', false);

/* eslint-disable jsx-a11y/accessible-emoji */
import React from 'react'
import { Link } from 'gatsby'
import styled, { Box } from '@xstyled/styled-components'
import { FaTwitter, FaGithub, FaLinkedin, FaEnvelope } from 'react-icons/fa'
import { Location } from '@reach/router'
import { Container } from '../components/Container'
import { useLangKey, toEnglish, toFrench } from '../components/I18nContext'

const Copyright = styled.div`
  color: light400;
  font-size: 12;
  font-family: monospace;
`

const Socials = styled.div`
  margin-left: auto;
  margin-right: -2;
  display: flex;
`

const SocialLink = styled.a`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44;

// REACT
import * as React from 'react';
// VENDOR
import styled from '@xstyled/styled-components';
import classnames from 'classnames';

export const StyledContent = styled.div`
    box-sizing: border-box;
    width: 100%;

    order: 0;
    flex-grow: 1;
`;

export interface ModalContentProps {
    children?: any;
    className?: string;
}

export const ModalContent = ({ children, className }: ModalContentProps) => (
    
        {children}