Merge pull request #35 from everydayhero/update-docs-for-distribution

Clean up docs for distribution

packages/experience-docs/source/content/colors.md

@@ -3,14 +3,17 @@ title: Colors
 path: /colors
 status: amber
 imports:
+  Lead: '../components/Lead/index.js'
   ColorSwatch: '../components/ColorSwatch/index.js'
   ColorPalette: '../components/ColorPalette/index.js'
   ColorContrast: '../components/ColorContrast/index.js'
   Image: '../components/Image/index.js'
   colorRelationshipSvg: './images/colours.svg'
 ---
 
-Everydayhero colors are categorised into Primary, Secondary, and Tertiary brand colors. These represent the only colors that should be used when developing applications, marketing, or communications for Everydayhero. These colors, especially green and light green, serve as core recall elements to help consistently reinforce our brand.
+```render html
+<Lead>Everydayhero colors are categorised into Primary, Secondary, and Tertiary brand colors. These represent the only colors that should be used when developing applications, marketing, or communications for Everydayhero. These colors, especially green and light green, serve as core recall elements to help consistently reinforce our brand.</Lead>
+```
 
 ## Everydayhero brand palette
 

packages/experience-docs/source/content/components/index.md

@@ -2,4 +2,10 @@
 title: Components
 path: /components
 status: red
+imports:
+  Lead: '../../components/Lead/index.js'
 ---
+
+```render html
+<Lead>Content to come.</Lead>
+```

packages/experience-docs/source/content/components/input.md

@@ -2,4 +2,10 @@
 title: Input
 path: /components/input
 status: red
+imports:
+  Lead: '../../components/Lead/index.js'
 ---
+
+```render html
+<Lead>Example of where a component will live.</Lead>
+```

packages/experience-docs/source/content/icons.md

@@ -4,17 +4,22 @@ path: /icons
 status: red
 imports:
   Icon: '../components/Icon/index.js'
+  Lead: '../components/Lead/index.js'
 ---
 
-Icons guide and inform our users, clarifying meaning and establishing expectations. Icons are most effective when they are familiar, consistent, and recognizable. Good icons harmonize with typography and with the rest of the design language. They don’t mix metaphors, and they communicate only what’s needed, as speedily and simply as possible.
+```render html
+<Lead>Icons guide and inform our users, clarifying meaning and establishing expectations. Icons are most effective when they are familiar, consistent, and recognizable. Good icons harmonize with typography and with the rest of the design language. They don’t mix metaphors, and they communicate only what’s needed, as speedily and simply as possible.</Lead>
+```
+
+---
 
 Everydayhero icons are an extension of our brand's emoji illustrations, primarily used in interactive UI applications. For sales, marketing, and presentation collateral, prefer to use the emoji.  
 
 All icons are implemented as three levels of detail. These levels are toggled as flat | mono | emoji | sticker, and each level has its own usage guidelines.
 
 ### Flat
 
-Flat icons are the preferred usage in most situations. They appear as a single solid currentColor silhouette. 
+Flat icons are the preferred usage in most situations. They appear as a single solid currentColor silhouette.
 
 ```render html
 <Icon icon='camera' kind='flat' />
@@ -37,7 +42,7 @@ Flat icons are the preferred usage in most situations. They appear as a single s
 
 ### Mono
 
-Mono icons can be used for themed or whitelabel applications. They appear as a currentColor icon with interior details such as highlights, shadows, and outlines. 
+Mono icons can be used for themed or whitelabel applications. They appear as a currentColor icon with interior details such as highlights, shadows, and outlines.
 
 ```render html
 <Icon icon='camera' kind='mono' />
@@ -60,7 +65,7 @@ Mono icons can be used for themed or whitelabel applications. They appear as a c
 
 ### Emoji
 
-Emoji icons can be used to add color and context to a view, but should be used sparingly. 
+Emoji icons can be used to add color and context to a view, but should be used sparingly.
 
 ```render html
 <Icon icon='camera' kind='emoji' />
@@ -83,7 +88,7 @@ Emoji icons can be used to add color and context to a view, but should be used s
 
 ### Sticker
 
-Sticker icons can be used when it's necessary to display a colorful icon on a colored or image background. They should be used sparingly, preferrably limited to one per view. 
+Sticker icons can be used when it's necessary to display a colorful icon on a colored or image background. They should be used sparingly, preferrably limited to one per view.
 
 ```render html
 <Icon icon='camera' kind='sticker' />
@@ -106,7 +111,7 @@ Sticker icons can be used when it's necessary to display a colorful icon on a co
 
 ## Usage Guidelines
 
