From ebc1c1cdf4692e2f5ca37461c2c1d7bb9ee3f847 Mon Sep 17 00:00:00 2001 From: bhough Date: Fri, 16 Dec 2016 09:20:30 +0800 Subject: [PATCH 1/5] chore(textInput): textInput shorthand Adds shorthand helper for textInput selectors, including active, focus, and hover states. --- docs/index.html | 1069 +++++++++++++++++ .../__snapshots__/textInputs.test.js.snap | 99 ++ src/shorthand/test/textInputs.test.js | 21 + src/shorthand/textInputs.js | 77 ++ 4 files changed, 1266 insertions(+) create mode 100644 src/shorthand/test/__snapshots__/textInputs.test.js.snap create mode 100644 src/shorthand/test/textInputs.test.js create mode 100644 src/shorthand/textInputs.js diff --git a/docs/index.html b/docs/index.html index ec7efec3..9e9b45da 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,13 +9,1082 @@ +<<<<<<< HEAD +======= +
+
+
+
+

polished

+
+ + +
+ Need help reading this? +
+
+
+
+ + +
+ +

+ Mixins +

+ + +

These are reusable chunks of styles. By extracting common ones into small utilities you avoid repetition and mistakes.

+ + +
+
+ + + +
+ + +
+ +

+ clearFix +

+ + + + src/mixins/clearFix.js + + +
+ + +

CSS to contain a float (credit to CSSMojo).

+ + +
clearFix(parent: string?)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ parent (string? + = '&') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+   ...clearFix(),
+}
+
+// styled-components usage
+const div = styled.div`
+  ${clearFix()}
+`
+
+// CSS as JS Output
+
+'&::after': {
+  'clear': 'both',
+  'content': '',
+  'display': 'table'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ ellipsis +

+ + + + src/mixins/ellipsis.js + + +
+ + +

CSS to represent truncated text with an ellipsis.

+ + +
ellipsis(width: string?)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ width (string? + = '100%') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...ellipsis(250px)
+}
+
+// styled-components usage
+const div = styled.div`
+  ${ellipsis(250px)}
+
+
+// CSS as JS Output
+
+div: {
+  'display': 'inline-block',
+  'max-width': '250px',
+  'overflow': 'hidden',
+  'text-overflow': 'ellipsis',
+  'white-space': 'nowrap',
+  'word-wrap': 'normal'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ hiDPI +

+ + + + src/mixins/hiDPI.js + + +
+ + +

Generates a media query to target HiDPI devices.

+ + +
hiDPI(ratio: number?)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ ratio (number? + = 1.3) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+ [hiDPI(1.5)]: {
+   width: 200px;
+ }
+}
+
+// styled-components usage
+const div = styled.div`
+  ${hiDPI(1.5)} {
+    width: 200px;
+  }
+`
+
+// CSS as JS Output
+
+'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (-o-min-device-pixel-ratio: 1.5/1),
+ only screen and (min-resolution: 144dpi),
+ only screen and (min-resolution: 1.5dppx)': {
+  'width': '200px',
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ hideText +

+ + + + src/mixins/hideText.js + + +
+ + +

CSS to hide text to show a background image in a SEO-Friendly.

+ + +
hideText()
+ + + + + + + + + + + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  'background-image': 'url(logo.png)',
+  ...hideText(),
+}
+
+// styled-components usage
+const div = styled.div`
+  background-image: url(logo.png);
+  ${hideText()};
+`
+
+// CSS as JS Output
+
+'div': {
+  'background-image': 'url(logo.png)',
+  'text-indent': '101%',
+  'overflow': 'hidden',
+  'white-space': 'nowrap',
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ selection +

+ + + + src/mixins/selection.js + + +
+ + +

CSS to style the selection psuedo-element.

+ + +
selection(styles: Object, parent: string?)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ styles (Object) + +
+ +
+ +
+
+ parent (string? + = '') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...selection({
+    'background': 'blue'
+  }, 'section')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${selection({'background': 'blue'}, 'section')}
+`
+
+// CSS as JS Output
+
+'div': {
+  'section::-moz-selection': {
+    'background-color':'blue',
+  },
+  'section::selection': {
+    'background-color': 'blue',
+  }
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ size +

+ + + + src/mixins/size.js + + +
+ + +

Mixin to set the height and width properties in a single statement.

+ + +
size(height: string, width: string?)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ height (string) + +
+ +
+ +
+
+ width (string? + = height) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...size('300px', '250px')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${size('300px', '250px')}
+`
+
+// CSS as JS Output
+
+div {
+  'height': '300px',
+  'width': '250px',
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ timingFunctions +

+ + + + src/mixins/timingFunctions.js + + +
+ + +

String to represent commong easing functions as demonstrated here: (github.com/jaukia/easie).

+ + +
timingFunctions(timingFunction: TimingFunctions)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ timingFunction (TimingFunctions) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  'transition-timing-function': timingFunctions('easeInQuad')
+}
+
+// styled-components usage
+ const div = styled.div`
+  transition-timing-function: ${timingFunctions('easeInQuad')};
+`
+
+// CSS as JS Output
+
+'div': {
+  'transition-timing-function': 'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ wordWrap +

+ + + + src/mixins/wordWrap.js + + +
+ + +

Provides an easy way to change the word-wrap property

+ + +
wordWrap(wrap: string?)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ wrap (string? + = 'break-word') + +
+ +
+ +
+ + + + + + + + +>>>>>>> 3111967... chore(textInput): textInput shorthand

polished

+<<<<<<< HEAD +======= +// styled-components usage +const div = styled.div` + ${wordWrap('break-all')} + + +// CSS as JS Output + +const styles = { + overflow-wrap: 'break-all', + word-wrap: 'break-all', + word-break: 'break-all', +} + + + + + + + + +
+ + + + +
+ +

+ Helpers +

+ + +

Tiny helper functions that make your life easier.

+ + +
+
+ + + +
+ + +
+ +

+ stripUnit +

+ + + + src/helpers/stripUnit.js + + +
+ + +

Strip the unit from a given CSS value, returning just the number. (or the original value if an invalid string was passed)

+ + +
stripUnit(value: string): (number | string)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ value (string) + +
+ +
+ +
+ + + + + + +
Returns
+ (number | string) + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  '--dimension': stripUnit(100px)
+}
+
+// styled-components usage
+const div = styled.div`
+  --dimension: ${stripUnit(100px)}
+`
+
+// CSS in JS Output
+
+element {
+  '--dimension': 100
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ em +

+ + + + src/helpers/em.js + + +
+ + +

Convert pixel value to ems. The default base value is 16px, but can be changed by passing a +second argument to the function.

+ + +
em(pxval: (string | number), base: (string | number)?): String
+ + + + + + + + + + +
Parameters
+
+ +
+
+ pxval ((string | number)) + The pixel value you want to convert + +
+ +
+ +
+
+ base ((string | number)? + = "16px") + The base size to convert from + +
+ +
+ +
+ + + + + + +
Returns
+ String: + The converted value + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  'height': em('16px')
+}
+
+// styled-components usage
+const div = styled.div`
+  height: ${em('16px')}
+`
+
+// CSS in JS Output
+
+element {
+  'height': '1em'
+}
+ + + + + + + + +
+ + + +
+
+
+ + +>>>>>>> 3111967... chore(textInput): textInput shorthand diff --git a/src/shorthand/test/__snapshots__/textInputs.test.js.snap b/src/shorthand/test/__snapshots__/textInputs.test.js.snap new file mode 100644 index 00000000..231a064c --- /dev/null +++ b/src/shorthand/test/__snapshots__/textInputs.test.js.snap @@ -0,0 +1,99 @@ +exports[`textInputs populates all active text input selectors 1`] = ` +Object { + " + input[type=\"color\"]:active, + input[type=\"date\"]:active, + input[type=\"datetime\"]:active, + input[type=\"datetime-local\"]:active, + input[type=\"email\"]:active, + input[type=\"month\"]:active, + input[type=\"number\"]:active, + input[type=\"password\"]:active, + input[type=\"search\"]:active, + input[type=\"tel\"]:active, + input[type=\"text\"]:active, + input[type=\"time\"]:active, + input[type=\"url\"]:active, + input[type=\"week\"]:active, + input:not([type]):active, + textarea:active + ": Object { + "border-color": "black", + }, +} +`; + +exports[`textInputs populates all base text input selectors 1`] = ` +Object { + " + input[type=\"color\"], + input[type=\"date\"], + input[type=\"datetime\"], + input[type=\"datetime-local\"], + input[type=\"email\"], + input[type=\"month\"], + input[type=\"number\"], + input[type=\"password\"], + input[type=\"search\"], + input[type=\"tel\"], + input[type=\"text\"], + input[type=\"time\"], + input[type=\"url\"], + input[type=\"week\"], + input:not([type]), + textarea + ": Object { + "border-color": "black", + }, +} +`; + +exports[`textInputs populates all focus text input selectors 1`] = ` +Object { + " + input[type=\"color\"]:focus, + input[type=\"date\"]:focus, + input[type=\"datetime\"]:focus, + input[type=\"datetime-local\"]:focus, + input[type=\"email\"]:focus, + input[type=\"month\"]:focus, + input[type=\"number\"]:focus, + input[type=\"password\"]:focus, + input[type=\"search\"]:focus, + input[type=\"tel\"]:focus, + input[type=\"text\"]:focus, + input[type=\"time\"]:focus, + input[type=\"url\"]:focus, + input[type=\"week\"]:focus, + input:not([type]):focus, + textarea:focus + ": Object { + "border-color": "black", + }, +} +`; + +exports[`textInputs populates all hover text input selectors 1`] = ` +Object { + " + input[type=\"color\"]:hover, + input[type=\"date\"]:hover, + input[type=\"datetime\"]:hover, + input[type=\"datetime-local\"]:hover, + input[type=\"email\"]:hover, + input[type=\"month\"]:hover, + input[type=\"number\"]:hover, + input[type=\"password\"]:hover, + input[type=\"search\"]:hover, + input[type=\"tel\"]:hover, + input[type=\"text\"]:hover, + input[type=\"time\"]:hover, + input[type=\"url\"]:hover, + input[type=\"week\"]:hover, + input:not([type]):hover, + textarea:hover + ": Object { + "border-color": "black", + }, +} +`; diff --git a/src/shorthand/test/textInputs.test.js b/src/shorthand/test/textInputs.test.js new file mode 100644 index 00000000..78da9913 --- /dev/null +++ b/src/shorthand/test/textInputs.test.js @@ -0,0 +1,21 @@ +import textInputs from '../textInputs' + +describe('textInputs', function() { + it('populates all base text input selectors', function() { + expect({[textInputs()]: {'border-color': 'black'}}).toMatchSnapshot() + }) + it('populates all active text input selectors', function() { + expect({[textInputs('active')]: {'border-color': 'black'}}).toMatchSnapshot() + }) + it('populates all focus text input selectors', function() { + expect({[textInputs('focus')]: {'border-color': 'black'}}).toMatchSnapshot() + }) + it('populates all hover text input selectors', function() { + expect({[textInputs('hover')]: {'border-color': 'black'}}).toMatchSnapshot() + }) + it('throws an error when passed a state it does not recognize', function() { + expect( + function () { return {[textInputs('clicked')]: {'border-color': 'black'}} } + ).toThrow('textInputs only accepts the following state: "active", "focus", or "hover". You can also pass no state at all.') + }) +}) diff --git a/src/shorthand/textInputs.js b/src/shorthand/textInputs.js new file mode 100644 index 00000000..d8636e29 --- /dev/null +++ b/src/shorthand/textInputs.js @@ -0,0 +1,77 @@ +// @flow + +/** + * Populates a selector that targets all text inputs. You can pass an optional state to append to the selector. + * @example + * // Styles as object usage + * const styles = { + * [textInputs('active')]: { + * 'border': 'none' + * } + * } + * + * // styled-components usage + * const div = styled.div` + * ${textInputs('active')} { + * border: none; + * } + * ` + * + * // CSS in JS Output + * + * 'input[type="color"]:active, + * input[type="date"]:active, + * input[type="datetime"]:active, + * input[type="datetime-local"]:active, + * input[type="email"]:active, + * input[type="month"]:active, + * input[type="number"]:active, + * input[type="password"]:active, + * input[type="search"]:active, + * input[type="tel"]:active, + * input[type="text"]:active, + * input[type="time"]:active, + * input[type="url"]:active, + * input[type="week"]:active, + * input:not([type]):active, + * textarea:active': { + * 'border': 'none' + * } + */ + +function generateTextInputs(state: ?string) { + const stateSuffix = state ? `:${state}` : '' + return ` + input[type="color"]${stateSuffix}, + input[type="date"]${stateSuffix}, + input[type="datetime"]${stateSuffix}, + input[type="datetime-local"]${stateSuffix}, + input[type="email"]${stateSuffix}, + input[type="month"]${stateSuffix}, + input[type="number"]${stateSuffix}, + input[type="password"]${stateSuffix}, + input[type="search"]${stateSuffix}, + input[type="tel"]${stateSuffix}, + input[type="text"]${stateSuffix}, + input[type="time"]${stateSuffix}, + input[type="url"]${stateSuffix}, + input[type="week"]${stateSuffix}, + input:not([type])${stateSuffix}, + textarea${stateSuffix} + ` +} + +const stateMap = [undefined, 'active', 'focus', 'hover'] + +type State = + | typeof(undefined) + | 'active' + | 'focus' + | 'hover' + +function textInputs(state: State) { + if (!stateMap.includes(state)) throw new Error('textInputs only accepts the following state: "active", "focus", or "hover". You can also pass no state at all.') + return generateTextInputs(state) +} + +export default textInputs From 7bea560e79e3eb435b7a4d0c5551a6996a686d86 Mon Sep 17 00:00:00 2001 From: bhough Date: Sat, 17 Dec 2016 00:09:06 +0800 Subject: [PATCH 2/5] chore(shorthand): Simplify Buttons and Inputs to use shared helper buttons and textInputs shorthand now use a shared internalHelper statefulSelectors. Also removed build export for polished. --- docs/index.html | 20 +-- src/index.js | 8 +- src/internalHelpers/statefulSelectors.js | 24 ++++ .../statefulSelectors.test.js.snap | 38 +++++ .../test/statefulSelectors.test.js | 74 ++++++++++ src/shorthand/buttons.js | 51 +++++++ .../test/__snapshots__/buttons.test.js.snap | 49 +++++++ .../__snapshots__/textInputs.test.js.snap | 130 ++++++++++-------- src/shorthand/test/buttons.test.js | 21 +++ src/shorthand/test/textInputs.test.js | 14 +- src/shorthand/textInputs.js | 80 ++++++----- 11 files changed, 396 insertions(+), 113 deletions(-) create mode 100644 src/internalHelpers/statefulSelectors.js create mode 100644 src/internalHelpers/test/__snapshots__/statefulSelectors.test.js.snap create mode 100644 src/internalHelpers/test/statefulSelectors.test.js create mode 100644 src/shorthand/buttons.js create mode 100644 src/shorthand/test/__snapshots__/buttons.test.js.snap create mode 100644 src/shorthand/test/buttons.test.js diff --git a/docs/index.html b/docs/index.html index 9e9b45da..f2f78854 100644 --- a/docs/index.html +++ b/docs/index.html @@ -180,7 +180,7 @@

