playbook_ui 2.8.8 → 2.8.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61c58765172511056b14d6c3ecf08d6770d79ec343011f55da235ef43d337737
-  data.tar.gz: f7789d51bc27282142e0ad087f0b06337988409370aeaf1ab3be7c89a8e4b665
+  metadata.gz: 4f9e84db4ccb31383e19cb882e7225455d347fda5571daed019d79d8b8daf716
+  data.tar.gz: 6b34648478a78f753458727976e3dce218f34fcd24aba24eeee38ec312dd2c55
 SHA512:
-  metadata.gz: '068062e848cb483ce0e9c174a37eb4f3ba203ed06e113a7d79338267aa69b51d6f02580e6a443c76a757ca03f0053dd5f250a095a0b0f94a7fe23b11e808aef4'
-  data.tar.gz: 522f98246b9a15eced512ab65ceb75b155c9796514fc9822882b28f823674a210725749c998bf56c271fe4d24ccaafa3c0a69b07be5a34be5038bc23cb336d84
+  metadata.gz: 3568843cb54b4e11011ce9bd16c07880acb30b8404d0d59b57f137c03f9abee485e6970aef9683a7ed955e8ec09b78dd4f1bf2c38760c21368bb8002056cc10b
+  data.tar.gz: 651148155a79e850637f7217f714f7e38d3aa5d7164be550ec00a70f210a0ff4efe05b5b7da475482db77a533d5e2e7c44bbd8e0b693f253c4b2696f421b5b5d

data/README.md

@@ -1,9 +1,6 @@
-# UI Playbook
+# Playbook Design System
 
