Minor changes to docs and examples (#33)

.storybook/manager.js

@@ -13,5 +13,7 @@ addons.setConfig({
   theme: undefined,
   selectedPanel: undefined,
   initialActive: 'sidebar',
-  showRoots: false,
+  sidebar: {
+    showRoots: true,
+  },
 })

.storybook/preview.js

@@ -1,3 +1 @@
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-}
+export const parameters = {}

CONTRIBUTING.md

@@ -12,70 +12,50 @@ If you have any feedback, questions, or feature requests, please feel free to op
 ```
  split-type/
     ├── .storybook/   # storybook config
-    ├── .github/      # Github actions config
+    ├── .github/      # Github workflows
     ├── __tests__/    # unit tests
-    ├── __stories__/  # visual examples and tests
+    ├── __stories__/  # Visual tests
     ├── lib/          # library source code
 ```
 
 ## Tests
 
-We use [Jest](https://jestjs.io/), [Storybook](https://storybook.js.org/), and [Puppeteer](https://pptr.dev) for testing.
+We use [Jest](https://jestjs.io/), [Storybook](https://storybook.js.org/), [Puppeteer](https://pptr.dev) and [Chromatic]() for testing.
 
 The project includes two types of tests: unit tests and visual tests.
 
 ### Unit Tests
 
-We use [Jest](https://jestjs.io/) for unit testing pure functions
-
 ### Visual Tests
 
-To test the overall functionality of the library, we use visual tests that run in a actual browser. This makes it possible to test features that rely on visual rendering (such as splitting text into lines, or applying absolute position to split text nodes.)
+To test the overall functionality of the library, we use visual tests that run in an actual browser. This makes it possible to test features that rely on visual rendering (such as splitting text into lines based on natural line breaks, or applying absolute position to split text nodes).
 
 We use the following libraries for visual testing:
 
 - [Storybook](https://storybook.js.org/)
 - [Puppeteer](https://pptr.dev)
 - [@storybook/addon-storyshots-puppeteer](https://storybook.js.org/addons/@storybook/addon-storyshots-puppeteer)
 
-The `__stories__` directory contains a series examples that test different features or scenarios. Each example includes the following variations:
+The `__stories__` directory contains a series examples that server as test cases. Each example includes the following variations.
 
 - Not Split (renders the element without splitting text to provide a visual baseline)
 - Split Lines, Words, and Characters
 - Split Lines and Words
+- Split Lines and characters
 - Split Words and Characters
 - Split Lines
 - Split Words
 - Split Characters
 
-The primary purpose of the visual tests is to ensure that:
-
-1. `SplitType` creates the correct DOM structure for a given set of parameters and target element(s).
-2. `SplitType` does not change the visual appearance of the text in any unexpected ways.
+The primary purpose of the visual tests is to ensure that 1) SplitType creates the correct HTML structure when splitting text, and 2) that the split text in rendered correctly, without changing the visual appearance of the text.
 
-Note: in general, there should be no visual difference between the different variations of an example. Only the underlying DOM structure should change. You can toggle the outline feature in the storybook toolbar to outline the individual DOM on the page. This provides a visual representation of how the dom structure changes in each variation.
+When things are working correctly, there should be no visible difference between the different variations of a story. Only the underlying HTML structure should change. We use Puppeteer to run tests on the storybook examples to check that each variant has the expected HTML structure.
 
 ## Running tests
 
-<br>
-
-**Running unit tests**
-
-To run the unit tests (in the `__tests__` directory):
-
-```sh
-$ yarn run test
-```
-
-```sh
-$ yarn run test:watch
-```
-
-<br>
-
 **Running storybook locally**
 
-This will start storybook on a local server. It will update automatically if you make any changes.
+This will start storybook on a local server. It will update automatically when you make changes to the code.
 
 ```sh
 $ yarn run storybook
@@ -85,7 +65,7 @@ $ yarn run storybook
 
 **Running [Puppeteer](https://pptr.dev) tests in locally**
 
-This runs the [Puppeteer](https://pptr.dev) tests (visual tests) against the local storybook server.
+This runs the [Puppeteer](https://pptr.dev) tests against the local storybook server.
 
 Note: you must start storybook before running this command
 

README.md

@@ -150,9 +150,9 @@ By default, split text nodes are set to relative position and `display:inline-bl
 
 **Responsive Text**
 
-When text is split into words and characters using relative position, the text will automatically reflow when the container is resized. However, when absolute position is enabled, or text is split into lines, text will need to re-split after the container is resized. This can be accomplished using event listener or `ResizeObserver`, and calling the `split` method once the window or container element has been resized.
+When text is split into words and characters using relative position, the text will automatically reflow when the container is resized. However, when absolute position is enabled, or text is split into lines, text will need to re-split after the container is resized. This can be accomplished using an event listener or `ResizeObserver`, and calling the `split` method once the window or container element has been resized.
 
-For a complete example, see `__stories__/components/Example.svelte`
+For a complete example, see [`__stories__/components/Example.svelte`](https://github.com/lukePeavey/SplitType/blob/master/__stories__/components/Example.svelte)
 
 ```js
 const text = new SplitType('#target')
@@ -163,12 +163,11 @@ const text = new SplitType('#target')
 const resizeObserver = new ResizeObserver(
   debounce(([entry]) => {
     // Note: you should add additional logic so the `split` method is only
-    // called if `entry.contentBoxSize.inlineSize` (the width of the container
-    // element) has changed.
+    // called when the **width** of the container element has changed.
     text.split()
   }, 500)
 )
-ro.observe(resizeObserver)
+resizeObserver.observe(containerElement)
 ```
 
 ## API Reference
@@ -181,16 +180,18 @@ The target elements for the SplitType call. This can be a selector, a single ele
 
 **`options`**
 
-| name       | type      | default                 | description                                                      |
-| ---------- | --------- | ----------------------- | ---------------------------------------------------------------- |
-| absolute   | `boolean` | `false`                 | If true, absolute position will be used to for split text nodes. |
-| tagName    | `string`  | `"div"`                 | The HTML tag that will be used for split text nodes              |
-| lineClass  | `string`  | `"line"`                | The className all split line elements                            |
-| wordClass  | `string`  | `"word"`                | The className for split word elements                            |
-| charClass  | `string`  | `"char"`                | The className for split character elements                       |
-| splitClass | `string`  | `null`                  | A className for all split text elements                          |
-| types      | `string`  | `"lines, words, chars"` | Comma separated list of types                                    |
-| split      | `string`  | ""                      | Alias for `types`                                                |
+| name         | type      | default                 | description                                                                |
+| ------------ | --------- | ----------------------- | -------------------------------------------------------------------------- |
+| absolute     | `boolean` | `false`                 | If true, absolute position will be used to for split text nodes.           |
+| tagName      | `string`  | `"div"`                 | The HTML tag that will be used for split text nodes                        |
+| isSplitClass | `string`  | `null`                  | A className that will be applied to the target element when text is split. |
+| lineClass    | `string`  | `"line"`                | The className all split line elements                                      |
+| lineClass    | `string`  | `"line"`                | The className all split line elements                                      |
+| wordClass    | `string`  | `"word"`                | The className for split word elements                                      |
+| charClass    | `string`  | `"char"`                | The className for split character elements                                 |
+| splitClass   | `string`  | `null`                  | A className for all split text elements                                    |
+| types        | `string`  | `"lines, words, chars"` | Comma separated list of types                                              |
+| split        | `string`  | ""                      | Alias for `types`                                                          |
 
 ### Instance Properties
 

__stories__/01-basic.stories.js

@@ -1,7 +1,9 @@
 import getTemplate from './helpers/getTemplate'
 import { baseArgTypes } from './constants'
+import count from './helpers/count'
 
 const children = `Split Typography for Animation`
+const { words, chars } = count(children)
 
 export default {
   title: 'Tests/Basic',
@@ -13,9 +15,6 @@ export default {
   },
 }
 
-const wordCount = children.split(' ').length
-const charCount = children.replace(/\s+/g, '').split('').length
-
 const Template = getTemplate({ children })
 
 export const NotSplit = Template.bind({})
@@ -26,8 +25,8 @@ SplitLinesWordsAndChars.args = { types: 'lines, words, chars' }
 SplitLinesWordsAndChars.parameters = {
   async puppeteerTest(page) {
     expect((await page.$$('.target > .line')).length).toEqual(1)
-    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
-    expect((await page.$$('.word > .char')).length).toEqual(charCount)
+    expect((await page.$$('.line > .word')).length).toEqual(words)
+    expect((await page.$$('.word > .char')).length).toEqual(chars)
   },
 }
 
@@ -36,18 +35,27 @@ SplitLinesAndWords.args = { types: 'lines, words' }
 SplitLinesAndWords.parameters = {
   async puppeteerTest(page) {
     expect((await page.$$('.target > .line')).length).toEqual(1)
-    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.line > .word')).length).toEqual(words)
     expect((await page.$$('.char')).length).toEqual(0)
   },
 }
 
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: 'lines, chars' }
+SplitLinesAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(1)
+    expect((await page.$$('.line > .char')).length).toEqual(chars)
+  },
+}
+
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars' }
 SplitWordsAndChars.parameters = {
   async puppeteerTest(page) {
     expect((await page.$$('.line')).length).toEqual(0)
-    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
-    expect((await page.$$('.word > .char')).length).toEqual(charCount)
+    expect((await page.$$('.target > .word')).length).toEqual(words)
+    expect((await page.$$('.word > .char')).length).toEqual(chars)
   },
 }
 
@@ -66,7 +74,7 @@ SplitWords.args = { types: 'words' }
 SplitWords.parameters = {
   async puppeteerTest(page) {
     expect((await page.$$('.line')).length).toEqual(0)
-    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
+    expect((await page.$$('.target > .word')).length).toEqual(words)
     expect((await page.$$('.char')).length).toEqual(0)
   },
 }
@@ -77,6 +85,6 @@ SplitChars.parameters = {
   async puppeteerTest(page) {
     expect((await page.$$('.line')).length).toEqual(0)
     expect((await page.$$('.word')).length).toEqual(0)
-    expect((await page.$$('.target > .char')).length).toEqual(charCount)
+    expect((await page.$$('.target > .char')).length).toEqual(chars)
   },
 }

__stories__/02-mult-line-text.stories.js

@@ -37,6 +37,15 @@ SplitLinesAndWords.parameters = {
   },
 }
 
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: 'lines, chars', absolute: false }
+SplitLinesAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.line > .char')).length).toEqual(charCount)
+  },
+}
+
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars' }
 SplitWordsAndChars.parameters = {

__stories__/03-absolute-position.stories.js

@@ -42,6 +42,15 @@ SplitLinesAndWords.parameters = {
   },
 }
 
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: 'lines, chars', absolute: true }
+SplitLinesAndChars.parameters = {
+  async puppeteerTest(page) {
+    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
+    expect((await page.$$('.line > .char')).length).toEqual(charCount)
+  },
+}
+
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars', absolute: true }
 SplitWordsAndChars.parameters = {

__stories__/04-nested-elements.stories.js

@@ -79,6 +79,10 @@ SplitLinesAndWords.parameters = {
   },
 }
 
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: 'lines, chars' }
+SplitLinesAndChars.parameters = {}
+
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars' }
 SplitWordsAndChars.parameters = {

__stories__/05-nested-elements-absolute.stories.js

@@ -95,6 +95,10 @@ SplitLinesAndWords.parameters = {
   },
 }
 
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: 'lines, chars', absolute: true }
+SplitLinesAndChars.parameters = {}
+
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars', absolute: true }
 SplitWordsAndChars.parameters = {

__stories__/06-multi-line-nested-elements.stories.js

@@ -122,6 +122,10 @@ SplitWordsAndChars.parameters = {
   },
 }
 
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: 'lines, chars' }
+SplitLinesAndChars.parameters = {}
+
 export const SplitWords = Template.bind({})
 SplitWords.args = { types: 'words' }
 SplitWords.parameters = {

__stories__/07-multi-line-nested-elements-absolute.stories.js

@@ -105,6 +105,10 @@ SplitLinesAndWords.parameters = {
   },
 }
 
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: 'lines, chars' }
+SplitLinesAndChars.parameters = {}
+
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars', absolute: true }
 SplitWordsAndChars.parameters = {

__stories__/08-explicit-line-breaks.stories.js

@@ -40,6 +40,10 @@ SplitLinesAndWords.parameters = {
   },
 }
 
+export const SplitLinesAndChars = Template.bind({})
+SplitLinesAndChars.args = { types: 'lines, chars' }
+SplitLinesAndChars.parameters = {}
+
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars' }
 SplitWordsAndChars.parameters = {

__stories__/assets/styles.css

@@ -11,6 +11,8 @@
 body {
   margin: 0 !important;
   padding: 0 !important;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
 }
 
 .container {
@@ -36,8 +38,6 @@ body {
 }
 
 .target {
-  flex: 1;
-  font-family: Roboto;
   color: var(--text);
   line-height: 1.5;
   letter-spacing: normal;