playbook_ui 14.7.0.pre.alpha.spacingquickchange4482 → 14.7.0.pre.rc.0

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

@@ -1,66 +0,0 @@
-@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

@@ -1,107 +0,0 @@
-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

@@ -1,30 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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

@@ -1,35 +0,0 @@
-<%= 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

@@ -1,45 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,21 +0,0 @@
-<% 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

@@ -1,44 +0,0 @@
-# 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

@@ -1,92 +0,0 @@
-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/pb_skeleton_loading/_skeleton_loading.scss

@@ -1,37 +0,0 @@
-@import 'skeleton_loading_mixins';
-
-.pb_skeleton_loading {
-    display: "flex";
-    flex-direction: "column";
-    height: 100%;
-    .color_default {
-        @include skeleton-shimmer($silver);
-    }
-    .color_white {
-        @include skeleton-shimmer-light($white);
-    }
-    .dark {
-        @include skeleton-shimmer($border_dark);
-    }
-    .gap_xxs {
-        margin-top: 4px;
-    }
-    .gap_xs {
-        margin-top: 8px;
-    }
-    .gap_sm {
-        margin-top: 16px;
-    }
-    .gap_md {
-        margin-top: 24px;
-    }
-    .gap_lg {
-        margin-top: 32px;
-    }
-    .gap_xl {
-        margin-top: 40px;
-    }
-    .gap_xxl {
-        margin-top: 48px;
-    }
-}