playbook_ui 13.14.0.pre.alpha.PLAY1109bugdisplaypropblocksfontcolor1784 → 13.14.0.pre.alpha.play1101betaicons1825

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8ffc4f97c395ad7ccf46927ac7de9951900347fa14517d3b2eb2c630e22cb359
-  data.tar.gz: '04629c19a8a33d87804cfec3191d24fd45e5014c29d869a291143255b89a39fe'
+  metadata.gz: c0691ea09bf36304c045cc08897545b9c002c1c4c31c9670566bfa92fcc42f66
+  data.tar.gz: 968247f2c5bc1d7ba589a63657ca4167c91fc63113e1c74009fda6bbe9b18525
 SHA512:
-  metadata.gz: be32d4c62bbc74d86831742b40ac3d6d55539f75d6bd6a624ac07cccf4ce5ac6bc061390062f6c5774f2d4b7f8c48db59c414eaf20adc7c6ee73b406eeeb57d8
-  data.tar.gz: 3eb126af7f71f54853bdc7810c0f67a312fbd4e182f04a65e8a4bfb076dc5b1354cbe5e458417632ff3baaa12772633db4396aef979022c72500f8c4fd14ff9d
+  metadata.gz: 3d1144ce8d889ad0f3e664b2b2b59f39fb311cc3ba7061a86c78aaf280576f06ad765882b33cfdb4057a60e9c0ebb55be088b48e9db4e337975f3ee690714f13
+  data.tar.gz: a13cf6459ce4f8b9d31357ec8ddd4ab433a59948dcbfeb91a89b33641ec3d2dab6ea9e397635b5b8424d7974bbdcfed8494439b12110b7da4690897ad4c06c6c

data/app/pb_kits/playbook/_playbook.scss

@@ -114,5 +114,6 @@
 @import './utilities/hover';
 @import './utilities/text_align';
 @import './utilities/overflow';
+@import './utilities/truncate';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/index.js

@@ -9,6 +9,7 @@ export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar
 export { default as Background } from './pb_background/_background'
 export { default as Badge } from './pb_badge/_badge'
 export { default as BarGraph } from './pb_bar_graph/_bar_graph'
+export { default as BetaIcon } from './pb_beta_icon/_icon'
 export { default as Body } from './pb_body/_body'
 export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
 export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
@@ -142,4 +143,4 @@ export { default as scale } from './tokens/exports/_scale.scss'
 export { default as screenSizes } from './tokens/exports/_screen_sizes.scss'
 export { default as shadows } from './tokens/exports/_shadows.scss'
 export { default as spacing } from './tokens/exports/_spacing.scss'
-export { default as typography } from './tokens/exports/_typography.scss'
+export { default as typography } from './tokens/exports/_typography.scss'

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -12,7 +12,7 @@ export type AvatarProps = {
   className?: string,
   data?: {[key: string]: string},
   dark?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -32,7 +32,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     className,
     data = {},
     htmlOptions = {},
-    name = null,
+    name = undefined,
     id = '',
     imageAlt = '',
     imageUrl,
@@ -40,8 +40,8 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     status = null,
     dark = false,
   } = props
-  const dataProps: {[key: string]: any} = buildDataProps(data)
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_avatar_kit', `size_${size}`),
@@ -50,7 +50,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
   )
 
   const initials = name && firstTwoInitials(name)
