RubyGems - playbook_ui - Versions diffs - 10.13.1 → 10.15.0 - Mend

playbook_ui 10.13.1 → 10.15.0

Files changed (74) hide show

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx ADDED Viewed

@@ -0,0 +1,100 @@
+import React from 'react'
+import Title from '../../pb_title/_title'
+import { Body } from '../../'
+import Card from '../_card.jsx'
+const CardBackground = (props) => {
+  return (
+    <div>
+      <Title
+          {...props}
+          size={4}
+          tag="h4"
+          text="Card Colors"
+      />
+      <br />
+      <Card
+          background="dark"
+          dark
+          {...props}
+      >
+        <Body
+            color="lighter"
+            text="Dark"
+            {...props}
+        />
+      </Card>
+      <br />
+      <Card>
+        <Body
+            text="White"
+        />
+      </Card>
+      <br />
+      <Card
+          background="light"
+          {...props}
+      >
+        <Body
+            text="Light"
+        />
+      </Card>
+      <br />
+      <Title
+          {...props}
+          size={4}
+          tag="h4"
+          text="Product Colors"
+      />
+      <br />
+      <Card
+          background="windows"
+          {...props}
+      >
+        <Body
+            color="lighter"
+            text="Windows"
+            {...props}
+        />
+      </Card>
+      <br />
+      <Card
+          background="siding"
+          {...props}
+      >
+        <Body
+            text="Siding"
+            {...props}
+        />
+      </Card>
+      <br />
+      <Card
+          background="doors"
+          {...props}
+      >
+        <Body
+            text="Doors"
+            {...props}
+        />
+      </Card>
+      <br />
+    </div>
+  )
+}
+export default CardBackground

data/app/pb_kits/playbook/pb_card/docs/_card_background.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - card_light: Default
+  - card_background: Card Backgrounds
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected
@@ -13,6 +14,7 @@ examples:
   - card_border_radius: Border Radius
   react:
   - card_light: Default
+  - card_background: Card Backgrounds
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected

data/app/pb_kits/playbook/pb_card/docs/index.js CHANGED Viewed

@@ -1,4 +1,5 @@
 export { default as CardLight } from './_card_light.jsx'
+export { default as CardBackground } from './_card_background.jsx'
 export { default as CardHighlight } from './_card_highlight.jsx'
 export { default as CardHeader } from './_card_header.jsx'
 export { default as CardSelected } from './_card_selected.jsx'

data/app/pb_kits/playbook/pb_dialog/_dialog.scss CHANGED Viewed

@@ -67,6 +67,7 @@
 	$opacity_hidden: 0;
 	@include pb_card;