-For all icons, the following rules apply: 
+For all icons, the following rules apply:
 
 - Never distort or skew icons
 - Never use a non-brand icon within the same view as a brand icon (if you really need an icon, it's worth us developing an official version)
@@ -131,7 +136,7 @@ For all icons, the following rules apply:
 
 ### Emoji
 
-- Never display emoji icons smaller than 2em 
+- Never display emoji icons smaller than 2em
 - Never display emoji icons inline with text
 - Never display emoji icons on tertiary background colors or images
 - Always ensure plenty of spacing surrounding emoji icons, proportional to roughly one-third their width
@@ -147,23 +152,23 @@ For all icons, the following rules apply:
 All icons are created inline with the guidelines for illustration. They are constructred from a predefined set of lines and shapes, and built on a 32px square artboard. No portion of the icon should appear semi-transparent when set against a background (with the sole exception of the drop shadow on sticker icons).
 
 - **Base shapes** must be solid color elements at 100% opacity. Tonal contrast is the primary factor contributing to legibility at UI sizes, and so must be a strong consideration in the palette chosen.
-- **Outlines** must be charcoal, set to 40% opacity, 2px thick, overlayed on a base shape. 
-- **Shadows** must be charcoal, set to 20% opacity, overlayed on a base shape. 
-- **Highlights** must be white, set to 20% opacity, overlayed on a base shape, and should not touch or extend across outlines or adjacent colors. 
+- **Outlines** must be charcoal, set to 40% opacity, 2px thick, overlayed on a base shape.
+- **Shadows** must be charcoal, set to 20% opacity, overlayed on a base shape.
+- **Highlights** must be white, set to 20% opacity, overlayed on a base shape, and should not touch or extend across outlines or adjacent colors.
 
 ### Flat
 
-Flat versions of icons have no outlines, highlights, or shadows, and the base shape uses currentColor. The silhouette of the icon must be significantly and obviously different to all other brand icons. interior detail must come from negative space. 
+Flat versions of icons have no outlines, highlights, or shadows, and the base shape uses currentColor. The silhouette of the icon must be significantly and obviously different to all other brand icons. interior detail must come from negative space.
 
 The flat version of an icon should be built first, with mono and emoji versions progressively adding more detail. This will ensure that the silhouette remains identifiable in all applications.
 
 ### Mono
 
-Mono versions of icons are defined by setting all base shapes to use currentColor, with interior detail and tone levels coming from outlines, highlights, and shadows. 
+Mono versions of icons are defined by setting all base shapes to use currentColor, with interior detail and tone levels coming from outlines, highlights, and shadows.
 
 ### Emoji
 
-Emoji versions of icons must only use colors from our brand palette, and should be restricted to as few as possible, and no more than 3 colors. 
+Emoji versions of icons must only use colors from our brand palette, and should be restricted to as few as possible, and no more than 3 colors.
 
 ### Sticker
 

packages/experience-docs/source/content/layout.md

@@ -2,8 +2,10 @@
 title: Layout
 path: /layout
 status: red
+imports:
+  Lead: '../components/Lead/index.js'
 ---
 
-Sizing
-
-Grid Systems
+```render html
+<Lead>Content to come.</Lead>
+```

packages/experience-docs/source/content/logo.md

@@ -4,9 +4,12 @@ path: /logo
 status: amber
 imports:
   LogoExample: '../components/LogoExample/index.js'
+  Lead: '../components/Lead/index.js'
 ---
 
-Our logo mark is comprised of two important elements: hearts and connection. Everyday heroes are passionate about the causes they support and enjoy connecting with a community of like minded people.
+```render html
+<Lead>Our logo mark is comprised of two important elements: hearts and connection. Everyday heroes are passionate about the causes they support and enjoy connecting with a community of like minded people.</Lead>
+```
 
 ## Resources
 
@@ -28,7 +31,7 @@ The Everydayhero heart logomark acts as a short-form signature, and is only used
 
 ### “Powered by” Logo
 
-When Everydayhero’s brand is diminished, such as for campaign pages, bespoke sites for charities and events, and white-label products, the “powered by everydayhero” logo should be displayed centred towards the bottom of the primary content. 
+When Everydayhero’s brand is diminished, such as for campaign pages, bespoke sites for charities and events, and white-label products, the “powered by everydayhero” logo should be displayed centred towards the bottom of the primary content.
 
 ```render html
 <LogoExample type='powered-by-padded' />
@@ -47,7 +50,7 @@ The preferred logo application is full colour on a white background. In any cont
 Everydayhero is always one word, and is capitalized when written out in text. Always use the same typeface you are using for the rest of the text. Always spell out Everydayhero in English–never translated into another language.
 
 ## Usage Guidelines
- 
+
 ### Primary Logo
 
 - Never modify the logo colours, proportions, or opacity of either the heart logomark or ‘everydayhero’ name
@@ -68,10 +71,10 @@ Everydayhero is always one word, and is capitalized when written out in text. Al
 
 ### Heart Logomark
 
-In addition to all the usage guidelines that apply to the primary logo, the heart logomark should also only ever be used in the following circumstances: 
+In addition to all the usage guidelines that apply to the primary logo, the heart logomark should also only ever be used in the following circumstances:
 
 - The logo must appear inside a square
-- There is sufficient brand context for viewers to identify it as Everydayhero’s logomark, examples include: 
+- There is sufficient brand context for viewers to identify it as Everydayhero’s logomark, examples include:
   - Social media profiles
   - Emails sent in response to a user action within our ecosystem
   - Internal office signage
@@ -88,7 +91,7 @@ In all other circumstances, the primary logo must be used.
 
 ### "Powered by" Logo
 
-In addition to all the usage guidelines that apply to the primary logo, the “powered by” logo should: 
+In addition to all the usage guidelines that apply to the primary logo, the “powered by” logo should:
 
 - Always be centred
 - Never be displayed smaller than 2.5cm (print) or 150px (web)

packages/experience-docs/source/content/motion.md

@@ -2,4 +2,10 @@
 title: Motion
 path: /motion
 status: red
+imports:
+  Lead: '../components/Lead/index.js'
 ---
+
+```render html
+<Lead>Content to come.</Lead>
+```

packages/experience-docs/source/content/photography.md

@@ -2,9 +2,17 @@
 title: Photography
 path: /photography
 status: red
+imports:
+  Lead: '../components/Lead/index.js'
 ---
 
-No colours perceptually darker than our charcoal (use instagram-like filters to constrain the levels and brighten the shadows). 
-Consider: gradient mapping in monochromatic tones of a single brand/themed color (Luke’s Meetup example)
-Narrow depth of field (low f-stop, preferably 1.4-2)
-Themes: triumph, perseverance, effort, people comforting other people, people celebrating other people,  etc.
+```render html
+<Lead>Content to come.</Lead>
+```
+
+## Notes/Thoughts
+
+- No colours perceptually darker than our charcoal (use instagram-like filters to constrain the levels and brighten the shadows).
+- Consider: gradient mapping in monochromatic tones of a single brand/themed color (Luke’s Meetup example)
+- Narrow depth of field (low f-stop, preferably 1.4-2)
+- Themes: triumph, perseverance, effort, people comforting other people, people celebrating other people,  etc.

packages/experience-docs/source/content/principles.md

@@ -2,8 +2,14 @@
 title: Principles
 path: /principles
 status: amber
+imports:
+  Lead: '../components/Lead/index.js'
 ---
 
+```render html
+<Lead>Our principles form the foundation of all our other decisions. If there are no guidelines for something, Principles are what we fall back on to make decisions.</Lead>
+```
+
 ## Familiar
 
 Fundraising is a very personal and emotional journey. We build trusting and empathetic relationship with people by making the experience thoughtful, welcoming, and predictable.
@@ -19,4 +25,3 @@ Technology amplifies our efforts. We raise people up, investing our time, expert
 ## Rewarding
 
 A sense of fulfilment keeps people going. We celebrate people’s efforts, encourage them through challenges, and shout their triumphs to the world.
-

packages/experience-docs/source/content/shape.md

@@ -2,4 +2,10 @@
 title: Shape
 path: /shape
 status: red
+imports:
+  Lead: '../components/Lead/index.js'
 ---
+
+```render html
+<Lead>Content to come.</Lead>
+```

packages/experience-docs/source/content/voice.md

@@ -2,17 +2,25 @@
 title: Voice & Tone
 path: /voice-tone
 status: red
+imports:
+  Lead: '../components/Lead/index.js'
 ---
 
-**Capture**: calls to action, input labels, and such should be written in first person, as though the user were speaking a command to a butler (or siri). Examples: “Give Claire $50”, “I will donate $50”, “My email address is:”, “Download my receipt”, “I want the charity to contact me to support my fundraising journey”, etc.
+```render html
+<Lead>Content to come.</Lead>
+```
 
-## EVERYTHING BELOW IS OLD: Taken from the github wiki
+## Notes/Thoughts
+
+Calls to action, input labels, and such should be written in first person, as though the user were speaking a command to a butler (or siri). Examples: “Give Claire $50”, “I will donate $50”, “My email address is:”, “Download my receipt”, “I want the charity to contact me to support my fundraising journey”, etc.
+
+## Below is taken from the github wiki
 
 Use this section as a guide any time you are writing for everydayhero, whether it is on the company blog, the Wonderwall, social media or any other platform.
 
 For most questions, refer to the AP Stylebook. It is the standard style and usage guide in the news industry and provides guidelines on everything from comma usage to state and country abbreviations. The online version can be found here: https://www.apstylebook.com/.
 
-## Grammar, Punctuation and Capitalization
+### Grammar, Punctuation and Capitalization
 
 When you post on the blog or social media, you’re representing everydayhero. We strive to be a trusted company that people look up to. One way to accomplish this is by always presenting a professional face to the world through polished content. The guidelines here will help keep everything clear and consistent across all of our platforms, no matter who is writing.