-  dataProps['data-initials'] = initials
+  dataProps['data-initials'] = (initials as string)
 
   const [error, setError] = useState(false)
   const handleError = () => setError(true)

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -19,8 +19,8 @@ type AvatarActionButtonProps = {
   linkAriaLabel?: string,
   className?: string,
   dark?: boolean,
-  data?: Object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -31,7 +31,7 @@ type AvatarActionButtonProps = {
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
 }
 
-const AvatarActionButton = (props: AvatarActionButtonProps) => {
+const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
   const {
     action = 'add',
     aria = {},

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -23,7 +23,7 @@ type BackgroundProps = {
   className?: string,
   customColor?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
@@ -63,7 +63,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
   return prop?.default || undefined;
 };
 
-const Background = (props: BackgroundProps) => {
+const Background = (props: BackgroundProps): React.ReactElement => {
   const {
     alt = '',
     aria = {},
@@ -144,13 +144,13 @@ const Background = (props: BackgroundProps) => {
   
   return (
     <Tag
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      alt={alt}
-      className={classes}
-      id={id}
-      style={backgroundStyle}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        alt={alt}
+        className={classes}
+        id={id}
+        style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -19,7 +19,7 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
@@ -27,7 +27,7 @@ type BadgeProps = {
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
 } & GlobalProps
-const Badge = (props: BadgeProps) => {
+const Badge = (props: BadgeProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -19,9 +19,9 @@ type BarGraphProps = {
   yAxisMax: number;
   chartData: { name: string; data: number[] }[];
   className?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
-  id: any;
-  pointStart: number | any;
+  id: string;
+  pointStart: number;
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   subTitle?: string;
   title: string;
   type?: string;

data/app/pb_kits/playbook/pb_beta_icon/_icon.scss

@@ -0,0 +1,12 @@
+// Rails custom icon styles
+svg.pb_custom_icon {
+  width: 1em;
+  fill: currentColor;
+  path {
+    fill: currentColor;
+  }
+}
+
+.pb_icon_kit_emoji {
+  font-family: monospace;
+}

data/app/pb_kits/playbook/pb_beta_icon/_icon.tsx

@@ -0,0 +1,164 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { isValidEmoji } from '../utilities/validEmojiChecker'
+
+export type IconSizes = "lg"
+| "xs"
+| "sm"
+| "1x"
+| "2x"
+| "3x"
+| "4x"
+| "5x"
+| "6x"
+| "7x"
+| "8x"
+| "9x"
+| "10x"
+| ""
+
+type IconProps = {
+  aria?: {[key: string]: string},
+  border?: string,
+  className?: string,
+  customIcon?: {[key: string] :SVGElement},
+  data?: {[key: string]: string},
+  fixedWidth?: boolean,
+  flip?: "horizontal" | "vertical" | "both" | "none",
+  icon: string,
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  inverse?: boolean,
+  listItem?: boolean,
+  pull?: "left" | "right" | "none",
+  pulse?: boolean,
+  rotation?: 90 | 180 | 270,
+  size?: IconSizes,
+  fontStyle?: 'far' | 'fas' | 'fab' | 'fak',
+  spin?: boolean,
+} & GlobalProps
+
+const flipMap = {
+  horizontal: 'fa-flip-horizontal',
+  vertical: 'fa-flip-vertical',
+  both: 'fa-flip-horizontal fa-flip-vertical',
+  none: ""
+}
+
+const Icon = (props: IconProps) => {
+  const {
+    aria = {},
+    border = false,
+    className,
+    customIcon,
+    data = {},
+    fixedWidth = true,
+    flip = "none",
+    htmlOptions = {},
+    icon,
+    id,
+    inverse = false,
+    listItem = false,
+    pull,
+    pulse = false,
+    rotation,
+    size,
+    fontStyle = 'far',
+    spin = false,
+  } = props
+
+  const faClasses = {
+    'fa-border': border,
+    'fa-fw': fixedWidth,
+    'fa-inverse': inverse,
+    'fa-li': listItem,
+    'fa-pulse': pulse,
+    'fa-spin': spin,
+    [`fa-${size}`]: size,
+    [`fa-pull-${pull}`]: pull,
+    [`fa-rotate-${rotation}`]: rotation,
+
+  }
+
+  // Lets check and see if the icon prop is referring to a custom Power icon...
+  // If so, then set fa-icon to "custom"
+  // this ensures the JS will not do any further operations
+  // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
+  if (!customIcon) faClasses[`fa-${icon}`] = icon
+  
+  const classes = classnames(
+    flipMap[flip],
+    'pb_icon_kit',
+    customIcon ? '' : fontStyle,
+    faClasses,
+    globalProps(props),
+    className
+  )
+
+  const classesEmoji = classnames(
+    'pb_icon_kit_emoji',
+    globalProps(props),
+    className
+  )
+
+  aria.label ? null : aria.label = `${icon} icon`
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
+  // Add a conditional here to show only the SVG if custom
+  const displaySVG = (customIcon: any) => {
+    if (customIcon)
+      return (
+        <>
+          {
+            React.cloneElement(customIcon, {
+              ...dataProps,
+              ...htmlProps,
+              className: classes,
+              id,
+            })
+          }
+        </>
+      )
+    else if (isValidEmoji(icon))
+      return (
+        <>
+          <span
+              {...dataProps}
+              {...htmlProps}
+              className={classesEmoji}
+              id={id}
+          >
+            {icon}
+          </span>
+        </>
+      )
+
+    else
+      return (
+        <>
+          <i
+              {...dataProps}
+              {...htmlProps}
+              className={classes}
+              id={id}
+          />
+          <span
+              {...ariaProps}
+              hidden
+          />
+        </>
+      )
+  }
+
+  return (
+    <>
+      {displaySVG(customIcon)}
+    </>
+  )
+}
+
+export default Icon

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

@@ -0,0 +1 @@
+An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.

data/app/pb_kits/playbook/pb_beta_icon/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.html.erb

@@ -0,0 +1,3 @@
+<p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
+<br/>
+<p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconAnimate = (props) => {
+  return (
+    <div>
+      <p>
+        <Icon
+            fixedWidth
+            icon="spinner"
+            size="2x"
+            spin
+            {...props}
+        />
+        {' '}
+        <span>{'Spin'}</span>
+      </p>
+      <br />
+      <p>
+        <Icon
+            fixedWidth
+            icon="spinner"
+            pulse
+            size="2x"
+            {...props}
+        />
+        {' '}
+        <span>{'Pulse'}</span>
+      </p>
+    </div>
+  )
+}
+
+export default IconAnimate

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.md

@@ -0,0 +1 @@
+A spinner icon can show a user that something is loading or saving.

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconBorder = (props) => {
+  return (
+    <div>
+      <Icon
+          border
+          fixedWidth
+          icon="user"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconBorder

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border_swift.md

@@ -0,0 +1,7 @@
+![card-border](https://github.com/powerhome/playbook/assets/92755007/442640c8-1b4f-455d-8517-5ca5cd120664)
+
+```swift
+
+PbBetaIcon(FontAwesome.user, border: true)
+
+```

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.html.erb

@@ -0,0 +1,16 @@
+<%# SVG fill color inherited from css color property %>
+<div class="icon-wrapper">
+
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+  <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
+
+  <%= pb_rails("body", props: {
+    text: "Custom icons are compatible with other icon props (size, rotation,
+    spin, flip, etc). Their SVG fill colors will be inherited from
+    parent element's css color properties."
+  } ) %>
+</div>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Icon } from '../../'
+
+// import Icons as config from 'power-icons'
+const config = {
+  moon: (
+    <svg
+        ariaHidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+          fill="currentColor"
+      />
+    </svg>
+  ),
+}
+
+const IconCustom = (props) => {
+  return (
+    <div>
+      <Icon
+          customIcon={config.moon}
+          size="7x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconCustom

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.md

@@ -0,0 +1,19 @@
+# Tips for Custom Icons
+
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
+
+### React
+
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+
+### Rails
+
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconDefault = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          icon="user"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconDefault

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default_swift.md

@@ -0,0 +1,7 @@
+![card-default](https://github.com/powerhome/playbook/assets/92755007/8c7e5454-1d42-4d13-9107-ffc5773a136a)
+
+```swift
+
+PbBetaIcon.fontAwesome(.user, size: .x1)
+
+```

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x"  }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
+
+const IconFaKit = (props) => {
+  return (
+    <div>
+      <Icon
+          {...props}
+          fixedWidth
+          fontStyle="fak"
+          icon="powergon"
+          size="5x"
+      />
+    </div>
+  )
+}
+
+export default IconFaKit

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.md

@@ -0,0 +1,7 @@
+Our Icon kit allows integration with [FontAwesome's custom kit](https://fontawesome.com/v6/docs/web/setup/use-kit#contentHeader) functionality out-of-the-box. 
+
+All you need to do is 3 things:
+1) Import your custom-icon.js file as outlined in the FontAwesome docs.
+2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon. 
+3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
+

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconFlip = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          flip="horizontal"
+          icon="question-circle"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          flip="vertical"
+          icon="question-circle"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          flip="both"
+          icon="question-circle"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconFlip

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip_swift.md

@@ -0,0 +1,11 @@
+![icon-flipped](https://github.com/powerhome/playbook/assets/92755007/2776fb83-942d-4a38-9dff-9dcb73940dfe)
+
+```swift
+
+ HStack(spacing: Spacing.xSmall) {
+  PbBetaIcon(FontAwesome.questionCircle, flipped: [.horizontal])
+  PbBetaIcon(FontAwesome.questionCircle, flipped: [.vertical])
+  PbBetaIcon(FontAwesome.questionCircle, flipped: [.horizontal, .vertical])
+}
+
+```

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Icon** | `PlaybookGenericIcon` | Sets the kit's Icon |  |  |
+| **Size** | `IconSize` | Changes the size of the Icon | `.x1` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **Rotation** | `IconRotation` | Rotates the Icon | `.zero` | `.zero` `.right` `.straight` `.obtuse` |
+| **Border** | `Bool` | Adds a border | `false` | `true` `false` |
+| **Flipped** | `[Axis]` | Flips the Icon | `nil` | `[.horizontal]` `[.vertical]` `[.horizontal, .vertical]` |

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("icon", props: { icon: "arrow-left", pull: "left", fixed_width: true, size: "2x" }) %>
+<%= pb_rails("icon", props: { icon: "arrow-right", pull: "right", fixed_width: true, size: "2x" }) %>

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import Icon from '../_icon'
+
+const IconPull = (props) => {
+  return (
+    <div>
+      <Icon
+          fixedWidth
+          icon="arrow-left"
+          pull="left"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          fixedWidth
+          icon="arrow-right"
+          pull="right"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconPull

data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.md

@@ -0,0 +1 @@
+Icon Pull can be used to indicate that the user can perform a pull action.