+	background-color: $white;
 	box-shadow: $shadow_deepest;
 	border: 0;
 	max-height: calc(100vh - #{$gutter * 2});

data/app/pb_kits/playbook/pb_flex/_flex.jsx CHANGED Viewed

@@ -69,7 +69,7 @@ const Flex = (props: FlexProps) => {
           spacingClass,
           gapClass,
           rowGapClass,
-          columnGapClass
+          columnGapClass,
         ),
         globalProps(props),
         className

data/app/pb_kits/playbook/pb_flex/_flex.scss CHANGED Viewed

@@ -10,8 +10,8 @@ $gapSpaces:(
 );
 $gapTypes: (
-  gap: gap,
-  columnGap: column-gap,
+  gap: gap,
+  columnGap: column-gap,
   rowGap: row-gap
   );
@@ -69,6 +69,7 @@ $gapTypes: (
     justify-content: center;
   }
   // Alignment: Align Items
   &[class*=align_items_left],
   &[class*=align_items_top],
@@ -76,6 +77,7 @@ $gapTypes: (
     align-items: flex-start;
   }
   &[class*=align_items_right],
   &[class*=align_items_bottom],
   &[class*=align_items_end] {

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx CHANGED Viewed

@@ -11,20 +11,22 @@ type FlexItemPropTypes = {
   flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
   className: string,
   overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
+  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
 }
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none' } = props
   const growClass = grow === true ? 'grow' : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
   const overflowClass = overflow ? `overflow_${overflow}` : ''
   const shrinkClass = shrink === true ? 'shrink' : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
+  const orderClass = order !== 'none' ? `order_${order}` : null
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, orderClass, globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.scss CHANGED Viewed

@@ -12,6 +12,15 @@
     flex-shrink: 1;
   }
+  //Order Items
+  @for $i from 0 through 12 {
+    &[class*=order_#{$i}]{
+      order: $i;
+    }
+  }
+  &[class*=order_first]{
+    order: -1;
+  }
   $overflow_values: auto, hidden, inherit, initial, scroll, visible;

data/app/pb_kits/playbook/pb_flex/docs/_description.md CHANGED Viewed

@@ -1,7 +1 @@
 This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
-##### !!!Attention these props will be deprecated in the future please use new props in their place
-* `horizontal` - Will be replaced with `justify`
-* `vertical` - Will be replaced with `align`
-* `spacing` - Will be removed. Use `justify`

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md CHANGED Viewed

@@ -1,7 +1,3 @@
 ##### Prop
-*ATTENTION* - the vertical prop will be deprecated & renamed in the future.
-* **Deprecated Prop**: `vertical` | **Type**: String | **Values**: top | center | bottom | stretch | baseline | none
-* **New Prop**: `align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none
+`align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none

data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb CHANGED Viewed

@@ -47,3 +47,16 @@
     <%= pb_rails("flex/flex_item", props: {flex: "2"}) do %>4<% end %>
   <% end %>
 </div>
+<br/><br/>
+<%= pb_rails("title", props: {size: 4, text: "Order"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: "sm"}) do %>
+    <%= pb_rails("flex/flex_item", props: {order: "4"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props: {order: "2"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props: {order: "1"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props: {order: "3"}) do %>4<% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md CHANGED Viewed

@@ -1,11 +1,12 @@
 ##### Props
 *  `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-*  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
-*  `grow` | **Type**: Boolean
-*  `shrink` | **Type**: Boolean
+*  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
+*  `grow` | **Type**: Boolean
+*  `shrink` | **Type**: Boolean
+*   `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
 - Flex is a short hand to set the flex item to take up (x) amount of available space
-- Setting Flex to 1 is equal to setting the grow & shrink prop to true
+- Setting Flex to 1 is equal to setting the grow & shrink prop to true
 - Setting Flex to 0 is equal to setting the grow & shrink prop to false
 - If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  '../../'
+import { Flex, FlexItem, Title } from  '../..'
 const FlexItemExample = (props) => {
   return (
@@ -106,6 +106,32 @@ const FlexItemExample = (props) => {
           </FlexItem>
         </Flex>
       </div>
+      <br />
+      <Title
+          size={4}
+          text="Order"
+      />
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem order={4}>
+            {'1'}
+          </FlexItem>
+          <FlexItem order={2}>
+            {'2'}
+          </FlexItem>
+          <FlexItem order={1}>
+            {'3'}
+          </FlexItem>
+          <FlexItem order={3}>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md ADDED Viewed

@@ -0,0 +1,12 @@
+##### Props
+*  `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+*  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
+*  `grow` | **Type**: Boolean
+*  `shrink` | **Type**: Boolean
+*   `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
+- Flex is a short hand to set the flex item to take up (x) amount of available space
+- Setting Flex to 1 is equal to setting the grow & shrink prop to true
+- Setting Flex to 0 is equal to setting the grow & shrink prop to false
+- If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container

data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md CHANGED Viewed

@@ -1,7 +1,3 @@
 ##### Prop
-*ATTENTION* - the horizontal prop will be deprecated & renamed in the future.
-* **Deprecated Prop**: `horizontal` | **Type**: String | **Values**: left | center | right | stretch | none
-* **New Prop**: `justify` | **Type**: String | **Values**: start | center | end | | none
+`justify` | **Type**: String | **Values**: start | center | end | | none

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md CHANGED Viewed

@@ -1,7 +1,3 @@
 ##### Prop
-*ATTENTION* - the spacing prop will be deprecated & renamed in the future.
-* **Deprecated Prop**: `spacing` | **Type**: String | **Values**: none | around | evenly | between
-* **New Prop**: `justify` | **Type**: String | **Values**: none | around | evenly | between
+`justify` | **Type**: String | **Values**: none | around | evenly | between

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

@@ -13,6 +13,7 @@ examples:
   react:
   - flex_default: Default
   - flex_inline: Inline

data/app/pb_kits/playbook/pb_flex/flex_item.rb CHANGED Viewed

@@ -15,8 +15,12 @@ module Playbook
                       values: %w[auto hidden inherit initial scroll visible] + [nil],
                       default: nil
+      prop :order, type: Playbook::Props::Enum,
+                   values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
+                   default: "none"
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class + order_class
       end
       def style_value
@@ -48,6 +52,14 @@ module Playbook
           "flex_#{flex}"
         end
       end
+      def order_class
+        if order == "none"
+          ""
+        else
+          "order_#{order}"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx CHANGED Viewed

@@ -15,6 +15,7 @@ type FormPillProps = {
   avatar?: boolean,
   avatarUrl?: string,
   size?: string,
+  textTransform?: "none" | "lowercase",
   closeProps?: {
     onClick?: EventHandler,
     onMouseDown?: EventHandler,
@@ -30,12 +31,14 @@ const FormPill = (props: FormPillProps) => {
     avatarUrl,
     closeProps = {},
     size = '',
+    textTransform = 'none',
   } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
+    textTransform,
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss CHANGED Viewed

@@ -70,4 +70,11 @@ $form_pill_colors: (
       &::before { line-height: 21px; }
     }
   }
+  &[class*=lowercase] {
+    text-transform: lowercase;
+  }
+  &[class*=none] {
+    text-transform: none;
+  }
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react'
+import FormPill from '../_form_pill.jsx'
+const FormPillExample = (props) => {
+  return (
+    <div>
+      <FormPill
+          onClick={() => alert('Click!')}
+          text="THIS IS A TAG"
+          textTransform="lowercase"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillExample

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ By default `textTransform = "none"`. If there is a need to enforce `lowercase`, please pass the `textTransform = "lowercase` prop.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb CHANGED Viewed

@@ -1,4 +1 @@
-<%= pb_rails("form_pill", props: {
-   text: "this is a tag"
-   }) %>
+<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>

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

@@ -4,9 +4,11 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
+  - form_pill_example: Example
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
+  - form_pill_example: Example

data/app/pb_kits/playbook/pb_form_pill/docs/index.js CHANGED Viewed

@@ -1,3 +1,5 @@
 export { default as FormPillUser } from './_form_pill_user.jsx'
 export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
+export { default as FormPillExample } from './_form_pill_example.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb CHANGED Viewed

@@ -1,19 +1,12 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname + object.size_class) do %>
-    <% if object.name.present? %>
-      <%= pb_rails("avatar", props: {
-        name: object.name,
-        image_url: object.avatar_url,
-        size: "xs"
-      }) %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class) do %>
+  <% if object.name.present? %>
+    <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
-    <% elsif object.text.present? %>
-      <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-    <% end %>
+        <% elsif object.text.present? %>
+          <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+            <% end %>
-    <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-      <%= pb_rails("icon", props: { icon: 'times', fixed_width: true }) %>
-    <% end %>
-<% end %>
+              <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+                <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+                  <% end %>
+                    <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb CHANGED Viewed

@@ -8,12 +8,16 @@ module Playbook
       prop :text
       prop :size
+      prop :text_transform, type: Playbook::Props::Enum,
+                            values: %w[none lowercase],
+                            default: "none"
       def classname
-        generate_classname("pb_form_pill_kit", "primary", name, text)
+        generate_classname("pb_form_pill_kit", "primary", name, text, text_transform)
       end
       def display_text
-        name.downcase
+        object.text
       end
       def size_class

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

@@ -8,4 +8,8 @@
     fill: $text_lt_light;
     font: $regular $font_base $font_family_base;
   }
-}
+  rect.highcharts-background {
+    fill: #0000 !important;
+  }
+}

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

@@ -26,7 +26,7 @@ module Playbook
       end
       def city_state
-        [city.titleize, state].join(", ")
+        [city&.titleize, state].join(", ")
       end
       def zip

data/app/pb_kits/playbook/pb_line_graph/_line_graph.scss CHANGED Viewed

@@ -0,0 +1,3 @@
+rect.highcharts-background {
+    fill: #0000 !important;
+}

data/app/pb_kits/playbook/pb_pill/_pill.jsx CHANGED Viewed

@@ -14,6 +14,7 @@ type PillProps = {
   id?: string,
   text: string,
   variant?: "success" | "warning" | "error" | "info" | "neutral",
+  textTransform?: "none" | "lowercase"
 }
 const Pill = (props: PillProps) => {
@@ -24,11 +25,12 @@ const Pill = (props: PillProps) => {
     id,
     text,
     variant = 'neutral',
+    textTransform = 'lowercase',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_pill_kit', variant), globalProps(props), className)
+  const classes = classnames(buildCss('pb_pill_kit', variant, textTransform), globalProps(props), className)
   return (
     <div

data/app/pb_kits/playbook/pb_pill/_pill.scss CHANGED Viewed

@@ -14,6 +14,14 @@ $pb_pill_height: 22px;
   border-radius: $pb_pill_height/2;
   white-space: nowrap;
+  &[class*=lowercase] {
+    text-transform: lowercase;
+  }
+  &[class*=none] {
+    text-transform: none;
+  }
   @each $color_name, $color_value in $status_color_text {
     &[class*=_#{$color_name}]  {
         background: rgba($color_value, $opacity-1);

data/app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb CHANGED Viewed

@@ -1,45 +1 @@
-<%= pb_rails("pill", props: {
-  text: "Default"
-}) %>
-<br><br>
-<%= pb_rails("pill", props: {
-  text: "success",
-  variant: "success"
-}) %>
-<br><br>
-<%= pb_rails("pill", props: {
-  text: "error",
-  variant: "error"
-}) %>
-<br><br>
-<%= pb_rails("pill", props: {
-  text: "warning",
-  variant: "warning"
-}) %>
-<br><br>
-<%= pb_rails("pill", props: {
-  text: "info",
-  variant: "info"
-}) %>
-<br><br>
-<%= pb_rails("pill", props: {
-  text: "neutral",
-  variant: "neutral"
-}) %>
-<br><br>
-<%= pb_rails("pill", props: {
-  text: "primary",
-  variant: "primary"
-}) %>
+<%= pb_rails("pill", props: { text: "Default" }) %>