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.
coveo / react-vapor / packages / react-vapor / docs / src / demo-building-blocs / Svg.tsx View on Github 
> = ({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>export const IconsList = () => {
return (
<ul>
{Object.keys(VaporSVG.svg)
.sort()
.map((svgName) => (
))}
</ul>
);
};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>const Navigation = () => {
return (
<nav>
<div>
<ul>
}
title="General Guidelines"
pages={[
,
,
,
,
</ul></div></nav>usage="Use when displaying a list of items with different state."
withSource
>
<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>const Banner = () => (
<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;export default function FlatSelectModifiers() {
return (
<>
<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>
);
}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>export const FilterPicker = () => (
<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>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.
