playbook_ui 12.17.1 → 12.18.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown617

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -0,0 +1,231 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/titles";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+@import "../tokens/shadows";
+@import "../tokens/transition";
+
+[class^="pb_rich_text_editor_kit"] {
+  .toolbar_button {
+    display: flex;
+    align-items: center;
+    background: $transparent;
+    border: none;
+    border-radius: $border_rad_heaviest;
+    color: $text_lt_light;
+    cursor: pointer;
+    &_icon {
+      width: $space_xl + 2;
+      height: $space_xl + 2;
+    }
+    &.open {
+      color: $primary;
+    }
+    &.is-active,
+    &:active {
+      color: $primary;
+      background-color: $bg_light;
+    }
+    &:hover:not([disabled]) {
+      background-color: $neutral_subtle;
+    }
+    &:disabled {
+      .pb_icon_kit {
+        color: $border_light;
+      }
+    }
+    &:focus-visible {
+      outline: none !important;
+    }
+  }
+
+  .toolbar {
+    border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
+    border: 1px solid $border_light;
+    overflow-x: auto;
+    &_block {
+      gap: $space_xs;
+    }
+    .editor-dropdown-button {
+      background: transparent;
+      border: none;
+      color: $text_lt_light;
+      cursor: pointer;
+      font-weight: $light;
+      padding: ($space_xs - 1) 0px;
+      width: $space_xl * 3;
+      &:focus-visible {
+        box-shadow: unset;
+      }
+    }
+  }
+
+  .ProseMirror {
+    background: $white;
+    border: 1px solid $border_light;
+    border-top-color: transparent;
+    border-bottom-right-radius: $border_rad_heaviest;
+    border-bottom-left-radius: $border_rad_heaviest;
+    height: 100%;
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+    line-height: $lh_loose;
+    @include transition_default;
+    :first-child {
+      margin-top: 0;
+    }
+
+    h4,
+    h5,
+    h6,
+    ul,
+    ol,
+    blockquote,
+    p {
+      margin: 1rem 0 0 0;
+    }
+
+    code {
+      font-family: monospace;
+      background: $bg_light;
+      padding: 0.1rem 0.3rem;
+      margin: 0 5px;
+      box-shadow: 0 2px 10px $shadow;
+      border-radius: 0.25rem;
+      overflow: hidden;
+      font-size: ($text_small - 1px);
+    }
+
+    pre {
+      background: $bg_dark;
+      padding: $space_sm;
+      border-radius: $border_rad_heaviest;
+      margin: 1.5rem 0 2rem 0;
+      code {
+        background: transparent;
+        box-shadow: none;
+        border: 0;
+        color: #faf6e4;
+      }
+    }
+    a {
+      color: $primary;
+      border-bottom: 1px solid $primary;
+      &:hover {
+        color: $text_lt_default;
+        border-bottom: 1px solid $text_lt_default;
+      }
+    }
+    blockquote {
+      font-size: $font_larger;
+      padding: $space_sm $space_md;
+      font-style: italic;
+      p {
+        margin: 0;
+      }
+    }
+    &:focus-visible {
+      outline: unset;
+      border-top-color: $primary;
+      @include transition_default;
+    }
+    h1 {
+      font-size: $text_largest;
+      line-height: $text_larger;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 2.1rem 0 0 0;
+    }
+    h2 {
+      font-size: $text_larger;
+      line-height: $text_larger;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 1.9rem 0 0 0;
+    }
+    h3 {
+      font-size: $text_large;
+      line-height: $text_large;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 1.7rem 0 0 0;
+    }
+    h4,
+    h5,
+    h6 {
+      font-size: $text_base;
+      line-height: $text_base;
+      letter-spacing: $lspace_tight;
+      font-weight: $bolder;
+    }
+    hr {
+      margin: 2.2rem 0;
+      box-sizing: content-box;
+      overflow: hidden;
+      background: transparent;
+      border-bottom: 1px solid $transparent;
+      height: 1px;
+      padding: 0;
+      background-color: $border_light;
+      border: 0;
+    }
+    ol {
+      margin: 1rem 0 0 0;
+      padding-left: $space_md;
+      list-style: decimal;
+      li {
+        margin: 2px 0;
+        p {
+          margin: 0;
+        }
+      }
+    }
+    ul {
+      list-style-position: disc;
+      margin: 1rem 0 0 0;
+      padding-left: $space_md;
+      li {
+        margin: 2px 0;
+        p {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+.pb_tiptap_toolbar_dropdown_list_item {
+  &.is-active,
+  &:active {
+    color: $primary;
+    background-color: $bg_light;
+    border-radius: unset !important;
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_icon_left {
+      color: $primary !important;
+    }
+  }
+  &:hover {
+    background-color: $neutral_subtle;
+    border-radius: unset !important;
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_icon_left {
+      background-color: unset;
+      color: $text_lt_light !important;
+    }
+    .pb_nav_list_item_link {
+      background-color: unset !important;
+    }
+  }
+}
+.pb_rich_text_editor_advanced_container {
+  transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
+  &:focus-visible,
+  &:focus-within {
+    outline: unset;
+    box-shadow: 0 0 0 1px $primary;
+    border-radius: $border_rad_heaviest;
+    transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
+  }
+}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md

@@ -0,0 +1 @@
+NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/visual_guidelines/max_width) to override this default, as necessary.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { RichTextEditor } from '../..'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedDefault = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      } 
+
+      
+
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedDefault

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md

@@ -0,0 +1,4 @@
+The advanced variant leverages Tiptap to unlock additional UI options (e.g., consolidated nav toolbar, styling, etc.) as well as several extensions (see [Tiptap docs](https://tiptap.dev/extensions) for more). To leverage this variant, Tiptap __must be installed__ in your project. Complete docs for using the library can be found [here](https://tiptap.dev/). To get started with this variant, see the Code Example below for required imports as well as the basic setup. 
+
+
+NOTE: Once the Tiptap editor is initialized as shown below, you must pass that instance to the kit via the `advancedEditor` prop. 

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

@@ -13,6 +13,7 @@ examples:
 
   react:
   - rich_text_editor_default: Default
+  - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus

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

@@ -7,3 +7,4 @@ export { default as RichTextEditorTemplates } from './_rich_text_editor_template
 export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
 export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
+export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)
+})