playbook_ui 8.4.0.alpha.dependencies.2 → 9.2.2

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx

@@ -5,7 +5,7 @@ import {
   RichTextEditor,
 } from '../../'
 
-const RichTextEditorPreview = () => {
+const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)
   const [previewText, setPreviewText] = useState(<div />)
 
@@ -19,6 +19,7 @@ const RichTextEditorPreview = () => {
       <RichTextEditor
           id="content-preview-editor"
           onChange={handleChange}
+          {...props}
       />
       <If condition={showPreview}>
         <Card marginTop="md">

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -7,7 +7,9 @@
   margin-bottom: $space_sm;
   select {
     @include pb_textarea_light;
-    @include pb_title_4;
+    @include pb_body_light;
+    background: none;
+    background-color: $white;
     appearance: none;
     cursor: pointer;
     box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
@@ -17,11 +19,16 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    max-height: 45px;
     @media (hover:hover) {
       &:hover, &:active, &:focus {
         background-color: $focus_input_light;
       }
     }
+    &:focus{
+      border-color: $primary;
+      @include transition_default;
+    }
     &:disabled ~ .pb_select_kit_caret {
       opacity: 0.5;
     }
@@ -61,9 +68,9 @@
   &.dark {
     select {
       @include pb_textarea_dark;
-      @include pb_title_4;
-      @include pb_title_dark;
-      background: $focus_input_dark;
+      @include pb_body_light_dark;
+      background: none;
+      background-color: rgba($white,.10);
       box-shadow: inset 0 -11px 20px rgba($white, 0.05);
       text-shadow: 0 0 0 $text_dk_default;
       padding-right: $space_xl;
@@ -72,9 +79,12 @@
       text-overflow: ellipsis;
       @media (hover:hover) {
         &:hover, &:active, &:focus {
-          background-color: tint($focus_input_dark, 5%);
+          background-color: rgba($white,.05);
         }
       }
+      &:focus{
+        border-color: $active_dark;
+      }
     }
     .pb_select_kit_caret {
       color: $white;

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx

@@ -4,7 +4,10 @@ import { Select } from '../../'
 const SelectCustomSelect = (props) => {
   return (
     <div>
-      <Select label="Favorite Holiday">
+      <Select
+          label="Favorite Holiday"
+          {...props}
+      >
         <select
             id="holiday"
             name="holiday"

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -111,7 +111,7 @@ $pb_selectable_card_border: 2px;
     }
 
     .separator {
-      background: $bg_dark;
+      background: rgba($white,.1);
     }
 
     &.error {

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx

@@ -1,158 +1,168 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Body,
   SelectableCard,
   Title,
 } from '../../'
 
-class SelectableCardInput extends React.Component {
-  state = {
+const SelectableCardInput = (props) => {
+  const [state, setState] = useState({
     firstCheckbox: true,
     secondCheckbox: true,
     thirdCheckbox: false,
     forthCheckbox: false,
     radioSelected: 'first',
-  }
+  })
 
-  handleSelect = (event) => {
-    this.setState({
+  const handleSelect = (event) => {
+    setState({ ...state,
       [event.target.name]: event.target.checked,
     })
   }
 
-  handleRadioSelect = (event) => {
-    this.setState({
+  const handleRadioSelect = (event) => {
+    setState({
+      ...state,
       radioSelected: event.target.value,
     })
   }
 
-  render() {
-    return (
-      <>
-        <Title
-            size={3}
-            text="What programming languages do you know?"
-        />
-
-        <br />
-
-        <SelectableCard
-            checked={this.state.firstCheckbox}
-            inputId="firstCheckbox"
-            name="firstCheckbox"
-            onChange={this.handleSelect}
-            value="firstCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'Ruby'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.secondCheckbox}
-            inputId="secondCheckbox"
-            name="secondCheckbox"
-            onChange={this.handleSelect}
-            value="secondCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'JavaScript'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.thirdCheckbox}
-            inputId="thirdCheckbox"
-            name="thirdCheckbox"
-            onChange={this.handleSelect}
-            value="thirdCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'TypeScript'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.fourthCheckbox}
-            inputId="fourthCheckbox"
-            name="fourthCheckbox"
-            onChange={this.handleSelect}
-            value="fourthCheckbox"
-            variant="displayInput"
-        >
-          <Body>{'Swift'}</Body>
-        </SelectableCard>
-
-        <br />
-
-        <Title
-            size={3}
-            text="How likely are you to recommend Playbook to a friend?"
-        />
-
-        <br />
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'first'}
-            inputId="radio-1"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="first"
-            variant="displayInput"
-        >
-          <Body>{'5'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'second'}
-            inputId="radio-2"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="second"
-            variant="displayInput"
-        >
-          <Body>
-            {'4'}
-          </Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'third'}
-            inputId="radio-3"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="third"
-            variant="displayInput"
-        >
-          <Body>{'3'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'fourth'}
-            inputId="radio-4"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="fourth"
-            variant="displayInput"
-        >
-          <Body>{'2'}</Body>
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.radioSelected === 'fifth'}
-            inputId="radio-5"
-            multi={false}
-            name="radio"
-            onChange={this.handleRadioSelect}
-            value="fifth"
-            variant="displayInput"
-        >
-          <Body>{'1'}</Body>
-        </SelectableCard>
-      </>
-    )
-  }
+  return (
+    <>
+      <Title
+          size={3}
+          text="What programming languages do you know?"
+          {...props}
+      />
+
+      <br />
+
+      <SelectableCard
+          checked={state.firstCheckbox}
+          inputId="firstCheckbox"
+          name="firstCheckbox"
+          onChange={handleSelect}
+          value="firstCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'Ruby'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.secondCheckbox}
+          inputId="secondCheckbox"
+          name="secondCheckbox"
+          onChange={handleSelect}
+          value="secondCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'JavaScript'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.thirdCheckbox}
+          inputId="thirdCheckbox"
+          name="thirdCheckbox"
+          onChange={handleSelect}
+          value="thirdCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'TypeScript'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.fourthCheckbox}
+          inputId="fourthCheckbox"
+          name="fourthCheckbox"
+          onChange={handleSelect}
+          value="fourthCheckbox"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'Swift'}</Body>
+      </SelectableCard>
+
+      <br />
+
+      <Title
+          size={3}
+          text="How likely are you to recommend Playbook to a friend?"
+          {...props}
+      />
+
+      <br />
+
+      <SelectableCard
+          checked={state.radioSelected === 'first'}
+          inputId="radio-1"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="first"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'5'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'second'}
+          inputId="radio-2"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="second"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>
+          {'4'}
+        </Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'third'}
+          inputId="radio-3"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="third"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'3'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'fourth'}
+          inputId="radio-4"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="fourth"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'2'}</Body>
+      </SelectableCard>
+
+      <SelectableCard
+          checked={state.radioSelected === 'fifth'}
+          inputId="radio-5"
+          multi={false}
+          name="radio"
+          onChange={handleRadioSelect}
+          value="fifth"
+          variant="displayInput"
+          {...props}
+      >
+        <Body {...props}>{'1'}</Body>
+      </SelectableCard>
+    </>
+  )
 }
 
 export default SelectableCardInput

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -25,6 +25,7 @@ const StatValue = (props: StatValueProps) => {
       return (
         <Title
             size={1}
+            tag="span"
             text={`${value}`}
         />
       )
@@ -36,6 +37,7 @@ const StatValue = (props: StatValueProps) => {
       return (
         <Title
             size={3}
+            tag="span"
             text={unit}
         />
       )

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -6,10 +6,12 @@
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",
       size: 1,
+      tag: "span",
       text: object.formatted_value } %>
       &nbsp;
       <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",
+      tag: "span",
       size: 3,
       text: object.unit } %>
   </div>

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -8,59 +8,59 @@
     margin-bottom: $space_xs;
     display: block;
   }
-
   .text_input_wrapper {
     margin-bottom: $space_sm;
     display: block;
-
     input::placeholder,
     .text_input .placeholder {
       @include pb_body_light;
     }
-
     input,
     .text_input {
+      max-height: 45px;
       @include pb_textarea_light;
-      @include pb_title_4;
       overflow: hidden;
     }
-
+    input:hover,
+    .text_input:hover{
+      background-color: rgba($focus_input_light,$opacity_5);
+    }
     input:focus,
     .text_input:focus,
     input:-webkit-autofill:focus,
     .text_input:-webkit-autofill:focus {
       @include pb_textarea_focus;
-      -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
-      transition: background-color 5000s ease-in-out 0s;
+      @include transition_default;
+      border-color: $primary;
+      background-color: rgba($focus_input_light,$opacity_5);
     }
   }
-
   &.dark {
     .text_input_wrapper {
       margin-bottom: 1rem;
-
       input::placeholder,
       .text_input .placeholder {
         @include pb_body_light_dark;
       }
-
       input, .text_input {
         @include pb_textarea_dark;
-        @include pb_title_4;
-        @include pb_title_dark;
+        @include pb_body_dark;
         overflow: hidden;
+        background-color: rgba($white,$opacity_1);
+        border-color: rgba($white, 0.15);
+      }
+      input:hover,
+      .text_input:hover{
+        background-color: rgba($white, 0.15);
       }
-
       input:focus,
       .text_input:focus,
       input:-webkit-autofill:focus,
       .text_input:-webkit-autofill:focus {
-        @include pb_textarea_focus_dark;
-        -webkit-box-shadow: 0 0 0px 1000px $focus_input_dark inset;
-        transition: background-color 5000s ease-in-out 0s;
+        border-color: $active_dark;
+        background-color: rgba($white, 0.025);
       }
     }
-
     &.error {
       .text_input_wrapper {
         input, .text_input {
@@ -69,7 +69,6 @@
       }
     }
   }
-
   &.error {
     .text_input_wrapper {
       [class*=pb_body_kit] {