RubyGems - playbook_ui - Versions diffs - 12.17.1 → 12.18.0.pre.alpha.PLAY747carddarktokens610 - Mend

playbook_ui 12.17.1 → 12.18.0.pre.alpha.PLAY747carddarktokens610

Files changed (54) hide show

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx ADDED Viewed

@@ -0,0 +1,185 @@
+import React from 'react'
+import classnames from 'classnames'
+import DateTime from '../pb_kit/dateTime'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
+type TimeRangeInlineProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  id?: string,
+  data?: { [key: string]: string },
+  alignment?: "left" | "center" | "vertical",
+  size?: "sm" | "xs",
+  dark?: boolean,
+  icon?: boolean,
+  timezone?: boolean,
+  startTime: string,
+  endTime: string,
+} & GlobalProps
+const timezoneString = (dateValue: string) => {
+  const date = new DateTime({ value: dateValue })
+  return `${date.convertToTimezone()}`
+}
+const dateTimestamp = (dateValue: string) => {
+  const date = new DateTime({ value: dateValue })
+  return `${date.toHour()}:${date.toMinute()}${date.toMeridian()}`
+}
+const dateTimeIso = (dateValue: string) => {
+  const date = new DateTime({ value: dateValue })
+  return date.toIso()
+}
+const TimeRangeInline = (props: TimeRangeInlineProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    alignment = 'left',
+    size = 'sm',
+    dark = false,
+    icon = false,
+    timezone = false,
+    startTime,
+    endTime,
+    id,
+  } = props
+  const dataProps: { [key: string]: string } = buildDataProps(data)
+  const ariaProps: { [key: string]: string } = buildAriaProps(aria)
+  const separator = (
+    <Body color="light">
+      <Icon
+        className="pb_time_range_inline_arrow"
+        dark={dark}
+        fixedWidth
+        icon="long-arrow-right"
+      />
+    </Body>
+  )
+  const iconContent = () => {
+    return (
+      icon &&
+      <Body
+        color="light"
+        tag="span"
+      >
+        <Icon
+          className="pb_time_range_inline_icon"
+          dark={dark}
+          fixedWidth
+          icon="clock"
+          size={size}
+          tag="span"
+        />
+      </Body>
+    )
+  }
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
+      id={id}
+    >
+      <div className="pb_time_range_inline_wrapper">
+        {size == 'xs' &&
+          <>
+            <Caption
+              dark={dark}
+              tag="span"
+            >
+              {iconContent()}
+              <time dateTime={dateTimeIso(startTime)}>
+                {` ${dateTimestamp(
+                  startTime
+                )} `}
+              </time>
+            </Caption>
+            <Caption
+              className="pb_time_range_inline_arrow"
+              dark={dark}
+              tag="span"
+            >
+              {separator}
+            </Caption>
+            <Caption
+              dark={dark}
+              tag="span"
+            >
+              <time dateTime={dateTimeIso(endTime)}>
+                {` ${dateTimestamp(
+                  endTime
+                )} `}
+              </time>
+            </Caption>
+            {timezone &&
+              <Caption
+                className="pb_time_range_inline_timezone"
+                dark={dark}
+                tag="span"
+              >
+                {timezoneString(endTime)}
+              </Caption>
+            }
+          </>
+        }
+        {size == 'sm' &&
+          <>
+            <Body
+              dark={dark}
+              tag="span"
+            >
+              {iconContent()}
+              <time dateTime={dateTimeIso(startTime)}>
+                {` ${dateTimestamp(
+                  startTime
+                )} `}
+              </time>
+            </Body>
+            <Body
+              className="pb_time_range_inline_arrow"
+              dark={dark}
+              tag="span"
+            >
+              {separator}
+            </Body>
+            <Body
+              dark={dark}
+              tag="span"
+            >
+              <time dateTime={dateTimeIso(endTime)}>
+                {` ${dateTimestamp(
+                  endTime
+                )} `}
+              </time>
+            </Body>
+            {timezone &&
+              <Body
+                className="pb_time_range_inline_timezone"
+                color="light"
+                dark={dark}
+                tag="span"
+              >
+                {timezoneString(endTime)}
+              </Body>
+            }
+          </>
+        }
+      </div>
+    </div>
+  )
+}
+export default TimeRangeInline

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.test.js ADDED Viewed

