RubyGems - playbook_ui - Versions diffs - 14.9.0 → 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160 - Mend

playbook_ui 14.9.0 → 14.10.0.pre.alpha.PBNTR662stickyrightcolumnreact5160

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 (139) hide show

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx CHANGED Viewed

@@ -181,6 +181,56 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Status Colors"
+            />
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="success"
+                >
+                    <Body
+                        dark
+                        text="Success"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="error"
+                >
+                    <Body
+                        dark
+                        text="Error"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_header.md CHANGED Viewed

	@@ -1 +1 @@
1	- Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
1	+ Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx CHANGED Viewed

@@ -20,6 +20,7 @@ type CircleIconButtonProps = {
   onClick?: React.MouseEventHandler<HTMLElement>,
   newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset' | undefined,
+  target?: string
   variant?: 'primary' | 'secondary' | 'link',
 }
@@ -36,6 +37,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     loading = false,
     onClick = noop,
     type,
+    target,
     link,
     newWindow,
     variant,
@@ -66,6 +68,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
           loading={loading}
           newWindow={newWindow}
           onClick={onClick}
+          target={target}
           text={null}
           variant={variant}
       >

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb CHANGED Viewed

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb CHANGED Viewed

@@ -17,6 +17,7 @@ module Playbook
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
+      prop :target
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb CHANGED Viewed

@@ -10,3 +10,11 @@
   link: "https://google.com",
   new_window: true
 }) %>
+<br/>
+<%= pb_rails("circle_icon_button", props: {
+  icon: "info",
+  variant: "secondary",
+  aria: { label: "Link to Playbook in new window" },
+  link: "https://playbook.powerapp.cloud/",
+  target: "child"
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx CHANGED Viewed

@@ -21,6 +21,15 @@ const CircleIconButtonLink = (props) => (
         {...props}
     />
+    <br/>
+    <CircleIconButton
+        aria={{ label: "Link to Playbook in new window" }}
+        icon="info"
+        link="https://playbook.powerapp.cloud/"
+        target="child"
+        variant="secondary"
+    />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md ADDED Viewed

@@ -0,0 +1 @@

+ The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,6 +32,7 @@ type CollapsibleProps = {
   onClick?: ()=> void,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
 }
 const Collapsible = ({
@@ -47,8 +48,9 @@ const Collapsible = ({
   onIconClick,
   onClick,
   id,
+  tag = 'div',
   ...props
-}: CollapsibleProps): React.ReactElement => {
+}: CollapsibleProps & GlobalProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
   useEffect(()=> {
@@ -76,9 +78,12 @@ const Collapsible = ({
     className
   )
   const dynamicInlineProps = globalInlineProps(props)
+  const Tag: React.ReactElement | any = `${tag}`;
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
-      <div
+      <Tag
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
@@ -96,7 +101,7 @@ const Collapsible = ({
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-      </div>
+      </Tag>
     </CollapsibleContext.Provider>
   )
 }

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useContext, useRef, useEffect } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 import { hideElement, showElement } from '../_helper_functions'
 import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps): React.ReactElement => {
+}: CollapsibleContentProps & GlobalProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx CHANGED Viewed

@@ -3,7 +3,7 @@
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
   className,
   cursor = 'pointer',
   ...props
-}: CollapsibleMainProps): React.ReactElement=> {
+}: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
   const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx CHANGED Viewed

@@ -287,7 +287,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
               {...ariaProps}
               {...dataProps}
               {...htmlProps}
-              style={dynamicInlineProps}
               className={classnames(drawerClassNames.base, {
               [drawerClassNames.afterOpen]:
                 animationState === "afterOpen",
@@ -296,6 +295,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             })}
               id={id}
               onClick={(e) => e.stopPropagation()}
+              style={dynamicInlineProps}
           >
             {children}
           </div>
@@ -306,7 +306,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classes}
-            style={dynamicInlineProps}
         >
           {isModalVisible && (
             <div
@@ -327,6 +326,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
                     animationState === "beforeClose",
                 })}
                   onClick={(e) => e.stopPropagation()}
+                  style={dynamicInlineProps}
               >
                 {children}
               </div>

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss CHANGED Viewed

@@ -11,3 +11,8 @@
   }
 }
