Skip to content

Commit

Permalink
fix: changes to webpack umd build, example
Browse files Browse the repository at this point in the history
  • Loading branch information
David Atchley committed Mar 16, 2017
1 parent 392f5d2 commit 49317b1
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 49 deletions.
50 changes: 49 additions & 1 deletion examples/simple/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
width: 20vw;
height: 20vw;
overflow: hidden;
resize: both;
padding: 5px;
text-align: center;
border: 1px solid #ccc;
Expand All @@ -35,13 +34,62 @@
white-space: nowrap;
}

.description {
width: 100%;
}

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.circle {
position: relative;
width: 2em;
height: 0;
padding: 1em 0;
margin: 1em auto;
border-radius: 50%;
background: #a7cd80;
color: #ffffff;
}

.xcontent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}

.xcontent:before {
content: '';
vertical-align: middle;
display: inline-block;
width: 0;
height: 100%;
}

.xcontent span {
vertical-align: middle;
display: inline-block;
line-height: 1;
font-size: 1em;
}

.line { padding: 0.5em; }
.line--1 { padding-left: 1em; }
.line--2 { padding-left: 2em; }
.line--3 { padding-left: 3em; }
.line--4 { padding-left: 4em; }
code {
color: #666;
font-size: .8em;
}

</style>
</head>
<body>
Expand Down
118 changes: 73 additions & 45 deletions examples/simple/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,56 +2,84 @@ import React from 'react';
import ReactDom from 'react-dom';
import ScaleText from '../../src/index';

const Circle = ({ text }) => (
<div className="circle" style={{ float: 'left' }}>
<div className="xcontent">
<span>{text}</span>
</div>
</div>
);

const Box = ({ text = "", centered = false, ...props }) => (
<div className="box">
<ScaleText {...props}>
<span className={`box-text ${centered ? 'centered' : ''}`}>
{text}
</span>
</ScaleText>
</div>
);

const App = () => (
<div>
<div className="box-descriptions">
<ul>
<li> <b>Box 1</b> - <code>&lt;ScaleText /&gt;</code> (<i>centered</i>)</li>
<li> <b>Box 2</b> - <code>&lt;ScaleText minFontSize={20} /&gt;</code> (<i>centered</i>)</li>
<li> <b>Box 3</b> - <code>&lt;ScaleText maxFontSize={55} /&gt;</code> (<i>centered</i>)</li>
<li> <b>Box 4</b> -
<code>&lt;ScaleText minFontSize={20} maxFontSize={55} /&gt;</code>
</li>
<li> <b>Box 5</b> - <code>&lt;ScaleText /&gt;</code></li>
</ul>
<h2>Examples</h2>
<p>To see the component in action, resize the browser window.</p>
<p>The markup rendering each box below is the following:<br/>
<code><pre style={{ whiteSpace: 'pre' }}>
<span className="line line--1">&lt;div class="box"&gt;</span><br/>
<span className="line line--2"> &lt;ScaleText&gt;</span><br/>
<span className="line line--3"> &lt;span class="box-text"&gt;</span><br/>
<span className="line line--4"> Box 1</span><br/>
<span className="line line--3"> &lt;/span&gt;</span><br/>
<span className="line line--2"> &lt;/ScaleText&gt;</span><br/>
<span className="line line--1">&lt;/div&gt;</span><br/>
</pre></code>
</p>
<div className="description">
<Circle text={1}/>
<code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText /&gt;</code>
<div style={{ clear: 'both' }}></div>
</div>
<div className="box-container">
<div className="box">
<ScaleText>
<span className="box-text centered">
Box 1
</span>
</ScaleText>
</div>
<div className="box">
<ScaleText minFontSize={20}>
<span className="box-text centered">
Box 2
</span>
</ScaleText>
</div>
<div className="box">
<ScaleText maxFontSize={55}>
<span className="box-text centered">
Box 3
</span>
</ScaleText>
</div>
<div className="box">
<ScaleText minFontSize={20} maxFontSize={55}>
<span className="box-text">
Box 4
</span>
</ScaleText>
</div>
<div className="box">
<ScaleText>
<span className="box-text">
Box 5
</span>
</ScaleText>
</div>
<Box text={"Box 1"} centered />
</div>

<div className="description">
<Circle text={2}/>
<code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText minFontSize={20} /&gt;</code>
<div style={{ clear: 'both' }}></div>
</div>
<div className="box-container">
<Box text={"Box 2"} centered minFontSize={20} />
</div>

<div className="description">
<Circle text={3}/>
<code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText maxFontSize={55} /&gt;</code>
<div style={{ clear: 'both' }}></div>
</div>
<div className="box-container">
<Box text={"Box 3"} centered maxFontSize={55} />
</div>

<div className="description">
<Circle text={4}/>
<code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText minFontSize={20} maxFontSize={55} /&gt;</code>
<div style={{ clear: 'both' }}></div>
</div>
<div className="box-container">
<Box text={"Box 4"} minFontSize={20} maxFontSize={55} />
</div>

<div className="description">
<Circle text={5}/>
<code style={{ float: 'left', margin: '1.5em 1em' }}>&lt;ScaleText /&gt;</code>
<div style={{ clear: 'both' }}></div>
</div>
<div className="box-container">
<Box text={"Box 4"} minFontSize={20} maxFontSize={55} />
</div>

</div>
);

Expand Down
5 changes: 2 additions & 3 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,8 @@ module.exports = {
output: {
path: __dirname + '/lib',
filename: fileName,
library: exportName,
libraryTarget: 'umd',
umdNamedDefine: true
library: exportName,
libraryTarget: 'umd'
},
plugins: plugins,
resolve: {
Expand Down

0 comments on commit 49317b1

Please sign in to comment.