RubyGems - playbook_ui - Versions diffs - 9.10.0 → 9.14.1.alpha.highcharts9 - Mend

playbook_ui 9.10.0 → 9.14.1.alpha.highcharts9

Files changed (119) hide show

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml CHANGED Viewed

@@ -7,6 +7,8 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
   react:
@@ -16,4 +18,6 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js CHANGED Viewed

@@ -4,4 +4,6 @@ export { default as RichTextEditorAttributes } from './_rich_text_editor_attribu
 export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
 export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
 export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
+export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
+export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb CHANGED Viewed

@@ -6,11 +6,16 @@ module Playbook
       prop :focus, type: Playbook::Props::Boolean,
                    default: false
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
       prop :simple, type: Playbook::Props::Boolean,
                     default: false
       prop :sticky, type: Playbook::Props::Boolean,
-                   default: false
+                    default: false
+      prop :toolbar_bottom, type: Playbook::Props::Boolean,
+                            default: false
       prop :value
       prop :template
@@ -35,13 +40,15 @@ module Playbook
       def rich_text_options
         {
           id: id,
+          inline: inline,
           className: classname,
           focus: focus,
           simple: simple,
           sticky: sticky,
+          toolbarBottom: toolbar_bottom,
           value: value,
           template: template,
-          placeholder: placeholder
+          placeholder: placeholder,
         }
       end
     end

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx CHANGED Viewed

@@ -38,9 +38,13 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
         className={classes}
         id={id}
     >
-      <span>
-        <Caption text={text} />
-      </span>
+      <If condition={text}>
+        <span>
+          <Caption text={text} />
+        </span>
+      </If>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_select/_select.jsx CHANGED Viewed

