playbook_ui 10.7.1 → 10.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f52c893f2d52e78f9b8af8df860f4ba87244422fec421e7fc38b620c40b3787b
-  data.tar.gz: f089b98459b5d7856be3ffe8d7f822a6e16d9c159ea58bf9bce8fed76899e8ba
+  metadata.gz: 2471fff370fba75829b1aea82b969d2d3ad9ac878bd3a209b17c4346e45e747e
+  data.tar.gz: 0525d0c43f7e242fcefa263bc5a172ddf0d62b2b593b7046fb33c8ab5b9595bf
 SHA512:
-  metadata.gz: d59e4ea292958e68a415fea832b0d2dbf2485a9ce315d9f3cdd4a3463f87272e03b96ff133382093b584f27dfe0400bba37403661dd1c9d1a999cf4a001dc28b
-  data.tar.gz: 0b3a21420930c887f9e67043c7b13cad27c14e7607c1bc97b0dafeb7e0498b310bd770756fb1d59c9effda4bfafb8507e9b07d2938f524dae3e336d5744fc037
+  metadata.gz: c261cbc628a7cb2ee1c34e0c0164e959cf3eae35486e1472b7620448faf0b72ff83890b4edb7368667183914c80765d3f85348009c33f3e0f8aa5bfedc52e612
+  data.tar.gz: e9fef8249f6f1da0756ae5a2b8daabf8809bd6eb1fcc5adf45b6bb4fa499a35c1c25e683587cea173c59e401799da961c6217ca40baa62fee009a4631554ac8a

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import { Button, Filter, Flex, Select, TextInput } from '../../'
 
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
+
 const FilterDefault = (props) => {
   const options = [
     { value: 'USA' },
@@ -18,6 +22,7 @@ const FilterDefault = (props) => {
             'Full Name': 'John Wick',
             'City': 'San Francisco',
           }}
+          onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{
             popularity: 'Popularity',
@@ -62,6 +67,7 @@ const FilterDefault = (props) => {
 
       <Filter
           double
+          onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{
             popularity: 'Popularity',

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -20,6 +20,7 @@ type TextareaProps = {
   disabled?: boolean,
   error?: string,
   id?: string,
+  inline?: boolean,
   object?: string,
   method?: string,
   label?: string,
@@ -38,6 +39,7 @@ const Textarea = ({
   className,
   children,
   disabled,
+  inline = false,
   resize = 'none',
   error,
   label,
@@ -58,8 +60,9 @@ const Textarea = ({
   })
 
   const errorClass = error ? 'error' : null
+  const inlineClass = inline ? 'inline' : ''
   const resizeClass = `resize_${resize}`
-  const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
+  const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
 
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -67,6 +67,17 @@
     }
   }
 
+  &.inline {
+    textarea {
+      &:not(:hover) {
+        border-color: transparent;
+      }
+      &:focus {
+        border-color: $primary;
+      }
+    }
+  }
+
   .pb_caption_kit_xs {
     text-align: right;
   }

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("textarea", props: {
+  inline: true,
+  resize: "auto",
+  rows: 1,
+  value:"Try clicking into this text."
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import Textarea from '../_textarea'
+
+const TextareaInline = (props) => {
+  const [value, setValue] = useState('Try clicking into this text.')
+  const handleChange = (event) => {
+    setValue(event.target.value)
+  }
+  return (
+    <div>
+      <Textarea
+          inline
+          onChange={(e) => handleChange(e)}
+          resize="auto"
+          rows={1}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextareaInline

data/app/pb_kits/playbook/pb_textarea/docs/example.yml

@@ -6,6 +6,7 @@ examples:
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
+  - textarea_inline: Inline
 
   react:
   - textarea_default: Default
@@ -13,3 +14,4 @@ examples:
   - textarea_resize: Resize
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
+  - textarea_inline: Inline

data/app/pb_kits/playbook/pb_textarea/docs/index.js

@@ -3,3 +3,4 @@ export { default as TextareaResize } from './_textarea_resize.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
 export { default as TextareaError } from './_textarea_error.jsx'
 export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
+export { default as TextareaInline } from './_textarea_inline.jsx'

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbTextarea
     class Textarea < Playbook::KitBase
       prop :error
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
       prop :label
       prop :method
       prop :name
@@ -19,7 +21,7 @@ module Playbook
       prop :max_characters
 
       def classname
-        generate_classname("pb_textarea_kit") + error_class + resize_class
+        generate_classname("pb_textarea_kit") + error_class + resize_class + inline_class
       end
 
       def character_counter
@@ -32,6 +34,10 @@ module Playbook
         error ? " error" : ""
       end
 
+      def inline_class
+        inline ? " inline" : ""
+      end
+
       def resize_class
         " resize_#{resize}"
       end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.6.0"
-  VERSION = "10.7.1"
+  PREVIOUS_VERSION = "10.7.1"
+  VERSION = "10.8.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.7.1
+  version: 10.8.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-27 00:00:00.000000000 Z
+date: 2021-09-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -169,20 +169,6 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 1.15.2
-- !ruby/object:Gem::Dependency
-  name: overcommit
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 0.49.0
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 0.49.0
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -301,7 +287,6 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- README.md
 - Rakefile
 - app/pb_kits/playbook/_playbook.scss
 - app/pb_kits/playbook/_reset.scss
@@ -1753,6 +1738,8 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
+- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
 - app/pb_kits/playbook/pb_textarea/docs/example.yml

data/README.md

@@ -1,73 +0,0 @@
-# Playbook Design System
-
-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 & Development teams at Power Home Remodeling, the largest home remodeler in the US.
-
-## Requirements
-
-- Docker 17.09 or later
-- Docker Compose 1.17.1 or later
-
-## Getting started
-
-1. Run `make it`
-1. Install overcommit hooks `bin/overcommit`
-1. open [http://localhost:8089](http://localhost:8089)
-
-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`
-* Re-start the server with `make start`
-
-To run the tests, do `bin/test`. To launch a shell in the container run `make shell`, or to launch a Rails console run `make console`
-
-</p>
-</details>
-
-## Additional resources
-
-### Upgrading between versions
-
-See [docs/upgrade-guide](./docs/upgrade-guide)
-
-### Releases
-
-* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
-
-### Development Environment
-
-* [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
-
-### Reset.css
-
-Playbook provides it's own `reset.css` boilerplate for optional use in your application. You can either:
-
-1. Import the `dist/reset.css` from the playbook_ui gem into your Rails view: `@import "reset.css"` (note: your path may vary depending on your application's asset paths)
-2. Import or include the file via the npm package: `import 'reset.css'` (note: your path may vary depending on your application's node-sass `includePaths`)
-
-This asset aims to provide a commonly styles base for supported browsers.
-
-### Building Playbook Kits
-
-* [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)
-
-### Testing Playbook Kits Locally
-
-#### Testing React Kits locally
-1.  Inside of your Playbook repository, run `yarn link`. 
-2.  Inside of the directory you want to test with playbook, run `yarn link playbook-ui`.
-3.  Run `yarn hmr` in your directory you want to test with playbook, and hard refresh (command + shift + R) your browser.
-4.  Test all the things!
-5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
-6.  Inside of your Playbook repository, run `yarn unlink`. 
-
-Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.