playbook_ui 14.6.2 → 14.7.0.pre.alpha.PBNTR637quickpickdefaultdate4492

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -13,7 +13,30 @@
     id: "typeahead-form-pill",
     is_multi: true,
     options: names,
-    label: "Names",
+    label: "Truncation Within Typeahead",
     pills: true,
     truncate: 1,
 }) %>
+
+<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
+<%= pb_rails("card", props: { max_width: "xs" })  do %>
+  <%= pb_rails("form_pill", props: {
+      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      tabindex: 0,
+      truncate: 1,
+      id: "truncation-1"
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      icon: "badge-check",
+      text: "icon and a very long tag to show truncation",
+      tabindex: 0,
+      truncate: 1,
+      id: "truncation-2"
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      text: "form pill long tag no tooltip show truncation",
+      tabindex: 0,
+      truncate: 1,
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
       <Typeahead
           htmlOptions={{ style: { maxWidth: "240px" }}}
           isMulti
-          label="Names"
+          label="Truncation Within Typeahead"
           options={names}
           truncate={1}
           {...props}
       />
+      <Caption text="Form Pill Truncation"/>
+      <Card maxWidth="xs">
+        <FormPill
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
+            onClick={() => alert('Click!')}
+            tabIndex={0}
+            truncate={1}
+        />
+        <FormPill
+            icon="badge-check"
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="icon and a very long tag to show truncation"
+            truncate={1}
+        />
+        <FormPill
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="form pill with a very long tag to show truncation"
+            truncate={1}
+        />
+      </Card>
     </>
   )
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -0,0 +1,3 @@
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+
+__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -0,0 +1 @@
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,19 +1,57 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
-    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+    <% if object.truncate %>
+      <div>
+        <%= pb_rails("title", props: { 
+          classname: "pb_form_pill_text truncate_#{object.truncate}",
+          id: object.id,
+          size: 4, 
+          text: object.name,
+        }) %>
+        <% if object.id.present? %>
+          <%= pb_rails("tooltip", props: {
+            position: "top",
+            tooltip_id: "tooltip-#{object.id}",
+            trigger_element_selector: "##{object.id}"
+          }) do %>
+            <%= object.name %>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
+    <% end %>
     <% if object.icon.present? %>
       <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
-      <% if object.icon.present? %>
-        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
-      <% end %>
-      <% if object.text.present? %>
-        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-      <% end %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+    <% end %>
+    <% if object.truncate %>
+      <div>
+        <%= pb_rails("title", props: { 
+          classname: "pb_form_pill_tag truncate_#{object.truncate}",
+          id: object.id,
+          size: 4, 
+          text: object.text,
+        }) %>
+        <% if object.id.present? %>
+          <%= pb_rails("tooltip", props: {
+            position: "top",
+            tooltip_id: "tooltip-#{object.id}",
+            trigger_element_selector: "##{object.id}"
+          }) do %>
+            <%= object.text %>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
+    <% end %>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
     <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -0,0 +1,66 @@
+@import "../tokens/colors";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+@import "../tokens/border_radius";
+
+[class^=pb_link_kit]{
+  @include pb_link($primary);
+  &:hover {
+    color: $text_lt_default;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    border-radius: $border_rad_light;
+    outline: 1px solid $primary;
+    outline-offset: 2px;
+  }
+  &:visited {
+    color: $data_3;
+  }
+  &.dark  {
+    @include pb_link($active_dark);
+    &:hover {
+      color: $text_dk_default;
+    }
+  }
+  @each $color_name, $color_value in $pb_link_colors {
+    &[class*=_#{"" + $color_name}] {
+      @include pb_link($color_value);
+
+      &:hover {
+        color: map-get($pb_link_hover_colors, $color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  @each $dark_color_name, $dark_color_value in $pb_dark_link_colors{
+    &[class*=_#{$dark_color_name}][class*=dark]{
+      @include pb_link($dark_color_value);
+      
+      &:hover {
+        color: map-get($pb_dark_link_hover_colors, $dark_color_name);
+      }
+
+      &:visited {
+        color: $data_3;
+      }
+    }
+  }
+
+  &[class*=_underline] {
+    text-decoration: underline;
+  }
+
+  &[class*=_disabled] {
+    pointer-events: none;
+    cursor: default;
+    color: $text_lt_lighter;
+  }
+
+}

data/app/pb_kits/playbook/pb_link/_link.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
+
+import Icon from '../pb_icon/_icon'
+
+type LinkProps = {
+  aria?: {[key: string]: string},
+  className?: string,
+  children?: React.ReactChild[] | React.ReactChild,
+  color?: 'default' | 'body' | 'muted' | 'destructive',
+  dark?: boolean,
+  data?: {[key: string]: string},
+  disabled?: boolean,
+  href?: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
+  icon?: string,
+  iconRight?: string,
+  id?: string,
+  tag?: 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  text?: string,
+  underline?: boolean,
+} & GlobalProps
+
+const Link = (props: LinkProps): React.ReactElement => {
+  const {
+    aria = {},
+    children,
+    className,
+    color = '',
+    data = {},
+    disabled = false,
+    href= '',
+    htmlOptions = {},
+    icon = '',
+    iconRight = '',
+    id = '',
+    tag = 'a',
+    text = '',
+    underline = false,
+  } = props
+
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss('pb_link_kit', color, underline ? 'underline' : '', disabled ? 'disabled' : ''),
+    globalProps(props),
+    className
+  )
+  const Tag = tag as keyof JSX.IntrinsicElements
+
+  const renderContent = () => (
+    <>
+      {icon && (
+        <Icon
+            fixedWidth
+            icon={icon}
+            marginRight="xxs"
+            size="xs"
+        />
+      )}
+      {text || children}
+      {iconRight && (
+        <Icon
+            fixedWidth
+            icon={iconRight}
+            marginLeft="xxs"
+            size="xs"
+        />
+      )}
+    </>
+  )
+
+  const commonProps = {
+    ...ariaProps,
+    ...dataProps,
+    ...htmlProps,
+    className: classes,
+    id,
+  }
+
+  if (tag === 'a') {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        {renderContent()}
+      </a>
+    )
+  } else {
+    return (
+      <a
+          {...commonProps}
+          href={href}
+      >
+        <Tag>{renderContent()}</Tag>
+      </a>
+    )
+  }
+
+}
+
+export default Link

data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb

@@ -0,0 +1,30 @@
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.google.com/search?q=playbook+design+system",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.youtube.com/@PowerHRG",
+    color: "body",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
+    color: "muted",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://rubygems.org/gems/playbook_ui/",
+    color: "destructive",
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkColor = (props) => (
+  <div>
+    <div>
+      <Link
+          href="https://www.google.com/search?q=playbook+design+system"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="body"
+          href="https://www.youtube.com/@PowerHRG"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="muted"
+          href="https://github.com/powerhome/.github/blob/main/profile/README.md"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="destructive"
+          href="https://rubygems.org/gems/playbook_ui/"
+          text="link example"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkColor

data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("link", props: {
+  text: "link example",
+  href: "#disabled",
+  disabled: true,
+}) %>

data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkDisabled = (props) => (
+  <div>
+    <Link
+        disabled
+        href="#disabled"
+        text="link example"
+        {...props}
+    />
+  </div>
+)
+
+export default LinkDisabled

data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb

@@ -0,0 +1,15 @@
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "#icon",
+    icon: "arrow-up-right-from-square",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "#icon2",
+    icon_right: "chevron-right",
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkIcon = (props) => (
+  <div>
+    <div>
+      <Link
+          href="#icon"
+          icon="arrow-up-right-from-square"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          href="#icon2"
+          iconRight="chevron-right"
+          text="link example"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkIcon

data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb

@@ -0,0 +1,35 @@
+<%= pb_rails("link", props: {
+  text: "h1 link example",
+  href: "#tag",
+  icon: "arrow-up-right-from-square",
+  tag: "h1",
+}) %>
+
+<%= pb_rails("link", props: {
+  text: "h3 link example",
+  href: "#tag2",
+  tag: "h3",
+  underline: true,
+}) %>
+
+<%= pb_rails("link", props: {
+  color: "destructive",
+  text: "h6 link example",
+  href: "#tag3",
+  tag: "h6",
+}) %>
+
+<%= pb_rails("link", props: {
+  text: "p link example",
+  href: "#tag4",
+  icon_right: "chevron-right",
+  tag: "p",
+}) %>
+
+<div>
+  This is a <%= pb_rails("link", props: {
+    text: "span link example",
+    href: "#tag5",
+    tag: "span",
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkTag = (props) => (
+  <div>
+    <Link
+        href="#tag"
+        icon="arrow-up-right-from-square"
+        tag="h1"
+        text="h1 link example"
+        {...props}
+    />
+    <Link
+        href="#tag2"
+        tag="h3"
+        text="h3 link example"
+        underline
+        {...props}
+    />
+    <Link
+        color="destructive"
+        href="#tag3"
+        tag="h6"
+        text="h6 link example"
+        {...props}
+    />
+    <Link
+        href="#tag4"
+        iconRight="chevron-right"
+        tag="p"
+        text="p link example"
+        {...props}
+    />
+    <div>
+      This is a <Link
+          href="#tag5"
+          tag="span"
+          text="span link example"
+          {...props}
+    />
+    </div>
+  </div>
+)
+
+export default LinkTag

data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("link", props: {
+  text: "link example",
+  href: "#underline",
+  underline: true,
+}) %>

data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkUnderline = (props) => (
+  <div>
+    <Link
+        href="#underline"
+        text="link example"
+        underline
+        {...props}
+    />
+  </div>
+)
+
+export default LinkUnderline

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

@@ -0,0 +1,16 @@
+examples:
+  
+  rails:
+  - link_color: Color
+  - link_underline: Underline
+  - link_icon: Icon
+  - link_disabled: Disabled
+  - link_tag: Tag
+  
+  
+  react:
+  - link_color: Color
+  - link_underline: Underline
+  - link_icon: Icon
+  - link_disabled: Disabled
+  - link_tag: Tag

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

@@ -0,0 +1,5 @@
+export { default as LinkColor } from './_link_color.jsx'
+export { default as LinkUnderline } from './_link_underline.jsx'
+export { default as LinkIcon } from './_link_icon.jsx'
+export { default as LinkDisabled } from './_link_disabled.jsx'
+export { default as LinkTag } from './_link_tag.jsx'

data/app/pb_kits/playbook/pb_link/link.html.erb

@@ -0,0 +1,21 @@
+<% link_content = proc do %>
+  <% if object.icon.present? %>
+    <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true, size: "xs", margin_right: "xxs" }) %>
+  <% end %>
+  <%= object.content %>
+  <% if object.icon_right.present? %>
+    <%= pb_rails("icon", props: { icon: object.icon_right, fixed_width: true, size: "xs", margin_left: "xxs" }) %>
+  <% end %>
+<% end %>
+
+<% if object.tag == "a" %>
+  <%= pb_content_tag(object.tag, { href: object.href }) do %>
+    <%= link_content.call %>
+  <% end %>
+<% else %>
+  <%= pb_content_tag(:a, { href: object.href }) do %>
+    <%= content_tag(object.tag) do %>
+      <%= link_content.call %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_link/link.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbLink
+    class Link < ::Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default body muted destructive],
+                   default: "default"
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
+      prop :href
+      prop :icon
+      prop :icon_right
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[a h1 h2 h3 h4 h5 h6 p span div],
+                 default: "a"
+      prop :text
+      prop :underline, type: Playbook::Props::Boolean,
+                       default: false
+
+      def classname
+        generate_classname("pb_link_kit", color_class, underline_class, disabled_class)
+      end
+
+      def content
+        text
+      end
+
+    private
+
+      def color_class
+        color == "default" ? nil : color
+      end
+
+      def disabled_class
+        disabled ? "disabled" : nil
+      end
+
+      def underline_class
+        underline ? "underline" : nil
+      end
+    end
+  end
+end