- + src/mixins/clearFix.js @@ -266,7 +266,7 @@

- + src/mixins/ellipsis.js @@ -355,7 +355,7 @@

- + src/mixins/hiDPI.js @@ -447,7 +447,7 @@

- + src/mixins/hideText.js @@ -522,7 +522,7 @@

- + src/mixins/selection.js @@ -621,7 +621,7 @@

- + src/mixins/size.js @@ -714,7 +714,7 @@

- + src/mixins/timingFunctions.js @@ -797,7 +797,7 @@

- + src/mixins/wordWrap.js @@ -900,7 +900,7 @@

- + src/helpers/stripUnit.js @@ -988,7 +988,7 @@

- + src/helpers/em.js diff --git a/src/index.js b/src/index.js index 114df926..a2c736b3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,12 @@ // @flow // Helpers -import stripUnit from './helpers/stripUnit' import em from './helpers/em' +<<<<<<< HEAD import modularScale from './helpers/modularScale' import rem from './helpers/rem' +======= +import stripUnit from './helpers/stripUnit' +>>>>>>> 4042d23... chore(shorthand): Simplify Buttons and Inputs to use shared helper // Mixins import clearFix from './mixins/clearFix' @@ -17,6 +20,7 @@ import size from './mixins/size' import timingFunctions from './mixins/timingFunctions' import wordWrap from './mixins/wordWrap' +<<<<<<< HEAD // Shorthands import animation from './shorthands/animation' @@ -40,6 +44,8 @@ const polished = { export default polished +======= +>>>>>>> 4042d23... chore(shorthand): Simplify Buttons and Inputs to use shared helper export { animation, clearFix, diff --git a/src/internalHelpers/statefulSelectors.js b/src/internalHelpers/statefulSelectors.js new file mode 100644 index 00000000..b717885c --- /dev/null +++ b/src/internalHelpers/statefulSelectors.js @@ -0,0 +1,24 @@ +// @flow +function generateSelectors(template: Function, state: string|null) { + const stateSuffix = state ? `:${state}` : '' + return template(stateSuffix) +} + +type State = + | typeof(undefined) + | null + | string; + +function statefulSelectors(states: Array, template: Function, stateMap: ?Array) { + if (!template) throw new Error('You must provide a template to this method.') + if (states.length === 0) return generateSelectors(template, null) + let selectors = [] + for (let i = 0; i < states.length; i += 1) { + if (stateMap && !stateMap.includes(states[i])) throw new Error('You passed an unsupported selector state to this method.') + selectors.push(generateSelectors(template, states[i])) + } + selectors = selectors.join(',') + return selectors +} + +export default statefulSelectors diff --git a/src/internalHelpers/test/__snapshots__/statefulSelectors.test.js.snap b/src/internalHelpers/test/__snapshots__/statefulSelectors.test.js.snap new file mode 100644 index 00000000..a5ede982 --- /dev/null +++ b/src/internalHelpers/test/__snapshots__/statefulSelectors.test.js.snap @@ -0,0 +1,38 @@ +exports[`statefulSelectors populates both base selectors and selectors for a single state 1`] = ` +Object { + "section a, + p a,section a::after, + p a::after": Object { + "content": "hello", + }, +} +`; + +exports[`statefulSelectors populates both base selectors and selectors for a single state when not passed a stateMap 1`] = ` +Object { + "section a, + p a,section a::after, + p a::after": Object { + "content": "hello", + }, +} +`; + +exports[`statefulSelectors populates selectors for a multiple states 1`] = ` +Object { + "section a::before, + p a::before,section a::after, + p a::after": Object { + "content": "hello", + }, +} +`; + +exports[`statefulSelectors populates selectors for a single state 1`] = ` +Object { + "section a::before, + p a::before": Object { + "content": "hello", + }, +} +`; diff --git a/src/internalHelpers/test/statefulSelectors.test.js b/src/internalHelpers/test/statefulSelectors.test.js new file mode 100644 index 00000000..cecaaa63 --- /dev/null +++ b/src/internalHelpers/test/statefulSelectors.test.js @@ -0,0 +1,74 @@ +import statefulSelectors from '../statefulSelectors' + +const mockStateMap = [null, ':before', ':after'] + +function mockTemplate(pseudoSelector) { + return `section a${pseudoSelector}, + p a${pseudoSelector}` +} + +describe('statefulSelectors', function() { + // Selectors + it('populates selectors for a single state', function() { + expect({ + [statefulSelectors([':before'], mockTemplate, mockStateMap)]: { + 'content': 'hello' + } + }).toMatchSnapshot() + }) + it('populates selectors for a multiple states', function() { + expect({ + [statefulSelectors([':before', ':after'], mockTemplate, mockStateMap)]: { + 'content': 'hello' + } + }).toMatchSnapshot() + }) + it('populates both base selectors and selectors for a single state', function() { + expect({ + [statefulSelectors([null, ':after'], mockTemplate, mockStateMap)]: { + 'content': 'hello' + } + }).toMatchSnapshot() + }) + it('populates both base selectors and selectors for a single state when not passed a stateMap', function() { + expect({ + [statefulSelectors([null, ':after'], mockTemplate)]: { + 'content': 'hello'} + }).toMatchSnapshot() + }) + + // Errors + it('throws an error when passed a state it does not recognize', function() { + expect( + function () { + return { + [statefulSelectors([':visited'], mockTemplate, mockStateMap)]: { + 'content': 'hello' + } + } + } + ).toThrow('You passed an unsupported selector state to this method') + }) + it('throws an error when passed one of the states it is passed is not recognized', function() { + expect( + function () { + return { + [statefulSelectors(['hover', ':visited'], mockTemplate, mockStateMap)]: { + 'content': 'hello' + } + } + } + ).toThrow('You passed an unsupported selector state to this method') + }) + it('throws an error when not passed a template', function() { + expect( + function () { + return { + [statefulSelectors([':visited'])]: { + 'content': 'hello' + } + } + } + ).toThrow('You must provide a template to this method.') + }) +}) diff --git a/src/shorthand/buttons.js b/src/shorthand/buttons.js new file mode 100644 index 00000000..c1aeb041 --- /dev/null +++ b/src/shorthand/buttons.js @@ -0,0 +1,51 @@ +// @flow +import statefulSelectors from '../internalHelpers/statefulSelectors' + +/** + * Populates selectors that target all buttons. You can pass optional states to append to the selectors. + * @example + * // Styles as object usage + * const styles = { + * [buttons('active')]: { + * 'border': 'none' + * } + * } + * + * // styled-components usage + * const div = styled.div` + * ${buttons('active')} { + * border: none; + * } + * ` + * + * // CSS in JS Output + * + * 'button:active, + * 'input[type="button"]:active, + * 'input[type=\"reset\"]:active, + * 'input[type=\"submit\"]:active: { + * 'border': 'none' + * } + */ + +const stateMap = [undefined, null, 'active', 'focus', 'hover'] + +function template(state) { + return `button${state}, + input[type="button"]${state}, + input[type="reset"]${state}, + input[type="submit"]${state}` +} + +type State = + | typeof(undefined) + | null + | 'active' + | 'focus' + | 'hover'; + +function buttons(...states: Array) { + return statefulSelectors(states, template, stateMap) +} + +export default buttons diff --git a/src/shorthand/test/__snapshots__/buttons.test.js.snap b/src/shorthand/test/__snapshots__/buttons.test.js.snap new file mode 100644 index 00000000..4202a750 --- /dev/null +++ b/src/shorthand/test/__snapshots__/buttons.test.js.snap @@ -0,0 +1,49 @@ +exports[`buttons populates base button selectors 1`] = ` +Object { + "button, + input[type=\"button\"], + input[type=\"reset\"], + input[type=\"submit\"]": Object { + "border-color": "black", + }, +} +`; + +exports[`buttons populates both base selectors and selectors for a single state 1`] = ` +Object { + "button, + input[type=\"button\"], + input[type=\"reset\"], + input[type=\"submit\"],button:focus, + input[type=\"button\"]:focus, + input[type=\"reset\"]:focus, + input[type=\"submit\"]:focus": Object { + "border-color": "black", + }, +} +`; + +exports[`buttons populates button selectors for multiple states 1`] = ` +Object { + "button:active, + input[type=\"button\"]:active, + input[type=\"reset\"]:active, + input[type=\"submit\"]:active,button:focus, + input[type=\"button\"]:focus, + input[type=\"reset\"]:focus, + input[type=\"submit\"]:focus": Object { + "border-color": "black", + }, +} +`; + +exports[`buttons populates buttons selectors for a single state 1`] = ` +Object { + "button:active, + input[type=\"button\"]:active, + input[type=\"reset\"]:active, + input[type=\"submit\"]:active": Object { + "border-color": "black", + }, +} +`; diff --git a/src/shorthand/test/__snapshots__/textInputs.test.js.snap b/src/shorthand/test/__snapshots__/textInputs.test.js.snap index 231a064c..55dd154f 100644 --- a/src/shorthand/test/__snapshots__/textInputs.test.js.snap +++ b/src/shorthand/test/__snapshots__/textInputs.test.js.snap @@ -1,32 +1,6 @@ -exports[`textInputs populates all active text input selectors 1`] = ` +exports[`textInputs populates base text input selectors 1`] = ` Object { - " - input[type=\"color\"]:active, - input[type=\"date\"]:active, - input[type=\"datetime\"]:active, - input[type=\"datetime-local\"]:active, - input[type=\"email\"]:active, - input[type=\"month\"]:active, - input[type=\"number\"]:active, - input[type=\"password\"]:active, - input[type=\"search\"]:active, - input[type=\"tel\"]:active, - input[type=\"text\"]:active, - input[type=\"time\"]:active, - input[type=\"url\"]:active, - input[type=\"week\"]:active, - input:not([type]):active, - textarea:active - ": Object { - "border-color": "black", - }, -} -`; - -exports[`textInputs populates all base text input selectors 1`] = ` -Object { - " - input[type=\"color\"], + "input[type=\"color\"], input[type=\"date\"], input[type=\"datetime\"], input[type=\"datetime-local\"], @@ -41,17 +15,30 @@ Object { input[type=\"url\"], input[type=\"week\"], input:not([type]), - textarea - ": Object { + textarea": Object { "border-color": "black", }, } `; -exports[`textInputs populates all focus text input selectors 1`] = ` +exports[`textInputs populates both base selectors and selectors for a single state 1`] = ` Object { - " - input[type=\"color\"]:focus, + "input[type=\"color\"], + input[type=\"date\"], + input[type=\"datetime\"], + input[type=\"datetime-local\"], + input[type=\"email\"], + input[type=\"month\"], + input[type=\"number\"], + input[type=\"password\"], + input[type=\"search\"], + input[type=\"tel\"], + input[type=\"text\"], + input[type=\"time\"], + input[type=\"url\"], + input[type=\"week\"], + input:not([type]), + textarea,input[type=\"color\"]:focus, input[type=\"date\"]:focus, input[type=\"datetime\"]:focus, input[type=\"datetime-local\"]:focus, @@ -66,33 +53,68 @@ Object { input[type=\"url\"]:focus, input[type=\"week\"]:focus, input:not([type]):focus, - textarea:focus - ": Object { + textarea:focus": Object { + "border-color": "black", + }, +} +`; + +exports[`textInputs populates text input selectors for a single state 1`] = ` +Object { + "input[type=\"color\"]:active, + input[type=\"date\"]:active, + input[type=\"datetime\"]:active, + input[type=\"datetime-local\"]:active, + input[type=\"email\"]:active, + input[type=\"month\"]:active, + input[type=\"number\"]:active, + input[type=\"password\"]:active, + input[type=\"search\"]:active, + input[type=\"tel\"]:active, + input[type=\"text\"]:active, + input[type=\"time\"]:active, + input[type=\"url\"]:active, + input[type=\"week\"]:active, + input:not([type]):active, + textarea:active": Object { "border-color": "black", }, } `; -exports[`textInputs populates all hover text input selectors 1`] = ` +exports[`textInputs populates text input selectors for multiple states 1`] = ` Object { - " - input[type=\"color\"]:hover, - input[type=\"date\"]:hover, - input[type=\"datetime\"]:hover, - input[type=\"datetime-local\"]:hover, - input[type=\"email\"]:hover, - input[type=\"month\"]:hover, - input[type=\"number\"]:hover, - input[type=\"password\"]:hover, - input[type=\"search\"]:hover, - input[type=\"tel\"]:hover, - input[type=\"text\"]:hover, - input[type=\"time\"]:hover, - input[type=\"url\"]:hover, - input[type=\"week\"]:hover, - input:not([type]):hover, - textarea:hover - ": Object { + "input[type=\"color\"]:active, + input[type=\"date\"]:active, + input[type=\"datetime\"]:active, + input[type=\"datetime-local\"]:active, + input[type=\"email\"]:active, + input[type=\"month\"]:active, + input[type=\"number\"]:active, + input[type=\"password\"]:active, + input[type=\"search\"]:active, + input[type=\"tel\"]:active, + input[type=\"text\"]:active, + input[type=\"time\"]:active, + input[type=\"url\"]:active, + input[type=\"week\"]:active, + input:not([type]):active, + textarea:active,input[type=\"color\"]:focus, + input[type=\"date\"]:focus, + input[type=\"datetime\"]:focus, + input[type=\"datetime-local\"]:focus, + input[type=\"email\"]:focus, + input[type=\"month\"]:focus, + input[type=\"number\"]:focus, + input[type=\"password\"]:focus, + input[type=\"search\"]:focus, + input[type=\"tel\"]:focus, + input[type=\"text\"]:focus, + input[type=\"time\"]:focus, + input[type=\"url\"]:focus, + input[type=\"week\"]:focus, + input:not([type]):focus, + textarea:focus": Object { "border-color": "black", }, } diff --git a/src/shorthand/test/buttons.test.js b/src/shorthand/test/buttons.test.js new file mode 100644 index 00000000..a4ad764c --- /dev/null +++ b/src/shorthand/test/buttons.test.js @@ -0,0 +1,21 @@ +import buttons from '../buttons' + +describe('buttons', function() { + it('populates base button selectors', function() { + expect({[buttons()]: {'border-color': 'black'}}).toMatchSnapshot() + }) + it('populates buttons selectors for a single state', function() { + expect({[buttons('active')]: {'border-color': 'black'}}).toMatchSnapshot() + }) + it('populates both base selectors and selectors for a single state', function() { + expect({[buttons(null, 'focus')]: {'border-color': 'black'}}).toMatchSnapshot() + }) + it('populates button selectors for multiple states', function() { + expect({[buttons('active', 'focus')]: {'border-color': 'black'}}).toMatchSnapshot() + }) + it('throws an error when passed a state it does not recognize', function() { + expect( + function () { return {[buttons('clicked')]: {'border-color': 'black'}} } + ).toThrow('You passed an unsupported selector state to this method') + }) +}) diff --git a/src/shorthand/test/textInputs.test.js b/src/shorthand/test/textInputs.test.js index 78da9913..8695001e 100644 --- a/src/shorthand/test/textInputs.test.js +++ b/src/shorthand/test/textInputs.test.js @@ -1,21 +1,21 @@ import textInputs from '../textInputs' describe('textInputs', function() { - it('populates all base text input selectors', function() { + it('populates base text input selectors', function() { expect({[textInputs()]: {'border-color': 'black'}}).toMatchSnapshot() }) - it('populates all active text input selectors', function() { + it('populates text input selectors for a single state', function() { expect({[textInputs('active')]: {'border-color': 'black'}}).toMatchSnapshot() }) - it('populates all focus text input selectors', function() { - expect({[textInputs('focus')]: {'border-color': 'black'}}).toMatchSnapshot() + it('populates both base selectors and selectors for a single state', function() { + expect({[textInputs(null, 'focus')]: {'border-color': 'black'}}).toMatchSnapshot() }) - it('populates all hover text input selectors', function() { - expect({[textInputs('hover')]: {'border-color': 'black'}}).toMatchSnapshot() + it('populates text input selectors for multiple states', function() { + expect({[textInputs('active', 'focus')]: {'border-color': 'black'}}).toMatchSnapshot() }) it('throws an error when passed a state it does not recognize', function() { expect( function () { return {[textInputs('clicked')]: {'border-color': 'black'}} } - ).toThrow('textInputs only accepts the following state: "active", "focus", or "hover". You can also pass no state at all.') + ).toThrow('You passed an unsupported selector state to this method') }) }) diff --git a/src/shorthand/textInputs.js b/src/shorthand/textInputs.js index d8636e29..92e195c4 100644 --- a/src/shorthand/textInputs.js +++ b/src/shorthand/textInputs.js @@ -1,7 +1,8 @@ // @flow +import statefulSelectors from '../internalHelpers/statefulSelectors' /** - * Populates a selector that targets all text inputs. You can pass an optional state to append to the selector. + * Populates selectors that target all text inputs. You can pass optional states to append to the selectors. * @example * // Styles as object usage * const styles = { @@ -19,59 +20,56 @@ * * // CSS in JS Output * - * 'input[type="color"]:active, - * input[type="date"]:active, - * input[type="datetime"]:active, - * input[type="datetime-local"]:active, - * input[type="email"]:active, - * input[type="month"]:active, - * input[type="number"]:active, - * input[type="password"]:active, - * input[type="search"]:active, - * input[type="tel"]:active, - * input[type="text"]:active, - * input[type="time"]:active, - * input[type="url"]:active, - * input[type="week"]:active, + * ''input[type="color"]:active, + * 'input[type="date"]:active, + * 'input[type="datetime"]:active, + * 'input[type="datetime-local"]:active, + * 'input[type="email"]:active, + * 'input[type="month"]:active, + * 'input[type="number"]:active, + * 'input[type="password"]:active, + * 'input[type="search"]:active, + * 'input[type="tel"]:active, + * 'input[type="text"]:active, + * 'input[type="time"]:active, + * 'input[type="url"]:active, + * 'input[type="week"]:active, * input:not([type]):active, * textarea:active': { * 'border': 'none' * } */ -function generateTextInputs(state: ?string) { - const stateSuffix = state ? `:${state}` : '' - return ` - input[type="color"]${stateSuffix}, - input[type="date"]${stateSuffix}, - input[type="datetime"]${stateSuffix}, - input[type="datetime-local"]${stateSuffix}, - input[type="email"]${stateSuffix}, - input[type="month"]${stateSuffix}, - input[type="number"]${stateSuffix}, - input[type="password"]${stateSuffix}, - input[type="search"]${stateSuffix}, - input[type="tel"]${stateSuffix}, - input[type="text"]${stateSuffix}, - input[type="time"]${stateSuffix}, - input[type="url"]${stateSuffix}, - input[type="week"]${stateSuffix}, - input:not([type])${stateSuffix}, - textarea${stateSuffix} - ` -} +const stateMap = [undefined, null, 'active', 'focus', 'hover'] -const stateMap = [undefined, 'active', 'focus', 'hover'] +function template(state) { + return `input[type="color"]${state}, + input[type="date"]${state}, + input[type="datetime"]${state}, + input[type="datetime-local"]${state}, + input[type="email"]${state}, + input[type="month"]${state}, + input[type="number"]${state}, + input[type="password"]${state}, + input[type="search"]${state}, + input[type="tel"]${state}, + input[type="text"]${state}, + input[type="time"]${state}, + input[type="url"]${state}, + input[type="week"]${state}, + input:not([type])${state}, + textarea${state}` +} type State = | typeof(undefined) + | null | 'active' | 'focus' - | 'hover' + | 'hover'; -function textInputs(state: State) { - if (!stateMap.includes(state)) throw new Error('textInputs only accepts the following state: "active", "focus", or "hover". You can also pass no state at all.') - return generateTextInputs(state) +function textInputs(...states: Array) { + return statefulSelectors(states, template, stateMap) } export default textInputs From 9b42eff25c69289c9dedc41236691c401f2d4fb0 Mon Sep 17 00:00:00 2001 From: bhough Date: Sat, 17 Dec 2016 01:14:43 +0800 Subject: [PATCH 3/5] chore(docs): Changes to buttons and textInputs docs Updated styled-components example in buttons and textInputs. Added private doc explaining why we use the statefulSelectors internal helper --- docs/index.html | 691 +++++++++++++++++++++++ src/internalHelpers/statefulSelectors.js | 4 + src/shorthand/buttons.js | 2 +- src/shorthand/textInputs.js | 2 +- 4 files changed, 697 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index f2f78854..edb06362 100644 --- a/docs/index.html +++ b/docs/index.html @@ -180,7 +180,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/clearFix.js @@ -266,7 +270,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/ellipsis.js @@ -355,7 +363,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/hiDPI.js @@ -447,7 +459,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/hideText.js @@ -522,7 +538,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/selection.js @@ -621,7 +641,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/size.js @@ -714,7 +738,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/timingFunctions.js @@ -797,7 +825,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/wordWrap.js @@ -900,7 +932,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/helpers/stripUnit.js @@ -988,7 +1024,11 @@