+.dark [class*='pb_file_upload_kit'] {
+  [class*='pb_card_kit'] {
+    border: 1px $text_dk_lighter dashed;
+  }
+}

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ type FileUploadProps = {
   accept?: string[],
   className?: string,
   customMessage?: string,
+  dark?: boolean,
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   acceptedFilesDescription?: string,
@@ -31,6 +32,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     acceptedFilesDescription = '',
     className,
     customMessage,
+    dark = false,
     data = {},
     htmlOptions = {},
     maxSize,
@@ -94,9 +96,12 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
         {...htmlProps}
         {...getRootProps()}
     >
-      <Card>
+      <Card dark={dark}>
         <input {...getInputProps()} />
-        <Body color="light">
+        <Body
+            color="light"
+            dark={dark}
+        >
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb CHANGED Viewed

@@ -5,11 +5,17 @@
     id: object.id,
     **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
-        <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
+        <label
+          for="upload-<%= object.id %>"
+          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
+        >
+          <%= "#{object.label}" %>
+        </label>
         <%= pb_rails("text_input", props: {
           type: "file",
+          dark: object.dark,
           input_options: {
-            id: "upload-#{object.id}",
+            id: "upload-#{object.id}",
             classname: "cursor_pointer",
           }.merge(object.input_options)
         }) %>

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss ADDED Viewed

@@ -0,0 +1,57 @@
+@mixin error-state-flex-start-selectors {
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
+  &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
+  &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
+    align-items: flex-start;
+  }
+}
+@mixin error-state-center-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
+    align-items: center;
+  }
+}
+@mixin error-state-flex-end-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-end;
+  }
+}
+@mixin error-state-right-side-select-kit {
+  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
+    align-items: flex-start;
+    .pb_select_kit_wrapper {
+      padding-top: $space_md;
+      margin-top: 2px;
+      .pb_select_kit_caret {
+        padding-top: $space_md;
+      }
+    }
+    .pb_select_kit_wrapper.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+      .pb_select_kit_caret {
+        padding-top: $space_xl;
+      }
+    }
+  }
+}
+@mixin error-state-left-side-select-kit {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-start;
+    .pb_text_input_kit.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_form_group/_form_group.scss CHANGED Viewed

@@ -1,3 +1,6 @@
+@import "../tokens/spacing";
+@import "./error_state_mixin";
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
@@ -12,6 +15,12 @@
     }
   }
+@include error-state-flex-start-selectors;
+@include error-state-center-selectors;
+@include error-state-flex-end-selectors;
+@include error-state-left-side-select-kit;
+@include error-state-right-side-select-kit;
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -27,7 +36,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -150,7 +159,7 @@
   & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
-    }
+    }
   }
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {

data/app/pb_kits/playbook/pb_gauge/_gauge.scss CHANGED Viewed

@@ -1,12 +1,33 @@
+@import "../tokens/colors";
 [class^=pb_gauge_kit] {
+  .fix {
+    fill: $text_lt_default;
+    stroke: none;
+    &[class*=dark] {
+      fill: $text_dk_default;
+    }
+  }
   .suffix {
     fill: $text_lt_light;
+    stroke: none;
     font: $regular $font_larger $font_family_base;
+    &[class*=dark] {
+      fill: $text_dk_light;
+    }
   }
   .prefix {
     fill: $text_lt_light;
+    stroke: none;
     font: $regular $font_base $font_family_base;
+    &[class*=dark] {
+      fill: $text_dk_light;
+    }
   }
   rect.highcharts-background {
@@ -16,4 +37,13 @@
   .gauge-pane {
     stroke-linejoin: round;
   }
-}
+  &[class*=dark] {
+    color: $text_dk_default;
+    .pb_title_kit_size_1,
+    .pb_caption_kit_xs {
+        color: $text_dk_light;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx CHANGED Viewed

@@ -164,9 +164,9 @@ const Gauge = ({
             color: defaultColors.text_lt_default,
             enabled: true,
             format:
-              `<span class="prefix">${prefix}</span>` +
-              '<span class="fix">{y:,f}</span>' +
-              `<span class="suffix">${suffix}</span>`,
+              `<span class="prefix${dark ? " dark" : ""}">${prefix}</span>` +
+              `<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` +
+              `<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
             style: {
               fontFamily: typography.font_family_base,
               fontWeight: typography.regular,

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.