playbook_ui 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -101,7 +101,7 @@ const Gauge = (props: GaugeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, globalProps(props), className)}
+        className={classnames(css, className, globalProps(props))}
         id={id}
     />
   )

data/app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb

@@ -1,10 +1,10 @@
 <%= content_tag(:span,
-    aria: object.aria,
-    class: object.classname,
+    id: object.id,
     data: object.data,
-    id: object.id) do %>
+    class: object.classname) do %>
 
   <%= link_to object.url do %>
-    <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
+    <%= pb_rails("badge", props: { variant: "primary", text: object.hashtag_text, dark: object.dark }) %>
   <% end %>
+
 <% end %>

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -5,14 +5,13 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { Badge } from '../'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type HashtagProps = {
-  aria?: object,
   className?: string,
-  dark?: boolean,
   data?: string,
+  dark?: boolean,
   id?: string,
   text?: string,
   type: "default" | "home" | "project" | "appointment",
@@ -27,27 +26,14 @@ const typeMap = {
 }
 
 const Hashtag = (props: HashtagProps) => {
-  const {
-    aria = {},
-    className,
-    dark = false,
-    data = {},
-    id,
-    text,
-    type = 'default',
-    url,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_hashtag_kit'), globalProps(props), className)
-
+  const { className, dark = false, text, type, url } = props
   return (
     <span
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+        className={classnames(
+        className,
+        buildCss('pb_hashtag_kit', { dark: dark }),
+        globalProps(props)
+      )}
     >
       <a href={url}>
         <Badge

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("hashtag", props: {text: "470297", url: "https://google.com", type: "project", dark: true}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "home", dark: true}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "345678", url: "https://google.com", type: "appointment", dark: true}) %>
+
+<br/><br/>
+
+<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "default", dark: true}) %>

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Hashtag } from '../../'
+
+const HashtagDark = () => {
+  return (
+    <div>
+      <Hashtag
+          dark
+          text="470297"
+          type="project"
+          url="https://google.com"
+      />
+      <br />
+      <Hashtag
+          dark
+          text="123456"
+          type="home"
+          url="https://google.com"
+      />
+      <br />
+      <Hashtag
+          dark
+          text="456789"
+          type="appointment"
+          url="https://google.com"
+      />
+      <br />
+      <Hashtag
+          dark
+          text="654321"
+          type="default"
+          url="https://google.com"
+      />
+    </div>
+  )
+}
+
+export default HashtagDark

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -1,38 +1,31 @@
 import React from 'react'
 import { Hashtag } from '../../'
 
-const HashtagDefault = (props) => {
+const HashtagDefault = () => {
   return (
     <div>
       <Hashtag
           text="470297"
           type="project"
           url="https://google.com"
-          {...props}
       />
       <br />
-      <br />
       <Hashtag
           text="123456"
           type="home"
           url="https://google.com"
-          {...props}
       />
       <br />
-      <br />
       <Hashtag
           text="456789"
           type="appointment"
           url="https://google.com"
-          {...props}
       />
       <br />
-      <br />
       <Hashtag
           text="654321"
           type="default"
           url="https://google.com"
-          {...props}
       />
     </div>
   )

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

@@ -2,6 +2,8 @@ examples:
 
   rails:
   - hashtag_default: Hashtag Types
+  - hashtag_dark: Dark
 
   react:
   - hashtag_default: Hashtag Types
+  - hashtag_dark: Dark

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

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

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -8,13 +8,14 @@ module Playbook
       partial "pb_hashtag/hashtag"
 
       prop :text
+      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :type, type: Playbook::Props::Enum,
                   values: %w[default project home appointment],
                   default: "default"
       prop :url
 
       def classname
-        generate_classname("pb_hastag_kit")
+        generate_classname("pb_hastag_kit", dark_class)
       end
 
       def hashtag_text
@@ -23,6 +24,10 @@ module Playbook
 
     private
 
+      def dark_class
+        dark ? "dark" : nil
+      end
+
       def type_text
         if type === "home"
           "H#"

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

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

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

@@ -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),
-      className
+      globalProps(props)
     )
   return (
     <div className={classes(className, dark)}>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+  dark: true,
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { HomeAddressStreet } from '../../'
+
+const HomeAddressStreetDark = () => {
+  return (
+    <HomeAddressStreet
+        address="70 Prospect Ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        dark
+        homeId={8250263}
+        homeUrl="https://powerhrg.com/"
+        state="PA"
+        territory="PHL"
+        zipcode="19382"
+    />
+  )
+}
+
+export default HomeAddressStreetDark

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

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

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

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

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

@@ -4,10 +4,12 @@ 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

@@ -1,3 +1,4 @@
 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

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

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

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

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

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

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.html.erb

@@ -1,7 +1,6 @@
 <%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
+    id: object.id,
     data: object.data,
-    id: object.id) do %>
-  <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+    class: object.classname) do %>
+  <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx

@@ -5,17 +5,13 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { Icon } from '../'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type IconCircleProps = {
-  aria?: object,
   className?: string,
-  dark?: boolean,
-  data?: object,
   icon: string,
-  id?: string,
-  size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",
+  size?: "xs" | "sm" | "md" | "lg" | "xl",
   variant?: | "default"
     | "royal"
     | "blue"
@@ -27,23 +23,12 @@ type IconCircleProps = {
 }
 
 const IconCircle = (props: IconCircleProps) => {
-  const { aria = {}, className, dark = false, data = {}, icon, id, size = 'md', variant = 'default' } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_icon_circle_kit', size, variant), globalProps(props), className)
+  const { className, icon, size = 'md', variant = 'default' } = props
+  const css = buildCss('pb_icon_circle_kit', size, variant)
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <Icon
-          dark={dark}
-          icon={icon}
-      />
+    <div className={classnames(className, css, globalProps(props))}>
+      <Icon icon={icon} />
     </div>
   )
 }