+<<<<<<< HEAD +======= + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/helpers/em.js @@ -1039,9 +1079,32 @@

+<<<<<<< HEAD
Returns
String: The converted value +======= + + src/helpers/rem.js + + + + + +

Convert pixel value to rems. The default base value is 16px, but can be changed by passing a +second argument to the function.

+ + +
rem(pxval: (string | number), base: (string | number)?)
+ + + + + + + + +>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs @@ -1066,7 +1129,635 @@

// CSS in JS Output element { +<<<<<<< HEAD 'height': '1em' +======= + 'height': '1rem' +} + + + + + + + + + + + + + +
+ + +
+ +

+ modularScale +

+ + + + src/helpers/modularScale.js + + +
+ + +

Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.

+ + +
modularScale(steps: number, base: (number | string)?, ratio: Ratio?)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ steps (number) + +
+ +
+ +
+
+ base ((number | string)? + = '1em') + +
+ +
+ +
+
+ ratio (Ratio? + = 'perfectFourth') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+   // Increment two steps up the default scale
+  'font-size': modularScale(2)
+}
+
+// styled-components usage
+const div = styled.div`
+   // Increment two steps up the default scale
+  font-size: ${modularScale(2)}
+`
+
+// CSS in JS Output
+
+element {
+  'font-size': '1.77689em'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ placeholder +

+ + + + src/mixins/placeholder.js + + +
+ + +

CSS to style the selection psuedo-element.

+ + +
placeholder(styles: Object, parent: string?)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ styles (Object) + +
+ +
+ +
+
+ parent (string? + = '&') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...placeholder(styles)
+}
+
+// styled-components usage
+const div = styled.input`
+   ${placeholder(css`styles`)}
+`
+
+// CSS as JS Output
+
+'input': {
+  '&:-moz-placeholder': {
+    'color': 'blue',
+  },
+  '&:-ms-input-placeholder': {
+    'color': 'blue',
+  },
+  '&::-moz-placeholder': {
+    'color': 'blue',
+  },
+  '&::-webkit-input-placeholder': {
+    'color': 'blue',
+  },
+},
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ retinaImage +

+ + + + src/mixins/retinaImage.js + + +
+ + +

The retina-image mixin is a helper to generate a retina background image and non-retina +background image. The retina background image will output to a HiDPI media query. The mixin uses +a _2x.png filename suffix by default.

