How to use coveo-styleguide - 10 common examples

To help you get started, we’ve selected a few coveo-styleguide 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 coveo / react-vapor / packages / react-vapor / docs / src / demo-building-blocs / Svg.tsx View on Github external
> = ({name, svgClass = '', ...props}) => {
    if (VaporSVG.svg[name]) {
        const html = withSvgClass(VaporSVG.svg[name].svgString, svgClass);

        return <span>;
    }

    console.error(`SVG ${name} doesn't exists in Vapor`);

    return null;
};

</span>
github coveo / react-vapor / packages / react-vapor / docs / src / styles / icons / IconsList.tsx View on Github external
export const IconsList = () =&gt; {
    return (
        
            <ul>
                {Object.keys(VaporSVG.svg)
                    .sort()
                    .map((svgName) =&gt; (
                        
                    ))}
            </ul>
        
    );
};
github coveo / react-vapor / packages / vapor-demo / components / tables / CollapsibleRows.js View on Github external
Column 1
                    Column 2
                    Column 3
                    
                
            
            
                
                    Data 1
                    Data 2
                    Data 3
                    
                        <span data-collapse-state="collapsed">
                            <svg name="{VaporSVG.svg.arrowBottom.name}"></svg>
                            <svg name="{VaporSVG.svg.arrowTop.name}"></svg>
                        </span>
                    
                
                
                    
                        <div>
                            <section>
                                <div>
                                    <div>Detail 1</div>
                                    <div title="">
                                        Detail 1 value
                                    </div>
                                </div>
                                <div>
                                    <div>Detail 2</div></div></section></div>
github coveo / react-vapor / packages / vapor-demo / layouts / Navigation.js View on Github external
const Navigation = () =&gt; {
    return (
        <nav>
            <div>
                <ul>
                    }
                        title="General Guidelines"
                        pages={[
                            ,
                            ,
                            ,
                            ,
                            </ul></div></nav>
github coveo / react-vapor / packages / react-vapor / docs / src / styles / components / ListBox.tsx View on Github external
usage="Use when displaying a list of items with different state."
        withSource
    &gt;
        <ul>
            <li>Option 1 active</li>
            <li>Option 2 selected</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
            <li>Option 6</li>
            <li>
                <span>Prepend</span>Option 7
            </li>
            <li>
                <span>
                    <svg name="{VaporSVG.svg.domainGoogle.name}"></svg>
                </span>
                Option 8
            </li>
            <li>
                Option 9
                <span>
                    <svg name="{VaporSVG.svg.domainGoogle.name}"></svg>
                </span>
            </li>
            <li>Option 10 disabled</li>
            <li>
            </li><li>Option 12</li>
            <li>Option 13</li>
            <li>Option 14</li>
            <li>
                Multi line: Option option option option option option option option option option option option option
</li></ul>
github coveo / react-vapor / packages / vapor-demo / components / components / Banner.js View on Github external
const Banner = () =&gt; (
    <div>
        <div>
            The release of March 2016 includes significant content update
            <button type="button">
                Learn More
            </button>
        </div>

        <svg name="{VaporSVG.svg.close.name}"></svg>
    </div>
);
export default Banner;
github coveo / react-vapor / packages / vapor-demo / components / form / FlatSelectBtnGroup.js View on Github external
export default function FlatSelectModifiers() {
    return (
        &lt;&gt;
            <div>
                <a>
                    <span>Option 1</span>
                </a>
                <a>Option 2</a>
                <a>Option 3</a>
                <a>
                    <svg name="{VaporSVG.svg.clear.name}"></svg>
                    Option 4
                </a>
                <a>
                    <svg name="{VaporSVG.svg.clear.name}"></svg>
                    Option 5
                </a>
            </div>
        
    );
}
github coveo / react-vapor / packages / react-vapor / docs / src / styles / tables / ActionsContainer.tsx View on Github external
export default function ActionsContainer() {
    return (
        
            <div>
                <div>
                    <span>Filter label: </span>
                    <span>item we are filtering on</span>
                    <button>
                        <svg name="{VaporSVG.svg.clear.name}"></svg>
                    </button>
                </div>
                <div>
                    <div>
                        <span>
                            <a>
                                <svg name="{VaporSVG.svg.edit.name}"></svg>
                                <span>Edit</span>
                            </a>
                        </span>
                        <span>
                            <a>
</a></span></div></div></div>
github coveo / react-vapor / packages / vapor-demo / components / filtering / FilterPicker.js View on Github external
export const FilterPicker = () =&gt; (
<div>
    <div>
        <div>
            <div>
                <div>
                    <a>
                        <span>
                            <svg name="{VaporSVG.svg.filter.name}"></svg>
                        </span>
                    </a>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <button>
                            <span>
                                <span>Browser</span>
                                <span>is</span>
                                <span>Chrome</span>
                                <span>
                            </span>
                        </span></button>
                    </div></div></div></div></div></div>
github coveo / react-vapor / packages / vapor-demo / components / navigation / Navigation.js View on Github external
export default function Navigation() {
    return (
        <nav>
            <div style="{{maxHeight:">
                <ul>
                    <li>
                        <header>
                            <svg name="{VaporSVG.svg.menuContent.name}"></svg>
                            Section 1
                            <svg name="{VaporSVG.svg.arrowBottomRounded.name}"></svg>
                        </header>
                        <ul>
                            <li>
                                <a href="#">
                                    Super Item 1
                                </a>
                            </li>
                            <li>
                                <a href="#"></a></li></ul></li></ul></div></nav>

coveo-styleguide

Yet another CSS framework - but it's awesome & built by Coveo.

Apache-2.0
Latest version published 3 years ago

Package Health Score

51 / 100
Full package analysis

Popular coveo-styleguide functions