RubyGems - playbook_ui - Versions diffs - 14.12.0.pre.rc.10 → 14.12.0.pre.rc.12 - Mend

playbook_ui 14.12.0.pre.rc.10 → 14.12.0.pre.rc.12

Files changed (104) hide show

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<%= pb_content_tag do %>
+  <%= pb_rails("button", props: { type: object.type,
+                                  link: object.link,
+                                  new_window:object.new_window,
+                                  target: object.target,
+                                  dark: object.dark,
+                                  border_radius: "lg" }) do %>
+  <%= pb_rails("icon", props: { icon: object.icon,
+                                fixed_width: true,
+                                dark: object.dark,
+                                size: "2x",
+                                color: "text_lt_default",
+                                classname: "icon_button_icon",
+                                padding_x: "xxs", padding_y: "xs" }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon_button/icon_button.rb ADDED Viewed

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+module Playbook
+  module PbIconButton
+    class IconButton < ::Playbook::KitBase
+      prop :type, type: Playbook::Props::Enum,
+                  values: %w[button submit reset],
+                  default: "button"
+      prop :icon, required: false, default: "bars"
+      prop :link
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
+      prop :target
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default link],
+                     default: "default"
+      def classname
+        generate_classname("pb_icon_button_kit", variant)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ type LoadingInlineProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
+  dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text?: string,
@@ -23,6 +24,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     aria = {},
     className,
     data = {},
+    dark = false,
     htmlOptions = {},
     id,
     text = ' Loading',