@@ -0,0 +1,85 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import TimeRangeInline from './_time_range_inline'
+const testId = 'timeRangeInline'
+const className = 'custom-class-name'
+const TimeRangeInlineDefault = (props) => (
+    <>
+        <TimeRangeInline
+            aria={{ label: testId }}
+            className={className}
+            data={{ testid: testId }}
+            endTime="2012-08-02T17:49:29Z"
+            icon="true"
+            id={testId}
+            size="sm"
+            startTime="2012-08-02T15:49:29Z"
+            timezone="true"
+            {...props}
+        />
+    </>
+)
+test('should pass data prop', () => {
+    render(<TimeRangeInlineDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+test('should pass className prop', () => {
+    render(<TimeRangeInlineDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+test('should pass aria prop', () => {
+    render(<TimeRangeInlineDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+test('should pass id prop', () => {
+    render(<TimeRangeInlineDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+test('should have left alignment by default', () => {
+    render(<TimeRangeInlineDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_time_range_inline_kit_left')
+})
+test('should pass alignment prop', () => {
+    render(<TimeRangeInlineDefault alignment="right" />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_time_range_inline_kit_right')
+})
+test('should have icon', () => {
+    render(<TimeRangeInlineDefault />)
+    const kit = screen.getByTestId(testId)
+    const icon = kit.querySelector('.pb_time_range_inline_icon')
+    expect(icon).toBeInTheDocument()
+})
+test('should have timezone', () => {
+    render(<TimeRangeInlineDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelector('.pb_time_range_inline_timezone')).toBeInTheDocument()
+})
+test('should render startTime', () => {
+    render(<TimeRangeInlineDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('11:49a')
+})
+test('should render endTime', () => {
+    render(<TimeRangeInlineDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('1:49p')
+})

data/app/pb_kits/playbook/pb_title/_title.tsx CHANGED Viewed

@@ -39,7 +39,7 @@ const Title = (props: TitleProps): React.ReactElement => {
   const classes = classnames(
     buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
-    className,
+    className
   )
   const Tag: React.ReactElement | any = `${tag}`

data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import React from 'react'
+import classnames from 'classnames'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
+type TitleDetailProps = {
+  align?: "left" | "center" | "right",
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  detail: string,
+  id?: string,
+  title: string,
+} & GlobalProps
+const TitleDetail = (props: TitleDetailProps) => {
+  const { align = 'left', aria = {}, className, data = {}, detail, id, title } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const pbCss = buildCss('pb_title_detail_kit', align)
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classnames(pbCss, globalProps(props), className)}
+      id={id}
+    >
+      <Title
+        size={4}
+        text={title}
+      />
+      <Body
+        color="light"
+        text={detail}
+      />
+    </div>
+  )
+}
+export default TitleDetail

data/app/pb_kits/playbook/pb_title_detail/title_detail.test.js ADDED Viewed

@@ -0,0 +1,71 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import TitleDetail from './_title_detail'
+const testId = 'titleDetail'
+const className = 'custom-class-name'
+const detail = 'Commits data and history'
+const title = 'Email Notifications'
+const TitleDetailDefault = (props) => (
+    <>
+        <TitleDetail
+            aria={{ label: testId }}
+            className={className}
+            data={{ testid: testId }}
+            detail={detail}
+            id={testId}
+            title={title}
+            {...props}
+        />
+    </>
+)
+test('should pass data prop', () => {
+    render(<TitleDetailDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+test('should pass className prop', () => {
+    render(<TitleDetailDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+test('should pass aria prop', () => {
+    render(<TitleDetailDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+test('should pass id prop', () => {
+    render(<TitleDetailDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+test('should have left align by default', () => {
+    render(<TitleDetailDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_title_detail_kit_left')
+})
+test('should pass align prop', () => {
+    render(<TitleDetailDefault align="right" />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_title_detail_kit_right')
+})
+test('should render detail', () => {
+    render(<TitleDetailDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent(detail)
+})
+test('should render title', () => {
+    render(<TitleDetailDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent(title)
+})

data/app/pb_kits/playbook/pb_toggle/{_toggle.jsx → _toggle.tsx} RENAMED Viewed

@@ -1,5 +1,3 @@
-// @flow
 import React from 'react'
 import classnames from 'classnames'
 import type { InputCallback } from '../types'
@@ -10,20 +8,20 @@ import {
   buildDataProps,
 } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 type Props = {
-  aria?: object,
+  aria?: { [key: string]: string },
   checked?: boolean,
-  children?: React.Node,
+  children?: React.ReactNode | React.ReactNode[],
   className?: string,
-  data?: object,
+  data?: { [key: string]: string },
   id?: string,
   name?: string,
   onChange?: InputCallback<HTMLInputElement>,
   size?: "sm" | "md",
   value?: string,
-}
+} & GlobalProps
 const Toggle = ({
   aria = {},
@@ -33,7 +31,7 @@ const Toggle = ({
   data = {},
   id,
   name,
-  onChange = () => {},
+  onChange = () => { },
   size = 'sm',
   value,
   ...props
@@ -51,24 +49,24 @@ const Toggle = ({
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classnames(css, globalProps(props), className)}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classnames(css, globalProps(props), className)}
+      id={id}
     >
       <label className="pb_toggle_wrapper">
-        <If condition={children}>
-          {children}
-          <Else />
+        {children && children}
+        {!children &&
           <input
-              {...props}
-              defaultChecked={checked}
-              name={name}
-              onChange={onChange}
-              type="checkbox"
-              value={value}
+            {...props}
+            defaultChecked={checked}
+            name={name}
+            onChange={onChange}
+            type="checkbox"
+            value={value}
           />
-        </If>
+        }
         <div className="pb_toggle_control" />
       </label>
     </div>

data/app/pb_kits/playbook/pb_toggle/toggle.test.js ADDED Viewed

@@ -0,0 +1,67 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Toggle from './_toggle'
+const testId = 'toggle'
+const className = 'custom-class-name'
+const ToggleDefault = (props) => (
+    <>
+        <Toggle
+            aria={{ label: testId }}
+            className={className}
+            data={{ testid: testId }}
+            id={testId}
+            {...props}
+        />
+    </>
+)
+test('should pass data prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toBeInTheDocument()
+})
+test('should pass className prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(className)
+})
+test('should pass aria prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+test('should pass id prop', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+test('should not be checked by default', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_sm_off')
+})
+test('should pass checked prop', () => {
+    render(<ToggleDefault checked />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_sm_on')
+})
+test('should have sm size by default', () => {
+    render(<ToggleDefault />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_sm_off')
+})
+test('should pass size prop', () => {
+    render(<ToggleDefault size='md' />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('pb_toggle_kit_md_off')
+})

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss CHANGED Viewed

@@ -88,13 +88,18 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     &.show {
       opacity: 1;
       margin-bottom: $space_sm;
-      background-color: $white;
+      color: $white;
+      background-color: rgba($black, $opacity_9);
       &.fade_out {
         animation-name: fadeOut;
         animation-duration: 150ms;
         animation-timing-function: linear;
         animation-fill-mode: forwards;
       }
+      .arrow {
+        border-color: $black transparent transparent transparent;
+        opacity: $opacity_9;
+      }
     }
   }
@@ -109,12 +114,12 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       }
       //rails
       &.show {
-        color: $white;
-        background-color: rgba($black, $opacity_9);
+        color: $charcoal;
+        background-color: $white;
       }
-      .arrow {
-        border-color: $black transparent transparent transparent;
-        opacity: $opacity_9;
+      .arrow {
+        border-color: $white transparent transparent transparent;
+        opacity: $opacity_10;
       }
       // react arrow
       .arrow_bg {

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb CHANGED Viewed

@@ -1,4 +1,4 @@
-<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
   <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-1'>Hover here (Top)</span>
@@ -11,7 +11,7 @@
     <% end %>
   <% end %>
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+  <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-2'>Hover here (Bottom)</span>
     <%= pb_rails("tooltip", props: {
       trigger_element_selector: "#regular-tooltip-2",
@@ -22,7 +22,7 @@
     <% end %>
   <% end %>
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+  <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-3'>Hover here (Right)</span>
     <%= pb_rails("tooltip", props: {
       trigger_element_selector: "#regular-tooltip-3",
@@ -33,7 +33,7 @@
     <% end %>
   <% end %>
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
+  <%= pb_rails("flex/flex_item") do %>
     <span id='regular-tooltip-4'>Hover here (Left)</span>
     <%= pb_rails("tooltip", props: {
       trigger_element_selector: "#regular-tooltip-4",

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb CHANGED Viewed

@@ -3,8 +3,7 @@
 <%= pb_rails("tooltip", props: {
   trigger_element_id: "result-1-sample-email-link",
   tooltip_id: "sample-email-tooltip-result-1",
-  position: "top",
-  dark: true
+  position: "top"
 }) do %>
   Send Email
 <% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/example.yml CHANGED Viewed

@@ -3,7 +3,6 @@ examples:
   rails:
   - tooltip_default: Default
   - tooltip_selectors: Using Common Selectors
-  - tooltip_white: White
   - tooltip_with_icon_circle: Icon Circle Tooltip
   react:

data/app/pb_kits/playbook/pb_user/_user.tsx CHANGED Viewed

@@ -49,7 +49,7 @@ const User = (props: UserProps) => {
   const classes = classnames(
     buildCss('pb_user_kit', align, orientation, size),
     globalProps(props),
-    className,
+    className
   )
   const avatarPresent = avatar || avatarUrl

data/app/pb_kits/playbook/tokens/_colors.scss CHANGED Viewed

@@ -68,7 +68,7 @@ $background_colors: (
 /* Card colors ------------------*/
 $card_light:          $white !default;
-$card_dark:           rgba($white, $opacity_1) !default;
+$card_dark:           mix(white, $bg_dark, 10%)  !default;
 $card_colors: (
   card_light:         $card_light,
   card_dark:          $card_dark
@@ -109,16 +109,18 @@ $focus_input_colors: (
 /* Border colors ----------------------*/
 $border_light:        #E4E8F0 !default;
-$border_dark:         rgba($white, $opacity_1) !default;
+$border_dark:         mix(white, $bg_dark, 20%) !default;
 $border_colors: (
   border_light:       $border_light,
   border_dark:        $border_dark
 );
 /* Shadow colors ----------------------*/
-$shadow:        rgba(#3C6AAC, $opacity_2) !default;
+$shadow:             rgba(#3C6AAC, $opacity_2) !default;
+$shadow_dark:        $bg_dark !default;
 $shadow_colors: (
   shadow:       $shadow,
+  shadow_dark:       $shadow_dark,
 );
 /* Text colors ------------------------*/