+ + +
retinaImage(filename: string, backgroundSize: string, extension: string?, retinaFilename: string, retinaSuffix: string?)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ filename (string) + +
+ +
+ +
+
+ backgroundSize (string) + +
+ +
+ +
+
+ extension (string? + = 'png') + +
+ +
+ +
+
+ retinaFilename (string) + +
+ +
+ +
+
+ retinaSuffix (string? + = '_2x') + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+ ...retinaImage('my-img')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${retinaImage('my-img')}
+`
+
+// CSS as JS Output
+div {
+  backgroundImage: 'url(my-img.png)',
+  '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
+   only screen and (min--moz-device-pixel-ratio: 1.3),
+   only screen and (-o-min-device-pixel-ratio: 1.3/1),
+   only screen and (min-resolution: 144dpi),
+   only screen and (min-resolution: 1.5dppx)': {
+    backgroundImage: 'url(my-img_2x.png)',
+  }
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ animation +

+ + + + src/shorthands/animation.js + + +
+ + +

Shorthand for easily setting the animation property. Allows either multiple arrays with animations +or a single animation spread over the arguments.

+ + +
animation(args: ...Array<(Array<AnimationProperty> | AnimationProperty)>)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ args (...Array<(Array<AnimationProperty> | AnimationProperty)>) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
+}
+
+// styled-components usage
+const div = styled.div`
+  ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
+`
+
+// CSS as JS Output
+
+div {
+  'animation': 'rotate 1s ease-in-out, colorchange 2s'
+}
+ + + 
// Styles as object usage
+const styles = {
+  ...animation('rotate', '1s', 'ease-in-out')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${animation('rotate', '1s', 'ease-in-out')}
+`
+
+// CSS as JS Output
+
+div {
+  'animation': 'rotate 1s ease-in-out'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ buttons +

+ + + + src/shorthands/buttons.js + + +
+ + +

Populates selectors that target all buttons. You can pass optional states to append to the selectors.

+ + +
buttons(states: ...Array<State>)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ states (...Array<State>) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  [buttons('active')]: {
+    'border': 'none'
+  }
+}
+
+// styled-components usage
+const div = styled.div`
+  > ${buttons('active')} {
+    border: none;
+  }
+`
+
+// CSS in JS Output
+
+ 'button:active,
+ 'input[type="button"]:active,
+ 'input[type=\"reset\"]:active,
+ 'input[type=\"submit\"]:active: {
+  'border': 'none'
+}
+ + + + + + + + +
+ + + + +
+ + +
+ +

+ textInputs +

+ + + + src/shorthands/textInputs.js + + +
+ + +

Populates selectors that target all text inputs. You can pass optional states to append to the selectors.

+ + +
textInputs(states: ...Array<State>)
+ + + + + + + + + + +
Parameters
+
+ +
+
+ states (...Array<State>) + +
+ +
+ +
+ + + + + + + + + +
Example
+ + + 
// Styles as object usage
+const styles = {
+  [textInputs('active')]: {
+    'border': 'none'
+  }
+}
+
+// styled-components usage
+const div = styled.div`
+  > ${textInputs('active')} {
+    border: none;
+  }
+`
+
+// CSS in JS Output
+
+ 'input[type="color"]:active,
+ 'input[type="date"]:active,
+ 'input[type="datetime"]:active,
+ 'input[type="datetime-local"]:active,
+ 'input[type="email"]:active,
+ 'input[type="month"]:active,
+ 'input[type="number"]:active,
+ 'input[type="password"]:active,
+ 'input[type="search"]:active,
+ 'input[type="tel"]:active,
+ 'input[type="text"]:active,
+ 'input[type="time"]:active,
+ 'input[type="url"]:active,
+ 'input[type="week"]:active,
+ input:not([type]):active,
+ textarea:active': {
+  'border': 'none'
+>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
 }
