playbook_ui 14.9.0.pre.alpha.play1703errorstatealignment4889 → 14.9.0.pre.alpha.play1703errorstatealignment5060

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md

@@ -1,2 +1,3 @@
 Emphasis on street happens by default. (no prop needed)
-Emphasis on "city" makes the city emphasized, rather than the street.
+Emphasis on "city" makes the city emphasized, rather than the street.
+Adding "none" to emphasis prop will provide no emphasis.

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -7,7 +7,7 @@ module Playbook
       prop :address_cont
       prop :city
       prop :emphasis, type: Playbook::Props::Enum,
-                      values: %w[street city],
+                      values: %w[street city none],
                       default: "street"
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
@@ -77,6 +77,20 @@ module Playbook
         }
       end
 
+      def none_emphasis_props
+        {
+          address_house_style: address_house_style,
+          address_house_style2: address_house_style2,
+          city_state_zip: city_state_zip,
+          dark: dark,
+          home_id: home_id,
+          home_url: home_url,
+          target: target_option,
+          new_window: new_window,
+          territory: territory,
+        }
+      end
+
       def target_option
         if target && home_url
           target

data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.html.erb

@@ -0,0 +1,32 @@
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  color: "light",
+  text: object.city_state_zip,
+  dark: object.dark
+} %>
+
+<% if object.home_id %>
+  <%= pb_rails("hashtag", props: {
+    text: "#{object.home_id}",
+    url: object.home_url || "#",
+    type: "home",
+    dark: object.dark,
+    classname: "home-hashtag",
+    new_window: object.new_window,
+    target: object.target_option}) %>
+<% end %>
+
+<%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
+  <small><%= object.territory %></small>
+<% end %>

data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbHomeAddressStreet
+    class NoneEmphasis < Playbook::KitBase
+      prop :address_house_style
+      prop :address_house_style2
+      prop :city_state_zip
+      prop :home_id, type: Playbook::Props::Number
+      prop :home_url
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
+      prop :target
+      prop :territory
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      def target_option
+        if target && home_url
+          target
+        elsif new_window
+          "_blank"
+        else
+          "_self"
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -24,34 +24,37 @@ type LayoutPropTypes = {
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutBodyProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   size?: "sm" | "md" | "lg"
-}
+} & GlobalProps
 
 type LayoutHeaderProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutFooterProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
