RubyGems - playbook_ui - Versions diffs - 4.14.0 → 4.17.0 - Mend

playbook_ui 4.14.0 → 4.17.0

Files changed (290) hide show

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx ADDED

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Timestamp } from '../../'
+const TimestampDefault = () => (
+  <Timestamp text="20 seconds ago" />
+)
+export default TimestampDefault

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

@@ -1,7 +1,7 @@
 examples:
   rails:
   - timestamp_default: Default
   react:
+  - timestamp_default: Default

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

	@@ -0,0 +1 @@
1	+ export { default as TimestampDefault } from './_timestamp_default.jsx'

data/app/pb_kits/playbook/pb_title/_title.jsx CHANGED

@@ -2,6 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 type TitleProps = {
   className?: String,
@@ -9,13 +10,10 @@ type TitleProps = {
   dark?: Boolean,
   size?: 1 | 2 | 3 | 4,
   text?: String,
-  tag?: 'h1' | 'h2' | 'h3',
+  tag?: "h1" | "h2" | "h3",
 }
-const tagCSS = ({
-  dark = false,
-  size = 3,
-}) => {
+const tagCSS = ({ dark = false, size = 3 }) => {
   let css = ''
   css += `_${size}`
@@ -25,18 +23,19 @@ const tagCSS = ({
 }
 const Title = (props: TitleProps) => {
-  const {
-    className,
-    children,
-    text,
-    tag = 'h3',
-  } = props
+  const { children, className, tag = 'h3', text } = props
   const Tag = `${tag}`
   return (
-    <Tag className={classnames(`pb_title_kit${tagCSS(props)}`, className)}>
-      { text || children }
+    <Tag
+        className={classnames(
+        `pb_title_kit${tagCSS(props)}`,
+        className,
+        spacing(props),
+      )}
+    >
+      {text || children}
     </Tag>
   )
 }

data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb CHANGED

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

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

@@ -1,39 +1,60 @@
 /* @flow */
 import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { Body, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 type TitleCountProps = {
+  align: "center" | "left" | "right",
+  aria?: object,
   className?: String,
-  data?: String,
+  count?: Numeric,
+  data?: object,
   id?: String,
   title?: String,
-  count?: Number,
-  size?: String
-}
+  size?: "lg" | "sm",
+};
+const TitleCount = (props: TitleCountProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    data = {},
+    count,
+    id,
+    title,
+    size = 'sm' } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
-const TitleCount = ({
-  className = 'pb_title_count_kit',
-  data,
-  count,
-  id,
-  title,
-  size,
-}: TitleCountProps) => (
-  <div
-      className={className}
-      data={data}
-      id={id}
-  >
-    <Title
-        className="pb_title_count_text"
-        size={size == 'lg' ? 3 : 4}
-        text={title}
-    />
-    <Body
-        color="light"
-        text={`${count}`}
-    />
-  </div>
-)
+  const css = classnames(buildCss('pb_title_count_kit', align, size), className, spacing(props))
+  const formatCount = count.toLocaleString()
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      <Title
+          className={title !== undefined ? 'pb_title_count_text' : ''}
+          size={size === 'lg' ? 3 : 4}
+          text={title}
+      />
+      <Body color="light">
+        <If condition={count}>{formatCount}</If>
+      </Body>
+    </div>
+  )
+}
 export default TitleCount

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx ADDED

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

data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx CHANGED

@@ -5,11 +5,22 @@ const TitleCountDefault = () => {
   return (
     <>
       <TitleCount
-          count={35}
+          count={35.78}
           title="Appointments"
       />
+      <br />
+      <TitleCount
+          count={7399}
+          size="lg"
+          title="Appointments"
+      />
+      <br />
       <TitleCount
-          count={35}
+          count={-379503.372}
           size="lg"
           title="Appointments"
       />

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

@@ -1,9 +1,8 @@
 examples:
   rails:
-  - title_count_default: Default
-  - title_count_align: Align
+    - title_count_default: Default
+    - title_count_align: Align
   react:
-  - title_count_default: Default
+    - title_count_default: Default
+    - title_count_align: Align

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

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

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

@@ -1,21 +1,43 @@
+/* @flow */
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import { Body, Title } from '../'
+import { buildCss, buildDataProps } from '../utilities/props'
-class TitleDetail extends React.Component {
-  render() {
-    return (
-      <div className="pb_title_detail">
-        <span>{'TITLE DETAIL CONTENT'}</span>
-      </div>
-    )
-  }
+type TitleDetailProps = {
+  align?: "left" | "center" | "right",
+  className?: String,
+  data?: object,
+  detail: String,
+  id?: String,
+  title: String,
 }
-TitleDetail.propTypes = propTypes
+const TitleDetail = (props: TitleDetailProps) => {
+  const { align = 'left', className, data = {}, detail, id, title } = props
+  const dataProps = buildDataProps(data)
+  const pbCss = buildCss('pb_title_detail_kit', align)
+  return (
+    <div
+        {...dataProps}
+        className={classnames(className, pbCss, spacing(props))}
+        id={id}
+    >
+      <Title
+          size={4}
+          text={title}
+      />
+      <Body
+          color="light"
+          text={detail}
+      />
+    </div>
+  )
+}
 export default TitleDetail

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx ADDED

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

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

@@ -1,7 +1,7 @@
 examples:
   rails:
   - title_detail_default: Default
   react:
+  - title_detail_default: Default

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

	@@ -0,0 +1 @@
1	+ export { default as TitleDetailDefault } from './_title_detail_default.jsx'

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

@@ -1,10 +1,8 @@
 // @flow
 import React from 'react'
-import type {
-  InputCallback,
-} from '../types'
+import classnames from 'classnames'
+import type { InputCallback } from '../types'
 import {
   buildAriaProps,
@@ -13,6 +11,8 @@ import {
   noop,
 } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type Props = {
   aria: object,
   checked: boolean,
@@ -20,7 +20,7 @@ type Props = {
   onChange: InputCallback<HTMLInputElement>,
   onCheck: InputCallback<HTMLInputElement>,
   onUncheck: InputCallback<HTMLInputElement>,
-  size: 'sm' | 'md',
+  size: "sm" | "md",
 }
 const Toggle = ({
@@ -37,23 +37,21 @@ const Toggle = ({
   const dataProps = buildDataProps(data)
   const handleChange = (event) => {
     onChange(event)
-    event.target.checked ?
-      onCheck(event) :
-      onUncheck(event)
+    event.target.checked ? onCheck(event) : onUncheck(event)
   }
   const css = buildCss({
     'pb_toggle_kit': true,
     [size]: true,
-    'on': checked,
-    'off': !checked,
+    on: checked,
+    off: !checked,
   })
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={css}
+        className={classnames(css, spacing(props))}
     >
       <label className="pb_toggle_wrapper">
         <input

data/app/pb_kits/playbook/pb_tooltip/_tooltip.html.erb ADDED

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+    <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
+      <%= capture(&object.children) %>
+      <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
+    </div>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss ADDED

@@ -0,0 +1,105 @@
+@import "../tokens/positioning";
+@import "../tokens/colors";
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+[class^="pb_tooltip_kit"] {
+  .tooltip_tooltip {
+    display: none;
+    opacity: 0;
+    left: 0;
+    animation-name: fadeIn;
+    animation-duration: 150ms;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+    &.flipped {
+      margin-top: 15px;
+      .arrow {
+        top: -35%;
+        border-color: transparent transparent $white transparent;
+      }
+    }
+    &.react {
+      .arrow {
+        top: 78%;
+      }
+      &.flipped {
+        .arrow {
+          top: -8%;
+        }
+      }
+    }
+    .arrow {
+      content: " ";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      border-color: $white transparent transparent transparent;
+      border-style: solid;
+      border-width: 10px;
+      margin-bottom: 50px;
+      margin-left: -10px;
+    }
+    &.show {
+      opacity: 1;
+      display: block;
+      z-index: $z_9;
+      margin-bottom: $space_sm;
+      background-color: $white;
+      padding: $space_xs $space_sm $space_xs $space_sm;
+      box-shadow: $shadow_deeper;
+      border-radius: $border_rad_light;
+      &.fade_out {
+        animation-name: fadeOut;
+        animation-duration: 150ms;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+      }
+    }
+  }
+  &[class*=_dark]{
+    .tooltip_tooltip{
+      color: $white;
+      background-color: rgba($black, $opacity_9);
+      &.show {
+      }
+      .arrow {
+        border-color: $black transparent transparent transparent;
+        opacity: $opacity_9;
+      }
+      &.flipped {
+        .arrow {
+          border-color: transparent transparent $black transparent;
+          opacity: $opacity_9;
+        }
+      }
+    }
+  }
+}
+.tooltip_tooltip.top {
+  padding: ($space_xs - 3px) 0;
+}