RubyGems - playbook_ui - Versions diffs - 9.11.0 → 9.14.1.alpha.radio.alignment - Mend

playbook_ui 9.11.0 → 9.14.1.alpha.radio.alignment

Files changed (102) hide show

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_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 %>

data/app/pb_kits/playbook/pb_text_input/add_on.rb ADDED Viewed

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+module Playbook
+  module PbTextInput
+    class AddOn < Playbook::KitBase
+      prop :icon, type: Playbook::Props::String, required: true
+      prop :alignment, type: Playbook::Props::Enum, values: %w[right left], default: "right"
+      prop :border, type: Playbook::Props::Boolean, default: true
+      def border_css
+        border_toggle = border ? "on" : "off"
+        border_to_change = if alignment == "left"
+                             "right"
+                           else
+                             "left"
+                           end
+        "border_#{border_to_change}_#{border_toggle}"
+      end
+      def left_aligned?
+        alignment == "left"
+      end
+      def dark_mode_css
+        dark ? "add-on-card-dark" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<%= pb_rails("text_input", props: {
+  label: "Add On With Defaults",
+  add_on: { icon: "bat" }
+}) %>
+<%= pb_rails("text_input", props: {
+  label: "Right-Aligned Add On With Border",
+  add_on: { icon: "user", alignment: 'right', border: true }
+}) %>
+<%= pb_rails("text_input", props: {
+  label: "Left-Aligned Add On With No Border",
+  add_on: { icon: "percent", alignment: 'left', border: false }
+}) %>
+<%= pb_rails("text_input", props: {
+  label: "Left-Aligned Add On With Border",
+  add_on: { icon: "user", alignment: 'left', border: true }
+}) %>
+<%= pb_rails("text_input", props: {
+  label: "Right-Aligned Add On With No Border",
+  add_on: { icon: "percent", alignment: 'right', border: false }
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx ADDED Viewed

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { TextInput } from '../../'
+const TextInputAddOn = (props) => {
+  const [defaultInput, setDefaultInput] = useState('')
+  const [firstInput, setFirstInput] = useState('')
+  const [secondInput, setSecondInput] = useState('')
+  const [thirdInput, setThirdInput] = useState('')
+  const [fourthInput, setFourthInput] = useState('')
+  const handleUpdateDefaultInput = ({ target }) => {
+    setDefaultInput(target.value)
+  }
+  const handleUpdateFirstInput = ({ target }) => {
+    setFirstInput(target.value)
+  }
+  const handleUpdateSecondInput = ({ target }) => {
+    setSecondInput(target.value)
+  }
+  const handleUpdateThirdInput = ({ target }) => {
+    setThirdInput(target.value)
+  }
+  const handleUpdateFourthInput = ({ target }) => {
+    setFourthInput(target.value)
+  }
+  return (
+    <>
+      <div>
+        <TextInput
+            addOn={{ icon: 'bat' }}
+            label="Add On With Defaults"
+            onChange={handleUpdateDefaultInput}
+            value={defaultInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'user', alignment: 'right', border: true }}
+            label="Right-Aligned Add On With Border"
+            onChange={handleUpdateFirstInput}
+            value={firstInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'left', border: false }}
+            label="Left-Aligned Add On With No Border"
+            onChange={handleUpdateSecondInput}
+            value={secondInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'right', border: false }}
+            label="Right-Aligned Add On With No Border"
+            onChange={handleUpdateThirdInput}
+            value={thirdInput}
+            {...props}
+        />
+      </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'percent', alignment: 'left', border: true }}
+            label="Left-Aligned Add On With Border"
+            onChange={handleUpdateFourthInput}
+            value={fourthInput}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default TextInputAddOn