52c2f40256
* Renabled building Storybook. * Explicitly added webpack style loaders for Storybook custom webpack config. * Upgraded Storybook configuration. * Added mixin/function to handle SASS compilation for Sprockets and Storybook's webpack. * Readded stylesheets/js required for crayons to run. * Added a custom title to Storybook. * Fixed custom Storybook CSS. * Migrated Search storybook stories. * Migrated crayons' box stories. * Migrated crayons' modal stories. * Migrated crayons' button stories. * Changed title a bit until we get a logo. * Migrated crayons' notice stories. * Migrated crayons' dropdown stories. * Migrated crayons' indicator stories. * Migrated crayons' typography stories. * Migrated crayons' form element stories. * Migrated crayons' navigation stories. * Migrated crayons' avatar & logo stories. * Migrated fatured article stories. * Migrated article loading stories. * Migrated today's podcast episodes stories. * Migrated podcast episode stories. * Migrated rest of article stories. * Update app/javascript/.storybook/manager.js Co-Authored-By: rhymes <rhymesete@gmail.com> * Commented new SASS function and mixin. Co-authored-by: rhymes <rhymesete@gmail.com>
60 lines
1.5 KiB
JavaScript
60 lines
1.5 KiB
JavaScript
import { h } from 'preact';
|
|
|
|
import './designSystem.scss';
|
|
|
|
export default {
|
|
title: 'Components/HTML/Navigation/Main Navigation',
|
|
};
|
|
|
|
export const Description = () => (
|
|
<div className="container">
|
|
<h2>Navigation: Main nav</h2>
|
|
<p>Used as main nav in left sidebar or dropdowns...</p>
|
|
<p>Can contain icons.</p>
|
|
</div>
|
|
);
|
|
|
|
Description.story = { name: 'description' };
|
|
|
|
export const Default = () => (
|
|
<div className="p-6 bg-smoke-10">
|
|
<a href="/" className="crayons-nav-block crayons-nav-block--current">
|
|
<span className="crayons-icon" role="img" aria-label="home">
|
|
🏡
|
|
</span>
|
|
Home
|
|
</a>
|
|
<a href="/" className="crayons-nav-block">
|
|
<span className="crayons-icon" role="img" aria-label="Podcasts">
|
|
📻
|
|
</span>
|
|
Podcasts
|
|
</a>
|
|
<a href="/" className="crayons-nav-block">
|
|
<span className="crayons-icon" role="img" aria-label="Tags">
|
|
🏷
|
|
</span>
|
|
Tags
|
|
</a>
|
|
<a href="/" className="crayons-nav-block">
|
|
<span className="crayons-icon" role="img" aria-label="Listings">
|
|
📑
|
|
</span>
|
|
Listings
|
|
<span className="crayons-indicator">3</span>
|
|
</a>
|
|
<a href="/" className="crayons-nav-block">
|
|
<span className="crayons-icon" role="img" aria-label="Code of Conduct">
|
|
👍
|
|
</span>
|
|
Code of Conduct
|
|
</a>
|
|
<a href="/" className="crayons-nav-block crayons-nav-block--indented">
|
|
More...
|
|
</a>
|
|
</div>
|
|
);
|
|
|
|
Default.story = {
|
|
name: 'default',
|
|
};
|