playbook_ui 14.6.1 → 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4296

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

data/app/pb_kits/playbook/pb_link/link.test.jsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { ensureAccessible, renderKit, render, screen } from '../utilities/test-utils'
+
+import { Link } from 'playbook-ui'
+
+const link = 'https://www.google.com'
+
+const props = {
+  data: { testid: 'default' },
+  href: link,
+}
+
+test('returns namespaced class name', () => {
+  const kit = renderKit(Link , props)
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_link_kit')
+  expect(kit).toHaveAttribute('href', link)
+})
+
+it("should be accessible", async () => {
+  ensureAccessible(Link, props)
+})
+
+test('with colors', () => {
+  ['default', 'body', 'muted', 'destructive'].forEach((color) => {
+    const testId = `colors-test-${color}`
+    render(
+      <Link
+          color={color}
+          data={{ testid: testId }}
+          text="Test colors"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_link_kit_${color}`)
+  })
+})
+
+test('disable prop', () => {
+  render(
+      <Link
+          data={{ testid: 'disable-test' }}
+          disabled
+      />
+  )
+
+  const kit = screen.getByTestId('disable-test')
+
+  expect(kit).toHaveClass('pb_link_kit_disabled')
+})
+
+test('underline prop', () => {
+  render(
+      <Link
+          data={{ testid: 'underline-test' }}
+          underline
+      />
+  )
+
+  const kit = screen.getByTestId('underline-test')
+
+  expect(kit).toHaveClass('pb_link_kit_underline')
+})
+
+test('adds icon', () => {
+  render(
+      <Link
+          data={{ testid: 'icon-test' }}
+          icon="arrow-up-right-from-square"
+      />
+  )
+
+  const kit = screen.getByTestId('icon-test')
+
+  const icon = kit.querySelector('.pb_icon_kit')
+  expect(icon).toBeInTheDocument();
+})
+
+test('adds icon right', () => {
+  render(
+      <Link
+          data={{ testid: 'icon-right-test' }}
+          iconRight="chevron-right"
+      />
+  )
+
+  const kit = screen.getByTestId('icon-right-test')
+
+  const icon = kit.querySelector('.pb_icon_kit')
+  expect(icon).toBeInTheDocument();
+})

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -1,3 +1,5 @@
+@import "../tokens/colors";
+
 $font_family_base: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
 
 /* CLEAN UP AND REMOVE */
@@ -51,3 +53,36 @@ $boldest:       700 !default;
 $bolder:        700 !default;
 $light:         300 !default;
 $lighter:       300 !default;
+
+/* Link Colors */
+$pb_link_colors: (
+  default:        $primary_action,
+  body:           $text_lt_default,
+  muted:          $text_lt_light,
+  destructive:    $error,
+);
+
+$pb_link_hover_colors: (
+  default:        $text_lt_default,
+  body:           $primary_action,
+  muted:          $text_lt_default,
+  destructive:    $text_lt_default,
+);
+
+$pb_dark_link_colors: (
+  default:        $active_dark,
+  body:           $text_dk_default,
+  muted:          $text_dk_light,
+  destructive:    $error_dark,
+);
+
+$pb_dark_link_hover_colors: (
+  default:        $text_dk_default,
+  body:           $active_dark,
+  muted:          $text_dk_default,
+  destructive:    $text_dk_default,
+);
+
+@mixin pb_link($color: $primary_action) {
+  color: $color;
+}