playbook_ui 7.0.0 → 7.0.1.pre.alpha1

data/app/pb_kits/playbook/pb_title/docs/_title_dark.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("title", props: { text: "Default Title", dark: true }) %>
+
+<br/>
+
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, dark: true }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, dark: true }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_dark.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Title } from '../../'
+
+const TitleDark = () => {
+  return (
+    <div>
+      <Title
+          dark
+          size={4}
+          tag="h4"
+          text="Title 4"
+      />
+      <Title
+          dark
+          size={3}
+          tag="h3"
+          text="Title 3"
+      />
+      <Title
+          dark
+          size={2}
+          tag="h2"
+          text="Title 2"
+      />
+      <Title
+          dark
+          size={1}
+          tag="h1"
+          text="Title 1"
+      />
+    </div>
+  )
+}
+
+export default TitleDark

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

@@ -1,8 +1,7 @@
 examples:
   rails:
   - title_light: Light UI
-  - title_variants: Variants
-
+  - title_dark: Dark UI
   react:
   - title_light: Light UI
-  - title_variants: Variants
+  - title_dark: Dark UI

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

@@ -1,2 +1,2 @@
 export { default as TitleLight } from './_title_light.jsx'
-export { default as TitleVariants } from './_title_variants.jsx'
+export { default as TitleDark } from './_title_dark.jsx'

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -34,11 +34,7 @@ const TitleCount = (props: TitleCountProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const css = classnames(
-    buildCss('pb_title_count_kit', align, size),
-    globalProps(props),
-    className
-  )
+  const css = classnames(buildCss('pb_title_count_kit', align, size), className, globalProps(props))
 
   const formatCount = count.toLocaleString()
 

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  dark: true,
+  title: "Remodeling Consultants",
+  count: 527,
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { TitleCount } from '../../'
+
+const TitleCountAlignDark = () => {
+  return (
+    <>
+      <TitleCount
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="center"
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+
+      <br />
+
+      <TitleCount
+          align="right"
+          count={527}
+          dark
+          title="Remodeling Consultants"
+      />
+    </>
+  )
+}
+
+export default TitleCountAlignDark

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 35.78,
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: 7399,
+  size: "lg",
+  dark: true
+}) %>
+
+<br>
+
+<%= pb_rails("title_count", props: {
+  title: "Appointments",
+  count: -379503.3720,
+  size: "lg",
+  dark: true
+}) %>

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { TitleCount } from '../../'
+
+const TitleCountDark = () => {
+  return (
+    <>
+      <TitleCount
+          count={35.78}
+          dark
+          title="Appointments"
+      />
+
+      <br />
+
+      <TitleCount
+          count={7399}
+          dark
+          size="lg"
+          title="Appointments"
+      />
+
+      <br />
+
+      <TitleCount
+          count={-379503.372}
+          dark
+          size="lg"
+          title="Appointments"
+      />
+    </>
+  )
+}
+
+export default TitleCountDark

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

@@ -2,7 +2,11 @@ examples:
   rails:
     - title_count_default: Default
     - title_count_align: Align
+    - title_count_dark: Dark
+    - title_count_align_dark: Dark
 
   react:
     - title_count_default: Default
     - title_count_align: Align
+    - title_count_dark: Dark
+    - title_count_align_dark: Dark

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

@@ -1,2 +1,4 @@
 export { default as TitleCountDefault } from './_title_count_default.jsx'
 export { default as TitleCountAlign } from './_title_count_align.jsx'
