RubyGems - playbook_ui - Versions diffs - 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4903 → 14.9.0.pre.alpha.PBNTR767advancedtablemultiheadercolumns5136 - Mend

playbook_ui 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4903 → 14.9.0.pre.alpha.PBNTR767advancedtablemultiheadercolumns5136

Files changed (98) hide show

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx CHANGED Viewed

@@ -17,47 +17,60 @@ const GaugeComplex = (props) => (
       gap="sm"
       padding="xl"
       wrap
+      {...props}
   >
     <FlexItem
         flex={1}
         grow
+        {...props}
     >
       <Card
           maxWidth="xs"
           padding="md"
+          {...props}
       >
         <Title
             paddingBottom="sm"
             size={4}
             text="Abandoned Calls"
+            {...props}
         />
-        <Flex align="stretch">
+        <Flex
+            align="stretch"
+            {...props}
+        >
           <Flex
               marginRight="sm"
               orientation="column"
+              {...props}
           >
             <Body
                 color="light"
                 paddingBottom="sm"
                 text="Total Abandoned"
+                {...props}
             />
             <Flex
                 align="baseline"
                 paddingBottom="xs"
+                {...props}
             >
               <Title
                   size={1}
                   text="39"
+                  {...props}
               />
               <Title
                   color="light"
                   size={3}
                   text="calls"
+                  {...props}
               />
             </Flex>
             <Caption
                 size="xs"
                 text="of 390"
+                {...props}
             />
           </Flex>
@@ -65,22 +78,29 @@ const GaugeComplex = (props) => (
               alignSelf="stretch"
               marginRight="sm"
               orientation="vertical"
+              {...props}
           />
           <Flex
               orientation="column"
               wrap
+              {...props}
           >
               <Body
                   color="light"
                   text="% Abandoned"
-               />
-            <Flex wrap>
+                  {...props}
+              />
+            <Flex
+                wrap
+                {...props}
+            >
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-              >
+                  {...props}
+              >
                 <Gauge
                     chartData={data}
                     disableAnimation
@@ -90,7 +110,7 @@ const GaugeComplex = (props) => (
                     {...props}
                 />
                </FlexItem>
-            </Flex>
+            </Flex>
           </Flex>
         </Flex>
       </Card>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  emphasis: "street" | "city",
+  emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
   houseStyle: string,
@@ -129,6 +129,22 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
           </div>
         </div>
       }
+      {emphasis == 'none' &&
+        <div>
+          <Body dark={dark}>
+            {joinPresent([titleize(address), houseStyle], ' · ')}
+          </Body>
+          <Body dark={dark}>{titleize(addressCont)}</Body>
+          <div>
+            <Body
+                color="light"
+                dark={dark}
+              >
+            {`${titleize(city)}, ${state} ${zipcode}`}
+          </Body>
+          </div>
+        </div>
+      }
       {homeId &&
         <Hashtag
             classname="home-hashtag"

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb CHANGED Viewed

@@ -24,4 +24,20 @@
   state: "PA",
   zipcode: "19382",
   territory: "PHL",
-}) %>
+}) %>
+<br>
+<br>
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  emphasis: "none",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx CHANGED Viewed

@@ -32,6 +32,21 @@ const HomeAddressStreetEmphasis = (props) => {
           zipcode="19382"
           {...props}
       />
+      <br />
+      <br />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          addressCont="Apt M18"
+          city="West Chester"
+          emphasis="none"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
     </div>
   )
 }

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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