playbook_ui_docs 14.16.0.pre.rc.6 → 14.17.0.pre.rc.1

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb

@@ -0,0 +1,22 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    name_style: "body",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    name_style: "detail",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { User } from 'playbook-ui'
+
+const UserFontOptions = (props) => {
+  return (
+    <div>
+      <div className="pb--doc-demo-row">
+        <div>
+          <User
+              align="center"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              nameStyle= "body"
+              orientation="horizontal"
+              size= "md"
+              territory= "PHL"
+              title="Remodeling Consultant"
+              {...props}
+          />
+        </div>
+
+        <div>
+          <User
+              align="left"
+              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              name="Anna Black"
+              nameStyle= "detail"
+              orientation="horizontal"
+              size= "md"
+              territory= "PHL"
+              title= "Remodeling Consultant"
+              {...props}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UserFontOptions

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

@@ -0,0 +1,5 @@
+Passing a `name_style` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
+
+Passing a `title_style` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
+
+The size of the `caption` is determined by the `size` prop.

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

@@ -0,0 +1,5 @@
+Passing a `nameStyle` prop changes the type kit used for the user name. You can choose between `title`, `body`, `caption`, and `detail`. `title` is the default.
+
+Passing a `titleStyle` prop changes the type kit used for the user title. You can choose between `body`, `caption`, and `detail`. `body` is the default.
+
+The size of the `caption` is determined by the `size` prop.

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

@@ -9,6 +9,7 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_rails: Block Content Subtitle
+  - user_font_options: Font Options
 
   react:
   - user_default: Default
@@ -19,6 +20,7 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
+  - user_font_options: Font Options
 
   swift:
   - user_horizontal_swift: Horizontal

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

@@ -6,3 +6,4 @@ export { default as UserSize } from './_user_size.jsx'
 export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 export { default as UserSubtitle } from './_user_subtitle.jsx'
 export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
+export { default as UserFontOptions } from './_user_font_options.jsx'