playbook_ui 13.14.0 → 13.15.0.pre.alpha.PLAY11311893

data/app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md

@@ -0,0 +1,37 @@
+![user-horizontal](https://github.com/powerhome/playbook/assets/92755007/63680051-6a88-4ae7-bffd-74d8e9b3a805)
+
+```swift
+
+let img = Image("andrew", bundle: .module)
+let name = "Andrew K"
+let title = "Rebels Developer"
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBUser(
+    name: name,
+    image: img,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    size: .small,
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    size: .small
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **name** | `String` | Sets the User's name |  |  |
+| **displayAvatar** | `Bool` | Displays the User's avatar | `true` | `true` `false` |
+| **image** | `Image` | Sets image for the avatar |  |  |
+| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
+| **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
+| **territory** | `String` | Adds the User's territory |  |  |
+| **title** | `String` | Adds a title |  |  |

data/app/pb_kits/playbook/pb_user/docs/_user_size_swift.md

@@ -0,0 +1,35 @@
+![user-size](https://github.com/powerhome/playbook/assets/54749071/ed012a15-64a1-4c13-a0bc-7457660992f6)
+
+
+```swift
+
+let img = Image("andrew", bundle: .module)
+let name = "Andrew K"
+let title = "Rebels Developer"
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBUser(
+    name: name,
+    image: img,
+    size: .small,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    size: .large,
+    territory: "PHL",
+    title: title
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_user/docs/_user_text_only_swift.md

@@ -0,0 +1,27 @@
+![user-text-only](https://github.com/powerhome/playbook/assets/54749071/ba04df54-6590-4db6-ad32-38932a08aced)
+
+
+```swift
+
+let img = Image("andrew", bundle: .module)
+let name = "Andrew K"
+let title = "Rebels Developer"
+
+VStack(spacing: Spacing.small) {
+  PBUser(
+    name: name,
+    displayAvatar: false,
+    size: .large,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    displayAvatar: false,
+    territory: "PHL",
+    title: title
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size_swift.md

@@ -0,0 +1,35 @@
+![user-verticle-size](https://github.com/powerhome/playbook/assets/54749071/e99b4c9b-0752-467e-971e-a6a5f520009e)
+
+
+```swift
+
+let img = Image("andrew", bundle: .module)
+let name = "Andrew K"
+let title = "Rebels Developer"
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBUser(
+    name: name,
+    image: img,
+    orientation: .vertical,
+    size: .small,
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    orientation: .vertical,
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    orientation: .vertical,
+    size: .large,
+    title: title
+  )
+}
+
+```

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

@@ -17,3 +17,10 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
+
+  swift:
+  - user_horizontal_swift: Horizontal
+  - user_vertical_size_swift: Vertical
+  - user_text_only_swift: Text Only
+  - user_size_swift: Horizontal Size
+  - user_props_table: ""

data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx

@@ -10,7 +10,7 @@ type UserBadgeProps = {
   badge?: "million-dollar" | "veteran",
   className?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "sm" | "md" | "lg",
 }

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx

@@ -14,7 +14,7 @@ type WalkthroughProps = {
   className?: string,
   continuous?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   run?: boolean,
   steps?: [],

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx

@@ -16,7 +16,7 @@ type WeekdayStackedProps = {
   dark?: boolean,
   data?: object,
   date: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: "day_only" | "month_day" | "expanded",
   compact?: boolean,

data/app/pb_kits/playbook/tokens/exports/exports.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

data/app/pb_kits/playbook/utilities/_truncate.scss

@@ -0,0 +1,20 @@
+$truncate-styles: (
+  truncate_1: 1,
+  truncate_2: 2,
+  truncate_3: 3,
+  truncate_4: 4,
+  truncate_5: 5
+);
+
+@mixin apply_truncate_styles($number) {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $number;
+  -webkit-box-orient: vertical;
+}
+
+@each $class, $number in $truncate-styles {
+  .#{$class} {
+    @include apply_truncate_styles($number);
+  }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -135,6 +135,11 @@ overflowY?: OverflowTypes,
 overflow?: OverflowTypes
 }
 
+type TruncateType = None | 1 | 2 | 3 | 4 | 5
+type Truncate = {
+  truncate?: TruncateType
+}
+
 type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
@@ -146,7 +151,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & ZIndex & { hover?: string };
+  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string };
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -269,7 +274,13 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += overflowY ? `overflow_y_${overflowY}` : ''
     return css
   },
-
+  truncateProps: ({ truncate }: Truncate) => {
+    if (typeof truncate === 'object') {
+      return ''
+    } else {
+      return truncate ? `truncate_${truncate}` : ''
+    }
+  },
   darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''

data/app/pb_kits/playbook/utilities/props.ts

@@ -57,8 +57,8 @@ export const buildCss = (...rules: (string | { [x: string]: string | boolean; })
  * @returns {Object} an object holding the HTML valid props and their values.
  */
 
-export const buildHtmlProps = (htmlOptions: { [key: string]: string | number | boolean | Function }) => {
-  const htmlProps: { [attr: string]: string | number | boolean | Function } = {}
+export const buildHtmlProps = (htmlOptions: { [key: string]: string | number | boolean | (() => void)}) => {
+  const htmlProps: { [attr: string]: string | number | boolean | (() => void) } = {}
   Object.keys(htmlOptions).forEach((key) => {
     htmlProps[key] = htmlOptions[key]
   })

data/app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+
+import Body from '../../../pb_body/_body'
+
+const testSubject = 'body'
+
+test('Global Props: Returns corrrect truncate class name', () => {
+  for(let x = 1, y = 5; x <= y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          text="Hi"
+          truncate={`${x}`}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`truncate_${x}`)
+  }
+})