Added image-snapshot coverage for Tree (#1498)

* Added snapshot coverage for Tree
* Minor fixes to README

Author: Luke Bowerman

CHANGELOG.md

@@ -14,7 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * Preview: `ActionListControls` component (this component is not yet ready for general-use)
 * Experimental: `@looker/components-theme-editor` package
 * Experimental: "Semantic" Layout components - `Layout`, `Header`, `Footer`, `Aside`
-- Implemented image snapshot support and added coverage for `Button*`, `IconButton` components
+
+- Implemented image snapshot support and added coverage for `Button*`, `IconButton` & `Tree` components
 - Preliminary infrastructure for Storybook composition
 - Added support for Storybook extract behavior to improve published-Storybook performance
 

README.md

@@ -62,13 +62,13 @@ We recommend using [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm#in
 
 #### Storybook
 
-Storybook is a tool we use develop, demonstrate and document components in isolation.
+Storybook is a tool used to develop, demonstrate and document components in isolation.
 
 - **yarn storybook** starts master Storybook (includes all stories)
 - **yarn workspace [workspace-package-name] storybook** starts a storybook with just stories within the specified package.
 - **yarn image-snapshots** takes image-snapshots of all stories within packages/\*\*
   - `preimage-snapshots` is a yarn task that runs `storybooks-build` task before capturing image snapshots.
-- **storybooks-build** builds all packages/\* storybooks for publishing and/or image-snapshot testing.
+- **yarn storybooks-build** builds all packages/\* storybooks for publishing and/or image-snapshot testing.
 
 ### Workspace Commands
 

packages/components/snapshots/Tree/Basic-snap.png

@@ -0,0 +1,46 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import React from 'react'
+import styled from 'styled-components'
+import { AccordionDisclosureStyle } from '../..'
+import { TreeItem, Tree, TreeItemLabel } from '..'
+
+export const BorderRadiusOverride = () => (
+  <BorderRadiusOverrideTree label="Created" defaultOpen>
+    <TreeItem>Created Date</TreeItem>
+    <TreeItem>Created Month</TreeItem>
+    <TreeItem>Created Year</TreeItem>
+    <TreeItem>Created Quarter</TreeItem>
+  </BorderRadiusOverrideTree>
+)
+
+const BorderRadiusOverrideTree = styled(Tree)`
+  ${AccordionDisclosureStyle}, ${TreeItemLabel} {
+    background: ${({ theme }) => theme.colors.ui2};
+    border-radius: ${({ theme }) => theme.radii.medium};
+  }
+`