RubyGems - playbook_ui - Versions diffs - 7.0.0.pre.alpha6 → 7.0.0.pre.alpha11 - Mend

playbook_ui 7.0.0.pre.alpha6 → 7.0.0.pre.alpha11

Files changed (471) hide show

data/app/pb_kits/playbook/pb_hashtag/docs/index.js CHANGED

	@@ -1,2 +1 @@
1 1	export { default as HashtagDefault } from './_hashtag_default.jsx'
2	- export { default as HashtagDark } from './_hashtag_dark.jsx'

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx CHANGED

@@ -27,7 +27,7 @@ const Highlight = (props: HighlightProps) => {
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={classnames(className, globalProps(props))}
+        highlightClassName={classnames(globalProps(props), className)}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx CHANGED

@@ -40,12 +40,12 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
   const classes = (className, dark) =>
     classnames(
-      className,
       {
         'pb_home_address_street': !dark,
         'pb_home_address_street_dark': dark,
       },
-      globalProps(props)
+      globalProps(props),
+      className
     )
   return (
     <div className={classes(className, dark)}>

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { HomeAddressStreet } from '../../'
-const HomeAddressStreetEmphasis = () => {
+const HomeAddressStreetEmphasis = (props) => {
   return (
     <div>
       <HomeAddressStreet
@@ -14,6 +14,7 @@ const HomeAddressStreetEmphasis = () => {
           state="PA"
           territory="PHL"
           zipcode="19382"
+          {...props}
       />
       <br />
       <br />
@@ -28,6 +29,7 @@ const HomeAddressStreetEmphasis = () => {
           state="PA"
           territory="PHL"
           zipcode="19382"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx CHANGED

@@ -1,7 +1,7 @@
 import React from 'react'
 import { HomeAddressStreet } from '../../'
-const HomeAddressStreetModified = () => {
+const HomeAddressStreetModified = (props) => {
   return (
     <HomeAddressStreet
         address="70 Prospect Ave"
@@ -9,6 +9,7 @@ const HomeAddressStreetModified = () => {
         state="PA"
         territory="PHL"
         zipcode="19382"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml CHANGED

@@ -4,12 +4,10 @@ examples:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
-  - home_address_street_dark: Dark
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
-  - home_address_street_dark: Dark

data/app/pb_kits/playbook/pb_home_address_street/docs/index.js CHANGED

@@ -1,4 +1,3 @@
 export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
-export { default as HomeAddressStreetDark } from './_home_address_street_dark.jsx'

data/app/pb_kits/playbook/pb_icon/_icon.jsx CHANGED

@@ -56,7 +56,6 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
   const classes = classnames(
-    className,
     flipMap[flip],
     'pb_icon_kit',
     'far',
@@ -72,7 +71,8 @@ const Icon = (props: IconProps) => {
       [`fa-pull-${pull}`]: pull,
       [`fa-rotate-${rotation}`]: rotation,
     },
-    globalProps(props)
+    globalProps(props),
+    className
   )
   return (

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb CHANGED

@@ -1 +1,3 @@
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<%= pb_rails("body", props: { dark: true }) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx CHANGED

@@ -1,13 +1,15 @@
 import React from 'react'
-import { Icon } from '../../'
+import { Body, Icon } from '../../'
 const IconDefaultDark = () => {
   return (
     <div>
-      <Icon
-          fixedWidth
-          icon="user"
-      />
+      <Body dark>
+        <Icon
+            fixedWidth
+            icon="user"
+        />
+      </Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx CHANGED

@@ -32,7 +32,11 @@ const IconValue = (props: IconValueProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_icon_value_kit', align), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_icon_value_kit', align),
+    globalProps(props),
+    className
+  )
   return (
     <div

data/app/pb_kits/playbook/pb_image/_image.jsx CHANGED

@@ -25,7 +25,11 @@ const Image = (props: ImageProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_image lazyload blur_up'),
+    globalProps(props),
+    className
+  )
   const dataProps = buildDataProps(data)
   return (

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx CHANGED

@@ -30,7 +30,11 @@ const LabelPill = (props: LabelPillProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = classnames(['pb_label_pill_kit', className], globalProps(props))
+  const css = classnames(
+    'pb_label_pill_kit',
+    globalProps(props),
+    className
+  )
   return (
     <div

data/app/pb_kits/playbook/pb_label_value/docs/example.yml CHANGED

@@ -4,16 +4,10 @@ examples:
   - label_value_default: Default
   - label_value_details: Details
   - label_value_details_examples: Other Examples
-  - label_value_dark: Dark
-  - label_value_details_dark: Details Dark
-  - label_value_details_examples_dark: Other Examples Dark
   react:
   - label_value_default: Default
   - label_value_details: Details
   - label_value_details_examples: Other Examples
-  - label_value_dark: Dark
-  - label_value_details_dark: Details Dark
-  - label_value_details_examples_dark: Other Examples Dark

data/app/pb_kits/playbook/pb_label_value/docs/index.js CHANGED

@@ -1,7 +1,3 @@
 export { default as LabelValueDefault } from './_label_value_default.jsx'
 export { default as LabelValueDetails } from './_label_value_details.jsx'
 export { default as LabelValueDetailsExamples } from './_label_value_details_examples.jsx'
-export { default as LabelValueDark } from './_label_value_dark.jsx'
-export { default as LabelValueDetailsDark } from './_label_value_details_dark.jsx'
-export { default as LabelValueDetailsExamplesDark } from './_label_value_details_examples_dark.jsx'

data/app/pb_kits/playbook/pb_layout/_layout.jsx CHANGED

@@ -46,7 +46,7 @@ type LayoutFooterProps = {
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', className, globalProps(props))}>
+    <div className={classnames('layout_sidebar', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -56,7 +56,7 @@ const Side = (props: LayoutSideProps) => {
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_body', className, globalProps(props))}>
+    <div className={classnames('layout_body', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -66,7 +66,7 @@ const Body = (props: LayoutBodyProps) => {
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_header', className, globalProps(props))}>
+    <div className={classnames('layout_header', globalProps(props), className)}>
       {children}
     </div>
   )
@@ -76,7 +76,7 @@ const Header = (props: LayoutHeaderProps) => {
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_footer', className, globalProps(props))}>
+    <div className={classnames('layout_footer', globalProps(props), className)}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_legend/_legend.html.erb CHANGED

@@ -1 +1,11 @@
-<%= react_component('Legend', object.chart_options) %>
+<%= content_tag(:div, object.text,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= pb_rails("body", props: {color: object.body_color}) do %>
+    <span class="pb_legend_indicator_circle"></span>
+    <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
+    <%= object.text %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_legend/docs/example.yml CHANGED

@@ -3,13 +3,9 @@ examples:
   rails:
   - legend_default: Default
   - legend_prefix: With Prefix Text
-  - legend_dark: Dark Mode
-  - legend_dark_prefix: Dark Mode with Prefix Text
   react:
   - legend_default: Default
   - legend_prefix: With Prefix Text
-  - legend_dark: Dark Mode
-  - legend_dark_prefix: Dark Mode with Prefix Text

data/app/pb_kits/playbook/pb_legend/docs/index.js CHANGED

@@ -1,4 +1,2 @@
 export { default as LegendDefault } from './_legend_default.jsx'
 export { default as LegendPrefix } from './_legend_prefix.jsx'
-export { default as LegendDark } from './_legend_dark.jsx'
-export { default as LegendDarkPrefix } from './_legend_dark_prefix.jsx'

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx CHANGED

@@ -77,7 +77,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(globalProps(this.props), className)}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_list/_list.jsx CHANGED

@@ -52,8 +52,9 @@ const List = (props: ListProps) => {
       borderless: borderless,
       ordered: ordered,
       xpadding: xpadding,
-    }), className,
-    globalProps(props)
+    }),
+    globalProps(props),
+    className
   )
   return (

data/app/pb_kits/playbook/pb_list/_list_item.jsx CHANGED

@@ -27,8 +27,9 @@ const ListItem = (props: ListItemProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_item_kit'), className,
-    globalProps(props)
+    buildCss('pb_item_kit'),
+    globalProps(props),
+    className
   )
   return (

data/app/pb_kits/playbook/pb_list/docs/example.yml CHANGED

@@ -7,11 +7,7 @@ examples:
   - list_xpadding: Horizontal Padding
   - list_layout_left: Layout Left
   - list_layout_right: Layout Right
-  - list_dark: Dark Default
-  - list_dark_lg: Dark Large
-  - list_dark_ordered: Dark Ordered
-  - list_dark_borderless: Dark Borderless
-  - list_dark_xpadding: Dark Horizontal Padding
   react:
   - list_default: Default
   - list_lg: Large
@@ -20,9 +16,3 @@ examples:
   - list_xpadding: Horizontal Padding
   - list_layout_left: Layout Left
   - list_layout_right: Layout Right
-  - list_dark: Dark Default
-  - list_dark_lg: Dark Large
-  - list_dark_ordered: Dark Ordered
-  - list_dark_borderless: Dark Borderless
-  - list_dark_xpadding: Dark Horizontal Padding

data/app/pb_kits/playbook/pb_list/docs/index.js CHANGED

@@ -1,13 +1,7 @@
 export { default as ListDefault } from './_list_default.jsx'
-export { default as ListDark } from './_list_dark.jsx'
 export { default as ListXpadding } from './_list_xpadding.jsx'
-export { default as ListDarkBorderless } from './_list_dark_borderless.jsx'
-export { default as ListDarkLg } from './_list_dark_lg.jsx'
-export { default as ListDarkXpadding } from './_list_dark_xpadding.jsx'
-export { default as ListDarkOrdered } from './_list_dark_ordered.jsx'
 export { default as ListLayoutRight } from './_list_layout_right.jsx'
 export { default as ListLayoutLeft } from './_list_layout_left.jsx'
 export { default as ListLg } from './_list_lg.jsx'
 export { default as ListOrdered } from './_list_ordered.jsx'
 export { default as ListBorderless } from './_list_borderless.jsx'

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml CHANGED

@@ -2,10 +2,8 @@ examples:
   rails:
   - loading_inline_light: Light
-  - loading_inline_dark: Dark
   react:
   - loading_inline_light: Default
-  - loading_inline_dark: Default

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js CHANGED

	@@ -1,2 +1 @@
1 1	export { default as LoadingInlineLight } from './_loading_inline_light.jsx'
2	- export { default as LoadingInlineDark } from './_loading_inline_dark.jsx'

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx CHANGED

@@ -40,7 +40,11 @@ const Logistic = (props: LogisticProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const formattedDate = new DateTime({ value: date })
-  const classes = classnames(buildCss('pb_logistic_kit', { dark: dark }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_logistic_kit', { dark }),
+    globalProps(props),
+    className
+  )
   return (
     <div

data/app/pb_kits/playbook/pb_message/_message.jsx CHANGED

@@ -39,7 +39,11 @@ const Message = (props: MessageProps) => {
     ? 'pb_message_kit_avatar'
     : 'pb_message_kit'
-  const classes = classnames(buildCss(baseClassName), className, globalProps(props))
+  const classes = classnames(
+    buildCss(baseClassName),
+    globalProps(props),
+    className
+  )
   return (
     <div

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx CHANGED

@@ -36,8 +36,11 @@ const MultipleUsers = (props: MultipleUsersProps) => {
   const reverseClass = reverse === true ? 'reverse' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_multiple_users_kit', reverseClass),
-    className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_multiple_users_kit', reverseClass),
+    globalProps(props),
+    className
+  )
   return (
     <div

data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml CHANGED

@@ -3,9 +3,8 @@ examples:
   rails:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
-  - multiple_users_dark: Dark
   react:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
-  - multiple_users_dark: Dark

data/app/pb_kits/playbook/pb_multiple_users/docs/index.js CHANGED

@@ -1,3 +1,2 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
-export { default as MultipleUsersDark } from './_multiple_users_dark.jsx'

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml CHANGED

@@ -2,8 +2,7 @@ examples:
   rails:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_dark: Dark
   react:
   - multiple_users_stacked_default: Default
-  - multiple_users_stacked_dark: Dark

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js CHANGED

	@@ -1,2 +1 @@
1 1	export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
2	- export { default as MultipleUsersStackedDark } from './_multiple_users_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss CHANGED

@@ -45,11 +45,13 @@ $selector: ".pb_nav_list";
         color: $text_lt_default;
       }
-      &:hover {
-        color: $primary;
-        #{$selector}_item_icon,
-        #{$selector}_item_text {
+      @media (hover:hover) {
+        &:hover {
           color: $primary;
+          #{$selector}_item_icon,
+          #{$selector}_item_text {
+            color: $primary;
+          }
         }
       }
     }
@@ -69,4 +71,28 @@ $selector: ".pb_nav_list";
       }
     }
   }
+  &[class*=dark]{
+    [class*=pb_nav_list_kit_item]{
+      [class*=_link]{
+        border-color: rgba($white, $opacity_3);
+      }
+      &[class*=_active] [class*=_link]{
+        border-color: $white;
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_default;
+        }
+      }
+      [class*=_link] {
+        [class*=_text],[class*=_icon]{
+          color: $text_dk_lighter;
+        }
+        &:hover{
+          background-color: rgba($white, $opacity_1);
+          [class*=_icon],[class*=_text] {
+            color: $white;
+          }
+        }
+      }
+    }
+  }
 }