diff --git a/src/internalHelpers/statefulSelectors.js b/src/internalHelpers/statefulSelectors.js index b717885c..80580b43 100644 --- a/src/internalHelpers/statefulSelectors.js +++ b/src/internalHelpers/statefulSelectors.js @@ -9,6 +9,10 @@ type State = | null | string; +/** + * Function helper that adds an array of states to a template of selectors. Used in textInputs and buttons. + * @private + */ function statefulSelectors(states: Array, template: Function, stateMap: ?Array) { if (!template) throw new Error('You must provide a template to this method.') if (states.length === 0) return generateSelectors(template, null) diff --git a/src/shorthand/buttons.js b/src/shorthand/buttons.js index c1aeb041..0095c672 100644 --- a/src/shorthand/buttons.js +++ b/src/shorthand/buttons.js @@ -13,7 +13,7 @@ import statefulSelectors from '../internalHelpers/statefulSelectors' * * // styled-components usage * const div = styled.div` - * ${buttons('active')} { + * > ${buttons('active')} { * border: none; * } * ` diff --git a/src/shorthand/textInputs.js b/src/shorthand/textInputs.js index 92e195c4..75be938f 100644 --- a/src/shorthand/textInputs.js +++ b/src/shorthand/textInputs.js @@ -13,7 +13,7 @@ import statefulSelectors from '../internalHelpers/statefulSelectors' * * // styled-components usage * const div = styled.div` - * ${textInputs('active')} { + * > ${textInputs('active')} { * border: none; * } * ` From 86cc9d322b52dd9966fb5f1f48559e4213c69272 Mon Sep 17 00:00:00 2001 From: bhough Date: Sat, 17 Dec 2016 01:20:45 +0800 Subject: [PATCH 4/5] chore(docs): Update TOC with missing modules Update TOC with missing modules --- .documentation.json | 14 +- docs/index.html | 1029 +++++++++++++++++++++++++++---------------- src/index.js | 5 + 3 files changed, 676 insertions(+), 372 deletions(-) diff --git a/.documentation.json b/.documentation.json index 3b0f8597..35881c41 100644 --- a/.documentation.json +++ b/.documentation.json @@ -10,8 +10,12 @@ }, "clearFix", "ellipsis", - "hiDPI", "hideText", +<<<<<<< HEAD +======= + "hiDPI", + "selection", +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules "placeholder", "retinaImage", "selection", @@ -20,9 +24,17 @@ "wordWrap", { "name": "Shorthands", +<<<<<<< HEAD "description": "Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation." }, "animation", +======= + "description": "Shorthands for generating multiple lines of css quickly." + }, + "animation", + "buttons", + "textInputs", +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules { "name": "Helpers", "description": "Tiny helper functions that make your life easier." diff --git a/docs/index.html b/docs/index.html index edb06362..604164a5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -56,6 +56,16 @@

polished

+
  • + hideText + + + +
    • + +
  • @@ -67,9 +77,19 @@

    polished

  • - hideText + placeholder + + + +
    • + + +
  • + retinaImage @@ -117,9 +137,9 @@

    polished

  • - Helpers + Shorthands @@ -127,9 +147,41 @@

    polished

  • - stripUnit + animation + + + +
    • + +<<<<<<< HEAD +======= + +
  • + buttons + + + +
    • + + +
  • + textInputs + + + +
    • + + +
  • + Helpers @@ -145,6 +197,37 @@

    polished

    • + +
  • + modularScale + + + +
    • + + +
  • + rem + + + +
    • + + +
  • + stripUnit + + + +
    • + +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
    @@ -180,11 +263,15 @@

    +<<<<<<< HEAD <<<<<<< HEAD ======= >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs +======= + +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules src/mixins/clearFix.js @@ -270,11 +357,15 @@

    +<<<<<<< HEAD <<<<<<< HEAD ======= >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs +======= + +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules src/mixins/ellipsis.js @@ -358,26 +449,31 @@

    -

    - hiDPI +

    + hideText

    +<<<<<<< HEAD <<<<<<< HEAD ======= >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/hiDPI.js +======= + + src/mixins/hideText.js +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
    -

    Generates a media query to target HiDPI devices.

    +

    CSS to hide text to show a background image in a SEO-Friendly.

    -
    hiDPI(ratio: number?)
    +
    hideText()
    @@ -388,20 +484,6 @@

    -
    Parameters
    -
    - -
    -
    - ratio (number? - = 1.3) - -
    - -
    - -
    - @@ -414,27 +496,24 @@ 

    // Styles as object usage
-const styles = {
- [hiDPI(1.5)]: {
-   width: 200px;
- }
+const styles = {
+  'background-image': 'url(logo.png)',
+  ...hideText(),
 }
 
 // styled-components usage
-const div = styled.div`
-  ${hiDPI(1.5)} {
-    width: 200px;
-  }
+const div = styled.div`
+  background-image: url(logo.png);
+  ${hideText()};
 `
 
 // CSS as JS Output
 
-'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
- only screen and (min--moz-device-pixel-ratio: 1.5),
- only screen and (-o-min-device-pixel-ratio: 1.5/1),
- only screen and (min-resolution: 144dpi),
- only screen and (min-resolution: 1.5dppx)': {
-  'width': '200px',
+'div': {
+  'background-image': 'url(logo.png)',
+  'text-indent': '101%',
+  'overflow': 'hidden',
+  'white-space': 'nowrap',
 }
    @@ -454,26 +533,31 @@

    -

    - hideText +

    + hiDPI

    +<<<<<<< HEAD <<<<<<< HEAD ======= >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/hideText.js +======= + + src/mixins/hiDPI.js +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
    -

    CSS to hide text to show a background image in a SEO-Friendly.

    +

    Generates a media query to target HiDPI devices.

    -
    hideText()
    +
    hiDPI(ratio: number?)
    @@ -484,6 +568,20 @@

    +
    Parameters
    +
    + +
    +
    + ratio (number? + = 1.3) + +
    + +
    + +
    + @@ -496,24 +594,27 @@ 

    // Styles as object usage
-const styles = {
-  'background-image': 'url(logo.png)',
-  ...hideText(),
+const styles = {
+ [hiDPI(1.5)]: {
+   width: 200px;
+ }
 }
 
 // styled-components usage
-const div = styled.div`
-  background-image: url(logo.png);
-  ${hideText()};
+const div = styled.div`
+  ${hiDPI(1.5)} {
+    width: 200px;
+  }
 `
 
 // CSS as JS Output
 
-'div': {
-  'background-image': 'url(logo.png)',
-  'text-indent': '101%',
-  'overflow': 'hidden',
-  'white-space': 'nowrap',
+'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (-o-min-device-pixel-ratio: 1.5/1),
+ only screen and (min-resolution: 144dpi),
+ only screen and (min-resolution: 1.5dppx)': {
+  'width': '200px',
 }
    @@ -533,17 +634,22 @@

    -

    - selection +

    + placeholder

    +<<<<<<< HEAD <<<<<<< HEAD ======= >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/selection.js +======= + + src/mixins/placeholder.js +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
    @@ -552,7 +658,7 @@

    CSS to style the selection psuedo-element.

    -
    selection(styles: Object, parent: string?)
    +
    placeholder(styles: Object, parent: string?)
    @@ -577,7 +683,7 @@

    parent (string? - = '') + = '&')
    @@ -598,26 +704,30 @@ 

    // Styles as object usage
 const styles = {
-  ...selection({
-    'background': 'blue'
-  }, 'section')
+  ...placeholder(styles)
 }
 
 // styled-components usage
-const div = styled.div`
-  ${selection({'background': 'blue'}, 'section')}
+const div = styled.input`
+   ${placeholder(css`styles`)}
 `
 
 // CSS as JS Output
 
-'div': {
-  'section::-moz-selection': {
-    'background-color':'blue',
+'input': {
+  '&:-moz-placeholder': {
+    'color': 'blue',
   },
-  'section::selection': {
-    'background-color': 'blue',
-  }
-}
    + '&:-ms-input-placeholder': { + 'color': 'blue', + }, + '&::-moz-placeholder': { + 'color': 'blue', + }, + '&::-webkit-input-placeholder': { + 'color': 'blue', + }, +}, @@ -636,26 +746,33 @@

    -

    - size +

    + retinaImage

    +<<<<<<< HEAD <<<<<<< HEAD ======= >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/size.js +======= + + src/mixins/retinaImage.js +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
    -

    Mixin to set the height and width properties in a single statement.

    +

    The retina-image mixin is a helper to generate a retina background image and non-retina +background image. The retina background image will output to a HiDPI media query. The mixin uses +a _2x.png filename suffix by default.

    -
    size(height: string, width: string?)
    +
    retinaImage(filename: string, backgroundSize: string, extension: string?, retinaFilename: string, retinaSuffix: string?)
    @@ -671,7 +788,7 @@

    - height (string) + filename (string)
    @@ -679,41 +796,71 @@

    - width (string? - = height) + backgroundSize (string)
    -

    - - - - - - - - - -
    Example
    - - - 
    // Styles as object usage
-const styles = {
-  ...size('300px', '250px')
-}
+        
    
+          
    
+            extension (string?
+            = 'png')
+	    
+          
    
+          
+        
    
+      
+        
    
+          
    
+            retinaFilename (string)
+	    
+          
    
+          
+        
    
+      
+        
    
+          
    
+            retinaSuffix (string?
+            = '_2x')
+	    
+          
    
+          
+        
    
+      
+

    + + + + + + + + + +
    Example
    + + + 
    // Styles as object usage
+const styles = {
+ ...retinaImage('my-img')
+}
 
 // styled-components usage
-const div = styled.div`
-  ${size('300px', '250px')}
+const div = styled.div`
+  ${retinaImage('my-img')}
 `
 
 // CSS as JS Output
-
-div {
-  'height': '300px',
-  'width': '250px',
+div {
+  backgroundImage: 'url(my-img.png)',
+  '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
+   only screen and (min--moz-device-pixel-ratio: 1.3),
+   only screen and (-o-min-device-pixel-ratio: 1.3/1),
+   only screen and (min-resolution: 144dpi),
+   only screen and (min-resolution: 1.5dppx)': {
+    backgroundImage: 'url(my-img_2x.png)',
+  }
 }
    @@ -733,26 +880,31 @@

    -

    - timingFunctions +

    + selection

    +<<<<<<< HEAD <<<<<<< HEAD ======= >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs src/mixins/timingFunctions.js +======= + + src/mixins/selection.js +>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
    -

    String to represent commong easing functions as demonstrated here: (github.com/jaukia/easie).

    +

    CSS to style the selection psuedo-element.

    -
    timingFunctions(timingFunction: TimingFunctions)
    +
    selection(styles: Object, parent: string?)
    @@ -768,7 +920,16 @@

    - timingFunction (TimingFunctions) + styles (Object) + +
    + +
    + +
    +
    + parent (string? + = '')
    @@ -787,20 +948,27 @@

    Example
    - 
    // Styles as object usage
-const styles = {
-  'transition-timing-function': timingFunctions('easeInQuad')
+      
    // Styles as object usage
+const styles = {
+  ...selection({
+    'background': 'blue'
+  }, 'section')
 }
 
-// styled-components usage
- const div = styled.div`
-  transition-timing-function: ${timingFunctions('easeInQuad')};
+// styled-components usage
+const div = styled.div`
+  ${selection({'background': 'blue'}, 'section')}
 `
 
-// CSS as JS Output
+// CSS as JS Output
 
 'div': {
-  'transition-timing-function': 'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
+  'section::-moz-selection': {
+    'background-color':'blue',
+  },
+  'section::selection': {
+    'background-color': 'blue',
+  }
 }
    
     
   
@@ -820,26 +988,31 @@ 
    
   
   
    
     
-    
    
-      wordWrap
+    
    
+      size
     
    
     
     
+<<<<<<< HEAD
 <<<<<<< HEAD
       
 =======
       
 >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
       src/mixins/wordWrap.js
+=======
+      
+      src/mixins/size.js
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
   
 
-  
    Provides an easy way to change the word-wrap property
    
+  
    Mixin to set the height and width properties in a single statement.
    
 
 
-  
    wordWrap(wrap: string?)
    
+  
    size(height: string, width: string?)
    
   
   
 
@@ -855,8 +1028,16 @@ 
    
       
         
    
           
    
-            wrap (string?
-            = 'break-word')
+            height (string)
+	    
+          
    
+          
+        
    
+      
+        
    
+          
    
+            width (string?
+            = height)
 	    
           
    
           
@@ -874,8 +1055,16 @@ 
    
 >>>>>>> 3111967... chore(textInput): textInput shorthand
   
     
+<<<<<<< HEAD
 
    polished
    
 
    
+=======
+      
+      
    // Styles as object usage
+const styles = {
+  ...size('300px', '250px')
+}
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
 
 <<<<<<< HEAD
   
@@ -883,16 +1072,15 @@ 
    polished
    
   
 =======
 // styled-components usage
-const div = styled.div`
-  ${wordWrap('break-all')}
-
+const div = styled.div`
+  ${size('300px', '250px')}
+`
 
 // CSS as JS Output
 
-const styles = {
-  overflow-wrap: 'break-all',
-  word-wrap: 'break-all',
-  word-break: 'break-all',
+div {
+  'height': '300px',
+  'width': '250px',
 }
    
     
   
@@ -907,46 +1095,36 @@ 
    polished
    
           
         
           
-            
    
-
-  
    
-    Helpers
-  
    
-
-  
-    
    Tiny helper functions that make your life easier.
    
-
-  
-
    
-
    
-          
-        
-          
             
    
 
   
   
    
     
-    
    
-      stripUnit
+    
    
+      timingFunctions
     
    
     
     
+<<<<<<< HEAD
 <<<<<<< HEAD
       
 =======
       
 >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
       src/helpers/stripUnit.js
+=======
+      
+      src/mixins/timingFunctions.js
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
   
 
-  
    Strip the unit from a given CSS value, returning just the number. (or the original value if an invalid string was passed)
    
+  
    String to represent commong easing functions as demonstrated here: (github.com/jaukia/easie).
    
 
 
-  
    stripUnit(value: string): (number | string)
    
+  
    timingFunctions(timingFunction: TimingFunctions)
    
   
   
 
@@ -962,7 +1140,7 @@ 
    
       
         
    
           
    
-            value (string)
+            timingFunction (TimingFunctions)
 	    
           
    
           
@@ -974,11 +1152,6 @@ 
    
   
 
   
-    
-      
    Returns
    
-      (number | string)
-    
-  
 
   
 
@@ -988,18 +1161,18 @@ 
    
       
       
    // Styles as object usage
 const styles = {
-  '--dimension': stripUnit(100px)
+  'transition-timing-function': timingFunctions('easeInQuad')
 }
 
 // styled-components usage
-const div = styled.div`
-  --dimension: ${stripUnit(100px)}
-`
+ const div = styled.div`
+  transition-timing-function: ${timingFunctions('easeInQuad')};
+`
 
-// CSS in JS Output
+// CSS as JS Output
 
-element {
-  '--dimension': 100
+'div': {
+  'transition-timing-function': 'cubic-bezier(0.550,  0.085, 0.680, 0.530)',
 }
    
     
   
@@ -1019,27 +1192,35 @@ 
    
   
   
    
     
-    
    
-      em
+    
    
+      wordWrap
     
    
     
     
+<<<<<<< HEAD
 <<<<<<< HEAD
       
 =======
       
 >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
       src/helpers/em.js
+=======
+      
+      src/mixins/wordWrap.js
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
   
 
-  
    Convert pixel value to ems. The default base value is 16px, but can be changed by passing a
-second argument to the function.
    
+  
    Provides an easy way to change the word-wrap property
    
 
 
+<<<<<<< HEAD
   
    em(pxval: (string | number), base: (string | number)?): String
    
+=======
+  
    wordWrap(wrap: string?)
    
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
   
   
 
@@ -1055,6 +1236,7 @@ 
    
       
         
    
           
    
+<<<<<<< HEAD
             pxval ((string | number))
 	    The pixel value you want to convert
 
@@ -1068,6 +1250,11 @@ 
    
             = "16px")
 	    The base size to convert from
 
+=======
+            wrap (string?
+            = 'break-word')
+	    
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
           
    
           
         
    
@@ -1078,6 +1265,7 @@ 
    
   
 
   
+<<<<<<< HEAD
     
 <<<<<<< HEAD
       
    Returns
    
@@ -1086,29 +1274,7 @@ 
    
 =======
       
       src/helpers/rem.js
-      
-    
-  
    
-  
-
-  
    Convert pixel value to rems. The default base value is 16px, but can be changed by passing a
-second argument to the function.
    
-
-
-  
    rem(pxval: (string | number), base: (string | number)?)
    
-  
-  
-
-  
-  
-  
-  
-  
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-
-      
-    
-  
+=======
 
   
 
@@ -1118,21 +1284,20 @@ 
    
       
       
    // Styles as object usage
 const styles = {
-  'height': em('16px')
+  ...wordWrap('break-all')
 }
 
 // styled-components usage
-const div = styled.div`
-  height: ${em('16px')}
-`
+const div = styled.div`
+  ${wordWrap('break-all')}
 
-// CSS in JS Output
 
-element {
-<<<<<<< HEAD
-  'height': '1em'
-=======
-  'height': '1rem'
+// CSS as JS Output
+
+const styles = {
+  overflow-wrap: 'break-all',
+  word-wrap: 'break-all',
+  word-break: 'break-all',
 }
    
     
   
@@ -1147,27 +1312,44 @@ 
    
           
         
           
+            
    
+
+  
    
+    Shorthands
+  
    
+
+  
+    
    Shorthands for generating multiple lines of css quickly.
    
+
+  
+
    
+
    
+          
+        
+          
             
    
 
   
   
    
     
-    
    
-      modularScale
+    
    
+      animation
     
    
     
     
-      
-      src/helpers/modularScale.js
+      
+      src/shorthands/animation.js
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
   
 
-  
    Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.
    
+  
    Shorthand for easily setting the animation property. Allows either multiple arrays with animations
+or a single animation spread over the arguments.
    
 
 
-  
    modularScale(steps: number, base: (number | string)?, ratio: Ratio?)
    
+  
    animation(args: ...Array<(Array<AnimationProperty> | AnimationProperty)>)
    
   
   
 
@@ -1176,32 +1358,19 @@ 
    
   
   
   
+>>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
 
+<<<<<<< HEAD
+      
+    
+=======
   
     
    Parameters
    
     
    
       
         
    
           
    
-            steps (number)
-	    
-          
    
-          
-        
    
-      
-        
    
-          
    
-            base ((number | string)?
-            = '1em')
-	    
-          
    
-          
-        
    
-      
-        
    
-          
    
-            ratio (Ratio?
-            = 'perfectFourth')
+            args (...Array<(Array<AnimationProperty> | AnimationProperty)>)
 	    
           
    
           
@@ -1212,6 +1381,7 @@ 
    
 
   
 
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
   
 
   
@@ -1221,21 +1391,55 @@ 
    
     
       
       
    // Styles as object usage
+<<<<<<< HEAD
 const styles = {
-   // Increment two steps up the default scale
-  'font-size': modularScale(2)
+  'height': em('16px')
 }
 
 // styled-components usage
-const div = styled.div`
-   // Increment two steps up the default scale
-  font-size: ${modularScale(2)}
+const div = styled.div`
+  height: ${em('16px')}
+`
+=======
+const styles = {
+  ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
+}
+
+// styled-components usage
+const div = styled.div`
+  ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
 `
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
 
-// CSS in JS Output
+// CSS as JS Output
 
+<<<<<<< HEAD
 element {
-  'font-size': '1.77689em'
+<<<<<<< HEAD
+  'height': '1em'
+=======
+  'height': '1rem'
+=======
+div {
+  'animation': 'rotate 1s ease-in-out, colorchange 2s'
+}
    
+    
+      
+      
    // Styles as object usage
+const styles = {
+  ...animation('rotate', '1s', 'ease-in-out')
+}
+
+// styled-components usage
+const div = styled.div`
+  ${animation('rotate', '1s', 'ease-in-out')}
+`
+
+// CSS as JS Output
+
+div {
+  'animation': 'rotate 1s ease-in-out'
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
 }
    
     
   
@@ -1255,22 +1459,22 @@ 
    
   
   
    
     
-    
    
-      placeholder
+    
    
+      buttons
     
    
     
     
-      
-      src/mixins/placeholder.js
+      
+      src/shorthands/buttons.js
       
     
   
    
   
 
-  
    CSS to style the selection psuedo-element.
    
+  
    Populates selectors that target all buttons. You can pass optional states to append to the selectors.
    
 
 
-  
    placeholder(styles: Object, parent: string?)
    
+  
    buttons(states: ...Array<State>)
    
   
   
 
@@ -1286,16 +1490,7 @@ 
    
       
         
    
           
    
-            styles (Object)
-	    
-          
    
-          
-        
    
-      
-        
    
-          
    
-            parent (string?
-            = '&')
+            states (...Array<State>)
 	    
           
    
           
@@ -1314,32 +1509,28 @@ 
    
     
    Example
    
     
       
-      
    // Styles as object usage
+      
    // Styles as object usage
 const styles = {
-  ...placeholder(styles)
+  [buttons('active')]: {
+    'border': 'none'
+  }
 }
 
-// styled-components usage
-const div = styled.input`
-   ${placeholder(css`styles`)}
+// styled-components usage
+const div = styled.div`
+  > ${buttons('active')} {
+    border: none;
+  }
 `
 
-// CSS as JS Output
+// CSS in JS Output
 
-'input': {
-  '&:-moz-placeholder': {
-    'color': 'blue',
-  },
-  '&:-ms-input-placeholder': {
-    'color': 'blue',
-  },
-  '&::-moz-placeholder': {
-    'color': 'blue',
-  },
-  '&::-webkit-input-placeholder': {
-    'color': 'blue',
-  },
-},
    
+ 'button:active,
+ 'input[type="button"]:active,
+ 'input[type=\"reset\"]:active,
+ 'input[type=\"submit\"]:active: {
+  'border': 'none'
+}
    
     
   
 
@@ -1358,24 +1549,22 @@ 
    
   
   
    
     
-    
    
-      retinaImage
+    
    
+      textInputs
     
    
     
     
-      
-      src/mixins/retinaImage.js
+      
+      src/shorthands/textInputs.js
       
     
   
    
   
 
-  
    The retina-image mixin is a helper to generate a retina background image and non-retina
-background image. The retina background image will output to a HiDPI media query. The mixin uses
-a _2x.png filename suffix by default.
    
+  
    Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
    
 
 
-  
    retinaImage(filename: string, backgroundSize: string, extension: string?, retinaFilename: string, retinaSuffix: string?)
    
+  
    textInputs(states: ...Array<State>)
    
   
   
 
@@ -1391,32 +1580,125 @@ 
    
       
         
    
           
    
-            filename (string)
+            states (...Array<State>)
 	    
           
    
           
         
    
       
-        
    
-          
    
-            backgroundSize (string)
-	    
-          
    
-          
-        
    
+    
    
+  
+
+  
+
+  
+
+  
+
+  
+    
    Example
    
+    
       
-        
    
-          
    
-            extension (string?
-            = 'png')
-	    
-          
    
+      
    // Styles as object usage
+const styles = {
+  [textInputs('active')]: {
+    'border': 'none'
+  }
+}
+
+// styled-components usage
+const div = styled.div`
+  > ${textInputs('active')} {
+    border: none;
+  }
+`
+
+// CSS in JS Output
+
+ 'input[type="color"]:active,
+ 'input[type="date"]:active,
+ 'input[type="datetime"]:active,
+ 'input[type="datetime-local"]:active,
+ 'input[type="email"]:active,
+ 'input[type="month"]:active,
+ 'input[type="number"]:active,
+ 'input[type="password"]:active,
+ 'input[type="search"]:active,
+ 'input[type="tel"]:active,
+ 'input[type="text"]:active,
+ 'input[type="time"]:active,
+ 'input[type="url"]:active,
+ 'input[type="week"]:active,
+ input:not([type]):active,
+ textarea:active': {
+  'border': 'none'
+}
    
+    
+  
+
+  
+
+  
+
+  
+
    
+
           
-        
    
+        
+          
+            
    
+
+  
    
+    Helpers
+  
    
+
+  
+    
    Tiny helper functions that make your life easier.
    
+
+  
+
    
+
    
+          
+        
+          
+            
    
+
+  
+  
    
+    
+    
    
+      em
+    
    
+    
+    
+      
+      src/helpers/em.js
+      
+    
+  
    
+  
+
+  
    Convert pixel value to ems. The default base value is 16px, but can be changed by passing a
+second argument to the function.
    
+
+
+  
    em(pxval: (string | number), base: (string | number)?)
    
+  
+  
+
+  
+  
+  
+  
+  
+
+  
+    
    Parameters
    
+    
    
       
         
    
           
    
-            retinaFilename (string)
+            pxval ((string | number))
 	    
           
    
           
@@ -1424,8 +1706,8 @@ 
    
       
         
    
           
    
-            retinaSuffix (string?
-            = '_2x')
+            base ((string | number)?
+            = '16px')
 	    
           
    
           
@@ -1446,24 +1728,18 @@ 
    
       
       
    // Styles as object usage
 const styles = {
- ...retinaImage('my-img')
+  'height': em('16px')
 }
 
 // styled-components usage
-const div = styled.div`
-  ${retinaImage('my-img')}
-`
+const div = styled.div`
+  height: ${em('16px')}
+`
 
-// CSS as JS Output
-div {
-  backgroundImage: 'url(my-img.png)',
-  '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
-   only screen and (min--moz-device-pixel-ratio: 1.3),
-   only screen and (-o-min-device-pixel-ratio: 1.3/1),
-   only screen and (min-resolution: 144dpi),
-   only screen and (min-resolution: 1.5dppx)': {
-    backgroundImage: 'url(my-img_2x.png)',
-  }
+// CSS in JS Output
+
+element {
+  'height': '1em'
 }
    
     
   
@@ -1483,23 +1759,22 @@ 
    
   
   
    
     
-    
    
-      animation
+    
    
+      modularScale
     
    
     
     
-      
-      src/shorthands/animation.js
+      
+      src/helpers/modularScale.js
       
     
   
    
   
 
-  
    Shorthand for easily setting the animation property. Allows either multiple arrays with animations
-or a single animation spread over the arguments.
    
+  
    Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.
    
 
 
-  
    animation(args: ...Array<(Array<AnimationProperty> | AnimationProperty)>)
    
+  
    modularScale(steps: number, base: (number | string)?, ratio: Ratio?)
    
   
   
 
@@ -1515,7 +1790,25 @@ 
    
       
         
    
           
    
-            args (...Array<(Array<AnimationProperty> | AnimationProperty)>)
+            steps (number)
+	    
+          
    
+          
+        
    
+      
+        
    
+          
    
+            base ((number | string)?
+            = '1em')
+	    
+          
    
+          
+        
    
+      
+        
    
+          
    
+            ratio (Ratio?
+            = 'perfectFourth')
 	    
           
    
           
@@ -1535,36 +1828,21 @@ 
    
     
       
       
    // Styles as object usage
-const styles = {
-  ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
-}
-
-// styled-components usage
-const div = styled.div`
-  ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
-`
-
-// CSS as JS Output
-
-div {
-  'animation': 'rotate 1s ease-in-out, colorchange 2s'
-}
    
-    
-      
-      
    // Styles as object usage
-const styles = {
-  ...animation('rotate', '1s', 'ease-in-out')
+const styles = {
+   // Increment two steps up the default scale
+  'font-size': modularScale(2)
 }
 
 // styled-components usage
-const div = styled.div`
-  ${animation('rotate', '1s', 'ease-in-out')}
+const div = styled.div`
+   // Increment two steps up the default scale
+  font-size: ${modularScale(2)}
 `
 
-// CSS as JS Output
+// CSS in JS Output
 
-div {
-  'animation': 'rotate 1s ease-in-out'
+element {
+  'font-size': '1.77689em'
 }
    
     
   
@@ -1584,22 +1862,23 @@ 
    
   
   
    
     
-    
    
-      buttons
+    
    
+      rem
     
    
     
     
-      
-      src/shorthands/buttons.js
+      
+      src/helpers/rem.js
       
     
   
    
   
 
-  
    Populates selectors that target all buttons. You can pass optional states to append to the selectors.
    
+  
    Convert pixel value to rems. The default base value is 16px, but can be changed by passing a
+second argument to the function.
    
 
 
-  
    buttons(states: ...Array<State>)
    
+  
    rem(pxval: (string | number), base: (string | number)?)
    
   
   
 
@@ -1615,7 +1894,16 @@ 
    
       
         
    
           
    
-            states (...Array<State>)
+            pxval ((string | number))
+	    
+          
    
+          
+        
    
+      
+        
    
+          
    
+            base ((string | number)?
+            = '16px')
 	    
           
    
           
@@ -1635,26 +1923,19 @@ 
    
     
       
       
    // Styles as object usage
-const styles = {
-  [buttons('active')]: {
-    'border': 'none'
-  }
+const styles = {
+  'height': rem('16px')
 }
 
 // styled-components usage
-const div = styled.div`
-  > ${buttons('active')} {
-    border: none;
-  }
-`
+const div = styled.div`
+  height: ${rem('16px')}
+`
 
 // CSS in JS Output
 
- 'button:active,
- 'input[type="button"]:active,
- 'input[type=\"reset\"]:active,
- 'input[type=\"submit\"]:active: {
-  'border': 'none'
+element {
+  'height': '1rem'
 }
    
     
   
@@ -1674,22 +1955,22 @@ 
    
   
   
    
     
-    
    
-      textInputs
+    
    
+      stripUnit
     
    
     
     
-      
-      src/shorthands/textInputs.js
+      
+      src/helpers/stripUnit.js
       
     
   
    
   
 
-  
    Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
    
+  
    Strip the unit from a given CSS value, returning just the number. (or the original value if an invalid string was passed)
    
 
 
-  
    textInputs(states: ...Array<State>)
    
+  
    stripUnit(value: string): (number | string)
    
   
   
 
@@ -1705,7 +1986,7 @@ 
    
       
         
    
           
    
-            states (...Array<State>)
+            value (string)
 	    
           
    
           
@@ -1717,6 +1998,11 @@ 
    
   
 
   
+    
+      
    Returns
    
+      (number | string)
+    
+  
 
   
 
@@ -1725,21 +2011,18 @@ 
    
     
       
       
    // Styles as object usage
-const styles = {
-  [textInputs('active')]: {
-    'border': 'none'
-  }
+const styles = {
+  '--dimension': stripUnit(100px)
 }
 
 // styled-components usage
-const div = styled.div`
-  > ${textInputs('active')} {
-    border: none;
-  }
-`
+const div = styled.div`
+  --dimension: ${stripUnit(100px)}
+`
 
 // CSS in JS Output
 
+<<<<<<< HEAD
  'input[type="color"]:active,
  'input[type="date"]:active,
  'input[type="datetime"]:active,
@@ -1758,6 +2041,10 @@ 
    
  textarea:active': {
   'border': 'none'
 >>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
+=======
+element {
+  '--dimension': 100
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
 }
    
     
   
diff --git a/src/index.js b/src/index.js
index a2c736b3..0073a41c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,9 +2,14 @@
 // Helpers
 import em from './helpers/em'
 <<<<<<< HEAD
+<<<<<<< HEAD
 import modularScale from './helpers/modularScale'
 import rem from './helpers/rem'
 =======
+=======
+import modularScale from './helpers/modularScale'
+import rem from './helpers/rem'
+>>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
 import stripUnit from './helpers/stripUnit'
 >>>>>>> 4042d23... chore(shorthand): Simplify Buttons and Inputs to use shared helper
 

From 46aeb71648f145caa3347ca0d6c7112fa8affe6c Mon Sep 17 00:00:00 2001
From: bhough 
Date: Sat, 17 Dec 2016 03:52:13 +0800
Subject: [PATCH 5/5] chore(docs): Rebuild

Rebuild
---
 .documentation.json                           |  12 +-
 docs/docs/index.html                          | 242 ++++-
 docs/index.html                               | 858 +++++++-----------
 src/index.js                                  |  35 +-
 ...efulSelectors.js => _statefulSelectors.js} |   0
 ...s.snap => _statefulSelectors.test.js.snap} |   0
 ...ors.test.js => _statefulSelectors.test.js} |   2 +-
 src/{shorthand => shorthands}/buttons.js      |  34 +-
 .../test/__snapshots__/buttons.test.js.snap   |   0
 .../__snapshots__/textInputs.test.js.snap     |   0
 .../test/buttons.test.js                      |   0
 .../test/textInputs.test.js                   |   0
 src/{shorthand => shorthands}/textInputs.js   |  58 +-
 13 files changed, 619 insertions(+), 622 deletions(-)
 rename src/internalHelpers/{statefulSelectors.js => _statefulSelectors.js} (100%)
 rename src/internalHelpers/test/__snapshots__/{statefulSelectors.test.js.snap => _statefulSelectors.test.js.snap} (100%)
 rename src/internalHelpers/test/{statefulSelectors.test.js => _statefulSelectors.test.js} (97%)
 rename src/{shorthand => shorthands}/buttons.js (93%)
 rename src/{shorthand => shorthands}/test/__snapshots__/buttons.test.js.snap (100%)
 rename src/{shorthand => shorthands}/test/__snapshots__/textInputs.test.js.snap (100%)
 rename src/{shorthand => shorthands}/test/buttons.test.js (100%)
 rename src/{shorthand => shorthands}/test/textInputs.test.js (100%)
 rename src/{shorthand => shorthands}/textInputs.js (96%)

diff --git a/.documentation.json b/.documentation.json
index 35881c41..68ca695c 100644
--- a/.documentation.json
+++ b/.documentation.json
@@ -10,12 +10,8 @@
     },
     "clearFix",
     "ellipsis",
-    "hideText",
-<<<<<<< HEAD
-=======
     "hiDPI",
-    "selection",
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
+    "hideText",
     "placeholder",
     "retinaImage",
     "selection",
@@ -24,17 +20,11 @@
     "wordWrap",
     {
       "name": "Shorthands",
-<<<<<<< HEAD
       "description": "Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation."
     },
     "animation",
-=======
-      "description": "Shorthands for generating multiple lines of css quickly."
-    },
-    "animation",
     "buttons",
     "textInputs",
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
     {
       "name": "Helpers",
       "description": "Tiny helper functions that make your life easier."
diff --git a/docs/docs/index.html b/docs/docs/index.html
index b8535a23..34bc9022 100644
--- a/docs/docs/index.html
+++ b/docs/docs/index.html
@@ -155,6 +155,26 @@ 
    polished
    
               
             
               
+              
  • 
+                buttons
+                
+              
+              
+              
    • 
+            
+              
+              
  • 
+                textInputs
+                
+              
+              
+              
    • 
+            
+              
               
  • 
@@ -239,7 +259,7 @@ 
    
     
    
     
     
-          
+      
       src/mixins/clearFix.js
       
     
@@ -325,7 +345,7 @@ 
    
     
    
     
     
-      
+      
       src/mixins/ellipsis.js
       
     
@@ -414,7 +434,7 @@ 
    
     
    
     
     
-      
+      
       src/mixins/hiDPI.js
       
     
@@ -506,7 +526,7 @@ 
    
     
    
     
     
-      
+      
       src/mixins/hideText.js
       
     
@@ -581,7 +601,7 @@ 
    
     
    
     
     
-      
+      
       src/mixins/placeholder.js
       
     
@@ -684,7 +704,7 @@ 
    
     
    
     
     
-      
+      
       src/mixins/retinaImage.js
       
     
@@ -809,7 +829,7 @@ 
    
     
    
     
     
-      
+      
       src/mixins/selection.js
       
     
@@ -908,7 +928,7 @@ 
    
     
    
     
     
-      
+      
       src/mixins/size.js
       
     
@@ -1001,7 +1021,7 @@ 
    
     
    
     
     
-      
+      
       src/mixins/timingFunctions.js
       
     
@@ -1084,7 +1104,7 @@ 
    
     
    
     
     
-      
+      
       src/mixins/wordWrap.js
       
     
@@ -1185,7 +1205,7 @@ 
    
     
    
     
     
-      
+      
       src/shorthands/animation.js
       
     
@@ -1271,6 +1291,198 @@ 
    
   
 
   
+
    • 
+
+        
+      
+        
+          
    
+
+  
+  
    
+    
+    
    
+      buttons
+    
    
+    
+    
+      
+      src/shorthands/buttons.js
+      
+    
+  
    
+  
+
+  
    Populates selectors that target all buttons. You can pass optional states to append to the selectors.
    
+
+
+  
    buttons(states: ...Array<State>)
    
+  
+  
+
+  
+  
+  
+  
+  
+
+  
+    
    Parameters
    
+    
    
+      
+        
    
+          
    
+            states (...Array<State>)
+	    
+          
    
+          
+        
    
+      
+    
    
+  
+
+  
+
+  
+
+  
+
+  
+    
    Example
    
+    
+      
+      
    // Styles as object usage
+const styles = {
+  [buttons('active')]: {
+    'border': 'none'
+  }
+}
+
+// styled-components usage
+const div = styled.div`
+  > ${buttons('active')} {
+    border: none;
+  }
+`
+
+// CSS in JS Output
+
+ 'button:active,
+ 'input[type="button"]:active,
+ 'input[type=\"reset\"]:active,
+ 'input[type=\"submit\"]:active: {
+  'border': 'none'
+}
    
+    
+  
+
+  
+
+  
+
+  
+
    
+
+        
+      
+        
+          
    
+
+  
+  
    
+    
+    
    
+      textInputs
+    
    
+    
+    
+      
+      src/shorthands/textInputs.js
+      
+    
+  
    
+  
+
+  
    Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
    
+
+
+  
    textInputs(states: ...Array<State>)
    
+  
+  
+
+  
+  
+  
+  
+  
+
+  
+    
    Parameters
    
+    
    
+      
+        
    
+          
    
+            states (...Array<State>)
+	    
+          
    
+          
+        
    
+      
+    
    
+  
+
+  
+
+  
+
+  
+
+  
+    
    Example
    
+    
+      
+      
    // Styles as object usage
+const styles = {
+  [textInputs('active')]: {
+    'border': 'none'
+  }
+}
+
+// styled-components usage
+const div = styled.div`
+  > ${textInputs('active')} {
+    border: none;
+  }
+`
+
+// CSS in JS Output
+
+ ''input[type="color"]:active,
+ 'input[type="date"]:active,
+ 'input[type="datetime"]:active,
+ 'input[type="datetime-local"]:active,
+ 'input[type="email"]:active,
+ 'input[type="month"]:active,
+ 'input[type="number"]:active,
+ 'input[type="password"]:active,
+ 'input[type="search"]:active,
+ 'input[type="tel"]:active,
+ 'input[type="text"]:active,
+ 'input[type="time"]:active,
+ 'input[type="url"]:active,
+ 'input[type="week"]:active,
+ input:not([type]):active,
+ textarea:active': {
+  'border': 'none'
+}
    
+    
+  
+
+  
+
+  
+
+  
 
    
 
         
@@ -1301,7 +1513,7 @@ 
    
     
    
     
     
-      
+      
       src/helpers/em.js
       
     
@@ -1394,7 +1606,7 @@ 
    
     
    
     
     
-      
+      
       src/helpers/modularScale.js
       
     
@@ -1497,7 +1709,7 @@ 
    
     
    
     
     
-      
+      
       src/helpers/rem.js
       
     
@@ -1590,7 +1802,7 @@ 
    
     
    
     
     
-      
+      
       src/helpers/stripUnit.js
       
     
diff --git a/docs/index.html b/docs/index.html
index 604164a5..34bc9022 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -9,236 +9,232 @@
   
 
 
-<<<<<<< HEAD
-=======
-  
    
-    
    
-      
    
-        
    
-          
    polished
    
-          
    
-          
-          
+        
    
+          Need help reading this?
         
    
       
    
-      
    
+    
    
+    
    
+      
         
-          
-            
    
+          
    
 
   
    
     Mixins
@@ -250,10 +246,10 @@ 
    
   
 
    
 
    
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
@@ -263,15 +259,7 @@ 
    
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-=======
-      
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
+      
       src/mixins/clearFix.js
       
     
@@ -281,7 +269,7 @@ 
    
   
    CSS to contain a float (credit to CSSMojo).
    
 
 
-  
    clearFix(parent: string?)
    
+  
    clearFix(parent: [string])
    
   
   
 
@@ -297,7 +285,7 @@ 
    
       
         
    
           
    
-            parent (string?
+            parent ([string]
             = '&')
 	    
           
    
@@ -344,10 +332,10 @@ 
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
@@ -357,15 +345,7 @@ 
    
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-=======
-      
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
+      
       src/mixins/ellipsis.js
       
     
@@ -375,7 +355,7 @@ 
    
   
    CSS to represent truncated text with an ellipsis.
    
 
 
-  
    ellipsis(width: string?)
    
+  
    ellipsis(width: [string])
    
   
   
 
@@ -391,7 +371,7 @@ 
    
       
         
    
           
    
-            width (string?
+            width ([string]
             = '100%')
 	    
           
    
@@ -441,39 +421,30 @@ 
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
     
-    
    
-      hideText
+    
    
+      hiDPI
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
+      
       src/mixins/hiDPI.js
-=======
-      
-      src/mixins/hideText.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
   
 
-  
    CSS to hide text to show a background image in a SEO-Friendly.
    
+  
    Generates a media query to target HiDPI devices.
    
 
 
-  
    hideText()
    
+  
    hiDPI(ratio: [number])
    
   
   
 
@@ -484,6 +455,20 @@ 
    
   
 
   
+    
    Parameters
    
+    
    
+      
+        
    
+          
    
+            ratio ([number]
+            = 1.3)
+	    
+          
    
+          
+        
    
+      
+    
    
+  
 
   
 
@@ -496,24 +481,27 @@ 
    
     
       
       
    // Styles as object usage
-const styles = {
-  'background-image': 'url(logo.png)',
-  ...hideText(),
+const styles = {
+ [hiDPI(1.5)]: {
+   width: 200px;
+ }
 }
 
 // styled-components usage
-const div = styled.div`
-  background-image: url(logo.png);
-  ${hideText()};
+const div = styled.div`
+  ${hiDPI(1.5)} {
+    width: 200px;
+  }
 `
 
 // CSS as JS Output
 
-'div': {
-  'background-image': 'url(logo.png)',
-  'text-indent': '101%',
-  'overflow': 'hidden',
-  'white-space': 'nowrap',
+'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (-o-min-device-pixel-ratio: 1.5/1),
+ only screen and (min-resolution: 144dpi),
+ only screen and (min-resolution: 1.5dppx)': {
+  'width': '200px',
 }
    
     
   
@@ -525,39 +513,30 @@ 
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
     
-    
    
-      hiDPI
+    
    
+      hideText
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
+      
       src/mixins/hideText.js
-=======
-      
-      src/mixins/hiDPI.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
   
 
-  
    Generates a media query to target HiDPI devices.
    
+  
    CSS to hide text to show a background image in a SEO-Friendly.
    
 
 
-  
    hiDPI(ratio: number?)
    
+  
    hideText()
    
   
   
 
@@ -568,20 +547,6 @@ 
    
   
 
   
-    
    Parameters
    
-    
    
-      
-        
    
-          
    
-            ratio (number?
-            = 1.3)
-	    
-          
    
-          
-        
    
-      
-    
    
-  
 
   
 
@@ -594,27 +559,24 @@ 
    
     
       
       
    // Styles as object usage
-const styles = {
- [hiDPI(1.5)]: {
-   width: 200px;
- }
+const styles = {
+  'background-image': 'url(logo.png)',
+  ...hideText(),
 }
 
 // styled-components usage
-const div = styled.div`
-  ${hiDPI(1.5)} {
-    width: 200px;
-  }
+const div = styled.div`
+  background-image: url(logo.png);
+  ${hideText()};
 `
 
 // CSS as JS Output
 
-'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
- only screen and (min--moz-device-pixel-ratio: 1.5),
- only screen and (-o-min-device-pixel-ratio: 1.5/1),
- only screen and (min-resolution: 144dpi),
- only screen and (min-resolution: 1.5dppx)': {
-  'width': '200px',
+'div': {
+  'background-image': 'url(logo.png)',
+  'text-indent': '101%',
+  'overflow': 'hidden',
+  'white-space': 'nowrap',
 }
    
     
   
@@ -626,10 +588,10 @@ 
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
@@ -639,17 +601,8 @@ 
    
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-      src/mixins/selection.js
-=======
-      
+      
       src/mixins/placeholder.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
@@ -658,7 +611,7 @@ 
    
   
    CSS to style the selection psuedo-element.
    
 
 
-  
    placeholder(styles: Object, parent: string?)
    
+  
    placeholder(styles: Object, parent: [string])
    
   
   
 
@@ -682,7 +635,7 @@ 
    
       
         
    
           
    
-            parent (string?
+            parent ([string]
             = '&')
 	    
           
    
@@ -738,10 +691,10 @@ 
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
@@ -751,17 +704,8 @@ 
    
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-      src/mixins/size.js
-=======
-      
+      
       src/mixins/retinaImage.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
@@ -772,7 +716,7 @@ 
    
 a _2x.png filename suffix by default.
    
 
 
-  
    retinaImage(filename: string, backgroundSize: string, extension: string?, retinaFilename: string, retinaSuffix: string?)
    
+  
    retinaImage(filename: string, backgroundSize: string, extension: [string], retinaFilename: string, retinaSuffix: [string])
    
   
   
 
@@ -804,7 +748,7 @@ 
    
       
         
    
           
    
-            extension (string?
+            extension ([string]
             = 'png')
 	    
           
    
@@ -821,7 +765,7 @@ 
    
       
         
    
           
    
-            retinaSuffix (string?
+            retinaSuffix ([string]
             = '_2x')
 	    
           
    
@@ -872,10 +816,10 @@ 
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
@@ -885,17 +829,8 @@ 
    
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-      src/mixins/timingFunctions.js
-=======
-      
+      
       src/mixins/selection.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
@@ -904,7 +839,7 @@ 
    
   
    CSS to style the selection psuedo-element.
    
 
 
-  
    selection(styles: Object, parent: string?)
    
+  
    selection(styles: Object, parent: [string])
    
   
   
 
@@ -928,7 +863,7 @@ 
    
       
         
    
           
    
-            parent (string?
+            parent ([string]
             = '')
 	    
           
    
@@ -980,10 +915,10 @@ 
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
@@ -993,17 +928,8 @@ 
    
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-      src/mixins/wordWrap.js
-=======
-      
+      
       src/mixins/size.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
@@ -1012,7 +938,7 @@ 
    
   
    Mixin to set the height and width properties in a single statement.
    
 
 
-  
    size(height: string, width: string?)
    
+  
    size(height: string, width: [string])
    
   
   
 
@@ -1036,7 +962,7 @@ 
    
       
         
    
           
    
-            width (string?
+            width ([string]
             = height)
 	    
           
    
@@ -1052,25 +978,15 @@ 
    
 
   
 
->>>>>>> 3111967... chore(textInput): textInput shorthand
   
+    
    Example
    
     
-<<<<<<< HEAD
-
    polished
    
-
    
-=======
       
       
    // Styles as object usage
 const styles = {
   ...size('300px', '250px')
 }
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
 
-<<<<<<< HEAD
-  
-  
-  
-=======
 // styled-components usage
 const div = styled.div`
   ${size('300px', '250px')}
@@ -1092,10 +1008,10 @@ 
    polished
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
@@ -1105,17 +1021,8 @@ 
    
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-      src/helpers/stripUnit.js
-=======
-      
+      
       src/mixins/timingFunctions.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
@@ -1184,10 +1091,10 @@ 
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
@@ -1197,17 +1104,8 @@ 
    
     
    
     
     
-<<<<<<< HEAD
-<<<<<<< HEAD
-      
-=======
-      
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
-      src/helpers/em.js
-=======
-      
+      
       src/mixins/wordWrap.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
@@ -1216,11 +1114,7 @@ 
    
   
    Provides an easy way to change the word-wrap property
    
 
 
-<<<<<<< HEAD
-  
    em(pxval: (string | number), base: (string | number)?): String
    
-=======
-  
    wordWrap(wrap: string?)
    
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
+  
    wordWrap(wrap: [string])
    
   
   
 
@@ -1236,25 +1130,9 @@ 
    
       
         
    
           
    
-<<<<<<< HEAD
-            pxval ((string | number))
-	    The pixel value you want to convert
-
-          
    
-          
-        
    
-      
-        
    
-          
    
-            base ((string | number)?
-            = "16px")
-	    The base size to convert from
-
-=======
-            wrap (string?
+            wrap ([string]
             = 'break-word')
 	    
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
           
    
           
         
    
@@ -1265,16 +1143,6 @@ 
    
   
 
   
-<<<<<<< HEAD
-    
-<<<<<<< HEAD
-      
    Returns
    
-      String:
-        The converted value
-=======
-      
-      src/helpers/rem.js
-=======
 
   
 
@@ -1309,25 +1177,25 @@ 
    
   
 
    
 
-          
         
-          
-            
    
+      
+        
+          
    
 
   
    
     Shorthands
   
    
 
   
-    
    Shorthands for generating multiple lines of css quickly.
    
+    
    Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation.
    
 
   
 
    
 
    
-          
         
-          
-            
    
+      
+        
+          
    
 
   
   
    
@@ -1337,9 +1205,8 @@ 
    
     
    
     
     
-          
+      
       src/shorthands/animation.js
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
       
     
   
    
@@ -1349,7 +1216,7 @@ 
    
 or a single animation spread over the arguments.
    
 
 
-  
    animation(args: ...Array<(Array<AnimationProperty> | AnimationProperty)>)
    
+  
    animation(args: ...Array<(Array<AnimationProperty> | AnimationProperty)>)
    
   
   
 
@@ -1358,19 +1225,14 @@ 
    
   
   
   
->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs
 
-<<<<<<< HEAD
-      
-    
-=======
   
     
    Parameters
    
     
    
       
         
    
           
    
-            args (...Array<(Array<AnimationProperty> | AnimationProperty)>)
+            args (...Array<(Array<AnimationProperty> | AnimationProperty)>)
 	    
           
    
           
@@ -1381,7 +1243,6 @@ 
    
 
   
 
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
   
 
   
@@ -1391,16 +1252,6 @@ 
    
     
       
       
    // Styles as object usage
-<<<<<<< HEAD
-const styles = {
-  'height': em('16px')
-}
-
-// styled-components usage
-const div = styled.div`
-  height: ${em('16px')}
-`
-=======
 const styles = {
   ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
 }
@@ -1409,17 +1260,9 @@ 
    
 const div = styled.div`
   ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
 `
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
 
 // CSS as JS Output
 
-<<<<<<< HEAD
-element {
-<<<<<<< HEAD
-  'height': '1em'
-=======
-  'height': '1rem'
-=======
 div {
   'animation': 'rotate 1s ease-in-out, colorchange 2s'
 }
    
@@ -1439,7 +1282,6 @@ 
    
 
 div {
   'animation': 'rotate 1s ease-in-out'
->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules
 }
    @@ -1451,10 +1293,10 @@

    - - -
    + + +
    @@ -1464,7 +1306,7 @@

    - + src/shorthands/buttons.js @@ -1474,7 +1316,7 @@

    Populates selectors that target all buttons. You can pass optional states to append to the selectors.

    -
    buttons(states: ...Array<State>)
    +
    buttons(states: ...Array<State>)
    @@ -1490,7 +1332,7 @@

    - states (...Array<State>) + states (...Array<State>)
    @@ -1541,10 +1383,10 @@

    - - -
    + + +
    @@ -1554,7 +1396,7 @@

    - + src/shorthands/textInputs.js @@ -1564,7 +1406,7 @@

    Populates selectors that target all text inputs. You can pass optional states to append to the selectors.

    -
    textInputs(states: ...Array<State>)
    +
    textInputs(states: ...Array<State>)
    @@ -1580,7 +1422,7 @@

    - states (...Array<State>) + states (...Array<State>)
    @@ -1615,7 +1457,7 @@

    // CSS in JS Output - 'input[type="color"]:active, + ''input[type="color"]:active, 'input[type="date"]:active, 'input[type="datetime"]:active, 'input[type="datetime-local"]:active, @@ -1643,10 +1485,10 @@

    - - -
    + + +

    Helpers @@ -1658,10 +1500,10 @@

    - - -
    + + +
    @@ -1671,7 +1513,7 @@

    - + src/helpers/em.js @@ -1682,7 +1524,7 @@

    second argument to the function.

    -
    em(pxval: (string | number), base: (string | number)?)
    +
    em(pxval: (string | number), base: [(string | number)])
    @@ -1706,7 +1548,7 @@

    - base ((string | number)? + base ([(string | number)] = '16px')
    @@ -1751,10 +1593,10 @@

    - - -
    + + +
    @@ -1764,7 +1606,7 @@

    - + src/helpers/modularScale.js @@ -1774,7 +1616,7 @@

    Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.

    -
    modularScale(steps: number, base: (number | string)?, ratio: Ratio?)
    +
    modularScale(steps: number, base: [(number | string)], ratio: [Ratio])
    @@ -1798,7 +1640,7 @@

    - base ((number | string)? + base ([(number | string)] = '1em')
    @@ -1807,7 +1649,7 @@

    - ratio (Ratio? + ratio ([Ratio] = 'perfectFourth')
    @@ -1854,10 +1696,10 @@

    - - -
    + + +
    @@ -1867,7 +1709,7 @@

    - + src/helpers/rem.js @@ -1878,7 +1720,7 @@

    second argument to the function.

    -
    rem(pxval: (string | number), base: (string | number)?)
    +
    rem(pxval: (string | number), base: [(string | number)])
    @@ -1902,7 +1744,7 @@

    - base ((string | number)? + base ([(string | number)] = '16px')
    @@ -1947,10 +1789,10 @@

    - - -
    + + +
    @@ -1960,7 +1802,7 @@

    - + src/helpers/stripUnit.js @@ -2022,29 +1864,8 @@

    // CSS in JS Output -<<<<<<< HEAD - 'input[type="color"]:active, - 'input[type="date"]:active, - 'input[type="datetime"]:active, - 'input[type="datetime-local"]:active, - 'input[type="email"]:active, - 'input[type="month"]:active, - 'input[type="number"]:active, - 'input[type="password"]:active, - 'input[type="search"]:active, - 'input[type="tel"]:active, - 'input[type="text"]:active, - 'input[type="time"]:active, - 'input[type="url"]:active, - 'input[type="week"]:active, - input:not([type]):active, - textarea:active': { - 'border': 'none' ->>>>>>> d0f4766... chore(docs): Changes to buttons and textInputs docs -======= element { '--dimension': 100 ->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules } @@ -2056,13 +1877,14 @@

    - -
    + - - ->>>>>>> 3111967... chore(textInput): textInput shorthand + + + + + diff --git a/src/index.js b/src/index.js index 0073a41c..21050933 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,9 @@ // @flow // Helpers import em from './helpers/em' -<<<<<<< HEAD -<<<<<<< HEAD import modularScale from './helpers/modularScale' import rem from './helpers/rem' -======= -======= -import modularScale from './helpers/modularScale' -import rem from './helpers/rem' ->>>>>>> a6eba2a... chore(docs): Update TOC with missing modules import stripUnit from './helpers/stripUnit' ->>>>>>> 4042d23... chore(shorthand): Simplify Buttons and Inputs to use shared helper // Mixins import clearFix from './mixins/clearFix' @@ -25,34 +17,14 @@ import size from './mixins/size' import timingFunctions from './mixins/timingFunctions' import wordWrap from './mixins/wordWrap' -<<<<<<< HEAD // Shorthands import animation from './shorthands/animation' +import buttons from './shorthands/buttons' +import textInputs from './shorthands/textInputs' -const polished = { - animation, - clearFix, - ellipsis, - em, - modularScale, - hideText, - hiDPI, - placeholder, - rem, - retinaImage, - selection, - size, - stripUnit, - timingFunctions, - wordWrap, -} - -export default polished - -======= ->>>>>>> 4042d23... chore(shorthand): Simplify Buttons and Inputs to use shared helper export { animation, + buttons, clearFix, ellipsis, em, @@ -65,6 +37,7 @@ export { selection, size, stripUnit, + textInputs, timingFunctions, wordWrap, } diff --git a/src/internalHelpers/statefulSelectors.js b/src/internalHelpers/_statefulSelectors.js similarity index 100% rename from src/internalHelpers/statefulSelectors.js rename to src/internalHelpers/_statefulSelectors.js diff --git a/src/internalHelpers/test/__snapshots__/statefulSelectors.test.js.snap b/src/internalHelpers/test/__snapshots__/_statefulSelectors.test.js.snap similarity index 100% rename from src/internalHelpers/test/__snapshots__/statefulSelectors.test.js.snap rename to src/internalHelpers/test/__snapshots__/_statefulSelectors.test.js.snap diff --git a/src/internalHelpers/test/statefulSelectors.test.js b/src/internalHelpers/test/_statefulSelectors.test.js similarity index 97% rename from src/internalHelpers/test/statefulSelectors.test.js rename to src/internalHelpers/test/_statefulSelectors.test.js index cecaaa63..0d33677c 100644 --- a/src/internalHelpers/test/statefulSelectors.test.js +++ b/src/internalHelpers/test/_statefulSelectors.test.js @@ -1,4 +1,4 @@ -import statefulSelectors from '../statefulSelectors' +import statefulSelectors from '../_statefulSelectors' const mockStateMap = [null, ':before', ':after'] diff --git a/src/shorthand/buttons.js b/src/shorthands/buttons.js similarity index 93% rename from src/shorthand/buttons.js rename to src/shorthands/buttons.js index 0095c672..0cd96c42 100644 --- a/src/shorthand/buttons.js +++ b/src/shorthands/buttons.js @@ -1,5 +1,21 @@ // @flow -import statefulSelectors from '../internalHelpers/statefulSelectors' +import statefulSelectors from '../internalHelpers/_statefulSelectors' + +const stateMap = [undefined, null, 'active', 'focus', 'hover'] + +function template(state) { + return `button${state}, + input[type="button"]${state}, + input[type="reset"]${state}, + input[type="submit"]${state}` +} + +type State = + | typeof(undefined) + | null + | 'active' + | 'focus' + | 'hover'; /** * Populates selectors that target all buttons. You can pass optional states to append to the selectors. @@ -28,22 +44,6 @@ import statefulSelectors from '../internalHelpers/statefulSelectors' * } */ -const stateMap = [undefined, null, 'active', 'focus', 'hover'] - -function template(state) { - return `button${state}, - input[type="button"]${state}, - input[type="reset"]${state}, - input[type="submit"]${state}` -} - -type State = - | typeof(undefined) - | null - | 'active' - | 'focus' - | 'hover'; - function buttons(...states: Array) { return statefulSelectors(states, template, stateMap) } diff --git a/src/shorthand/test/__snapshots__/buttons.test.js.snap b/src/shorthands/test/__snapshots__/buttons.test.js.snap similarity index 100% rename from src/shorthand/test/__snapshots__/buttons.test.js.snap rename to src/shorthands/test/__snapshots__/buttons.test.js.snap diff --git a/src/shorthand/test/__snapshots__/textInputs.test.js.snap b/src/shorthands/test/__snapshots__/textInputs.test.js.snap similarity index 100% rename from src/shorthand/test/__snapshots__/textInputs.test.js.snap rename to src/shorthands/test/__snapshots__/textInputs.test.js.snap diff --git a/src/shorthand/test/buttons.test.js b/src/shorthands/test/buttons.test.js similarity index 100% rename from src/shorthand/test/buttons.test.js rename to src/shorthands/test/buttons.test.js diff --git a/src/shorthand/test/textInputs.test.js b/src/shorthands/test/textInputs.test.js similarity index 100% rename from src/shorthand/test/textInputs.test.js rename to src/shorthands/test/textInputs.test.js diff --git a/src/shorthand/textInputs.js b/src/shorthands/textInputs.js similarity index 96% rename from src/shorthand/textInputs.js rename to src/shorthands/textInputs.js index 75be938f..f17f72b7 100644 --- a/src/shorthand/textInputs.js +++ b/src/shorthands/textInputs.js @@ -1,5 +1,33 @@ // @flow -import statefulSelectors from '../internalHelpers/statefulSelectors' +import statefulSelectors from '../internalHelpers/_statefulSelectors' + +const stateMap = [undefined, null, 'active', 'focus', 'hover'] + +function template(state) { + return `input[type="color"]${state}, + input[type="date"]${state}, + input[type="datetime"]${state}, + input[type="datetime-local"]${state}, + input[type="email"]${state}, + input[type="month"]${state}, + input[type="number"]${state}, + input[type="password"]${state}, + input[type="search"]${state}, + input[type="tel"]${state}, + input[type="text"]${state}, + input[type="time"]${state}, + input[type="url"]${state}, + input[type="week"]${state}, + input:not([type])${state}, + textarea${state}` +} + +type State = + | typeof(undefined) + | null + | 'active' + | 'focus' + | 'hover'; /** * Populates selectors that target all text inputs. You can pass optional states to append to the selectors. @@ -40,34 +68,6 @@ import statefulSelectors from '../internalHelpers/statefulSelectors' * } */ -const stateMap = [undefined, null, 'active', 'focus', 'hover'] - -function template(state) { - return `input[type="color"]${state}, - input[type="date"]${state}, - input[type="datetime"]${state}, - input[type="datetime-local"]${state}, - input[type="email"]${state}, - input[type="month"]${state}, - input[type="number"]${state}, - input[type="password"]${state}, - input[type="search"]${state}, - input[type="tel"]${state}, - input[type="text"]${state}, - input[type="time"]${state}, - input[type="url"]${state}, - input[type="week"]${state}, - input:not([type])${state}, - textarea${state}` -} - -type State = - | typeof(undefined) - | null - | 'active' - | 'focus' - | 'hover'; - function textInputs(...states: Array) { return statefulSelectors(states, template, stateMap) }