@@ -45,7 +47,10 @@ const LoadingInline = (props: LoadingInlineProps) => {
         className={classes}
         id={id}
     >
-      <Body color="light">
+      <Body
+          color="light"
+          dark={dark}
+      >
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss CHANGED Viewed

@@ -24,6 +24,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     color: $primary;
     font-weight: $bold;
     font-size: $font_smallest - 1;
+    &.dark {
+      border: $pb_multiple_users_border_size solid $bg_dark;
+    }
   }
   .multiple_users_badge_xxs {

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx CHANGED Viewed

@@ -50,6 +50,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
   const itemClasses = classnames(
     'pb_multiple_users_item',
+    dark && 'dark',
     buildCss('multiple_users_badge', avatarSizeClass)
   )

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb CHANGED Viewed

@@ -4,7 +4,7 @@
     <% end %>
     <% if object.more_than_four %>
-      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %>">
+      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %><%= object.dark ? " dark" : "" %>">
         <%= "+#{object.users.count - object.display_count}" %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_radio/_radio.scss CHANGED Viewed

@@ -4,7 +4,7 @@
 @import "../pb_body/body";
 @import "../tokens/transition";
-[class^=pb_radio_kit] {
+[class^="pb_radio_kit"] {
   display: inline-flex;
   cursor: pointer;
@@ -16,10 +16,11 @@
     border-radius: 1000px;
     border: 2px solid $border_light;
     margin-right: $space_xs;
-    transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
+    transition: background $transition_default ease,
+      box-shadow $transition_default ease, border-color $transition_default ease;
   }
-  @media (hover:hover) {
+  @media (hover: hover) {
     &:hover .pb_radio_button {
       background-color: $bg_light;
       border-color: $border_light;
@@ -52,14 +53,14 @@
       }
     }
-    &:disabled:checked + .pb_radio_button{
+    &:disabled:checked + .pb_radio_button {
       cursor: not-allowed;
       background-color: $white;
       border: 6px solid $neutral;
     }
   }
-  &[class*=vertical] {
+  &[class*="vertical"] {
     flex-direction: column;
     align-items: center;
     .pb_radio_button {
@@ -80,7 +81,7 @@
       }
       &:checked {
         & ~ .pb_radio_button {
-          border: 6px solid $primary;
+          border: 6px solid $active_dark;
         }
       }
@@ -103,10 +104,10 @@
       }
     }
-    @media (hover:hover) {
+    @media (hover: hover) {
       &:hover {
         .pb_radio_button {
-          background-color: rgba($white,.10);
+          background-color: rgba($white, 0.1);
           border-color: $border_dark;
         }
       }
@@ -115,6 +116,9 @@
       > .pb_radio_button {
         border-color: $error_dark;
       }
+      > .pb_body_kit_negative {
+        color: $error_dark;
+      }
     }
   }
   &.error {

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx CHANGED Viewed

@@ -29,6 +29,7 @@ const RadioChildren = (props) => {
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -40,10 +41,11 @@ const RadioChildren = (props) => {
           value="Typeahead"
           {...props}
       >
-        <Typeahead
+        <Typeahead
             marginBottom="none"
             minWidth="xs"
             options={options}
+            {...props}
         />
       </Radio>
       <Radio
@@ -54,9 +56,12 @@ const RadioChildren = (props) => {
           value="Typography"
           {...props}
       >
-        <Title text="Custom Typography" />
+        <Title
+            text="Custom Typography"
+            {...props}
+        />
       </Radio>
     </div>
   )
 }
-export default RadioChildren
+export default RadioChildren

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

@@ -209,10 +209,8 @@
   }
   .pb_select_kit_wrapper {
     &.error {
-      .pb_select_kit_wrapper {
-        > select:first-child {
-          border-color: $error_dark;
-        }
+      > select {
+        border-color: $error_dark;
       }
     }
   }
@@ -228,7 +226,7 @@
     &:hover {
       select {
         color: $white !important;
-        background: rgba(0,130,255,0.1);
+        background: $focus_input_dark;
       }
       svg {
         color: $primary !important;

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

@@ -127,7 +127,10 @@ const Select = ({
             className="pb_select_kit_label"
             htmlFor={name}
         >
-          <Caption text={label} />
+          <Caption
+              dark={props.dark}
+              text={label}
+          />
         </label>
       }
       <label
@@ -146,6 +149,7 @@ const Select = ({
         }
         {error &&
           <Body
+              dark={props.dark}
               status="negative"
               text={error}
           />

data/app/pb_kits/playbook/pb_select/select.html.erb CHANGED Viewed

@@ -5,7 +5,7 @@
   **combined_html_options) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
-      <%= pb_rails("caption", props: { text: object.label }) %>
+      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
   <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
@@ -23,7 +23,7 @@
         object.all_attributes
       )
       %>
-      <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
+      <%= pb_rails("body", props: { status: "negative", text: object.error, dark: object.dark }) %>
     <% end %>
     <% if object.multiple != true %>
       <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ type SelectableIconProps = {
   checked?: boolean,
   className?: string,
   customIcon?: {[key: string] :SVGElement},
+  dark?: boolean,
   disabled?: boolean,
   data?: GenericObject,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -33,6 +34,7 @@ const SelectableIcon = ({
   className,
   checked = false,
   customIcon,
+  dark = false,
   data = {},
   disabled = false,
   htmlOptions = {},
@@ -52,10 +54,12 @@ const SelectableIcon = ({
   const classes = classnames(
     buildCss('pb_selectable_icon_kit', {
       checked: checked,
+      dark: dark,
       disabled: disabled,
       enabled: !disabled,
     }),
     globalProps(props),
+    dark ? 'dark' : '',
     className
   )
@@ -73,17 +77,19 @@ const SelectableIcon = ({
         <>
           <Icon
               customIcon={customIcon}
+              dark={dark}
               icon={icon}
               size="2x"
           />
           <Title
+              dark={dark}
               size={4}
               tag="h4"
               text={text}
           />
         </>
       )}
       {inputs === 'enabled' && (
         <>
           <input
@@ -98,10 +104,12 @@ const SelectableIcon = ({
           <label htmlFor={inputIdPresent}>
             <Icon
                 customIcon={customIcon}
+                dark={dark}
                 icon={icon}
                 size="2x"
             />
             <Title
+                dark={dark}
                 size={4}
                 tag="h4"
                 text={text}

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import SelectableIcon from '../_selectable_icon'
-const SelectableIconDefault = () => {
+const SelectableIconDefault = (props) => {
   const [ checkSelected, toggleSelected ] = useState(true)
   const [ checkUnselected, toggleUnselected ] = useState(false)
   const [ checkDisabled, toggleDisabled ] = useState(false)
@@ -15,6 +15,7 @@ const SelectableIconDefault = () => {
           inputId={10}
           onChange={() => toggleSelected(!checkSelected)}
           text="US Dollar"
+          {...props}
       />
       <SelectableIcon
@@ -23,6 +24,7 @@ const SelectableIconDefault = () => {
           inputId={11}
           onChange={() => toggleUnselected(!checkUnselected)}
           text="Euro"
+          {...props}
       />
       <SelectableIcon
@@ -32,6 +34,7 @@ const SelectableIconDefault = () => {
           inputId={12}
           onChange={() => toggleDisabled(!checkDisabled)}
           text="Yen"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import SelectableIcon from '../_selectable_icon'
-const SelectableIconSingleSelect = () => {
+const SelectableIconSingleSelect = (props) => {
   const [ selectedFormat, toggleFormat ] = useState(null)
   return (
@@ -17,6 +17,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Cassette')}
           text="Cassette"
           value="Cassette"
+          {...props}
       />
       <SelectableIcon
@@ -28,6 +29,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('CD')}
           text="CD"
           value="CD"
+          {...props}
       />
       <SelectableIcon
@@ -39,6 +41,7 @@ const SelectableIconSingleSelect = () => {
           onChange={() => toggleFormat('Vinyl')}
           text="Vinyl"
           value="Vinyl"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb ADDED Viewed

@@ -0,0 +1,47 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
+    <% end %>
+<% end %>
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "1" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
2	+ Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.

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

@@ -30,6 +30,7 @@ examples:
     - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
+    - table_with_collapsible: Table with Collapsible
   react:
     - table_sm: Small