removing text files for raw-loader

documentation/components/code-block.js

@@ -0,0 +1,9 @@
+import Prism from 'react-prism';
+import 'prismjs';
+import 'prism-themes/themes/prism-base16-ateliersulphurpool.light.css';
+
+export const CodeBlock = ({ snippet }) => (
+ <pre className="Snippet__code">
+ <Prism className="language-css">{snippet}</Prism>
+ </pre>
+);

documentation/components/module.js

@@ -7,7 +7,7 @@ export const ModuleTable = ({ children }) => (
 );
 
 export const ModuleContent = ({ children }) => (
- <p className="u-sans u-w400">{children}</p>
+ <p className="u-sans u-w400 u-mb3">{children}</p>
 );
 
 export const Module = ({ title, component: Cx }) => (

documentation/markdown/components/btn.mdx

@@ -1,6 +1,5 @@
 import { Snippet } from '../../components/snippet'
-import { Btn } from './demo/btn'
-import snippet from './demo/btn.css.txt'
+import { Btn, snippet } from './demo/btn'
 
 Simple skin for buttons to be applied on `<input type='button'>`, `<button>`, and `<a>` elements.
 

documentation/markdown/components/card.mdx

@@ -1,6 +1,7 @@
 import { Snippet } from '../../components/snippet'
 import { CardUI } from './demo/card'
-import snippet from './demo/card.css.txt'
+import snippet from '!raw-loader!obsidian.css/src/components/obsidian.card-ui.css';
+
 
 Card displays content that carries a visual metaphor of a playing card. For information on this pattern, checkout [Using Card-Based Design To Enhance UX](https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb#.aqoz7dokz) from Nick Babich.
 

documentation/markdown/components/demo/btn.js

@@ -1,49 +1,34 @@
-export const Btn = () => (
+import snippet from '!raw-loader!obsidian.css/src/components/obsidian.btns.css';
+
+const Btn = () => (
  <>
  <div className="u-mb4">
  <h6 className="u-mb2 small u-caps">Xtra Small Buttons</h6>
- <a className="c-btn c-btn--xs u-m1">Button</a>
- <a className="c-btn c-btn--xs c-btn--2 u-m1">Button</a>
- <a className="c-btn c-btn--xs c-btn--3 u-m1">Button</a>
- <a className="c-btn c-btn--xs c-btn--4 u-m1">Button</a>
+ <a className="c-Btn c-Btn--xs u-m1">Button</a>
  </div>
  <div className="u-mb4">
  <h6 className="u-mb2 small u-caps">Buttons</h6>
- <a className="c-btn u-m1">Button</a>
- <a className="c-btn c-btn--2 u-m1">Button</a>
- <a className="c-btn c-btn--3 u-m1">Button</a>
- <a className="c-btn c-btn--4 u-m1">Button</a>
+ <a className="c-Btn u-m1">Button</a>
  </div>
  <div className="u-mb4">
  <h6 className="u-mb2 small u-caps">Medium Buttons</h6>
- <a className="c-btn c-btn--md u-m1">Button</a>
- <a className="c-btn c-btn--md c-btn--2 u-m1">Button</a>
- <a className="c-btn c-btn--md c-btn--3 u-m1">Button</a>
- <a className="c-btn c-btn--md c-btn--4 u-m1">Button</a>
+ <a className="c-Btn c-Btn--md u-m1">Button</a>
  </div>
  <div className="u-mb4">
  <h6 className="u-mb2 small u-caps">Large Buttons</h6>
- <a className="c-btn c-btn--lg u-m1">Button</a>
- <a className="c-btn c-btn--lg c-btn--2 u-m1">Button</a>
- <a className="c-btn c-btn--lg c-btn--3 u-m1">Button</a>
- <a className="c-btn c-btn--lg c-btn--4 u-m1">Button</a>
- </div>
- <div className="u-mb4">
- <h6 className="u-mb2 small u-caps">Outline Buttons</h6>
- <a className="c-btn c-btn--o u-m1">Button</a>
- <a className="c-btn c-btn--o c-btn--o--2 u-m1">Button</a>
- <a className="c-btn c-btn--o c-btn--o--3 u-m1">Button</a>
- <a className="c-btn c-btn--o c-btn--o--4 u-m1">Button</a>
+ <a className="c-Btn c-Btn--lg u-m1">Button</a>
  </div>
  <div>
  <h6 className="u-mb2 small u-caps">Applied to Input Nodes</h6>
- <button className="c-btn c-btn--md c-btn--3 u-m1">Button</button>
- <input type="button" defaultValue="Button" className="c-btn c-btn--xs u-m1" />
+ <button className="c-Btn c-Btn--md c-Btn--3 u-m1">Button</button>
+ <input type="button" defaultValue="Button" className="c-Btn c-Btn--xs u-m1" />
  <input
  type="submit"
  defaultValue="Button"
- className="c-btn c-btn--o c-btn--o--2 u-m1"
+ className="c-Btn c-Btn--o c-Btn--o--2 u-m1"
  />
  </div>
  </>
 );
+
+export { snippet, Btn };

documentation/markdown/components/demo/card.js

@@ -1,6 +1,6 @@
 export const CardUI = () => (
- <article className="c-card u-ov--hid u-mxa">
- <figure className="c-card__figure o-intrinsic o-intrinsic--16x9">
+ <article className="c-Card u-ov--hid u-mxa">
+ <figure className="c-Card__figure o-intrinsic o-intrinsic--16x9">
  <img
  src="http:https://mediad.publicbroadcasting.net/p/shared/npr/styles/x_large/nprshared/201411/363561279.jpg"
  className="o-intrinsic__item u-fit--cover u-bl"
@@ -9,13 +9,13 @@ export const CardUI = () => (
  </figure>
  <header className="u-pt3 u-px3 u-mb2 o-Flex o-Flex--center--h">
  <img
- className="o-icon o-icon--xs u-mr2"
+ className="o-Icon o-Icon--xs u-mr2"
  src="http:https://i.cdn.turner.com/cnn/.e1mo/img/4.0/logos/logo_cnn_badge_2up.png"
  alt="CSS-Tricks Logo"
  />
  <h1 className="small u-system u-ltgray u-mb0">CNN</h1>
  </header>
- <div className="c-card__content u-px3 u-pb3">
+ <div className="c-Card__content u-px3 u-pb3">
  <h2 className="h6">
  <a href="#">Adam West is back as Batman</a>
  </h2>

documentation/markdown/components/demo/dropdown.js

@@ -1,30 +1,30 @@
 export const Dropdown = () => (
  <>
- <a href="#" className="c-btn c-btn--3">
+ <a href="#" className="c-Btn">
  Button
  </a>
- <div className="c-dropdown__container u-relative u-py6 u-mb6">
+ <div className="c-Dropdown__container u-relative u-py6 u-mb6">
  <div className="u-absolute" style={{ left: 0, top: 0 }}>
  <div
- className="c-dropdown c-dropdown--l u-mxw--fit active"
+ className="c-Dropdown c-Dropdown--l u-mxw--fit active"
  style={{ width: '18rem' }}>
  <h3 className="h6 u-p2">
  <a href="/profile/">Heading</a>
  </h3>
  <hr className="u-bg--ltgray" />
- <nav className="c-nav small">
- <ul className="list--reset">
- <li className="u-p2">
+ <nav className="c-Nav small">
+ <ul className="o-UIList">
+ <li className="o-UIList__item u-p2">
  <a href="/preferences/" className="u-gray200">
  Preferences
  </a>
  </li>
- <li className="u-p2">
+ <li className="o-UIList__item u-p2">
  <a href="#" className="u-gray200">
  Help
  </a>
  </li>
- <li className="u-p2">
+ <li className="o-UIList__item u-p2">
  <a href="#" className="u-gray200">
  Sign Out
  </a>