Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Commit

Permalink
Convert to CSS modules (#16)
Browse files Browse the repository at this point in the history
Convert to CSS modules
  • Loading branch information
hharnisc authored Jan 26, 2017
1 parent b1ae2db commit 27f1930
Show file tree
Hide file tree
Showing 27 changed files with 260 additions and 533 deletions.
71 changes: 14 additions & 57 deletions .storybook/__storyshots__/Icon.shot
Original file line number Diff line number Diff line change
@@ -1,62 +1,19 @@
exports[`Default`] = `
<svg
height={50}
version="1.1"
viewBox="0 0 200 200"
width={50}
xmlns="http://www.w3.org/2000/svg">
<g>
<rect
fill="grey"
height="100%"
width="100%" />
<circle
cx="100"
cy="100"
fill="white"
r="80" />
</g>
</svg>
exports[`buffer`] = `
<i
className=" undefined bi bi-buffer" />
`;

exports[`Large`] = `
<svg
height={100}
version="1.1"
viewBox="0 0 200 200"
width={100}
xmlns="http://www.w3.org/2000/svg">
<g>
<rect
fill="grey"
height="100%"
width="100%" />
<circle
cx="100"
cy="100"
fill="white"
r="80" />
</g>
</svg>
exports[`circle-twitter`] = `
<i
className=" undefined bi bi-circle-twitter" />
`;

exports[`buffer`] = `
<svg
height={50}
version="1.1"
viewBox="0 0 16 16"
width={50}
xmlns="http://www.w3.org/2000/svg">
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1">
<g
fill="#323b43">
<path
d="M14.8975838,11.6596673 L13.3049713,10.9257049 C13.1684163,10.8627595 12.9449081,10.8627595 12.8082985,10.9257049 L8.24833642,13.0271856 C8.11178147,13.090131 7.88821853,13.090131 7.75166358,13.0271856 L3.19170155,10.9257049 C3.0550919,10.8627595 2.83158366,10.8627595 2.6950287,10.9257049 L1.10241622,11.6596673 C0.965861261,11.7226127 0.965861261,11.8255895 1.10241622,11.8885349 L7.75166358,14.9528456 C7.88821853,15.015791 8.11178147,15.015791 8.24833642,14.9528456 L14.8975838,11.8885349 C15.0341387,11.8255895 15.0341387,11.7226127 14.8975838,11.6596673 Z M14.8975838,7.88556618 L13.3049713,7.1516585 C13.1684163,7.08871306 12.9449081,7.08871306 12.8082985,7.1516585 L8.24833642,9.25308448 C8.11178147,9.31602991 7.88821853,9.31602991 7.75166358,9.25308448 L3.19170155,7.1516585 C3.0550919,7.08871306 2.83158366,7.08871306 2.6950287,7.1516585 L1.10241622,7.88556618 C0.965861261,7.94851162 0.965861261,8.05154307 1.10241622,8.1144885 L7.75166358,11.1787445 C7.88821853,11.2416899 8.11178147,11.2416899 8.24833642,11.1787445 L14.8975838,8.1144885 C15.0341387,8.05154307 15.0341387,7.94851162 14.8975838,7.88556618 Z M1.10241622,4.34038738 L7.75166358,7.40469806 C7.88821853,7.46764349 8.11178147,7.46764349 8.24833642,7.40469806 L14.8975838,4.34038738 C15.0341387,4.27744195 15.0341387,4.17446518 14.8975838,4.11151975 L8.24833642,1.04720908 C8.11178147,0.984263641 7.88821853,0.984263641 7.75166358,1.04720908 L1.10241622,4.11151975 C0.965861261,4.17446518 0.965861261,4.27744195 1.10241622,4.34038738 Z" />
</g>
</g>
</svg>
exports[`large`] = `
<i
className=" undefined bi bi-buffer" />
`;

exports[`small`] = `
<i
className=" undefined bi bi-buffer" />
`;
33 changes: 27 additions & 6 deletions .storybook/__storyshots__/Image.shot
Original file line number Diff line number Diff line change
@@ -1,23 +1,44 @@
exports[`Default`] = `
<img
alt="Image"
className=""
height={undefined}
src="https://buffer.com/images/app/[email protected]"
src="http://lorempixel.com/400/400/cats/"
width={undefined} />
`;

exports[`W=40px H=40px`] = `
<img
alt="Image"
className=""
height="40px"
src="http://lorempixel.com/400/400/cats/"
width="40px" />
`;

exports[`W=100%`] = `
<img
alt="Image"
className=""
height={undefined}
src="https://buffer.com/images/app/[email protected]"
src="http://lorempixel.com/400/400/cats/"
width="100%" />
`;

exports[`W=200px H=40px`] = `
exports[`border: circle`] = `
<img
alt="Image"
height="40px"
src="https://buffer.com/images/app/[email protected]"
width="200px" />
className=""
height={undefined}
src="http://lorempixel.com/400/400/cats/"
width={undefined} />
`;

exports[`border: rounded`] = `
<img
alt="Image"
className=""
height={undefined}
src="http://lorempixel.com/400/400/cats/"
width={undefined} />
`;
6 changes: 3 additions & 3 deletions .storybook/__storyshots__/Loader.shot
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ exports[`Default`] = `
<div
className={undefined}>
<i
className="bi bi-buffer-top undefined" />
className=" undefined bi bi-buffer-top" />
<i
className="bi bi-buffer-middle undefined" />
className=" undefined bi bi-buffer-middle" />
<i
className="bi bi-buffer-bottom undefined" />
className=" undefined bi bi-buffer-bottom" />
</div>
<p
className={undefined}>
Expand Down
118 changes: 10 additions & 108 deletions .storybook/__storyshots__/NavBar.shot
Original file line number Diff line number Diff line change
@@ -1,128 +1,30 @@
exports[`Default`] = `
<div
style={
Object {
"alignItems": "center",
"backgroundColor": "#fff",
"borderBottom": "1px solid #ced7df",
"boxSizing": "border-box",
"display": "flex",
"flexDirection": "row",
"height": 64,
"marginBottom": 32,
"padding": "0 16px",
"width": "100%",
}
}>
<div
style={
Object {
"display": "flex",
"marginRight": 8,
}
}>
<svg
height={15}
version="1.1"
viewBox="0 0 16 16"
width={15}
xmlns="http://www.w3.org/2000/svg">
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1">
<g
fill="#323b43">
<path
d="M14.8975838,11.6596673 L13.3049713,10.9257049 C13.1684163,10.8627595 12.9449081,10.8627595 12.8082985,10.9257049 L8.24833642,13.0271856 C8.11178147,13.090131 7.88821853,13.090131 7.75166358,13.0271856 L3.19170155,10.9257049 C3.0550919,10.8627595 2.83158366,10.8627595 2.6950287,10.9257049 L1.10241622,11.6596673 C0.965861261,11.7226127 0.965861261,11.8255895 1.10241622,11.8885349 L7.75166358,14.9528456 C7.88821853,15.015791 8.11178147,15.015791 8.24833642,14.9528456 L14.8975838,11.8885349 C15.0341387,11.8255895 15.0341387,11.7226127 14.8975838,11.6596673 Z M14.8975838,7.88556618 L13.3049713,7.1516585 C13.1684163,7.08871306 12.9449081,7.08871306 12.8082985,7.1516585 L8.24833642,9.25308448 C8.11178147,9.31602991 7.88821853,9.31602991 7.75166358,9.25308448 L3.19170155,7.1516585 C3.0550919,7.08871306 2.83158366,7.08871306 2.6950287,7.1516585 L1.10241622,7.88556618 C0.965861261,7.94851162 0.965861261,8.05154307 1.10241622,8.1144885 L7.75166358,11.1787445 C7.88821853,11.2416899 8.11178147,11.2416899 8.24833642,11.1787445 L14.8975838,8.1144885 C15.0341387,8.05154307 15.0341387,7.94851162 14.8975838,7.88556618 Z M1.10241622,4.34038738 L7.75166358,7.40469806 C7.88821853,7.46764349 8.11178147,7.46764349 8.24833642,7.40469806 L14.8975838,4.34038738 C15.0341387,4.27744195 15.0341387,4.17446518 14.8975838,4.11151975 L8.24833642,1.04720908 C8.11178147,0.984263641 7.88821853,0.984263641 7.75166358,1.04720908 L1.10241622,4.11151975 C0.965861261,4.17446518 0.965861261,4.27744195 1.10241622,4.34038738 Z" />
</g>
</g>
</svg>
</div>
className={undefined}>
<i
className=" undefined bi bi-buffer" />
<span
style={
Object {
"color": "#323b43",
"fontSize": 14,
"fontWeight": 600,
}
}>
className=" ">
Buffer
</span>
<span
style={
Object {
"color": "#323b43",
"fontSize": 14,
"fontWeight": 400,
}
}>
className="">

</span>
</div>
`;

exports[`Subtitle`] = `
<div
style={
Object {
"alignItems": "center",
"backgroundColor": "#fff",
"borderBottom": "1px solid #ced7df",
"boxSizing": "border-box",
"display": "flex",
"flexDirection": "row",
"height": 64,
"marginBottom": 32,
"padding": "0 16px",
"width": "100%",
}
}>
<div
style={
Object {
"display": "flex",
"marginRight": 8,
}
}>
<svg
height={15}
version="1.1"
viewBox="0 0 16 16"
width={15}
xmlns="http://www.w3.org/2000/svg">
<g
fill="none"
fillRule="evenodd"
stroke="none"
strokeWidth="1">
<g
fill="#323b43">
<path
d="M14.8975838,11.6596673 L13.3049713,10.9257049 C13.1684163,10.8627595 12.9449081,10.8627595 12.8082985,10.9257049 L8.24833642,13.0271856 C8.11178147,13.090131 7.88821853,13.090131 7.75166358,13.0271856 L3.19170155,10.9257049 C3.0550919,10.8627595 2.83158366,10.8627595 2.6950287,10.9257049 L1.10241622,11.6596673 C0.965861261,11.7226127 0.965861261,11.8255895 1.10241622,11.8885349 L7.75166358,14.9528456 C7.88821853,15.015791 8.11178147,15.015791 8.24833642,14.9528456 L14.8975838,11.8885349 C15.0341387,11.8255895 15.0341387,11.7226127 14.8975838,11.6596673 Z M14.8975838,7.88556618 L13.3049713,7.1516585 C13.1684163,7.08871306 12.9449081,7.08871306 12.8082985,7.1516585 L8.24833642,9.25308448 C8.11178147,9.31602991 7.88821853,9.31602991 7.75166358,9.25308448 L3.19170155,7.1516585 C3.0550919,7.08871306 2.83158366,7.08871306 2.6950287,7.1516585 L1.10241622,7.88556618 C0.965861261,7.94851162 0.965861261,8.05154307 1.10241622,8.1144885 L7.75166358,11.1787445 C7.88821853,11.2416899 8.11178147,11.2416899 8.24833642,11.1787445 L14.8975838,8.1144885 C15.0341387,8.05154307 15.0341387,7.94851162 14.8975838,7.88556618 Z M1.10241622,4.34038738 L7.75166358,7.40469806 C7.88821853,7.46764349 8.11178147,7.46764349 8.24833642,7.40469806 L14.8975838,4.34038738 C15.0341387,4.27744195 15.0341387,4.17446518 14.8975838,4.11151975 L8.24833642,1.04720908 C8.11178147,0.984263641 7.88821853,0.984263641 7.75166358,1.04720908 L1.10241622,4.11151975 C0.965861261,4.17446518 0.965861261,4.27744195 1.10241622,4.34038738 Z" />
</g>
</g>
</svg>
</div>
className={undefined}>
<i
className=" undefined bi bi-buffer" />
<span
style={
Object {
"color": "#323b43",
"fontSize": 14,
"fontWeight": 600,
}
}>
className=" ">
Buffer
</span>
<span
style={
Object {
"color": "#323b43",
"fontSize": 14,
"fontWeight": 400,
}
}>
className="">
 NavBar
</span>
</div>
Expand Down
53 changes: 5 additions & 48 deletions .storybook/__storyshots__/Text.shot
Original file line number Diff line number Diff line change
@@ -1,77 +1,34 @@
exports[`Bold`] = `
<span
style={
Object {
"color": undefined,
"fontSize": 14,
"fontWeight": 800,
}
}>
The quick brown fox jumps over the lazy dog
</span>
`;

exports[`Color`] = `
<span
style={
Object {
"color": "#329ced",
"fontSize": 14,
"fontWeight": 400,
}
}>
className=" ">
The quick brown fox jumps over the lazy dog
</span>
`;

exports[`Default`] = `
<span
style={
Object {
"color": undefined,
"fontSize": 14,
"fontWeight": 400,
}
}>
className="">
The quick brown fox jumps over the lazy dog
</span>
`;

exports[`Large`] = `
<span
style={
Object {
"color": undefined,
"fontSize": 36,
"fontWeight": 400,
}
}>
className=" ">
The quick brown fox jumps over the lazy dog
</span>
`;

exports[`Small`] = `
<span
style={
Object {
"color": undefined,
"fontSize": 10,
"fontWeight": 400,
}
}>
className=" ">
The quick brown fox jumps over the lazy dog
</span>
`;

exports[`Thin`] = `
<span
style={
Object {
"color": undefined,
"fontSize": 14,
"fontWeight": 200,
}
}>
className=" ">
The quick brown fox jumps over the lazy dog
</span>
`;
Loading

0 comments on commit 27f1930

Please sign in to comment.