+export { default as TitleCountDark } from './_title_count_dark.jsx'
+export { default as TitleCountAlignDark } from './_title_count_align_dark.jsx'

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -10,11 +10,11 @@ import { buildCss, buildDataProps } from '../utilities/props'
 
 type TitleDetailProps = {
   align?: "left" | "center" | "right",
-  className?: string,
+  className?: String,
   data?: object,
-  detail: string,
-  id?: string,
-  title: string,
+  detail: String,
+  id?: String,
+  title: String,
 }
 
 const TitleDetail = (props: TitleDetailProps) => {
@@ -25,7 +25,7 @@ const TitleDetail = (props: TitleDetailProps) => {
   return (
     <div
         {...dataProps}
-        className={classnames(pbCss, globalProps(props), className)}
+        className={classnames(className, pbCss, globalProps(props))}
         id={id}
     >
       <Title

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("title_detail", props: {
+  dark: true,
+  title: "Email Notifications",
+  detail: "Commits data and history"
+}) %>
+
+<%= pb_rails("title_detail", props: {
+  dark: true,
+  title: "Email Notifications",
+  detail: "Commits data and history",
+  align: "center"
+}) %>
+
+<%= pb_rails("title_detail", props: {
+  dark: true,
+  title: "Email Notifications",
+  detail: "Commits data and history",
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { TitleDetail } from '../../'
+
+const TitleDetailDark = () => (
+  <div>
+    <TitleDetail
+        dark
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+
+    <TitleDetail
+        align="center"
+        dark
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+
+    <TitleDetail
+        align="right"
+        dark
+        detail="Commits data and history"
+        title="Email Notifications"
+    />
+
+  </div>
+)
+
+export default TitleDetailDark

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -34,7 +34,7 @@ const Toggle = ({
   id,
   name,
   onChange = () => {},
-  size = 'sm',
+  size = 'md',
   value,
   ...props
 }: Props) => {
@@ -47,13 +47,13 @@ const Toggle = ({
         on: checked,
         off: !checked,
       }
-    ))
+    ), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, globalProps(props), className)}
+        className={classnames(css, globalProps(props))}
         id={id}
     >
       <label className="pb_toggle_wrapper">

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -2,53 +2,55 @@
 
 $color_checkbox_success: $data_1;
 $color_checkbox_default: $border_light;
-$transition: .2s ease-in-out;
+$transition: .2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+$toggle_sizes: (
+  "sm": 50px,
+  "md": 60px,
+);
 
 [class^=pb_toggle_kit] {
   position: relative;
-  $width: 44px;
-  $height: $width/2;
-  $border_success: 3px solid $color_checkbox_success;
-  $border_default: 3px solid $color_checkbox_default;
 
+  @each $name, $size in $toggle_sizes {
+    &[class*=_#{$name}] {
 
-  .pb_toggle_wrapper {
-    .pb_toggle_control {
-      cursor: pointer;
-      transition: $transition;
-      width: $width;
-      height: $height;
-      display: block;
-      border-radius: $height;
-      border: $border_default;
-      position: relative;
-      box-sizing: content-box;
-      &:after {
-        transition: $transition;
-        content: "";
-        width: $width/2 - 4px;
-        height: $height - 4px;
-        background-color: $color_checkbox_default;
-        border-radius: 50%;
-        position: absolute;
-        top: 2px;
-        left: 2px;
-      }
-      &:hover {
-        border: $border_success;
-        &:after{
-          background-color: $color_checkbox_success;
+      $width: $size;
+      $height: $width/2;
+
+      .pb_toggle_wrapper {
+        .pb_toggle_control {
+          cursor: pointer;
+          transition: $transition;
+          width: $width;
+          height: $height;
+          display: block;
+          border-radius: $height;
+          border: 3px solid $color_checkbox_default;
+          background-color: $color_checkbox_default;
+          position: relative;
+          box-sizing: content-box;
+          &:after {
+            transition: $transition;
+            content: "";
+            width: $width/2;
+            height: $height;
+            display: block;
+            background-color: $white;
+            border-radius: 50%;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
         }
-      }
-    }
-    input {
-      display: none;
-      &:checked + .pb_toggle_control {
-        border: $border_success;
-        background-color: $color_checkbox_success;
-        &:after{
-          left: $width/2 + 2px;
-          background-color: $white;
+        input {
+          display: none;
+          &:checked + .pb_toggle_control {
+            border-color: $color_checkbox_success;
+            background-color: $color_checkbox_success;
+            &:after{
+              left: $width/2;
+            }
+          }
         }
       }
     }

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("toggle", props: {
+  size: "sm",
+  checked: false
+}) %>
+
+<br>
+
+<%= pb_rails("toggle", props: {
+  size: "md",
+  checked: false
+}) %>

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.jsx

@@ -0,0 +1,44 @@
+// @flow
+
+import React, { useState } from 'react'
+import { Toggle } from '../..'
+
+const ToggleSize = () => {
+  const [choice, setChoice] = useState(false)
+
+  const handleOnChange = ({ target }) => {
+    setChoice(target.value = !choice)
+  }
+
+  return (
+    <>
+      <Toggle
+          checked={choice}
+          size="sm"
+      >
+        <input
+            name="toggleSmall"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="toggleSmall"
+        />
+      </Toggle>
+
+      <br />
+
+      <Toggle
+          checked={choice}
+          size="md"
+      >
+        <input
+            name="toggleMedium"
+            onChange={handleOnChange}
+            type="checkbox"
+            value="toggleMedium"
+        />
+      </Toggle>
+    </>
+  )
+}
+
+export default ToggleSize