-// Side component
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_sidebar', globalProps(props), className)}>
+    <div
+        className={classnames('layout_sidebar', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -60,8 +63,12 @@ const Side = (props: LayoutSideProps) => {
 // Body component
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_body', globalProps(props), className)}>
+    <div
+        className={classnames('layout_body', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -71,8 +78,12 @@ const Body = (props: LayoutBodyProps) => {
 const Item = (props: LayoutItemProps) => {
   const { children, className, size = 'sm' } = props
   const sizeClass = `size_${size}`
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
+    <div
+        className={classnames('layout_item', sizeClass, globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -81,8 +92,12 @@ const Item = (props: LayoutItemProps) => {
 // Header component
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_header', globalProps(props), className)}>
+    <div
+        className={classnames('layout_header', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -91,8 +106,12 @@ const Header = (props: LayoutHeaderProps) => {
 // Footer component
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_footer', globalProps(props), className)}>
+    <div
+        className={classnames('layout_footer', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -17,7 +17,7 @@
     outline-offset: 2px;
   }
   &:visited {
-    color: $data_3;
+    color: darken($primary_action, 10%);
   }
   &.dark  {
     @include pb_link($active_dark);
@@ -34,7 +34,7 @@
       }
 
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }
@@ -48,7 +48,7 @@
       }
 
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
+
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
+
+const SkeletonLoadingFilter = (props) => {
+  const isLoading = true
+
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far away...' },
+  ]
+
+  return (
+    <div>
+      <div>
+        {isLoading ? (
+          <Card 
+              marginBottom="lg" 
+              {...props}
+          >
+              <Flex 
+                  alignItems="center" 
+                  justify="between"
+                  orientation="row"
+              >
+                  <Flex 
+                      alignItems="center" 
+                      justify="start"
+                      orientation="row"
+                  >
+                      <SkeletonLoading
+                          borderRadius="rounded"
+                          height="40px"
+                          marginRight="sm"
+                          width="40px"
+                          {...props}
+                      />
+                      <SkeletonLoading 
+                          height="16px" 
+                          marginRight="md"
+                          width="80px"
+                          {...props}
+                      />
+                  </Flex>
+                  <Flex 
+                      alignItems="center" 
+                      justify="end"
+                      orientation="row"
+                  >
+                      <SkeletonLoading 
+                          height="18px" 
+                          width="120px"
+                          {...props}
+                      />
+                  </Flex>
+              </Flex>
+          </Card>
+        ) : (
+          <Filter
+              filters={{ 'Full Name': 'John Wick' }}
+              marginBottom="lg" 
+              minWidth="375px"
+              results={546}
+              sortOptions={{
+                popularity: 'Popularity',
+                // eslint-disable-next-line
+                manager_title: 'Manager\'s Title',
+                // eslint-disable-next-line
+                manager_name: 'Manager\'s Name',
+              }}
+              sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          >
+            {({ closePopover }) => (
+              <form>
+                <TextInput 
+                    label="Example Text Field" 
+                    placeholder="Enter Text"
+                />
+                <Select
+                    blankSelection="Select One..."
+                    label="Example Collection Select"
+                    name="Collection Select"
+                    options={options}
+                />
+                <Flex spacing="between">
+                    <Button 
+                        onClick={closePopover} 
+                        text="Filter"
+                    />
+                    <Button 
+                        text="Defaults" 
+                        variant="secondary"
+                    />
+                </Flex>
+              </form>
+            )}
+          </Filter>
+        )}
+      </div>
+      <div>
+        {isLoading ? (
+          <SkeletonLoading 
+              height="127px" 
+              marginBottom="lg"
+              width="100%"
+              {...props}
+          />
+        ) : (
+          <Filter
+              double
+              filters={{
+                'Full Name': 'John Wick',
+                'City': 'San Francisco',
+              }}
+              marginBottom="xl"
+              minWidth="375px"
+              onSortChange={SortingChangeCallback}
+              results={1}
+              sortOptions={{
+                popularity: 'Popularity',
+                // eslint-disable-next-line
+                manager_title: 'Manager\'s Title',
+                // eslint-disable-next-line
+                manager_name: 'Manager\'s Name',
+              }}
+              sortValue={[{ name: 'popularity', dir: 'desc' }]}
+          >
+            {({ closePopover }) => (
+              <form>
+                <TextInput 
+                    label="Full Name" 
+                    placeholder="Enter name"
+                />
+                <Select
+                    blankSelection="Select One..."
+                    label="Territory"
+                    maxWidth="sm"
+                    name="location"
+                    options={options}
+                />
+                <Flex spacing="between">
+                    <Button 
+                        onClick={closePopover}
+                        text="Filter" 
+                    />
+                    <Button 
+                        text="Defaults"
+                        variant="secondary"
+                    />
+                </Flex>
+              </form>
+            )}
+          </Filter>
+        )}
+      </div>      
+    </div>
+  )
+}
+
+export default SkeletonLoadingFilter;

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -20,6 +20,7 @@ const SkeletonLoadingHeightWidth = (props) => (
     <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         marginBottom="md"
         padding="none" 
+        {...props}
     >
       <SkeletonLoading
           borderRadius="md"
@@ -31,6 +32,7 @@ const SkeletonLoadingHeightWidth = (props) => (
     </Card>
     <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         padding="none"
+        {...props}
     >
       <SkeletonLoading
           borderRadius="md"

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Flex, SkeletonLoading, User } from "playbook-ui";
+
+const SkeletonLoadingUser = (props) => {
+  const isLoading = true
+
+  return (
+    <div>
+      <div>
+        {isLoading ? (
+          <Flex alignItems="center">
+              <SkeletonLoading 
+                  borderRadius="rounded" 
+                  height="38px" 
+                  paddingRight="sm"
+                  width="38px" 
+                  {...props} 
+              />
+                <SkeletonLoading 
+                    gap="xxs"
+                    height="18px" 
+                    stack="2"
+                    width="161px"
+                    {...props}
+                />
+          </Flex>
+        ) : (
+          <User
+              align="left"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              orientation="horizontal"
+              title="Remodeling Consultant"
+              {...props}
+          />
+        )}
+      </div>
+      <div>
+        {isLoading ? (
+          <Flex 
+              alignItems="start"
+              paddingTop="md"
+          >
+              <Flex 
+                  alignItems="center" 
+                  flexDirection="column"
+              >
+                  <SkeletonLoading 
+                      borderRadius="rounded" 
+                      height="80px" 
+                      paddingBottom="xs" 
+                      width="80px" 
+                      {...props}
+                  />
+                  <SkeletonLoading 
+                      height="32px" 
+                      paddingBottom="xxs" 
+                      width="144px" 
+                      {...props} 
+                  />
+                  <SkeletonLoading 
+                      height="21px" 
+                      width="164px" 
+                      {...props}
+                  />
+              </Flex>
+          </Flex>
+        ) : (
+          <Flex
+              alignItems="start" 
+              paddingTop="md"
+          >
+              <User
+                  align="center"
+                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+                  name="Anna Black"
+                  orientation="vertical"
+                  size="lg"
+                  title="Remodeling Consultant"
+                  {...props}
+              />
+          </Flex>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default SkeletonLoadingUser;

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

@@ -10,4 +10,5 @@ examples:
   - skeleton_loading_layout: Layout
   - skeleton_loading_border_radius: Border Radius
   - skeleton_loading_height_width: Height & Width
-  
+  - skeleton_loading_user: User Component Example
+  - skeleton_loading_filter: Filter Component Example

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

@@ -3,3 +3,5 @@ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
 export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
 export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
 export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
+export { default as SkeletonLoadingUser } from './_skeleton_loading_user.jsx'
+export { default as SkeletonLoadingFilter } from './_skeleton_loading_filter.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Table, Icon, Body, Card } from 'playbook-ui'
+
+const TableWithCollapsible = (props) => {
+
+  const Content = () => {
+    return (
+      <Card 
+          borderNone
+          borderRadius="none"
+          padding="md"
+          {...props}
+      >
+        <Body {...props}>Nested content inside a Table Row</Body>
+      </Card>
+    );
+  };
+
+return (
+      <Table
+          size="sm"
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{'Column 1'}</Table.Header>
+            <Table.Header>{'Column 2'}</Table.Header>
+            <Table.Header>{'Column 3'}</Table.Header>
+            <Table.Header>{'Column 4'}</Table.Header>
+            <Table.Header>{'Column 5'}</Table.Header>
+            <Table.Header>{''}</Table.Header>
+          </Table.Row>
+
+        </Table.Head>
+        <Table.Body>
+          <Table.Row collapsible 
+              collapsibleContent={<Content/>}
+              {...props}
+          >
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell textAlign="right">{ 
+              <Icon
+                  color="primary"
+                  fixedWidth
+                  icon="chevron-down"
+              />}
+            </Table.Cell>
+
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>{'Value 1'}</Table.Cell>
+            <Table.Cell>{'Value 2'}</Table.Cell>
+            <Table.Cell>{'Value 3'}</Table.Cell>
+            <Table.Cell>{'Value 4'}</Table.Cell>
+            <Table.Cell>{'Value 5'}</Table.Cell>
+            <Table.Cell>{''}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+  )
+}
+
+export default TableWithCollapsible

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md

@@ -0,0 +1 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.