playbook_ui 7.0.0 → 7.0.1.pre.alpha1

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

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

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

@@ -40,11 +40,7 @@ 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 }),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_logistic_kit', { dark: dark }), className, globalProps(props))
 
   return (
     <div

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

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

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

@@ -36,11 +36,8 @@ 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),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_multiple_users_kit', reverseClass),
+    className, globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.html.erb

@@ -0,0 +1,41 @@
+<%= pb_rails("multiple_users", props: {
+  dark: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users", props: {
+  dark: true,
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { MultipleUsers } from '../../'
+
+const MultipleUsersDark = () => {
+  return (
+    <div>
+      <MultipleUsers
+          dark
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+        {
+          name: 'Keith Craig',
+          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+        },
+        {
+          name: 'Alicia Cooper',
+          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+        },
+      ]}
+      />
+
+      <br />
+      <br />
+
+      <MultipleUsers
+          dark
+          users={[
+        {
+          name: 'Shawn Palmer',
+          imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+        },
+        {
+          name: 'Andrew Murray Cooper Craig',
+        },
+      ]}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersDark

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

@@ -3,8 +3,9 @@ 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

@@ -1,2 +1,3 @@
 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/_multiple_users_stacked_dark.html.erb

@@ -0,0 +1,53 @@
+<%= pb_rails("multiple_users_stacked", props: {
+  dark: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", props: {
+  dark: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", props: {
+  dark: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_dark.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { MultipleUsersStacked } from '../../'
+
+const MultipleUsersStackedDark = () => {
+  return (
+    <div>
+      <MultipleUsersStacked
+          dark
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+      ]}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          dark
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+      ]}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          dark
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+        {
+          name: 'Keith Craig',
+          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+        },
+        {
+          name: 'Alicia Cooper',
+          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+        },
+      ]}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersStackedDark

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

@@ -2,7 +2,8 @@ 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

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

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

@@ -45,13 +45,11 @@ $selector: ".pb_nav_list";
         color: $text_lt_default;
       }
 
-      @media (hover:hover) {
-        &:hover {
+      &:hover {
+        color: $primary;
+        #{$selector}_item_icon,
+        #{$selector}_item_text {
           color: $primary;
-          #{$selector}_item_icon,
-          #{$selector}_item_text {
-            color: $primary;
-          }
         }
       }
     }

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -36,13 +36,8 @@ const Nav = (props: NavProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const cardCss = classnames(
-    buildCss('pb_nav_list', variant, orientation, {
-      highlight: highlight,
-    }),
-    globalProps(props),
-    className
-  )
+  const cardCss = classnames(buildCss('pb_nav_list', variant, orientation, {
+    highlight: highlight }, className, globalProps(props)))
 
   return (
     <div

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -46,15 +46,13 @@ $selector: ".pb_nav_list";
         transition-property: color, border-color, background-color;
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
-        @media (hover:hover) {
-          &:hover {
-            background-color: rgba($primary, 0.03);
-            [class*=_icon] {
-              color: $primary;
-            }
-            [class*=_text] {
-              color: $primary;
-            }
+        &:hover {
+          background-color: rgba($primary, 0.03);
+          [class*=_icon] {
+            color: $primary;
+          }
+          [class*=_text] {
+            color: $primary;
           }
         }
         [class*=_icon_left] {
@@ -112,15 +110,13 @@ $selector: ".pb_nav_list";
           flex: 1;
           font-weight: $regular;
         }
-        @media (hover:hover) {
-          &:hover {
-            background-color: rgba($primary, 0.03);
-            [class*=_icon] {
-              color: $primary;
-            }
-            [class*=_text] {
-              color: $primary;
-            }
+        &:hover {
+          background-color: rgba($primary, 0.03);
+          [class*=_icon] {
+            color: $primary;
+          }
+          [class*=_text] {
+            color: $primary;
           }
         }
       }

data/app/pb_kits/playbook/pb_person/_person.jsx

@@ -32,11 +32,7 @@ const Person = (props: PersonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_person_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_person_kit'), className, globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -43,11 +43,7 @@ const PersonContact = (props: PersonContactProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_person_contact_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_person_contact_kit'), className, globalProps(props))
 
   const wrongContacts = () => (
     contacts.filter((contactObject) => (
@@ -77,23 +73,22 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={`valid-contact-${index}`}
+            key={index}
         />
-      ))}
+            ))}
       {wrongContacts().map((contactObject, index) => (
-        <div key={`wrong-contact-caption-wrapper-${index}`}>
+        <>
           <Caption
               className="wrong_numbers"
-              key={`wrong-contact-caption-${index}`}
               text="wrong number"
           />
           <Contact
               contactType={contactObject.contactType}
               contactValue={contactObject.contactValue}
-              key={`wrong-contact-${index}`}
+              key={index}
           />
-        </div>
-      ))}
+        </>
+          ))}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -23,7 +23,6 @@ const PersonContactWithWrongNumbers = () => {
             },
           ]}
           firstName="Pauline"
-          key="person-contact-1"
           lastName="Smith"
       />
     </>

data/app/pb_kits/playbook/pb_pill/docs/_pill_dark.html.erb

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