-UIX Styleguide & Documentation
-
-#### Demo
-[View Demo](http://afternoon-refuge-87160.herokuapp.com/)
+Playbook is the first design system built for both Rails & React interfaces. Inspired by [Velocity](https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/), Playbook takes a modern design approach, and applies it in a way that makes it easy to support bleeding edge, or legacy systems. Playbook is built & maintained by the User Experience & Developemnt teams at Power Home Remodeling, the largest home remodeler in the US.
 
 ## Requirements
 
@@ -12,11 +9,16 @@ UIX Styleguide & Documentation
 
 ## Getting started
 
+1. Run `yarn && bundle`
 1. Run `make start`
 1. Bootstrap the database: `docker-compose run web bin/rails db:setup`
 1. open [http://localhost:8080](http://localhost:8080)
 
-When making changes to the Gemfile:
+To clean up this project from your local machine, run `make stop`, which will drop all containers and networks associated with this project. To purge all resources, do `make clean`, which also removes images and volumes for a blank slate.
+
+
+<details><summary>Making changes to the Gemfile:</summary>
+<p>
 
 * Stop the `make start` process
 * Run `make bundle` to (un-)install gems and update the `Gemfile.lock`
@@ -24,293 +26,25 @@ When making changes to the Gemfile:
 
 To run the tests, do `make test`. To launch a shell in the container run `make shell`, or to launch a Rails console run `make console`
 
-To clean up this project from your local machine, run `make stop`, which will drop all containers and networks associated with this project. To purge all resources, do `make clean`, which also removes images and volumes for a blank slate.
-
-### Configuration
-
-The application is configured through a set of environment variables which can be tweaked in the `.env` file for local development; these should not be committed unless they are generally applicable.
-
-## Deployments
-
-* A staging environment is automatically deployed on every master build. Manual deployments are possible (via `make deploy cluster=APP-HQ environment=staging tag=PR-X-$SHA1-$BUILDNUMBER`) but are discouraged.
-* A production environment that is automatically deployed on every master build. Manual deployments are strongly discouraged.
-
-These environments are deployed from the same container used for local development, which is built by CI on every commit.
-
-In order to work with these, you'll need to have [setup APP access](https://github.com/powerhome/APP#getting-access).
-
-### Configuring the application deployed to APP
-
-The Helm chart stored in `charts/playbook` defines the resource types deployed to the application platform as templates which are customised with specific values for each environment. The standard values are held in `charts/playbook/values.yaml`, while per-environment overrides (including secrets) are stored in `config/deploy/[environment]/[values|secrets].yaml`. Standard values are in plain text, while secrets (API keys etc) are encrypted (more below). These templates and values may be modified to affect the deployment, but attention must be given to any template or defaults changes to ensure they apply correctly to all environments, and also to minimizing the differences between environments where possible.
-
-The most common changes expected to be required are to the set of environment variables passed to the app at runtime. These values are passed to the app via the `spec -> template -> spec -> containers -> env` entry in the deployment template, where the values are extracted from those provided to the template or from a Kubernetes Secret. In the plain-text case, the values simply need to be defined in a values.yaml to be interpolated. In the case of secrets, they must be first passed into the secret template. Examples of both exist and should be followed.
-
-#### Dealing with encrypted secrets
-
-Encrypted secrets are perhaps the most complex part of the deployment setup. These secrets must be known to the app at runtime, for example to connect to the Nitro API, and must be included in the application repository in order to simplify coordination of configuration changes, but must not be stored at rest in plain text. They are thus encrypted in `secrets.yaml` files in the git repository, in such a way that developers can decrypt them (to make changes) and Jenkins can decrypt them (to pass to Helm for deployment). The encryption is done using GPG keys using [`helm-secrets`](https://github.com/futuresimple/helm-secrets) and [`sops`](https://github.com/mozilla/sops).
-
-To begin managing secrets, one must install these dependencies (for local use) or use the `make secrets` container to manage them. An example of usage of the container:
-
-```
-[Thu Feb 22 08:59:09]$ make secrets
-docker run --tty --interactive --rm --volume ~/.kube:/root/.kube --volume ~/.gnupg/secring.gpg:/root/.gnupg/secring.gpg --volume ~/.gnupg/pubring.gpg:/root/.gnupg/pubring.gpg --volume ~/.gnupg/private-keys-v1.d:/root/.gnupg/private-keys-v1.d --volume /Users/garettarrowood/Power/playbook:/app --entrypoint /bin/gpg-agent-background docker-registry.powerhrg.com/platform/deployer:master-6cf477240dd6b4f180f0f8da980805ddf6fc4fe0-18 bash --login
-root@4ead1d121f65:/app# helm secrets view config/deploy/staging/secrets.yaml
-```
-
-#### Common tasks:
-
-##### Requesting access to secrets
-
-1. Find your GPG key fingerprint using `gpg --list-secret-keys`. Generate a key if you don't already have one (see https://help.github.com/articles/generating-a-new-gpg-key/).
-1. Add your key to the keyring: `make addKeyToRing fingerprint=[FINGERPRINT]`
-1. Include your key fingerprint in `.sops.yaml`.
-1. Submit a PR including these changes.
-1. Ask someone who already has access to follow the grant routine below.
-
-##### Granting access to secrets
-
-1. Checkout the access request PR.
-1. Run `make grantSecretAccess fingerprint=[THE REQUESTED FINGERPRINT]`.
-1. Commit the changes to `secrets.yaml` files that result and push to the PR.
-1. Ask the requester to confirm they can read the secrets, then merge the PR.
-
-##### Reading secrets
-
-Run `helm secrets view config/deploy/[ENVIRONMENT]/secrets.yaml`.
-
-##### Editing secrets
-
-1. Run `helm secrets edit config/deploy/[ENVIRONMENT]/secrets.yaml`.
-1. Make your changes and save the file.
-1. Commit the modified secrets file.
-
-
-
----
-
-# Old Storybook
-
-This repo provides the tools to implement view components which make up the visual appearance of Nitro.
-
-* Stylesheets for the app navigation and general appearance
-* Self-contained React components for use in building views
-
-The intent of this repo is to provide a base on which other UIs can be built such that they maintain visual consistency and the Nitro brand.
-
-
-- [Quick Start](#quick-start)
-- [Local Storybook Development in Nitro-Web](#local-storybook-development-in-nitro-web)
-- [Other options for storybook in Nitro-Web](#other-options-for-storybook-in-nitro-web)
-- [Getting Your Changes Into Nitro-Web](#getting-your-changes-into-nitro-web)
-- [Creating Components](#creating-components)
-- [Converting Existing Components](#converting-existing-components)
-
-
-## Quick Start
-From the current project directory, run:
-
-1. ensure you are running proper node version (see `package.json` => `engines`)
-2. `yarn install`
-3. `yarn run storybook`
-4. navigate to [localhost:9001](http://localhost:9001)
-
----
-
-## Local Storybook Development in Nitro-Web
-Its easy to create and test out a component on nitro in real time, even with hot reload. You can point your local storybook folder as you develop it.
-
-##### Update the storybook in the Gemfile to a local path
-`gem "playbook", :path => "/path/to/storybook/locally"`
-
-##### Update the storybook in package.json to a local path
-`”nitro-storybook": "/path/to/storybook/locally"`
-
-> if you have any problems with assets not showing try running:
-`bundle exec rake assets:clobber`
-
-
----
-
-## Other options for storybook in Nitro-Web
-You’ll need to point to a something published on GitHub when your ready to deploy it. Here are some options for you:
-
-##### Gemfile - Tag
-`gem "playbook", git: "git@github.com:powerhome/nitro-styleguide.git", tag: "v1.2.1"`
-
-##### Gemfile - SHA
-`gem "playbook", git: "git@github.com:powerhome/nitro-styleguide.git", ref: "4aded"`
-
-##### Gemfile - Branch
-`gem "playbook", git: "git@github.com:powerhome/nitro-styleguide.git", branch: "branchname"`
-
-##### package.json - Branch
-`"nitro-storybook": "git+ssh://git@github.com/powerhome/nitro-storybook.git#branchname",`
-
-
----
-
-## Getting Your Changes Into Nitro-Web
-
-### 1. Increase your version
-
-Check the [releases](https://github.com/powerhome/nitro-storybook/releases) and increase your version by 1 in the following files:
-
-```
-lib/playbook/version.rb
-package.json
-```
-
-Be sure and run the following anytime you version up:
-
-`yarn install && bundle install`
-
-
-### 2. Prep a Storybook PR
-
-Get your `nitro-storybook` PR approved and merged into the `nitro-storybook`'s `master` branch.
-
-### 3. Create a Tag & Release
-
-Once your merged you need to create a tag so we can reference this version. Here are some easy ways to create and delete tags:
-
-##### Add A Tag
-```
-git tag v1.0.1
-git push origin v1.0.1
-```
-
-##### Remove A Tag
-```
-git tag -d v1.0.1
-git push --delete origin v1.0.1
-```
-
-### 4. Update references in Nitro Web
-
-##### Package.json
-`"nitro-storybook": "git+ssh://git@github.com/powerhome/nitro-storybook.git#v1.9.2",`
-
-##### Gemfile (Usually 4 Spots)
-```
-gem "playbook", git: "git@github.com:powerhome/nitro-storybook.git", tag: "v1.9.2"
-```
-
-If your updated styling doesn’t show up, you may have old assets you need to remove.
-`bundle exec rake assets:clobber`
-
----
-
-## Creating Components
-
-Creation of new components requires a bit of forethought. Ask yourself these questions first:
-
-1. Does the component already exist in `nitro_react` ?
-    1. Yes - see [Converting Existing Components](#converting-existing-components)
-    1. No - continue
-1. Ensure you are familiar with these concepts:
-    - using Flow.js (install tooling in your editor/IDE)
-    - creating "dumb components" in React - your new component **will not** need to be concerned with XHR requests, servers, ect.
-    - ESLint (install tooling in your editor/IDE)
-    - CSSModules
-    - Composing complex React components/organisms (so that you don't create them here!)
-    - [Storybook]()
-
-### New React Component
-
-Here are the steps to creating a new `Foo` component (in order):
-
-1. Create a new directory under `/components` named `Foo`
-1. Create `Foo.jsx` inside the directory with the contents:
-    ```javascript
-    /* @flow */
-
-    import React from 'react'
-
-    type Props = {}
-
-    export default class Foo extends React.Component<Props> {
-      static defaultProps = {}
-      props: Props
-      render() {
-        return <span>{`I'm a Foo`}</span>
-      }
-    }
-
-    ```
-1. Create `styles.scss` inside the directory with the contents:
-    ```scss
-    .foo {}
-    ```
-1. Add the stylesheet as an import by adding this line:
-    ```javascript
-    import styles from './styles.scss'
-    ```
-1. Then make use of the import by adding `styles.foo` as the `className`:
-    ```javascript
-    render() {
-      return <span className={styles.foo}>{`I'm a Foo`}</span>
-    }
-    ```
-1. Add `Foo.jsx` to the component index in `components/index.js`
-    ```javascript
-    export Foo from './Foo/Foo.jsx'
-    ```
-
-#### Create the Story
-
-1. Within the same directory, create a `FooStory.jsx` with the contents:
-    ```javascript
-    import React from "react"
-    import Foo from "./Foo"
+</p>
+</details>
 
-    import { text, select, boolean } from "@storybook/addon-knobs"
+## Additional resources
 
-    export default function FooStory(stories) {
-      stories.add("Foo",
-        () => {
-          let props = {}
-          return (
-            <Foo {...props}/>
-          )
-        }
-      )
-    }
-    ```
-1. Add the story to the appropriate story index. This will depend on the intent of your component. `Foo` is pretty simply 😁, hence we will add it to `/stories/basic.js` like so:
-    ```javascript
-    export FooStory from '../components/Foo/FooStory'
-    ```
-    This will add your `Foo` story to the categoy "Basic Components" in Storybook
+### Nitro & Releases
 
----
+* [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)
+* [Creating Releases](https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version)
 
-## Converting Existing Components
+### Development Environment
 
-Conversion of existing components in `nitro_react` is a little different since we already have a decent class structure in the jsx component. There are, however, a few considerations:
+* [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
 
-- Use Flow.js types instead of `PropTypes`
-- use `class` instead of `function` (see the examples below)
-- Try and fix as many eslint and Flow warnings as possible - this is your chance and the time is now! 😬 💀
+### Building Playbook Kits
 
-1. Create a `Props` flow type
-    ```javascript
-    type Props = {
-      children?: Array<React.Node>,
-      bold: boolean,
-      italic: boolean,
-      className: string,
-    }
-    ```
-1. Add the type to your class
-    ```javascript
-    export default class Foo extends React.Component<Props> {
-      static defaultProps = {}
-      props: Props
-      ...
-    ```
-1. You can still deconstruct `this.props` in any of your methods in the normal way
-    ```javascript
-    const {bar} = this.props
-    ```
-1. Lint your code `yarn run lint`
-1. For some lint warning you can `yarn run lint-fix` which will automagically fix things like indentation.
+* [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit)
+* [Rails Kit](https://github.com/powerhome/playbook/wiki/Rails-Kit)
+* [Rails Kit Helpers](https://github.com/powerhome/playbook/wiki/Rails-Kit-Helpers)
+* [Using a Kit within a Kit](https://github.com/powerhome/playbook/wiki/Using-a-Kit-within-a-Kit)
+* [Understanding Rails Kit HTML Wrapper](https://github.com/powerhome/playbook/wiki/Understanding-Rails-Kit-HTML-Wrapper)
+* [Kit Stylesheet](https://github.com/powerhome/playbook/wiki/Kit-Stylesheet)

data/app/pb_kits/playbook/packs/index.js

@@ -20,6 +20,9 @@ import TimeStamp from "../pb_timestamp/_timestamp";
 import Title from "../pb_title/_title";
 import User from "../pb_user/_user";
 import VerticalNav from "../pb_vertical_nav/_vertical_nav";
+import Pill from "../pb_pill/_pill";
+import Currency from "../pb_currency/_currency";
+import Toggle from "../pb_toggle/_toggle";
 
 // Dashboard Settings
 import commonSettings from "../pb_dashboard/commonSettings";
@@ -53,6 +56,9 @@ export {
   Title,
   User,
   VerticalNav,
+  Pill,
+  Currency,
+  Toggle,
   commonSettings,
   lineGraphSettings,
   barGraphSettings,

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -14,14 +14,14 @@ type BodyProps = {
 }
 
 const bodyCSS = ({
-  color='light',
+  color='default',
   dark=false,
   status='',
 
 }: BodyProps) => {
 
   const colorStyle = color !== '' ? `_${color}` : ''
-  
+
   const themeStyle = dark === true ? '_dark' : ''
 
   const statusStyle = status !== '' ? `_${status}` : ''
@@ -33,12 +33,12 @@ const Body = (props: BodyProps) => {
   const {
     className,
     children,
-    text, 
+    text,
     tag='p',
   } = props
 
   const Tag = `${tag}`
-    
+
   return (
     <Tag className={classnames(bodyCSS(props), className)}>
       { text || children }

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -15,7 +15,7 @@ $pb_button_border_width: 1px;
 @mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
   text-rendering: optimizeLegibility;
   font-size: $font_small;
-  font-weight: $regular;
+  font-weight: $bold;
   text-align: center;
   vertical-align: middle;
   text-transform: none;

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -1,21 +1,79 @@
-import React from 'react';
-import PropTypes from "prop-types";
-
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string
-};
-
-class DashboardValue extends React.Component {
-  render() {
-    return (
-      <div className="pb_dashboard_value">
-        <span>DASHBOARD VALUE CONTENT</span>
-      </div>
-    )
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import Body from '../pb_body/_body.jsx'
+import StatChange from '../pb_stat_change/_stat_change.jsx'
+import StatValue from '../pb_stat_value/_stat_value.jsx'
+
+type DashboardValueProps = {
+  align?: 'left' | 'center' | 'right',
+  className?: String,
+  id?: String,
+  stat_change?: {
+    change?: String,
+    value?: String | Number
+  },
+  stat_label?: {
+    label?: String
+  },
+  stat_value?: {
+    unit?: String,
+    value?: String | Number
   }
 }
 
-DashboardValue.propTypes = propTypes;
+const dashboardValueCSS = ({
+  align='left',
+
+}: DashboardValueProps) => {
+
+  const alignStyle = align !== '' ? `_${align}` : ''
+
+  return 'pb_dashboard_value_kit' + alignStyle
+}
+
+const DashboardValue = (props: DashboardValueProps) => {
+  const {
+    align='left',
+    className,
+    id,
+    stat_change,
+    stat_label,
+    stat_value,
+  } = props
+
+  const statLabel = function(stat_label) {
+    if (stat_label) {
+      return (
+        <Body color="light">{stat_label.label}</Body>
+      )
+    }
+  }
+
+  const statChange = function(stat_change) {
+    if (stat_change) {
+      return (
+        <StatChange change={stat_change.change} value={stat_change.value} />
+      )
+    }
+  }
+
+  const statValue = function(stat_value) {
+    if (stat_value) {
+      return (
+        <StatValue value={stat_value.value} unit={stat_value.unit} />
+      )
+    }
+  }
+
+  return (
+    <div id={id} className={classnames(dashboardValueCSS(props), className)}>
+      {statLabel(stat_label)}
+      {statValue(stat_value)}
+      {statChange(stat_change)}
+    </div>
+  )
+}
 
-export default DashboardValue;
+export default DashboardValue