@@ -126,17 +126,17 @@ const Select = ({
             {optionsList}
           </select>
         </If>
+        <Icon
+            className="pb_select_kit_caret"
+            fixedWidth
+            icon="angle-down"
+        />
         <If condition={error}>
           <Body
               status="negative"
               text={error}
           />
         </If>
-        <Icon
-            className="pb_select_kit_caret"
-            fixedWidth
-            icon="angle-down"
-        />
       </label>
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb CHANGED Viewed

@@ -22,7 +22,7 @@ module Playbook
       prop :value
       prop :input_options, type: Playbook::Props::Hash,
-                                      default: {}
+                           default: {}
       def classname
         generate_classname("pb_selectable_card_icon_kit", checked_class, enabled_disabled_class)

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb CHANGED Viewed

@@ -20,7 +20,7 @@ module Playbook
       prop :value
       prop :input_options, type: Playbook::Props::Hash,
-                                      default: {}
+                           default: {}
       # Conditional rendering for input field
       prop :inputs, type: Playbook::Props::String,

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb CHANGED Viewed

@@ -21,18 +21,14 @@ module Playbook
       end
       def returned_icon
-        if icon
-          icon
-        else
-          case change
-          when "increase"
-            "arrow-up"
-          when "decrease"
-            "arrow-down"
-          else
-            false
-          end
-        end
+        icon || case change
+                when "increase"
+                  "arrow-up"
+                when "decrease"
+                  "arrow-down"
+                else
+                  false
+                end
       end
       def classname

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx CHANGED Viewed

@@ -1,13 +1,10 @@
 /* @flow */
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { Body, Caption } from '../'
+import { Body, Caption, Card, Flex, Icon } from '../'
 import { globalProps } from '../utilities/globalProps.js'
-import {
-  buildAriaProps,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 type TextInputProps = {
   aria?: object,
@@ -17,6 +14,7 @@ type TextInputProps = {
   disabled?: boolean,
   error?: string,
   id?: string,
+  inline?: boolean,
   name: string,
   label: string,
   onChange: (String) => void,
@@ -25,12 +23,14 @@ type TextInputProps = {
   type: string,
   value: string | number,
   children: Node,
+  addOn?: {
+    icon?: string,
+    alignment?: "right" | "left",
+    border?: boolean,
+  },
 }
-const TextInput = (
-  props: TextInputProps,
-  ref: React.ElementRef<"input">
-) => {
+const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
   const {
     aria = {},
     className,
@@ -39,6 +39,7 @@ const TextInput = (
     disabled,
     error,
     id,
+    inline = false,
     name,
     label,
     onChange = () => {},
@@ -47,16 +48,79 @@ const TextInput = (
     type = 'text',
     value = '',
     children = null,
+    addOn = { icon: null, alignment: 'right', border: true },
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+  const { alignment, border, icon } = addOn
+  const addOnAlignment = alignment === 'left' ? 'left' : 'right'
+  const borderToChange = addOnAlignment === 'left' ? 'right' : 'left'
+  const borderToggle = border === false ? 'off' : 'on'
+  const borderCss = `border_${borderToChange}_${borderToggle}`
+  const shouldShowAddOn = icon !== null
+  const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : null
+  const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : null
   const css = classnames([
     'pb_text_input_kit',
+    inline ? 'inline' : null,
     error ? 'error' : null,
     globalProps(props),
     className,
   ])
+  const addOnIcon = (
+    <Icon
+        className="add-on-icon"
+        dark={dark}
+        fixedWidth={false}
+        icon={icon}
+    />
+  )
+  const textInput = (
+    <input
+        {...props}
+        className="text_input"
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={onChange}
+        placeholder={placeholder}
+        ref={ref}
+        required={required}
+        type={type}
+        value={value}
+    />
+  )
+  const addOnInput = (
+    <React.Fragment>
+      <Flex
+          className={`add-on-${addOnAlignment} ${borderCss}`}
+          inline="flex-container"
+          vertical="center"
+      >
+        <If condition={addOnAlignment == 'left'}>
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+          {textInput}
+          <Else />
+          {textInput}
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+        </If>
+      </Flex>
+    </React.Fragment>
+  )
   return (
     <div
@@ -69,29 +133,17 @@ const TextInput = (
           dark={dark}
           text={label}
       />
-      <div className="text_input_wrapper">
-        <If condition={children}>
-          {children}
-          <Else />
-          <input
-              {...props}
-              className="text_input"
-              disabled={disabled}
-              id={id}
-              name={name}
-              onChange={onChange}
-              placeholder={placeholder}
-              ref={ref}
-              required={required}
-              type={type}
-              value={value}
+      <div className={`${addOnCss} text_input_wrapper`}>
+        <Choose>
+          <When condition={children}>{children}</When>
+          <When condition={shouldShowAddOn}>{addOnInput}</When>
+          <Otherwise>{textInput}</Otherwise>
+        </Choose>
+        <If condition={error}>
+          <Body
+              status="negative"
+              text={error}
           />
-          <If condition={error}>
-            <Body
-                status="negative"
-                text={error}
-            />
-          </If>
         </If>
       </div>
     </div>

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

@@ -36,6 +36,16 @@
     }
   }
   &.dark {
+    .add_on_left {
+      .text_input {
+        border-left: 0;
+      }
+    }
+    .add_on_right {
+      .text_input {
+        border-right: 0;
+      }
+    }
     .text_input_wrapper {
       margin-bottom: 1rem;
       input::placeholder,
@@ -79,4 +89,100 @@
       }
     }
   }
+  &.inline {
+    &:not(:hover) {
+      .text_input_wrapper input:not(:focus) {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+  }
+}
+.text_input_wrapper_add_on {
+  & > [class^=pb_text_input_kit]:not(:last-child) {
+    .text_input_wrapper_add_on input, [class^=pb_text_input_kit] .text_input_wrapper_add_on .text_input {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+  .section-separator span {
+    padding: 0;
+  }
+  .add-on {
+    &-card {
+      height: 45px;
+      margin: 0;
+      padding: 0 !important;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+    }
+    &-icon {
+      color: $text_lt_lighter;
+    }
+    &-card-dark {
+      background-color: $bg-dark;
+    }
+    &-left {
+      .text_input {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+    }
+    &-right {
+      .text_input{
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
+    }
+  }
+  .text_input:focus ~ .add-on-card-dark {
+    background-color: $focus_input_dark;
+    border-width: 0px;
+  }
+  .card-left-aligned {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+  .card-right-aligned {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+  .border {
+    &_right_off {
+      .card-left-aligned {
+        border-right: 0;
+      }
+      .text_input {
+        border-left: 0 !important;
+        padding-left: 0 !important;
+      }
+    }
+    &_left_on {
+      .card-right-aligned {
+        border-left: 0;
+      }
+    }
+    &_right_on {
+      .card-left-aligned {
+        border-right: 0;
+      }
+    }
+    &_left_off {
+      .card-right-aligned {
+        border-left: 0;
+      }
+      .text_input {
+        border-right: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_text_input/add_on.html.erb ADDED Viewed

@@ -0,0 +1,13 @@
+<%= pb_rails("flex", props: { classname: "add-on-#{alignment} #{border_css}", vertical: "center"}) do %>
+  <% if left_aligned? %>
+    <%= pb_rails("card", props: {classname: "#{dark_mode_css} add-on-card card-left-aligned", dark: dark}) do %>
+      <%= pb_rails("icon", props: { icon: icon, classname: "add-on-icon", fixed_width: false, dark: dark }) %>
+    <% end %>
+    <%= content %>
+  <% else %>
+    <%= content %>
+    <%= pb_rails("card", props: {classname: "#{dark_mode_css} add-on-card card-right-aligned", dark: dark}) do %>
+      <%= pb_rails("icon", props: { icon: icon, classname: "add-on-icon", fixed_width: false, dark: dark }) %>
+    <% end %>
+  <% end %>
+<% end %>