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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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